import { api } from '../api.js'; import { showToast } from '../components/toast.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 = `

Device

Start Date

End Date

Select a date range and click Load Report

`; document.getElementById('loadReportBtn').onclick = loadReport; loadReport(); // Auto-load on page render 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 = '

Loading...

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

Total Plays

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

Total Hours

${summary.overall.total_hours}

Unique Content

${summary.overall.unique_content}

Active Devices

${summary.overall.unique_devices}

Avg Duration

${formatDuration(summary.overall.avg_duration_sec)}

Plays per Day

Plays by Hour

Top Content

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

Content	Plays	Total Hours	Completion
${c.content_name \|\| 'Unknown'}	${c.plays}	${(c.total_seconds / 3600).toFixed(1)}	${c.plays > 0 ? Math.round((c.completed_plays / c.plays) * 100) : 0}%
No data

By Device

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

Device	Plays	Total Hours
${d.device_name}	${d.plays}	${(d.total_seconds / 3600).toFixed(1)}
No data

`; // Render daily chart renderBarChart('dailyChart', summary.by_day.map(d => ({ label: new Date(d.day).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }), value: d.plays }))); // Render hourly chart 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 = `

Error

${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() {}