import { api } from '../api.js'; import { showToast } from '../components/toast.js'; import { esc } from '../utils.js'; import { t } from '../i18n.js'; const API = (url, opts = {}) => fetch('/api' + url, { headers: { Authorization: `Bearer ${localStorage.getItem('token')}`, ...opts.headers }, ...opts }).then(r => r.json()); export async function render(container) { const devices = await api.getDevices(); const today = new Date(); const thirtyDaysAgo = new Date(today); thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30); container.innerHTML = `

${t('report.device')}

${t('report.start_date')}

${t('report.end_date')}

${t('report.select_range')}

`; document.getElementById('loadReportBtn').onclick = loadReport; loadReport(); document.getElementById('exportBtn').onclick = () => { const deviceId = document.getElementById('reportDevice').value; const start = document.getElementById('reportStart').value; const end = document.getElementById('reportEnd').value; const token = localStorage.getItem('token'); window.open(`/api/reports/export?device_id=${deviceId}&start=${start}&end=${end}&token=${token}`, '_blank'); }; async function loadReport() { const deviceId = document.getElementById('reportDevice').value; const start = document.getElementById('reportStart').value; const end = document.getElementById('reportEnd').value; const content = document.getElementById('reportContent'); content.innerHTML = `

${t('common.loading')}

`; try { const summary = await API(`/reports/summary?device_id=${deviceId}&start=${start}&end=${end}`); content.innerHTML = `

${t('report.total_plays')}

${summary.overall.total_plays.toLocaleString()}

${t('report.total_hours')}

${summary.overall.total_hours}

${t('report.unique_content')}

${summary.overall.unique_content}

${t('report.active_devices')}

${summary.overall.unique_devices}

${t('report.avg_duration')}

${formatDuration(summary.overall.avg_duration_sec)}

${t('report.plays_per_day')}

${t('report.plays_by_hour')}

${t('report.top_content')}

${summary.by_content.map(c => ` `).join('') || ``}

${t('report.col.content')}	${t('report.col.plays')}	${t('report.col.total_hours')}	${t('report.col.completion')}
${c.content_name \|\| t('common.unknown')}	${c.plays}	${(c.total_seconds / 3600).toFixed(1)}	${c.plays > 0 ? Math.round((c.completed_plays / c.plays) * 100) : 0}%
${t('report.no_data')}

${t('report.by_device')}

${summary.by_device.map(d => ` `).join('') || ``}

${t('report.col.device')}	${t('report.col.plays')}	${t('report.col.total_hours')}
${d.device_name}	${d.plays}	${(d.total_seconds / 3600).toFixed(1)}
${t('report.no_data')}

`; renderBarChart('dailyChart', summary.by_day.map(d => ({ label: new Date(d.day).toLocaleDateString(undefined, { month: 'short', day: 'numeric' }), value: d.plays }))); const hourData = Array.from({ length: 24 }, (_, i) => { const found = summary.by_hour.find(h => h.hour === i); return { label: i === 0 ? '12a' : i < 12 ? i + 'a' : i === 12 ? '12p' : (i - 12) + 'p', value: found?.plays || 0 }; }); renderBarChart('hourlyChart', hourData); } catch (err) { content.innerHTML = `

${t('report.error')}

${esc(err.message)}

`; } } } function renderBarChart(containerId, data) { const container = document.getElementById(containerId); if (!container || !data.length) return; const maxVal = Math.max(...data.map(d => d.value), 1); container.innerHTML = data.map(d => `

${d.value}

${d.label}

`).join(''); } function formatDuration(seconds) { if (!seconds) return '0s'; if (seconds < 60) return Math.round(seconds) + 's'; if (seconds < 3600) return Math.round(seconds / 60) + 'm'; return (seconds / 3600).toFixed(1) + 'h'; } export function cleanup() {}