            <h1>Statistika poslechovosti</h1>
            
            <div style="display:flex; gap: 10px; margin-bottom: 20px;">
                <button onclick="showStatsTab('live')">Live Stream a Historie</button>
                <button onclick="showStatsTab('goaccess')">GoAccess (Webový server)</button>
            </div>

            <div id="stats-live" class="stats-tab" style="display:block;">
                <h3>Aktuální stav (Live)</h3>
                <div class="glass" style="padding: 20px; margin-bottom: 20px;"><canvas id="listenersChart" height="100"></canvas></div>
                <div style="text-align: right; margin-bottom: 30px;"><button onclick="syncIceCast()">Aktualizovat Live Statistiku</button></div>

                <h3>Dlouhodobá historie (Hodinové agregace)</h3>
                <div class="glass" style="padding: 20px; margin-bottom: 20px;"><canvas id="yearlyChart" height="100"></canvas></div>
                
                <h3>Návštěvnost webu (Zobrazení a Unikátní přístupy)</h3>
                <div class="glass" style="padding: 20px; margin-bottom: 20px;"><canvas id="webStatsChart" height="100"></canvas></div>
            </div>
            <div id="stats-goaccess" class="stats-tab" style="display:none;">
                <h3>Kompletní serverové statistiky webu</h3>
                <div class="glass" style="padding: 10px; height: 800px; overflow: hidden; border-radius: 15px;">
                    <iframe src="/admin/api/goaccess-proxy" style="width:100%; height:100%; border:none; border-radius: 8px;"></iframe>
                </div>
            </div>

            <script>
                let chartInstance = null;
                let yearlyChartInstance = null;
                let webChartInstance = null;
                function showStatsTab(tab) { document.querySelectorAll('.stats-tab').forEach(el => el.style.display = 'none'); document.getElementById('stats-' + tab).style.display = 'block'; }
                async function loadStats() { const res = await fetch('/admin/api/stats'); const json = await res.json(); const labels = json.data.map(d => { const date = new Date(d.timestamp); return date.getHours().toString().padStart(2,'0') + ':' + date.getMinutes().toString().padStart(2,'0') + ':' + date.getSeconds().toString().padStart(2,'0'); }); const data = json.data.map(d => d.listeners); if (chartInstance) chartInstance.destroy(); const ctx = document.getElementById('listenersChart').getContext('2d'); chartInstance = new Chart(ctx, { type: 'line', data: { labels: labels, datasets: [{ label: 'Posluchačů', data: data, borderColor: '#00d2ff', backgroundColor: 'rgba(0, 210, 255, 0.2)', borderWidth: 2, fill: true, tension: 0.4 }] }, options: { scales: { y: { beginAtZero: true, grid: { color: 'rgba(255,255,255,0.1)' }, ticks: { color: '#fff' } }, x: { grid: { color: 'rgba(255,255,255,0.1)' }, ticks: { color: '#fff' } } }, plugins: { legend: { labels: { color: '#fff' } } } } }); }
                async function loadYearlyStats() { const res = await fetch('/admin/api/stats-yearly'); const json = await res.json(); const labels = json.data.map(d => { const date = new Date(d.hour); return date.getDate() + '.' + (date.getMonth()+1) + '. ' + date.getHours() + ':00'; }); const dataAvg = json.data.map(d => d.listeners_avg); const dataPeak = json.data.map(d => d.listeners_peak); if (yearlyChartInstance) yearlyChartInstance.destroy(); const ctx = document.getElementById('yearlyChart').getContext('2d'); yearlyChartInstance = new Chart(ctx, { type: 'line', data: { labels: labels, datasets: [{ label: 'Špička posluchačů (Peak)', data: dataPeak, borderColor: '#ff4b2b', backgroundColor: 'transparent', borderWidth: 2, borderDash: [5, 5], tension: 0.4 }, { label: 'Průměr posluchačů', data: dataAvg, borderColor: '#f2c94c', backgroundColor: 'rgba(242, 201, 76, 0.2)', borderWidth: 2, fill: true, tension: 0.4 }] }, options: { scales: { y: { beginAtZero: true, grid: { color: 'rgba(255,255,255,0.1)' }, ticks: { color: '#fff' } }, x: { grid: { color: 'rgba(255,255,255,0.1)' }, ticks: { color: '#fff' } } }, plugins: { legend: { labels: { color: '#fff' } } } } }); }
                async function loadWebStats() {
                    const res = await fetch('/admin/api/stats-web'); const json = await res.json();
                    const daily = {};
                    json.data.forEach(d => {
                        if (!d.hour) return;
                        const date = d.hour.split(' ')[0];
                        if (!daily[date]) daily[date] = { views: 0, unique: 0 };
                        daily[date].views += parseInt(d.views || 0);
                        daily[date].unique += parseInt(d.unique || 0);
                    });
                    const labels = Object.keys(daily).map(date => { const parts = date.split('-'); return parts[2] + '.' + parts[1] + '.'; });
                    const dataViews = Object.values(daily).map(d => d.views);
                    const dataUnique = Object.values(daily).map(d => d.unique);
                    if (webChartInstance) webChartInstance.destroy();
                    const ctx = document.getElementById('webStatsChart').getContext('2d');
                    webChartInstance = new Chart(ctx, { type: 'bar', data: { labels: labels, datasets: [{ label: 'Zobrazení stránek', data: dataViews, backgroundColor: 'rgba(0, 210, 255, 0.6)' }, { label: 'Unikátní návštěvníci', data: dataUnique, backgroundColor: 'rgba(176, 38, 255, 0.6)' }] }, options: { scales: { y: { beginAtZero: true, grid: { color: 'rgba(255,255,255,0.1)' }, ticks: { color: '#fff' } }, x: { grid: { color: 'rgba(255,255,255,0.1)' }, ticks: { color: '#fff' } } }, plugins: { legend: { labels: { color: '#fff' } } } } });
                }
                async function syncIceCast() { await fetch('/admin/api/stats-sync'); loadStats(); loadYearlyStats(); loadWebStats(); }
                loadStats(); loadYearlyStats(); loadWebStats(); setInterval(syncIceCast, 30000);
            </script>