{% extends "base.html" %}
{% block title %}Pacnew Review - garuda-pilot{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/diff2html.min.css">
<script src="/static/diff2html.min.js"></script>
<link rel="stylesheet" href="/static/highlight.min.css">
<script src="/static/highlight.min.js"></script>
{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Pacnew Review</h1>
    <p class="subtitle">
        {% if files %}
            {{ files | length }} file{{ "s" if files | length != 1 else "" }} need review
        {% else %}
            All clear
        {% endif %}
    </p>
</div>

<div class="info-box" style="margin-bottom: 20px;">
    <strong>What are .pacnew files?</strong>
    When a package update includes a changed config file that you've already customised,
    pacman can't safely overwrite your version. Instead it saves the new version alongside
    yours with a <code>.pacnew</code> extension and leaves the decision to you.
    For each file you need to choose: keep yours, use the new one, or merge the two.
    Files marked <strong>auto-managed</strong> (e.g. written by NetworkManager) should
    just have their .pacnew deleted — they'll be rewritten by the tool anyway.
</div>

{% if not has_claude and not has_ollama %}
<div class="info-box" style="margin-bottom: 16px;">
    <strong>AI explanations available</strong> —
    configure Claude or Ollama on the <a href="/settings">Settings page</a>.
</div>
{% endif %}

{% if not files %}
<div class="health-status health-ok">
    <div class="health-icon">OK</div>
    <div><h3>No pacnew files found</h3><p>Nothing to review.</p></div>
</div>
{% else %}

<div class="info-box" style="margin-bottom: 16px;">
    You can try to resolve all manually with:
    <code>sudo pacdiff</code>
    <span class="upgrade-copy-link" onclick="copyText('sudo pacdiff', this)" style="margin-left: 6px;">copy</span>
</div>

{% for f in files %}
<div class="pacnew-card" id="card-{{ loop.index }}">

    <div class="pacnew-card-header" onclick="togglePacnew({{ loop.index }}, '{{ f.pacnew_path | urlencode }}')">
        <div style="display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;">
            <span class="pacnew-guidance pacnew-{{ f.guidance }}">{{ f.guidance }}</span>
            <code style="font-size: 0.9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ f.current_path }}</code>
        </div>

        {% if has_claude or has_ollama %}
        <div class="pacnew-header-ai" onclick="event.stopPropagation()">
            <span class="pacnew-ai-sep">Explain:</span>
            {% if has_claude %}
            <button class="btn btn-sm btn-secondary"
                    hx-post="/htmx/pacnew-explain?path={{ f.pacnew_path | urlencode }}&provider=claude"
                    hx-target="#ai-{{ loop.index }}" hx-swap="innerHTML"
                    hx-indicator="#ai-spinner-{{ loop.index }}">Claude</button>
            {% endif %}
            {% if has_ollama %}
            <button class="btn btn-sm btn-secondary"
                    hx-post="/htmx/pacnew-explain?path={{ f.pacnew_path | urlencode }}&provider=ollama"
                    hx-target="#ai-{{ loop.index }}" hx-swap="innerHTML"
                    hx-indicator="#ai-spinner-{{ loop.index }}">Ollama</button>
            {% endif %}
            <span class="pacnew-ai-sep">Merge:</span>
            {% if has_claude %}
            <button class="btn btn-sm btn-accent"
                    hx-post="/htmx/pacnew-merge?path={{ f.pacnew_path | urlencode }}&provider=claude"
                    hx-target="#ai-{{ loop.index }}" hx-swap="innerHTML"
                    hx-indicator="#ai-spinner-{{ loop.index }}">Claude</button>
            {% endif %}
            {% if has_ollama %}
            <button class="btn btn-sm btn-accent"
                    hx-post="/htmx/pacnew-merge?path={{ f.pacnew_path | urlencode }}&provider=ollama"
                    hx-target="#ai-{{ loop.index }}" hx-swap="innerHTML"
                    hx-indicator="#ai-spinner-{{ loop.index }}">Ollama</button>
            {% endif %}
            <span id="ai-spinner-{{ loop.index }}" class="htmx-indicator"><span class="spinner"></span></span>
        </div>
        {% endif %}

        <span class="pacnew-toggle" id="toggle-{{ loop.index }}">▶ diff</span>
    </div>

    <div class="pacnew-hint">{{ f.guidance_text }}</div>

    {% if f.managed_by %}
    <div class="pacnew-managed-warning">
        <strong>⚠ Auto-managed file</strong> — this file is written by
        <strong>{{ f.managed_by }}</strong> and will be overwritten automatically
        whenever that tool runs. The correct action is to delete the .pacnew:
        <code>sudo rm {{ f.pacnew_path }}</code>
        <span class="upgrade-copy-link" onclick="event.stopPropagation(); copyText('sudo rm {{ f.pacnew_path }}', this)">copy</span>
    </div>
    {% endif %}

    <!-- AI result: always visible regardless of diff collapse state -->
    <div id="ai-{{ loop.index }}" style="padding: 0 14px;"></div>

    <div class="pacnew-body" id="body-{{ loop.index }}" style="display: none;">
        <div id="diff-{{ loop.index }}">
            <div style="color: var(--text-muted); font-size: 0.9em;">Loading diff...</div>
        </div>
    </div>
</div>
{% endfor %}
{% endif %}

{% if backups %}
<div class="about-section" style="margin-top: 32px;">
    <h2>Pre-merge backups</h2>
    <p style="color: var(--text-muted); font-size: 0.9em; margin-bottom: 12px;">
        A backup is saved automatically each time you generate an AI merge.
        If a merge goes wrong, use the restore command below.
    </p>
    <table>
    <thead>
        <tr><th>File</th><th>Backed up</th><th>Size</th><th>Restore</th></tr>
    </thead>
    <tbody>
    {% for b in backups %}
    <tr>
        <td><code style="font-size: 0.85em;">{{ b.original_path }}</code></td>
        <td style="color: var(--text-muted); font-size: 0.85em; white-space: nowrap;">{{ b.timestamp }}</td>
        <td style="color: var(--text-muted); font-size: 0.85em;">{{ (b.size / 1024) | round(1) }} KB</td>
        <td>
            {% set restore_cmd = "sudo cp " + b.backup_path + " " + b.original_path %}
            <span class="upgrade-copy-link" onclick="copyText('{{ restore_cmd }}', this)">copy restore cmd</span>
        </td>
    </tr>
    {% endfor %}
    </tbody>
    </table>
</div>
{% endif %}

<script>
const _diffLoaded = {};

function togglePacnew(idx, encodedPath) {
    const body = document.getElementById('body-' + idx);
    const toggle = document.getElementById('toggle-' + idx);
    const open = body.style.display !== 'none';
    if (open) {
        body.style.display = 'none';
        toggle.textContent = '▶ Show diff';
    } else {
        body.style.display = 'block';
        toggle.textContent = '▼ Hide diff';
        if (!_diffLoaded[idx]) {
            _diffLoaded[idx] = true;
            htmx.ajax('POST', '/htmx/pacnew-diff?path=' + encodedPath,
                      {target: '#diff-' + idx, swap: 'innerHTML'});
        }
    }
}

function copyText(text, el) {
    navigator.clipboard.writeText(text).then(() => {
        el.textContent = 'copied!';
        setTimeout(() => { el.textContent = 'copy'; }, 1500);
    });
}

function copyMergeContent(btn) {
    const pre = btn.parentElement.querySelector('pre.merge-preview');
    const text = pre ? pre.textContent : '';
    navigator.clipboard.writeText(text).then(() => {
        btn.textContent = 'Copied!';
        setTimeout(() => { btn.textContent = 'Copy'; }, 1500);
    });
}

function _renderDiff2Html(container) {
    var rawEl = container.querySelector('.raw-diff');
    var wrapper = container.querySelector('.d2h-wrapper');
    if (!rawEl || !wrapper) return;
    wrapper.innerHTML = Diff2Html.html(rawEl.textContent, {
        outputFormat: 'side-by-side',
        matching: 'lines',
        renderNothingWhenEmpty: false,
        drawFileList: false,
    });
    rawEl.remove();
}

document.body.addEventListener('htmx:afterSettle', function(e) {
    _renderDiff2Html(e.detail.elt);
    // Syntax-highlight any merge preview blocks injected by HTMX
    e.detail.elt.querySelectorAll('pre.merge-preview code').forEach(function(el) {
        hljs.highlightElement(el);
    });
});
</script>
{% endblock %}