{% extends "base.html" %}
{% block title %}Analytics{% endblock %}
{% block content %}
<div x-data="analyticsApp()">

    <div class="flex flex-wrap items-center justify-between mb-8 gap-4">
        <div>
            <h2 class="text-2xl font-bold">📈 Analytics</h2>
            <p class="text-slate-400 text-sm mt-1">Unified view of Google, Bing, and site analytics</p>
        </div>
        <select x-model="days" @change="loadCurrentTab()" class="bg-slate-800 border border-slate-600 text-white rounded-lg px-4 py-2 text-sm">
            <option value="7">Last 7 days</option>
            <option value="30" selected>Last 30 days</option>
            <option value="90">Last 90 days</option>
        </select>
    </div>

    <!-- Tabs -->
    <div class="flex border-b border-slate-700 mb-6">
        <button @click="tab = 'gsc'; loadGSC()" :class="tab === 'gsc' ? 'border-blue-500 text-blue-400' : 'border-transparent text-slate-400'"
            class="px-6 py-3 text-sm font-medium border-b-2 transition-colors">Google Search Console</button>
        <button @click="tab = 'ga4'; loadGA4()" :class="tab === 'ga4' ? 'border-blue-500 text-blue-400' : 'border-transparent text-slate-400'"
            class="px-6 py-3 text-sm font-medium border-b-2 transition-colors">Google Analytics</button>
        <button @click="tab = 'bing'; loadBing()" :class="tab === 'bing' ? 'border-blue-500 text-blue-400' : 'border-transparent text-slate-400'"
            class="px-6 py-3 text-sm font-medium border-b-2 transition-colors">Bing Webmaster</button>
    </div>

    <!-- GSC Tab -->
    <div x-show="tab === 'gsc'">
        <div x-show="loading" class="text-center py-12"><div class="spinner"></div><p class="text-slate-400 mt-2">Loading Search Console data...</p></div>
        <div x-show="!loading">
            <!-- Top Queries -->
            <div class="card mb-6">
                <h3 class="text-lg font-bold mb-4">🔑 Top Search Queries</h3>
                <div class="overflow-x-auto"><table class="w-full text-sm">
                    <thead><tr class="text-slate-400 border-b border-slate-700">
                        <th class="text-left py-2 px-3">Query</th><th class="text-right py-2 px-3">Clicks</th>
                        <th class="text-right py-2 px-3">Impressions</th><th class="text-right py-2 px-3">CTR</th>
                        <th class="text-right py-2 px-3">Position</th>
                    </tr></thead>
                    <tbody><template x-for="q in gscData.top_queries || []" :key="q.query">
                        <tr class="border-b border-slate-700/50 hover:bg-slate-700/30">
                            <td class="py-2 px-3" x-text="q.query"></td><td class="py-2 px-3 text-right font-mono" x-text="q.clicks"></td>
                            <td class="py-2 px-3 text-right font-mono" x-text="q.impressions"></td><td class="py-2 px-3 text-right font-mono" x-text="q.ctr + '%'"></td>
                            <td class="py-2 px-3 text-right font-mono" x-text="q.position"></td>
                        </tr>
                    </template></tbody>
                </table></div>
            </div>
            <!-- Low Hanging Fruit -->
            <div class="card border-amber-700/50 mb-6" x-show="(gscData.low_hanging_fruit || []).length > 0">
                <h3 class="text-lg font-bold mb-2 text-amber-400">🍎 Low Hanging Fruit (Quick Wins)</h3>
                <p class="text-slate-400 text-xs mb-4">High impressions, low CTR, position 5-20. Optimise these for quick traffic gains!</p>
                <div class="overflow-x-auto"><table class="w-full text-sm">
                    <thead><tr class="text-amber-400/70 border-b border-amber-700/50">
                        <th class="text-left py-2 px-3">Keyword</th><th class="text-right py-2 px-3">Impressions</th>
                        <th class="text-right py-2 px-3">CTR</th><th class="text-right py-2 px-3">Position</th>
                    </tr></thead>
                    <tbody><template x-for="q in gscData.low_hanging_fruit || []" :key="q.query">
                        <tr class="border-b border-amber-700/30 hover:bg-amber-900/20">
                            <td class="py-2 px-3" x-text="q.query"></td><td class="py-2 px-3 text-right font-mono" x-text="q.impressions"></td>
                            <td class="py-2 px-3 text-right font-mono" x-text="q.ctr + '%'"></td><td class="py-2 px-3 text-right font-mono" x-text="q.position"></td>
                        </tr>
                    </template></tbody>
                </table></div>
            </div>
        </div>
    </div>

    <!-- GA4 Tab -->
    <div x-show="tab === 'ga4'" style="display: none;">
        <div x-show="loading" class="text-center py-12"><div class="spinner"></div><p class="text-slate-400 mt-2">Loading Analytics data...</p></div>
        <div x-show="!loading">
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                <div class="stat-card"><p class="text-slate-400 text-sm">Users</p><p class="text-2xl font-bold mt-1" x-text="ga4Data.overview?.totalUsers || '—'"></p></div>
                <div class="stat-card"><p class="text-slate-400 text-sm">Sessions</p><p class="text-2xl font-bold mt-1" x-text="ga4Data.overview?.sessions || '—'"></p></div>
                <div class="stat-card"><p class="text-slate-400 text-sm">Pageviews</p><p class="text-2xl font-bold mt-1" x-text="ga4Data.overview?.screenPageViews || '—'"></p></div>
                <div class="stat-card"><p class="text-slate-400 text-sm">Bounce Rate</p><p class="text-2xl font-bold mt-1" x-text="ga4Data.overview?.bounceRate ? (ga4Data.overview.bounceRate * 100).toFixed(1) + '%' : '—'"></p></div>
            </div>
            <div class="card mb-6">
                <h3 class="text-lg font-bold mb-4">🌐 Traffic Sources</h3>
                <div class="overflow-x-auto"><table class="w-full text-sm">
                    <thead><tr class="text-slate-400 border-b border-slate-700">
                        <th class="text-left py-2 px-3">Source</th><th class="text-left py-2 px-3">Medium</th>
                        <th class="text-right py-2 px-3">Sessions</th><th class="text-right py-2 px-3">Users</th>
                    </tr></thead>
                    <tbody><template x-for="s in ga4Data.traffic_sources || []" :key="s.sessionSource + s.sessionMedium">
                        <tr class="border-b border-slate-700/50 hover:bg-slate-700/30">
                            <td class="py-2 px-3" x-text="s.sessionSource"></td><td class="py-2 px-3" x-text="s.sessionMedium"></td>
                            <td class="py-2 px-3 text-right font-mono" x-text="s.sessions"></td><td class="py-2 px-3 text-right font-mono" x-text="s.totalUsers"></td>
                        </tr>
                    </template></tbody>
                </table></div>
            </div>
        </div>
    </div>

    <!-- Bing Tab -->
    <div x-show="tab === 'bing'" style="display: none;">
        <div x-show="loading" class="text-center py-12"><div class="spinner"></div><p class="text-slate-400 mt-2">Loading Bing data...</p></div>
        <div x-show="!loading">
            <div class="card mb-6">
                <h3 class="text-lg font-bold mb-4">🔎 Bing Query Stats</h3>
                <div x-show="(bingData.query_stats || []).length === 0" class="text-slate-500 py-4">No data available. Make sure Bing Webmaster is configured in Settings.</div>
                <div x-show="(bingData.query_stats || []).length > 0" class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead><tr class="text-slate-400 border-b border-slate-700">
                            <th class="text-left py-2 px-3">Query</th><th class="text-right py-2 px-3">Clicks</th>
                            <th class="text-right py-2 px-3">Impressions</th>
                        </tr></thead>
                        <tbody><template x-for="(q, i) in bingData.query_stats || []" :key="i">
                            <tr class="border-b border-slate-700/50 hover:bg-slate-700/30">
                                <td class="py-2 px-3" x-text="q.Query || q.query || '—'"></td>
                                <td class="py-2 px-3 text-right font-mono" x-text="q.Clicks || q.clicks || 0"></td>
                                <td class="py-2 px-3 text-right font-mono" x-text="q.Impressions || q.impressions || 0"></td>
                            </tr>
                        </template></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function analyticsApp() {
    return {
        tab: 'gsc', days: '30', loading: false,
        gscData: {}, ga4Data: {}, bingData: {},
        init() { this.loadGSC(); },
        loadCurrentTab() { if (this.tab === 'gsc') this.loadGSC(); else if (this.tab === 'ga4') this.loadGA4(); else this.loadBing(); },
        async loadGSC() {
            this.loading = true;
            try { const r = await apiPost('/api/analytics/gsc', { days: parseInt(this.days) }); if (r.success) this.gscData = r.data; }
            catch(e) { console.log('GSC error:', e); }
            this.loading = false;
        },
        async loadGA4() {
            this.loading = true;
            try { const r = await apiPost('/api/analytics/ga4', { days: parseInt(this.days) }); if (r.success) this.ga4Data = r.data; }
            catch(e) { console.log('GA4 error:', e); }
            this.loading = false;
        },
        async loadBing() {
            this.loading = true;
            try { const r = await apiPost('/api/analytics/bing', {}); if (r.success) this.bingData = r.data; }
            catch(e) { console.log('Bing error:', e); }
            this.loading = false;
        }
    };
}
</script>
{% endblock %}