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

{% block extra_head %}
<script src="/plugins/seo-tool/assets/js/serp_bookmarklet.js"></script>
{% endblock %}

{% block page_title %}Competitor Analysis{% 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" id="seo-competitors-root">

    <p id="seo-comp-hint" class="my-3 rounded-lg bg-warning/10 p-3 text-sm text-warning" hidden></p>
    <p id="seo-comp-import-msg" class="my-3 rounded-lg bg-success/10 p-3 text-sm text-success" hidden></p>

    {{ crud::shell_open(config_url="/plugins/seo-tool/assets/admin/competitors_comparison_list.json", mount_id="seo-comp-comparison-list", custom_mount=true) }}

    <div class="flex flex-wrap items-center gap-2" data-crud-toolbar-extra data-crud-toolbar-placement="below">
        <label for="seo-comp-primary" class="text-sm font-medium">Primary domain</label>
        <select id="seo-comp-primary" class="blocks-input w-full sm:w-auto sm:min-w-64" disabled>
            <option value="">Loading domains…</option>
        </select>
        <button type="button" class="blocks-button blocks-button-primary" id="seo-comp-keyword-btn" onclick="return window.seoCompOpen('keyword')">Find by keyword</button>
        <button type="button" class="blocks-button blocks-button-secondary" id="seo-comp-add-url-btn" onclick="return window.seoCompOpen('url')">Add by URL</button>
    </div>

    <div id="seo-comp-comparison-stats" class="space-y-3 rounded-xl border border-divider bg-surface p-4 shadow-sm" hidden></div>

    <div class="min-w-0">
        <table class="w-full">
            <thead></thead>
            <tbody>
                <tr><td colspan="4" class="crud-empty-state text-center py-5">
                    {{ empty::empty_state(icon="fas fa-chart-line", title="Select a primary domain", description="Select a primary domain to compare competitors.") }}
                </td></tr>
            </tbody>
        </table>
    </div>

    {{ crud::shell_close() }}

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

<input type="hidden" id="seo-comp-domain-id">
<input type="hidden" id="seo-comp-project-id">

{{ modal::modal(id="seoCompUrlModal", title='<span id="seo-comp-url-modal-title">Add competitor by URL</span>', body_html='<form id="seoCompUrlForm" class="space-y-3"><label class="block space-y-1 text-sm font-medium">Competitor URL<input type="url" name="competitor_url" class="blocks-input" required placeholder="https://competitor.com" autocomplete="off"></label></form>', footer_html='<button type="button" class="blocks-button blocks-button-secondary" data-close>Cancel</button><button type="submit" form="seoCompUrlForm" class="blocks-button blocks-button-primary">Add &amp; audit</button>') }}

{{ modal::modal(id="seoCompKeywordModal", title="Find competitors by keyword", content_style="max-width: 640px;", body_html='<div class="space-y-4"><input type="hidden" id="seo-comp-kw-domain-id"><input type="hidden" id="seo-comp-kw-project-id"><label class="block space-y-1 text-sm font-medium">Search keyword<input type="text" id="seo-comp-keyword-input" class="blocks-input" placeholder="e.g. best crm software india" autocomplete="off"></label><p class="text-sm text-muted">Open Google in your browser, then run the bookmarklet on the results page to import ranking domains (your primary domain is excluded automatically).</p><button type="button" class="blocks-button blocks-button-primary" id="seo-comp-open-google-btn" onclick="return window.seoCompOpenGoogle(event)">Open Google search</button><div id="seo-comp-bookmarklet-wrap" class="mt-4 rounded-lg border border-dashed border-divider bg-surface p-4" hidden><ol class="list-decimal space-y-3 pl-5"><li>On the Google tab, drag this link to your bookmarks bar (one-time), or click it on each search:<p class="mt-2"><a id="seo-comp-bookmarklet-link" class="inline-flex cursor-move rounded-md bg-brand px-3 py-2 font-medium text-white" href="#">Import competitors to SEO Tool</a></p></li><li>Click the bookmarklet on the Google results page.</li><li>Confirm the import — competitors are added and audited automatically.</li></ol><p id="seo-comp-bookmarklet-keyword" class="mt-3 text-sm text-muted"></p></div><div id="seo-comp-search-status" class="my-3 text-sm text-muted" role="status" aria-live="polite" hidden></div></div>', footer_html='<button type="button" class="blocks-button blocks-button-secondary" data-close>Close</button>') }}

<script>
(function () {
    function ctx() {
        var sel = document.getElementById('seo-comp-primary');
        if (!sel || !sel.value) return null;
        return { sel: sel, opt: sel.options[sel.selectedIndex] };
    }
    function hint(msg) {
        var el = document.getElementById('seo-comp-hint');
        if (el) { el.textContent = msg; el.hidden = false; }
        else alert(msg);
    }
    function toast(msg) {
        if (typeof window.showToast === 'function') window.showToast(msg, 'warning');
        else hint(msg);
    }
    function openEl(modal) {
        if (!modal) return;
        if (modal.parentNode !== document.body) document.body.appendChild(modal);
        if (window.BlocksAdminModal) window.BlocksAdminModal.wire(modal).open();
    }
    function closeEl(modal) {
        if (!modal) return;
        if (window.BlocksAdminModal) window.BlocksAdminModal.wire(modal).close();
    }
    function seoPost(path, body) {
        return fetch('/plugins/seo-tool/' + path, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
            credentials: 'same-origin',
            body: JSON.stringify({ data: body || {} })
        }).then(function (r) { return r.json(); });
    }
    function resolveIds() {
        var c = ctx();
        var domainId = parseInt((document.getElementById('seo-comp-kw-domain-id') || {}).value, 10) || 0;
        var projectId = parseInt((document.getElementById('seo-comp-kw-project-id') || {}).value, 10) || 0;
        if ((!domainId || !projectId) && c) {
            domainId = domainId || parseInt(c.sel.value, 10) || 0;
            projectId = projectId || parseInt(c.opt.getAttribute('data-project') || '0', 10) || 0;
        }
        return { domainId: domainId, projectId: projectId };
    }
    ['seoCompUrlModal', 'seoCompKeywordModal'].forEach(function (id) {
        var el = document.getElementById(id);
        if (el && el.parentNode !== document.body) document.body.appendChild(el);
    });
    document.querySelectorAll('#seoCompUrlModal .modal-content, #seoCompKeywordModal .modal-content').forEach(function (panel) {
        panel.addEventListener('click', function (e) { e.stopPropagation(); });
    });
    window.seoCompOpen = function (action) {
        var c = ctx();
        if (!c) { hint('Select a primary domain first.'); return false; }
        var hintEl = document.getElementById('seo-comp-hint');
        if (hintEl) hintEl.hidden = true;
        if (action === 'keyword') {
            document.getElementById('seo-comp-kw-domain-id').value = c.sel.value;
            document.getElementById('seo-comp-kw-project-id').value = c.opt.getAttribute('data-project') || '';
            var statusEl = document.getElementById('seo-comp-search-status');
            var bmWrap = document.getElementById('seo-comp-bookmarklet-wrap');
            if (statusEl) { statusEl.hidden = true; statusEl.textContent = ''; }
            if (bmWrap) bmWrap.hidden = true;
            openEl(document.getElementById('seoCompKeywordModal'));
        } else if (action === 'url') {
            document.getElementById('seo-comp-domain-id').value = c.sel.value;
            document.getElementById('seo-comp-project-id').value = c.opt.getAttribute('data-project') || '';
            openEl(document.getElementById('seoCompUrlModal'));
        }
        return false;
    };
    window.seoCompOpenGoogle = function (ev) {
        if (ev && ev.preventDefault) ev.preventDefault();
        if (ev && ev.stopPropagation) ev.stopPropagation();
        var keywordInput = (document.getElementById('seo-comp-keyword-input').value || '').trim();
        var ids = resolveIds();
        var openGoogleBtn = document.getElementById('seo-comp-open-google-btn');
        var bmWrap = document.getElementById('seo-comp-bookmarklet-wrap');
        var bmLink = document.getElementById('seo-comp-bookmarklet-link');
        var bmKeyword = document.getElementById('seo-comp-bookmarklet-keyword');
        var statusEl = document.getElementById('seo-comp-search-status');
        if (!keywordInput) {
            toast('Enter a keyword');
            return false;
        }
        if (!ids.domainId || !ids.projectId) {
            toast('Select a primary domain first');
            return false;
        }
        window.open('https://www.google.com/search?q=' + encodeURIComponent(keywordInput), '_blank', 'noopener,noreferrer');
        if (openGoogleBtn) openGoogleBtn.disabled = true;
        if (statusEl) {
            statusEl.hidden = false;
            statusEl.textContent = 'Preparing import…';
        }
        if (bmWrap) bmWrap.hidden = true;
        seoPost('api-prepare-serp-import', {
            domain_id: ids.domainId,
            project_id: ids.projectId,
            keyword: keywordInput
        }).then(function (res) {
            if (openGoogleBtn) openGoogleBtn.disabled = false;
            if (!res || res.status !== 'ok') {
                var msg = (res && res.message) || (res && res.error) || 'Could not prepare import';
                if (statusEl) statusEl.textContent = msg;
                toast(msg);
                return;
            }
            if (statusEl) statusEl.hidden = true;
            if (bmWrap) bmWrap.hidden = false;
            if (bmKeyword) {
                bmKeyword.textContent = 'Keyword: "' + (res.keyword || keywordInput) + '" — import link expires in 15 minutes.';
            }
            if (bmLink && window.SeoSerpBookmarklet) {
                bmLink.href = window.SeoSerpBookmarklet.buildHref(res.import_url, res.token);
            }
        }).catch(function () {
            if (openGoogleBtn) openGoogleBtn.disabled = false;
            if (statusEl) statusEl.textContent = 'Request failed';
            toast('Request failed');
        });
        return false;
    };
    document.querySelectorAll('#seoCompUrlModal .close-btn, #seoCompUrlModal [data-close], #seoCompKeywordModal .close-btn, #seoCompKeywordModal [data-close]').forEach(function (btn) {
        btn.addEventListener('click', function (e) {
            e.preventDefault();
            closeEl(btn.closest('.crud-modal'));
        });
    });
})();
</script>
{% endblock %}

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