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

    <!-- Page Header -->
    <div class="mb-8">
        <h2 class="text-2xl font-bold">📊 Dashboard</h2>
        <p class="text-slate-400 text-sm mt-1">Overview of your site performance</p>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
        <div class="stat-card">
            <p class="text-slate-400 text-sm">Total Clicks (30d)</p>
            <p class="text-3xl font-bold mt-2" x-text="stats.clicks || '—'"></p>
        </div>
        <div class="stat-card">
            <p class="text-slate-400 text-sm">Impressions (30d)</p>
            <p class="text-3xl font-bold mt-2" x-text="stats.impressions || '—'"></p>
        </div>
        <div class="stat-card">
            <p class="text-slate-400 text-sm">Avg Position</p>
            <p class="text-3xl font-bold mt-2" x-text="stats.position || '—'"></p>
        </div>
        <div class="stat-card">
            <p class="text-slate-400 text-sm">Avg CTR</p>
            <p class="text-3xl font-bold mt-2" x-text="stats.ctr ? stats.ctr + '%' : '—'"></p>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
        <a href="/generate" class="block bg-blue-600/20 border border-blue-600/50 rounded-xl p-6 hover:bg-blue-600/30 transition-colors">
            <h3 class="text-lg font-bold text-blue-400">✍️ Generate New Post</h3>
            <p class="text-slate-400 text-sm mt-1">Use AI to create SEO-optimised content</p>
        </a>
        <a href="/seo-audit" class="block bg-green-600/20 border border-green-600/50 rounded-xl p-6 hover:bg-green-600/30 transition-colors">
            <h3 class="text-lg font-bold text-green-400">🔍 Run SEO Audit</h3>
            <p class="text-slate-400 text-sm mt-1">Check your site for SEO issues</p>
        </a>
    </div>

    <!-- Top Keywords -->
    <div class="card mb-8">
        <h3 class="text-lg font-bold mb-4">🔑 Top Keywords (Google Search Console)</h3>
        <div x-show="loading" class="text-center py-8"><div class="spinner"></div><p class="text-slate-400 mt-2">Loading data...</p></div>
        <div x-show="!loading && keywords.length === 0" class="text-center py-8 text-slate-500">
            No data yet. Configure Google Search Console in Settings.
        </div>
        <div x-show="!loading && keywords.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">Keyword</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="kw in keywords" :key="kw.query">
                        <tr class="border-b border-slate-700/50 hover:bg-slate-700/30">
                            <td class="py-2 px-3" x-text="kw.query"></td>
                            <td class="py-2 px-3 text-right font-mono" x-text="kw.clicks"></td>
                            <td class="py-2 px-3 text-right font-mono" x-text="kw.impressions"></td>
                            <td class="py-2 px-3 text-right font-mono" x-text="kw.ctr + '%'"></td>
                            <td class="py-2 px-3 text-right font-mono" x-text="kw.position"></td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function dashboardApp() {
    return {
        loading: true,
        stats: {},
        keywords: [],
        init() {
            this.loadData();
        },
        async loadData() {
            this.loading = true;
            try {
                const resp = await apiPost('/api/analytics/gsc', { days: 30 });
                if (resp.success && resp.data.top_queries) {
                    this.keywords = resp.data.top_queries.slice(0, 15);
                    // Calculate aggregate stats
                    let totalClicks = 0, totalImpressions = 0, totalPosition = 0, totalCtr = 0;
                    resp.data.top_queries.forEach(q => {
                        totalClicks += q.clicks;
                        totalImpressions += q.impressions;
                        totalPosition += q.position;
                        totalCtr += q.ctr;
                    });
                    const count = resp.data.top_queries.length || 1;
                    this.stats = {
                        clicks: totalClicks.toLocaleString(),
                        impressions: totalImpressions.toLocaleString(),
                        position: (totalPosition / count).toFixed(1),
                        ctr: (totalCtr / count).toFixed(1),
                    };
                }
            } catch (e) {
                console.log('Dashboard data not available yet:', e);
            }
            this.loading = false;
        }
    };
}
</script>
{% endblock %}