{% 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>

{% if not has_claude and not has_ollama %}
<div class="info-box" style="margin-bottom: 20px;">
    <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>

    <!-- 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 %}

<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 %}