{% extends "base.html" %}
{% block title %}Transaction #{{ transaction.id }} - garuda-pilot{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Transaction #{{ transaction.id }}</h1>
    <p class="subtitle">{{ transaction.started_at[:19] | replace("T", " ") }}</p>
</div>

<div class="summary">
    <span class="stat"><span class="stat-value">{{ operations | length }}</span> total</span>
    <span class="stat" style="color: var(--green);"><span class="stat-value">{{ upgraded_count }}</span> upgraded</span>
    <span class="stat" style="color: var(--blue);"><span class="stat-value">{{ installed_count }}</span> installed</span>
    <span class="stat" style="color: var(--red);"><span class="stat-value">{{ removed_count }}</span> removed</span>
</div>

{% if pacman_command %}
<div style="margin: 12px 0; padding: 8px 12px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 4px;">
    <code style="color: var(--accent); font-size: 0.9em;">{{ pacman_command }}</code>
</div>
{% endif %}

{% if warnings %}
<div class="info-box" style="border-color: var(--warning);">
    <h3 style="color: var(--warning); cursor: pointer;" onclick="this.parentElement.querySelector('.log-content').classList.toggle('show')">
        Warnings <span style="font-size: 0.8em; font-weight: normal;">[{{ warnings | length }}]</span>
    </h3>
    <div class="log-content show">
        <ul style="margin: 8px 0 0 16px; list-style: disc;">
        {% for w in warnings %}
            <li style="color: var(--warning); font-size: 0.9em; margin-bottom: 4px;">{{ w }}</li>
        {% endfor %}
        </ul>
    </div>
</div>
{% endif %}

{% if scriptlet_lines %}
<div class="info-box">
    <h3 style="cursor: pointer;" onclick="this.parentElement.querySelector('.log-content').classList.toggle('show')">
        Scriptlet Output <span style="font-size: 0.8em; font-weight: normal;">[{{ scriptlet_lines | length }} lines]</span>
    </h3>
    <div class="log-content">
        <pre style="margin: 8px 0 0 0; font-size: 0.85em; white-space: pre-wrap; color: var(--text-muted); max-height: 400px; overflow-y: auto;">{% for line in scriptlet_lines %}{{ line }}
{% endfor %}</pre>
    </div>
</div>
{% endif %}

<div class="toolbar">
    <span id="pkg-count" style="color: var(--text-muted); font-size: 0.9em;">{{ operations | length }} / {{ operations | length }}</span>
    <input type="search" id="pkg-search" placeholder="Filter packages..."
           onkeyup="filterTable()">
    <div class="filter-group" id="action-filters"></div>
    <div class="filter-group">
        <label><input type="checkbox" id="hide-trivial" onchange="toggleHide('trivial')"> Hide trivial <span id="count-trivial"></span></label>
    </div>
    <div class="filter-group">
        <label><input type="checkbox" id="hide-patch" onchange="toggleHide('patch')"> Hide patch <span id="count-patch"></span></label>
    </div>
</div>

<table class="preview-table">
<thead>
<tr>
    <th style="width: 18%;">Package</th>
    <th style="width: 30%;">Description</th>
    <th style="width: 12%;">Action</th>
    <th style="width: 24%;">Version</th>
    <th style="width: 16%;">Age</th>
</tr>
</thead>
<tbody>
{% for op in operations %}
<tr class="{{ op.action }}-row"
    data-action="{{ op.action }}"
    data-trivial="{{ 'true' if op.is_trivial else 'false' }}"
    data-patch="{{ 'true' if op.is_patch else 'false' }}"
    data-category="{{ op.category or '' }}">
    <td>
        <a href="https://archlinux.org/packages/?q={{ op.package_name }}" target="_blank"
           style="font-weight: bold;">{{ op.package_name }}</a>
        {% if op.category %}
            <br>
            {% for cat in op.category.split() %}
                <span class="cat-badge cat-{{ cat }}">{{ cat }}</span>
            {% endfor %}
        {% endif %}
    </td>
    <td>{{ op.description or "—" }}</td>
    <td>
        <span class="action-badge {{ op.action }}">{{ op.action | upper }}</span>
    </td>
    <td>
        <span class="old">{{ op.old_version or "—" }}</span>
        <br>
        <span class="new">{{ op.new_version or "—" }}</span>
    </td>
    <td>
        {% if op.build_date %}
            <span class="version-date old">built {{ op.build_date }}</span>
            <br>
        {% endif %}
        {% if op.install_date %}
            <span class="version-date new">since {{ op.install_date }}</span>
        {% endif %}
    </td>
</tr>
{% endfor %}
</tbody>
</table>

<div style="margin-top: 20px; display: flex; gap: 8px; align-items: center;">
    <a href="#" class="btn" id="nav-prev" style="display:none;" title="Previous transaction (←)"></a>
    <a href="/history" class="btn">Back to History</a>
    <a href="#" class="btn" id="nav-next" style="display:none;" title="Next transaction (→)"></a>
</div>

<script>
function filterTable() {
    const q = document.getElementById('pkg-search').value.toLowerCase();
    document.querySelectorAll('tbody tr').forEach(row => {
        const name = row.cells[0].textContent.toLowerCase();
        const desc = row.cells[1].textContent.toLowerCase();
        const matchesSearch = !q || name.includes(q) || desc.includes(q);
        row.dataset.searchHidden = matchesSearch ? 'false' : 'true';
        applyRowVisibility(row);
    });
    updatePkgCount();
}

function toggleHide(type) {
    const checked = document.getElementById('hide-' + type).checked;
    document.querySelectorAll('tr[data-' + type + '="true"]').forEach(row => {
        row.dataset[type + 'Hidden'] = checked ? 'true' : 'false';
        applyRowVisibility(row);
    });
    updatePkgCount();
}

function toggleAction(action) {
    const checked = document.getElementById('action-' + action).checked;
    document.querySelectorAll('tr[data-action="' + action + '"]').forEach(row => {
        row.dataset.actionHidden = checked ? 'false' : 'true';
        applyRowVisibility(row);
    });
    updatePkgCount();
}

function applyRowVisibility(row) {
    const hidden = row.dataset.searchHidden === 'true'
        || row.dataset.actionHidden === 'true'
        || row.dataset.trivialHidden === 'true'
        || row.dataset.patchHidden === 'true';
    row.style.display = hidden ? 'none' : '';
}

function updatePkgCount() {
    const all = document.querySelectorAll('tbody tr[data-action]');
    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;
}

// Init: build action filter checkboxes dynamically
document.addEventListener('DOMContentLoaded', () => {
    // Count actions
    const actionCounts = {};
    document.querySelectorAll('tbody tr[data-action]').forEach(row => {
        const action = row.dataset.action;
        actionCounts[action] = (actionCounts[action] || 0) + 1;
        row.dataset.searchHidden = 'false';
        row.dataset.actionHidden = 'false';
        row.dataset.trivialHidden = 'false';
        row.dataset.patchHidden = 'false';
    });

    // Build checkboxes
    const container = document.getElementById('action-filters');
    const order = ['upgraded', 'downgraded', 'installed', 'reinstalled', 'removed'];
    for (const action of order) {
        if (!actionCounts[action]) continue;
        const label = document.createElement('label');
        const input = document.createElement('input');
        input.type = 'checkbox';
        input.id = 'action-' + action;
        input.checked = true;
        input.addEventListener('change', () => toggleAction(action));
        label.appendChild(input);
        label.appendChild(document.createTextNode(
            ' ' + action.charAt(0).toUpperCase() + action.slice(1)
            + ' [' + actionCounts[action] + ']'
        ));
        container.appendChild(label);
    }

    // Init counts for trivial/patch
    const trivial = document.querySelectorAll('tr[data-trivial="true"]').length;
    const patch = document.querySelectorAll('tr[data-patch="true"]').length;
    document.getElementById('count-trivial').textContent = '[' + trivial + ']';
    document.getElementById('count-patch').textContent = '[' + patch + ']';
});

// Build prev/next navigation from filtered history list
(function() {
    const currentId = {{ transaction.id }};
    const prevEl = document.getElementById('nav-prev');
    const nextEl = document.getElementById('nav-next');
    let prevId = {{ prev_id if prev_id else 'null' }};
    let nextId = {{ next_id if next_id else 'null' }};

    const stored = sessionStorage.getItem('history-visible-ids');
    if (stored) {
        try {
            const ids = JSON.parse(stored);
            const idx = ids.indexOf(currentId);
            if (idx !== -1) {
                prevId = idx > 0 ? ids[idx - 1] : null;
                nextId = idx < ids.length - 1 ? ids[idx + 1] : null;
            }
        } catch(e) {}
    }

    if (prevId) {
        prevEl.href = '/history/' + prevId;
        prevEl.innerHTML = '&larr; #' + prevId;
        prevEl.style.display = '';
    }
    if (nextId) {
        nextEl.href = '/history/' + nextId;
        nextEl.innerHTML = '#' + nextId + ' &rarr;';
        nextEl.style.display = '';
    }

    document.addEventListener('keydown', function(e) {
        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
        if (e.key === 'ArrowLeft' && prevId) window.location = '/history/' + prevId;
        if (e.key === 'ArrowRight' && nextId) window.location = '/history/' + nextId;
    });
})();
</script>
{% endblock %}