{% extends "base.html" %}
{% block title %}Dashboard — BILLS{% endblock %}
{% block main_class %}container container--wide{% endblock %}

{% block content %}
<script>var COMPANY_PALETTE = {{ company_palette | tojson }};</script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
<div class="dash-scroll"><div class="dash-scroll-inner">
<div class="page-header">
    <h1>Dashboard</h1>
    <span class="badge">{{ invoices.total }} matching</span>

    {# ── Row visibility toggles (state persisted in localStorage) ── #}
    <div class="dash-toggles" role="group" aria-label="Show or hide dashboard rows">
        <button type="button" class="dash-toggle" data-row-toggle="dash-row-stats"
                title="Show/hide summary stats">Stats</button>
        <button type="button" class="dash-toggle" data-row-toggle="cashflow-section"
                title="Show/hide aging &amp; payment delay">Cashflow</button>
        <button type="button" class="dash-toggle" data-row-toggle="chart-section"
                title="Show/hide doughnuts &amp; over-time charts">Charts</button>
    </div>
</div>

<!-- Summary stats — 6 cards (Out, In, Balance, Overdue, Needs Review, Missing PDF) -->
<div class="stats-row stats-row-6" id="dash-row-stats">
    <!-- TOTAL OUT: received invoices, paid vs unpaid -->
    <div class="stat-card stat-out" title="Invoices paid to suppliers (and outstanding)">
        <div class="stat-value">&#8364; {{ '%.0f'|format(total_out_paid) }}</div>
        <div class="stat-sub">&#8364; {{ '%.0f'|format(total_out_unpaid) }} unpaid</div>
        <div class="stat-label">Total Out (&#8364;)</div>
    </div>

    <!-- TOTAL IN: emitted invoices, paid vs unpaid -->
    <div class="stat-card stat-in" title="Invoices emitted, paid by clients (and outstanding)">
        <div class="stat-value">&#8364; {{ '%.0f'|format(total_in_paid) }}</div>
        <div class="stat-sub">&#8364; {{ '%.0f'|format(total_in_unpaid) }} unpaid</div>
        <div class="stat-label">Total In (&#8364;)</div>
    </div>

    <!-- BALANCE: realised (paid in − paid out); sub shows projected if all unpaid settles -->
    <div class="stat-card {% if balance_realised >= 0 %}stat-balance-pos{% else %}stat-balance-neg{% endif %}"
         title="Realised balance = paid IN − paid OUT. Projected = as if every unpaid invoice settles as billed.">
        <div class="stat-value">&#8364; {{ '%.0f'|format(balance_realised) }}</div>
        <div class="stat-sub">&#8364; {{ '%.0f'|format(balance_projected) }} projected</div>
        <div class="stat-label">Balance (&#8364;)</div>
    </div>

    <!-- OVERDUE: clickable filter — all unpaid invoices past due date -->
    <a href="{{ url_for('dashboard.index',
                q=q, source=source, validated=validated, direction=direction,
                date_from=date_from, date_to=date_to,
                category_id=category_id,
                sort=sort_by, dir=sort_dir, per_page=per_page,
                overdue='1' if not overdue_only else None) }}"
       class="stat-card-link" title="Click to {% if overdue_only %}clear{% else %}apply{% endif %} overdue filter">
        <div class="stat-card stat-card-clickable {% if overdue_count %}stat-error{% endif %} {% if overdue_only %}stat-active{% endif %}">
            <div class="stat-value">{{ overdue_count }}</div>
            <div class="stat-label">Invoices Overdue</div>
        </div>
    </a>

    <!-- NEEDS REVIEW -->
    <div class="stat-card stat-warn" title="Invoices that need review (both incoming and outgoing)">
        <div class="stat-value">{{ unvalidated_count }}</div>
        <div class="stat-label">Needs Review</div>
    </div>

    <!-- MISSING PDF — bank-origin movements that haven't had an invoice attached -->
    <a href="{{ url_for('invoices.list_invoices', missing_pdf='1') }}"
       class="stat-card-link"
       title="Bank transactions still missing an invoice PDF — click to review them">
        <div class="stat-card stat-card-clickable {% if missing_pdf_count %}stat-warn{% endif %}">
            <div class="stat-value">{{ missing_pdf_count or 0 }}</div>
            <div class="stat-label">Missing Invoice</div>
        </div>
    </a>
</div>

{% if overdue_only %}
<!-- Active overdue-filter chip -->
<div style="margin-bottom:.75rem;">
    <span class="badge" style="background:#fee2e2; color:var(--error); border-color:#fca5a5;">
        ⏰ Overdue only
        <a href="{{ url_for('dashboard.index',
                    q=q, source=source, validated=validated,
                    date_from=date_from, date_to=date_to,
                    category_id=category_id,
                    sort=sort_by, dir=sort_dir, per_page=per_page) }}"
           style="color:inherit; margin-left:.35rem; text-decoration:none; font-weight:600;"
           title="Remove filter — also clears Direction">×</a>
    </span>
</div>
{% endif %}

{% if aging_bucket != '' %}
<!-- Active aging-bucket-filter chip -->
<div style="margin-bottom:.75rem;">
    <span class="badge" style="background:#fef3c7; color:#92400e; border-color:#fcd34d;">
        🕒 Aging bucket {{ aging_bucket }}
        <a href="{{ url_for('dashboard.index',
                    q=q, source=source, validated=validated,
                    date_from=date_from, date_to=date_to,
                    category_id=category_id,
                    sort=sort_by, dir=sort_dir, per_page=per_page) }}"
           style="color:inherit; margin-left:.35rem; text-decoration:none; font-weight:600;"
           title="Remove filter — also clears Overdue and Direction">×</a>
    </span>
</div>
{% endif %}

<!-- Cash-Flow Health section — Aging + Delay, with tab toggle on narrow screens -->
<div class="cashflow-section" id="cashflow-section">

    <!-- Tab toggle (visible only on narrow screens via CSS) -->
    <div class="cashflow-tabs" role="tablist" aria-label="Cash-flow health view">
        <button type="button" class="cf-tab active" role="tab" aria-selected="true"  data-cf-tab="aging">Aging</button>
        <button type="button" class="cf-tab"        role="tab" aria-selected="false" data-cf-tab="delay">Payment Delay</button>
    </div>

    <!-- Aging card -->
    <div class="cashflow-card cf-panel active" id="aging-card" data-cf-panel="aging">
        <div class="cashflow-header">
            <h4>Aging &mdash; Unpaid invoices by days overdue</h4>
            <div class="cashflow-legend" id="aging-legend"><!-- built dynamically --></div>
        </div>
        <canvas id="chart-aging"></canvas>
        <div class="cashflow-caption">
            <span id="aging-recv-caption">Receivables: —</span>
            <span class="cashflow-sep">·</span>
            <span id="aging-pay-caption">Payables: —</span>
        </div>
    </div>

    <!-- Payment Delay card -->
    <div class="cashflow-card cf-panel" id="delay-card" data-cf-panel="delay">
        <div class="cashflow-header">
            <h4>Payment delay &mdash; average days, last 12 months</h4>
            <div class="cashflow-legend">
                <span class="cf-chip"><span class="cf-dot" style="background:#10b981"></span>Clients (paying us)</span>
                <span class="cf-chip"><span class="cf-dot" style="background:#ef4444"></span>Suppliers (we pay)</span>
                <span class="cf-chip"><span class="cf-dot cf-dot-dashed"></span><span id="delay-ref-label">Reference term</span></span>
            </div>
        </div>
        <canvas id="chart-delay"></canvas>
        <div class="cashflow-caption">
            <span id="delay-client-caption">Clients avg: —</span>
            <span class="cashflow-sep">·</span>
            <span id="delay-supplier-caption">Suppliers avg: —</span>
        </div>
    </div>

</div>

<!-- Charts section -->
<div class="chart-section" id="chart-section">

    <!-- Tab toggle (visible only on narrow screens via CSS) -->
    <div class="chart-tabs" role="tablist" aria-label="Charts view">
        <button type="button" class="chart-tab active" role="tab" aria-selected="true"  data-chart-tab="company">By Company</button>
        <button type="button" class="chart-tab"        role="tab" aria-selected="false" data-chart-tab="category">By Category</button>
        <button type="button" class="chart-tab"        role="tab" aria-selected="false" data-chart-tab="bar">Over Time</button>
        <button type="button" class="chart-tab"        role="tab" aria-selected="false" data-chart-tab="controls">Controls</button>
    </div>

    <!-- By Company -->
    <div class="chart-card active" data-chart-panel="company">
        <h4>By Company</h4>
        <canvas id="chart-company"></canvas>
    </div>

    <!-- By Category -->
    <div class="chart-card" data-chart-panel="category">
        <h4>By Category</h4>
        <canvas id="chart-category"></canvas>
    </div>

    <!-- Over Time: expenses / balance / cumulative -->
    <div class="chart-card chart-card-bar" data-chart-panel="bar">
        <div class="chart-card-header">
            <h4 id="bar-chart-title">Expenses Over Time</h4>
            <select id="ctrl-bar-metric" class="metric-select"
                    title="Choose what to plot over time">
                <option value="expenses">&#8364; Expenses</option>
                <option value="balance">&#8645; Balance (in &minus; out)</option>
                <option value="cumulative">&Sigma; Cumulative balance</option>
            </select>
        </div>
        <canvas id="chart-bar"></canvas>
    </div>

    <!-- Controls column: two equal-height cards -->
    <div class="controls-col" data-chart-panel="controls">

        <div class="controls-card">
            <h4>Chart Controls</h4>
            <div>
                <label style="font-size:.8rem; color:var(--muted); display:block; margin-bottom:.25rem;">Top N</label>
                <input type="number" id="ctrl-top-n" min="1" max="20" value="7"
                       style="width:70px; padding:.35rem .5rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.875rem;">
            </div>
            <div>
                <label style="font-size:.8rem; color:var(--muted); display:block; margin-bottom:.25rem;">Mode</label>
                <div style="display:flex; gap:.4rem;">
                    <label style="display:flex; align-items:center; gap:.3rem; font-size:.875rem; cursor:pointer;">
                        <input type="radio" name="chart-mode" value="amount" id="ctrl-mode-amount"> &#8364; Amount
                    </label>
                    <label style="display:flex; align-items:center; gap:.3rem; font-size:.875rem; cursor:pointer;">
                        <input type="radio" name="chart-mode" value="count" id="ctrl-mode-count"> # Count
                    </label>
                </div>
            </div>
            <div>
                <label style="font-size:.8rem; color:var(--muted); display:block; margin-bottom:.25rem;">Split By</label>
                <div style="display:flex; gap:.4rem;">
                    <label style="display:flex; align-items:center; gap:.3rem; font-size:.875rem; cursor:pointer;">
                        <input type="radio" name="bar-split" value="company" id="ctrl-split-company" checked> Company
                    </label>
                    <label style="display:flex; align-items:center; gap:.3rem; font-size:.875rem; cursor:pointer;">
                        <input type="radio" name="bar-split" value="category" id="ctrl-split-category"> Category
                    </label>
                </div>
            </div>
        </div>

        <div class="controls-card">
            <h4>Filter Controls</h4>
            <div>
                <label style="font-size:.8rem; color:var(--muted); display:block; margin-bottom:.25rem;">Date Field</label>
                <div style="display:flex; flex-direction:column; gap:.35rem;">
                    <label style="display:flex; align-items:center; gap:.3rem; font-size:.875rem; cursor:pointer;">
                        <input type="radio" name="date-field-ctrl" value="invoice_date" id="ctrl-date-invoice"> Invoice Date
                    </label>
                    <label style="display:flex; align-items:center; gap:.3rem; font-size:.875rem; cursor:pointer;">
                        <input type="radio" name="date-field-ctrl" value="payment_date" id="ctrl-date-payment"> Payment Date
                    </label>
                </div>
            </div>
            <div>
                <label style="font-size:.8rem; color:var(--muted); display:block; margin-bottom:.25rem;">Time Range</label>
                <div style="display:flex; gap:.3rem;" id="bar-months-btns">
                    <button class="btn bar-months-btn active" data-months="3">3m</button>
                    <button class="btn bar-months-btn" data-months="6">6m</button>
                    <button class="btn bar-months-btn" data-months="9">9m</button>
                    <button class="btn bar-months-btn" data-months="12">12m</button>
                </div>
            </div>
        </div>

    </div>

</div>

<!-- Filters -->
<form method="get" id="filter-form">
    <div class="card" style="padding:.75rem 1rem;">
        <div style="display:flex; flex-wrap:wrap; gap:.5rem; align-items:flex-end;">

            <!-- Text search -->
            <div style="flex:1; min-width:180px;">
                <label style="font-size:.75rem; color:var(--muted); display:block; margin-bottom:.25rem;">Search</label>
                <input type="text" name="q" value="{{ q }}"
                       placeholder="Company, invoice #, VAT, filename…"
                       style="width:100%; padding:.4rem .65rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.875rem;">
            </div>

            <!-- Source -->
            <div style="min-width:130px;">
                <label style="font-size:.75rem; color:var(--muted); display:block; margin-bottom:.25rem;">Source</label>
                <select name="source" style="width:100%; padding:.4rem .65rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.875rem; background:var(--surface);">
                    <option value="">All sources</option>
                    <option value="excel"     {% if source=='excel' %}selected{% endif %}>Excel</option>
                    <option value="heuristic" {% if source=='heuristic' %}selected{% endif %}>Heuristic</option>
                    <option value="manual"    {% if source=='manual' %}selected{% endif %}>Manual</option>
                </select>
            </div>

            <!-- Direction -->
            <div style="min-width:130px;">
                <label style="font-size:.75rem; color:var(--muted); display:block; margin-bottom:.25rem;">Direction</label>
                <select name="direction" style="width:100%; padding:.4rem .65rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.875rem; background:var(--surface);">
                    <option value="">All directions</option>
                    <option value="received" {% if direction=='received' %}selected{% endif %}>📥 Received</option>
                    <option value="emitted"  {% if direction=='emitted'  %}selected{% endif %}>📤 Emitted</option>
                </select>
            </div>

            <!-- Payment status -->
            <div style="min-width:130px;">
                <label style="font-size:.75rem; color:var(--muted); display:block; margin-bottom:.25rem;">Payment</label>
                <select name="validated" style="width:100%; padding:.4rem .65rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.875rem; background:var(--surface);">
                    <option value="">All</option>
                    <option value="1" {% if validated=='1' %}selected{% endif %}>Paid</option>
                    <option value="0" {% if validated=='0' %}selected{% endif %}>Unpaid</option>
                </select>
            </div>

            <!-- Overdue checkbox -->
            <div style="min-width:110px;">
                <label style="font-size:.75rem; color:var(--muted); display:block; margin-bottom:.25rem;">&nbsp;</label>
                <label style="display:flex; align-items:center; gap:.4rem; padding:.4rem .65rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.875rem; cursor:pointer; background:var(--surface); height:calc(1rem + .8rem + 2px);">
                    <input type="checkbox" name="overdue" value="1" {% if overdue_only %}checked{% endif %}
                           onchange="this.form.submit()">
                    Overdue only
                </label>
            </div>

            <!-- Date from -->
            <div style="min-width:130px;">
                <label style="font-size:.75rem; color:var(--muted); display:block; margin-bottom:.25rem;">Date from</label>
                <input type="date" name="date_from" value="{{ date_from }}"
                       style="width:100%; padding:.4rem .65rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.875rem;">
            </div>

            <!-- Date to -->
            <div style="min-width:130px;">
                <label style="font-size:.75rem; color:var(--muted); display:block; margin-bottom:.25rem;">Date to</label>
                <input type="date" name="date_to" value="{{ date_to }}"
                       style="width:100%; padding:.4rem .65rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.875rem;">
            </div>

            <!-- Per page -->
            <div style="min-width:90px;">
                <label style="font-size:.75rem; color:var(--muted); display:block; margin-bottom:.25rem;">Per page</label>
                <select name="per_page" style="width:100%; padding:.4rem .65rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.875rem; background:var(--surface);">
                    {% for n in [25, 50, 100, 250] %}
                    <option value="{{ n }}" {% if per_page==n %}selected{% endif %}>{{ n }}</option>
                    {% endfor %}
                </select>
            </div>

            <!-- Hidden fields preserved across filter submissions -->
            <input type="hidden" name="sort"       value="{{ sort_by }}">
            <input type="hidden" name="dir"        value="{{ sort_dir }}">
            <input type="hidden" name="category_id" id="filter-category-id" value="{{ category_id }}">
            <input type="hidden" name="date_field"  id="hidden-date-field"  value="{{ date_field }}">

            <button type="submit" class="btn btn-primary" style="align-self:flex-end;">Filter</button>
            <a href="{{ url_for('dashboard.index') }}" class="btn btn-secondary" style="align-self:flex-end;">Clear</a>
            <button type="button" class="btn btn-secondary" style="align-self:flex-end;" onclick="openConfigModal()">⚙ Configure</button>
            <a id="export-btn" href="#" class="btn btn-secondary" style="align-self:flex-end;" title="Download filtered data">
                📥 Export
            </a>
            <a id="export-graphs-btn" href="#" class="btn btn-secondary" style="align-self:flex-end;" title="Export all graphs as A4-landscape PNGs (current filters + toggles)">
                📊 Export Graphs
            </a>
            <a id="bundle-btn" href="#" class="btn btn-secondary" style="align-self:flex-end;"
               title="Download a zip with the spreadsheet and all matched PDFs (current filters)">
                📦 Bundle
            </a>
        </div>
    </div>
</form>

<!-- Export config modal -->
<div id="ecfg-modal" class="ecfg-overlay" style="display:none;">
    <div class="ecfg-box">
        <h3>Configure Columns</h3>
        <!-- Legend -->
        <div class="ecfg-legend">
            <span class="ecfg-legend-dot" style="background:#2563eb;"></span> Dashboard (table)
            <span class="ecfg-legend-dot" style="background:#16a34a; margin-left:.5rem;"></span> Export (file)
        </div>
        <!-- Column header row -->
        <div class="ecfg-col-header">
            <span style="width:1rem; flex-shrink:0;"></span>
            <span class="ecfg-cb-dash-lbl">DB</span>
            <span class="ecfg-cb-exp-lbl">Exp</span>
            <span style="flex:1;">Column</span>
        </div>
        <div id="ecfg-col-list"></div>
        <button type="button" class="btn btn-secondary" style="margin-top:.75rem; font-size:.8rem;"
                onclick="addPlaceholderCol()">+ Add empty column</button>
        <div class="ecfg-footer">
            <button type="button" class="btn btn-secondary" onclick="closeConfigModal()">Cancel</button>
            <button type="button" class="btn btn-primary"   onclick="saveExportConfig()">Save</button>
        </div>
    </div>
</div>

<!-- Table -->
<div class="table-wrapper" style="margin-top:.75rem;">
    <table id="invoice-table">
        <thead>
            <tr>
                {% macro sort_header(label, field) %}
                <th>
                    <a href="{{ url_for('dashboard.index',
                                q=q, source=source, validated=validated,
                                direction=direction,
                                overdue='1' if overdue_only else None,
                                date_from=date_from, date_to=date_to,
                                category_id=category_id,
                                per_page=per_page,
                                sort=field,
                                dir='asc' if (sort_by==field and sort_dir=='desc') else 'desc') }}"
                       style="text-decoration:none; color:inherit; display:flex; align-items:center; gap:.3rem;">
                        {{ label }}
                        {% if sort_by == field %}
                            {{ '▲' if sort_dir == 'asc' else '▼' }}
                        {% else %}
                            <span style="opacity:.3;">↕</span>
                        {% endif %}
                    </a>
                </th>
                {% endmacro %}

                {% set SORTABLE = {
                    'pdf_number':        'pdf_number',
                    'company_name':      'company_name',
                    'invoice_date':      'invoice_date',
                    'payment_date':      'payment_date',
                    'total_amount':      'total_amount',
                    'extraction_source': 'source',
                    'validated':         'validated',
                } %}
                {% for col in visible_columns %}
                    {% if col.key in SORTABLE %}
                        {{ sort_header(col.label, SORTABLE[col.key]) }}
                    {% else %}
                        <th>{{ col.label }}</th>
                    {% endif %}
                {% endfor %}
                <th>Issues</th>
                <th style="width:5rem;">Update</th>
            </tr>
        </thead>
        <tbody>
            {% for inv in invoices.items %}
            {% set issues = get_issues(inv) %}
            <tr class="{% if is_overdue_row(inv) %}row-overdue{% endif %}"
                data-id="{{ inv.id }}" data-pdf-number="{{ inv.pdf_number }}" data-company="{{ inv.company_name or '' }}">
            {% for col in visible_columns %}
                {% if col.key == 'pdf_number' %}
                <td>{{ inv.pdf_number }}</td>
                {% elif col.key == 'company_name' %}
                <td class="col-company"><div class="col-company-inner">{{ inv.company_name or '—' }}</div></td>
                {% elif col.key == 'invoice_number' %}
                <td>{{ inv.invoice_number or '—' }}</td>
                {% elif col.key == 'invoice_date' %}
                <td>{{ inv.invoice_date.strftime('%d/%m/%Y') if inv.invoice_date else '—' }}</td>
                {% elif col.key == 'payment_date' %}
                <td>{{ inv.payment_date.strftime('%d/%m/%Y') if inv.payment_date else '—' }}</td>
                {% elif col.key == 'total_amount' %}
                <td class="amount">{{ '%.2f'|format(inv.total_amount|float) if inv.total_amount else '—' }}</td>
                {% elif col.key == 'vat_number' %}
                <td>{{ inv.vat_number or '—' }}</td>
                {% elif col.key == 'project_name' %}
                <td class="project-cell" data-id="{{ inv.id }}" data-project="{{ inv.project_name or '' }}"
                    style="cursor:pointer; user-select:none;">
                    {% if inv.project_name and inv.project_name in project_colors %}
                        {% set _pcolor = project_colors[inv.project_name] %}
                        <span class="category-badge"
                              style="background:{{ _pcolor }}29; border-color:{{ _pcolor }}; color:{{ _pcolor }};">
                            {{ inv.project_name }}
                        </span>
                    {% else %}
                        {{ inv.project_name or '—' }}
                    {% endif %}
                </td>
                {% elif col.key == 'category' %}
                <td class="category-cell" data-id="{{ inv.id }}" data-cat-id="{{ inv.category_id or '' }}"
                    style="cursor:pointer; user-select:none;">
                    {% if inv.category %}
                    <span class="category-badge"
                          style="background:{{ inv.category.color }}29; border-color:{{ inv.category.color }}; color:{{ inv.category.color }};">
                        {{ inv.category.name }}
                    </span>
                    {% else %}<span style="color:var(--muted);">&#8212;</span>{% endif %}
                </td>
                {% elif col.key == 'extraction_source' %}
                <td><span class="tag tag-{{ inv.extraction_source }}">{{ inv.extraction_source }}</span></td>
                {% elif col.key == 'direction' %}
                <td class="direction-cell" data-id="{{ inv.id }}" data-direction="{{ inv.direction or 'received' }}"
                    style="cursor:pointer; user-select:none;"
                    title="Click to flip direction">
                    {% if inv.direction == 'emitted' %}
                        <span class="tag tag-emitted">📤 Emitted</span>
                    {% else %}
                        <span class="tag tag-received">📥 Received</span>
                    {% endif %}
                </td>
                {% elif col.key == 'due_date' %}
                <td class="due-date-cell" data-id="{{ inv.id }}"
                    data-iso="{{ inv.due_date.isoformat() if inv.due_date else '' }}"
                    style="cursor:pointer; user-select:none;"
                    title="Click to edit due date">
                    {{ inv.due_date.strftime('%d/%m/%Y') if inv.due_date else '—' }}
                </td>
                {% elif col.key == 'validated' %}
                <td class="validated-cell" data-id="{{ inv.id }}"
                    data-validated="{{ 'true' if inv.validated else 'false' }}"
                    style="cursor:pointer; user-select:none;"
                    title="Click to toggle validation">
                    {% if inv.validated %}
                        <span class="tag tag-validated" style="color:var(--success);">✓ Paid</span>
                    {% else %}<span style="color:var(--muted);">—</span>{% endif %}
                </td>
                {% elif col.key == 'payment_frequency' %}
                <td class="frequency-cell" data-id="{{ inv.id }}" data-freq="{{ inv.payment_frequency or '' }}"
                    style="cursor:pointer; user-select:none;">
                    {{ inv.payment_frequency or '—' }}
                </td>
                {% endif %}
            {% endfor %}
                <td>
                    {% if issues %}
                    <span class="issue-warn" data-tip="{{ issues | join('\n') }}">⚠</span>
                    {% else %}
                    <span style="color:var(--muted);">—</span>
                    {% endif %}
                </td>
                <td>
                    {% if inv.pdf_filename %}
                    <button class="btn-icon open-modal" data-id="{{ inv.id }}" title="View PDF & fill fields">
                        <img src="{{ url_for('static', filename='figs/pdf_icon.png') }}"
                             alt="PDF" class="action-icon">
                    </button>
                    {% else %}
                    <a href="{{ url_for('data_import.index') }}" title="No invoice — click to upload"
                       class="btn-icon">
                        <img src="{{ url_for('static', filename='figs/upload_icon.png') }}"
                             alt="Upload" class="action-icon">
                    </a>
                    {% endif %}
                </td>
            </tr>
            {% else %}
            <tr><td colspan="{{ visible_columns|length + 2 }}" class="empty">No invoices match the current filters.</td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- Pagination -->
{% if invoices.pages > 1 %}
<div class="pagination">
    {% if invoices.has_prev %}
        <a href="{{ url_for('dashboard.index', page=invoices.prev_num,
                    q=q, source=source, validated=validated,
                    direction=direction,
                    overdue='1' if overdue_only else None,
                    date_from=date_from, date_to=date_to,
                    category_id=category_id,
                    sort=sort_by, dir=sort_dir, per_page=per_page) }}"
           class="btn btn-secondary">← Prev</a>
    {% endif %}
    <span>Page {{ invoices.page }} of {{ invoices.pages }}</span>
    {% if invoices.has_next %}
        <a href="{{ url_for('dashboard.index', page=invoices.next_num,
                    q=q, source=source, validated=validated,
                    direction=direction,
                    overdue='1' if overdue_only else None,
                    date_from=date_from, date_to=date_to,
                    category_id=category_id,
                    sort=sort_by, dir=sort_dir, per_page=per_page) }}"
           class="btn btn-secondary">Next →</a>
    {% endif %}
</div>
{% endif %}

<script>
/* ── Dashboard row-visibility toggles ─────────────────────────────────
   Three pill buttons in .page-header let the user hide/show each row.
   State is persisted per-row in localStorage under key `dash_show_<id>`
   ('1' = visible, '0' = hidden). On reveal we dispatch a window resize
   so Chart.js auto-fits any charts that were in a collapsed container. */
(function () {
    var STORAGE_PREFIX = 'dash_show_';

    function applyState(row, btn, visible) {
        row.classList.toggle('dash-row-hidden', !visible);
        btn.classList.toggle('is-off', !visible);
        btn.setAttribute('aria-pressed', visible ? 'true' : 'false');
    }

    document.querySelectorAll('.dash-toggle[data-row-toggle]').forEach(function (btn) {
        var rowId = btn.dataset.rowToggle;
        var row   = document.getElementById(rowId);
        if (!row) return;

        var key     = STORAGE_PREFIX + rowId;
        var visible = localStorage.getItem(key) !== '0';   // default: visible
        applyState(row, btn, visible);

        btn.addEventListener('click', function () {
            // If currently hidden, the click reveals it (and vice-versa).
            var nowVisible = row.classList.contains('dash-row-hidden');
            applyState(row, btn, nowVisible);
            localStorage.setItem(key, nowVisible ? '1' : '0');

            // Charts inside a previously-hidden container have a 0×0 canvas;
            // a resize event lets Chart.js's ResizeObserver re-fit them.
            if (nowVisible) {
                setTimeout(function () {
                    window.dispatchEvent(new Event('resize'));
                }, 50);
            }
        });
    });
})();
</script>

<script>
(function () {
    var savedTopN = localStorage.getItem('chart_top_n') || '7';
    var savedMode = localStorage.getItem('chart_mode') || 'amount';
    var topNEl = document.getElementById('ctrl-top-n');
    if (topNEl) topNEl.value = savedTopN;
    var modeEl = document.getElementById(savedMode === 'count' ? 'ctrl-mode-count' : 'ctrl-mode-amount');
    if (modeEl) modeEl.checked = true;

    function buildChartParams(topN, mode) {
        var url = new URLSearchParams(window.location.search);
        var p   = new URLSearchParams();
        ['q', 'source', 'validated', 'direction', 'date_from', 'date_to', 'category_id'].forEach(function(k) {
            var v = url.get(k);
            if (v) p.set(k, v);
        });
        p.set('top_n', topN);
        p.set('mode', mode);
        return p.toString();
    }

    var CHART_PALETTE = (typeof COMPANY_PALETTE !== 'undefined')
        ? COMPANY_PALETTE
        : ['#36A2EB','#FF6384','#FFCE56','#4BC0C0','#9966FF',
           '#FF9F40','#C9CBCF','#7BC8A4','#F67019','#58595B'];

    // Linear interpolation between two hex colours (t in [0,1])
    function hexInterp(c1, c2, t) {
        var p = function(s, o) { return parseInt(s.slice(o, o + 2), 16); };
        var lerp = function(a, b) { return Math.round(a + (b - a) * t); };
        var r = lerp(p(c1,1), p(c2,1)), g = lerp(p(c1,3), p(c2,3)), b = lerp(p(c1,5), p(c2,5));
        return '#' + [r, g, b].map(function(x) { return x.toString(16).padStart(2, '0'); }).join('');
    }

    // Spread palette evenly across n colours via interpolation (guarantees unique shades)
    function interpolatePalette(palette, n) {
        if (!n || n <= 0) return [];
        if (n === 1) return [palette[0] || '#36a2eb'];
        var seg = palette.length - 1;
        var out = [];
        for (var i = 0; i < n; i++) {
            var tg = i / (n - 1);
            var sf = tg * seg;
            var si = Math.min(Math.floor(sf), seg - 1);
            out.push(hexInterp(palette[si], palette[Math.min(si + 1, seg)], sf - si));
        }
        return out;
    }

    var barChart = null;

    /* ── URL params for the bar-chart endpoint ───────────────────────── */
    function buildBarParams() {
        var url = new URLSearchParams(window.location.search);
        var p   = new URLSearchParams();
        ['q','source','validated','direction','date_from','date_to','date_field','category_id'].forEach(function(k) {
            var v = url.get(k); if (v) p.set(k, v);
        });
        var activeBtn = document.querySelector('.bar-months-btn.active');
        p.set('months', activeBtn ? activeBtn.dataset.months : '6');
        var metricEl = document.getElementById('ctrl-bar-metric');
        p.set('metric', metricEl ? metricEl.value : 'expenses');
        var splitEl = document.querySelector('input[name="bar-split"]:checked');
        p.set('split', splitEl ? splitEl.value : 'company');
        p.set('top_n', document.getElementById('ctrl-top-n').value || '7');
        return p.toString();
    }

    /* ── Enable/disable controls that don't apply to a given metric ──── */
    function syncBarControlsState() {
        var metric = (document.getElementById('ctrl-bar-metric') || {}).value || 'expenses';
        var onlyExpenses = (metric !== 'expenses');
        document.querySelectorAll('input[name="bar-split"]').forEach(function(el) { el.disabled = onlyExpenses; });
        var topNEl = document.getElementById('ctrl-top-n');
        if (topNEl) topNEl.disabled = onlyExpenses;
    }

    /* ── Title shown above the canvas ────────────────────────────────── */
    function setBarTitle(metric) {
        var titleEl = document.getElementById('bar-chart-title');
        if (!titleEl) return;
        titleEl.textContent = {
            expenses:   'Expenses Over Time',
            balance:    'Balance Over Time',
            cumulative: 'Cumulative Balance',
        }[metric] || 'Over Time';
    }

    /* ── Dispatcher: picks the right renderer for the current metric ── */
    function initBarChart(data) {
        var metric = data.metric || 'expenses';
        setBarTitle(metric);
        syncBarControlsState();

        // Time-range buttons grey out when the user has a date filter
        document.querySelectorAll('.bar-months-btn').forEach(function(btn) {
            btn.disabled = data.date_filter_active;
        });

        if (barChart) { barChart.destroy(); barChart = null; }

        if (metric === 'balance')         barChart = renderBalanceChart(data);
        else if (metric === 'cumulative') barChart = renderCumulativeChart(data);
        else                              barChart = renderExpensesChart(data);
    }

    /* ── Renderer: stacked expenses (current default) ────────────────── */
    function renderExpensesChart(data) {
        var specials = ['Other', 'Uncategorized'];
        var namedCount = data.datasets.filter(function(ds) { return specials.indexOf(ds.label) === -1; }).length;
        var palette = interpolatePalette(CHART_PALETTE, namedCount);
        var idx = 0;
        var datasets = data.datasets.map(function(ds) {
            var isSpecial = specials.indexOf(ds.label) !== -1;
            var color = isSpecial ? (ds.color || '#9ca3af') : palette[idx++];
            return {
                label: ds.label,
                data:  ds.data,
                backgroundColor: hexToRgba(color, 0.8),
                borderColor:     color,
                borderWidth:     1,
            };
        });

        return new Chart(document.getElementById('chart-bar'), {
            type: 'bar',
            data: { labels: data.labels, datasets: datasets },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: {
                    x: { stacked: true },
                    y: { stacked: true, ticks: { callback: function(v) { return '€' + v.toLocaleString(); } } },
                },
            },
        });
    }

    /* ── Renderer: diverging IN/OUT stack + net-line overlay ─────────── */
    function renderBalanceChart(data) {
        var datasets = data.datasets.map(function(ds) {
            var color = ds.color || '#9ca3af';
            if (ds.type === 'line') {
                // Net overlay — drawn on top of the bars, hoverable
                return {
                    type: 'line',
                    label: ds.label,
                    data:  ds.data,
                    borderColor:      color,
                    backgroundColor:  color,
                    borderWidth:      2.5,
                    pointRadius:      4,
                    pointHoverRadius: 6,
                    fill:             false,
                    tension:          0.15,
                    order:            0,   // draw on top of bars
                };
            }
            return {
                type: 'bar',
                label: ds.label,
                data:  ds.data,
                backgroundColor: hexToRgba(color, 0.7),
                borderColor:     color,
                borderWidth:     1,
                order:           1,
            };
        });

        return new Chart(document.getElementById('chart-bar'), {
            data: { labels: data.labels, datasets: datasets },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: { mode: 'index', intersect: false },   // hover shows In/Out/Net together
                plugins: {
                    legend: { display: true, position: 'top', labels: { boxWidth: 12, font: { size: 11 } } },
                    tooltip: {
                        callbacks: {
                            label: function(ctx) {
                                var v = ctx.parsed.y;
                                // Show OUT's magnitude (we negated it for stacking)
                                if (ctx.dataset.label === 'Out') v = -v;
                                return ctx.dataset.label + ': €' + v.toLocaleString();
                            },
                        },
                    },
                },
                scales: {
                    x: { stacked: true },
                    y: {
                        stacked: true,
                        ticks: { callback: function(v) { return '€' + v.toLocaleString(); } },
                        grid:  { color: function(ctx) { return ctx.tick.value === 0 ? '#0f172a' : 'rgba(0,0,0,0.06)'; } },
                    },
                },
            },
        });
    }

    /* ── Renderer: single cumulative-balance line ────────────────────── */
    function renderCumulativeChart(data) {
        var ds    = data.datasets[0] || { label: 'Cumulative Balance', data: [], color: '#0891b2' };
        var color = ds.color || '#0891b2';
        return new Chart(document.getElementById('chart-bar'), {
            type: 'line',
            data: {
                labels: data.labels,
                datasets: [{
                    label: ds.label,
                    data:  ds.data,
                    borderColor:      color,
                    backgroundColor:  hexToRgba(color, 0.15),
                    borderWidth:      2.5,
                    pointRadius:      4,
                    pointHoverRadius: 6,
                    fill:             true,
                    tension:          0.2,
                }],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            label: function(ctx) { return 'Balance: €' + ctx.parsed.y.toLocaleString(); },
                        },
                    },
                },
                scales: {
                    y: {
                        ticks: { callback: function(v) { return '€' + v.toLocaleString(); } },
                        grid:  { color: function(ctx) { return ctx.tick.value === 0 ? '#0f172a' : 'rgba(0,0,0,0.06)'; } },
                    },
                },
            },
        });
    }

    function fetchBarChart() {
        fetch('/api/dashboard/bar-chart?' + buildBarParams())
            .then(function(r) { return r.json(); })
            .then(initBarChart)
            .catch(function(err) { console.warn('[bar-chart] fetch failed', err); });
    }

    function hexToRgba(hex, alpha) {
        var r = parseInt(hex.slice(1, 3), 16);
        var g = parseInt(hex.slice(3, 5), 16);
        var b = parseInt(hex.slice(5, 7), 16);
        return 'rgba(' + r + ',' + g + ',' + b + ',' + alpha + ')';
    }

    var companyChart  = null;
    var categoryChart = null;

    function initCharts(data) {
        // Derive canvas size from the controls column (stable — unaffected by canvas sizing).
        // Both chart cards are in the same grid row so they share the same stretched height.
        var refCard = document.getElementById('chart-company').closest('.chart-card');
        var h4      = refCard.querySelector('h4');
        var cs      = window.getComputedStyle(refCard);
        var h4cs    = window.getComputedStyle(h4);
        var pTop    = parseFloat(cs.paddingTop);
        var pBot    = parseFloat(cs.paddingBottom);
        var pLeft   = parseFloat(cs.paddingLeft);
        var pRight  = parseFloat(cs.paddingRight);
        var h4H     = h4.offsetHeight + parseFloat(h4cs.marginBottom);
        // Use the card's own offsetHeight (grid-assigned, stable) instead of controls-col
        var colH    = refCard.offsetHeight;
        var availH  = colH - h4H - pTop - pBot - 8;
        var availW  = refCard.clientWidth - pLeft - pRight;
        var size    = Math.max(60, Math.min(availH, availW));
        ['chart-company', 'chart-category'].forEach(function(id) {
            var c = document.getElementById(id); c.width = c.height = size;
        });

        var opts = {
            responsive: false,
            plugins: {
                legend: { display: false },
            },
        };

        if (companyChart)  { companyChart.destroy();  companyChart  = null; }
        if (categoryChart) { categoryChart.destroy(); categoryChart = null; }

        var namedCompanyCount = data.by_company.filter(function(r) { return r.label !== 'Other'; }).length;
        var companyPalette = interpolatePalette(CHART_PALETTE, namedCompanyCount);
        var companyIdx = 0;
        var companyColors = data.by_company.map(function(r) {
            return r.label === 'Other' ? (r.color || '#9ca3af') : companyPalette[companyIdx++];
        });
        companyChart = new Chart(document.getElementById('chart-company'), {
            type: 'doughnut',
            data: {
                labels:   data.by_company.map(function(r) { return r.label; }),
                datasets: [{
                    data:            data.by_company.map(function(r) { return r.value; }),
                    backgroundColor: companyColors.map(function(c) { return hexToRgba(c, 0.8); }),
                    borderColor:     companyColors,
                    borderWidth: 1,
                }],
            },
            options: Object.assign({}, opts, {
                onClick: function(evt, els) {
                    if (!els.length) return;
                    var label = data.by_company[els[0].index].label;
                    if (label === 'Other') return;
                    var form = document.getElementById('filter-form');
                    form.querySelector('input[name="q"]').value = label;
                    form.submit();
                },
            }),
        });

        var namedCatCount = data.by_category.filter(function(r) { return r.label !== 'Uncategorized' && r.label !== 'Other'; }).length;
        var catPalette = interpolatePalette(CHART_PALETTE, namedCatCount);
        var namedIdx = 0;
        var categoryColors = data.by_category.map(function(r) {
            if (r.label === 'Uncategorized' || r.label === 'Other') return r.color;
            return catPalette[namedIdx++];
        });
        categoryChart = new Chart(document.getElementById('chart-category'), {
            type: 'doughnut',
            data: {
                labels:   data.by_category.map(function(r) { return r.label; }),
                datasets: [{
                    data:            data.by_category.map(function(r) { return r.value; }),
                    backgroundColor: categoryColors.map(function(c) { return hexToRgba(c, 0.8); }),
                    borderColor:     categoryColors,
                    borderWidth: 1,
                }],
            },
            options: Object.assign({}, opts, {
                onClick: function(evt, els) {
                    if (!els.length) return;
                    var slice = data.by_category[els[0].index];
                    if (slice.label === 'Other') return;
                    var input = document.getElementById('filter-category-id');
                    input.value = (slice.label === 'Uncategorized') ? 'null' : (slice.id || '');
                    document.getElementById('filter-form').submit();
                },
            }),
        });
    }

    function fetchAndRender() {
        var topN = document.getElementById('ctrl-top-n').value;
        var modeChecked = document.querySelector('input[name="chart-mode"]:checked');
        var mode = modeChecked ? modeChecked.value : 'amount';
        fetch('/api/dashboard/charts?' + buildChartParams(topN, mode))
            .then(function(r) { return r.json(); })
            .then(initCharts)
            .catch(function(err) { console.warn('[charts] fetch failed', err); });
        fetchBarChart();
    }

    window.refreshCharts = fetchAndRender;

    document.addEventListener('DOMContentLoaded', function() {
        fetch('/api/settings/company-palette')
            .then(function(r) { return r.json(); })
            .then(function(d) { if (d.colors && d.colors.length) { CHART_PALETTE = d.colors; } })
            .catch(function() {})
            .then(fetchAndRender);
    });

    document.getElementById('ctrl-top-n').addEventListener('change', function() {
        localStorage.setItem('chart_top_n', this.value);
        fetchAndRender();
    });

    document.querySelectorAll('input[name="chart-mode"]').forEach(function(el) {
        el.addEventListener('change', function() {
            localStorage.setItem('chart_mode', el.value);
            fetchAndRender();
        });
    });

    document.querySelectorAll('.bar-months-btn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            if (btn.disabled) return;
            document.querySelectorAll('.bar-months-btn').forEach(function(b) { b.classList.remove('active'); });
            btn.classList.add('active');
            localStorage.setItem('bar_months', btn.dataset.months);
            fetchBarChart();
        });
    });

    document.querySelectorAll('input[name="bar-split"]').forEach(function(el) {
        el.addEventListener('change', function() {
            localStorage.setItem('bar_split', el.value);
            fetchBarChart();
        });
    });

    /* ── Metric dropdown: change + persistence ───────────────────────── */
    var metricEl = document.getElementById('ctrl-bar-metric');
    if (metricEl) {
        var savedMetric = localStorage.getItem('bar_metric') || 'expenses';
        if (['expenses','balance','cumulative'].indexOf(savedMetric) !== -1) {
            metricEl.value = savedMetric;
        }
        metricEl.addEventListener('change', function() {
            localStorage.setItem('bar_metric', metricEl.value);
            syncBarControlsState();
            fetchBarChart();
        });
    }
    syncBarControlsState();  // set initial disabled state to match restored metric

    // Restore saved state
    var savedMonths = localStorage.getItem('bar_months') || '6';
    document.querySelectorAll('.bar-months-btn').forEach(function(btn) {
        btn.classList.toggle('active', btn.dataset.months === savedMonths);
    });
    var savedSplit = localStorage.getItem('bar_split') || 'company';
    var splitEl = document.getElementById('ctrl-split-' + savedSplit);
    if (splitEl) splitEl.checked = true;

    /* =======================================================================
       Export Graphs — client-side A4-landscape PNG render of all 8 variants.
       Uses File System Access API where available; falls back to downloads.
       Reuses CHART_PALETTE / interpolatePalette / hexToRgba from outer scope.
       ======================================================================= */
    (function setupExportGraphs() {
        var W = 1754, H = 1240;                                 // A4 landscape @ 150 dpi
        var FONT_MD    = { size: 18, family: "'Segoe UI', Arial, sans-serif" };
        var FONT_TITLE = { size: 28, weight: 'bold', family: "'Segoe UI', Arial, sans-serif" };
        var TODAY      = new Date().toISOString().slice(0, 10);

        // Canvas is transparent by default → paint white under the chart for docs/slides.
        var whiteBg = {
            id: 'whiteBg',
            beforeDraw: function(c) {
                var ctx = c.ctx;
                ctx.save();
                ctx.globalCompositeOperation = 'destination-over';
                ctx.fillStyle = '#ffffff';
                ctx.fillRect(0, 0, c.width, c.height);
                ctx.restore();
            }
        };

        function filterParams(overrides) {
            var url = new URLSearchParams(window.location.search);
            var p   = new URLSearchParams();
            ['q','source','validated','direction','date_from','date_to','date_field','category_id']
                .forEach(function(k) { var v = url.get(k); if (v) p.set(k, v); });
            Object.keys(overrides).forEach(function(k) { p.set(k, overrides[k]); });
            return p.toString();
        }

        function mkCanvas() {
            var c = document.createElement('canvas');
            c.width = W; c.height = H;
            c.style.cssText = 'position:fixed; left:-99999px; top:0;';
            document.body.appendChild(c);
            return c;
        }

        // Wait two animation frames → guarantees Chart.js has painted.
        function nextPaint() {
            return new Promise(function(r) { requestAnimationFrame(function() { requestAnimationFrame(r); }); });
        }
        function toBlobP(canvas) {
            return new Promise(function(r) { canvas.toBlob(r, 'image/png'); });
        }
        function capture(canvas, chart) {
            return nextPaint()
                .then(function() { return toBlobP(canvas); })
                .then(function(blob) { chart.destroy(); canvas.remove(); return blob; });
        }

        /* ── Renderer: doughnut (by company / by category) ──────────────── */
        function renderDoughnut(title, rows) {
            var canvas = mkCanvas();
            var specials = ['Other', 'Uncategorized'];
            var named    = rows.filter(function(r) { return specials.indexOf(r.label) === -1; });
            var palette  = interpolatePalette(CHART_PALETTE, named.length);
            var idx = 0;
            var colors = rows.map(function(r) {
                return specials.indexOf(r.label) !== -1 ? (r.color || '#9ca3af') : palette[idx++];
            });

            var chart = new Chart(canvas, {
                type: 'doughnut',
                data: {
                    labels: rows.map(function(r) { return r.label; }),
                    datasets: [{
                        data:            rows.map(function(r) { return r.value; }),
                        backgroundColor: colors.map(function(c) { return hexToRgba(c, 0.85); }),
                        borderColor:     colors,
                        borderWidth:     2,
                    }],
                },
                options: {
                    responsive: false, animation: false, devicePixelRatio: 1,
                    plugins: {
                        title:   { display: true, text: title, font: FONT_TITLE, padding: 24 },
                        legend:  { display: true, position: 'right', labels: { font: FONT_MD, boxWidth: 24, padding: 14 } },
                        tooltip: { enabled: false },
                    },
                },
                plugins: [whiteBg],
            });
            return capture(canvas, chart);
        }

        /* ── Renderer: expenses (stacked bar) ────────────────────────────── */
        function renderExpenses(title, data) {
            var canvas = mkCanvas();
            var specials = ['Other', 'Uncategorized'];
            var namedCount = data.datasets.filter(function(d) { return specials.indexOf(d.label) === -1; }).length;
            var palette = interpolatePalette(CHART_PALETTE, namedCount);
            var idx = 0;
            var datasets = data.datasets.map(function(ds) {
                var color = specials.indexOf(ds.label) !== -1 ? (ds.color || '#9ca3af') : palette[idx++];
                return {
                    label: ds.label, data: ds.data,
                    backgroundColor: hexToRgba(color, 0.8),
                    borderColor:     color,
                    borderWidth:     1,
                };
            });
            var chart = new Chart(canvas, {
                type: 'bar',
                data: { labels: data.labels, datasets: datasets },
                options: {
                    responsive: false, animation: false, devicePixelRatio: 1,
                    plugins: {
                        title:   { display: true, text: title, font: FONT_TITLE, padding: 24 },
                        legend:  { display: true, position: 'top', labels: { font: FONT_MD, boxWidth: 20, padding: 10 } },
                        tooltip: { enabled: false },
                    },
                    scales: {
                        x: { stacked: true, ticks: { font: FONT_MD } },
                        y: { stacked: true, ticks: { font: FONT_MD, callback: function(v) { return '€' + v.toLocaleString(); } } },
                    },
                },
                plugins: [whiteBg],
            });
            return capture(canvas, chart);
        }

        /* ── Renderer: balance (diverging stack + net line) ──────────────── */
        function renderBalance(title, data) {
            var canvas = mkCanvas();
            var datasets = data.datasets.map(function(ds) {
                var color = ds.color || '#9ca3af';
                if (ds.type === 'line') {
                    return {
                        type: 'line', label: ds.label, data: ds.data,
                        borderColor: color, backgroundColor: color,
                        borderWidth: 3, pointRadius: 5, fill: false, tension: 0.15, order: 0,
                    };
                }
                return {
                    type: 'bar', label: ds.label, data: ds.data,
                    backgroundColor: hexToRgba(color, 0.75),
                    borderColor: color, borderWidth: 1, order: 1,
                };
            });
            var chart = new Chart(canvas, {
                data: { labels: data.labels, datasets: datasets },
                options: {
                    responsive: false, animation: false, devicePixelRatio: 1,
                    plugins: {
                        title:   { display: true, text: title, font: FONT_TITLE, padding: 24 },
                        legend:  { display: true, position: 'top', labels: { font: FONT_MD, boxWidth: 20, padding: 10 } },
                        tooltip: { enabled: false },
                    },
                    scales: {
                        x: { stacked: true, ticks: { font: FONT_MD } },
                        y: {
                            stacked: true,
                            ticks: { font: FONT_MD, callback: function(v) { return '€' + v.toLocaleString(); } },
                            grid:  { color: function(ctx) { return ctx.tick.value === 0 ? '#0f172a' : 'rgba(0,0,0,0.06)'; } },
                        },
                    },
                },
                plugins: [whiteBg],
            });
            return capture(canvas, chart);
        }

        /* ── Renderer: cumulative (line) ─────────────────────────────────── */
        function renderCumulative(title, data) {
            var canvas = mkCanvas();
            var ds     = data.datasets[0] || { label: 'Cumulative Balance', data: [], color: '#0891b2' };
            var color  = ds.color || '#0891b2';
            var chart  = new Chart(canvas, {
                type: 'line',
                data: {
                    labels: data.labels,
                    datasets: [{
                        label: ds.label, data: ds.data,
                        borderColor: color, backgroundColor: hexToRgba(color, 0.15),
                        borderWidth: 3, pointRadius: 5, fill: true, tension: 0.2,
                    }],
                },
                options: {
                    responsive: false, animation: false, devicePixelRatio: 1,
                    plugins: {
                        title:   { display: true, text: title, font: FONT_TITLE, padding: 24 },
                        legend:  { display: false },
                        tooltip: { enabled: false },
                    },
                    scales: {
                        x: { ticks: { font: FONT_MD } },
                        y: {
                            ticks: { font: FONT_MD, callback: function(v) { return '€' + v.toLocaleString(); } },
                            grid:  { color: function(ctx) { return ctx.tick.value === 0 ? '#0f172a' : 'rgba(0,0,0,0.06)'; } },
                        },
                    },
                },
                plugins: [whiteBg],
            });
            return capture(canvas, chart);
        }

        /* ── Save: folder-picker if supported, else sequential download ──── */
        function saveBlob(blob, filename, dirHandle) {
            if (dirHandle) {
                return dirHandle.getFileHandle(filename, { create: true })
                    .then(function(fh) { return fh.createWritable(); })
                    .then(function(w) { return w.write(blob).then(function() { return w.close(); }); });
            }
            var url = URL.createObjectURL(blob);
            var a = document.createElement('a');
            a.href = url; a.download = filename;
            document.body.appendChild(a); a.click(); document.body.removeChild(a);
            setTimeout(function() { URL.revokeObjectURL(url); }, 2000);
            return Promise.resolve();
        }

        /* ── Progress overlay ────────────────────────────────────────────── */
        function showOverlay(msg) {
            var el = document.getElementById('eg-overlay');
            if (!el) {
                el = document.createElement('div');
                el.id = 'eg-overlay';
                el.innerHTML = '<div class="eg-box"><div class="eg-spin"></div><div class="eg-msg"></div></div>';
                document.body.appendChild(el);
            }
            el.querySelector('.eg-msg').textContent = msg;
            el.style.display = 'flex';
        }
        function hideOverlay() {
            var el = document.getElementById('eg-overlay');
            if (el) el.style.display = 'none';
        }

        /* ── Main entry ──────────────────────────────────────────────────── */
        async function exportAllGraphs() {
            var topN      = document.getElementById('ctrl-top-n').value || '7';
            var activeBtn = document.querySelector('.bar-months-btn.active');
            var months    = activeBtn ? activeBtn.dataset.months : '6';

            // Ask for a folder if supported. User cancel → abort cleanly.
            var dirHandle = null;
            if ('showDirectoryPicker' in window) {
                try {
                    dirHandle = await window.showDirectoryPicker({ mode: 'readwrite' });
                } catch (e) {
                    if (e && e.name === 'AbortError') return;
                    console.warn('[export-graphs] folder picker failed, falling back:', e);
                }
            }

            showOverlay('Preparing exports…');
            try {
                // Fetch all 6 payloads in parallel (2 pies + 4 bars).
                var payloads = await Promise.all([
                    fetch('/api/dashboard/charts?'    + filterParams({ mode:'amount', top_n: topN })).then(function(r){return r.json();}),
                    fetch('/api/dashboard/charts?'    + filterParams({ mode:'count',  top_n: topN })).then(function(r){return r.json();}),
                    fetch('/api/dashboard/bar-chart?' + filterParams({ metric:'expenses', split:'company',  months: months, top_n: topN })).then(function(r){return r.json();}),
                    fetch('/api/dashboard/bar-chart?' + filterParams({ metric:'expenses', split:'category', months: months, top_n: topN })).then(function(r){return r.json();}),
                    fetch('/api/dashboard/bar-chart?' + filterParams({ metric:'balance',                     months: months })).then(function(r){return r.json();}),
                    fetch('/api/dashboard/bar-chart?' + filterParams({ metric:'cumulative',                  months: months })).then(function(r){return r.json();}),
                ]);
                var piesAmt = payloads[0], piesCnt = payloads[1];
                var barExpCmp = payloads[2], barExpCat = payloads[3];
                var barBal = payloads[4], barCum = payloads[5];

                var jobs = [
                    { name: 'by-company-amount',           fn: function() { return renderDoughnut('By Company (amount)',              piesAmt.by_company);   } },
                    { name: 'by-company-count',            fn: function() { return renderDoughnut('By Company (count)',               piesCnt.by_company);   } },
                    { name: 'by-category-amount',          fn: function() { return renderDoughnut('By Category (amount)',             piesAmt.by_category);  } },
                    { name: 'by-category-count',           fn: function() { return renderDoughnut('By Category (count)',              piesCnt.by_category);  } },
                    { name: 'over-time-expenses-company',  fn: function() { return renderExpenses('Expenses Over Time — by Company',  barExpCmp);            } },
                    { name: 'over-time-expenses-category', fn: function() { return renderExpenses('Expenses Over Time — by Category', barExpCat);            } },
                    { name: 'over-time-balance',           fn: function() { return renderBalance( 'Balance Over Time',                barBal);               } },
                    { name: 'over-time-cumulative',        fn: function() { return renderCumulative('Cumulative Balance',             barCum);               } },
                ];

                for (var i = 0; i < jobs.length; i++) {
                    var job = jobs[i];
                    showOverlay('Rendering ' + (i + 1) + '/' + jobs.length + ' — ' + job.name);
                    var blob = await job.fn();
                    var filename = 'bills_' + TODAY + '_' + job.name + '.png';
                    await saveBlob(blob, filename, dirHandle);
                }

                hideOverlay();
                if (!dirHandle) {
                    alert(jobs.length + ' PNGs saved to your Downloads folder.');
                }
            } catch (err) {
                hideOverlay();
                console.error('[export-graphs]', err);
                alert('Export failed: ' + (err && err.message ? err.message : err));
            }
        }

        var btn = document.getElementById('export-graphs-btn');
        if (btn) btn.addEventListener('click', function(e) { e.preventDefault(); exportAllGraphs(); });
    })();
})();
</script>

<script>
// Auto-submit the filter form when the user flips quick toggles (direction, date-field).
// Keeps charts + table in sync without an extra Filter click.
(function() {
    var form = document.getElementById('filter-form');
    if (!form) return;

    // Date-field radios → mirror to hidden input, submit
    var hidden = document.getElementById('hidden-date-field');
    document.querySelectorAll('input[name="date-field-ctrl"]').forEach(function(r) {
        if (hidden && r.value === hidden.value) r.checked = true;
        r.addEventListener('change', function() {
            if (hidden) hidden.value = r.value;
            form.submit();
        });
    });

    // Direction select → submit on change
    var directionEl = form.querySelector('select[name="direction"]');
    if (directionEl) directionEl.addEventListener('change', function() { form.submit(); });
})();
</script>

<script>
/* =======================================================================
   Cash-Flow Health — Aging card renderer.
   Fetches /api/dashboard/cashflow-health, draws a stacked horizontal bar
   per direction, and makes each segment click-through to a filtered view.
   ======================================================================= */
(function() {
    var agingChart = null;

    /* ── Bucket colour ramp: green → yellow → orange → red → dark red ── */
    // Not-yet-due = green; then escalating red-ness per bracket.
    var AGING_STOPS = ['#10b981', '#fbbf24', '#f97316', '#ef4444', '#7f1d1d'];

    function interpHex(c1, c2, t) {
        var p = function(s, o) { return parseInt(s.slice(o, o + 2), 16); };
        var lerp = function(a, b) { return Math.round(a + (b - a) * t); };
        var r = lerp(p(c1, 1), p(c2, 1)),
            g = lerp(p(c1, 3), p(c2, 3)),
            b = lerp(p(c1, 5), p(c2, 5));
        return '#' + [r, g, b].map(function(x) { return x.toString(16).padStart(2, '0'); }).join('');
    }
    function agingPalette(n) {
        if (n <= 0) return [];
        if (n === 1) return [AGING_STOPS[0]];
        var seg = AGING_STOPS.length - 1, out = [];
        for (var i = 0; i < n; i++) {
            var t  = i / (n - 1);
            var sf = t * seg;
            var si = Math.min(Math.floor(sf), seg - 1);
            out.push(interpHex(AGING_STOPS[si], AGING_STOPS[si + 1], sf - si));
        }
        return out;
    }

    /* ── Filter params for the API call + click-through URLs ─────────── */
    function buildCfParams() {
        var url = new URLSearchParams(window.location.search);
        var p   = new URLSearchParams();
        // direction is deliberately excluded — aging shows both sides
        ['q','source','validated','date_from','date_to','date_field','category_id'].forEach(function(k) {
            var v = url.get(k); if (v) p.set(k, v);
        });
        return p.toString();
    }

    function euro(n) { return '€' + (n || 0).toLocaleString(); }

    /* ── Click-through: jump to dashboard filtered by direction + bucket ── */
    function navigateToBucket(direction, bucketIdx) {
        var url = new URL(window.location.href);
        url.searchParams.set('direction', direction);
        url.searchParams.set('aging_bucket', String(bucketIdx));
        // If bucket > 0 (past-due), also toggle overdue=1 for redundancy/consistency
        if (bucketIdx > 0) url.searchParams.set('overdue', '1');
        else               url.searchParams.delete('overdue');
        url.searchParams.delete('page');
        window.location.href = url.toString();
    }

    /* ── Legend: one chip per bucket label ───────────────────────────── */
    function renderLegend(labels, colors) {
        var el = document.getElementById('aging-legend');
        if (!el) return;
        el.innerHTML = labels.map(function(lbl, i) {
            return '<span class="cf-chip"><span class="cf-dot" style="background:' + colors[i] + '"></span>' + lbl + '</span>';
        }).join('');
    }

    /* ── Bottom caption: totals per direction ────────────────────────── */
    function renderCaptions(data) {
        var r = data.aging.receivables, p = data.aging.payables;
        var rCnt = r.counts.reduce(function(a, b) { return a + b; }, 0);
        var rAmt = r.amounts.reduce(function(a, b) { return a + b; }, 0);
        var pCnt = p.counts.reduce(function(a, b) { return a + b; }, 0);
        var pAmt = p.amounts.reduce(function(a, b) { return a + b; }, 0);
        document.getElementById('aging-recv-caption').textContent =
            'Receivables: ' + rCnt + ' invoice' + (rCnt === 1 ? '' : 's') + ' · ' + euro(rAmt) + ' outstanding';
        document.getElementById('aging-pay-caption').textContent =
            'Payables: ' + pCnt + ' invoice' + (pCnt === 1 ? '' : 's') + ' · ' + euro(pAmt) + ' outstanding';
    }

    /* ── Renderer ────────────────────────────────────────────────────── */
    function renderAging(data) {
        var labels     = data.aging.labels;
        var recvAmts   = data.aging.receivables.amounts;
        var recvCnts   = data.aging.receivables.counts;
        var payAmts    = data.aging.payables.amounts;
        var payCnts    = data.aging.payables.counts;
        var colors     = agingPalette(labels.length);

        // One dataset per bucket (stacked) — yields coloured segments within each row.
        var datasets = labels.map(function(lbl, i) {
            return {
                label:           lbl,
                // Row 0 = Receivables, Row 1 = Payables.
                data:            [recvAmts[i], payAmts[i]],
                backgroundColor: colors[i],
                borderColor:     '#ffffff',
                borderWidth:     1,
                _counts:         [recvCnts[i], payCnts[i]],
                _bucketIdx:      i,
            };
        });

        renderLegend(labels, colors);

        if (agingChart) { agingChart.destroy(); agingChart = null; }

        agingChart = new Chart(document.getElementById('chart-aging'), {
            type: 'bar',
            data: { labels: ['Receivables', 'Payables'], datasets: datasets },
            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },      // custom legend above
                    tooltip: {
                        callbacks: {
                            label: function(ctx) {
                                var cnt = ctx.dataset._counts[ctx.dataIndex] || 0;
                                var amt = ctx.parsed.x || 0;
                                return ctx.dataset.label + ': ' + cnt + ' (' + euro(amt) + ')';
                            },
                        },
                    },
                },
                scales: {
                    x: { stacked: true, ticks: { callback: function(v) { return euro(v); } } },
                    y: { stacked: true },
                },
                onHover: function(evt, els) {
                    evt.native.target.style.cursor = els.length ? 'pointer' : 'default';
                },
                onClick: function(evt, els) {
                    if (!els.length) return;
                    var hit = els[0];
                    var ds  = agingChart.data.datasets[hit.datasetIndex];
                    var direction = (hit.index === 0) ? 'emitted' : 'received';
                    navigateToBucket(direction, ds._bucketIdx);
                },
            },
        });

        renderCaptions(data);
    }

    /* ── Fetch + render, exposed so filter changes can retrigger ─────── */
    function fetchAging() {
        fetch('/api/dashboard/cashflow-health?' + buildCfParams())
            .then(function(r) { return r.json(); })
            .then(renderAging)
            .catch(function(err) { console.warn('[cashflow-health] fetch failed', err); });
    }
    // Expose for Phase 3 (when Delay card wants its own refetch hook)
    window.refreshCashflowHealth = fetchAging;

    document.addEventListener('DOMContentLoaded', fetchAging);
})();
</script>

<script>
/* =======================================================================
   Cash-Flow Health — Payment Delay card.
   Two lines (Clients green / Suppliers red) + dashed reference line
   at the configured default payment term. Last 12 months, bucketed by
   payment_date. Null months = gaps in the line (spanGaps:false).
   ======================================================================= */
(function() {
    var delayChart = null;

    function euro(n) { return '€' + (n || 0).toLocaleString(); }

    function avgIgnoringNulls(arr) {
        var vals = arr.filter(function(v) { return v !== null && v !== undefined; });
        if (!vals.length) return null;
        var sum = vals.reduce(function(a, b) { return a + b; }, 0);
        return Math.round((sum / vals.length) * 10) / 10;
    }

    function renderCaptions(data) {
        var ca = avgIgnoringNulls(data.delay.client);
        var sa = avgIgnoringNulls(data.delay.supplier);
        document.getElementById('delay-client-caption').textContent   =
            'Clients avg: '   + (ca === null ? '—' : ca + ' days');
        document.getElementById('delay-supplier-caption').textContent =
            'Suppliers avg: ' + (sa === null ? '—' : sa + ' days');
        document.getElementById('delay-ref-label').textContent =
            'Reference: ' + data.delay.reference_days + ' days';
    }

    function renderDelay(data) {
        var labels = data.delay.labels;
        var refVal = data.delay.reference_days;
        var refLine = labels.map(function() { return refVal; });

        if (delayChart) { delayChart.destroy(); delayChart = null; }

        delayChart = new Chart(document.getElementById('chart-delay'), {
            type: 'line',
            data: {
                labels: labels,
                datasets: [
                    {
                        label:            'Clients',
                        data:             data.delay.client,
                        borderColor:      '#10b981',
                        backgroundColor:  'rgba(16, 185, 129, 0.15)',
                        borderWidth:      2.5,
                        pointRadius:      3,
                        pointHoverRadius: 5,
                        tension:          0.2,
                        spanGaps:         false,       // null month → broken line
                    },
                    {
                        label:            'Suppliers',
                        data:             data.delay.supplier,
                        borderColor:      '#ef4444',
                        backgroundColor:  'rgba(239, 68, 68, 0.15)',
                        borderWidth:      2.5,
                        pointRadius:      3,
                        pointHoverRadius: 5,
                        tension:          0.2,
                        spanGaps:         false,
                    },
                    {
                        label:           'Reference (' + refVal + 'd)',
                        data:            refLine,
                        borderColor:     '#9ca3af',
                        borderDash:      [6, 4],
                        borderWidth:     1.5,
                        pointRadius:     0,
                        fill:            false,
                        tension:         0,
                    },
                ],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: { mode: 'index', intersect: false },
                plugins: {
                    legend: { display: false },     // custom legend in the header
                    tooltip: {
                        callbacks: {
                            label: function(ctx) {
                                var v = ctx.parsed.y;
                                if (v === null || v === undefined) return ctx.dataset.label + ': —';
                                return ctx.dataset.label + ': ' + v + ' days';
                            },
                        },
                    },
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: { callback: function(v) { return v + 'd'; } },
                    },
                },
            },
        });

        renderCaptions(data);
    }

    function fetchDelay() {
        // Reuse the same endpoint; it returns both aging + delay in one payload.
        var url = new URLSearchParams(window.location.search);
        var p   = new URLSearchParams();
        ['q','source','validated','date_from','date_to','date_field','category_id'].forEach(function(k) {
            var v = url.get(k); if (v) p.set(k, v);
        });
        fetch('/api/dashboard/cashflow-health?' + p.toString())
            .then(function(r) { return r.json(); })
            .then(renderDelay)
            .catch(function(err) { console.warn('[delay] fetch failed', err); });
    }

    window.refreshPaymentDelay = fetchDelay;

    document.addEventListener('DOMContentLoaded', fetchDelay);
})();
</script>

<script>
/* =======================================================================
   Cash-Flow Health — Tab toggle for narrow screens.
   CSS hides the tabs on wide screens and shows both cards side-by-side.
   On narrow screens CSS hides inactive panels; JS switches which is active.
   ======================================================================= */
(function() {
    var tabs   = document.querySelectorAll('.cf-tab');
    var panels = document.querySelectorAll('.cf-panel');
    if (!tabs.length) return;

    function activate(name) {
        tabs.forEach(function(t) {
            var on = t.dataset.cfTab === name;
            t.classList.toggle('active', on);
            t.setAttribute('aria-selected', on ? 'true' : 'false');
        });
        panels.forEach(function(p) { p.classList.toggle('active', p.dataset.cfPanel === name); });
        // Re-trigger Chart.js resize — a previously-hidden canvas has 0 height.
        window.dispatchEvent(new Event('resize'));
    }

    tabs.forEach(function(t) {
        t.addEventListener('click', function() { activate(t.dataset.cfTab); });
    });
})();
</script>

<script>
/* =======================================================================
   Chart tab switcher — narrow screens only.
   Same pattern as .cf-tab (cashflow), but for the charts row.
   Fires a window 'resize' event after switching so Chart.js re-sizes
   the previously-hidden canvas.
   ======================================================================= */
(function() {
    var tabs   = document.querySelectorAll('.chart-tab');
    var panels = document.querySelectorAll('[data-chart-panel]');
    if (!tabs.length) return;

    function activate(name) {
        tabs.forEach(function(t) {
            var on = t.dataset.chartTab === name;
            t.classList.toggle('active', on);
            t.setAttribute('aria-selected', on ? 'true' : 'false');
        });
        panels.forEach(function(p) {
            p.classList.toggle('active', p.dataset.chartPanel === name);
        });
        // Give CSS a beat to lay out, then nudge Chart.js to recompute.
        requestAnimationFrame(function() {
            window.dispatchEvent(new Event('resize'));
        });
    }

    tabs.forEach(function(t) {
        t.addEventListener('click', function() { activate(t.dataset.chartTab); });
    });
})();
</script>

<!-- Category popover (single shared element, repositioned per click) -->
<div id="category-popover" class="category-popover" style="display:none; position:absolute;"></div>
<div id="project-popover"  class="category-popover" style="display:none; position:absolute;"></div>
<div id="frequency-popover" class="category-popover" style="display:none; position:absolute;"></div>


<!-- ═══════════════════════════════════════════════════════════════════════
     PDF MODAL — viewer + field assignment
     ═══════════════════════════════════════════════════════════════════════ -->
<div id="pdf-modal" class="modal-overlay" style="display:none;">
    <div class="modal-container">
        <!-- Header -->
        <div class="modal-header">
            <h2 id="modal-title">Invoice</h2>
            <div style="display:flex; align-items:center; gap:.5rem;">
                <button id="mode-crop" class="btn btn-sm" onclick="PdfModal.setMode('crop')">⬒ Crop OCR</button>
                <button id="mode-select" class="btn btn-primary btn-sm" onclick="PdfModal.setMode('select')">✓ Select</button>
                <span id="modal-zoom-label" class="badge">100%</span>
                <button class="btn btn-secondary" onclick="PdfModal.close()">&times; Close</button>
            </div>
        </div>

        <div class="modal-body">
            <!-- Left panel: fields -->
            <div class="modal-sidebar">
                <div class="sidebar-section">
                    <h4>Missing Fields</h4>
                    <p class="sidebar-hint">
                        1. Select text in the PDF<br>
                        2. Click a field below to assign it
                    </p>
                    <div id="missing-fields"></div>
                </div>
                <hr style="border:none; border-top:1px solid var(--border); margin:.75rem 0;">
                <div class="sidebar-section">
                    <h4>Filled Fields</h4>
                    <div id="filled-fields"></div>
                </div>
                <hr style="border:none; border-top:1px solid var(--border); margin:.75rem 0;">
                <div class="sidebar-section">
                    <button id="mark-reviewed-btn" class="btn btn-primary" style="width:100%;"
                            onclick="PdfModal.toggleValidated()">✓ Mark as Paid</button>
                </div>
            </div>

            <!-- Right panel: PDF viewer -->
            <div class="modal-viewer" id="pdf-viewer-container">
                <div id="pdf-pages" class="pdf-pages-wrapper"></div>
                <div id="pdf-loading" class="pdf-loading">Loading PDF…</div>
            </div>
        </div>

        <!-- Bottom bar: selected text preview -->
        <div class="modal-footer">
            <span style="color:var(--muted); font-size:.8rem;">Selected:</span>
            <input type="text" id="selected-text" class="selected-text-input"
                   placeholder="Select text in PDF, or type manually here…">
        </div>
    </div>
</div>


<!-- PDF.js (Mozilla) — CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script>
    pdfjsLib.GlobalWorkerOptions.workerSrc =
        'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
</script>

<script>
/* ═══════════════════════════════════════════════════════════════════════
   PDF MODAL — viewer + text selection → field assignment
   ═══════════════════════════════════════════════════════════════════════ */
const PdfModal = (() => {
    'use strict';

    let currentId    = null;
    let invoiceData  = null;
    let pdfDoc       = null;
    let scale        = 3.0;     // render resolution (high for sharpness)
    let displayScale = 1.5;     // CSS display size
    let cssZoom      = 1.0;
    let selectedText = '';
    let isPanning    = false;
    let panStart     = { x:0, y:0, scrollX:0, scrollY:0 };

    // Crop mode state
    let mode         = 'crop';   // 'select' or 'crop'
    let isCropping   = false;
    let cropStart    = null;
    let cropOverlay  = null;

    const el = {
        overlay:       () => document.getElementById('pdf-modal'),
        title:         () => document.getElementById('modal-title'),
        zoomLabel:     () => document.getElementById('modal-zoom-label'),
        missing:       () => document.getElementById('missing-fields'),
        filled:        () => document.getElementById('filled-fields'),
        pages:         () => document.getElementById('pdf-pages'),
        loading:       () => document.getElementById('pdf-loading'),
        selDisplay:    () => document.getElementById('selected-text'),
        viewer:        () => document.getElementById('pdf-viewer-container'),
        modeSelect:    () => document.getElementById('mode-select'),
        modeCrop:      () => document.getElementById('mode-crop'),
        reviewBtn:     () => document.getElementById('mark-reviewed-btn'),
    };


    /* ── Mode toggle ─────────────────────────────────────────────── */
    function setMode(newMode) {
        mode = newMode;
        el.modeSelect().className = 'btn btn-sm' + (mode === 'select' ? ' btn-primary' : '');
        el.modeCrop().className   = 'btn btn-sm' + (mode === 'crop'   ? ' btn-primary' : '');

        // Toggle text selection on the text layer
        const layers = document.querySelectorAll('.pdf-text-layer');
        layers.forEach(l => {
            l.style.pointerEvents = mode === 'select' ? 'auto' : 'none';
        });

        // Change cursor on viewer
        el.viewer().style.cursor = mode === 'crop' ? 'crosshair' : '';

        // Remove any existing crop overlay
        if (cropOverlay) { cropOverlay.remove(); cropOverlay = null; }
    }


    /* ── Open ────────────────────────────────────────────────────── */
    async function open(invoiceId) {
        currentId = invoiceId;
        cssZoom   = 1.0;
        mode      = 'crop';

        el.overlay().style.display = 'flex';
        el.loading().style.display = 'flex';
        el.pages().innerHTML       = '';
        el.selDisplay().value      = '';
        el.zoomLabel().textContent = '100%';
        selectedText = '';
        document.body.style.overflow = 'hidden';

        try {
            const resp = await fetch(`/invoices/api/${invoiceId}`);
            if (!resp.ok) throw new Error('Could not load invoice data');
            invoiceData = await resp.json();

            el.title().textContent =
                `#${invoiceData.pdf_number} — ${invoiceData.company_name || 'Unknown'}`;
            renderFieldPanels();

            const loadingTask = pdfjsLib.getDocument(`/invoices/api/${invoiceId}/pdf`);
            pdfDoc = await loadingTask.promise;
            await renderAllPages();
            el.loading().style.display = 'none';

            // Auto-fit on open: wait one frame so the viewer has its real clientWidth/Height
            requestAnimationFrame(fitToCanvas);

            // Reset mode buttons
            setMode('crop');

        } catch (err) {
            el.loading().textContent = '❌ ' + err.message;
            console.error('PdfModal.open error:', err);
        }
    }


    /* ── Close ───────────────────────────────────────────────────── */
    function close() {
        el.overlay().style.display = 'none';
        document.body.style.overflow = '';
        pdfDoc = null; currentId = null;
        if (invoiceData) location.reload();
    }


    /* ── Render all PDF pages ────────────────────────────────────── */
    async function renderAllPages() {
        const container = el.pages();
        container.innerHTML = '';
        container.style.transform       = `scale(${cssZoom})`;
        container.style.transformOrigin = 'top center';

        for (let i = 1; i <= pdfDoc.numPages; i++) {
            const page           = await pdfDoc.getPage(i);
            const renderViewport = page.getViewport({ scale });            // high-res canvas
            const displayViewport = page.getViewport({ scale: displayScale }); // CSS size

            const pageDiv = document.createElement('div');
            pageDiv.className    = 'pdf-page';
            pageDiv.style.width  = displayViewport.width + 'px';
            pageDiv.style.height = displayViewport.height + 'px';

            // Canvas: render at high res, display at CSS size
            const canvas  = document.createElement('canvas');
            canvas.width  = renderViewport.width;
            canvas.height = renderViewport.height;
            canvas.style.width  = displayViewport.width + 'px';
            canvas.style.height = displayViewport.height + 'px';

            await page.render({
                canvasContext: canvas.getContext('2d'),
                viewport: renderViewport
            }).promise;
            pageDiv.appendChild(canvas);

            // Text layer: positioned to match display size
            const textDiv = document.createElement('div');
            textDiv.className    = 'pdf-text-layer';
            textDiv.style.width  = displayViewport.width + 'px';
            textDiv.style.height = displayViewport.height + 'px';

            const textContent = await page.getTextContent();
            const textLayerTask = pdfjsLib.renderTextLayer({
                textContent,
                container: textDiv,
                viewport: displayViewport,
                textDivs: [],
            });
            await textLayerTask.promise;

            pageDiv.appendChild(textDiv);
            container.appendChild(pageDiv);
        }
    }

    /* ── Fit first page to viewer (auto on open) ─────────────────── */
    /**
     * Compute the largest cssZoom that still shows the entire first page
     * (both width and height) inside the viewer, and apply it.
     * Called once layout has settled, so offsetWidth/Height are reliable.
     */
    function fitToCanvas() {
        const viewer    = el.viewer();
        const wrapper   = el.pages();
        const firstPage = wrapper.querySelector('.pdf-page');
        if (!viewer || !firstPage) return;

        // Account for the wrapper's own padding so the page doesn't kiss the edges
        const cs   = getComputedStyle(wrapper);
        const padX = (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight)  || 0);
        const padY = (parseFloat(cs.paddingTop)  || 0) + (parseFloat(cs.paddingBottom) || 0);

        const availW = viewer.clientWidth  - padX;
        const availH = viewer.clientHeight - padY;
        const pageW  = firstPage.offsetWidth;
        const pageH  = firstPage.offsetHeight;
        if (!pageW || !pageH || availW <= 0 || availH <= 0) return;

        // Min of fit-by-width / fit-by-height → entire page visible. Same clamp as wheel zoom.
        const fit = Math.min(availW / pageW, availH / pageH);
        cssZoom   = Math.max(0.3, Math.min(4.0, fit));

        wrapper.style.transform   = `scale(${cssZoom})`;
        el.zoomLabel().textContent = Math.round(cssZoom * 100) + '%';

        // Centered horizontally via transform-origin; reset any leftover scroll
        viewer.scrollLeft = 0;
        viewer.scrollTop  = 0;
    }

    /* ── Field panels ────────────────────────────────────────────── */
    function renderFieldPanels() {
        const missingEl = el.missing();
        const filledEl  = el.filled();
        missingEl.innerHTML = '';
        filledEl.innerHTML  = '';

        const ALL_FIELDS = [
            { field: 'company_name',    label: 'Company' },
            { field: 'invoice_number',  label: 'Invoice #' },
            { field: 'vat_number',      label: 'CIF' },
            { field: 'invoice_date',    label: 'Invoice Date' },
            { field: 'due_date',        label: 'Due Date' },
            { field: 'total_amount',    label: 'Total Amount' },
            { field: 'project_name',    label: 'Project' },
            { field: 'amount_excl_vat', label: 'Base Amount' },
            { field: 'vat_amount',      label: 'VAT Amount' },
            { field: 'irpf_retention',  label: 'IRPF Retention' },
            { field: 'payment_detail',  label: 'Payment Detail' },
        ];

        const missingSet = new Set(
            (invoiceData.missing_fields || []).map(f => f.field)
        );

        ALL_FIELDS.forEach(({ field, label }) => {
            const rawVal = invoiceData[field];
            const isEmpty = rawVal == null || (typeof rawVal === 'string' && rawVal.trim() === '');
            if (missingSet.has(field) || isEmpty) {
                const btn = document.createElement('button');
                btn.className   = 'field-btn field-btn-missing';
                btn.textContent = label;
                btn.title       = 'Select text in PDF, then click here';
                btn.addEventListener('click', () => assignField(field, label, btn));
                missingEl.appendChild(btn);
            } else {
                const div = document.createElement('div');
                div.className = 'field-btn field-btn-filled';

                const val = rawVal;
                const labelSpan = document.createElement('span');
                labelSpan.textContent = '✅ ' + label;
                const valSpan = document.createElement('small');
                valSpan.textContent = truncate(String(val), 25);
                valSpan.title = String(val);

                div.appendChild(labelSpan);
                div.appendChild(valSpan);

                div.style.cursor = 'pointer';
                div.title = 'Click to re-assign from selection, double-click to type';
                div.addEventListener('click', () => {
                    if (selectedText) assignField(field, label, div);
                });
                div.addEventListener('dblclick', (e) => {
                    e.stopPropagation();
                    openInlineFieldEdit(field, label, div);
                });
                filledEl.appendChild(div);
            }
        });

        if (!missingEl.children.length) {
            missingEl.innerHTML =
                '<p style="font-size:.8rem; color:var(--success);">All fields filled ✓</p>';
        }

        // Sync the Mark as Reviewed button
        const btn = el.reviewBtn();
        if (btn) {
            btn.style.width = '100%';
            if (invoiceData.validated) {
                btn.textContent = '✗ Mark as Unpaid';
                btn.className   = 'btn btn-secondary';
            } else {
                btn.textContent = '✓ Mark as Paid';
                btn.className   = 'btn btn-primary';
            }
        }
    }


    /* ── Inline edit for filled fields ───────────────────────────── */
    function openInlineFieldEdit(field, label, containerEl) {
        const currentVal = invoiceData[field] || '';
        containerEl.innerHTML = '';
        containerEl.classList.remove('field-btn-filled');
        containerEl.classList.add('field-btn-editing');

        const input = document.createElement('input');
        input.type        = 'text';
        input.value       = currentVal;
        input.className   = 'field-inline-input';
        input.placeholder = label;
        containerEl.appendChild(input);
        input.focus();
        input.select();

        input.addEventListener('keydown', (ev) => {
            if (ev.key === 'Enter')  { ev.preventDefault(); saveInlineEdit(field, input.value.trim()); }
            if (ev.key === 'Escape') { renderFieldPanels(); }
        });
        input.addEventListener('blur', () => {
            setTimeout(() => saveInlineEdit(field, input.value.trim()), 100);
        });
    }

    async function saveInlineEdit(field, newValue) {
        try {
            const resp = await fetch(`/invoices/api/${currentId}`, {
                method: 'PATCH',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ [field]: newValue || null }),
            });
            const data = await resp.json();
            if (data.ok) {
                invoiceData[field] = newValue || null;
                invoiceData.missing_fields = data.missing_fields;
            }
        } catch (err) { console.error('saveInlineEdit error:', err); }
        renderFieldPanels();
    }


    /* ── Assign selected text → field ────────────────────────────── */
    async function assignField(field, label, btnEl) {
        if (!selectedText) {
            btnEl.classList.add('field-btn-shake');
            setTimeout(() => btnEl.classList.remove('field-btn-shake'), 400);
            return;
        }

        btnEl.disabled = true;
        if (btnEl.tagName === 'BUTTON') btnEl.textContent = label + ' …';

        try {
            const resp = await fetch(`/invoices/api/${currentId}`, {
                method: 'PATCH',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ [field]: selectedText }),
            });
            const data = await resp.json();

            if (data.ok) {
                invoiceData[field]         = selectedText;
                invoiceData.missing_fields = data.missing_fields;
                renderFieldPanels();
                window.getSelection().removeAllRanges();
                selectedText = '';
                el.selDisplay().value = '';
                el.selDisplay().placeholder = '✓ Saved — select next field';
            } else {
                if (btnEl.tagName === 'BUTTON') btnEl.textContent = label + ' (error)';
                btnEl.disabled = false;
            }
        } catch (err) {
            console.error('assignField error:', err);
            if (btnEl.tagName === 'BUTTON') btnEl.textContent = label + ' (error)';
            btnEl.disabled = false;
        }
    }


    /* ═══════════════════════════════════════════════════════════════
       CROP MODE — draw rectangle → OCR that region
       ═══════════════════════════════════════════════════════════════ */

    document.addEventListener('mousedown', (e) => {
        if (mode !== 'crop') return;
        if (!el.overlay() || el.overlay().style.display === 'none') return;

        const page = e.target.closest('.pdf-page');
        if (!page) return;

        e.preventDefault();
        isCropping = true;

        const rect = page.getBoundingClientRect();
        cropStart = {
            page,
            x: (e.clientX - rect.left) / cssZoom,
            y: (e.clientY - rect.top)  / cssZoom,
        };

        // Create overlay div for visual feedback
        if (cropOverlay) cropOverlay.remove();
        cropOverlay = document.createElement('div');
        cropOverlay.className = 'crop-overlay';
        cropOverlay.style.left   = cropStart.x + 'px';
        cropOverlay.style.top    = cropStart.y + 'px';
        cropOverlay.style.width  = '0px';
        cropOverlay.style.height = '0px';
        page.appendChild(cropOverlay);
    });

    document.addEventListener('mousemove', (e) => {
        if (!isCropping || !cropStart) return;

        const rect = cropStart.page.getBoundingClientRect();
        const x = (e.clientX - rect.left) / cssZoom;
        const y = (e.clientY - rect.top)  / cssZoom;

        const left   = Math.min(cropStart.x, x);
        const top    = Math.min(cropStart.y, y);
        const width  = Math.abs(x - cropStart.x);
        const height = Math.abs(y - cropStart.y);

        cropOverlay.style.left   = left + 'px';
        cropOverlay.style.top    = top + 'px';
        cropOverlay.style.width  = width + 'px';
        cropOverlay.style.height = height + 'px';
    });

    document.addEventListener('mouseup', async (e) => {
        // ── Crop mode: finish rectangle → OCR ──
        if (isCropping && cropStart) {
            isCropping = false;

            const rect = cropStart.page.getBoundingClientRect();
            const x = (e.clientX - rect.left) / cssZoom;
            const y = (e.clientY - rect.top)  / cssZoom;

            const left   = Math.min(cropStart.x, x);
            const top    = Math.min(cropStart.y, y);
            const width  = Math.abs(x - cropStart.x);
            const height = Math.abs(y - cropStart.y);

            // Ignore tiny rectangles (accidental clicks)
            if (width < 10 || height < 10) {
                if (cropOverlay) { cropOverlay.remove(); cropOverlay = null; }
                cropStart = null;
                return;
            }

            // Show loading state on the crop overlay (counter-scale so label is zoom-independent)
            function _cropSpan(cls, text) {
                const sp = document.createElement('span');
                sp.className = cls;
                sp.textContent = text;
                sp.style.transform = 'scale(' + (1 / cssZoom) + ')';
                sp.style.transformOrigin = 'center';
                return sp;
            }
            cropOverlay.replaceChildren(_cropSpan('crop-loading', 'OCR…'));

            // Extract region from the canvas
            // Scale crop coordinates to match high-res canvas
            const canvas = cropStart.page.querySelector('canvas');
            const ratio  = scale / displayScale;
            const cropCanvas = document.createElement('canvas');
            cropCanvas.width  = width * ratio;
            cropCanvas.height = height * ratio;
            const ctx = cropCanvas.getContext('2d');
            ctx.drawImage(canvas,
                left * ratio, top * ratio, width * ratio, height * ratio,
                0, 0, width * ratio, height * ratio
            );
            const imageData = cropCanvas.toDataURL('image/png');

            // Send to server for OCR
            try {
                const resp = await fetch(`/invoices/api/${currentId}/ocr-region`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ image: imageData }),
                });
                const data = await resp.json();

                if (data.ok && data.text) {
                    selectedText = data.text;
                    el.selDisplay().value = data.text;
                    cropOverlay.replaceChildren(_cropSpan('crop-success', '✓'));
                } else {
                    cropOverlay.replaceChildren(_cropSpan('crop-error', 'No text found'));
                }
            } catch (err) {
                console.error('OCR region error:', err);
                cropOverlay.replaceChildren(_cropSpan('crop-error', 'OCR failed'));
            }

            // Remove overlay after a short delay
            setTimeout(() => {
                if (cropOverlay) { cropOverlay.remove(); cropOverlay = null; }
            }, 1500);

            cropStart = null;
            return;
        }

        // ── Select mode: track text selection ──
        if (mode !== 'select') return;
        if (!el.overlay() || el.overlay().style.display === 'none') return;
        if (isPanning) return;

        const sel  = window.getSelection();
        const text = sel ? sel.toString().trim() : '';
        if (text) {
            selectedText = text;
            el.selDisplay().value = text;
        }
    });

    /* ── Keep selectedText in sync when user edits the input ─────── */
    document.addEventListener('input', (e) => {
        if (e.target.id === 'selected-text') {
            selectedText = e.target.value.trim();
        }
    });


    /* ── Zoom: Ctrl + mouse wheel ────────────────────────────────── */
    document.addEventListener('wheel', (e) => {
        if (!el.overlay() || el.overlay().style.display === 'none') return;
        if (!e.ctrlKey) return;
        e.preventDefault();

        const delta = e.deltaY > 0 ? -0.1 : 0.1;
        cssZoom = Math.max(0.3, Math.min(4.0, cssZoom + delta));

        el.pages().style.transform = `scale(${cssZoom})`;
        el.zoomLabel().textContent = Math.round(cssZoom * 100) + '%';
    }, { passive: false });


    /* ── Pan: Space + click & drag ───────────────────────────────── */
    document.addEventListener('keydown', (e) => {
        if (e.code !== 'Space') return;
        if (!el.overlay() || el.overlay().style.display === 'none') return;
        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
        e.preventDefault();
        el.viewer().style.cursor = 'grab';
    });

    document.addEventListener('keyup', (e) => {
        if (e.code === 'Space') {
            isPanning = false;
            if (el.viewer()) el.viewer().style.cursor = mode === 'crop' ? 'crosshair' : '';
        }
    });

    document.addEventListener('mousedown', (e) => {
        const viewer = el.viewer();
        if (!viewer || el.overlay()?.style.display === 'none') return;
        if (viewer.style.cursor !== 'grab') return;

        isPanning = true;
        viewer.style.cursor = 'grabbing';
        panStart = {
            x: e.clientX, y: e.clientY,
            scrollX: viewer.scrollLeft, scrollY: viewer.scrollTop
        };
        e.preventDefault();
    });

    document.addEventListener('mousemove', (e) => {
        if (!isPanning) return;
        const viewer = el.viewer();
        viewer.scrollLeft = panStart.scrollX - (e.clientX - panStart.x);
        viewer.scrollTop  = panStart.scrollY - (e.clientY - panStart.y);
    });

    document.addEventListener('mouseup', () => {
        if (isPanning) {
            isPanning = false;
            if (el.viewer()) el.viewer().style.cursor = mode === 'crop' ? 'crosshair' : '';
        }
    });


    /* ── Close on Escape ─────────────────────────────────────────── */
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && el.overlay()?.style.display !== 'none') close();
    });

    /* ── Close on overlay click ──────────────────────────────────── */
    document.addEventListener('click', (e) => {
        if (e.target === el.overlay()) close();
    });


    /* ── Toggle validated from modal ────────────────────────────── */
    async function toggleValidated() {
        const newVal = !invoiceData.validated;
        try {
            const resp = await fetch(`/invoices/api/${currentId}`, {
                method: 'PATCH',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ validated: newVal }),
            });
            const data = await resp.json();
            if (data.ok) location.reload();
        } catch (err) {
            console.error('toggleValidated error:', err);
        }
    }


    function truncate(str, len) {
        return str.length > len ? str.slice(0, len) + '…' : str;
    }

    return { open, close, setMode, toggleValidated };
})();


/* ── Hook up 📄 buttons ──────────────────────────────────────── */
document.querySelectorAll('.open-modal').forEach(btn => {
    btn.addEventListener('click', () => PdfModal.open(btn.dataset.id));
});

/* ── Auto-open PDF modal when arriving from Movements list ──────── */
(function () {
    const params = new URLSearchParams(window.location.search);
    const modalId = params.get('open_modal');
    if (!modalId) return;

    // Strip the param from the URL so a refresh doesn't keep re-opening.
    params.delete('open_modal');
    const newSearch = params.toString();
    window.history.replaceState({}, '', window.location.pathname +
        (newSearch ? '?' + newSearch : ''));

    // Wait for PdfModal to be defined and the page to settle.
    setTimeout(() => {
        if (window.PdfModal && typeof window.PdfModal.open === 'function') {
            PdfModal.open(modalId);
        }
    }, 100);
})();

/* ── Export button: mirrors current filter params ────────────── */
document.getElementById('export-btn').addEventListener('click', (e) => {
    e.preventDefault();
    const params = new URLSearchParams(new FormData(document.getElementById('filter-form')));
    window.location.href = '{{ url_for("dashboard.export") }}?' + params.toString();
});

/* ── Bundle button: same filter mirror as Export, but downloads a zip ─ */
document.getElementById('bundle-btn').addEventListener('click', (e) => {
    e.preventDefault();
    const params = new URLSearchParams(new FormData(document.getElementById('filter-form')));
    window.location.href = '{{ url_for("dashboard.export_bundle") }}?' + params.toString();
});

// Direction flip (received ↔ emitted)
    document.querySelectorAll('.direction-cell').forEach(cell => {
        cell.addEventListener('click', async () => {
            const id      = cell.dataset.id;
            const current = cell.dataset.direction || 'received';
            const next    = current === 'emitted' ? 'received' : 'emitted';
            cell.style.opacity = '0.5';
            try {
                const resp = await fetch(`/invoices/api/${id}`, {
                    method:  'PATCH',
                    headers: { 'Content-Type': 'application/json' },
                    body:    JSON.stringify({ direction: next })
                });
                const data = await resp.json();
                if (!resp.ok || !data.ok) throw new Error(data.error || 'PATCH failed');
                cell.dataset.direction = next;
                cell.innerHTML = next === 'emitted'
                    ? '<span class="tag tag-emitted">📤 Emitted</span>'
                    : '<span class="tag tag-received">📥 Received</span>';
            } catch (err) {
                alert('Could not change direction: ' + err.message);
            } finally {
                cell.style.opacity = '';
            }
        });
    });

    /**
     * Recompute and apply the 'row-overdue' class on a single row.
     * An invoice is overdue when ALL are true:
     *   - direction === 'emitted'
     *   - not already matched (reconciliation_status !== 'matched')
     *   - effective due date (explicit or invoice_date + default term) is in the past
     * Since the dashboard doesn't carry reconciliation_status or the default term
     * in the DOM, we fetch the canonical verdict from the backend.
     */
    async function updateRowOverdue(tr) {
        if (!tr) return;
        const id = tr.dataset.id;
        if (!id) return;
        try {
            const resp = await fetch(`/invoices/api/${id}`);
            if (!resp.ok) return;
            const inv = await resp.json();

            // Quick client-side check using the data we have
            const direction = inv.direction || 'received';
            const dueIso    = inv.due_date || null;
            let isOverdue   = false;

            if (direction === 'emitted' && dueIso) {
                // Compare at day granularity in local time
                const due   = new Date(dueIso + 'T00:00:00');
                const today = new Date();
                today.setHours(0, 0, 0, 0);
                isOverdue = due < today;
            }

            tr.classList.toggle('row-overdue', isOverdue);
        } catch {
            /* silent — row styling just won't update, which is recoverable on next reload */
        }
    }

    // Due-date inline editor — click to open a date input, blur/Enter to save
    document.querySelectorAll('.due-date-cell').forEach(cell => {
        cell.addEventListener('click', () => {
            if (cell.querySelector('input')) return;  // already editing

            const id  = cell.dataset.id;
            const iso = cell.dataset.iso || '';
            const originalHtml = cell.innerHTML;

            const input = document.createElement('input');
            input.type  = 'date';
            input.value = iso;
            input.style.cssText = 'padding:.2rem .4rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.82rem; width:9rem;';

            cell.innerHTML = '';
            cell.appendChild(input);
            input.focus();
            try { input.showPicker(); } catch { /* not supported / blocked — focus alone is fine */ }

            let committed = false;

            const revert = () => {
                if (committed) return;
                cell.innerHTML = originalHtml;
            };

            const commit = async () => {
                if (committed) return;
                committed = true;
                const newIso = input.value;  // '' = clear
                if (newIso === iso) {
                    cell.innerHTML = originalHtml;
                    return;
                }
                cell.style.opacity = '0.5';
                try {
                    const resp = await fetch(`/invoices/api/${id}`, {
                        method:  'PATCH',
                        headers: { 'Content-Type': 'application/json' },
                        body:    JSON.stringify({ due_date: newIso })
                    });
                    const data = await resp.json();
                    if (!resp.ok || !data.ok) throw new Error(data.error || 'PATCH failed');
                    cell.dataset.iso = newIso;
                    if (newIso) {
                        // Reformat ISO → dd/mm/yyyy to match the rest of the table
                        const [y, m, d] = newIso.split('-');
                        cell.innerHTML = `${d}/${m}/${y}`;
                    } else {
                        cell.innerHTML = '—';
                    }
                    // Recompute overdue state locally (no page reload needed)
                    updateRowOverdue(cell.closest('tr'));
                } catch (err) {
                    alert('Could not update due date: ' + err.message);
                    cell.innerHTML = originalHtml;
                    committed = false;
                } finally {
                    cell.style.opacity = '';
                }
            };

            input.addEventListener('blur',    commit);
            input.addEventListener('keydown', (e) => {
                if (e.key === 'Enter')  { e.preventDefault(); input.blur(); }
                if (e.key === 'Escape') { committed = true; revert(); }
            });
        });
    });

/* ── Inline VALIDATED toggle on table rows ───────────────────── */
document.querySelectorAll('.validated-cell').forEach(cell => {
    cell.addEventListener('click', async () => {
        const id      = cell.dataset.id;
        const current = cell.dataset.validated === 'true';
        try {
            const resp = await fetch(`/invoices/api/${id}`, {
                method: 'PATCH',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ validated: !current }),
            });
            const data = await resp.json();
            if (data.ok) location.reload();
        } catch (err) {
            console.error('validated toggle error:', err);
        }
    });
});

/* ── Auto-cleanup resolved issues on page load ───────────────── */
fetch('/api/cleanup-issues', { method: 'POST' })
    .then(r => r.json())
    .then(data => { if (data.cleaned > 0) location.reload(); })
    .catch(() => {});
</script>

<script>
(function () {
    var popover    = document.getElementById('category-popover');
    var activeCell = null;
    var ALL_CATS   = {{ all_categories | tojson | safe }};

    function hexToRgba(hex, alpha) {
        var r = parseInt(hex.slice(1, 3), 16);
        var g = parseInt(hex.slice(3, 5), 16);
        var b = parseInt(hex.slice(5, 7), 16);
        return 'rgba(' + r + ',' + g + ',' + b + ',' + alpha + ')';
    }

    function makeBadge(cat) {
        var span = document.createElement('span');
        span.className        = 'category-badge';
        span.style.background = hexToRgba(cat.color, 0.18);
        span.style.borderColor = cat.color;
        span.style.color      = cat.color;
        span.textContent      = cat.name;
        return span;
    }

    function buildPopover(invId) {
        while (popover.firstChild) popover.removeChild(popover.firstChild);

        // Remove row
        var removeItem = document.createElement('div');
        removeItem.className = 'category-popover-item';
        var removeLabel = document.createElement('span');
        removeLabel.style.color = 'var(--muted)';
        removeLabel.textContent = '\u2014 Remove';
        removeItem.appendChild(removeLabel);
        removeItem.addEventListener('click', function() { assignCategory(invId, null, null); });
        popover.appendChild(removeItem);

        if (ALL_CATS.length) {
            var sep = document.createElement('hr');
            sep.className = 'category-popover-sep';
            popover.appendChild(sep);
        }

        ALL_CATS.forEach(function(cat) {
            var item = document.createElement('div');
            item.className = 'category-popover-item';
            item.appendChild(makeBadge(cat));
            item.addEventListener('click', function() { assignCategory(invId, cat.id, cat); });
            popover.appendChild(item);
        });
    }

    function openPopover(cell) {
        var invId = parseInt(cell.dataset.id, 10);
        activeCell = cell;
        buildPopover(invId);

        var rect = cell.getBoundingClientRect();
        popover.style.top     = (window.scrollY + rect.bottom + 4) + 'px';
        popover.style.left    = (window.scrollX + rect.left) + 'px';
        popover.style.display = 'block';
    }

    function closePopover() {
        popover.style.display = 'none';
        activeCell = null;
    }

    function assignCategory(invId, catId, cat) {
        var cell = activeCell;
        closePopover();
        fetch('/api/invoice/' + invId + '/category', {
            method: 'PATCH',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({category_id: catId}),
        }).then(function(resp) {
            if (!resp.ok) {
                cell.style.outline = '2px solid var(--error)';
                setTimeout(function() { cell.style.outline = ''; }, 1200);
                return;
            }
            location.reload();
        }).catch(function() {
            cell.style.outline = '2px solid var(--error)';
            setTimeout(function() { cell.style.outline = ''; }, 1200);
        });
    }

    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') closePopover();
    });

    document.addEventListener('click', function(e) {
        var cell = e.target.closest('.category-cell');
        if (cell) {
            e.stopPropagation();
            if (activeCell === cell) { closePopover(); return; }
            openPopover(cell);
            return;
        }
        if (!popover.contains(e.target)) closePopover();
    });
})();
</script>

<script>
/* ── Project popover ─────────────────────────────────────────── */
(function () {
    var popover    = document.getElementById('project-popover');
    var activeCell = null;
    var ALL_PROJS  = {{ all_projects | tojson | safe }};

    function hexToRgba(hex, alpha) {
        var r = parseInt(hex.slice(1, 3), 16);
        var g = parseInt(hex.slice(3, 5), 16);
        var b = parseInt(hex.slice(5, 7), 16);
        return 'rgba(' + r + ',' + g + ',' + b + ',' + alpha + ')';
    }

    function makeBadge(proj) {
        var color = proj.color || '#6366f1';
        var span = document.createElement('span');
        span.className         = 'category-badge';
        span.style.background  = hexToRgba(color, 0.18);
        span.style.borderColor = color;
        span.style.color       = color;
        span.textContent       = proj.name;
        return span;
    }

    function buildPopover(invId) {
        while (popover.firstChild) popover.removeChild(popover.firstChild);

        var removeItem = document.createElement('div');
        removeItem.className = 'category-popover-item';
        var removeLabel = document.createElement('span');
        removeLabel.style.color = 'var(--muted)';
        removeLabel.textContent = '\u2014 Remove';
        removeItem.appendChild(removeLabel);
        removeItem.addEventListener('click', function() { assignProject(invId, null); });
        popover.appendChild(removeItem);

        if (ALL_PROJS.length) {
            var sep = document.createElement('hr');
            sep.className = 'category-popover-sep';
            popover.appendChild(sep);
        }

        ALL_PROJS.forEach(function(proj) {
            var item = document.createElement('div');
            item.className = 'category-popover-item';
            item.appendChild(makeBadge(proj));
            item.addEventListener('click', function() { assignProject(invId, proj.name); });
            popover.appendChild(item);
        });
    }

    function openPopover(cell) {
        var invId = parseInt(cell.dataset.id, 10);
        activeCell = cell;
        buildPopover(invId);
        var rect = cell.getBoundingClientRect();
        popover.style.top     = (window.scrollY + rect.bottom + 4) + 'px';
        popover.style.left    = (window.scrollX + rect.left) + 'px';
        popover.style.display = 'block';
    }

    function closePopover() {
        popover.style.display = 'none';
        activeCell = null;
    }

    function assignProject(invId, name) {
        var cell = activeCell;
        closePopover();
        fetch('/invoices/api/' + invId, {
            method: 'PATCH',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({project_name: name}),
        }).then(function(resp) {
            if (!resp.ok) {
                cell.style.outline = '2px solid var(--error)';
                setTimeout(function() { cell.style.outline = ''; }, 1200);
                return;
            }
            location.reload();
        }).catch(function() {
            cell.style.outline = '2px solid var(--error)';
            setTimeout(function() { cell.style.outline = ''; }, 1200);
        });
    }

    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') closePopover();
    });

    document.addEventListener('click', function(e) {
        var cell = e.target.closest('.project-cell');
        if (cell) {
            e.stopPropagation();
            if (activeCell === cell) { closePopover(); return; }
            openPopover(cell);
            return;
        }
        if (!popover.contains(e.target)) closePopover();
    });
})();
</script>
</div></div>

<script>
/* ── Frequency popover ───────────────────────────────────────── */
(function () {
    var popover    = document.getElementById('frequency-popover');
    var activeCell = null;
    var FREQ_OPTIONS = ['One-off', 'Monthly', 'Quarterly', 'Annual'];

    function buildPopover(invId) {
        while (popover.firstChild) popover.removeChild(popover.firstChild);

        var removeItem = document.createElement('div');
        removeItem.className = 'category-popover-item';
        var removeLabel = document.createElement('span');
        removeLabel.style.color = 'var(--muted)';
        removeLabel.textContent = '\u2014 Remove';
        removeItem.appendChild(removeLabel);
        removeItem.addEventListener('click', function() { assignFreq(invId, null); });
        popover.appendChild(removeItem);

        var sep = document.createElement('hr');
        sep.className = 'category-popover-sep';
        popover.appendChild(sep);

        FREQ_OPTIONS.forEach(function(opt) {
            var item = document.createElement('div');
            item.className = 'category-popover-item';
            var label = document.createElement('span');
            label.textContent = opt;
            item.appendChild(label);
            item.addEventListener('click', function() { assignFreq(invId, opt); });
            popover.appendChild(item);
        });
    }

    function openPopover(cell) {
        var invId = parseInt(cell.dataset.id, 10);
        activeCell = cell;
        buildPopover(invId);
        var rect = cell.getBoundingClientRect();
        popover.style.top     = (window.scrollY + rect.bottom + 4) + 'px';
        popover.style.left    = (window.scrollX + rect.left) + 'px';
        popover.style.display = 'block';
    }

    function closePopover() {
        popover.style.display = 'none';
        activeCell = null;
    }

    function assignFreq(invId, value) {
        var cell = activeCell;
        closePopover();
        fetch('/invoices/api/' + invId, {
            method: 'PATCH',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({payment_frequency: value}),
        }).then(function(resp) {
            if (!resp.ok) {
                cell.style.outline = '2px solid var(--error)';
                setTimeout(function() { cell.style.outline = ''; }, 1200);
                return;
            }
            location.reload();
        }).catch(function() {
            cell.style.outline = '2px solid var(--error)';
            setTimeout(function() { cell.style.outline = ''; }, 1200);
        });
    }

    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') closePopover();
    });

    document.addEventListener('click', function(e) {
        var cell = e.target.closest('.frequency-cell');
        if (cell) {
            e.stopPropagation();
            if (activeCell === cell) { closePopover(); return; }
            openPopover(cell);
            return;
        }
        if (!popover.contains(e.target)) closePopover();
    });
})();
</script>

<script>
/* ── Export config modal ─────────────────────────────────────── */
(function () {
    var modal    = document.getElementById('ecfg-modal');
    var list     = document.getElementById('ecfg-col-list');
    var dragSrc  = null;
    var phCount  = 0;

    function makeItem(col) {
        var item = document.createElement('div');
        item.className = 'ecfg-col-item';
        item.draggable = true;
        item.dataset.key  = col.key;
        item.dataset.type = col.type;

        var handle = document.createElement('span');
        handle.className   = 'ecfg-drag-handle';
        handle.textContent = '⠿';

        // Dashboard visibility checkbox (blue) — placeholders always disabled here
        var cbDash = document.createElement('input');
        cbDash.type      = 'checkbox';
        cbDash.className = 'ecfg-cb-dash';
        cbDash.checked   = col.visible_dashboard !== false && col.visible !== false;
        if (col.type === 'placeholder') { cbDash.disabled = true; cbDash.checked = false; }

        // Export visibility checkbox (green)
        var cbExp = document.createElement('input');
        cbExp.type      = 'checkbox';
        cbExp.className = 'ecfg-cb-exp';
        cbExp.checked   = col.visible_export !== false && col.visible !== false;

        var labelWrap = document.createElement('span');
        labelWrap.className = 'ecfg-col-label';

        if (col.type === 'placeholder') {
            var inp = document.createElement('input');
            inp.type        = 'text';
            inp.className   = 'ecfg-ph-input';
            inp.value       = col.label || '';
            inp.placeholder = 'Column title';
            labelWrap.appendChild(inp);

            var del = document.createElement('span');
            del.className   = 'ecfg-del';
            del.textContent = '×';
            del.title       = 'Remove';
            del.addEventListener('click', function() { item.remove(); });

            item.appendChild(handle);
            item.appendChild(cbDash);
            item.appendChild(cbExp);
            item.appendChild(labelWrap);
            item.appendChild(del);
        } else {
            labelWrap.textContent = col.label;
            item.appendChild(handle);
            item.appendChild(cbDash);
            item.appendChild(cbExp);
            item.appendChild(labelWrap);
        }

        // Drag-and-drop
        item.addEventListener('dragstart', function(e) {
            dragSrc = item;
            e.dataTransfer.effectAllowed = 'move';
            setTimeout(function() { item.style.opacity = '.5'; }, 0);
        });
        item.addEventListener('dragend', function() {
            item.style.opacity = '1';
            list.querySelectorAll('.ecfg-col-item').forEach(function(i) { i.classList.remove('drag-over'); });
        });
        item.addEventListener('dragover', function(e) {
            e.preventDefault();
            list.querySelectorAll('.ecfg-col-item').forEach(function(i) { i.classList.remove('drag-over'); });
            item.classList.add('drag-over');
        });
        item.addEventListener('drop', function(e) {
            e.preventDefault();
            item.classList.remove('drag-over');
            if (dragSrc && dragSrc !== item) {
                var items = Array.from(list.querySelectorAll('.ecfg-col-item'));
                if (items.indexOf(dragSrc) < items.indexOf(item)) {
                    list.insertBefore(dragSrc, item.nextSibling);
                } else {
                    list.insertBefore(dragSrc, item);
                }
            }
        });

        return item;
    }

    function renderModal(columns) {
        while (list.firstChild) list.removeChild(list.firstChild);
        phCount = 0;
        columns.forEach(function(col) {
            if (col.type === 'placeholder') phCount++;
            list.appendChild(makeItem(col));
        });
    }

    window.openConfigModal = function() {
        fetch('/api/export-config')
            .then(function(r) { return r.json(); })
            .then(function(data) {
                renderModal(data.columns);
                modal.style.display = 'flex';
            });
    };

    window.closeConfigModal = function() {
        modal.style.display = 'none';
    };

    window.addPlaceholderCol = function() {
        phCount++;
        list.appendChild(makeItem({
            key: 'ph_' + phCount, label: '',
            visible_dashboard: false, visible_export: true, type: 'placeholder'
        }));
    };

    window.saveExportConfig = function() {
        var items   = Array.from(list.querySelectorAll('.ecfg-col-item'));
        var columns = items.map(function(item) {
            var cbDash = item.querySelector('.ecfg-cb-dash');
            var cbExp  = item.querySelector('.ecfg-cb-exp');
            var type   = item.dataset.type;
            var key    = item.dataset.key;
            if (type === 'placeholder') {
                var label = (item.querySelector('.ecfg-ph-input').value || '').trim() || 'Column';
                return { key: key, label: label,
                         visible_dashboard: false,
                         visible_export: cbExp ? cbExp.checked : true,
                         type: 'placeholder' };
            }
            return { key: key,
                     label: item.querySelector('.ecfg-col-label').textContent,
                     visible_dashboard: cbDash ? cbDash.checked : true,
                     visible_export: cbExp ? cbExp.checked : true,
                     type: 'data' };
        });
        fetch('/api/export-config', {
            method: 'PUT',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({columns: columns}),
        }).then(function(resp) {
            if (resp.ok) { closeConfigModal(); location.reload(); }
        });
    };

    // Close on overlay click
    modal.addEventListener('click', function(e) {
        if (e.target === modal) closeConfigModal();
    });
})();
</script>

<!-- Right-click context menu -->
<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 invoices?</h3>
        <p style="font-size:.875rem; color:var(--muted); margin:0 0 .75rem;">
            This will permanently delete the selected invoice(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>

<script>
/* ── Row selection + context menu + delete ────────────────────── */
(function () {
    'use strict';

    var selectedIds    = new Set();
    var lastClickedRow = null;
    var table          = document.getElementById('invoice-table');
    if (!table) return;

    table.addEventListener('click', function (e) {
        if (e.target.closest('.category-cell, .project-cell, .frequency-cell, .validated-cell, .btn-icon, .open-modal')) return;

        var row = e.target.closest('tr[data-id]');
        if (!row) { clearSelection(); return; }

        if (e.shiftKey && lastClickedRow) {
            var rows = Array.from(table.querySelectorAll('tbody tr[data-id]'));
            var a = rows.indexOf(lastClickedRow);
            var b = rows.indexOf(row);
            var from = Math.min(a, b), to = Math.max(a, b);
            if (!e.ctrlKey && !e.metaKey) clearSelection();
            rows.slice(from, to + 1).forEach(selectRow);
        } else if (e.ctrlKey || e.metaKey) {
            toggleRow(row);
        } else {
            clearSelection();
            selectRow(row);
        }
        lastClickedRow = row;
    });

    document.addEventListener('click', function (e) {
        if (!e.target.closest('#invoice-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) {
        if (selectedIds.has(row.dataset.id)) {
            selectedIds.delete(row.dataset.id);
            row.classList.remove('row-selected');
        } else {
            selectRow(row);
        }
    }

    function clearSelection() {
        selectedIds.clear();
        table.querySelectorAll('.row-selected').forEach(function (r) { r.classList.remove('row-selected'); });
        lastClickedRow = null;
    }

    var ctxMenu   = document.getElementById('ctx-menu');
    var ctxDelBtn = document.getElementById('ctx-delete-btn');

    table.addEventListener('contextmenu', function (e) {
        var row = e.target.closest('tr[data-id]');
        if (!row) return;
        e.preventDefault();

        if (!selectedIds.has(row.dataset.id)) {
            clearSelection();
            selectRow(row);
            lastClickedRow = row;
        }

        var count = selectedIds.size;
        ctxDelBtn.textContent = count === 1
            ? '\uD83D\uDDD1 Delete invoice'
            : '\uD83D\uDDD1 Delete ' + count + ' invoices';

        ctxMenu.style.display = 'block';
        ctxMenu.style.left    = e.clientX + 'px';
        ctxMenu.style.top     = e.clientY + 'px';
    });

    document.addEventListener('click', function () { ctxMenu.style.display = 'none'; });
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') ctxMenu.style.display = 'none';
    });

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

    var deleteModal      = document.getElementById('delete-modal');
    var deleteList       = document.getElementById('delete-modal-list');
    var deleteCancelBtn  = document.getElementById('delete-cancel-btn');
    var deleteConfirmBtn = document.getElementById('delete-confirm-btn');

    function openDeleteModal() {
        deleteList.replaceChildren();
        selectedIds.forEach(function (id) {
            var row     = table.querySelector('tr[data-id="' + id + '"]');
            var pdfNum  = row ? (row.dataset.pdfNumber || id) : id;
            var company = row ? (row.dataset.company  || '') : '';
            var li = document.createElement('li');
            li.textContent = '#' + pdfNum + (company ? ' \u2014 ' + company : '');
            deleteList.appendChild(li);
        });
        deleteModal.style.display = 'flex';
    }

    deleteCancelBtn.addEventListener('click', function () {
        deleteModal.style.display = 'none';
    });

    deleteConfirmBtn.addEventListener('click', async function () {
        var ids = Array.from(selectedIds).map(Number);
        deleteModal.style.display = 'none';

        try {
            var resp = await fetch('/invoices/api/bulk', {
                method: 'DELETE',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ ids: ids }),
            });
            var data = await resp.json();

            if (!data.ok) {
                alert('Delete failed: ' + (data.error || 'Unknown error'));
                return;
            }

            ids.forEach(function (id) {
                var row = table.querySelector('tr[data-id="' + id + '"]');
                if (row) row.remove();
            });
            clearSelection();

            if (window.refreshCharts)        window.refreshCharts();
            if (window.refreshCashflowHealth) window.refreshCashflowHealth();
            if (window.refreshPaymentDelay)  window.refreshPaymentDelay();

            var badge = document.querySelector('.page-header .badge');
            if (badge) {
                var current = parseInt(badge.textContent, 10) || 0;
                badge.textContent = Math.max(0, current - data.deleted) + ' matching';
            }

            if (table.querySelectorAll('tbody tr[data-id]').length === 0) {
                location.reload();
            }

            if (data.not_found_pdfs && data.not_found_pdfs.length) {
                alert('Deleted. PDF not found on disk for: ' + data.not_found_pdfs.join(', '));
            }
        } catch (err) {
            console.error('Delete error:', err);
            alert('Delete failed. Check the console for details.');
        }
    });
})();
</script>
{% endblock %}