{% extends "base.html" %}
{% block title %}Backlog — Grimoire{% endblock %}
{% block nav_backlog %}active{% endblock %}
{% block content %}

{# ── Header ────────────────────────────────────────────────────────── #}
<div class="flex flex-col gap-1 mb-6">
    <h1 class="text-3xl font-bold">Backlog</h1>
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2">
        <p class="text-sm opacity-60">
            {{ total_items }} item{{ 's' if total_items != 1 else '' }}
            across {{ repos_with_items }} repo{{ 's' if repos_with_items != 1 else '' }}
            {% if tier_counts %}
            —
            {% if tier_counts.get('critical', 0) %}<span class="text-error">{{ tier_counts.critical }} critical</span>{% endif %}
            {% if tier_counts.get('critical', 0) and tier_counts.get('high', 0) %} · {% endif %}
            {% if tier_counts.get('high', 0) %}<span class="text-warning">{{ tier_counts.high }} high</span>{% endif %}
            {% if (tier_counts.get('critical', 0) or tier_counts.get('high', 0)) and (tier_counts.get('medium', 0) + tier_counts.get('low', 0)) %} · {% endif %}
            {% if tier_counts.get('medium', 0) + tier_counts.get('low', 0) %}<span class="opacity-60">{{ tier_counts.get('medium', 0) + tier_counts.get('low', 0) }} other</span>{% endif %}
            {% endif %}
        </p>
        <div class="flex gap-2 items-center">
            <label class="input input-sm input-bordered flex items-center gap-2">
                <i class="fa-solid fa-magnifying-glass text-xs opacity-50"></i>
                <input id="backlog-search" type="text" class="grow w-40" placeholder="Search…" />
            </label>
            <div class="join">
                <button id="view-flat-btn" class="btn btn-sm join-item {{ '' if group_by == 'repo' else 'btn-active' }} tooltip" data-tip="Flat list">
                    <i class="fa-solid fa-list"></i>
                </button>
                <button id="view-grouped-btn" class="btn btn-sm join-item {{ 'btn-active' if group_by == 'repo' else '' }} tooltip" data-tip="Group by repo">
                    <i class="fa-solid fa-layer-group"></i>
                </button>
            </div>
            <div class="dropdown dropdown-end">
                <label tabindex="0" class="btn btn-outline btn-sm gap-2">
                    <i class="fa-solid fa-file-export"></i> Export
                </label>
                <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-56">
                    <li><a id="export-md" href="#">Copy as Markdown</a></li>
                    <li><a id="export-download" href="/api/backlog/export" target="_blank">Download .md file</a></li>
                </ul>
            </div>
            <button class="btn btn-sm btn-ghost" onclick="document.getElementById('filters-panel').classList.toggle('hidden')">
                <i class="fa-solid fa-filter"></i> Filters
            </button>
        </div>
    </div>
</div>

{# ── Filters Panel ─────────────────────────────────────────────────── #}
<div id="filters-panel" class="hidden bg-base-100 rounded-lg shadow-sm p-5 mb-6">
    {# Row 1: Category checkboxes + min priority slider #}
    <div class="flex flex-wrap items-end gap-6">
        <div>
            <label class="label pb-1"><span class="label-text text-xs opacity-60">Show</span></label>
            <div class="flex flex-wrap gap-3">
                <label class="label cursor-pointer gap-2">
                    <input type="checkbox" class="checkbox checkbox-sm category-filter" value="stale_issue" checked />
                    <span class="label-text text-sm">Stale Issues</span>
                </label>
                <label class="label cursor-pointer gap-2">
                    <input type="checkbox" class="checkbox checkbox-sm category-filter" value="stale_pr" checked />
                    <span class="label-text text-sm">Stale PRs</span>
                </label>
                <label class="label cursor-pointer gap-2">
                    <input type="checkbox" class="checkbox checkbox-sm category-filter" value="failing_workflow" checked />
                    <span class="label-text text-sm">Workflows</span>
                </label>
                <label class="label cursor-pointer gap-2">
                    <input type="checkbox" class="checkbox checkbox-sm category-filter" value="failing_check" checked />
                    <span class="label-text text-sm">Checks</span>
                </label>
            </div>
        </div>

        <div class="ml-auto">
            <label class="label pb-1"><span class="label-text text-xs opacity-60">Min priority: <span id="min-score-label">0</span></span></label>
            <input type="range" id="min-score-slider" min="0" max="200" value="0" step="5" class="range range-sm range-primary w-48" />
        </div>
    </div>

    {# Row 2: Category weight sliders #}
    <div class="mt-4 bg-base-200 rounded-lg p-4">
        <label class="label pb-2"><span class="label-text text-xs opacity-60"><i class="fa-solid fa-sliders"></i> Category weights</span></label>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div>
                <label class="label pb-0"><span class="label-text text-xs">Failing Workflow: <span class="weight-val" data-key="failing_workflow">{{ backlog_config.category_weights.failing_workflow | int }}</span></span></label>
                <input type="range" class="range range-xs range-error weight-slider" data-key="failing_workflow" min="0" max="200" value="{{ backlog_config.category_weights.failing_workflow | int }}" />
            </div>
            <div>
                <label class="label pb-0"><span class="label-text text-xs">Failing Check (error): <span class="weight-val" data-key="failing_check_error">{{ backlog_config.category_weights.failing_check_error | int }}</span></span></label>
                <input type="range" class="range range-xs range-error weight-slider" data-key="failing_check_error" min="0" max="200" value="{{ backlog_config.category_weights.failing_check_error | int }}" />
            </div>
            <div>
                <label class="label pb-0"><span class="label-text text-xs">Failing Check (warning): <span class="weight-val" data-key="failing_check_warning">{{ backlog_config.category_weights.failing_check_warning | int }}</span></span></label>
                <input type="range" class="range range-xs range-warning weight-slider" data-key="failing_check_warning" min="0" max="200" value="{{ backlog_config.category_weights.failing_check_warning | int }}" />
            </div>
            <div>
                <label class="label pb-0"><span class="label-text text-xs">Stale PR: <span class="weight-val" data-key="stale_pr">{{ backlog_config.category_weights.stale_pr | int }}</span></span></label>
                <input type="range" class="range range-xs range-info weight-slider" data-key="stale_pr" min="0" max="200" value="{{ backlog_config.category_weights.stale_pr | int }}" />
            </div>
            <div>
                <label class="label pb-0"><span class="label-text text-xs">Stale Issue: <span class="weight-val" data-key="stale_issue">{{ backlog_config.category_weights.stale_issue | int }}</span></span></label>
                <input type="range" class="range range-xs range-info weight-slider" data-key="stale_issue" min="0" max="200" value="{{ backlog_config.category_weights.stale_issue | int }}" />
            </div>
        </div>
        <div class="flex justify-end gap-2 mt-3">
            <button id="save-weights-btn" class="btn btn-primary btn-sm gap-1">
                <i class="fa-solid fa-floppy-disk"></i> Save to config
            </button>
        </div>
    </div>
</div>

{# ── Item List ─────────────────────────────────────────────────────── #}
{# ── Dismissed banner ──────────────────────────────────────────────── #}
<div id="dismissed-banner" class="hidden mb-4">
    <button id="dismissed-banner-btn" class="btn btn-ghost btn-sm gap-2 opacity-60 hover:opacity-100">
        <i class="fa-solid fa-eye-slash text-xs"></i>
        <span id="dismissed-count">0</span> item(s) dismissed — click to show
    </button>
</div>

{% if items %}
<div id="backlog-items">
    {% include "partials/backlog_items.html" %}
</div>
{% else %}
<div class="text-center py-12 opacity-50">
    <i class="fa-solid fa-clipboard-check text-4xl mb-3"></i>
    <p class="text-lg">No problems found — all repos are healthy!</p>
</div>
{% endif %}

<script>
(function() {
    // --- Dismiss state (localStorage, keyed to last_refresh) ---
    const LAST_REFRESH = '{{ last_refresh.isoformat() if last_refresh else "" }}';
    const STORAGE_KEY = 'grimoire_dismissed_' + LAST_REFRESH;

    function getDismissedSet() {
        try {
            const raw = localStorage.getItem(STORAGE_KEY);
            return raw ? new Set(JSON.parse(raw)) : new Set();
        } catch { return new Set(); }
    }

    function saveDismissedSet(set) {
        localStorage.setItem(STORAGE_KEY, JSON.stringify([...set]));
    }

    function cleanOldKeys() {
        // Remove dismiss keys from previous refreshes
        for (let i = localStorage.length - 1; i >= 0; i--) {
            const key = localStorage.key(i);
            if (key && key.startsWith('grimoire_dismissed_') && key !== STORAGE_KEY) {
                localStorage.removeItem(key);
            }
        }
    }

    function updateBanner() {
        const dismissed = getDismissedSet();
        const banner = document.getElementById('dismissed-banner');
        const count = document.getElementById('dismissed-count');
        if (dismissed.size > 0) {
            count.textContent = dismissed.size;
            banner.classList.remove('hidden');
        } else {
            banner.classList.add('hidden');
        }
    }

    function applyDismissState() {
        const dismissed = getDismissedSet();
        document.querySelectorAll('.backlog-item').forEach(el => {
            if (dismissed.has(el.dataset.itemId)) {
                el.classList.add('hidden');
            } else {
                el.classList.remove('hidden');
            }
        });
        updateBanner();
    }

    function dismissItem(itemId) {
        const dismissed = getDismissedSet();
        dismissed.add(itemId);
        saveDismissedSet(dismissed);
        const el = document.querySelector(`.backlog-item[data-item-id="${CSS.escape(itemId)}"]`);
        if (el) {
            el.style.transition = 'opacity 0.2s, max-height 0.3s';
            el.style.opacity = '0';
            el.style.maxHeight = el.scrollHeight + 'px';
            setTimeout(() => {
                el.style.maxHeight = '0';
                el.style.overflow = 'hidden';
                el.style.padding = '0';
                el.style.margin = '0';
            }, 150);
            setTimeout(() => el.classList.add('hidden'), 350);
        }
        updateBanner();
    }

    function showAllDismissed() {
        localStorage.removeItem(STORAGE_KEY);
        document.querySelectorAll('.backlog-item.hidden').forEach(el => {
            el.classList.remove('hidden');
            el.style = '';
        });
        updateBanner();
    }

    // Initialize
    cleanOldKeys();
    applyDismissState();

    // Dismiss button clicks (delegated)
    document.addEventListener('click', function(e) {
        const btn = e.target.closest('.dismiss-btn');
        if (!btn) return;
        const item = btn.closest('.backlog-item');
        if (item && item.dataset.itemId) {
            dismissItem(item.dataset.itemId);
        }
    });

    // Show all dismissed
    document.getElementById('dismissed-banner-btn').addEventListener('click', showAllDismissed);

    // Re-apply after HTMX partial swaps (filtering)
    document.body.addEventListener('htmx:afterSwap', function(e) {
        if (e.detail.target && e.detail.target.id === 'backlog-items') {
            applyDismissState();
        }
    });

    // Category filter mapping: checkbox value → actual BacklogCategory values
    const CATEGORY_MAP = {
        'stale_issue': ['stale_issue'],
        'stale_pr': ['stale_pr'],
        'failing_workflow': ['failing_workflow'],
        'failing_check': ['failing_check_error', 'failing_check_warning'],
    };
    const ALL_CATEGORIES = Object.values(CATEGORY_MAP).flat();

    // --- View mode state ---
    let currentGroupBy = '{{ group_by }}';

    // --- Filtering via HTMX ---
    function applyFilters() {
        const checkedBoxes = Array.from(document.querySelectorAll('.category-filter:checked')).map(c => c.value);
        const cats = checkedBoxes.flatMap(v => CATEGORY_MAP[v] || [v]);
        const minScore = document.getElementById('min-score-slider').value;
        const searchVal = document.getElementById('backlog-search').value.trim();
        const params = new URLSearchParams();
        if (cats.length < ALL_CATEGORIES.length) params.set('categories', cats.join(','));
        if (parseFloat(minScore) > 0) params.set('min_score', minScore);
        if (currentGroupBy) params.set('group_by', currentGroupBy);
        if (searchVal) params.set('search', searchVal);
        // Include weight slider values for live recalculation
        document.querySelectorAll('.weight-slider').forEach(s => {
            params.set('w_' + s.dataset.key, s.value);
        });
        const url = '/partials/backlog-items?' + params.toString();
        htmx.ajax('GET', url, {target: '#backlog-items', swap: 'innerHTML'});
    }

    document.querySelectorAll('.category-filter').forEach(cb => cb.addEventListener('change', applyFilters));
    const slider = document.getElementById('min-score-slider');
    slider.addEventListener('input', function() {
        document.getElementById('min-score-label').textContent = this.value;
    });
    slider.addEventListener('change', applyFilters);

    // --- Search box with debounce ---
    let searchDebounce = null;
    document.getElementById('backlog-search').addEventListener('input', function() {
        clearTimeout(searchDebounce);
        searchDebounce = setTimeout(applyFilters, 300);
    });

    // --- Weight slider labels + live recalculation ---
    let weightDebounce = null;
    document.querySelectorAll('.weight-slider').forEach(s => {
        s.addEventListener('input', function() {
            const label = document.querySelector('.weight-val[data-key="' + this.dataset.key + '"]');
            if (label) label.textContent = this.value;
            // Debounce to avoid spamming requests while dragging
            clearTimeout(weightDebounce);
            weightDebounce = setTimeout(applyFilters, 150);
        });
    });

    // --- Save weights to config ---
    document.getElementById('save-weights-btn').addEventListener('click', async function() {
        const weights = {};
        document.querySelectorAll('.weight-slider').forEach(s => {
            weights[s.dataset.key] = parseFloat(s.value);
        });
        try {
            const resp = await fetch('/api/backlog/save-weights', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({category_weights: weights})
            });
            if (resp.ok) {
                showToast('Weights saved to config', 'success');
                setTimeout(() => location.reload(), 600);
            } else {
                showToast('Failed to save weights', 'error');
            }
        } catch (e) {
            showToast('Failed to save weights', 'error');
        }
    });

    // --- Export as Markdown ---
    document.getElementById('export-md').addEventListener('click', async function(e) {
        e.preventDefault();
        try {
            const resp = await fetch('/api/backlog/export');
            const text = await resp.text();
            await navigator.clipboard.writeText(text);
            showToast('Backlog copied to clipboard', 'success');
        } catch (err) {
            showToast('Failed to copy', 'error');
        }
    });

    // --- Copy single item ---
    document.addEventListener('click', function(e) {
        const btn = e.target.closest('.copy-item-btn');
        if (!btn) return;
        const md = btn.dataset.markdown;
        navigator.clipboard.writeText(md).then(
            () => showToast('Copied to clipboard', 'success'),
            () => showToast('Failed to copy', 'error')
        );
    });

    // --- View toggle (flat / grouped) ---
    function updateToggleButtons() {
        const flatBtn = document.getElementById('view-flat-btn');
        const groupedBtn = document.getElementById('view-grouped-btn');
        flatBtn.classList.toggle('btn-active', currentGroupBy !== 'repo');
        groupedBtn.classList.toggle('btn-active', currentGroupBy === 'repo');
    }
    document.getElementById('view-flat-btn').addEventListener('click', function() {
        currentGroupBy = '';
        updateToggleButtons();
        applyFilters();
    });
    document.getElementById('view-grouped-btn').addEventListener('click', function() {
        currentGroupBy = 'repo';
        updateToggleButtons();
        applyFilters();
    });
})();
</script>

{% endblock %}