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

{% block content %}
<div class="page-header">
    <h1>Data Import</h1>
</div>

<!-- Upload drop zone -->
<div class="card">
    <h3>Upload Files</h3>
    <div class="dropzone" id="dropzone"
         data-upload-url="{{ url_for('data_import.upload') }}">
        <input type="file" name="files" id="file-input"
               accept="{{ accepted_exts }}" capture="environment" multiple hidden>
        <p class="dropzone-text">
            <strong>Drop files here</strong> or
            <a href="#" onclick="document.getElementById('file-input').click(); return false;">browse</a>
        </p>
        <p class="dropzone-hint">.xlsx / .xls / .csv → Bank statement &nbsp;·&nbsp; .pdf → Invoice PDF(s)</p>
    </div>
    <!-- Bank template selector (only affects bank file imports) -->
    <div style="margin-top:.75rem; display:flex; align-items:center; gap:.75rem;">
        <label style="font-size:.85rem; color:var(--muted); white-space:nowrap;">Bank format:</label>
        <select id="bank-template-select" style="padding:.35rem .65rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.85rem; background:var(--surface);">
            <option value="">Auto-detect</option>
            {% for t in bank_templates %}
            <option value="{{ t.id }}" {% if t.is_default %}selected{% endif %}>{{ t.name }}</option>
            {% endfor %}
        </select>
        <a href="{{ url_for('settings.index') }}#bank-templates-card" style="font-size:.8rem; color:var(--primary);">Manage templates</a>
    </div>
    <!-- PDF storage date override (only affects PDF imports) -->
    <div style="margin-top:.5rem; display:flex; align-items:center; gap:.75rem;">
        <label style="font-size:.85rem; color:var(--muted); white-space:nowrap;">PDF folder:</label>
        <input type="number" id="pdf-year-select" style="padding:.35rem .65rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.85rem; background:var(--surface); width:5.5rem; color:inherit;" min="1900" max="2999">
        <span style="font-size:.85rem; color:var(--muted);">/</span>
        <select id="pdf-quarter-select" style="padding:.35rem .65rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.85rem; background:var(--surface);">
            <option value="Q1">Q1 (Jan–Mar)</option>
            <option value="Q2">Q2 (Apr–Jun)</option>
            <option value="Q3">Q3 (Jul–Sep)</option>
            <option value="Q4">Q4 (Oct–Dec)</option>
        </select>
        <span style="font-size:.78rem; color:var(--muted);">(only affects PDFs)</span>
    </div>
</div>

<!-- Upload results table (populated by JS) -->
<div id="upload-results-card" class="card" hidden>
    <h3>Import Progress</h3>
    <div class="table-wrapper">
        <table id="upload-results-table">
            <thead>
                <tr>
                    <th style="width:2rem;"></th>
                    <th>File</th>
                    <th style="width:35%;">Status</th>
                    <th style="width:9rem;">Direction</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

<!-- Bank Reconciliation (always rendered, stats loaded via JS) -->
<div class="card" id="bank-card"
     data-stats-url="{{ url_for('data_import.bank_stats') }}"
     data-match-url="{{ url_for('data_import.run_fusion_route') }}">
    <h3>Bank Reconciliation</h3>
    <div class="stats-grid" id="bank-stats-grid">
        <div class="stat-card"><div class="stat-value" id="bs-count">{{ bank_count }}</div><div class="stat-label">Transactions</div></div>
        <div class="stat-card" style="border-color:#22c55e;"><div class="stat-value" id="bs-matched">{{ bank_matched|default(0) }}</div><div class="stat-label">Matched</div></div>
        <div class="stat-card stat-warn"><div class="stat-value" id="bs-ambiguous">{{ bank_ambiguous|default(0) }}</div><div class="stat-label">Need Review</div></div>
        <div class="stat-card stat-muted"><div class="stat-value" id="bs-no-cand">{{ bank_no_cand|default(0) }}</div><div class="stat-label">No Candidate</div></div>
        <div class="stat-card"><div class="stat-value" id="bs-unmatched">{{ bank_unmatched|default(0) }}</div><div class="stat-label">Unmatched</div></div>
    </div>
    <form method="post" action="{{ url_for('data_import.run_fusion_route') }}" style="margin-top:.5rem;">
        <button type="submit" class="btn btn-primary">▶ Run Matching</button>
    </form>
</div>

<!-- Ambiguous matches — manual resolution -->
{% if bank_ambiguous is defined and bank_ambiguous > 0 %}
<div class="card" id="ambiguous-card">
    <h3>Resolve Ambiguous Matches</h3>
    <p style="font-size:.85rem; color:var(--muted); margin-bottom:1rem;">
        These bank transactions have multiple candidate invoices. Pick the correct one or dismiss.
    </p>
    <div id="ambiguous-list">
        <p style="color:var(--muted); font-size:.85rem;">Loading…</p>
    </div>
</div>

<script>
    const CONFIRM_URL = '{{ url_for("data_import.confirm_fuse_route") }}';
    const DISMISS_URL = '{{ url_for("data_import.dismiss_movement_route") }}';
    const AMB_URL     = '{{ url_for("data_import.ambiguous_list") }}';

    async function loadAmbiguous() {
        const container = document.getElementById('ambiguous-list');
        try {
            const resp = await fetch(AMB_URL);
            const data = await resp.json();
            if (!data.transactions || data.transactions.length === 0) {
                container.innerHTML = '<p style="color:var(--success); font-size:.85rem;">✅ No ambiguous matches remaining.</p>';
                return;
            }
            const rows = data.transactions.map(renderTxn).join('');
            container.innerHTML = `
                <div class="table-wrapper">
                    <table>
                        <thead>
                            <tr>
                                <th style="width:5%;">#</th>
                                <th style="width:30%;">Company</th>
                                <th style="width:15%;">Inv. Date</th>
                                <th style="width:15%; text-align:right;">Amount</th>
                                <th style="width:20%; text-align:right;">Score</th>
                            </tr>
                        </thead>
                        <tbody>${rows}</tbody>
                    </table>
                </div>`;
        } catch (e) {
            container.innerHTML = `<p class="alert alert-error">Error loading: ${e.message}</p>`;
        }
    }

    function renderTxn(txn) {
        const date = txn.bank_date || '—';
        const single = txn.candidates.length === 1;

        // Bank transaction header row (spans all columns)
        let html = `
            <tr class="amb-group-header">
                <td colspan="5" style="background:var(--bg); padding:.6rem .9rem; font-size:.85rem; border-bottom:1px solid var(--border);">
                    <div style="display:flex; align-items:center; justify-content:space-between;">
                        <span><strong>🏦 ${date}</strong> &middot; €${txn.amount} &middot; ${txn.reason || 'No reason'} &middot; ${txn.movement || ''}</span>
                        <span style="display:flex; gap:.35rem;">
                            ${single
                                ? `<button class="btn btn-primary" style="padding:.2rem .5rem; font-size:.75rem;"
                                           onclick="confirmMatch(${txn.txn_id}, ${txn.candidates[0].invoice_id}, this)">✓ Pick</button>
                                   <button class="btn btn-secondary" style="padding:.2rem .5rem; font-size:.75rem;"
                                           onclick="dismissTxn(${txn.txn_id}, this)">✗ Dismiss</button>`
                                : `<button class="btn btn-secondary" style="padding:.2rem .5rem; font-size:.75rem;"
                                           onclick="dismissTxn(${txn.txn_id}, this)">✗ Dismiss</button>`
                            }
                        </span>
                    </div>
                </td>
            </tr>`;

        // Candidate rows
        txn.candidates.forEach(c => {
            html += `
            <tr>
                <td class="mono">${c.pdf_number || '—'}</td>
                <td>${c.company_name || '—'}</td>
                <td>${c.invoice_date || '—'}</td>
                <td class="amount">${c.total_amount}</td>
                <td style="text-align:right;">
                    <span class="badge" title="Date: ${c.date_score}  Name: ${c.name_score}" style="margin-right:.5rem;">
                        ${(c.combined_score * 100).toFixed(0)}%
                    </span>
                    ${single ? '' : `<button class="btn btn-primary" style="padding:.2rem .5rem; font-size:.75rem;"
                            onclick="confirmMatch(${txn.txn_id}, ${c.invoice_id}, this)">✓ Pick</button>`}
                </td>
            </tr>`;
        });

        return html;
    }

    async function confirmMatch(txnId, invoiceId, btn) {
        btn.disabled = true;
        btn.textContent = '…';
        try {
            const resp = await fetch(CONFIRM_URL, {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({txn_id: txnId, invoice_id: invoiceId})
            });
            const data = await resp.json();
            if (data.success) {
                // Fade out all rows belonging to this transaction group
                const row = btn.closest('tr');
                const tbody = row.closest('tbody');
                let sibling = row;
                // Walk backwards to find the group header
                while (sibling && !sibling.classList.contains('amb-group-header')) {
                    sibling = sibling.previousElementSibling;
                }
                // Fade the header + all following rows until next header
                if (sibling) {
                    let current = sibling;
                    while (current && (current === sibling || !current.classList.contains('amb-group-header'))) {
                        current.style.opacity = '0.3';
                        current.style.pointerEvents = 'none';
                        current = current.nextElementSibling;
                    }
                }
                setTimeout(() => { loadAmbiguous(); refreshBankStats(); }, 600);
            } else {
                alert(data.message);
                btn.disabled = false;
                btn.textContent = '✓ Pick';
            }
        } catch (e) {
            alert('Error: ' + e.message);
            btn.disabled = false;
            btn.textContent = '✓ Pick';
        }
    }

    async function dismissTxn(txnId, btn) {
        if (!confirm('Dismiss this transaction? It won\'t be matched to any invoice.')) return;
        btn.disabled = true;
        try {
            const resp = await fetch(DISMISS_URL, {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({txn_id: txnId})
            });
            const data = await resp.json();
            if (data.success) {
                const row = btn.closest('tr');
                let sibling = row;
                while (sibling && !sibling.classList.contains('amb-group-header')) {
                    sibling = sibling.previousElementSibling;
                }
                if (sibling) {
                    let current = sibling;
                    while (current && (current === sibling || !current.classList.contains('amb-group-header'))) {
                        current.style.opacity = '0.3';
                        current.style.pointerEvents = 'none';
                        current = current.nextElementSibling;
                    }
                }
                setTimeout(() => { loadAmbiguous(); refreshBankStats(); }, 600);
            } else {
                alert(data.message);
                btn.disabled = false;
            }
        } catch (e) {
            alert('Error: ' + e.message);
            btn.disabled = false;
        }
    }

    loadAmbiguous();
</script>
{% endif %}

<!-- Upload + Bank stats JS -->
<script>
(function () {
    const _now = new Date();
    const yearSel    = document.getElementById('pdf-year-select');
    const quarterSel = document.getElementById('pdf-quarter-select');
    yearSel.value = _now.getFullYear();
    quarterSel.value = 'Q' + (Math.floor(_now.getMonth() / 3) + 1);

    const dz        = document.getElementById('dropzone');
    const fi        = document.getElementById('file-input');
    const resCard   = document.getElementById('upload-results-card');
    const resTbody  = document.querySelector('#upload-results-table tbody');
    const uploadUrl = dz.dataset.uploadUrl;

    /* ── Refresh bank stats via JSON (no page reload) ──────────── */
    window.refreshBankStats = async function () {
        const statsUrl = document.getElementById('bank-card').dataset.statsUrl;
        try {
            const resp = await fetch(statsUrl);
            const d    = await resp.json();
            document.getElementById('bs-count').textContent     = d.bank_count;
            document.getElementById('bs-matched').textContent   = d.bank_matched;
            document.getElementById('bs-ambiguous').textContent = d.bank_ambiguous;
            document.getElementById('bs-no-cand').textContent   = d.bank_no_cand;
            document.getElementById('bs-unmatched').textContent = d.bank_unmatched;
        } catch (e) {
            console.error('Bank stats refresh failed:', e);
        }
    };

    /* ── Drag & drop ──────────────────────────────────────────── */
    dz.addEventListener('click', () => fi.click());
    dz.addEventListener('dragover', e => { e.preventDefault(); dz.classList.add('dropzone-hover'); });
    dz.addEventListener('dragleave', () => dz.classList.remove('dropzone-hover'));

    dz.addEventListener('drop', e => {
        e.preventDefault();
        dz.classList.remove('dropzone-hover');
        if (e.dataTransfer.files.length) {
            fi.files = e.dataTransfer.files;
            uploadFiles(e.dataTransfer.files);
        }
    });

    fi.addEventListener('change', () => {
        if (fi.files.length) uploadFiles(fi.files);
    });

    /* ── Upload via fetch ─────────────────────────────────────── */
    async function uploadFiles(files) {
        resCard.hidden = false;
        resTbody.innerHTML = '';

        // Build rows for all files upfront
        const fileList = Array.from(files);
        const rows = [];
        for (const f of fileList) {
            const ext  = f.name.split('.').pop().toLowerCase();
            const icon = ['xlsx','xls','csv'].includes(ext) ? '🏦' : '📄';
            const tr   = document.createElement('tr');
            tr.innerHTML = `
                <td>${icon}</td>
                <td class="mono" style="font-size:.82rem;">${f.name}</td>
                <td><span style="color:var(--muted); font-size:.82rem;">Waiting…</span></td>
                <td class="direction-cell"><span style="color:var(--muted); font-size:.82rem;">—</span></td>
            `;
            resTbody.appendChild(tr);
            rows.push({ file: f, tr: tr });
        }

        // Disable dropzone during upload
        dz.style.opacity = '0.5';
        dz.style.pointerEvents = 'none';

        const tplId      = document.getElementById('bank-template-select').value;
        const pdfYear    = document.getElementById('pdf-year-select').value;
        const pdfQuarter = document.getElementById('pdf-quarter-select').value;

        // Process one file at a time
        for (const { file, tr } of rows) {
            // Mark as processing
            const td = tr.querySelector('td:last-child');
            td.innerHTML = '<div class="upload-progress"><div class="upload-progress-bar" style="width:50%;"></div><span class="upload-progress-label">Processing…</span></div>';

            try {
                const formData = new FormData();
                formData.append('files', file);
                if (tplId) formData.append('template_id', tplId);
                formData.append('pdf_year', pdfYear);
                formData.append('pdf_quarter', pdfQuarter);

                const resp = await fetch(uploadUrl, { method: 'POST', body: formData });
                const data = await resp.json();

                if (data.error) {
                    setRowResult(tr, 'error', data.error, null);
                } else if (data.results && data.results.length) {
                    const r = data.results[0];
                    setRowResult(tr, r.status, buildDetail(r), r);
                } else {
                    setRowResult(tr, 'ok', 'Done', null);
                }
            } catch (err) {
                setRowResult(tr, 'error', err.message, null);
            }
        }

        // All done — refresh stats and reset dropzone
        refreshBankStats();
        dz.style.opacity = '1';
        dz.style.pointerEvents = '';
        fi.value = '';
    }

    function setRowResult(tr, status, detail, result) {
        // Status cell is 3rd from the end (direction cell is last)
        const statusTd = tr.querySelectorAll('td')[2];
        const dirTd    = tr.querySelector('.direction-cell');
        const tagClass = status === 'ok' ? 'tag-ok'
                       : status === 'warning' ? 'tag-heuristic'
                       : status === 'not_searchable' ? 'tag-not_searchable'
                       : status === 'error' ? 'tag-error'
                       : 'tag-ok';
        const label = status === 'ok' ? '✅ Done'
                    : status === 'warning' ? '⚠ Warning'
                    : status === 'not_searchable' ? '🔍 Needs OCR'
                    : status === 'error' ? '❌ Error'
                    : '✅ Done';

        statusTd.innerHTML = `<span class="tag ${tagClass}">${label}</span>
            <span style="font-size:.78rem; color:var(--muted); margin-left:.5rem;">${detail}</span>`;

        // Direction dropdown: only for PDFs that were successfully created (have an invoice_id)
        if (dirTd && result && result.invoice_id && result.direction) {
            const current = result.direction;
            const idOpt = result.invoice_id;
            const sel = document.createElement('select');
            sel.dataset.invoiceId = idOpt;
            sel.style.cssText = 'width:100%; padding:.25rem .4rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.78rem; background:var(--surface);';
            sel.innerHTML = `
                <option value="received" ${current === 'received' ? 'selected' : ''}>📥 Received</option>
                <option value="emitted"  ${current === 'emitted'  ? 'selected' : ''}>📤 Emitted</option>
            `;
            sel.addEventListener('change', () => patchDirection(sel));
            dirTd.innerHTML = '';
            dirTd.appendChild(sel);
        } else if (dirTd) {
            dirTd.innerHTML = '<span style="color:var(--muted); font-size:.82rem;">—</span>';
        }
    }

    async function patchDirection(selectEl) {
        const id  = selectEl.dataset.invoiceId;
        const val = selectEl.value;
        const orig = selectEl.dataset.lastValid || val;
        selectEl.disabled = true;
        try {
            const resp = await fetch(`/invoices/api/${id}`, {
                method:  'PATCH',
                headers: { 'Content-Type': 'application/json' },
                body:    JSON.stringify({ direction: val })
            });
            const data = await resp.json();
            if (!resp.ok || !data.ok) throw new Error(data.error || 'PATCH failed');
            selectEl.dataset.lastValid = val;
        } catch (err) {
            alert('Could not update direction: ' + err.message);
            selectEl.value = orig;  // revert on failure
        } finally {
            selectEl.disabled = false;
        }
    }

    function buildDetail(r) {
        const parts = [];
        if (r.pdf_number)   parts.push(`#${r.pdf_number}`);
        if (r.total_amount) parts.push(`€${r.total_amount}`);
        if (r.company)      parts.push(r.company);
        if (r.message)      parts.push(r.message);
        if (r.review && r.review.length) parts.push(`Review: ${r.review.join(', ')}`);
        return parts.join(' · ');
    }
})();
</script>
{% endblock %}