{% extends "base.html" %}
{% block title %}Movements — BILLS{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Movements</h1>
    <span class="badge">{{ movements.total }} matching</span>
</div>

{# ── Filter chips ─────────────────────────────────────────────────── #}
{% set base_args = {} %}
{% if q %}{% set _ = base_args.update({'q': q}) %}{% endif %}
{% if per_page != 50 %}{% set _ = base_args.update({'per_page': per_page}) %}{% endif %}
{% if sort_by != 'pdf_number' %}{% set _ = base_args.update({'sort': sort_by}) %}{% endif %}
{% if sort_dir != 'desc' %}{% set _ = base_args.update({'dir': sort_dir}) %}{% endif %}

<div class="card" style="padding:.75rem 1rem;">
    {# Search #}
    <form method="get" id="filter-form" class="search-bar" style="margin:0 0 .75rem 0;">
        <input type="text" name="q" value="{{ q }}"
               placeholder="Search company, invoice #, project, VAT, filename, bank reason…">

        {# Preserve current chip state on submit #}
        {% if flt.has_pdf %}<input type="hidden" name="has_pdf" value="1">{% endif %}
        {% if flt.has_bank_row %}<input type="hidden" name="has_bank_row" value="1">{% endif %}
        {% if flt.missing_pdf %}<input type="hidden" name="missing_pdf" value="1">{% endif %}
        {% if flt.excluded %}<input type="hidden" name="excluded" value="1">{% endif %}
        {% if flt.needs_review %}<input type="hidden" name="needs_review" value="1">{% endif %}

        <button type="submit" class="btn">Search</button>
        {% if q %}
            <a class="btn btn-secondary"
               href="{{ url_for('invoices.list_invoices', **base_args) }}">Clear</a>
        {% endif %}
    </form>

    {# Filter chips #}
    {% macro chip(key, label, icon='', tooltip='') %}
        {% set is_on = flt[key] %}
        {% set new_args = dict(base_args) %}
        {% for k, v in flt.items() if v and k != key %}
            {% set _ = new_args.update({k: '1'}) %}
        {% endfor %}
        {% if not is_on %}
            {% set _ = new_args.update({key: '1'}) %}
        {% endif %}
        <a href="{{ url_for('invoices.list_invoices', **new_args) }}"
           class="filter-chip{% if is_on %} filter-chip-active{% endif %}"
           title="{{ tooltip }}">
            {% if icon.endswith('.png') or icon.endswith('.svg') or icon.endswith('.jpg') %}
                <img src="{{ url_for('static', filename='figs/' ~ icon) }}"
                     alt="" class="chip-icon">
            {% else %}
                {{ icon }}
            {% endif %}
            {{ label }}
        </a>
    {% endmacro %}

    <div class="filter-chips" style="display:flex; flex-wrap:wrap; gap:.4rem;">
        {{ chip('has_pdf',      'Has PDF',          'pdf_icon.png',    'Movements with an attached invoice PDF') }}
        {{ chip('has_bank_row', 'Has Bank Row',     '🏦',              'Movements backed by a bank statement entry') }}
        {{ chip('missing_pdf',  'Missing Invoice',  'upload_icon.png', 'Bank rows still needing an invoice PDF') }}
        {{ chip('needs_review', 'Needs Review',     '⚠',               'Low-confidence extractions or missing required fields') }}
        {{ chip('excluded',     'Show Excluded',    '🚫',              'Include manually-excluded movements') }}
    </div>
</div>

{# ── Movements table ───────────────────────────────────────────────── #}
<div class="table-wrapper">
    <table id="movement-table">
        <thead>
            <tr>
                <th>#</th>
                <th>Origin</th>
                <th>Date</th>
                <th>Company / Reason</th>
                <th>Direction</th>
                <th>Amount (€)</th>
                <th>Source</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {% for m in movements.items %}
            <tr data-id="{{ m.id }}"{% if m.manually_excluded %} class="row-excluded"{% endif %}>
                <td class="mono">{{ m.display_id }}</td>

                <td>
                    {% if m.has_pdf and m.has_bank_row %}
                        <span class="tag tag-fused" title="Fused: PDF + bank row">⚭ Fused</span>
                    {% elif m.has_pdf %}
                        <span class="tag tag-pdf" title="PDF-origin">📄 PDF</span>
                    {% elif m.has_bank_row %}
                        <span class="tag tag-bank" title="Bank-origin">🏦 Bank</span>
                    {% endif %}
                </td>

                <td>
                    {% set d = m.invoice_date or m.value_date or m.transaction_date %}
                    {{ d.strftime('%d/%m/%Y') if d else '—' }}
                </td>

                <td>
                    {% if m.company_name %}
                        {{ m.company_name }}
                    {% elif m.reason %}
                        <span class="muted">{{ m.reason }}</span>
                    {% else %}
                        <span class="muted">—</span>
                    {% endif %}
                    {% if m.invoice_number %}
                        <small class="mono" style="color:var(--muted); margin-left:.4rem;">{{ m.invoice_number }}</small>
                    {% endif %}
                </td>

                <td>
                    {% if m.direction == 'emitted' %}
                        <span class="tag tag-emitted">📤 Emitted</span>
                    {% else %}
                        <span class="tag tag-received">📥 Received</span>
                    {% endif %}
                </td>

                <td class="amount mono">
                    {{ '%.2f'|format(m.amount|float) if m.amount is not none else '—' }}
                </td>

                <td>
                    {% if m.extraction_source %}
                        <span class="tag tag-{{ m.extraction_source }}">{{ m.extraction_source }}</span>
                    {% endif %}
                </td>

                <td style="white-space:nowrap;">
                    {% if m.has_pdf %}
                        <button class="btn-icon open-modal" data-id="{{ m.id }}" title="View PDF & fill fields">
                            <img src="{{ url_for('static', filename='figs/pdf_icon.png') }}"
                                 alt="PDF" class="action-icon">
                        </button>
                    {% endif %}
                    {% if m.has_bank_row and not m.has_pdf and not m.manually_excluded %}
                        <button class="btn-icon open-modal" data-id="{{ m.id }}" title="Attach PDF / receipt photo">
                            <img src="{{ url_for('static', filename='figs/upload_icon.png') }}"
                                 alt="PDF" class="action-icon">
                        </button>
                    {% endif %}
                    {% if m.fusion_status == 'ambiguous' %}
                        <button class="btn-icon resolve-fusion-btn" data-id="{{ m.id }}" title="Resolve fusion ambiguity">⚭</button>
                    {% endif %}
                    <button class="kebab-btn" title="More actions">⋮</button>
                </td>
            </tr>
            {% else %}
            <tr><td colspan="8" class="empty">
                {% if flt.missing_pdf %}
                    🎉 No bank rows missing an invoice. Either everything is reconciled,
                    or you haven't imported a bank statement yet.
                {% elif q or flt.has_pdf or flt.has_bank_row or flt.needs_review or flt.excluded %}
                    No movements match the current filters.
                {% else %}
                    No movements yet. Drop a PDF or bank statement on the
                    <a href="{{ url_for('data_import.index') }}">Import page</a> to get started.
                {% endif %}
            </td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{# ── Pagination ───────────────────────────────────────────────────── #}
{% if movements.pages > 1 %}
{# Merge base_args + active filter chips into a single dict for url_for #}
{% set page_args = dict(base_args) %}
{% for k, v in flt.items() if v %}
    {% set _ = page_args.update({k: '1'}) %}
{% endfor %}
<div class="pagination">
    {% if movements.has_prev %}
        {% set _ = page_args.update({'page': movements.prev_num}) %}
        <a class="btn btn-secondary"
           href="{{ url_for('invoices.list_invoices', **page_args) }}">&larr; Prev</a>
    {% endif %}
    <span>Page {{ movements.page }} of {{ movements.pages }}</span>
    {% if movements.has_next %}
        {% set _ = page_args.update({'page': movements.next_num}) %}
        <a class="btn btn-secondary"
           href="{{ url_for('invoices.list_invoices', **page_args) }}">Next &rarr;</a>
    {% endif %}
</div>
{% endif %}

{# ── Right-click context menu (delete) ───────────────────────────── #}
<div id="ctx-menu" style="display:none; position:fixed; z-index:500;
     background:var(--surface); border:1px solid var(--border);
     border-radius:var(--radius); box-shadow:0 4px 16px rgba(0,0,0,.15);
     min-width:180px; padding:.25rem 0;">
    <button id="ctx-delete-btn"
            style="display:block; width:100%; text-align:left;
                   padding:.5rem 1rem; background:none; border:none;
                   font-size:.875rem; color:var(--error,#dc2626); cursor:pointer;">
    </button>
</div>

{# ── Delete confirmation modal ──────────────────────────────────── #}
<div id="delete-modal" style="display:none; position:fixed; inset:0; z-index:600;
     background:rgba(0,0,0,.45); align-items:center; justify-content:center;">
    <div style="background:var(--surface); border-radius:var(--radius);
                box-shadow:0 8px 32px rgba(0,0,0,.25); padding:1.5rem;
                max-width:420px; width:90%;">
        <h3 style="margin:0 0 .5rem;">Delete movements?</h3>
        <p style="font-size:.875rem; color:var(--muted); margin:0 0 .75rem;">
            This will permanently delete the selected movement(s) and their PDF
            files from disk. This cannot be undone.
        </p>
        <ul id="delete-modal-list"
            style="font-size:.875rem; margin:0 0 1rem; padding-left:1.25rem;
                   max-height:160px; overflow-y:auto;"></ul>
        <div style="display:flex; gap:.75rem; justify-content:flex-end;">
            <button id="delete-cancel-btn" class="btn btn-secondary">Cancel</button>
            <button id="delete-confirm-btn" class="btn"
                    style="background:var(--error,#dc2626); color:white;
                           border-color:var(--error,#dc2626);">Delete</button>
        </div>
    </div>
</div>

<style>
/* Filter chips — minimal styling that works with main.css; rest in 3c polish */
.filter-chip {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .3rem .65rem;
    font-size: .82rem;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 999px;
    background: var(--surface, #fff);
    color: var(--text, #111827);
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.filter-chip:hover {
    background: var(--surface-hover, #f3f4f6);
    border-color: var(--primary, #2563eb);
}
.filter-chip-active {
    background: var(--primary, #2563eb);
    color: #fff;
    border-color: var(--primary, #2563eb);
}
.filter-chip-active:hover { background: var(--primary, #2563eb); }
.tag-fused    { background:#ddd6fe; color:#4c1d95; border-color:#c4b5fd; }
.tag-pdf      { background:#dbeafe; color:#1e40af; border-color:#93c5fd; }
.tag-bank     { background:#d1fae5; color:#065f46; border-color:#6ee7b5; }
.row-excluded { opacity: .55; }
.muted        { color: var(--muted, #6b7280); }
</style>

<!-- ── Row selection + delete + PDF modal hookup ────────────────────── -->
<script>
(function() {
    'use strict';

    // Re-uses the same /invoices/api/* routes; the template just renders different rows.

    let selectedIds = new Set();
    let lastClickedRow = null;
    const table = document.getElementById('movement-table');

    table.addEventListener('click', (e) => {
        if (e.target.closest('.open-modal')) return;
        const row = e.target.closest('tr[data-id]');
        if (!row) { clearSelection(); return; }

        if (e.shiftKey && lastClickedRow) {
            const rows = [...table.querySelectorAll('tbody tr[data-id]')];
            const a = rows.indexOf(lastClickedRow);
            const b = rows.indexOf(row);
            const [from, to] = a < b ? [a, b] : [b, a];
            if (!e.ctrlKey && !e.metaKey) clearSelection();
            rows.slice(from, to + 1).forEach(r => selectRow(r));
        } else if (e.ctrlKey || e.metaKey) {
            toggleRow(row);
        } else {
            clearSelection();
            selectRow(row);
        }
        lastClickedRow = row;
    });

    document.addEventListener('click', (e) => {
        if (!e.target.closest('#movement-table') &&
            !e.target.closest('#ctx-menu') &&
            !e.target.closest('#delete-modal')) {
            clearSelection();
        }
    });

    function selectRow(row)  { selectedIds.add(row.dataset.id); row.classList.add('row-selected'); }
    function toggleRow(row)  { selectedIds.has(row.dataset.id) ? (selectedIds.delete(row.dataset.id), row.classList.remove('row-selected')) : selectRow(row); }
    function clearSelection(){ selectedIds.clear(); table.querySelectorAll('.row-selected').forEach(r => r.classList.remove('row-selected')); lastClickedRow = null; }

    /* Right-click context menu */
    const ctxMenu   = document.getElementById('ctx-menu');
    const ctxDelBtn = document.getElementById('ctx-delete-btn');

    table.addEventListener('contextmenu', (e) => {
        const row = e.target.closest('tr[data-id]');
        if (!row) return;
        e.preventDefault();
        if (!selectedIds.has(row.dataset.id)) { clearSelection(); selectRow(row); lastClickedRow = row; }
        const count = selectedIds.size;
        ctxDelBtn.textContent = count === 1 ? '🗑 Delete movement' : `🗑 Delete ${count} movements`;
        ctxMenu.style.display = 'block';
        ctxMenu.style.left = e.clientX + 'px';
        ctxMenu.style.top  = e.clientY + 'px';
    });
    document.addEventListener('click',  () => { ctxMenu.style.display = 'none'; });
    document.addEventListener('keydown',(e) => { if (e.key === 'Escape') ctxMenu.style.display = 'none'; });

    ctxDelBtn.addEventListener('click', () => { ctxMenu.style.display = 'none'; openDeleteModal(); });

    /* Delete modal */
    const deleteModal      = document.getElementById('delete-modal');
    const deleteList       = document.getElementById('delete-modal-list');
    const deleteCancelBtn  = document.getElementById('delete-cancel-btn');
    const deleteConfirmBtn = document.getElementById('delete-confirm-btn');

    function openDeleteModal() {
        deleteList.replaceChildren();
        selectedIds.forEach(id => {
            const row = table.querySelector(`tr[data-id="${id}"]`);
            const num = row ? (row.querySelector('td.mono')?.textContent || id).trim() : id;
            const name = row ? (row.querySelectorAll('td')[3]?.textContent || '').trim().split('\n')[0].slice(0, 60) : '';
            const li = document.createElement('li');
            li.textContent = '#' + num + (name ? ' — ' + name : '');
            deleteList.appendChild(li);
        });
        deleteModal.style.display = 'flex';
    }
    deleteCancelBtn.addEventListener('click', () => { deleteModal.style.display = 'none'; });

    deleteConfirmBtn.addEventListener('click', async () => {
        const ids = [...selectedIds].map(Number);
        deleteModal.style.display = 'none';
        try {
            const resp = await fetch('/invoices/api/bulk', {
                method: 'DELETE',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ ids }),
            });
            const data = await resp.json();
            if (!data.ok) { alert('Delete failed: ' + (data.error || 'Unknown error')); return; }

            ids.forEach(id => {
                const row = table.querySelector(`tr[data-id="${id}"]`);
                if (row) row.remove();
            });
            clearSelection();

            const badge = document.querySelector('.page-header .badge');
            if (badge) {
                const current = parseInt(badge.textContent, 10) || 0;
                badge.textContent = Math.max(0, current - data.db_deleted) + ' matching';
            }
            if (table.querySelectorAll('tbody tr[data-id]').length === 0) location.reload();
            if (data.errors && data.errors.length) {
                console.warn('Delete returned errors:', data.errors);
            }
        } catch (err) {
            console.error('Delete error:', err);
            alert('Delete failed. Check the console for details.');
        }
    });

    /* PDF modal hookup — only Movements with has_pdf=True render this button */
    document.querySelectorAll('.open-modal').forEach(btn => {
        btn.addEventListener('click', () => {
            // The dashboard template defines window.PdfModal as part of the
            // shared modal stack. The Movements list page doesn't render that
            // modal yet (it's dashboard-scoped) — so for now, opening a PDF
            // from this list page redirects to the dashboard with a hint to
            // auto-open the modal. Polish target for 3c.
            const id = btn.dataset.id;
            window.location.href = '{{ url_for("dashboard.index") }}?open_modal=' + id;
        });
    });
})();
</script>

<!-- ─────────────────────────────────────────────────────────────────── -->
<!-- 3c: Drawer (attach PDF / resolve fusion) + kebab quick-create rule -->
<!-- ─────────────────────────────────────────────────────────────────── -->

<style>
.drawer-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.35);
    z-index: 700; display: none;
}
.drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 420px; max-width: 100vw;
    background: var(--surface, #fff);
    box-shadow: -4px 0 16px rgba(0,0,0,.15);
    z-index: 800;
    display: none; flex-direction: column;
}
.drawer-header {
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
}
.drawer-header h3 { margin: 0; font-size: 1rem; }
.drawer-body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; }
.drawer-close {
    background: none; border: none; font-size: 1.5rem; cursor: pointer; line-height: 1;
}
.drop-zone {
    border: 2px dashed var(--border, #d1d5db); border-radius: var(--radius);
    padding: 2rem 1rem; text-align: center; color: var(--muted);
    transition: border-color .15s, background .15s;
}
.drop-zone.is-dragover { border-color: var(--primary); background: rgba(37,99,235,.05); }
.candidate-card {
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: .75rem; margin-bottom: .5rem; cursor: pointer;
    transition: border-color .15s, background .15s;
}
.candidate-card:hover { border-color: var(--primary); background: rgba(37,99,235,.04); }
.score-bar {
    display: inline-block; height: .35rem; border-radius: .2rem;
    background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981);
    margin-left: .5rem; vertical-align: middle;
}

/* Kebab menu */
.kebab-btn { background: none; border: none; cursor: pointer; font-size: 1.1rem; padding: 0 .35rem; color: var(--muted); }
.kebab-btn:hover { color: var(--text); }
.kebab-menu {
    position: fixed; z-index: 600; min-width: 280px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,.15);
    padding: .25rem 0; display: none;
}
.kebab-menu button {
    display: block; width: 100%; text-align: left; padding: .55rem 1rem;
    background: none; border: none; font-size: .85rem; cursor: pointer;
}
.kebab-menu button:hover { background: var(--surface-alt, #f3f4f6); }
.kebab-menu button.danger { color: var(--error, #dc2626); }
.kebab-menu hr { border: none; border-top: 1px solid var(--border); margin: .25rem 0; }

/* Mobile: drawer becomes bottom sheet */
@media (max-width: 768px) {
    .drawer {
        top: auto; left: 0; right: 0; bottom: 0;
        width: 100%; height: 85vh;
        border-top-left-radius: 1rem; border-top-right-radius: 1rem;
        box-shadow: 0 -4px 16px rgba(0,0,0,.15);
    }
}
</style>

<div class="drawer-overlay" id="drawer-overlay"></div>
<aside class="drawer" id="row-drawer" role="dialog" aria-modal="true">
    <div class="drawer-header">
        <h3 id="drawer-title">…</h3>
        <button class="drawer-close" id="drawer-close-btn" title="Close">×</button>
    </div>
    <div class="drawer-body" id="drawer-body">
        <!-- Filled dynamically by drawer mode (attach / resolve) -->
    </div>
</aside>

<div class="kebab-menu" id="row-kebab"></div>

<script>
(function () {
    'use strict';

    const drawer        = document.getElementById('row-drawer');
    const drawerOverlay = document.getElementById('drawer-overlay');
    const drawerTitle   = document.getElementById('drawer-title');
    const drawerBody    = document.getElementById('drawer-body');
    const drawerClose   = document.getElementById('drawer-close-btn');
    const kebab         = document.getElementById('row-kebab');
    const table         = document.getElementById('movement-table');

    let activeMovementId = null;

    function openDrawer(title) {
        drawerTitle.textContent = title;
        drawer.style.display = 'flex';
        drawerOverlay.style.display = 'block';
    }
    function closeDrawer() {
        drawer.style.display = 'none';
        drawerOverlay.style.display = 'none';
        drawerBody.innerHTML = '';
        activeMovementId = null;
    }
    drawerClose.addEventListener('click', closeDrawer);
    drawerOverlay.addEventListener('click', closeDrawer);
    document.addEventListener('keydown', e => { if (e.key === 'Escape') { closeDrawer(); hideKebab(); }});

    /* ── Attach-PDF mode ─────────────────────────────────────── */
    function showAttachMode(movementId) {
        activeMovementId = movementId;
        openDrawer('Attach PDF to movement #' + movementId);
        drawerBody.innerHTML = `
            <p style="font-size:.9rem; color:var(--muted); margin:0 0 1rem;">
                Drop a PDF, JPG, PNG, or HEIC file. It will be linked to this
                bank movement and analysed for invoice fields.
            </p>
            <div class="drop-zone" id="drawer-drop-zone">
                <div style="font-size:2rem;">📎</div>
                <div><strong>Drop a file here</strong> or
                    <label style="color:var(--primary); cursor:pointer; text-decoration:underline;">
                        browse
                        <input type="file" id="drawer-file-input"
                               accept=".pdf,.jpg,.jpeg,.png,.heic,.heif"
                               capture="environment"
                               style="display:none;">
                    </label>
                </div>
                <div style="font-size:.78rem; color:var(--muted); margin-top:.5rem;">
                    On a phone, tap "browse" to take a photo.
                </div>
            </div>
            <div id="drawer-status" style="margin-top:.75rem; font-size:.85rem;"></div>
        `;

        const dz     = document.getElementById('drawer-drop-zone');
        const input  = document.getElementById('drawer-file-input');
        const status = document.getElementById('drawer-status');

        dz.addEventListener('dragover',  e => { e.preventDefault(); dz.classList.add('is-dragover'); });
        dz.addEventListener('dragleave', () => dz.classList.remove('is-dragover'));
        dz.addEventListener('drop',      e => {
            e.preventDefault(); dz.classList.remove('is-dragover');
            if (e.dataTransfer.files.length) uploadAttach(e.dataTransfer.files[0], status);
        });
        input.addEventListener('change', e => {
            if (e.target.files.length) uploadAttach(e.target.files[0], status);
        });
    }

    async function uploadAttach(file, statusEl) {
        statusEl.textContent = '⏳ Uploading & analysing ' + file.name + '…';
        const fd = new FormData();
        fd.append('file', file);
        try {
            const resp = await fetch(`/invoices/api/${activeMovementId}/attach-pdf`, {
                method: 'POST', body: fd
            });
            const data = await resp.json();
            if (!data.ok) {
                statusEl.innerHTML = '❌ ' + (data.error || 'Attach failed');
                return;
            }
            statusEl.innerHTML = '✅ Attached. Reloading…';
            setTimeout(() => location.reload(), 700);
        } catch (err) {
            statusEl.innerHTML = '❌ Network error: ' + err.message;
        }
    }

    /* ── Resolve-ambiguity mode ─────────────────────────────── */
    async function showResolveMode(movementId) {
        activeMovementId = movementId;
        openDrawer('Resolve ambiguity for #' + movementId);
        drawerBody.innerHTML = '<div style="color:var(--muted);">Loading candidates…</div>';

        try {
            const resp = await fetch(`/invoices/api/${movementId}/fusion-candidates`);
            const data = await resp.json();
            if (!data.ok) { drawerBody.innerHTML = '<div style="color:var(--error);">Error: ' + (data.error || '') + '</div>'; return; }
            renderCandidates(data.seed, data.candidates);
        } catch (err) {
            drawerBody.innerHTML = '<div style="color:var(--error);">Network error: ' + err.message + '</div>';
        }
    }

    function renderCandidates(seed, candidates) {
        if (!candidates.length) {
            drawerBody.innerHTML = `
                <p style="color:var(--muted);">No fusion candidates currently match this movement.</p>
                <p style="font-size:.85rem; color:var(--muted);">
                    You can attach a PDF instead, or change matching parameters in Settings.
                </p>
                <button class="btn" onclick="window.MovementDrawer.showAttach(${seed.id})">Attach PDF instead</button>
            `;
            return;
        }

        const seedLine = `
            <div style="margin-bottom:1rem; padding:.75rem; background:var(--surface-alt,#f3f4f6); border-radius:var(--radius);">
                <div style="font-size:.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em;">This movement</div>
                <div style="font-weight:600; margin-top:.25rem;">
                    €${seed.amount} ${seed.direction === 'emitted' ? '📤' : '📥'} —
                    ${seed.company_name || seed.reason || '(no description)'}
                </div>
                <div style="font-size:.78rem; color:var(--muted);">
                    ${seed.invoice_date || seed.value_date || ''}
                </div>
            </div>
            <div style="font-size:.85rem; color:var(--muted); margin-bottom:.5rem;">
                Choose the matching ${seed.has_pdf ? 'bank row' : 'invoice'}:
            </div>
        `;

        const cardsHtml = candidates.map(c => {
            const m = c.movement;
            const score = Math.round(c.combined_score * 100);
            const scoreColor = score >= 80 ? '#10b981' : score >= 50 ? '#f59e0b' : '#ef4444';
            return `
                <div class="candidate-card" data-source-id="${m.id}">
                    <div style="display:flex; justify-content:space-between; align-items:start;">
                        <div>
                            <div style="font-weight:600;">€${m.amount} —
                                ${escapeHtml(m.company_name || m.reason || '(no description)')}</div>
                            <div style="font-size:.78rem; color:var(--muted); margin-top:.15rem;">
                                ${m.invoice_date || m.value_date || ''}
                                ${m.invoice_number ? ' · ' + escapeHtml(m.invoice_number) : ''}
                            </div>
                        </div>
                        <div style="text-align:right; font-size:.78rem;">
                            <span style="color:${scoreColor}; font-weight:600;">${score}%</span>
                        </div>
                    </div>
                </div>
            `;
        }).join('');

        drawerBody.innerHTML = seedLine + cardsHtml;

        drawerBody.querySelectorAll('.candidate-card').forEach(card => {
            card.addEventListener('click', () => confirmFusion(seed.id, parseInt(card.dataset.sourceId, 10)));
        });
    }

    async function confirmFusion(targetId, sourceId) {
        try {
            const resp = await fetch(`/invoices/api/${targetId}/fuse-with`, {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({ source_id: sourceId })
            });
            const data = await resp.json();
            if (!data.ok) { alert('Fusion failed: ' + (data.error || 'unknown')); return; }
            location.reload();
        } catch (err) {
            alert('Network error: ' + err.message);
        }
    }

    /* ── Kebab quick-create rules ───────────────────────────── */
    function showKebab(rowEl, x, y) {
        const id        = rowEl.dataset.id;
        const company   = (rowEl.querySelectorAll('td')[3]?.textContent || '').trim().split('\n')[0].slice(0, 50);
        const reasonRaw = company; // company OR bank reason — already merged in template
        const firstWord = reasonRaw.split(/\s+/).find(w => w.length >= 4) || reasonRaw;

        // Pull movement_type from row data attribute if present (rendered via origin tag)
        // For now, fetch on demand if needed — keep kebab snappy by deferring.

        kebab.innerHTML = `
            <button data-action="exclude-this">🚫 Exclude this one only</button>
            <hr>
            <button data-action="rule-issuer"      ${company   ? '' : 'disabled'}>
                ➕ Exclude all where issuer = "${escapeHtml(company.slice(0, 30))}${company.length > 30 ? '…' : ''}"</button>
            <button data-action="rule-description" ${firstWord ? '' : 'disabled'}>
                ➕ Exclude all where description contains "${escapeHtml(firstWord)}"</button>
            <button data-action="rule-mtype">
                ➕ Exclude all of this movement type</button>
        `;
        kebab.style.left = x + 'px';
        kebab.style.top  = y + 'px';
        kebab.style.display = 'block';

        kebab.querySelectorAll('button').forEach(btn => {
            btn.addEventListener('click', () => handleKebabAction(btn.dataset.action, rowEl));
        });
    }

    function hideKebab() { kebab.style.display = 'none'; }
    document.addEventListener('click', e => {
        if (!e.target.closest('#row-kebab') && !e.target.closest('.kebab-btn')) hideKebab();
    });

    async function handleKebabAction(action, rowEl) {
        hideKebab();
        const id      = rowEl.dataset.id;
        const company = (rowEl.querySelectorAll('td')[3]?.textContent || '').trim().split('\n')[0];

        if (action === 'exclude-this') {
            try {
                const resp = await fetch(`/invoices/api/${id}/exclude`, { method: 'POST' });
                const data = await resp.json();
                if (!data.ok) { alert('Exclude failed: ' + (data.error || '')); return; }
                location.reload();
            } catch (err) { alert('Network error: ' + err.message); }
            return;
        }

        let payload = null;
        if (action === 'rule-issuer' && company) {
            payload = { field: 'issuer', operator: 'equals', value: company };
        } else if (action === 'rule-description') {
            const word = company.split(/\s+/).find(w => w.length >= 4) || company;
            payload = { field: 'description', operator: 'contains', value: word };
        } else if (action === 'rule-mtype') {
            // Fetch the row's movement_type via API since not in DOM
            try {
                const r = await fetch(`/invoices/api/${id}`);
                const d = await r.json();
                if (!d.movement_type) { alert('No movement_type on this row.'); return; }
                payload = { field: 'movement_type', operator: 'equals', value: d.movement_type };
            } catch (err) { alert('Could not fetch row: ' + err.message); return; }
        }

        if (!payload) return;

        try {
            const resp = await fetch('/api/exclusion-rules', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify(payload)
            });
            const data = await resp.json();
            if (!data.ok) { alert('Rule create failed: ' + (data.error || '')); return; }
            location.reload();
        } catch (err) { alert('Network error: ' + err.message); }
    }

    /* ── Wire up rows ───────────────────────────────────────── */
    table.addEventListener('click', e => {
        // Open drawer on Missing-Invoice rows: bank row, no PDF, not excluded
        const openModalBtn = e.target.closest('.open-modal');
        if (openModalBtn) return;   // existing handler bounces to dashboard

        const attachBtn = e.target.closest('.attach-pdf-btn');
        if (attachBtn) {
            e.stopPropagation();
            showAttachMode(attachBtn.dataset.id);
            return;
        }

        const resolveBtn = e.target.closest('.resolve-fusion-btn');
        if (resolveBtn) {
            e.stopPropagation();
            showResolveMode(resolveBtn.dataset.id);
            return;
        }

        const kebabBtn = e.target.closest('.kebab-btn');
        if (kebabBtn) {
            e.stopPropagation();
            const row = kebabBtn.closest('tr[data-id]');
            const rect = kebabBtn.getBoundingClientRect();
            showKebab(row, rect.left, rect.bottom + 4);
        }
    });

    /* Public hook for showing the attach drawer from elsewhere (e.g. resolve fallback) */
    window.MovementDrawer = { showAttach: showAttachMode, showResolve: showResolveMode };

    function escapeHtml(s) {
        if (s == null) return '';
        return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
    }
})();
</script>
{% endblock %}