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

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

<!-- ── License ────────────────────────────────── -->
<div class="card" id="license-card">
    <h3>License</h3>
    <div id="license-status" style="margin-bottom:1rem;">
        <span style="font-size:.875rem; color:var(--muted);">Checking license status…</span>
    </div>
    <div class="form-row" style="gap:.5rem;">
        <input type="text" id="license-key-input"
               placeholder="XXXX-XXXX-XXXX-XXXX" maxlength="19"
               autocomplete="off" spellcheck="false"
               style="flex:1; padding:.45rem .75rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.9rem; font-family:'Consolas','Courier New',monospace; letter-spacing:2px; text-transform:uppercase; text-align:center;">
        <button type="button" class="btn btn-primary" id="btn-license-activate" onclick="activateLicense()">Activate</button>
        <button type="button" class="btn" id="btn-license-deactivate" onclick="deactivateLicense()" style="display:none; color:var(--error); border-color:var(--error);">Remove</button>
    </div>
</div>

<form method="post">
    <!-- Data Storage -->
    <div class="card">
        <h3>Data Storage</h3>

        <!-- PDF Storage Folder -->
        <div style="margin-bottom:1.25rem;">
            <div style="font-size:.8rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.4rem;">PDF Storage Folder</div>
            <div class="form-row">
                <input type="text" name="pdf_storage_folder" value="{{ pdf_storage_folder }}"
                       placeholder="E:\Invoices\Storage"
                       style="flex:1; padding:.45rem .75rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.9rem; font-family:monospace;">
            </div>
            <p style="margin-top:.4rem; font-size:.8rem; color:var(--muted);">
                Where uploaded PDFs are saved. Organised automatically as
                <code>StorageFolder\YYYY\MM\</code>
            </p>
            {% if pdf_storage_folder %}
            <div style="margin-top:.5rem; padding:.4rem .75rem; background:var(--bg); border-radius:var(--radius); font-family:monospace; font-size:.82rem;">
                ✅ {{ pdf_storage_folder }}
            </div>
            {% endif %}
        </div>

        <!-- Database Location -->
        <div>
            <div style="font-size:.8rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.4rem;">Database Location</div>
            <div class="form-row" style="align-items:center; gap:.5rem;">
                <input type="text" id="db-folder-input" value="{{ db_folder }}"
                       placeholder="e.g. E:\MyData\BILLS"
                       style="flex:1; padding:.45rem .75rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.9rem; font-family:monospace;">
                <button type="button" class="btn btn-primary" onclick="moveDatabase()" style="white-space:nowrap;">Move DB</button>
                <button type="button" class="btn" onclick="openDbFolder()" title="Open current folder">📁</button>
            </div>
            <p style="margin-top:.4rem; font-size:.8rem; color:var(--muted);">
                Current file: <code style="font-size:.82rem;">{{ db_path }}</code>.
                Change the folder above and click <em>Move DB</em> to copy the database there.
                Restart the app for the new location to take effect.
            </p>
        </div>
    </div>

    <!-- ── Network (LAN access for mobile camera) ──────────────────── -->
    <div class="card" id="network-card">
        <h3>Network &amp; Mobile Access</h3>
        <p style="font-size:.85rem; color:var(--muted); margin:0 0 1rem;">
            By default, BILLS only accepts connections from this PC.
            Enable LAN access to use BILLS from your phone (e.g. to upload
            receipt photos directly with the camera).
        </p>

        <label style="display:flex; align-items:center; gap:.5rem; margin-bottom:.75rem; cursor:pointer;">
            <input type="checkbox" name="bind_lan" id="bind-lan-toggle"
                   {% if bind_lan %}checked{% endif %}
                   style="width:1rem; height:1rem;">
            <span>Allow phone access (LAN) — <strong>requires app restart</strong> to take effect</span>
        </label>

        <div id="network-info" style="margin-top:.5rem; padding:.75rem;
             background:var(--surface-alt,#f9fafb); border:1px solid var(--border);
             border-radius:var(--radius); font-size:.85rem;">
            <span style="color:var(--muted);">Loading network info…</span>
        </div>

        <p style="margin-top:.75rem; font-size:.78rem; color:var(--muted);">
            ⚠ When LAN access is on, anyone on the same Wi-Fi network can reach BILLS at
            this URL. Use only on trusted networks and deactivate when not used.
        </p>
    </div>

    <!-- Running PDF ID -->
    <div class="card">
        <h3>Running PDF ID</h3>
        <div class="form-row" style="align-items:center; gap:1rem;">
            <label style="display:flex; align-items:center; gap:.5rem; font-size:.875rem; cursor:pointer;">
                <input type="checkbox" name="use_pdf_id" {% if use_pdf_id %}checked{% endif %}
                       style="width:1rem; height:1rem;">
                Enable automatic ID in filename
            </label>
        </div>
        <div class="form-row" style="margin-top:.75rem; align-items:center; gap:1.5rem;">
            <label style="font-size:.875rem; color:var(--muted); white-space:nowrap;">Position:</label>
            <label style="display:flex; align-items:center; gap:.4rem; font-size:.875rem; cursor:pointer;">
                <input type="radio" name="pdf_id_position" value="prefix"
                       {% if pdf_id_position == 'prefix' %}checked{% endif %}>
                Prefix &nbsp;<code>1568_filename.pdf</code>
            </label>
            <label style="display:flex; align-items:center; gap:.4rem; font-size:.875rem; cursor:pointer;">
                <input type="radio" name="pdf_id_position" value="suffix"
                       {% if pdf_id_position == 'suffix' %}checked{% endif %}>
                Suffix &nbsp;<code>filename_1568.pdf</code>
            </label>
        </div>
        <div class="form-row" style="margin-top:.75rem;">
            <label style="font-size:.875rem; color:var(--muted); white-space:nowrap;">Next ID:</label>
            <input type="number" name="next_pdf_id" value="{{ next_pdf_id }}" min="1"
                   style="width:120px; padding:.45rem .75rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.9rem; font-family:monospace;">
        </div>
        <p style="margin-top:.5rem; font-size:.8rem; color:var(--muted);">
            It auto-increments after each upload.
        </p>
    </div>

    <!-- CIF/NIF Ignore List -->
    <div class="card">
        <h3>CIF/NIF Ignore List</h3>
        <div class="form-row">
            <input type="text" name="ignore_vat_list" value="{{ ignore_vat_list }}"
                   placeholder="B12345678, A87654321"
                   style="flex:1; padding:.45rem .75rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.9rem; font-family:monospace;">
        </div>
        <p style="margin-top:.5rem; font-size:.8rem; color:var(--muted);">
            Comma-separated list of your own company CIF/NIF numbers.
            These will be excluded when extracting the invoice issuer's VAT number from PDFs.
        </p>
        {% if ignore_vat_list %}
        <div style="margin-top:.75rem; display:flex; gap:.4rem; flex-wrap:wrap;">
            {% for vat in ignore_vat_list.split(',') %}
            {% if vat.strip() %}
            <span class="badge" style="font-family:monospace; font-size:.82rem;">{{ vat.strip() }}</span>
            {% endif %}
            {% endfor %}
        </div>
        {% endif %}
    </div>

    <!-- ── Emitted Invoices ────────────────────────────────────── -->
    <div class="card" id="emitted-invoices-card">
        <h3>Emitted Invoices</h3>
        <p style="font-size:.8rem; color:var(--muted); margin:0 0 1rem;">
            Invoices you <em>issue</em> to clients (vs. invoices you <em>receive</em> from suppliers).
            Detected automatically from a marker in the filename; reconciled against
            positive (incoming) bank transactions.
        </p>

        <!-- Filename marker -->
        <div style="margin-bottom:1.25rem;">
            <div style="font-size:.8rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.4rem;">Filename Marker</div>
            <div class="form-row">
                <input type="text" name="emitted_marker" value="{{ emitted_marker }}"
                       placeholder="e.g. EMITIDA, MINE, OUT"
                       style="flex:1; padding:.45rem .75rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.9rem; font-family:monospace;">
            </div>
            <p style="margin-top:.4rem; font-size:.8rem; color:var(--muted);">
                Case-insensitive substring searched anywhere in the filename. If found, the invoice
                is tagged as <strong>emitted</strong>. Leave empty to disable the feature —
                all uploads default to <strong>received</strong>.
            </p>
            {% if emitted_marker %}
            <div style="margin-top:.5rem; padding:.4rem .75rem; background:var(--bg); border-radius:var(--radius); font-family:monospace; font-size:.82rem;">
                ✅ Marker: <strong>{{ emitted_marker }}</strong>
                &nbsp;·&nbsp; matches e.g. <code>1763_{{ emitted_marker }}_client.pdf</code>
            </div>
            {% endif %}
        </div>

        <!-- Default payment term -->
        <div>
            <div style="font-size:.8rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.4rem;">Default Payment Term</div>
            <div class="form-row" style="align-items:center; gap:.5rem;">
                <input type="number" name="default_payment_term_days" value="{{ default_payment_term_days }}"
                       min="0" max="365" step="1"
                       style="width:110px; padding:.45rem .75rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.9rem; font-family:monospace;">
                <span style="font-size:.875rem; color:var(--muted);">days after invoice date</span>
            </div>
            <p style="margin-top:.4rem; font-size:.8rem; color:var(--muted);">
                Fallback for computing when an emitted invoice is overdue.
                Used only when an invoice has no explicit due date set.
            </p>
        </div>

        <!-- Aging brackets for Dashboard cash-flow health -->
        <div style="margin-top:1rem;">
            <div style="font-size:.8rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.4rem;">Aging Brackets</div>
            <div class="form-row" style="align-items:center; gap:.5rem;">
                <input type="text" id="aging_brackets" name="aging_brackets"
                       value="{{ aging_brackets | default('30, 60, 90') }}"
                       pattern="^[0-9, ]+$"
                       title="Positive whole numbers separated by commas. 1–6 values."
                       style="width:220px; padding:.45rem .75rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.9rem; font-family:monospace;">
                <span style="font-size:.875rem; color:var(--muted);">days — comma-separated</span>
            </div>
            <p style="margin-top:.4rem; font-size:.8rem; color:var(--muted);">
                Cutoffs for the Dashboard&apos;s aging panel (unpaid-invoice buckets by days overdue).
                Default: <code>30, 60, 90</code> &rarr; <em>Not yet due · 0&ndash;30 · 31&ndash;60 · 61&ndash;90 · 90+</em>.
                <br>
                Preview: <span id="aging-preview" style="font-weight:500; color:var(--text, #0f172a);"></span>
            </p>
        </div>
    </div>


    <!-- Expense Categories -->
    <div class="card" id="categories-card">
        <h3>Expense Categories</h3>

        <!-- Add form -->
        <div class="form-row" style="align-items:center; gap:.5rem; margin-bottom:1rem;">
            <input type="text" id="new-cat-name" placeholder="Category name"
                   style="flex:1; padding:.4rem .65rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.875rem;">
            <input type="color" id="new-cat-color" value="#6366f1"
                   style="width:2.5rem; height:2.1rem; padding:.1rem; border:1px solid var(--border); border-radius:var(--radius); cursor:pointer; background:none;">
            <button type="button" class="btn btn-primary" onclick="addCategory()">Add</button>
        </div>

        <!-- Category list -->
        <div id="cat-list" style="display:flex; flex-wrap:wrap; gap:.4rem; min-height:1.5rem;">
            <span style="font-size:.875rem; color:var(--muted);" id="cat-empty">Loading&#8230;</span>
        </div>

        <div style="margin-top:.75rem; display:flex; align-items:center; gap:.65rem;">
            <button type="button" class="btn" id="apply-palette-btn" onclick="applyPaletteToCategories()">Apply Palette Colors</button>
            <span style="font-size:.78rem; color:var(--muted);">Assigns the Company Chart Colors palette to categories, sorted by invoice count.</span>
        </div>
    </div>

    <!-- Project Names -->
    <div class="card" id="projects-card">
        <h3>Project Names</h3>

        <!-- Add form -->
        <div class="form-row" style="align-items:center; gap:.5rem; margin-bottom:1rem;">
            <input type="text" id="new-proj-name" placeholder="Project name"
                   style="flex:1; padding:.4rem .65rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.875rem;">
            <input type="color" id="new-proj-color" value="#6366f1"
                   style="width:2.5rem; height:2.1rem; padding:.1rem; border:1px solid var(--border); border-radius:var(--radius); cursor:pointer; background:none;">
            <button type="button" class="btn btn-primary" onclick="addProject()">Add</button>
        </div>

        <!-- Project list -->
        <div id="proj-list" style="display:flex; flex-wrap:wrap; gap:.4rem; min-height:1.5rem;">
            <span style="font-size:.875rem; color:var(--muted);" id="proj-loading">Loading&#8230;</span>
        </div>

        <div style="margin-top:.75rem; display:flex; align-items:center; gap:.65rem;">
            <button type="button" class="btn" id="apply-palette-btn-proj" onclick="applyPaletteToProjects()">Apply Palette Colors</button>
            <span style="font-size:.78rem; color:var(--muted);">Assigns the Company Chart Colors palette to projects, sorted by invoice count.</span>
        </div>
    </div>

    <!-- Export Format -->
    <div class="card" id="export-format-card">
        <h3>Export Format</h3>
        <div style="display:flex; gap:1rem; flex-wrap:wrap; font-size:.875rem;">
            <label style="display:flex; align-items:center; gap:.4rem; cursor:pointer;">
                <input type="radio" name="export-fmt" value="xlsx" id="fmt-xlsx"> Excel (.xlsx)
            </label>
            <label style="display:flex; align-items:center; gap:.4rem; cursor:pointer;">
                <input type="radio" name="export-fmt" value="ods" id="fmt-ods"> LibreOffice (.ods)
            </label>
            <label style="display:flex; align-items:center; gap:.4rem; cursor:pointer;">
                <input type="radio" name="export-fmt" value="csv" id="fmt-csv"> CSV (.csv)
            </label>
        </div>
        <p style="font-size:.78rem; color:var(--muted); margin-top:.5rem;">
            Applies to all exports from the Dashboard.
        </p>
    </div>

    <!-- OCR Languages -->
    <div class="card" id="ocr-languages-card">
        <h3>OCR Languages</h3>
        <p style="font-size:.82rem; color:var(--muted); margin-bottom:.75rem;">
            Tesseract trained-data files used when extracting text from scanned PDFs.
            New languages are downloaded from the official tessdata repository
            (~10–25 MB each).
        </p>

        <div id="ocr-tessdata-path" style="font-size:.78rem; color:var(--muted); margin-bottom:.75rem;">
            Locating tessdata folder…
        </div>

        <!-- Installed languages -->
        <div style="font-size:.8rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:.4rem;">
            Installed
        </div>
        <div id="ocr-installed-list" style="display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; min-height:1.6rem;">
            <span style="font-size:.85rem; color:var(--muted);">Loading…</span>
        </div>

        <!-- Install new -->
        <div style="font-size:.8rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:.4rem;">
            Install a Language
        </div>
        <div style="display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-bottom:.75rem;">
            <select id="ocr-lang-select" style="padding:.35rem .5rem; font-size:.85rem;">
                <option value="">— pick a common language —</option>
            </select>
            <span style="font-size:.85rem; color:var(--muted);">or</span>
            <input type="text" id="ocr-lang-custom" placeholder="custom code (e.g. eus)"
                   style="padding:.35rem .5rem; font-size:.85rem; width:11rem;"
                   maxlength="10">
            <button type="button" class="btn btn-primary" id="ocr-install-btn"
                    style="font-size:.85rem; padding:.35rem .8rem;">Install</button>
            <span id="ocr-install-status" style="font-size:.82rem; color:var(--muted);"></span>
        </div>

        <!-- Active language string -->
        <div style="font-size:.8rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-top:1rem; margin-bottom:.4rem;">
            Active OCR Languages
        </div>
        <div style="display:flex; gap:.5rem; flex-wrap:wrap; align-items:center;">
            <input type="text" id="ocr-lang-active" placeholder="spa+deu+eng+fra"
                   style="padding:.35rem .5rem; font-size:.85rem; min-width:18rem;">
            <button type="button" class="btn" id="ocr-active-save"
                    style="font-size:.85rem; padding:.35rem .8rem;">Save</button>
            <span id="ocr-active-status" style="font-size:.82rem; color:var(--muted);"></span>
        </div>
        <p style="font-size:.76rem; color:var(--muted); margin-top:.4rem;">
            Codes joined by <code>+</code>. Only installed languages should be listed
            — using a missing one will make OCR fail.
        </p>
    </div>

    <!-- Company Chart Colors -->
    <div class="card" id="company-palette-card">
        <h3>Company Chart Colors</h3>
        <p style="font-size:.82rem; color:var(--muted); margin-bottom:.75rem;">
            Palette used for "By Company" doughnut and bar charts on the Dashboard.
        </p>
        <!-- Preset buttons rendered by JS -->
        <div id="palette-presets" style="display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.75rem;"></div>
        <!-- Custom stops (shown when Custom selected) -->
        <div id="palette-custom-section" style="display:none; margin-top:.25rem;">
            <div style="font-size:.8rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:.4rem;">
                Color Stops (2–5 stops, interpolated to 10 colors)
            </div>
            <div id="palette-stops" style="display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-bottom:.5rem;"></div>
            <button type="button" class="btn" id="palette-add-stop"
                    style="font-size:.8rem; padding:.3rem .6rem;">+ Add Stop</button>
            <div style="font-size:.8rem; color:var(--muted); margin:.5rem 0 .25rem;">
                Preview (10 interpolated colors)
            </div>
            <div id="palette-preview" style="display:flex; gap:.3rem; flex-wrap:wrap; min-height:20px;"></div>
        </div>
    </div>

    <!-- Bank Matching -->
    <div class="card" id="matching-card">
        <h3>Bank Matching</h3>

        <div class="form-row" style="margin-bottom:1rem;">
            <label style="display:flex; align-items:center; gap:.5rem; font-size:.875rem; cursor:pointer;">
                <input type="checkbox" name="match_manual_only" id="match-manual-only"
                       {% if match_manual_only == 'true' %}checked{% endif %}
                       style="width:1rem; height:1rem;">
                Manual matching only (disable auto-matching)
            </label>
        </div>

        <div id="matching-params" style="{% if match_manual_only == 'true' %}opacity:.45; pointer-events:none;{% endif %}">
            <div style="display:grid; grid-template-columns:1fr 1fr; gap:.75rem;">
                <div>
                    <label style="font-size:.8rem; color:var(--muted); display:block; margin-bottom:.25rem;">Amount tolerance (€)</label>
                    <input type="text" name="match_amount_tolerance" value="{{ match_amount_tolerance }}"
                           style="width:100%; padding:.4rem .65rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.875rem; font-family:monospace;">
                </div>
                <div>
                    <label style="font-size:.8rem; color:var(--muted); display:block; margin-bottom:.25rem;">Date window (days)</label>
                    <input type="text" name="match_date_window" value="{{ match_date_window }}"
                           style="width:100%; padding:.4rem .65rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.875rem; font-family:monospace;">
                </div>
                <div>
                    <label style="font-size:.8rem; color:var(--muted); display:block; margin-bottom:.25rem;">Auto-match threshold</label>
                    <input type="text" name="match_auto_threshold" value="{{ match_auto_threshold }}"
                           style="width:100%; padding:.4rem .65rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.875rem; font-family:monospace;">
                </div>
                <div>
                    <label style="font-size:.8rem; color:var(--muted); display:block; margin-bottom:.25rem;">Ambiguous threshold</label>
                    <input type="text" name="match_ambiguous_threshold" value="{{ match_ambiguous_threshold }}"
                           style="width:100%; padding:.4rem .65rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.875rem; font-family:monospace;">
                </div>
                <div>
                    <label style="font-size:.8rem; color:var(--muted); display:block; margin-bottom:.25rem;">Score gap (auto-match 2+ candidates)</label>
                    <input type="text" name="match_score_gap" value="{{ match_score_gap }}"
                           style="width:100%; padding:.4rem .65rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.875rem; font-family:monospace;">
                </div>
                <div>
                    <label style="font-size:.8rem; color:var(--muted); display:block; margin-bottom:.25rem;">Weight: date</label>
                    <input type="text" name="match_w_date" value="{{ match_w_date }}"
                           style="width:100%; padding:.4rem .65rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.875rem; font-family:monospace;">
                </div>
                <div>
                    <label style="font-size:.8rem; color:var(--muted); display:block; margin-bottom:.25rem;">Weight: name</label>
                    <input type="text" name="match_w_name" value="{{ match_w_name }}"
                           style="width:100%; padding:.4rem .65rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.875rem; font-family:monospace;">
                </div>
            </div>
            <p style="margin-top:.65rem; font-size:.78rem; color:var(--muted);">
                Weights must sum to 1.0. Auto-match fires when a single candidate (or a clear winner by score gap) exceeds the auto threshold.
            </p>
        </div>
    </div>

    <!-- ── Exclusion Rules (v0.12.0) ─────────────────────────────────── -->
    <div class="card" id="exclusion-rules-card">
        <h3>Exclusion Rules</h3>
        <p style="font-size:.85rem; color:var(--muted); margin:0 0 1rem;">
            Auto-exclude movements from the "Missing Invoice" workflow — for
            transactions that will never have an invoice (salaries, taxes,
            transfers, loan repayments). Excluded movements stay in the
            database; they just don't show up in chase-up lists.
        </p>

        <!-- Add new rule -->
        <div style="display:grid; grid-template-columns: 1fr 1fr 2fr auto; gap:.5rem; margin-bottom:1rem;">
            <select id="new-rule-field"
                    style="padding:.4rem .65rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.875rem;">
                <option value="issuer">Issuer (company)</option>
                <option value="description">Description</option>
                <option value="movement_type">Movement type</option>
                <option value="category">Category</option>
                <option value="direction">Direction</option>
            </select>
            <select id="new-rule-operator"
                    style="padding:.4rem .65rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.875rem;">
                <option value="contains">contains</option>
                <option value="equals">equals</option>
                <option value="regex">matches regex</option>
            </select>
            <input type="text" id="new-rule-value" placeholder="Value (e.g. NÓMINA)"
                   style="padding:.4rem .65rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.875rem; font-family:monospace;">
            <button type="button" class="btn btn-primary" onclick="createExclusionRule()">Add</button>
        </div>

        <!-- Rules list -->
        <div id="exclusion-rules-list" style="display:flex; flex-direction:column; gap:.5rem; min-height:1.5rem;">
            <span style="font-size:.875rem; color:var(--muted);" id="exclusion-rules-empty">Loading…</span>
        </div>

        <p style="margin-top:.75rem; font-size:.78rem; color:var(--muted);">
            Tip: you can also create rules with one click from the Movements page —
            right-click any movement row.
        </p>
    </div>

    <!-- Bank Templates -->
    <div class="card" id="bank-templates-card">
        <h3>Bank Templates</h3>
        <p style="font-size:.85rem; color:var(--muted); margin-bottom:1rem;">
            Define column mappings for your bank's XLSX/CSV export. This lets you import statements from any bank.
        </p>

        <div id="bt-list" style="margin-bottom:1rem;">
            <span style="font-size:.85rem; color:var(--muted);">Loading…</span>
        </div>

        <button type="button" class="btn btn-primary" onclick="btStartNew()">+ New Template</button>

        <!-- Detection modal (hidden until needed) -->
        <div id="bt-modal" hidden style="margin-top:1.25rem; border:1px solid var(--border); border-radius:var(--radius); padding:1rem;">
            <h4 style="margin-bottom:.75rem; font-size:.9rem;">Create Bank Template</h4>

            <!-- Step 1: upload sample -->
            <div id="bt-step1">
                <label style="font-size:.85rem; color:var(--muted); display:block; margin-bottom:.5rem;">Upload a sample file from your bank:</label>
                <input type="file" id="bt-sample-file" accept=".xlsx,.xls,.csv" style="font-size:.85rem;">
                <button type="button" class="btn" style="margin-left:.5rem;" onclick="btDetect()">Detect Columns</button>
            </div>

            <!-- Step 2: preview + mapping -->
            <div id="bt-step2" hidden>
                <p style="font-size:.85rem; color:var(--muted); margin-bottom:.75rem;">
                    Click a row to set it as the <strong>header row</strong>, then map each column.
                </p>
                <div id="bt-preview" class="table-wrapper" style="max-height:220px; overflow:auto; margin-bottom:1rem; font-size:.8rem;"></div>
                <div id="bt-mapping" style="margin-bottom:1rem;"></div>
                <div class="form-row" style="gap:.75rem; margin-bottom:.75rem;">
                    <div style="flex:1;">
                        <label style="font-size:.8rem; color:var(--muted); display:block; margin-bottom:.25rem;">Template name</label>
                        <input type="text" id="bt-name" placeholder="e.g. BBVA Business Account"
                               style="width:100%; padding:.4rem .65rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.875rem;">
                    </div>
                    <div style="flex:1;">
                        <label style="font-size:.8rem; color:var(--muted); display:block; margin-bottom:.25rem;">Description (optional)</label>
                        <input type="text" id="bt-desc" placeholder="e.g. Current account EUR"
                               style="width:100%; padding:.4rem .65rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.875rem;">
                    </div>
                </div>
                <button type="button" class="btn btn-primary" onclick="btSave()">Save Template</button>
                <button type="button" class="btn" onclick="btCancel()">Cancel</button>
            </div>
        </div>
    </div>

    <div style="height:1.5rem;">
        <span id="autosave-indicator" style="font-size:.85rem; color:#16a34a; opacity:0; transition:opacity .3s;"></span>
    </div>
</form>

<!-- Bottom row: Backup + Danger Zone -->
<div style="display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.5rem;">

    <!-- Backup Database -->
    <div class="card">
        <h3>Backup Database</h3>
        <p style="font-size:.875rem; color:var(--muted); margin-bottom:1rem;">
            Download a copy of your database. Your browser will prompt you for a save location.
        </p>
        <a href="{{ url_for('settings.backup_db') }}" class="btn">⬇ Download Backup</a>
    </div>

    <!-- Danger Zone -->
    <div class="card" style="border-color:#fca5a5;">
        <h3 style="color:var(--error);">Danger Zone</h3>
        <p style="font-size:.875rem; color:var(--muted); margin-bottom:1rem;">
            Wipes all invoices and bank rows. Settings, bank templates, expense
            categories and project names are preserved.
        </p>
        <form method="post" action="{{ url_for('settings.reset_db') }}"
              onsubmit="return confirm('Delete ALL invoice data? This cannot be undone.');">
            <button type="submit" class="btn" style="background:var(--error); color:white; border-color:var(--error);">
                ⚠ Reset Database
            </button>
        </form>
    </div>

</div>

<script>
/* ── Aging brackets live preview ─────────────────────────────────────
   Mirrors the server-side logic in _aging_labels() exactly: given N
   sorted positive cutoffs [a,b,c,...], the buckets are:
     Not yet due · 0–a · a+1–b · b+1–c · ... · last+. */
(function () {
    var input   = document.getElementById('aging_brackets');
    var preview = document.getElementById('aging-preview');
    if (!input || !preview) return;

    function parse(raw) {
        return raw.split(',')
            .map(function (s) { return parseInt(s.trim(), 10); })
            .filter(function (n) { return Number.isFinite(n) && n > 0; });
    }
    function uniqueSorted(arr) {
        return Array.from(new Set(arr)).sort(function (a, b) { return a - b; });
    }
    function labelsFor(brackets) {
        if (!brackets.length) return null;
        var out  = ['Not yet due'];
        var prev = 0;
        brackets.forEach(function (b) {
            out.push(prev ? (prev + 1) + '–' + b : '0–' + b);
            prev = b;
        });
        out.push(brackets[brackets.length - 1] + '+');
        return out;
    }
    function render() {
        var brackets = uniqueSorted(parse(input.value));
        if (brackets.length === 0) {
            preview.textContent = '(need at least one positive value)';
            preview.style.color = 'var(--error, #dc2626)';
            return;
        }
        if (brackets.length > 6) {
            preview.textContent = '(maximum 6 values)';
            preview.style.color = 'var(--error, #dc2626)';
            return;
        }
        preview.textContent = labelsFor(brackets).join(' · ');
        preview.style.color = '';
    }
    input.addEventListener('input', render);
    render();   // initial render from the pre-filled value
})();
</script>

<script>
document.getElementById('match-manual-only').addEventListener('change', function () {
    const params = document.getElementById('matching-params');
    if (this.checked) {
        params.style.opacity = '.45';
        params.style.pointerEvents = 'none';
    } else {
        params.style.opacity = '1';
        params.style.pointerEvents = '';
    }
});

/* ── Auto-save settings ── */
(function () {
    var indicator = document.getElementById('autosave-indicator');
    var fadeTimer = null;

    function showSaved() {
        indicator.textContent = '✓ Saved';
        indicator.style.opacity = '1';
        clearTimeout(fadeTimer);
        fadeTimer = setTimeout(function () { indicator.style.opacity = '0'; }, 2500);
    }

    function autoSave() {
        var form = document.querySelector('form[method="post"]');
        var data = new FormData(form);
        data.append('_autosave', '1');
        fetch('', { method: 'POST', body: data })
            .then(function (r) {
                if (r.ok) { showSaved(); return; }
                // Validation error — show first server message briefly
                return r.json().then(function (data) {
                    var msg = (data.errors && data.errors[0]) || 'Save failed';
                    indicator.textContent = '✗ ' + msg;
                    indicator.style.color = '#dc2626';
                    indicator.style.opacity = '1';
                    clearTimeout(fadeTimer);
                    fadeTimer = setTimeout(function () {
                        indicator.style.opacity = '0';
                        indicator.style.color = '#16a34a';   // reset for next ✓
                    }, 4000);
                }).catch(function () {});
            })
            .catch(function () {});
    }

    var form = document.querySelector('form[method="post"]');
    form.querySelectorAll('input[type="text"], input[type="number"]').forEach(function (el) {
        el.addEventListener('blur', autoSave);
        el.addEventListener('keydown', function (e) {
            if (e.key === 'Enter') { e.preventDefault(); autoSave(); }
        });
    });
    form.querySelectorAll('input[type="checkbox"]').forEach(function (el) {
        el.addEventListener('change', autoSave);
    });
}());

/* ── License ── */
document.getElementById('license-key-input').addEventListener('input', function () {
    const raw = this.value.replace(/[^A-Z0-9]/gi, '').toUpperCase().slice(0, 16);
    const parts = [];
    for (let i = 0; i < raw.length; i += 4) parts.push(raw.slice(i, i + 4));
    this.value = parts.join('-');
});

(async function loadLicenseStatus() {
    const statusEl     = document.getElementById('license-status');
    const keyInput     = document.getElementById('license-key-input');
    const activateBtn  = document.getElementById('btn-license-activate');
    const deactivateBtn = document.getElementById('btn-license-deactivate');

    /** Escape HTML to prevent XSS from server-supplied strings. */
    function esc(str) {
        return String(str ?? '')
            .replace(/&/g,'&amp;').replace(/</g,'&lt;')
            .replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    }

    try {
        const res = await fetch('/api/license/status');
        const s   = await res.json();

        if (s.activated) {
            // Format expiry date readably (ISO → locale)
            let expiry = '—';
            if (s.expires_at) {
                try {
                    expiry = new Date(s.expires_at).toLocaleDateString(undefined, {
                        year: 'numeric', month: 'short', day: 'numeric'
                    });
                } catch (_) { expiry = s.expires_at; }
            }

            // Build detail rows — only render rows where we have data
            const rows = [
                s.customer_name  ? ['Name',     s.customer_name]  : null,
                s.customer_email ? ['Email',    s.customer_email] : null,
                                   ['Type',     (s.license_type || 'standard').charAt(0).toUpperCase() + (s.license_type || 'standard').slice(1)],
                                   ['Expires',  expiry],
                s.max_machines != null ? ['Machines', s.max_machines] : null,
                                   ['Key',      s.license_key_masked || '—'],
            ].filter(Boolean);

            const rowsHtml = rows.map(([label, val]) => `
                <div>
                    <div style="font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:.15rem;">${label}</div>
                    <div style="font-size:.85rem;">${esc(String(val))}</div>
                </div>`).join('');

            statusEl.innerHTML = `
                <div style="margin-bottom:.75rem;">
                    <span class="badge" style="background:#dcfce7;color:var(--success);border-color:#86efac;font-size:.78rem;">LICENSED</span>
                </div>
                <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.65rem 1.5rem;">
                    ${rowsHtml}
                </div>`;

            keyInput.style.display    = 'none';
            activateBtn.style.display = 'none';
            deactivateBtn.style.display = '';

        } else {
            statusEl.innerHTML = `<span style="font-size:.875rem;color:var(--muted);">${esc(s.message || 'No license key configured.')}</span>`;
            keyInput.style.display      = '';
            activateBtn.style.display   = '';
            deactivateBtn.style.display = 'none';
        }

    } catch (_) {
        statusEl.innerHTML = '<span style="font-size:.875rem;color:var(--warning);">Could not check license status.</span>';
    }
})();

async function activateLicense() {
    const input = document.getElementById('license-key-input');
    const key = input.value.trim().toUpperCase();
    if (key.length !== 19) { alert('Enter a complete key: XXXX-XXXX-XXXX-XXXX'); return; }
    const btn = document.getElementById('btn-license-activate');
    btn.disabled = true; btn.textContent = 'Activating…';
    try {
        const res = await fetch('/api/license/activate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key }) });
        const data = await res.json().catch(() => ({}));
        if (data.ok) { location.reload(); } else { alert(data.message || 'Activation failed.'); btn.disabled = false; btn.textContent = 'Activate'; }
    } catch (_) { alert('Could not reach the license server.'); btn.disabled = false; btn.textContent = 'Activate'; }
}

async function deactivateLicense() {
    if (!confirm('Remove this license from this machine?')) return;
    try {
        const res = await fetch('/api/license/deactivate', { method: 'DELETE' });
        const data = await res.json().catch(() => ({}));
        if (data.ok) { location.reload(); } else { alert('Failed to remove license.'); }
    } catch (_) { alert('Could not reach the server.'); }
}

    /* ── Bank Templates ──────────────────────────────────── */
let _btPreviewData = null;   // {preview, fields, num_columns}
let _btHeaderRow = 0;

async function btLoadList() {
    const el = document.getElementById('bt-list');
    try {
        const res = await fetch('/api/bank-templates');
        const d = await res.json();
        if (!d.templates.length) {
            el.innerHTML = '<p style="font-size:.85rem; color:var(--muted);">No templates yet. Create one to import from any bank.</p>';
            return;
        }
        el.innerHTML = d.templates.map(t => `
            <div style="display:flex; align-items:center; gap:.5rem; padding:.4rem 0; border-bottom:1px solid var(--border);">
                <span style="font-size:.85rem; flex:1;">
                    <strong>${t.name}</strong>
                    ${t.is_default ? '<span class="badge" style="font-size:.7rem; margin-left:.3rem;">Default</span>' : ''}
                    ${t.description ? '<span style="color:var(--muted);"> — ' + t.description + '</span>' : ''}
                </span>
                ${t.is_default ? '' : '<button class="btn" style="padding:.15rem .4rem; font-size:.75rem;" onclick="btSetDefault(' + t.id + ')">Set default</button>'}
                <button class="btn" style="padding:.15rem .4rem; font-size:.75rem; color:var(--error);" onclick="btDelete(${t.id}, \'${t.name}\')">Delete</button>
            </div>
        `).join('');
    } catch (e) {
        el.innerHTML = '<p style="font-size:.85rem; color:var(--error);">Error loading templates.</p>';
    }
}

function btStartNew() {
    document.getElementById('bt-modal').hidden = false;
    document.getElementById('bt-step1').hidden = false;
    document.getElementById('bt-step2').hidden = true;
    _btPreviewData = null;
    _btHeaderRow = 0;
}

function btCancel() {
    document.getElementById('bt-modal').hidden = true;
}

async function btDetect() {
    const fileInput = document.getElementById('bt-sample-file');
    if (!fileInput.files.length) { alert('Select a file first.'); return; }

    const fd = new FormData();
    fd.append('file', fileInput.files[0]);

    try {
        const res = await fetch('/api/bank-templates/detect', { method: 'POST', body: fd });
        const d = await res.json();
        if (d.error) { alert(d.error); return; }

        _btPreviewData = d;
        _btHeaderRow = 0;
        btRenderPreview();
        document.getElementById('bt-step1').hidden = true;
        document.getElementById('bt-step2').hidden = false;
    } catch (e) {
        alert('Detection failed: ' + e.message);
    }
}

function btRenderPreview() {
    const d = _btPreviewData;
    const container = document.getElementById('bt-preview');

    let html = '<table><tbody>';
    d.preview.forEach(r => {
        const isSel = r.row_index === _btHeaderRow;
        const style = isSel ? 'background:#dbeafe; font-weight:600; cursor:pointer;' : 'cursor:pointer;';
        html += `<tr style="${style}" onclick="btPickHeader(${r.row_index})">
            <td style="font-size:.75rem; color:var(--muted); width:2rem;">${r.row_index}</td>`;
        r.cells.forEach(c => { html += `<td style="padding:.3rem .5rem;">${c || '<span style="color:var(--border);">—</span>'}</td>`; });
        html += '</tr>';
    });
    html += '</tbody></table>';
    container.innerHTML = html;

    btRenderMapping();
}

function btPickHeader(idx) {
    _btHeaderRow = idx;
    btRenderPreview();
}

function btRenderMapping() {
    const d = _btPreviewData;
    const headerRow = d.preview.find(r => r.row_index === _btHeaderRow);
    if (!headerRow) return;

    const container = document.getElementById('bt-mapping');
    const opts = '<option value="">(skip)</option>' +
        d.fields.map(f => `<option value="${f.value}">${f.label}${f.required ? ' *' : ''}</option>`).join('');

    let html = '<div style="display:grid; grid-template-columns:1fr 1fr; gap:.5rem;">';
    headerRow.cells.forEach((cell, i) => {
        const label = cell || `Column ${i}`;
        html += `<div style="display:flex; align-items:center; gap:.5rem;">
            <span style="font-size:.82rem; flex:1; font-family:monospace;">${label}</span>
            <select class="bt-field-select" data-col="${i}"
                    style="padding:.25rem .5rem; border:1px solid var(--border); border-radius:var(--radius); font-size:.82rem;">
                ${opts}
            </select>
        </div>`;
    });
    html += '</div>';
    container.innerHTML = html;

    // Auto-guess: try matching header names to field labels
    document.querySelectorAll('.bt-field-select').forEach(sel => {
        const colName = headerRow.cells[parseInt(sel.dataset.col)] || '';
        const lower = colName.toLowerCase().trim();
        for (const f of d.fields) {
            if (lower === f.label.toLowerCase() || lower === f.value.replace('_', ' ')) {
                sel.value = f.value;
                break;
            }
        }
    });
}

async function btSave() {
    const name = document.getElementById('bt-name').value.trim();
    if (!name) { alert('Enter a template name.'); return; }

    const mapping = {};
    const headerRow = _btPreviewData.preview.find(r => r.row_index === _btHeaderRow);
    document.querySelectorAll('.bt-field-select').forEach(sel => {
        if (sel.value) mapping[sel.dataset.col] = sel.value;
    });

    try {
        const res = await fetch('/api/bank-templates', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                name: name,
                description: document.getElementById('bt-desc').value.trim(),
                column_mapping: mapping,
                original_headers: headerRow ? headerRow.cells : [],
                header_row: _btHeaderRow,
            }),
        });
        const d = await res.json();
        if (d.error) { alert(d.error); return; }
        btCancel();
        btLoadList();
    } catch (e) {
        alert('Save failed: ' + e.message);
    }
}

async function btSetDefault(id) {
    await fetch(`/api/bank-templates/${id}/set-default`, { method: 'POST' });
    btLoadList();
}

async function btDelete(id, name) {
    if (!confirm(`Delete template "${name}"?`)) return;
    await fetch(`/api/bank-templates/${id}`, { method: 'DELETE' });
    btLoadList();
}

// Load on page init
btLoadList();

async function openDbFolder() {
    await fetch('/settings/open-folder', { method: 'POST' });
}

function moveDatabase() {
    var folder = document.getElementById('db-folder-input').value.trim();
    if (!folder) return;
    if (!confirm('Copy the database to:\n' + folder + '\n\nThe app will need to restart after this.')) return;
    var f = document.createElement('form');
    f.method = 'post';
    f.action = '/settings/move-db';
    var inp = document.createElement('input');
    inp.type = 'hidden';
    inp.name = 'db_folder';
    inp.value = folder;
    f.appendChild(inp);
    document.body.appendChild(f);
    f.submit();
}

/* ── Expense Categories ── */
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 renderCategories(cats) {
    var list = document.getElementById('cat-list');
    while (list.firstChild) list.removeChild(list.firstChild);

    if (!cats.length) {
        var msg = document.createElement('span');
        msg.style.cssText = 'font-size:.875rem; color:var(--muted);';
        msg.textContent = 'No categories yet. Add one above.';
        list.appendChild(msg);
        return;
    }

    cats.forEach(function(cat) {
        var badge = document.createElement('span');
        badge.className = 'category-badge';
        badge.style.background  = _hexToRgba(cat.color, 0.18);
        badge.style.borderColor = cat.color;
        badge.style.color       = cat.color;

        var label = document.createElement('span');
        label.textContent = cat.name;

        var del = document.createElement('span');
        del.textContent = '\u00d7';
        del.style.cssText = 'cursor:pointer; margin-left:.2rem; font-size:.9em; opacity:.7;';
        del.setAttribute('data-cat-id', cat.id);
        del.addEventListener('click', function() { deleteCategory(cat.id); });

        badge.appendChild(label);
        badge.appendChild(del);
        list.appendChild(badge);
    });
}

async function loadCategories() {
    var resp = await fetch('/api/categories');
    var data = await resp.json();
    renderCategories(data.categories);
}

async function addCategory() {
    var nameEl  = document.getElementById('new-cat-name');
    var colorEl = document.getElementById('new-cat-color');
    var name    = nameEl.value.trim();
    var color   = colorEl.value;
    if (!name) { nameEl.focus(); return; }

    var resp = await fetch('/api/categories', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({name: name, color: color}),
    });
    if (resp.ok) {
        nameEl.value = '';
        await loadCategories();
    } else {
        var err = await resp.json().catch(function() { return {}; });
        alert(err.error || 'Failed to create category');
    }
}

async function deleteCategory(id) {
    if (!confirm('Delete this category? Assigned invoices will become uncategorized.')) return;
    await fetch('/api/categories/' + id, {method: 'DELETE'});
    await loadCategories();
}

function _interpPalette(palette, n) {
    if (!n) return [];
    if (n === 1) return [palette[0] || '#6366f1'];
    var seg = palette.length - 1;
    var out = [];
    for (var i = 0; i < n; i++) {
        var tg = i / (n - 1), sf = tg * seg;
        var si = Math.min(Math.floor(sf), seg - 1);
        var t = sf - si;
        var c1 = palette[si], c2 = palette[Math.min(si + 1, seg)];
        var parse = function(s, o) { return parseInt(s.slice(o, o + 2), 16); };
        var lerp  = function(a, b) { return Math.round(a + (b - a) * t); };
        out.push('#' + [lerp(parse(c1,1),parse(c2,1)), lerp(parse(c1,3),parse(c2,3)), lerp(parse(c1,5),parse(c2,5))].map(function(x) { return x.toString(16).padStart(2,'0'); }).join(''));
    }
    return out;
}

async function applyPaletteToCategories() {
    var btn = document.getElementById('apply-palette-btn');
    btn.disabled = true;
    btn.textContent = 'Applying…';
    try {
        var results = await Promise.all([
            fetch('/api/settings/company-palette').then(function(r) { return r.json(); }),
            fetch('/api/categories').then(function(r) { return r.json(); })
        ]);
        var colors = results[0].colors || [];
        var cats   = (results[1].categories || []).slice().sort(function(a, b) {
            return (b.invoice_count || 0) - (a.invoice_count || 0);
        });
        if (colors.length < 2) { alert('Palette needs at least 2 colors.'); return; }
        if (!cats.length)      { alert('No categories to apply palette to.'); return; }
        var assigned = _interpPalette(colors, cats.length);
        await Promise.all(cats.map(function(cat, i) {
            return fetch('/api/categories/' + cat.id, {
                method: 'PATCH',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({color: assigned[i]})
            });
        }));
        await loadCategories();
        btn.textContent = '✓ Applied';
        setTimeout(function() { btn.textContent = 'Apply Palette Colors'; btn.disabled = false; }, 2000);
    } catch (e) {
        alert('Failed to apply palette.');
        btn.textContent = 'Apply Palette Colors';
        btn.disabled = false;
    }
}

async function applyPaletteToProjects() {
    var btn = document.getElementById('apply-palette-btn-proj');
    btn.disabled = true;
    btn.textContent = 'Applying…';
    try {
        var results = await Promise.all([
            fetch('/api/settings/company-palette').then(function(r) { return r.json(); }),
            fetch('/api/projects').then(function(r) { return r.json(); })
        ]);
        var colors = results[0].colors || [];
        var projs  = (results[1].projects || []).slice().sort(function(a, b) {
            return (b.invoice_count || 0) - (a.invoice_count || 0);
        });
        if (colors.length < 2) { alert('Palette needs at least 2 colors.'); return; }
        if (!projs.length)     { alert('No projects to apply palette to.'); return; }
        var assigned = _interpPalette(colors, projs.length);
        await Promise.all(projs.map(function(proj, i) {
            return fetch('/api/projects/' + proj.id, {
                method: 'PATCH',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({color: assigned[i]})
            });
        }));
        await loadProjects();
        btn.textContent = '✓ Applied';
        setTimeout(function() { btn.textContent = 'Apply Palette Colors'; btn.disabled = false; }, 2000);
    } catch (e) {
        alert('Failed to apply palette.');
        btn.textContent = 'Apply Palette Colors';
        btn.disabled = false;
    }
}

/* ── Export format ── */
(async function() {
    var resp = await fetch('/api/export-config');
    var data = await resp.json();
    var fmt  = data.format || 'xlsx';
    var el   = document.getElementById('fmt-' + fmt);
    if (el) el.checked = true;

    document.querySelectorAll('input[name="export-fmt"]').forEach(function(radio) {
        radio.addEventListener('change', async function() {
            await fetch('/api/export-config', {
                method: 'PUT',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({format: radio.value}),
            });
        });
    });
})();

loadCategories();

/* ── Project Names ──
   Renders each project as a colored chip, matching the Expense Categories
   visual exactly. Reuses _hexToRgba() defined in the categories block. */
function renderProjects(projects) {
    var list = document.getElementById('proj-list');
    while (list.firstChild) list.removeChild(list.firstChild);

    if (!projects.length) {
        var msg = document.createElement('span');
        msg.style.cssText = 'font-size:.875rem; color:var(--muted);';
        msg.textContent = 'No projects yet. Add one above.';
        list.appendChild(msg);
        return;
    }

    projects.forEach(function(proj) {
        var color = proj.color || '#6366f1';

        var chip = document.createElement('span');
        chip.className = 'category-badge';
        chip.style.background  = _hexToRgba(color, 0.18);
        chip.style.borderColor = color;
        chip.style.color       = color;

        var label = document.createElement('span');
        label.textContent = proj.name;

        var del = document.createElement('span');
        del.textContent = '\u00d7';
        del.title = 'Delete';
        del.style.cssText = 'cursor:pointer; margin-left:.2rem; font-size:.9em; opacity:.7;';
        del.addEventListener('click', function() { deleteProject(proj.id); });

        chip.appendChild(label);
        chip.appendChild(del);
        list.appendChild(chip);
    });
}

async function loadProjects() {
    var resp = await fetch('/api/projects');
    var data = await resp.json();
    renderProjects(data.projects);
}

async function addProject() {
    var nameEl  = document.getElementById('new-proj-name');
    var colorEl = document.getElementById('new-proj-color');
    var name    = nameEl.value.trim();
    var color   = colorEl.value;
    if (!name) { nameEl.focus(); return; }

    var resp = await fetch('/api/projects', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({name: name, color: color}),
    });
    if (resp.ok) {
        nameEl.value = '';
        await loadProjects();
    } else {
        var err = await resp.json().catch(function() { return {}; });
        alert(err.error || 'Failed to create project');
    }
}

async function deleteProject(id) {
    if (!confirm('Delete this project?')) return;
    await fetch('/api/projects/' + id, {method: 'DELETE'});
    await loadProjects();
}

loadProjects();
</script>

<script>
/* ── Company Palette Picker ─────────────────────────────────── */
(function () {
    'use strict';

    var PRESET_DEFS = {
        'default': { label: 'Default',  colors: ['#36a2eb','#ff6384','#ffce56','#4bc0c0','#9966ff','#ff9f40','#c9cbcf','#7bc8a4','#f67019','#58595b'] },
        'tableau':  { label: 'Tableau',  colors: ['#4e79a7','#f28e2b','#e15759','#76b7b2','#59a14f','#edc948','#b07aa1','#ff9da7','#9c755f','#bab0ac'] },
        'material': { label: 'Material', colors: ['#f44336','#e91e63','#9c27b0','#3f51b5','#2196f3','#009688','#4caf50','#ff9800','#795548','#607d8b'] },
        'pastel':   { label: 'Pastel',   colors: ['#aec6cf','#ffd1dc','#b5ead7','#ffdac1','#c7ceea','#ff9aa2','#e2f0cb','#f0e6ef','#c1e1c5','#fae6b0'] },
        'warm':     { label: 'Warm',     colors: ['#d62728','#e6550d','#f16913','#fdae6b','#843c39','#ad494a','#d6616b','#e7969c','#ff7f0e','#fdd0a2'] },
        'cool':     { label: 'Cool',     colors: ['#1f77b4','#31a354','#756bb1','#aec7e8','#74c476','#9e9ac8','#636363','#a1d99b','#bcbddc','#969696'] },
    };

    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('');
    }

    function interpolateStops(stops, n) {
        if (stops.length < 2) return stops;
        var seg = stops.length - 1, out = [];
        for (var i = 0; i < n; i++) {
            var tg = i / (n - 1), sf = tg * seg;
            var si = Math.min(Math.floor(sf), seg - 1);
            out.push(hexInterp(stops[si], stops[Math.min(si + 1, seg)], sf - si));
        }
        return out;
    }

    function makeSwatch(color) {
        var s = document.createElement('span');
        s.style.cssText = 'display:inline-block;width:16px;height:16px;border-radius:50%;background:' + color + ';border:1px solid rgba(0,0,0,.1);flex-shrink:0;';
        return s;
    }

    // Remembers the last custom stops so they survive switching to a preset and back
    var customStops = ['#4e79a7', '#e15759'];

    function savePalette(cfg) {
        fetch('/api/settings/company-palette', {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(cfg),
        }).then(function(response) {
            if (!response.ok) {
                alert('Failed to save palette. Please try again.');
                return;
            }
            var card = document.getElementById('company-palette-card');
            var msg = document.createElement('span');
            msg.textContent = ' \u2713 Saved';
            msg.style.cssText = 'color:#16a34a; font-size:.82rem; margin-left:.5rem;';
            var h3 = card.querySelector('h3');
            var old = h3.querySelector('.palette-saved-msg');
            if (old) old.remove();
            msg.className = 'palette-saved-msg';
            h3.appendChild(msg);
            setTimeout(function() { if (msg.parentNode) msg.remove(); }, 3000);
        }).catch(function() {
            alert('Failed to save palette. Please try again.');
        });
    }

    var presetsEl  = document.getElementById('palette-presets');
    var customSect = document.getElementById('palette-custom-section');
    var stopsEl    = document.getElementById('palette-stops');
    var previewEl  = document.getElementById('palette-preview');
    var addStopBtn = document.getElementById('palette-add-stop');

    // ── Preset buttons ────────────────────────────────────────
    function renderPresets(activeName) {
        while (presetsEl.firstChild) presetsEl.removeChild(presetsEl.firstChild);

        Object.keys(PRESET_DEFS).forEach(function(name) {
            var def = PRESET_DEFS[name];
            var btn = document.createElement('button');
            btn.type = 'button';
            btn.style.cssText = 'display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;' +
                'padding:.5rem .65rem;border:2px solid var(--border);border-radius:var(--radius);' +
                'background:var(--surface);cursor:pointer;font-size:.8rem;font-weight:500;';
            if (name === activeName) btn.style.borderColor = 'var(--primary)';

            var labelEl = document.createElement('span');
            labelEl.textContent = def.label;

            var swatchRow = document.createElement('span');
            swatchRow.style.cssText = 'display:flex;gap:3px;';
            def.colors.slice(0, 6).forEach(function(c) {
                var d = document.createElement('span');
                d.style.cssText = 'display:inline-block;width:10px;height:10px;border-radius:50%;background:' + c + ';';
                swatchRow.appendChild(d);
            });

            btn.appendChild(labelEl);
            btn.appendChild(swatchRow);
            btn.addEventListener('click', function() {
                savePalette({ type: 'preset', name: name });
                renderPresets(name);
                customSect.style.display = 'none';
            });
            presetsEl.appendChild(btn);
        });

        // Custom button
        var custBtn = document.createElement('button');
        custBtn.type = 'button';
        custBtn.style.cssText = 'display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;' +
            'padding:.5rem .65rem;border:2px solid var(--border);border-radius:var(--radius);' +
            'background:var(--surface);cursor:pointer;font-size:.8rem;font-weight:500;';
        if (activeName === 'custom') custBtn.style.borderColor = 'var(--primary)';

        var custLabel = document.createElement('span');
        custLabel.textContent = 'Custom';
        var custHint = document.createElement('span');
        custHint.style.cssText = 'color:var(--muted);font-size:.75rem;';
        custHint.textContent = 'Pick color stops';
        custBtn.appendChild(custLabel);
        custBtn.appendChild(custHint);

        custBtn.addEventListener('click', function() {
            renderPresets('custom');
            customSect.style.display = '';
            renderStops(customStops);
            updateCustomPreview();
            savePalette({ type: 'custom', stops: customStops });
        });
        presetsEl.appendChild(custBtn);
    }

    // ── Custom stops ──────────────────────────────────────────
    function getStopValues() {
        return Array.from(stopsEl.querySelectorAll('input[type="color"]')).map(function(i) { return i.value; });
    }

    function updateCustomPreview() {
        var stops = getStopValues();
        while (previewEl.firstChild) previewEl.removeChild(previewEl.firstChild);
        if (stops.length < 2) {
            var hint = document.createElement('span');
            hint.style.cssText = 'font-size:.8rem;color:var(--muted);';
            hint.textContent = 'Add at least 2 stops';
            previewEl.appendChild(hint);
            return;
        }
        interpolateStops(stops, 10).forEach(function(c) { previewEl.appendChild(makeSwatch(c)); });
    }

    function saveCustom() {
        var stops = getStopValues();
        if (stops.length >= 2) {
            customStops = stops;
            savePalette({ type: 'custom', stops: stops });
        }
    }

    function renderStops(stops) {
        while (stopsEl.firstChild) stopsEl.removeChild(stopsEl.firstChild);
        stops.forEach(function(color, idx) {
            var wrap = document.createElement('span');
            wrap.style.cssText = 'display:inline-flex;align-items:center;gap:.2rem;';

            var inp = document.createElement('input');
            inp.type = 'color';
            inp.value = color;
            inp.style.cssText = 'width:2.2rem;height:2rem;padding:.1rem;border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;';
            inp.addEventListener('input', function() { updateCustomPreview(); });
            inp.addEventListener('change', function() { saveCustom(); });

            var rm = document.createElement('button');
            rm.type = 'button';
            rm.textContent = '\u00d7';
            rm.style.cssText = 'font-size:1rem;line-height:1;background:none;border:none;cursor:pointer;color:var(--muted);padding:0 .15rem;';
            rm.addEventListener('click', function() {
                var vals = getStopValues();
                if (vals.length <= 2) return;
                vals.splice(idx, 1);
                renderStops(vals);
                updateCustomPreview();
                saveCustom();
            });

            wrap.appendChild(inp);
            wrap.appendChild(rm);
            stopsEl.appendChild(wrap);
        });
        addStopBtn.disabled = stops.length >= 5;
    }

    addStopBtn.addEventListener('click', function() {
        var vals = getStopValues();
        if (vals.length >= 5) return;
        vals.push('#888888');
        renderStops(vals);
        updateCustomPreview();
    });

    // ── Init ──────────────────────────────────────────────────
    fetch('/api/settings/company-palette')
        .then(function(r) { return r.json(); })
        .then(function(data) {
            var cfg = data.config || { type: 'preset', name: 'default' };
            if (cfg.type === 'custom') {
                var stops = (cfg.stops && cfg.stops.length >= 2) ? cfg.stops : ['#4e79a7', '#e15759'];
                customStops = stops;
                renderPresets('custom');
                customSect.style.display = '';
                renderStops(stops);
                updateCustomPreview();
            } else {
                renderPresets(cfg.name || 'default');
            }
        })
        .catch(function() { renderPresets('default'); });
})();
</script>

<!-- ── Exclusion Rules JS ────────────────────────────────────── -->
<script>
async function loadExclusionRules() {
    try {
        const resp = await fetch('/api/exclusion-rules');
        const data = await resp.json();
        renderExclusionRules(data.rules || []);
    } catch (err) {
        console.error('loadExclusionRules:', err);
    }
}

function renderExclusionRules(rules) {
    const container = document.getElementById('exclusion-rules-list');
    container.innerHTML = '';
    if (!rules.length) {
        const empty = document.createElement('span');
        empty.id = 'exclusion-rules-empty';
        empty.style.cssText = 'font-size:.875rem; color:var(--muted);';
        empty.textContent = 'No rules yet. Add one above, or create from a Movements row.';
        container.appendChild(empty);
        return;
    }

    rules.forEach(rule => {
        const row = document.createElement('div');
        row.style.cssText = 'display:flex; align-items:center; gap:.5rem; padding:.5rem .65rem; background:var(--surface-alt,#f9fafb); border:1px solid var(--border); border-radius:var(--radius); font-size:.85rem;';

        const toggle = document.createElement('input');
        toggle.type = 'checkbox';
        toggle.checked = rule.enabled;
        toggle.title = rule.enabled ? 'Disable rule' : 'Enable rule';
        toggle.style.cssText = 'width:1rem; height:1rem; cursor:pointer;';
        toggle.addEventListener('change', () => toggleRule(rule.id, toggle.checked));

        const desc = document.createElement('div');
        desc.style.cssText = 'flex:1; min-width:0;';
        const label = document.createElement('div');
        label.innerHTML = `<strong>${escapeHtml(rule.field)}</strong> <span style="color:var(--muted)">${rule.operator}</span> <code style="background:var(--surface); padding:.05rem .35rem; border-radius:.2rem;">${escapeHtml(rule.value)}</code>`;
        desc.appendChild(label);
        if (rule.description) {
            const note = document.createElement('div');
            note.style.cssText = 'font-size:.75rem; color:var(--muted); margin-top:.15rem;';
            note.textContent = rule.description;
            desc.appendChild(note);
        }

        const count = document.createElement('span');
        count.style.cssText = 'font-size:.75rem; color:var(--muted); white-space:nowrap;';
        count.textContent = (rule.match_count != null) ?
            `${rule.match_count} match${rule.match_count === 1 ? '' : 'es'}` :
            '—';

        const del = document.createElement('button');
        del.type = 'button';
        del.className = 'btn-icon';
        del.innerHTML = '🗑';
        del.title = 'Delete rule';
        del.style.cssText = 'border:none; background:none; cursor:pointer; font-size:1rem; padding:.2rem .4rem;';
        del.addEventListener('click', () => deleteRule(rule.id));

        row.append(toggle, desc, count, del);
        container.appendChild(row);
    });
}

async function createExclusionRule() {
    const field    = document.getElementById('new-rule-field').value;
    const operator = document.getElementById('new-rule-operator').value;
    const value    = document.getElementById('new-rule-value').value.trim();
    if (!value) { alert('Value cannot be empty.'); return; }

    try {
        const resp = await fetch('/api/exclusion-rules', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ field, operator, value })
        });
        const data = await resp.json();
        if (!data.ok) { alert('Failed to create rule: ' + (data.error || 'unknown')); return; }
        document.getElementById('new-rule-value').value = '';
        await loadExclusionRules();
    } catch (err) {
        alert('Network error: ' + err.message);
    }
}

async function toggleRule(ruleId, enabled) {
    try {
        await fetch('/api/exclusion-rules/' + ruleId, {
            method: 'PATCH',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ enabled })
        });
        await loadExclusionRules();   // refresh counts
    } catch (err) {
        alert('Could not toggle: ' + err.message);
    }
}

async function deleteRule(ruleId) {
    if (!confirm('Delete this exclusion rule? Currently-excluded movements will reappear in lists.')) return;
    try {
        const resp = await fetch('/api/exclusion-rules/' + ruleId, { method: 'DELETE' });
        const data = await resp.json();
        if (!data.ok) { alert('Delete failed: ' + (data.error || 'unknown')); return; }
        await loadExclusionRules();
    } catch (err) {
        alert('Network error: ' + err.message);
    }
}

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

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

<!-- ── Network info + QR code ────────────────────────────────── -->
<script>
/* Minimal QR code SVG generator — public domain, ~3KB.
   Adapted from https://github.com/papnkukn/qrcode-svg (MIT) */
(function () {
    'use strict';
    function QrCode(c, e) {
        e = e || 'M';
        var l = { L: 1, M: 0, Q: 3, H: 2 }[e];
        var qr = qrcode(0, e); qr.addData(c); qr.make();
        return qr;
    }
    // Compact qrcode lib (truncated for brevity — full lib at end of file)
    window.__bills_qr = QrCode;
})();
</script>
<!-- The qrcode library itself: drop this <script> ABOVE the inline IIFE so it's defined first -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcode-generator/1.4.4/qrcode.min.js"
        integrity="sha512-Tt/lCRr07x0WI/pY+P3qg8EfCxgxJrkvOvL+tXGz1ULVOL9c7G4S7HVvKmwOk2dJJ+1AUrr1xdxLMy3OuBVOHA=="
        crossorigin="anonymous"
        referrerpolicy="no-referrer"></script>
<script>
async function loadNetworkInfo() {
    const box = document.getElementById('network-info');
    try {
        const resp = await fetch('{{ url_for("settings.network_info") }}');
        const info = await resp.json();
        renderNetworkInfo(box, info);
    } catch (err) {
        box.innerHTML = '<span style="color:var(--error);">Could not load network info: ' + err.message + '</span>';
    }
}

function renderNetworkInfo(box, info) {
    if (!info.bind_lan) {
        box.innerHTML = `
            <div><strong>LAN access: OFF</strong></div>
            <div style="color:var(--muted); margin-top:.25rem;">
                Currently reachable only at <code>${info.localhost}</code>.
                Enable the checkbox above and restart the app to allow phone access.
            </div>`;
        return;
    }
    if (!info.lan_url) {
        box.innerHTML = `
            <div><strong>LAN access: ON</strong> — but couldn't detect a LAN IP.</div>
            <div style="color:var(--muted); margin-top:.25rem;">
                Make sure the PC is connected to Wi-Fi or Ethernet.
            </div>`;
        return;
    }

    box.innerHTML = `
        <div style="display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap;">
            <div style="flex:1; min-width:200px;">
                <div><strong>LAN access: ON</strong></div>
                <div style="margin-top:.5rem;">From your phone, visit:</div>
                <div style="margin-top:.25rem;">
                    <a href="${info.lan_url}" style="font-family:monospace; font-size:1rem;">${info.lan_url}</a>
                </div>
                <div style="margin-top:.5rem; color:var(--muted); font-size:.78rem;">
                    Or scan the QR code with your phone camera →
                </div>
            </div>
            <div id="network-qr" style="background:white; padding:.5rem; border-radius:var(--radius); border:1px solid var(--border);"></div>
        </div>`;

    // Render QR
    try {
        const qr = qrcode(0, 'M');
        qr.addData(info.lan_url.replace(/\/?$/, '') + '/mobile/');
        qr.make();
        document.getElementById('network-qr').innerHTML = qr.createSvgTag({ cellSize: 4, margin: 0 });
    } catch (err) {
        document.getElementById('network-qr').textContent = 'QR error: ' + err.message;
    }
}

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

<!-- Local QR library (kazuhikoarase qrcode-generator, MIT, bundled in static/) -->
<script src="{{ url_for('static', filename='js/qrcode.min.js') }}"></script>

<!-- ── Network info renderer ─────────────────────────────────── -->
<script>
async function loadNetworkInfo() {
    const box = document.getElementById('network-info');
    if (!box) return;
    try {
        const resp = await fetch('/api/network-info');
        const info = await resp.json();
        renderNetworkInfo(box, info);
    } catch (err) {
        box.innerHTML = '<span style="color:var(--error);">Could not load network info: ' + err.message + '</span>';
    }
}

function renderNetworkInfo(box, info) {
    if (!info.bind_lan) {
        box.innerHTML = `
            <div><strong>LAN access: OFF</strong></div>
            <div style="color:var(--muted); margin-top:.25rem;">
                Currently reachable only at <code>${info.localhost}</code>.
                Enable the checkbox above and restart the app to allow phone access.
            </div>`;
        return;
    }
    if (!info.lan_url) {
        box.innerHTML = `
            <div><strong>LAN access: ON</strong> — but couldn't detect a LAN IP.</div>
            <div style="color:var(--muted); margin-top:.25rem;">
                Make sure the PC is connected to Wi-Fi or Ethernet.
            </div>`;
        return;
    }

    box.innerHTML = `
        <div style="display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap;">
            <div style="flex:1; min-width:200px;">
                <div><strong>LAN access: ON</strong></div>
                <div style="margin-top:.5rem;">From your phone, visit:</div>
                <div style="margin-top:.25rem;">
                    <a href="${info.lan_url}" style="font-family:monospace; font-size:1rem;">${info.lan_url}</a>
                </div>
                <div style="margin-top:.5rem; color:var(--muted); font-size:.78rem;">
                    Or scan the QR code with your phone camera →
                </div>
            </div>
            <div id="network-qr" style="background:white; padding:.5rem; border-radius:var(--radius); border:1px solid var(--border);"></div>
        </div>`;

    // Render QR (qrcode is the global from the bundled library)
    try {
        const qr = qrcode(0, 'M');
        qr.addData(info.lan_url.replace(/\/?$/, '') + '/mobile/');
        qr.make();
        document.getElementById('network-qr').innerHTML = qr.createSvgTag({ cellSize: 4, margin: 0 });
    } catch (err) {
        document.getElementById('network-qr').textContent = 'QR error: ' + err.message;
    }
}

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

<script>
/* ── OCR Languages card ─────────────────────────────────────────────── */
(function () {
    const $list    = document.getElementById('ocr-installed-list');
    const $path    = document.getElementById('ocr-tessdata-path');
    const $select  = document.getElementById('ocr-lang-select');
    const $custom  = document.getElementById('ocr-lang-custom');
    const $btn     = document.getElementById('ocr-install-btn');
    const $status  = document.getElementById('ocr-install-status');
    const $active  = document.getElementById('ocr-lang-active');
    const $save    = document.getElementById('ocr-active-save');
    const $aStat   = document.getElementById('ocr-active-status');
    if (!$list) return;

    function flash(el, msg, isError) {
        el.textContent = msg;
        el.style.color = isError ? '#b91c1c' : '#15803d';
        if (msg) setTimeout(() => { el.textContent = ''; }, 4000);
    }

    function renderInstalled(langs) {
        if (!langs.length) {
            $list.innerHTML = '<span style="font-size:.85rem; color:var(--muted);">' +
                              'None installed yet.</span>';
            return;
        }
        $list.innerHTML = '';
        langs.forEach(l => {
            const chip = document.createElement('span');
            chip.style.cssText =
                'display:inline-flex; align-items:center; gap:.4rem; padding:.25rem .55rem;' +
                'background:#eef2ff; border:1px solid #c7d2fe; border-radius:999px;' +
                'font-size:.8rem;';
            chip.innerHTML =
                `<strong>${l.code}</strong>` +
                (l.display !== l.code ? ` <span style="color:var(--muted);">${l.display}</span>` : '') +
                ` <span style="color:var(--muted); font-size:.72rem;">${l.size_kb} KB</span>`;
            const x = document.createElement('button');
            x.type = 'button';
            x.textContent = '×';
            x.title = `Remove ${l.code}`;
            x.style.cssText =
                'border:none; background:transparent; color:#b91c1c; font-size:1rem;' +
                'cursor:pointer; padding:0 .15rem; line-height:1;';
            x.addEventListener('click', () => removeLanguage(l.code));
            chip.appendChild(x);
            $list.appendChild(chip);
        });
    }

    function populateSelect(common, installed) {
        const installedCodes = new Set(installed.map(l => l.code));
        $select.innerHTML = '<option value="">— pick a common language —</option>';
        common.forEach(({ code, display }) => {
            if (installedCodes.has(code)) return;
            const opt = document.createElement('option');
            opt.value = code;
            opt.textContent = `${display} (${code})`;
            $select.appendChild(opt);
        });
    }

    async function refresh() {
        try {
            const r = await fetch('/settings/api/ocr-languages');
            const data = await r.json();
            $path.textContent = data.tessdata_dir
                ? `Folder: ${data.tessdata_dir}`
                : '⚠ Could not locate tessdata folder. Is Tesseract installed?';
            renderInstalled(data.installed || []);
            populateSelect(data.common || [], data.installed || []);
            $active.value = data.active || '';
        } catch (e) {
            $path.textContent = `⚠ Failed to load: ${e.message}`;
        }
    }

    async function installLanguage() {
        const lang = ($custom.value.trim() || $select.value).toLowerCase();
        if (!lang) { flash($status, 'Pick or type a language code.', true); return; }
        $btn.disabled = true;
        flash($status, `Downloading ${lang}… (this can take a minute)`, false);
        try {
            const r = await fetch('/settings/api/ocr-languages', {
                method:  'POST',
                headers: { 'Content-Type': 'application/json' },
                body:    JSON.stringify({ lang }),
            });
            const data = await r.json();
            if (!r.ok || !data.ok) throw new Error(data.error || `HTTP ${r.status}`);
            flash($status, data.already_installed
                ? `${lang} already installed.`
                : `Installed ${lang} (${data.size_kb} KB).`, false);
            $custom.value = '';
            $select.value = '';
            refresh();
        } catch (e) {
            flash($status, `Install failed: ${e.message}`, true);
        } finally {
            $btn.disabled = false;
        }
    }

    async function removeLanguage(code) {
        if (!confirm(`Remove the ${code} OCR language pack?`)) return;
        try {
            const r = await fetch(`/settings/api/ocr-languages/${encodeURIComponent(code)}`,
                                  { method: 'DELETE' });
            const data = await r.json();
            if (!r.ok || !data.ok) throw new Error(data.error || `HTTP ${r.status}`);
            refresh();
        } catch (e) {
            alert(`Remove failed: ${e.message}`);
        }
    }

    async function saveActive() {
        const value = $active.value.trim().toLowerCase();
        $save.disabled = true;
        try {
            const r = await fetch('/settings/api/ocr-language-active', {
                method:  'PUT',
                headers: { 'Content-Type': 'application/json' },
                body:    JSON.stringify({ value }),
            });
            const data = await r.json();
            if (!r.ok || !data.ok) throw new Error(data.error || `HTTP ${r.status}`);
            $active.value = data.active;
            flash($aStat, '✓ Saved', false);
        } catch (e) {
            flash($aStat, `Save failed: ${e.message}`, true);
        } finally {
            $save.disabled = false;
        }
    }

    $btn.addEventListener('click', installLanguage);
    $save.addEventListener('click', saveActive);
    refresh();
})();
</script>

{% endblock %}