{% extends "base.html" %}
{% block title %}Upgrade Preview - garuda-pilot{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Upgrade Preview</h1>
    <p class="subtitle">
        {% if total %}
            {{ total }} pending update{{ "s" if total != 1 else "" }}
            {% if high_risk_count %}
                — <span style="color: var(--warning);">{{ high_risk_count }} high risk</span>
            {% endif %}
            {% if checked_at %} — checked {{ checked_at[:19] | replace("T", " ") }} UTC{% endif %}
        {% else %}
            System is up to date
            {% if checked_at %} — checked {{ checked_at[:19] | replace("T", " ") }} UTC{% endif %}
        {% endif %}
    </p>
</div>

{% if relevant_news %}
<div class="info-box">
    <h3>Relevant Arch News</h3>
    <ul>
    {% for item in relevant_news %}
        <li>
            <strong>[{{ item.published_at[:10] }}]</strong>
            <a href="{{ item.link }}" target="_blank">{{ item.title }}</a>
            {% if item.mentioned_packages %}
                <br>
                {% for pkg in item.mentioned_packages[:5] %}
                    <span class="cat-badge cat-system" style="cursor: pointer;"
                          onclick="searchPackage('{{ pkg }}')" title="Filter table to {{ pkg }}">{{ pkg }}</span>
                {% endfor %}
            {% endif %}
        </li>
    {% endfor %}
    </ul>
    <p style="margin: 5px 0 0 0; font-size: 0.9em; color: var(--text-muted);">
        Always review <a href="https://archlinux.org/news/" target="_blank">Arch news</a> before upgrading.
    </p>
</div>
{% endif %}

<div class="toolbar">
    <input type="search" id="pkg-search" placeholder="Search packages..."
           onkeyup="filterPackages()">

    <button class="btn btn-accent" hx-post="/htmx/preview-refresh"
            hx-target="#preview-content" hx-swap="innerHTML"
            hx-indicator="#refresh-spinner">
        Refresh
        <span id="refresh-spinner" class="htmx-indicator"><span class="spinner"></span></span>
    </button>

    {% if total %}
    <button class="btn btn-upgrade" onclick="openUpgradePanel()">
        Upgrade System
    </button>
    {% endif %}
</div>

<div id="preview-content">
{% include "preview_table.html" %}
</div>

<script>
/* Active summary filter: null or 'cve'|'flagged'|'news' */
let activeSummaryFilter = null;

function filterPackages() {
    applyFilters();
}

function toggleSummaryFilter(type) {
    if (activeSummaryFilter === type) {
        activeSummaryFilter = null;
    } else {
        activeSummaryFilter = type;
    }
    /* Update badge active states */
    document.querySelectorAll('.summary-filter').forEach(el => {
        el.classList.remove('active');
    });
    if (activeSummaryFilter) {
        const badges = document.querySelectorAll('.summary-filter');
        badges.forEach(el => {
            if (el.getAttribute('onclick').includes("'" + activeSummaryFilter + "'")) {
                el.classList.add('active');
            }
        });
    }
    applyFilters();
}

function applyFilters() {
    const q = document.getElementById('pkg-search').value.toLowerCase();
    const hideTrivial = document.getElementById('hide-trivial')?.checked;
    const hidePatch = document.getElementById('hide-patch')?.checked;

    /* Collect active category filters */
    const activeCats = [];
    for (const cat of ['graphics', 'kernel', 'system', 'mesa', 'xorg']) {
        const el = document.getElementById('hl-' + cat);
        if (el && el.checked) activeCats.push(cat);
    }
    const filterByCat = activeCats.length > 0;

    document.querySelectorAll('#preview-tbody tr:not(.changelog-row)').forEach(row => {
        /* Search filter */
        const name = row.cells[0].textContent.toLowerCase();
        const desc = row.cells[1].textContent.toLowerCase();
        const matchSearch = !q || name.includes(q) || desc.includes(q);

        /* Hide trivial/patch */
        const matchTrivial = !(hideTrivial && row.dataset.trivial === 'true');
        const matchPatch = !(hidePatch && row.dataset.patch === 'true');

        /* Category filter: show only rows matching any checked category */
        let matchCat = true;
        if (filterByCat) {
            const rowCats = (row.dataset.category || '').split(' ');
            matchCat = activeCats.some(c => rowCats.includes(c));
        }

        /* Summary filter (CVE / flagged / news) */
        let matchSummary = true;
        if (activeSummaryFilter === 'cve') {
            matchSummary = row.dataset.cve === 'true';
        } else if (activeSummaryFilter === 'flagged') {
            matchSummary = row.dataset.flagged === 'true';
        } else if (activeSummaryFilter === 'news') {
            matchSummary = row.dataset.news === 'true';
        }

        const visible = matchSearch && matchTrivial && matchPatch && matchCat && matchSummary;
        row.style.display = visible ? '' : 'none';

        /* Hide associated changelog row */
        const next = row.nextElementSibling;
        if (next && next.classList.contains('changelog-row')) {
            if (!visible) next.classList.remove('show');
        }
    });
    updatePackageCount();
}

function searchPackage(name) {
    const input = document.getElementById('pkg-search');
    input.value = name;
    applyFilters();
    document.getElementById('preview-content').scrollIntoView({behavior: 'smooth'});
}

function toggleChangelog(rowId) {
    const row = document.getElementById('changelog-' + rowId);
    if (row) row.classList.toggle('show');
}

function updatePackageCount() {
    const all = document.querySelectorAll('#preview-tbody tr:not(.changelog-row)');
    let visible = 0;
    all.forEach(row => {
        if (row.style.display !== 'none') visible++;
    });
    const el = document.getElementById('pkg-count');
    if (el) el.textContent = visible + ' / ' + all.length;
}

/* Reset summary filter when HTMX swaps in fresh table content */
document.body.addEventListener('htmx:afterSwap', function(e) {
    if (e.detail.target.id === 'preview-content') {
        activeSummaryFilter = null;
    }
});
</script>

{% include "upgrade_panel.html" %}
{% endblock %}