{% extends "admin_base.html" %}
{% import "macros/admin_crud_list.html" as crud %}
{% import "macros/loading_spinner.html" as spinner %}

{% block extra_head %}
{% include "partials/admin_vendor_chartjs.html" %}
{% endblock %}

{% block page_title %}Domain Overview{% endblock %}

{% block admin_content %}
<div class="mx-auto w-full max-w-7xl space-y-5 p-4 sm:p-6" data-plugin="seo-tool">
    <p id="seo-domain-loading" class="rounded-xl border border-divider bg-surface p-5 text-muted" role="status" aria-live="polite">Loading domain…</p>
    <p id="seo-domain-not-found" class="rounded-xl border border-warning bg-warning/10 p-5 text-warning" role="status" hidden>Domain not found. <a class="font-medium underline" href="/plugins/seo-tool/admin">Back to projects</a></p>

    <div id="seo-domain-root" class="space-y-5" data-plugin="seo-tool" hidden>
        <div id="seo-domain-header-mount"></div>

        <div class="flex flex-wrap items-center gap-2">
            <button type="button" class="blocks-button blocks-button-primary" id="seo-domain-recrawl">Run Site Audit</button>
            <button type="button" class="blocks-button blocks-button-secondary" id="seo-domain-extract-kw">Extract keywords</button>
            <button type="button" class="blocks-button blocks-button-secondary" id="seo-domain-export">Export JSON</button>
            <button type="button" class="blocks-button blocks-button-secondary" id="seo-domain-apply-fixes" hidden>Apply meta fixes</button>
            <a class="blocks-button blocks-button-secondary" id="seo-domain-competitors" href="#">Competitors</a>
            <select id="seo-domain-connector" class="blocks-input w-full sm:w-auto sm:min-w-48 sm:max-w-64" aria-label="SEO connector">
                <option value="none">Connector: none</option>
                <option value="blocks">Blocks (optional)</option>
                <option value="static_host">Static-host (optional)</option>
            </select>
        </div>

        <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
            <div class="flex flex-col gap-1 rounded-xl border border-brand bg-surface p-4 shadow-sm">
                <span class="text-xs font-medium uppercase tracking-wide text-muted">Health score</span>
                <span class="text-3xl font-semibold text-brand" id="seo-health-score">—</span>
            </div>
            <div class="flex flex-col gap-1 rounded-xl border border-divider bg-surface p-4 shadow-sm">
                <span class="text-xs font-medium uppercase tracking-wide text-muted">Pages crawled</span>
                <span class="text-2xl font-semibold" id="seo-pages-crawled">—</span>
            </div>
            <div class="flex flex-col gap-1 rounded-xl border border-divider bg-surface p-4 shadow-sm">
                <span class="text-xs font-medium uppercase tracking-wide text-muted">Critical issues</span>
                <span class="text-2xl font-semibold" id="seo-critical-count">—</span>
            </div>
            <div class="flex flex-col gap-1 rounded-xl border border-divider bg-surface p-4 shadow-sm">
                <span class="text-xs font-medium uppercase tracking-wide text-muted">Crawl status</span>
                <span class="text-2xl font-semibold" id="seo-crawl-status">—</span>
            </div>
        </div>

        <section class="space-y-4 rounded-xl border border-divider bg-surface p-4 shadow-sm sm:p-5" id="seo-domain-action-plan" aria-label="Action plan">
            <h2 class="text-lg font-semibold">Action plan</h2>
            <div id="seo-domain-insights-mount"></div>
        </section>

        <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
            <div class="min-w-0 rounded-xl border border-divider bg-surface p-4 shadow-sm">
                <h2 class="mb-3 text-lg font-semibold">Issues by severity</h2>
                <canvas id="seo-severity-chart" height="200"></canvas>
            </div>
            <div class="min-w-0 rounded-xl border border-divider bg-surface p-4 shadow-sm">
                <h2 class="mb-3 text-lg font-semibold">Health score trend</h2>
                <canvas id="seo-trend-chart" height="200"></canvas>
            </div>
        </div>

        {{ crud::shell_open(config_url="/plugins/seo-tool/assets/admin/domain_issues_list.json", mount_id="seo-domain-issues-list", custom_mount=true) }}
        <div class="min-w-0">
            <table class="w-full">
                <thead></thead>
                <tbody>
                    {{ spinner::table_skeleton(colspan=5, lines=3, label="Loading issues…") }}
                </tbody>
            </table>
        </div>
        {{ crud::shell_close() }}

        {{ crud::shell_open(config_url="/plugins/seo-tool/assets/admin/domain_pages_list.json", mount_id="seo-domain-pages-list", custom_mount=true) }}
        <div class="min-w-0">
            <table class="w-full">
                <thead></thead>
                <tbody>
                    {{ spinner::table_skeleton(colspan=5, lines=4, label="Loading pages…") }}
                </tbody>
            </table>
        </div>
        {{ crud::shell_close() }}

        {{ crud::shell_open(config_url="/plugins/seo-tool/assets/admin/domain_crawls_list.json", mount_id="seo-domain-crawls-list", custom_mount=true) }}
        <div class="min-w-0">
            <table class="w-full">
                <thead></thead>
                <tbody>
                    {{ spinner::table_skeleton(colspan=5, lines=4, label="Loading audits…") }}
                </tbody>
            </table>
        </div>
        {{ crud::shell_close() }}
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/plugins/seo-tool/assets/js/seo_common.js"></script>
<script src="/plugins/seo-tool/assets/js/domain.js"></script>
{% endblock %}