{% extends "base.html" %}

{% block title %}Gnomenall Forte | Dashboard{% endblock %}

{% block content %}
<section class="section">
    <div class="section-title-row">
        <h2>{{ t('dashboard.title') }}</h2>
        <p class="stat-label">{{ t('dashboard.subtitle') }}</p>
    </div>
    <div class="catalog-card runtime-diagnostics-card" style="margin-bottom: 18px;">
        <div class="catalog-meta">
            <div>
                <h3>Runtime Diagnostics</h3>
                <div class="mono">{{ ui_session_user }} / {{ ui_session_auth_state }} / {{ ui_session_token[:16] if ui_session_token else '—' }}</div>
            </div>
            <div class="grid two">
                <div>
                    <div class="stat-label">UI user</div>
                    <div class="mono">{{ ui_session_user }}</div>
                </div>
                <div>
                    <div class="stat-label">Auth state</div>
                    <div class="mono">{{ ui_session_auth_state }}</div>
                </div>
            </div>
            <div class="stat-label">Натисни `Runtime` върху карта, за да видиш attachment/torrent състоянието.</div>
            <div class="actions">
                <button class="btn secondary" type="button" id="toggle-problem-filter">Покажи само проблемни КК</button>
                <a class="btn secondary" href="/runtime">System / Runtime</a>
            </div>
        </div>
    </div>
    <div id="catalog-list" class="card-list"></div>
</section>

<div id="preview-overlay" class="preview-overlay" role="dialog" aria-modal="true">
    <div class="preview-card">
        <div class="preview-header">
            <div class="stat-label" id="preview-title">{{ t('base.actions.preview') }}</div>
            <button class="btn secondary" type="button" id="preview-close">{{ t('base.actions.close') }}</button>
        </div>
        <div class="preview-body" id="preview-body"></div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
    const catalogContainer = document.getElementById('catalog-list');
    const toggleProblemFilter = document.getElementById('toggle-problem-filter');
    let problemsOnly = false;

    const renderCard = (item) => {
        const verifiedBadge = item.quorum_verified
            ? `<span class="badge success">${i18n.badgesVerified}</span>`
            : `<span class="badge warn">${i18n.badgesProposal}</span>`;
        const runtimeBadge = item.has_runtime_problem
            ? `<span class="badge warn">Runtime ${item.runtime_problem_count || 1}</span>`
            : `<span class="badge success">Runtime OK</span>`;
        const broadcastBadge = item.quorum_broadcast
            ? `<span class="badge success">${i18n.badgesBroadcast}</span>`
            : '';
        const coverSrc = item.cover_image_url || item.cover_image || '';
        const cover = coverSrc
            ? `<img src="${coverSrc}" alt="${i18n.coverAlt}">`
            : i18n.coverMissing;
        const deleteLabel = item.can_delete ? i18n.actionDeleteCatalog : i18n.actionHideCatalog;
        const canMakeLocal = !item.is_local && !item.is_author;
        const makeLocalLabel = item.is_local
            ? i18n.actionLocal
            : item.is_author
                ? i18n.actionAuthorLocal
                : i18n.actionMakeLocal;
        const authorAction = item.is_author
            ? `<a class="btn secondary" href="/forge?item_id=${item.id}">${i18n.actionRecreate}</a>`
            : `<button class="btn secondary" data-action="duplicate" data-id="${item.id}">${i18n.actionDuplicate}</button>`;
        const descriptionBlock = item.description_html
            ? `<div class="markdown-wrap">
                    <div class="markdown collapsed" data-preview="markdown">${item.description_html}</div>
                    <button class="btn secondary" data-action="toggle-md">{{ t('base.actions.show_more') }}</button>
               </div>`
            : '<div class="stat-label">—</div>';
        const infoBlock = item.info_html
            ? `<div class="markdown-wrap">
                    <div class="markdown collapsed" data-preview="markdown">${item.info_html}</div>
                    <button class="btn secondary" data-action="toggle-md">{{ t('base.actions.show_more') }}</button>
               </div>`
            : '';
        const publishButton = item.cell_publishable
            ? `<div class="inline-actions" style="display:inline-flex; gap:6px; align-items:center;">
                    <button class="btn secondary" data-action="publish-cell" data-id="${item.id}">${i18n.actionPublishCell}</button>
                    <button class="btn secondary" data-action="bep44-force" data-id="${item.id}" title="${i18n.actionForceBep44Title}" style="width:32px; padding:0; text-align:center;">!</button>
               </div>`
            : '';

        return `
            <div class="catalog-card" data-id="${item.id}">
                <div class="catalog-cover">${cover}</div>
                <div class="catalog-meta">
                    <div>
                        <h3>${item.title}</h3>
                        <div class="mono">${item.publisher || i18n.publisherUnknown}</div>
                    </div>
                    ${descriptionBlock}
                    <div class="mono magnet" data-magnet="${item.magnet || ''}">${item.magnet || i18n.magnetMissing}</div>
                    ${infoBlock}
                    <div class="grid two">
                        <div>
                            <div class="stat-label">${i18n.freshnessLabel}: ${item.freshness_pct}%</div>
                            <div class="progress"><div class="fill" style="width:${item.freshness_pct}%"></div></div>
                        </div>
                        <div>
                            <div class="stat-label">${i18n.quorumLabel}: ${item.quorum_label}</div>
                            <div class="progress quorum"><div class="fill" style="width:${item.quorum_pct}%"></div></div>
                        </div>
                    </div>
                    <div class="actions">
                        ${verifiedBadge}
                        ${broadcastBadge}
                        ${runtimeBadge}
                    </div>
                    <div class="actions">
                        <button class="btn" data-action="make-local" data-id="${item.id}" ${canMakeLocal ? '' : 'disabled'}>${makeLocalLabel}</button>
                        ${authorAction}
                        <button class="btn secondary" data-action="endorse" data-id="${item.id}">${i18n.actionEndorse}</button>
                        ${publishButton}
                        <button class="btn secondary" data-action="view-source" data-id="${item.id}">${i18n.actionViewSource}</button>
                        <button class="btn secondary" data-action="view-runtime" data-id="${item.id}">Runtime</button>
                        <button class="btn secondary" data-action="copy" data-magnet="${item.magnet || ''}">${i18n.actionCopyMagnet}</button>
                        <button class="btn danger" data-action="delete" data-id="${item.id}">${deleteLabel}</button>
                    </div>
                </div>
            </div>
        `;
    };

    const renderCatalog = (items) => {
        if (!items.length) {
            catalogContainer.innerHTML = `<div class="stat-label">${i18n.catalogEmpty}</div>`;
            return;
        }
        catalogContainer.innerHTML = items.map(renderCard).join('');
    };

    const loadCatalog = async () => {
        try {
            const response = await fetch(`/api/catalog?problems_only=${problemsOnly ? 'true' : 'false'}`);
            const data = await response.json();
            renderCatalog(data.items || []);
            if (toggleProblemFilter) {
                toggleProblemFilter.textContent = problemsOnly
                    ? 'Покажи всички КК'
                    : 'Покажи само проблемни КК';
            }
        } catch (err) {
            window.GNOMENALL_UI.pushLocalNotice('error', i18n.catalogError);
        }
    };

    const i18nFallback = {
        copySuccess: "{{ t('base.success.copied') }}",
        copyError: "{{ t('base.errors.copy') }}",
        showMore: "{{ t('base.actions.show_more') }}",
        showLess: "{{ t('base.actions.show_less') }}",
        badgesVerified: "{{ t('dashboard.badges.verified') }}",
        badgesProposal: "{{ t('dashboard.badges.proposal') }}",
        badgesBroadcast: "{{ t('dashboard.badges.broadcast') }}",
        coverMissing: "{{ t('dashboard.cover_missing') }}",
        coverAlt: "{{ t('dashboard.cover_alt') }}",
        publisherUnknown: "{{ t('dashboard.publisher_unknown') }}",
        magnetMissing: "{{ t('dashboard.magnet_missing') }}",
        freshnessLabel: "{{ t('dashboard.freshness') }}",
        quorumLabel: "{{ t('dashboard.quorum') }}",
        actionPublishCell: "{{ t('dashboard.actions.publish_cell') }}",
        actionForceBep44Title: "{{ t('dashboard.actions.force_bep44') }}",
        actionMakeLocal: "{{ t('dashboard.actions.make_local') }}",
        actionLocal: "{{ t('dashboard.actions.local') }}",
        actionAuthorLocal: "{{ t('dashboard.actions.author_local') }}",
        actionDuplicate: "{{ t('dashboard.actions.duplicate') }}",
        actionRecreate: "{{ t('dashboard.actions.recreate') }}",
        actionEndorse: "{{ t('dashboard.actions.endorse') }}",
        actionCopyMagnet: "{{ t('dashboard.actions.copy_magnet') }}",
        actionViewSource: "{{ t('dashboard.actions.view_source') }}",
        actionDeleteCatalog: "{{ t('dashboard.actions.delete_catalog') }}",
        actionHideCatalog: "{{ t('dashboard.actions.hide_catalog') }}",
        confirmDelete: "{{ t('dashboard.confirm_delete') }}",
        catalogEmpty: "{{ t('dashboard.notices.catalog_empty') }}",
        catalogError: "{{ t('dashboard.notices.catalog_error') }}",
        vaultLockedDuplicate: "{{ t('dashboard.notices.vault_locked_duplicate') }}",
        actionInProgress: "{{ t('dashboard.notices.action_in_progress') }}",
        actionFailed: "{{ t('dashboard.notices.action_failed') }}",
        actionDone: "{{ t('dashboard.notices.action_done') }}",
        actionFailedGeneric: "{{ t('dashboard.notices.action_failed_generic') }}",
        endorseInProgress: "{{ t('dashboard.notices.endorse_in_progress') }}",
        publishInProgress: "{{ t('dashboard.notices.publish_in_progress') }}",
        sourceLoadFailed: "{{ t('dashboard.notices.source_failed') }}",
        sourceTitle: "{{ t('dashboard.actions.view_source') }}"
    };
    let i18n = { ...i18nFallback };
    const getText = (key, fallbackValue) => {
        if (window.GNOMENALL_UI && typeof window.GNOMENALL_UI.translate === 'function') {
            return window.GNOMENALL_UI.translate(key);
        }
        return fallbackValue;
    };
    const refreshI18n = () => {
        i18n = {
            copySuccess: getText('base.success.copied', i18nFallback.copySuccess),
            copyError: getText('base.errors.copy', i18nFallback.copyError),
            showMore: getText('base.actions.show_more', i18nFallback.showMore),
            showLess: getText('base.actions.show_less', i18nFallback.showLess),
            badgesVerified: getText('dashboard.badges.verified', i18nFallback.badgesVerified),
            badgesProposal: getText('dashboard.badges.proposal', i18nFallback.badgesProposal),
            badgesBroadcast: getText('dashboard.badges.broadcast', i18nFallback.badgesBroadcast),
            coverMissing: getText('dashboard.cover_missing', i18nFallback.coverMissing),
            coverAlt: getText('dashboard.cover_alt', i18nFallback.coverAlt),
            publisherUnknown: getText('dashboard.publisher_unknown', i18nFallback.publisherUnknown),
            magnetMissing: getText('dashboard.magnet_missing', i18nFallback.magnetMissing),
            freshnessLabel: getText('dashboard.freshness', i18nFallback.freshnessLabel),
            quorumLabel: getText('dashboard.quorum', i18nFallback.quorumLabel),
            actionPublishCell: getText('dashboard.actions.publish_cell', i18nFallback.actionPublishCell),
            actionForceBep44Title: getText('dashboard.actions.force_bep44', i18nFallback.actionForceBep44Title),
            actionMakeLocal: getText('dashboard.actions.make_local', i18nFallback.actionMakeLocal),
            actionLocal: getText('dashboard.actions.local', i18nFallback.actionLocal),
            actionAuthorLocal: getText('dashboard.actions.author_local', i18nFallback.actionAuthorLocal),
            actionDuplicate: getText('dashboard.actions.duplicate', i18nFallback.actionDuplicate),
            actionRecreate: getText('dashboard.actions.recreate', i18nFallback.actionRecreate),
            actionEndorse: getText('dashboard.actions.endorse', i18nFallback.actionEndorse),
            actionCopyMagnet: getText('dashboard.actions.copy_magnet', i18nFallback.actionCopyMagnet),
            actionViewSource: getText('dashboard.actions.view_source', i18nFallback.actionViewSource),
            actionDeleteCatalog: getText('dashboard.actions.delete_catalog', i18nFallback.actionDeleteCatalog),
            actionHideCatalog: getText('dashboard.actions.hide_catalog', i18nFallback.actionHideCatalog),
            confirmDelete: getText('dashboard.confirm_delete', i18nFallback.confirmDelete),
            catalogEmpty: getText('dashboard.notices.catalog_empty', i18nFallback.catalogEmpty),
            catalogError: getText('dashboard.notices.catalog_error', i18nFallback.catalogError),
            vaultLockedDuplicate: getText('dashboard.notices.vault_locked_duplicate', i18nFallback.vaultLockedDuplicate),
            actionInProgress: getText('dashboard.notices.action_in_progress', i18nFallback.actionInProgress),
            actionFailed: getText('dashboard.notices.action_failed', i18nFallback.actionFailed),
            actionDone: getText('dashboard.notices.action_done', i18nFallback.actionDone),
            actionFailedGeneric: getText('dashboard.notices.action_failed_generic', i18nFallback.actionFailedGeneric),
            endorseInProgress: getText('dashboard.notices.endorse_in_progress', i18nFallback.endorseInProgress),
            publishInProgress: getText('dashboard.notices.publish_in_progress', i18nFallback.publishInProgress),
            sourceLoadFailed: getText('dashboard.notices.source_failed', i18nFallback.sourceLoadFailed),
            sourceTitle: getText('dashboard.actions.view_source', i18nFallback.sourceTitle)
        };
    };
    refreshI18n();
    if (window.GNOMENALL_UI) {
        window.GNOMENALL_UI.onLocaleChange = refreshI18n;
    }

    const previewOverlay = document.getElementById('preview-overlay');
    const previewBody = document.getElementById('preview-body');
    const previewTitle = document.getElementById('preview-title');
    const previewClose = document.getElementById('preview-close');

    const openPreview = (title, content) => {
        previewTitle.textContent = title || "{{ t('base.actions.preview') }}";
        previewBody.innerHTML = '';
        previewBody.appendChild(content);
        previewOverlay.classList.add('active');
    };

    const closePreview = () => {
        previewOverlay.classList.remove('active');
        previewBody.innerHTML = '';
    };

    previewOverlay.addEventListener('click', (event) => {
        if (event.target === previewOverlay) {
            closePreview();
        }
    });

    previewClose.addEventListener('click', closePreview);

    document.addEventListener('keydown', (event) => {
        if (event.key === 'Escape') {
            closePreview();
        }
    });

    const handleAction = async (event) => {
        const btn = event.target.closest('button');
        if (!btn) return;
        const action = btn.dataset.action;
        if (!action) return;
        if (action === 'toggle-md') {
            const wrap = btn.closest('.markdown-wrap');
            const markdown = wrap ? wrap.querySelector('.markdown') : null;
            if (!markdown) return;
            markdown.classList.toggle('collapsed');
            btn.textContent = markdown.classList.contains('collapsed') ? i18n.showMore : i18n.showLess;
            return;
        }

        if (action === 'copy') {
            const magnet = btn.dataset.magnet || '';
            if (!magnet) {
                window.GNOMENALL_UI.pushLocalNotice('error', i18n.copyError);
                return;
            }
            await navigator.clipboard.writeText(magnet);
            window.GNOMENALL_UI.pushLocalNotice('success', i18n.copySuccess);
            return;
        }

        if (action === 'duplicate' && window.GNOMENALL_UI.vaultState === 'LOCKED') {
            window.GNOMENALL_UI.pushLocalNotice('error', i18n.vaultLockedDuplicate);
            return;
        }

        const itemId = btn.dataset.id;
        if (!itemId) return;

        if (action === 'delete' && !confirm(i18n.confirmDelete)) {
            return;
        }

        if (action === 'view-source') {
            btn.disabled = true;
            try {
                const response = await fetch(`/api/library/${itemId}/source`);
                const data = await response.json();
                if (!response.ok) {
                    window.GNOMENALL_UI.pushLocalNotice('error', data.error || i18n.sourceLoadFailed);
                    return;
                }
                const pre = document.createElement('pre');
                pre.className = 'markdown';
                pre.textContent = data.source || '';
                openPreview(i18n.sourceTitle, pre);
            } catch (err) {
                window.GNOMENALL_UI.pushLocalNotice('error', i18n.sourceLoadFailed);
            } finally {
                btn.disabled = false;
            }
            return;
        }

        if (action === 'view-runtime') {
            btn.disabled = true;
            try {
                const response = await fetch(`/api/items/${itemId}/runtime`);
                const data = await response.json();
                if (!response.ok) {
                    window.GNOMENALL_UI.pushLocalNotice('error', data.error || 'Runtime load failed');
                    return;
                }
                const wrapper = document.createElement('div');
                wrapper.className = 'markdown';
                const attachments = Array.isArray(data.attachments) ? data.attachments : [];
                const torrent = data.torrent || null;
                const attachmentRows = attachments.length
                    ? attachments.map((entry) => {
                        const role = entry.artifact_role || 'artifact';
                        const state = entry.state || '—';
                        const path = entry.local_path || entry.expected_path || '—';
                        const error = entry.last_error ? ` | error: ${entry.last_error}` : '';
                        return `<div><strong>${role}</strong>: ${state}<br><span class="mono">${path}</span>${error}</div>`;
                    }).join('<hr>')
                    : '<div>Няма attachment runtime данни.</div>';
                const torrentBlock = torrent
                    ? `<div><strong>torrent</strong>: ${(torrent.qb_state || '—')} / ${Math.round((Number(torrent.progress || 0) * 100))}%<br><span class="mono">${torrent.content_path || torrent.save_path || '—'}</span></div>`
                    : '<div>Няма torrent runtime данни.</div>';
                wrapper.innerHTML = `${torrentBlock}<hr>${attachmentRows}`;
                openPreview('Runtime Diagnostics', wrapper);
            } catch (err) {
                window.GNOMENALL_UI.pushLocalNotice('error', 'Runtime load failed');
            } finally {
                btn.disabled = false;
            }
            return;
        }

        btn.disabled = true;
        window.GNOMENALL_UI.pushLocalNotice('info', i18n.actionInProgress);

        try {
            let response;
            if (action === 'endorse') {
                btn.textContent = i18n.endorseInProgress;
                response = await fetch('/api/senate/sign', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ item_id: itemId })
                });
            } else if (action === 'publish-cell') {
                btn.textContent = i18n.publishInProgress;
                response = await fetch(`/api/items/${itemId}/publish-cell`, { method: 'POST' });
            } else if (action === 'bep44-force') {
                btn.textContent = '!';
                response = await fetch(`/api/items/${itemId}/bep44-force`, { method: 'POST' });
            } else {
                response = await fetch(`/api/items/${itemId}/${action === 'delete' ? 'delete' : action}` , { method: 'POST' });
            }

            const data = await response.json();
            if (!response.ok) {
                window.GNOMENALL_UI.pushLocalNotice('error', data.error || i18n.actionFailed);
            } else {
                const msg = data.message || i18n.actionDone;
                window.GNOMENALL_UI.pushLocalNotice('success', msg);
                await loadCatalog();
            }
        } catch (err) {
            window.GNOMENALL_UI.pushLocalNotice('error', i18n.actionFailedGeneric);
        } finally {
            btn.disabled = false;
            if (action === 'endorse') {
                btn.textContent = i18n.actionEndorse;
            } else if (action === 'publish-cell') {
                btn.textContent = i18n.actionPublishCell;
            } else if (action === 'bep44-force') {
                btn.textContent = '!';
            }
        }
    };

    catalogContainer.addEventListener('click', handleAction);

    catalogContainer.addEventListener('click', (event) => {
        if (event.target.closest('[data-action="toggle-md"]')) {
            return;
        }

        const markdown = event.target.closest('.markdown[data-preview="markdown"]');
        if (markdown) {
            const card = markdown.closest('.catalog-card');
            const title = card ? card.querySelector('h3')?.textContent : '';
            const wrapper = document.createElement('div');
            wrapper.className = 'markdown';
            wrapper.innerHTML = markdown.innerHTML;
            openPreview(title || "{{ t('base.actions.preview') }}", wrapper);
            return;
        }

        const cover = event.target.closest('.catalog-cover');
        if (cover) {
            const img = cover.querySelector('img');
            if (!img) return;
            const card = cover.closest('.catalog-card');
            const title = card ? card.querySelector('h3')?.textContent : '';
            const previewImg = document.createElement('img');
            previewImg.src = img.src;
            previewImg.alt = img.alt || title || i18n.coverAlt;
            openPreview(title || "{{ t('base.actions.preview') }}", previewImg);
        }
    });

    catalogContainer.addEventListener('dblclick', async (event) => {
        const magnetEl = event.target.closest('.magnet');
        if (!magnetEl) return;
        const magnet = magnetEl.dataset.magnet || '';
        if (!magnet) {
            window.GNOMENALL_UI.pushLocalNotice('error', i18n.copyError);
            return;
        }
        try {
            await navigator.clipboard.writeText(magnet);
            window.GNOMENALL_UI.pushLocalNotice('success', i18n.copySuccess);
        } catch (err) {
            window.GNOMENALL_UI.pushLocalNotice('error', i18n.copyError);
        }
    });
    if (toggleProblemFilter) {
        toggleProblemFilter.addEventListener('click', async () => {
            problemsOnly = !problemsOnly;
            await loadCatalog();
        });
    }
    loadCatalog();
    setInterval(loadCatalog, 6000);
</script>
{% endblock %}