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

    <div class="mb-8">
        <h2 class="text-2xl font-bold">🔍 SEO Audit</h2>
        <p class="text-slate-400 text-sm mt-1">Scan your site for common SEO issues</p>
    </div>

    <!-- Audit Controls -->
    <div class="card mb-8">
        <div class="flex flex-wrap items-end gap-4">
            <div class="flex-1 min-w-[250px]">
                <label class="block text-slate-300 text-sm font-medium mb-2">Page URL</label>
                <input type="url" x-model="url"
                    class="w-full bg-slate-900 border border-slate-600 text-white rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500"
                    placeholder="https://core365.cloud/some-page">
            </div>
            <button @click="runAudit(false)" :disabled="auditing || !url"
                class="bg-blue-600 hover:bg-blue-700 disabled:bg-slate-700 text-white font-bold py-3 px-6 rounded-lg transition-colors">
                🔍 Audit Page
            </button>
            <button @click="runAudit(true)" :disabled="auditing"
                class="bg-green-600 hover:bg-green-700 disabled:bg-slate-700 text-white font-bold py-3 px-6 rounded-lg transition-colors">
                🌐 Audit Entire Site
            </button>
        </div>
    </div>

    <!-- Loading -->
    <div x-show="auditing" class="text-center py-12"><div class="spinner"></div><p class="text-slate-400 mt-2">Scanning pages... This may take a moment.</p></div>

    <!-- Results -->
    <div x-show="results.length > 0 && !auditing">
        <!-- Summary -->
        <div class="card mb-6">
            <h3 class="text-lg font-bold mb-2">📋 Audit Summary</h3>
            <p class="text-slate-400 text-sm"><span x-text="results.length"></span> pages scanned · Average score:
                <span class="font-bold text-lg ml-1"
                    :class="avgScore >= 80 ? 'text-green-400' : avgScore >= 50 ? 'text-amber-400' : 'text-red-400'"
                    x-text="avgScore"></span>/100
            </p>
        </div>

        <!-- Results Table -->
        <div class="card">
            <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">URL</th><th class="text-left py-2 px-3">Title</th>
                    <th class="text-center py-2 px-3">Score</th><th class="text-center py-2 px-3">Issues</th>
                </tr></thead>
                <tbody><template x-for="(r, i) in results" :key="i">
                    <tr class="border-b border-slate-700/50 hover:bg-slate-700/30 cursor-pointer" @click="r.expanded = !r.expanded">
                        <td class="py-2 px-3 text-blue-400 text-xs max-w-[300px] truncate" x-text="r.url"></td>
                        <td class="py-2 px-3 max-w-[200px] truncate" x-text="r.title || '(No title)'"></td>
                        <td class="py-2 px-3 text-center"><span class="font-bold px-3 py-1 rounded-full text-xs"
                            :class="r.score >= 80 ? 'bg-green-900 text-green-400' : r.score >= 50 ? 'bg-amber-900 text-amber-400' : 'bg-red-900 text-red-400'"
                            x-text="r.score + '/100'"></span></td>
                        <td class="py-2 px-3 text-center" x-text="(r.issues || []).length"></td>
                    </tr>
                    <tr x-show="r.expanded" class="bg-slate-800/50">
                        <td colspan="4" class="py-3 px-6">
                            <ul class="space-y-1 text-sm">
                                <template x-for="issue in (r.issues || [])" :key="issue">
                                    <li class="text-amber-400">⚠️ <span x-text="issue"></span></li>
                                </template>
                            </ul>
                            <div class="mt-3 grid grid-cols-2 md:grid-cols-4 gap-2 text-xs text-slate-400">
                                <span>Words: <strong class="text-white" x-text="r.word_count || 0"></strong></span>
                                <span>Images: <strong class="text-white" x-text="r.images_total || 0"></strong></span>
                                <span>Internal links: <strong class="text-white" x-text="r.internal_links || 0"></strong></span>
                                <span>External links: <strong class="text-white" x-text="r.external_links || 0"></strong></span>
                            </div>
                        </td>
                    </tr>
                </template></tbody>
            </table></div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function auditApp() {
    return {
        url: '', auditing: false, results: [], avgScore: 0,
        async runAudit(full) {
            this.auditing = true; this.results = [];
            try {
                const resp = await apiPost('/api/seo-audit/run', { url: this.url || '', audit_full: full });
                if (resp.success) {
                    this.results = resp.data.map(r => ({...r, expanded: false}));
                    const total = this.results.reduce((s, r) => s + (r.score || 0), 0);
                    this.avgScore = this.results.length ? Math.round(total / this.results.length) : 0;
                    showToast('Audit complete! ' + this.results.length + ' pages scanned.');
                } else { showToast(resp.error || 'Audit failed', 'error'); }
            } catch(e) { showToast('Error: ' + e.message, 'error'); }
            this.auditing = false;
        }
    };
}
</script>
{% endblock %}