/**
 * Analytics Logic (Simple CSS Charts)
 */

const analytics = {
    mockData: [
        { name: 'Mon', requests: 4000, latency: 240 },
        { name: 'Tue', requests: 3000, latency: 198 },
        { name: 'Wed', requests: 2000, latency: 310 },
        { name: 'Thu', requests: 2780, latency: 208 },
        { name: 'Fri', requests: 1890, latency: 250 },
        { name: 'Sat', requests: 2390, latency: 210 },
        { name: 'Sun', requests: 3490, latency: 225 },
    ],

    init: async () => {
        console.log('📈 Initializing Live Analytics...');
        const headers = auth.getAuthHeader();
        
        // 1. Fetch Summary for Success Ratio
        try {
            const summaryRes = await fetch('/api/usage/summary', { headers });
            if (summaryRes.ok) {
                const summary = await summaryRes.json();
                analytics.renderSuccessRatio(summary.successRate);
            }
        } catch (e) { console.error(e); }

        // 2. Fetch History for Volume Chart
        const history = await analytics.fetchHistory();
        if (history && history.length > 0) {
            analytics.renderVolumeChart(history);
        } else {
            // Use mock if real data is empty for better UI
            const mockHistory = [
                { name: 0, requests: 1200 }, { name: 1, requests: 900 }, { name: 2, requests: 2100 },
                { name: 3, requests: 1500 }, { name: 4, requests: 2800 }, { name: 5, requests: 1900 }, { name: 6, requests: 2300 }
            ];
            analytics.renderVolumeChart(mockHistory);
        }
        
        analytics.renderLatencyChart(); 
    },

    renderSuccessRatio: (percent) => {
        const circle = document.getElementById('success-circle');
        const display = document.getElementById('success-percent-display');
        if (!circle || !display) return;

        display.textContent = `${percent}%`;
        
        // Circumference is 552.9 (2 * PI * 88)
        const offset = 552.9 - (percent / 100) * 552.9;
        circle.style.strokeDashoffset = offset;
        circle.classList.toggle('text-emerald-500', percent >= 95);
        circle.classList.toggle('text-blue-600', percent < 95);
    },

    fetchHistory: async () => {
        try {
            const headers = auth.getAuthHeader();
            const res = await fetch('/api/usage/history?days=7', { headers });
            if (res.ok) {
                const raw = await res.json();
                // Map raw database records to chart data
                return raw.map(item => {
                    const date = new Date(item.date);
                    return {
                        name: date.getDay(), // Return index for localized naming
                        requests: parseInt(item.count, 10)
                    };
                });
            }
        } catch (error) {
            console.error('Failed to fetch analytics history', error);
        }
        return null;
    },

    renderVolumeChart: (data) => {
        const container = document.getElementById('v-chart');
        if (!container) return;

        const max = Math.max(...data.map(d => d.requests), 10);
        
        const days = i18n.translations[i18n.currentLang]['chart-days'];
        
        container.innerHTML = data.map((d, i) => `
            <div class="flex-1 flex flex-col items-center gap-4 group h-full">
                <div class="flex-1 w-full bg-slate-900/40 rounded-2xl relative overflow-hidden flex items-end p-1 border border-white/[0.03] backdrop-blur-sm">
                    <div class="v-bar w-full bg-gradient-to-t from-blue-600 via-blue-500 to-cyan-400 rounded-xl transition-all duration-1000 ease-out hover:brightness-125 shadow-[0_0_30px_rgba(37,99,235,0.2)]" 
                         style="height: 0%; transform-origin: bottom;"
                         data-height="${(d.requests / max) * 100}%">
                    </div>
                    <div class="absolute inset-0 flex flex-col items-center justify-center opacity-0 group-hover:opacity-100 transition-all transform translate-y-2 group-hover:translate-y-0 z-10 transition-delay-300">
                         <span class="text-[10px] font-black bg-blue-600 text-white px-3 py-1.5 rounded-lg shadow-2xl border border-blue-400/30 mb-2">${d.requests.toLocaleString()}</span>
                    </div>
                </div>
                <span class="text-[10px] font-black text-slate-500 uppercase tracking-widest">${days[d.name] || d.name}</span>
            </div>
        `).join('');

        // Trigger animations
        requestAnimationFrame(() => {
            container.querySelectorAll('.v-bar').forEach((bar, i) => {
                setTimeout(() => {
                    bar.style.height = bar.dataset.height;
                }, i * 100);
            });
        });
    },

    renderPlaceholder: () => {
        const container = document.getElementById('v-chart');
        if (container) container.innerHTML = `
            <div class="w-full h-full flex flex-col items-center justify-center text-slate-500 gap-4">
                <div class="w-16 h-16 rounded-full bg-slate-900 flex items-center justify-center opacity-50 border border-white/5 shadow-inner">
                    <i data-lucide="bar-chart-2" class="w-8 h-8 text-blue-500/50"></i>
                </div>
                <p class="text-[10px] font-black tracking-[0.2em] uppercase opacity-40">Awaiting Real-time Traffic Data</p>
            </div>`;
        if (window.lucide) lucide.createIcons();
    },

    renderLatencyChart: () => {
        const container = document.getElementById('l-chart');
        if (!container) return;

        const days = i18n.translations[i18n.currentLang]['chart-days'];

        const data = [
            { name: 1, latency: 240 },
            { name: 2, latency: 198 },
            { name: 3, latency: 310 },
            { name: 4, latency: 208 },
            { name: 5, latency: 250 },
            { name: 6, latency: 210 },
            { name: 0, latency: 225 },
        ];

        const max = Math.max(...data.map(d => d.latency));
        
        container.innerHTML = data.map((d, i) => `
            <div class="flex-1 flex flex-col items-center gap-4 group h-full">
                <div class="flex-1 w-full bg-slate-900/40 rounded-2xl relative overflow-hidden flex items-end p-1 border border-white/[0.03] backdrop-blur-sm">
                    <div class="l-bar w-full bg-gradient-to-t from-violet-600 via-violet-500 to-fuchsia-400 rounded-xl transition-all duration-1000 ease-out hover:brightness-125 shadow-[0_0_30px_rgba(139,92,246,0.2)]" 
                         style="height: 0%"
                         data-height="${(d.latency / max) * 100}%">
                    </div>
                     <div class="absolute inset-0 flex flex-col items-center justify-center opacity-0 group-hover:opacity-100 transition-all transform translate-y-2 group-hover:translate-y-0 z-10 transition-delay-300">
                         <span class="text-[10px] font-black bg-violet-600 text-white px-3 py-1.5 rounded-lg shadow-2xl border border-violet-400/30 mb-2">${d.latency}ms</span>
                    </div>
                </div>
                <span class="text-[10px] font-black text-slate-500 uppercase tracking-widest">${days[d.name] || d.name}</span>
            </div>
        `).join('');

        // Trigger animations
        requestAnimationFrame(() => {
            container.querySelectorAll('.l-bar').forEach((bar, i) => {
                setTimeout(() => {
                    bar.style.height = bar.dataset.height;
                }, i * 100);
            });
        });
    }
};