{% extends 'base.html' %}
{% block content %}

<!-- ═══════════════════════════════════════════════════════════════════════════
     APP HEADER
═══════════════════════════════════════════════════════════════════════════ -->
<div class="app-header">
    <span class="app-header-title">Soldered Warehouse App</span>
    {% if app_version %}<span class="app-version">v{{ app_version }}</span>{% endif %}
</div>

<!-- ═══════════════════════════════════════════════════════════════════════════
     TAB BAR
═══════════════════════════════════════════════════════════════════════════ -->
<div class="tab-bar">
    <div class="tab-bar-sync">
        <button class="tab-sync-btn" onclick="aoSync()" id="ao-sync-btn">
            <span>⟳ Sync from e-računi</span>
            <span class="tab-sync-sub">refresh orders</span>
        </button>
        <span id="ao-sync-age" class="sync-age"></span>
    </div>
    <button class="app-tab active" data-tab="process-orders" onclick="switchTab('process-orders', this); poOnActivate()">Process Orders</button>
    <button class="app-tab"        data-tab="all-orders"     onclick="switchTab('all-orders', this); aoOnActivate()">All Orders</button>
    <button class="app-tab"        data-tab="products"       onclick="switchTab('products', this); prOnActivate()">Products</button>
    <button class="app-tab"        data-tab="custom-label"      onclick="switchTab('custom-label',      this)">Custom Label</button>
    <button class="app-tab"        data-tab="label-templates"  onclick="switchTab('label-templates',  this);ltOnTabActivate()">Label Templates</button>
    <button class="app-tab"        data-tab="sync"              onclick="switchTab('sync', this); syncOnActivate()">Sync</button>
    <button class="app-tab"        data-tab="settings"          onclick="switchTab('settings', this); srOnActivate()">Settings</button>
    <div class="tab-bar-right">{{ current_user.email }}</div>
</div>

<!-- ═══════════════════════════════════════════════════════════════════════════
     TAB 1 — PROCESS ORDERS
═══════════════════════════════════════════════════════════════════════════ -->
<div id="tab-process-orders" class="tab-panel active">
    <div class="process-grid">

        <!-- ── Col A: Order info ─────────────────────────────────────────── -->
        <div class="col-order-info">
            <div class="info-label">Order:</div>
            <div class="order-number-big" id="po-number">—</div>
            <div class="info-block mt-auto">
                <div class="info-label">Made on:</div>
                <div id="po-date">—</div>
                <div class="info-label mt-2">Total:</div>
                <div class="order-total" id="po-total">—</div>
            </div>
        </div>

        <!-- ── Col B: Buyer & shipping address ──────────────────────────── -->
        <div class="col-buyer">
            <div class="info-label">Buyer:</div>
            <div class="address-block" id="po-buyer"></div>
            <div class="address-divider" id="po-addr-divider"></div>
            <div class="info-label">Shipping Address:</div>
            <div class="address-block" id="po-shipping-addr"></div>
        </div>

        <!-- ── Col C: Items table ────────────────────────────────────────── -->
        <div class="col-items">
            <div class="info-label">Items:</div>
            <table class="items-table">
                <thead>
                    <tr>
                        <th>Amount</th>
                        <th>SKU</th>
                        <th>Product Name</th>
                    </tr>
                </thead>
                <tbody id="po-items">
                    <tr><td colspan="3" style="text-align:center;color:#aaa">Loading…</td></tr>
                </tbody>
            </table>
        </div>

        <!-- ── Col D: Orders queue ───────────────────────────────────────── -->
        <div class="col-queue">
            <div class="info-label">Orders to process:</div>
            <div class="queue-list" id="po-queue">
                <div style="padding:8px;color:#aaa;font-size:0.85rem">Loading…</div>
            </div>
        </div>

        <!-- ── Col A bottom: Shipping method ────────────────────────────── -->
        <div class="col-order-info col-bottom">
            <div class="info-label">Shipping:</div>
            <div id="po-delivery">—</div>
        </div>

        <!-- ── Col B+C bottom: Process steps ────────────────────────────── -->
        <div class="col-steps">
            <div class="step-row" id="step-1">
                <div class="step-check pending"></div>
                <span>Created invoice on e-Računi</span>
            </div>
            <div class="step-row" id="step-2">
                <div class="step-check pending"></div>
                <span>Got .pdf</span>
            </div>
            <div class="step-row" id="step-3">
                <div class="step-check pending"></div>
                <span>Sent to print</span>
            </div>
            <div class="step-row" id="step-4">
                <div class="step-check pending"></div>
                <span>Created shipment</span>
            </div>
            <div class="step-row" id="step-5">
                <div class="step-check pending"></div>
                <span>Got shipping label</span>
            </div>
        </div>

        <!-- ── Col D bottom: Action buttons ─────────────────────────────── -->
        <div class="col-queue col-bottom">
            <div id="po-invoice-status" style="font-size:0.8rem;color:#5c2a85;min-height:1.2em;margin-bottom:6px;"></div>
            <button class="action-btn btn-primary-action" id="po-process-btn" onclick="autoProcess()">Auto Process</button>
            <button class="action-btn" id="po-test-btn" onclick="packingTest()" style="margin-top:6px;background:#f0eaf8;color:#5c2a85;border:1px solid #c8a8e8;">Test Packing Screen</button>
        </div>

    </div>

    <!-- Packing screen — inside the tab panel so tab bar stays accessible -->
    <div id="packing-screen" class="packing-screen" style="display:none;">
        <div class="packing-header">
            <span class="packing-title">Pack Orders</span>
            {% if make_test_mode %}<span class="test-mode-badge">TEST MODE</span>{% endif %}
            <span id="packing-print-status" class="packing-print-status"></span>
        </div>
        <div class="packing-columns" id="packing-columns"></div>
        <!-- Shipping confirmation modal (overlays the packing screen) -->
        <div id="ship-confirm-overlay" class="ship-confirm-overlay" style="display:none;">
            <div class="ship-confirm-modal">
                <div class="ship-confirm-hdr">
                    <div class="ship-confirm-letter" id="ship-confirm-letter">A</div>
                    <div>
                        <div class="ship-confirm-title">Confirm Shipment</div>
                        <div class="ship-confirm-order-num" id="ship-confirm-order-num"></div>
                    </div>
                </div>
                <div class="ship-confirm-slots">
                    <div class="ship-slot" id="ship-slot-tracking">
                        <div class="ship-slot-label">Shipping Label / Tracking #</div>
                        <div class="ship-slot-value" id="ship-slot-tracking-val">—</div>
                    </div>
                    <div class="ship-slot" id="ship-slot-order">
                        <div class="ship-slot-label">Order Barcode</div>
                        <div class="ship-slot-value" id="ship-slot-order-val">—</div>
                    </div>
                </div>
                <div class="ship-confirm-scan-row">
                    <input type="text" id="ship-scan-input" class="packing-scan-input"
                           placeholder="Scan barcode…" autocomplete="off" autocorrect="off"
                           onkeydown="if(event.key==='Enter'){shipScanSubmit();}">
                    <button class="packing-scan-btn" onclick="shipScanSubmit()">INPUT</button>
                </div>
                <div class="ship-confirm-status" id="ship-confirm-status"></div>
                <div class="ship-confirm-actions">
                    <button class="packing-close-btn" onclick="shipConfirmAbort()" style="color:#fff">Cancel Order</button>
                    <button class="packing-scan-btn ship-confirm-btn" id="ship-confirm-btn"
                            onclick="shipConfirm()" disabled>Confirm &amp; Send Email</button>
                </div>
            </div>
        </div>

        <div class="packing-scan-bar">
            <div class="packing-scan-letter" id="packing-scan-letter">—</div>
            <div class="packing-scan-middle">
                <div class="packing-scan-row">
                    <input type="text" id="packing-scan-input" class="packing-scan-input"
                           placeholder="Scan barcode…" autocomplete="off" autocorrect="off"
                           onkeydown="if(event.key==='Enter'){packingScanSubmit();}">
                    <button class="packing-scan-btn" onclick="packingScanSubmit()">INPUT</button>
                </div>
                <div class="packing-scan-result" id="packing-scan-result"></div>
            </div>
        </div>
    </div>
</div>

<!-- ═══════════════════════════════════════════════════════════════════════════
     TAB 2 — ALL ORDERS
═══════════════════════════════════════════════════════════════════════════ -->
<div id="tab-all-orders" class="tab-panel">
    <div class="table-toolbar">
        <input type="text" class="search-input" id="orders-search"
               placeholder="Search by order #, customer, SKU…"
               oninput="aoFilter()">
        <select class="filter-select" id="orders-status-filter" onchange="aoFilter()">
            <option value="">All statuses</option>
            <option value="Draft">Draft</option>
            <option value="Opened">Opened</option>
            <option value="Processing">Processing</option>
            <option value="OnHold">On Hold</option>
            <option value="PartialDelivery">Partial Delivery</option>
            <option value="CompletedDelivery">Completed Delivery</option>
            <option value="CompletedDeliveryAndSettledInvoice">Completed &amp; Invoiced</option>
            <option value="Cancelled">Cancelled</option>
        </select>
    </div>

    {# Sync terminal popup #}
    <div id="sync-terminal-overlay" style="display:none;position:fixed;inset:0;z-index:500;background:rgba(10,5,20,.75);align-items:center;justify-content:center;">
        <div style="background:#0d0d0d;border:1px solid #3b1f5e;border-radius:10px;width:min(680px,92vw);max-height:70vh;display:flex;flex-direction:column;box-shadow:0 8px 40px rgba(0,0,0,.7)">
            <div style="display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid #2a1a42;flex-shrink:0">
                <span style="font-family:'Tektur',sans-serif;font-size:.8rem;color:#a78bca;letter-spacing:.08em;text-transform:uppercase">Sync Output</span>
                <button onclick="syncTerminalClose()" style="background:none;border:none;color:#666;font-size:1.2rem;cursor:pointer;line-height:1;padding:0 4px">&times;</button>
            </div>
            <div id="ao-sync-log" style="flex:1;overflow-y:auto;padding:14px 16px;font-family:'Courier New',monospace;font-size:.8rem;line-height:1.7;color:#ccc;min-height:120px;max-height:55vh"></div>
            <div style="padding:10px 16px;border-top:1px solid #2a1a42;flex-shrink:0;text-align:right">
                <button onclick="syncTerminalClose()" class="packing-scan-btn" style="padding:6px 20px;font-size:.85rem">Close</button>
            </div>
        </div>
    </div>

    <div class="table-wrap">
        <table class="data-table" id="orders-table">
            <thead>
                <tr>
                    <th>Order num.</th>
                    <th>Date</th>
                    <th>Customer</th>
                    <th>Num. Items</th>
                    <th>Items</th>
                    <th>Status</th>
                    <th>Shipping</th>
                    <th>Country</th>
                    <th>Lang</th>
                    <th class="col-total">Total</th>
                </tr>
            </thead>
            <tbody id="orders-tbody">
                <tr><td colspan="10" class="table-empty">Loading…</td></tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Order detail modal -->
<div id="order-modal-overlay" class="order-modal-overlay" onclick="aoModalClose(event)">
    <div class="order-modal">
        <div class="order-modal-header">
            <span id="order-modal-title" class="order-modal-title"></span>
            <div class="order-modal-actions">
                <button class="order-modal-btn" id="order-modal-print-btn" onclick="aoModalPrint()">🖨 Print Labels</button>
                <button class="order-modal-btn order-modal-btn-close" onclick="aoModalClose()">✕</button>
            </div>
        </div>
        <div id="order-modal-print-msg" class="order-modal-print-msg" style="display:none"></div>
        <div class="order-modal-scroll">
            <div id="order-modal-body" class="order-modal-body"></div>
            <div class="om-section-label" style="padding: 0 18px;">Raw e-računi JSON</div>
            <pre id="order-modal-raw" class="order-modal-raw"></pre>
        </div>
    </div>
</div>

<!-- ═══════════════════════════════════════════════════════════════════════════
     TAB 3 — PRODUCTS
═══════════════════════════════════════════════════════════════════════════ -->
<div id="tab-products" class="tab-panel">
    <div class="temp-overlay"><span>Please use old warehouse app to print labels temporarily.</span></div>
    <div class="pr-layout">

        {# ── Left: controls ── #}
        <div class="pr-sidebar">

            {# Search #}
            <div class="pr-section">
                <div class="pr-section-label">Search</div>
                <input id="pr-search" class="form-ctrl pr-search-input" type="text"
                       placeholder="SKU, name, location, barcode…"
                       oninput="prFilter()">
                <button class="action-btn btn-secondary-action pr-clear-btn" onclick="prClearSearch()">Clear</button>
                <label class="pr-filter-check">
                    <input type="checkbox" id="pr-soldered-only" onchange="prFilter()">
                    Soldered originals only (333*)
                </label>
            </div>

            {# Sync #}
            <div class="pr-section">
                <button class="action-btn btn-primary-action pr-sync-btn" id="pr-sync-btn" onclick="prSync()">
                    ⟳ Sync Products
                </button>
                <span class="pr-sync-status" id="pr-sync-status"></span>
            </div>

            {# Print product label #}
            <div class="pr-section pr-print-section">
                <div class="pr-section-label">Print Product Label</div>

                <label class="form-lbl pr-field-label">Language</label>
                <select class="form-ctrl pr-select" id="pr-lang">
                    <option value="hr">Croatian</option>
                    <option value="en">English</option>
                    <option value="de">German</option>
                </select>

                <label class="form-lbl pr-field-label">Label type</label>
                <select class="form-ctrl pr-select" id="pr-label-type">
                    <option value="product">Product</option>
                    <option value="product_sealed">Product Sealed</option>
                    <option value="digikey">DigiKey</option>
                </select>

                <label class="form-lbl pr-field-label">Sealed / DigiKey amount</label>
                <div class="pr-input-row">
                    <input class="form-ctrl pr-num-input" id="pr-sealed-amount" type="number" min="1" value="">
                    <button class="action-btn btn-secondary-action" onclick="prClearSealed()">Clear</button>
                </div>

                <label class="form-lbl pr-field-label">Number of labels</label>
                <div class="pr-input-row">
                    <input class="form-ctrl pr-num-input" id="pr-label-count" type="number" min="1" value="1">
                    <button class="action-btn btn-secondary-action" onclick="prResetCount()">Reset</button>
                </div>

                <button class="action-btn btn-primary-action pr-print-btn" onclick="prPrintLabel()">
                    Print Product Label
                </button>
                <div class="pr-print-status" id="pr-print-status"></div>
            </div>

        </div>

        {# ── Right: products table ── #}
        <div class="pr-table-wrap">
            <table class="pr-table" id="pr-table">
                <thead>
                    <tr>
                        <th class="pr-th pr-th-info"></th>
                        <th class="pr-th pr-th-sku">SKU</th>
                        <th class="pr-th pr-th-name">Croatian name</th>
                        <th class="pr-th pr-th-name">English name</th>
                        <th class="pr-th pr-th-name">German name</th>
                        <th class="pr-th pr-th-loc">Location</th>
                        <th class="pr-th pr-th-bc">Barcode</th>
                    </tr>
                </thead>
                <tbody id="pr-tbody">
                    <tr><td colspan="7" class="pr-empty-cell">Loading products…</td></tr>
                </tbody>
            </table>
        </div>

    </div>
</div>

<!-- Product detail modal -->
<div id="pr-modal-backdrop" class="pr-modal-backdrop" onclick="prModalClose()" style="display:none"></div>
<div id="pr-modal" class="pr-modal" style="display:none">
    <div class="pr-modal-header">
        <span class="pr-modal-sku" id="pr-modal-sku"></span>
        <button class="pr-modal-close" onclick="prModalClose()">&#x2715;</button>
    </div>
    <div class="pr-modal-body">
        <div class="pr-modal-col">
            <div class="pr-modal-section-title">Database record</div>
            <table class="pr-modal-table" id="pr-modal-db-table"></table>
        </div>
        <div class="pr-modal-col">
            <div class="pr-modal-section-title">Raw e-računi response</div>
            <pre class="pr-modal-raw" id="pr-modal-raw"></pre>
        </div>
    </div>
</div>

<!-- ═══════════════════════════════════════════════════════════════════════════
     TAB 4 — CUSTOM LABEL
═══════════════════════════════════════════════════════════════════════════ -->
<div id="tab-custom-label" class="tab-panel">
    <div class="temp-overlay"><span>Please use old warehouse app to print labels temporarily.</span></div>
    <div class="form-panel">
        <div class="form-panel-inner">
            <div class="form-row">
                <label class="form-lbl">Label Type</label>
                <select class="form-ctrl" id="label-type" onchange="updateLabelPreview()">
                    <option value="soldered">Soldered</option>
                    <option value="engineering">Soldered Engineering</option>
                    <option value="manufacturing">Soldered Manufacturing</option>
                    <option value="empty">Empty</option>
                </select>
            </div>
            <div class="form-row">
                <label class="form-lbl">Title</label>
                <input type="text" class="form-ctrl" id="label-title" placeholder="Label title…" oninput="updateLabelPreview()">
            </div>
            <div class="form-row">
                <label class="form-lbl">Body Text</label>
                <textarea class="form-ctrl" id="label-body" rows="4" placeholder="Body text…" oninput="updateLabelPreview()"></textarea>
            </div>
            <div class="form-row">
                <label class="form-lbl">Amount</label>
                <input type="number" class="form-ctrl form-ctrl-sm" id="label-amount" value="1" min="1" max="100">
            </div>
            <button class="action-btn btn-primary-action mt-2" onclick="printCustomLabel()">Print Labels</button>
        </div>

        <div class="label-preview-wrap">
            <div class="info-label mb-1">Preview</div>
            <div class="label-preview" id="label-preview">
                <div class="label-preview-type" id="preview-type">SOLDERED</div>
                <div class="label-preview-title" id="preview-title">Title</div>
                <div class="label-preview-body" id="preview-body"></div>
            </div>
        </div>
    </div>
</div>

<!-- ═══════════════════════════════════════════════════════════════════════════
     TAB 6 — LABEL TEMPLATES
═══════════════════════════════════════════════════════════════════════════ -->
<div id="tab-label-templates" class="tab-panel">

    {# Header: dropdown + action buttons #}
    <div class="lt-header">
        <div style="display:flex;align-items:center;gap:10px">
            <span class="form-lbl" style="white-space:nowrap">Template</span>
            <select class="form-ctrl" id="lt-name-select" onchange="ltSwitchTemplate(this.value)" style="width:190px">
                <option value="order_summary">Order Label</option>
                <option value="order_item">Order Item Label</option>
                <option value="product"        hidden>Product Label</option>
                <option value="product_sealed" hidden>Product Sealed Label</option>
                <option value="digikey"        hidden>DigiKey Label</option>
            </select>
        </div>
        <div class="lt-header-actions">
            <button class="action-btn btn-primary-action"   onclick="ltSave()">Save</button>
            <button class="action-btn btn-secondary-action" onclick="ltTestPrint()">Test Print</button>
            <button class="action-btn btn-secondary-action" onclick="ltReset()">Reset Default</button>
        </div>
    </div>

    <div class="lt-body">

        {# ── Left: preview image + editable sample data ── #}
        <div class="lt-panel-left">
            <div class="lt-preview-section">
                <div class="lt-preview-label">
                    <span>Preview</span>
                    <button class="lt-refresh-btn" onclick="ltRefreshPreview()">↺ Refresh</button>
                </div>
                <div class="lt-preview-canvas-wrap">
                    <img id="lt-preview-img" class="lt-preview-img" src="" alt="Label preview">
                    <canvas id="lt-drag-canvas" class="lt-drag-canvas"></canvas>
                </div>
            </div>
            <div class="lt-sample-section">
                <div class="lt-section-label">Sample Data</div>
                <div id="lt-sample-fields" class="lt-sample-fields"></div>
            </div>
        </div>

        {# ── Middle: element list ── #}
        <div class="lt-panel-right">
            <div class="lt-panel-header">
                <span class="lt-panel-title">Elements</span>
                <button class="lt-add-btn" onclick="ltOpenAdd()">+ Add Element</button>
            </div>
            <div class="lt-elem-list" id="lt-elem-list">
                <div class="lt-empty">Loading…</div>
            </div>
        </div>

    </div>
</div>

{# ── Element edit / add modal ── #}
<div id="lt-modal" class="lt-modal-overlay" style="display:none" onclick="ltModalOverlayClick(event)">
    <div class="lt-modal">
        <div class="lt-modal-header">
            <span id="lt-modal-title">Add Element</span>
            <button class="lt-modal-close" onclick="ltCloseModal()">✕</button>
        </div>
        <div class="lt-modal-body" id="lt-modal-body"></div>
        <div class="lt-modal-footer">
            <button class="action-btn btn-secondary-action" onclick="ltCloseModal()">Cancel</button>
            <button class="action-btn btn-primary-action"   onclick="ltSaveElement()" id="lt-modal-save-btn">Add</button>
        </div>
    </div>
</div>

<!-- ═══════════════════════════════════════════════════════════════════════════
     TAB — SYNC
═══════════════════════════════════════════════════════════════════════════ -->
<div id="tab-sync" class="tab-panel">
<div class="settings-scroll">

    <div class="settings-group-title">Shopify ↔ e-računi Order Sync</div>

    <div style="font-size:.85rem;color:#888;margin-bottom:16px;padding:10px 14px;background:#f8f6fc;border:1px solid #e4d9f5;border-radius:6px">
        Shopify orders are synced automatically as part of the e-računi sync. Use the <strong>⟳ Sync from e-računi</strong> button in the header to sync both at once.
    </div>

    <div id="sync-mappings-list" style="display:flex;flex-direction:column;gap:10px"></div>

</div>
</div>

<!-- ═══════════════════════════════════════════════════════════════════════════
     TAB 5 — SETTINGS
═══════════════════════════════════════════════════════════════════════════ -->
<div id="tab-settings" class="tab-panel">

<div class="settings-save-bar">
    <span id="settings-save-status" style="font-size:.85rem;color:#5c2a85"></span>
    <button class="action-btn" onclick="saveAllSettings(this)" style="background:#5c2a85;color:#fff;padding:8px 22px;font-size:.9rem">
        💾 Save All Settings
    </button>
</div>

<div class="settings-scroll">

    {# ── User accounts error/success banners (page-reload forms only) ── #}
    {% set saved = request.args.get('saved') %}
    {% set err   = request.args.get('error') %}
    {% if saved == 'users' %}
    <div class="settings-banner settings-banner-ok">User accounts updated.</div>
    {% elif err %}
    <div class="settings-banner settings-banner-err">
        {% if err == 'password_mismatch' %}Passwords do not match.
        {% elif err == 'email_exists' %}That email is already registered.
        {% elif err == 'missing_fields' %}Email and password are required.
        {% elif err == 'cant_delete_self' %}You cannot delete your own account.
        {% elif err == 'last_user' %}Cannot delete the only user account.
        {% else %}An error occurred.{% endif %}
    </div>
    {% endif %}

    {# ════════════════════════════════════════════════════════
       PRINTERS
    ════════════════════════════════════════════════════════ #}
    <div class="settings-group-title">Printers</div>

    {# Print Mode toggle #}
    <div class="form-row" style="margin-bottom:1rem;max-width:340px">
        <label class="form-lbl">Print Mode</label>
        <select data-key="PRINT_MODE" id="print-mode-select" class="form-ctrl setting-field"
                onchange="onPrintModeChange(this.value)">
            <option value="api"     {% if settings.PRINT_MODE != 'preview' %}selected{% endif %}>API (Print Companion App)</option>
            <option value="preview" {% if settings.PRINT_MODE == 'preview' %}selected{% endif %}>Preview (dev)</option>
        </select>
    </div>

    <div class="printer-cards">

        {# Small Printer #}
        <div class="scard">
            <div class="scard-header">
                <span class="scard-title">Small Printer</span>
                <span class="scard-sub">Order &amp; item labels</span>
            </div>
            <div class="scard-footer">
                <button type="button" class="btn-test-print" onclick="printTestPage('small')">Print Test Page</button>
            </div>
        </div>

        {# Large Printer #}
        <div class="scard">
            <div class="scard-header">
                <span class="scard-title">Large Printer</span>
                <span class="scard-sub">Shipping labels</span>
            </div>
            <div class="scard-footer">
                <button type="button" class="btn-test-print" onclick="printTestPage('large')">Print Test Page</button>
            </div>
        </div>

        {# Invoice Printer #}
        <div class="scard">
            <div class="scard-header">
                <span class="scard-title">Invoice Printer</span>
                <span class="scard-sub">PDF invoices &amp; delivery notes</span>
            </div>
            <div class="scard-body">
                <div class="form-row"><label class="form-lbl">Printer Name</label>
                    <div class="printer-name-row">
                        <input type="text" data-key="PRINTER_INVOICE" id="printer-invoice-name" class="form-ctrl setting-field"
                               value="{{ settings.PRINTER_INVOICE }}" placeholder="HP LaserJet Pro M404">
                        <button type="button" class="btn-detect-printer" onclick="detectPrinter('printer-invoice-name')" title="Detect printers">&#8635;</button>
                    </div></div>
            </div>
            <div class="scard-footer">
                <button type="button" class="btn-test-print" onclick="printTestPage('invoice')">Print Test Page</button>
            </div>
        </div>

        {# Print Companion App API #}
        <div class="scard" id="print-api-card" {% if settings.PRINT_MODE == 'preview' %}style="display:none"{% endif %}>
            <div class="scard-header">
                <span class="scard-title">Print Companion App</span>
                <span class="scard-sub">Warehouse PC connection</span>
            </div>
            <div class="scard-body">
                <div class="form-row"><label class="form-lbl">IP Address</label>
                    <input type="text" data-key="PRINT_API_HOST" class="form-ctrl setting-field"
                           value="{{ settings.PRINT_API_HOST }}" placeholder="192.168.1.100"></div>
                <div class="form-row"><label class="form-lbl">Port</label>
                    <input type="number" data-key="PRINT_API_PORT" class="form-ctrl setting-field"
                           value="{{ settings.PRINT_API_PORT or '5001' }}" placeholder="5001"></div>
                <div class="form-row"><label class="form-lbl">API Key</label>
                    <input type="password" data-key="PRINT_API_KEY" class="form-ctrl setting-field"
                           value="{{ settings.PRINT_API_KEY }}" autocomplete="new-password"></div>
            </div>
        </div>

    </div>{# /printer-cards #}

    {# ════════════════════════════════════════════════════════
       NOTIFICATIONS
    ════════════════════════════════════════════════════════ #}
    <div class="settings-group-title">Notifications</div>
    <div class="api-cards-2col">
        <div class="scard">
            <div class="scard-header">
                <span class="scard-title">make.com</span>
                <span class="scard-sub">Customer emails</span>
                {% if make_test_mode %}<span class="test-mode-badge">TEST MODE ON</span>{% endif %}
            </div>
            <div class="scard-body">
                {% if make_test_mode %}
                <div class="test-mode-banner">
                    ⚠ Test mode is active — all outgoing emails are routed to the test address below instead of real customers.
                </div>
                {% endif %}
                <div class="form-row"><label class="form-lbl">Order Notify Webhook URL</label>
                    <input type="text" data-key="MAKE_ORDER_NOTIFY_URL" class="form-ctrl setting-field" value="{{ settings.MAKE_ORDER_NOTIFY_URL }}" placeholder="https://hook.eu1.make.com/…"></div>
                <div class="form-row" style="margin-top:10px"><label class="form-lbl">Test Mode</label>
                    <select data-key="MAKE_TEST_MODE" class="form-ctrl setting-field">
                        <option value="">Off — send to real customer emails</option>
                        <option value="1" {% if settings.MAKE_TEST_MODE == '1' %}selected{% endif %}>On — route all emails to test address</option>
                    </select></div>
                <div class="form-row" style="margin-top:8px"><label class="form-lbl">Test email address</label>
                    <input type="email" id="make-test-email" data-key="MAKE_TEST_EMAIL" class="form-ctrl setting-field" value="{{ settings.MAKE_TEST_EMAIL }}" placeholder="you@example.com"></div>
                <div style="display:flex;align-items:center;gap:10px;margin-top:10px">
                    <button class="action-btn btn-secondary-action" onclick="makeSendTestEmail(this)" style="white-space:nowrap">Send Test Email</button>
                    <span id="make-test-status" style="font-size:.8rem"></span>
                </div>
                <hr style="border:none;border-top:1px solid #eee;margin:14px 0">
                <div style="font-size:.8rem;color:#666;margin-bottom:8px">
                    Setting up a new Make.com scenario? Use this to send a sample request so Make.com can auto-detect the data structure.
                </div>
                <div style="display:flex;align-items:center;gap:10px">
                    <button class="action-btn btn-secondary-action" onclick="makeDetermineStructure(this)" style="white-space:nowrap">Determine Data Structure</button>
                    <span id="make-structure-status" style="font-size:.8rem"></span>
                </div>
            </div>
            <div class="scard-footer"><button class="scard-save-btn" onclick="saveCard(this)">Save</button><span class="scard-save-status"></span></div>
        </div>
    </div>

    {# ════════════════════════════════════════════════════════
       API KEYS — ERP & SHOP
    ════════════════════════════════════════════════════════ #}
    <div class="settings-group-title">API Keys — ERP &amp; Shop</div>
    <div class="api-cards-2col">

        <div class="scard">
            <div class="scard-header"><span class="scard-title">e-Računi</span><span class="scard-sub">ERP</span></div>
            <div class="scard-body">
                <div class="form-row"><label class="form-lbl">URL</label>
                    <input type="text" data-key="ERACUNI_URL" class="form-ctrl setting-field" value="{{ settings.ERACUNI_URL }}"></div>
                <div class="form-row"><label class="form-lbl">Username</label>
                    <input type="text" data-key="ERACUNI_USERNAME" class="form-ctrl setting-field" value="{{ settings.ERACUNI_USERNAME }}"></div>
                <div class="form-row"><label class="form-lbl">Password (MD5)</label>
                    <input type="password" data-key="ERACUNI_PASSWORD" class="form-ctrl setting-field" value="{{ settings.ERACUNI_PASSWORD }}" autocomplete="new-password"></div>
                <div class="form-row"><label class="form-lbl">Token</label>
                    <input type="password" data-key="ERACUNI_TOKEN" class="form-ctrl setting-field" value="{{ settings.ERACUNI_TOKEN }}" autocomplete="new-password"></div>
            </div>
            <div class="scard-footer"><button class="scard-save-btn" onclick="saveCard(this)">Save</button><span class="scard-save-status"></span></div>
        </div>

        <div class="scard">
            <div class="scard-header"><span class="scard-title">Shopify</span><span class="scard-sub">Shop</span></div>
            <div class="scard-body">
                <div class="form-row"><label class="form-lbl">Shop Domain</label>
                    <input type="text" data-key="SHOPIFY_DOMAIN" class="form-ctrl setting-field" value="{{ settings.SHOPIFY_DOMAIN }}" placeholder="yourshop.myshopify.com"></div>
                <div class="form-row"><label class="form-lbl">Shop Domain (OAuth)</label>
                    <input type="text" data-key="SHOPIFY_SHOP_DOMAIN" class="form-ctrl setting-field" value="{{ settings.SHOPIFY_SHOP_DOMAIN }}" placeholder="yourshop.myshopify.com"></div>
                <div class="form-row"><label class="form-lbl">Client ID</label>
                    <input type="text" data-key="SHOPIFY_CLIENT_ID" class="form-ctrl setting-field" value="{{ settings.SHOPIFY_CLIENT_ID }}"></div>
                <div class="form-row"><label class="form-lbl">Client Secret</label>
                    <input type="password" data-key="SHOPIFY_CLIENT_SECRET" class="form-ctrl setting-field" value="{{ settings.SHOPIFY_CLIENT_SECRET }}" autocomplete="new-password"></div>
                <div class="form-row"><label class="form-lbl">Grant Type</label>
                    <input type="text" data-key="SHOPIFY_GRANT_TYPE" class="form-ctrl setting-field" value="{{ settings.SHOPIFY_GRANT_TYPE }}" placeholder="authorization_code"></div>
                <div class="form-row"><label class="form-lbl">Access Token</label>
                    <input type="password" data-key="SHOPIFY_ACCESS_TOKEN" class="form-ctrl setting-field" value="{{ settings.SHOPIFY_ACCESS_TOKEN }}" autocomplete="new-password"></div>
                <div style="display:flex;flex-direction:column;gap:8px;margin-top:12px">
                    <div style="display:flex;align-items:center;gap:10px">
                        <button class="action-btn btn-secondary-action" onclick="shopifyRequestToken(this)" style="white-space:nowrap">Get New Access Token</button>
                        <span id="shopify-token-status" style="font-size:.8rem"></span>
                    </div>
                    <div style="display:flex;align-items:center;gap:10px">
                        <button class="action-btn btn-secondary-action" onclick="shopifyTestConnection(this)" style="white-space:nowrap">Test API Connection</button>
                        <span id="shopify-test-status" style="font-size:.8rem"></span>
                    </div>
                </div>
            </div>
            <div class="scard-footer"><button class="scard-save-btn" onclick="saveCard(this)">Save</button><span class="scard-save-status"></span></div>
        </div>

    </div>

    {# ════════════════════════════════════════════════════════
       API KEYS — SHIPPING
    ════════════════════════════════════════════════════════ #}
    <div class="settings-group-title">API Keys — Shipping</div>
    <div class="api-cards-3col">

        <div class="scard">
            <div class="scard-header"><span class="scard-title">DHL Express</span></div>
            <div class="scard-body">
                <div class="form-row"><label class="form-lbl">API Key</label>
                    <input type="password" data-key="DHL_API_KEY" class="form-ctrl setting-field" value="{{ settings.DHL_API_KEY }}" autocomplete="new-password"></div>
                <div class="form-row"><label class="form-lbl">Account Number</label>
                    <input type="text" data-key="DHL_ACCOUNT_NUMBER" class="form-ctrl setting-field" value="{{ settings.DHL_ACCOUNT_NUMBER }}"></div>
                <div class="form-row"><label class="form-lbl">Shipper Name</label>
                    <input type="text" data-key="DHL_SHIPPER_NAME" class="form-ctrl setting-field" value="{{ settings.DHL_SHIPPER_NAME }}"></div>
                <div class="form-row"><label class="form-lbl">Shipper Street</label>
                    <input type="text" data-key="DHL_SHIPPER_STREET" class="form-ctrl setting-field" value="{{ settings.DHL_SHIPPER_STREET }}"></div>
                <div class="form-row"><label class="form-lbl">City / Postal / Country</label>
                    <div class="offset-pair">
                        <input type="text" data-key="DHL_SHIPPER_CITY"    class="form-ctrl setting-field" value="{{ settings.DHL_SHIPPER_CITY }}"    placeholder="City">
                        <input type="text" data-key="DHL_SHIPPER_POSTAL"  class="form-ctrl setting-field" value="{{ settings.DHL_SHIPPER_POSTAL }}"  placeholder="Postal">
                        <input type="text" data-key="DHL_SHIPPER_COUNTRY" class="form-ctrl setting-field" value="{{ settings.DHL_SHIPPER_COUNTRY }}" placeholder="HR" style="max-width:60px">
                    </div>
                </div>
                <div class="form-row"><label class="form-lbl">Email / Phone</label>
                    <div class="offset-pair">
                        <input type="text" data-key="DHL_SHIPPER_EMAIL" class="form-ctrl setting-field" value="{{ settings.DHL_SHIPPER_EMAIL }}" placeholder="Email">
                        <input type="text" data-key="DHL_SHIPPER_PHONE" class="form-ctrl setting-field" value="{{ settings.DHL_SHIPPER_PHONE }}" placeholder="Phone">
                    </div>
                </div>
            </div>
            <div class="scard-footer"><button class="scard-save-btn" onclick="saveCard(this)">Save</button><span class="scard-save-status"></span></div>
        </div>

        <div class="scard">
            <div class="scard-header"><span class="scard-title">DPD</span></div>
            <div class="scard-body">
                <div class="form-row"><label class="form-lbl">API URL</label>
                    <input type="text" data-key="DPD_API_URL" class="form-ctrl setting-field" value="{{ settings.DPD_API_URL }}"></div>
                <div class="form-row"><label class="form-lbl">API Key</label>
                    <input type="password" data-key="DPD_API_KEY" class="form-ctrl setting-field" value="{{ settings.DPD_API_KEY }}" autocomplete="new-password"></div>
            </div>
            <div class="scard-footer"><button class="scard-save-btn" onclick="saveCard(this)">Save</button><span class="scard-save-status"></span></div>
        </div>

        <div class="scard">
            <div class="scard-header"><span class="scard-title">Paket24 (HP Pošta)</span></div>
            <div class="scard-body">
                <div class="form-row"><label class="form-lbl">API URL</label>
                    <input type="text" data-key="PAKET24_API_URL" class="form-ctrl setting-field" value="{{ settings.PAKET24_API_URL }}"></div>
                <div class="form-row"><label class="form-lbl">API Key</label>
                    <input type="password" data-key="PAKET24_API_KEY" class="form-ctrl setting-field" value="{{ settings.PAKET24_API_KEY }}" autocomplete="new-password"></div>
            </div>
            <div class="scard-footer"><button class="scard-save-btn" onclick="saveCard(this)">Save</button><span class="scard-save-status"></span></div>
        </div>

    </div>

    {# ════════════════════════════════════════════════════════
       SHIPPING METHOD MAPPING
    ════════════════════════════════════════════════════════ #}
    <div class="settings-group-title">Shipping Method Mapping</div>
    <div class="scard" style="max-width:720px">
        <div class="scard-header">
            <span class="scard-title">Keyword Rules</span>
            <span class="scard-sub">First match wins · FREE_SHIPPING = DPD for EU, DHL for non-EU</span>
        </div>
        <div class="scard-body" style="padding:0">
            <table class="shipping-rules-table" id="shipping-rules-table">
                <thead>
                    <tr>
                        <th style="width:50px">#</th>
                        <th>Keyword (case-insensitive substring match)</th>
                        <th style="width:160px">Carrier</th>
                        <th style="width:60px"></th>
                    </tr>
                </thead>
                <tbody id="shipping-rules-body">
                    <tr><td colspan="4" style="text-align:center;color:#aaa;padding:16px">Loading…</td></tr>
                </tbody>
            </table>
        </div>
        <div class="scard-footer" style="display:flex;gap:8px">
            <button class="action-btn btn-secondary-action" onclick="srAddRule()">+ Add Rule</button>
            <button class="action-btn btn-secondary-action" onclick="srResetDefaults()">Reset Defaults</button>
            <span id="sr-status" style="margin-left:auto;font-size:0.78rem;color:var(--text-muted);align-self:center"></span>
        </div>
    </div>

    {# ════════════════════════════════════════════════════════
       USER ACCOUNTS
    ════════════════════════════════════════════════════════ #}
    <div class="settings-group-title">User Accounts</div>
    <div class="user-cards">

        <div class="scard">
            <div class="scard-header"><span class="scard-title">Accounts</span></div>
            <div class="scard-body" style="padding:0">
                <table class="users-table">
                    <thead><tr><th>Email</th><th>Created</th><th></th></tr></thead>
                    <tbody>
                        {% for u in users %}
                        <tr>
                            <td>{{ u.email }}{% if u.id == current_user.id %} <span class="user-you">(you)</span>{% endif %}</td>
                            <td class="user-date">{{ u.created_at[:10] if u.created_at else '—' }}</td>
                            <td>
                                {% if u.id != current_user.id %}
                                <form method="POST" action="/settings/users/{{ u.id }}/delete"
                                      onsubmit="return confirm('Delete {{ u.email }}?')">
                                    <button type="submit" class="user-delete-btn">Delete</button>
                                </form>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <div class="scard">
            <div class="scard-header"><span class="scard-title">Add User</span></div>
            <div class="scard-body">
                <form method="POST" action="/settings/users/add" class="settings-fields-grid">
                    <div class="form-row"><label class="form-lbl">Email</label>
                        <input type="email" name="email" class="form-ctrl" placeholder="name@soldered.com" required></div>
                    <div class="form-row"><label class="form-lbl">Password</label>
                        <input type="password" name="password" class="form-ctrl" autocomplete="new-password" required></div>
                    <div class="form-row"><label class="form-lbl">Confirm Password</label>
                        <input type="password" name="confirm" class="form-ctrl" autocomplete="new-password" required></div>
                    <div class="settings-row-actions" style="padding-top:4px">
                        <button type="submit" class="action-btn btn-primary-action">Add User</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="scard">
            <div class="scard-header"><span class="scard-title">Session</span></div>
            <div class="scard-body">
                <div class="form-row">
                    <span class="form-lbl">Logged in as</span>
                    <span>{{ current_user.email }}</span>
                </div>
                <div style="margin-top:14px">
                    <a href="/logout" class="action-btn btn-secondary-action"
                       style="display:inline-block;text-decoration:none;text-align:center;padding:9px 22px">Sign Out</a>
                </div>
            </div>
        </div>

    </div>

</div>
</div>

{# ── Toast notification ── #}
<div id="settings-toast" class="settings-toast" aria-live="polite"></div>

<!-- ═══════════════════════════════════════════════════════════════════════════
     JAVASCRIPT
═══════════════════════════════════════════════════════════════════════════ -->
<script>
// ── Tab switching ──────────────────────────────────────────────────────────────
function switchTab(tabId, btn) {
    document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
    document.querySelectorAll('.app-tab').forEach(b => b.classList.remove('active'));
    document.getElementById('tab-' + tabId).classList.add('active');
    btn.classList.add('active');
}

// Restore tab from URL ?tab= param (used after settings saves)
(function () {
    const params = new URLSearchParams(window.location.search);
    const tab = params.get('tab');
    if (tab) {
        const btn = document.querySelector(`.app-tab[data-tab="${tab}"]`);
        if (btn) switchTab(tab, btn);
    }
})();

// ── Process Orders tab ─────────────────────────────────────────────────────────
let _poOrders  = [];
let _poLoaded  = false;
let _poCurrent = null;

function poOnActivate() {
    if (!_poLoaded) poLoad();
}

async function poLoad() {
    const btn = document.getElementById('po-refresh-btn');
    if (btn) { btn.disabled = true; btn.textContent = 'Loading…'; }
    try {
        const r = await fetch('/orders/processing');
        const data = await r.json();
        _poOrders = data.orders || [];
        _poLoaded = true;
        poRenderQueue();
        if (_poOrders.length > 0) {
            poSelectOrder(_poOrders[0]);
        } else {
            poShowEmpty();
        }
    } catch (e) {
        document.getElementById('po-queue').innerHTML =
            `<div style="padding:8px;color:#c00;font-size:0.85rem">Load failed: ${e}</div>`;
    } finally {
        if (btn) { btn.disabled = false; btn.textContent = 'Refresh Orders'; }
    }
}

function poRenderQueue() {
    const queueEl = document.getElementById('po-queue');
    if (!_poOrders.length) {
        queueEl.innerHTML = '<div style="padding:8px;color:#aaa;font-size:0.85rem">No processing orders.</div>';
        return;
    }
    const header = `<div class="queue-header">
        <span class="queue-col-process">PROCESS</span>
        <span class="queue-col-num">ORDER</span>
    </div>`;
    const rows = _poOrders.map((o, i) =>
        `<div class="queue-item${i === 0 ? ' active' : ''}" data-number="${o.number}" onclick="poQueueClick(this,'${o.number}')">
            <span class="queue-col-process">
                <span class="batch-num"></span>
                <input type="checkbox" class="po-process-cb" checked
                       onchange="poUpdateBatch()" onclick="event.stopPropagation()">
            </span>
            <span class="queue-col-num">${o.number}</span>
        </div>`
    ).join('');
    queueEl.innerHTML = header + rows;
    poUpdateBatch();
}

function poUpdateBatch() {
    const items = document.querySelectorAll('#po-queue .queue-item');
    let batchPos = 0;
    items.forEach(item => {
        const cb     = item.querySelector('.po-process-cb');
        const numEl  = item.querySelector('.batch-num');
        item.classList.remove('batch');
        if (numEl) numEl.textContent = '';
        if (cb && cb.checked && batchPos < 4) {
            batchPos++;
            item.classList.add('batch');
            if (numEl) numEl.textContent = batchPos;
        }
    });
}

function poQueueClick(el, orderNum) {
    document.querySelectorAll('#po-queue .queue-item').forEach(i => i.classList.remove('active'));
    el.classList.add('active');
    const order = _poOrders.find(o => o.number === orderNum);
    if (order) poSelectOrder(order);
}

function poSelectOrder(order) {
    _poCurrent = order;

    document.getElementById('po-number').textContent = order.number || '—';

    const rawDate = (order.date || '').slice(0, 10);
    document.getElementById('po-date').textContent = rawDate.length === 10
        ? rawDate.slice(8,10)+'.'+rawDate.slice(5,7)+'.'+rawDate.slice(0,4)+'.'
        : rawDate || '—';

    document.getElementById('po-total').textContent = order.totalAmountInDomCurr != null
        ? parseFloat(order.totalAmountInDomCurr).toFixed(2) + '\u00a0' + (order.documentCurrency || 'EUR') : '—';

    const carrierLabel = order.carrier || order.deliveryMethod || '—';
    const rawMethod    = (order.deliveryMethod && order.carrier !== order.deliveryMethod)
        ? order.deliveryMethod : null;
    document.getElementById('po-delivery').innerHTML =
        `<span>${carrierLabel}</span>` +
        (rawMethod ? `<div class="po-delivery-raw">${rawMethod}</div>` : '');

    // Buyer address
    const buyerLines = [];
    if (order.buyerName)  buyerLines.push(`<div class="buyer-company">${order.buyerName}</div>`);
    if (order.buyerName1) buyerLines.push(`<div class="buyer-name">${order.buyerName1}</div>`);
    if (order.buyerStreet) buyerLines.push(`<div>${order.buyerStreet}</div>`);
    const buyerPC = [order.buyerPostalCode, order.buyerCity].filter(Boolean).join(' ');
    if (buyerPC) buyerLines.push(`<div>${buyerPC}</div>`);
    if (order.buyerCountry) buyerLines.push(`<div>${order.buyerCountry}</div>`);
    if (order.buyerEMail) buyerLines.push(`<div class="buyer-email">${order.buyerEMail}</div>`);
    if (order.buyerPhone) buyerLines.push(`<div>Tel: ${order.buyerPhone}</div>`);
    document.getElementById('po-buyer').innerHTML = buyerLines.join('') || '<div>—</div>';

    // Shipping address
    const hasDelivery = order.deliveryStreet || order.deliveryCity;
    const shipEl = document.getElementById('po-shipping-addr');
    if (hasDelivery) {
        const dlines = [];
        if (order.deliveryName)    dlines.push(`<div class="buyer-name">${order.deliveryName}</div>`);
        if (order.deliveryStreet)  dlines.push(`<div>${order.deliveryStreet}</div>`);
        const dpc = [order.deliveryPostalCode, order.deliveryCity].filter(Boolean).join(' ');
        if (dpc) dlines.push(`<div>${dpc}</div>`);
        if (order.deliveryCountry) dlines.push(`<div>${order.deliveryCountry}</div>`);
        shipEl.innerHTML = dlines.join('');
        shipEl.classList.remove('po-same-addr');
    } else {
        shipEl.innerHTML = 'Same as buyer address';
        shipEl.classList.add('po-same-addr');
    }

    // Items
    const items = Array.isArray(order.items) ? order.items : [];
    const itemsEl = document.getElementById('po-items');
    if (!items.length) {
        itemsEl.innerHTML = '<tr><td colspan="3" style="color:#aaa">No items</td></tr>';
    } else {
        itemsEl.innerHTML = items.map(it => {
            const qty  = Math.round(parseFloat(it.quantity || it.qty || 1));
            const sku  = it.productCode || it.sku || '?';
            const name = it.description || it.productName || it.name || sku;
            return `<tr><td>${qty}</td><td>${sku}</td><td>${name}</td></tr>`;
        }).join('');
    }

    resetSteps();
}

function poShowEmpty() {
    document.getElementById('po-number').textContent  = '—';
    document.getElementById('po-date').textContent    = '—';
    document.getElementById('po-total').textContent   = '—';
    document.getElementById('po-delivery').textContent = '—';
    document.getElementById('po-buyer').innerHTML = '';
    const emptyShip = document.getElementById('po-shipping-addr');
    emptyShip.innerHTML = '';
    emptyShip.classList.remove('po-same-addr');
    document.getElementById('po-items').innerHTML =
        '<tr><td colspan="3" style="color:#aaa">No processing orders.</td></tr>';
}

function toggleSkip() {
    const active = document.querySelector('#po-queue .queue-item.active');
    if (active) active.classList.toggle('skipped');
}

// ── Step helpers ───────────────────────────────────────────────────────────────
function setStepState(stepNum, state) {
    // state: 'pending' | 'running' | 'ok' | 'error' | 'disabled'
    const row = document.getElementById('step-' + stepNum);
    if (!row) return;
    const check = row.querySelector('.step-check');
    check.className = 'step-check ' + state;
}

function resetSteps() {
    for (let i = 1; i <= 5; i++) setStepState(i, 'pending');
}

// ── Auto Process ───────────────────────────────────────────────────────────────

function _getBatchNumbers() {
    const batch = [];
    document.querySelectorAll('#po-queue .queue-item').forEach(item => {
        const cb = item.querySelector('.po-process-cb');
        if (cb && cb.checked && batch.length < 4) batch.push(item.dataset.number);
    });
    return batch;
}

async function autoProcess() {
    const batch = _getBatchNumbers();
    if (!batch.length) { alert('Select at least one order to process.'); return; }

    const btn = document.getElementById('po-process-btn');
    const statusEl = document.getElementById('po-invoice-status');
    btn.disabled = true;
    btn.textContent = 'Processing…';
    resetSteps();

    // Phase 1: invoice + PDF print (steps 1-3) via SSE
    try {
        await _runInvoiceStream(batch, statusEl);
    } catch(e) {
        statusEl.textContent = '⚠ Invoice stream error';
    }

    btn.disabled = false;
    btn.textContent = 'Auto Process';

    // Phase 2: fetch packing data and show packing screen
    await _openPackingScreen(batch, false);
}

function _runInvoiceStream(batch, statusEl) {
    return new Promise((resolve, reject) => {
        const qs = encodeURIComponent(batch.join(','));
        const es = new EventSource(`/orders/invoice-stream?orders=${qs}`);
        es.onmessage = ev => {
            const d = JSON.parse(ev.data);
            if (d.done) { es.close(); resolve(); return; }
            if (d.step) setStepState(d.step, d.status);
            if (d.order && statusEl) {
                const idx = batch.indexOf(d.order);
                const label = idx >= 0 ? `[${idx+1}/${batch.length}] ${d.order}` : d.order;
                statusEl.textContent = `${label}: ${d.message || ''}`;
            }
        };
        es.onerror = () => { es.close(); reject(); };
    });
}

async function _openPackingScreen(batch, testMode) {
    const statusEl = document.getElementById('packing-print-status');
    statusEl.textContent = 'Loading order data…';

    let orders;
    if (testMode) {
        orders = _fakePackingOrders();
    } else {
        const qs = encodeURIComponent(batch.join(','));
        const r = await fetch(`/orders/batch-items?orders=${qs}`);
        const data = await r.json();
        orders = data.orders || [];
    }

    _packingRender(orders);
    document.getElementById('packing-screen').style.display = 'flex';
    // Reset column-completion tracking and scan bar
    _columnCompleted.clear();
    const _si = document.getElementById('packing-scan-input');
    _si.value = ''; _si.placeholder = 'Scan barcode…';
    document.getElementById('packing-scan-result').textContent = '';
    document.getElementById('packing-scan-result').className = 'packing-scan-result';
    document.getElementById('packing-scan-letter').textContent = '—';
    _si.focus();

    // Auto-print labels
    statusEl.textContent = 'Printing labels…';
    try {
        const url = testMode ? '/orders/print-test-labels' : '/orders/print-batch-labels';
        const body = testMode ? {} : { orders: batch };
        const r = await fetch(url, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(body),
        });
        const data = await r.json();
        // Apply barcode_id hash map returned by the server so the packing screen
        // uses the same short ID that was printed on the labels.
        const hashMap = data.hash_map || {};
        orders.forEach(o => {
            o.barcode_id = hashMap[o.number] || o.number;
        });
        _packingRender(orders);   // re-render now that barcode_ids are known
        statusEl.textContent = data.ok
            ? `✓ ${data.printed} label${data.printed !== 1 ? 's' : ''} printed`
            : `⚠ ${(data.errors || [data.error]).join('; ')}`;
    } catch(e) {
        statusEl.textContent = '⚠ Label printing failed';
    } finally {
        if (window.plPollNow) await window.plPollNow();
    }
}

const _BATCH_LETTERS = ['A', 'B', 'C', 'D'];
let _packingOrders = [];

function _packingRender(orders) {
    _packingOrders = orders;
    const cols = document.getElementById('packing-columns');
    if (!orders.length) {
        cols.innerHTML = '<div style="padding:32px;color:#aaa;font-size:1rem;">No order data.</div>';
        return;
    }
    cols.style.gridTemplateColumns = `repeat(${Math.min(orders.length, 4)}, 1fr)`;
    cols.innerHTML = orders.map((order, idx) => {
        const letter = _BATCH_LETTERS[idx] || String(idx + 1);
        const bid = order.barcode_id || order.number;
        const cards = (order.items || []).map(it => `
            <div class="packing-card" data-order="${bid}" data-sku="${it.sku}">
                <div class="packing-card-qty">x${it.qty}</div>
                <div class="packing-card-name">${it.name || it.sku}</div>
                <div class="packing-card-sku">${it.sku}</div>
                ${it.location ? `<div class="packing-card-loc">${it.location}</div>` : ''}
                <button class="packing-copy-btn" onclick="packingCopyBarcode('${bid}','${it.sku}',this)" title="Copy barcode to clipboard">⧉</button>
            </div>`).join('');
        return `
            <div class="packing-col" id="packing-col-${bid}">
                <div class="packing-col-hdr">
                    <div class="packing-col-letter">${letter}</div>
                    <div class="packing-col-meta">
                        <div class="packing-col-num">${order.number}</div>
                        <div class="packing-col-buyer">${order.buyer_name || ''}</div>
                        ${order.delivery ? `<div class="packing-col-delivery">${order.delivery}</div>` : ''}
                    </div>
                    <button class="packing-cancel-btn" onclick="packingCancelOrder('${order.number}', '${order.buyer_name || ''}', '${bid}', this)" title="Cancel processing">✕</button>
                </div>
                <div class="packing-col-body">${cards || '<div style="padding:12px;color:#aaa;font-size:0.85rem;">No items</div>'}</div>
            </div>`;
    }).join('');
}

function packingClose() {
    document.getElementById('packing-screen').style.display = 'none';
    _packingOrders = [];
}

function packingCopyBarcode(bid, sku, btn) {
    const barcode = bid + sku;
    navigator.clipboard.writeText(barcode).then(() => {
        const orig = btn.textContent;
        btn.textContent = '✓';
        btn.style.color = '#4ade80';
        setTimeout(() => { btn.textContent = orig; btn.style.color = ''; }, 1200);
    });
}

function _checkAllOrdersDone() {
    const total = _packingOrders.length;
    if (!total) return;
    const done = _packingOrders.filter(o => {
        const bid = o.barcode_id || o.number;
        return _columnCompleted.has(bid) || document.getElementById(`packing-col-${bid}`)?.classList.contains('col-cancelled');
    }).length;
    if (done === total) {
        // All columns confirmed or cancelled — close packing screen and sync
        setTimeout(() => {
            packingClose();
            aoSync();
        }, 1500);
    }
}

function packingScanSubmit() {
    const input = document.getElementById('packing-scan-input');
    const raw = input.value.trim();
    if (!raw) return;

    // Parse barcode: last 6 chars = SKU, rest = barcode_id (order number or hash)
    const sku = raw.slice(-6);
    const scannedId = raw.slice(0, -6);

    // Clear input and show last scan as placeholder
    input.value = '';
    input.placeholder = raw;

    const resultEl = document.getElementById('packing-scan-result');
    const letterEl = document.getElementById('packing-scan-letter');

    // Match by barcode_id (may be a short hash for non-S order numbers)
    const order = _packingOrders.find(o => (o.barcode_id || o.number) === scannedId);
    if (!order) {
        letterEl.textContent = '?';
        resultEl.className = 'packing-scan-result scan-error';
        resultEl.textContent = `Order "${scannedId}" not found`;
        input.focus();
        return;
    }

    const idx = _packingOrders.indexOf(order);
    const letter = _BATCH_LETTERS[idx] || String(idx + 1);
    letterEl.textContent = letter;

    const item = (order.items || []).find(it => it.sku === sku);
    if (!item) {
        resultEl.className = 'packing-scan-result scan-error';
        resultEl.textContent = `SKU "${sku}" not in order ${order.number}`;
        input.focus();
        return;
    }

    resultEl.className = 'packing-scan-result scan-ok';
    resultEl.innerHTML =
        `<span class="scan-r-order">${order.number}</span>` +
        `<span class="scan-r-sep">·</span>` +
        `<span class="scan-r-name">${item.name || item.sku}</span>` +
        `<span class="scan-r-sep">·</span>` +
        `<span class="scan-r-qty">×${item.qty}</span>`;

    // Mark the card in the columns as packed (cards use barcode_id as data-order)
    const bid = order.barcode_id || order.number;
    const card = document.querySelector(`.packing-card[data-order="${bid}"][data-sku="${sku}"]`);
    if (card) {
        card.classList.add('packed');
        _checkColumnComplete(bid, order.number, idx, letter);
    }

    input.focus();
}

// ── Column completion → shipping label + confirmation ────────────────────────

const _columnCompleted = new Set();

function _checkColumnComplete(bid, orderNum, idx, letter) {
    if (_columnCompleted.has(bid)) return;
    const cards = document.querySelectorAll(`.packing-card[data-order="${bid}"]`);
    if (!cards.length) return;
    const allPacked = [...cards].every(c => c.classList.contains('packed'));
    if (allPacked) {
        _columnCompleted.add(bid);
        // Mark the whole column green
        const col = cards[0].closest('.packing-col');
        if (col) col.classList.add('col-complete');
        _columnComplete(bid, orderNum, letter);
    }
}

async function _columnComplete(bid, orderNum, letter) {
    const statusEl = document.getElementById('packing-print-status');
    statusEl.textContent = `Column ${letter}: printing shipping label…`;

    const orderObj = _packingOrders.find(o => o.number === orderNum);
    const deliveryMethod = orderObj ? (orderObj.delivery || '') : '';

    let tracking = null;
    try {
        const r = await fetch('/orders/print-shipping-label', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ order_number: orderNum, barcode_id: bid, delivery_method: deliveryMethod }),
        });
        const data = await r.json();
        if (data.ok) {
            tracking = data.tracking_number;
            statusEl.textContent = `✓ Shipping label printed for ${orderNum}`;
            if (window.plPollNow) window.plPollNow();
        } else {
            statusEl.textContent = `⚠ ${data.error}`;
        }
    } catch (e) {
        statusEl.textContent = '⚠ Shipping label print failed';
    }

    _openShipConfirm(bid, orderNum, letter, tracking);
}

// ── Shipping confirmation popup ───────────────────────────────────────────────

let _shipPendingOrder    = null;   // real order number → sent to server
let _shipPendingBid      = null;   // barcode_id → expected in order scan
let _shipPendingTracking = null;
let _shipConfirmedOrder  = false;
let _shipConfirmedTrack  = false;

function _openShipConfirm(bid, orderNum, letter, tracking) {
    _shipPendingOrder    = orderNum;
    _shipPendingBid      = bid;
    _shipPendingTracking = tracking;
    _shipConfirmedOrder  = false;
    _shipConfirmedTrack  = !tracking; // no tracking → skip that slot

    document.getElementById('ship-confirm-letter').textContent    = letter;
    document.getElementById('ship-confirm-order-num').textContent = orderNum;
    document.getElementById('ship-slot-tracking-val').textContent = tracking || '(none)';
    document.getElementById('ship-slot-order-val').textContent    = bid;

    const trackSlot = document.getElementById('ship-slot-tracking');
    const orderSlot = document.getElementById('ship-slot-order');
    trackSlot.className = 'ship-slot' + (!tracking ? ' ship-slot-done' : '');
    orderSlot.className = 'ship-slot';

    const input = document.getElementById('ship-scan-input');
    input.value = ''; input.placeholder = 'Scan barcode…';
    document.getElementById('ship-confirm-status').textContent = '';
    document.getElementById('ship-confirm-status').className   = 'ship-confirm-status';
    document.getElementById('ship-confirm-btn').disabled       = true;
    document.getElementById('ship-confirm-btn').textContent    = 'Confirm & Send Email';

    document.getElementById('ship-confirm-overlay').style.display = 'flex';
    input.focus();
    _updateShipConfirmBtn();
}

function shipScanSubmit() {
    const input = document.getElementById('ship-scan-input');
    const val = input.value.trim();
    if (!val) return;
    input.value = ''; input.placeholder = val;

    const statusEl = document.getElementById('ship-confirm-status');

    if (_shipPendingTracking && val === _shipPendingTracking) {
        _shipConfirmedTrack = true;
        document.getElementById('ship-slot-tracking').className = 'ship-slot ship-slot-done';
        statusEl.textContent = '✓ Tracking number matched';
        statusEl.className   = 'ship-confirm-status ok';
    } else if (val === _shipPendingBid) {
        _shipConfirmedOrder = true;
        document.getElementById('ship-slot-order').className = 'ship-slot ship-slot-done';
        statusEl.textContent = '✓ Order barcode matched';
        statusEl.className   = 'ship-confirm-status ok';
    } else {
        statusEl.textContent = `⚠ "${val}" did not match`;
        statusEl.className   = 'ship-confirm-status err';
    }

    _updateShipConfirmBtn();
    input.focus();
}

function _updateShipConfirmBtn() {
    const ready = _shipConfirmedOrder && _shipConfirmedTrack;
    document.getElementById('ship-confirm-btn').disabled = !ready;
    if (ready) shipConfirm();
}

function shipConfirmAbort() {
    shipConfirmClose();
    packingCancelOrder(_shipPendingOrder, '', _shipPendingBid, null);
}

async function shipConfirm() {
    const btn      = document.getElementById('ship-confirm-btn');
    const statusEl = document.getElementById('ship-confirm-status');
    btn.disabled = true;
    btn.textContent = 'Sending…';
    try {
        const r = await fetch('/orders/confirm-packed', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ order_number: _shipPendingOrder, tracking_number: _shipPendingTracking }),
        });
        const data = await r.json();
        if (data.ok) {
            statusEl.textContent = `✓ Email sent! If it doesn't arrive, check that the Make.com scenario is active and not paused.`;
            statusEl.className   = 'ship-confirm-status ok';
            setTimeout(() => { shipConfirmClose(); _checkAllOrdersDone(); }, 3000);
        } else {
            statusEl.textContent = `⚠ ${data.error}`;
            statusEl.className   = 'ship-confirm-status err';
            btn.disabled = false;
            btn.textContent = 'Confirm & Send Email';
        }
    } catch (e) {
        statusEl.textContent = '⚠ Network error';
        statusEl.className   = 'ship-confirm-status err';
        btn.disabled = false;
        btn.textContent = 'Confirm & Send Email';
    }
}

function shipConfirmClose() {
    document.getElementById('ship-confirm-overlay').style.display = 'none';
    document.getElementById('packing-scan-input').focus();
}

async function packingCancelOrder(orderNum, buyerName, bid, btn) {
    if (!confirm(`Are you sure you want to stop processing order ${orderNum}?\n\nThis will print a cancellation label on the large printer.`)) return;

    if (btn) btn.disabled = true;
    const colId = bid || orderNum;
    const col = document.getElementById(`packing-col-${colId}`);
    if (col) col.classList.add('col-cancelled');

    try {
        const r = await fetch('/orders/cancel-packing', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ order_number: orderNum, buyer_name: buyerName }),
        });
        const data = await r.json();
        if (!data.ok) {
            alert(`Failed to print cancellation label: ${data.error}`);
            if (btn) btn.disabled = false;
            if (col) col.classList.remove('col-cancelled');
        } else {
            _checkAllOrdersDone();
        }
    } catch (e) {
        alert(`Network error: ${e}`);
        if (btn) btn.disabled = false;
        if (col) col.classList.remove('col-cancelled');
    }
}

// ── Test packing screen ─────────────────────────────────────────────────────

function _fakePackingOrders() {
    return [
        { number: 'S10001', buyer_name: 'Marko Horvat', delivery: 'DHL', items: [
            { sku: '333100', name: 'Arduino Uno R3',         qty: 2, location: 'A1-01' },
            { sku: '333101', name: 'LED Strip 1m RGB',       qty: 1, location: 'B2-03' },
            { sku: '333102', name: 'Resistor Kit 600pc',     qty: 3, location: 'A3-07' },
        ]},
        { number: 'S10002', buyer_name: 'Jana Kovač', delivery: 'DPD', items: [
            { sku: '333200', name: 'Raspberry Pi 4 4GB',         qty: 1, location: 'C1-02' },
            { sku: '333201', name: 'Power Supply 5V 3A',         qty: 1, location: 'D2-01' },
            { sku: '333202', name: 'MicroSD Card 32GB',          qty: 2, location: 'A1-03' },
            { sku: '333203', name: 'HDMI Cable 1m',              qty: 1, location: 'B3-05' },
            { sku: '333204', name: 'GPIO Breakout Board',        qty: 1, location: 'C2-04' },
            { sku: '333205', name: 'Breadboard 830pt',           qty: 2, location: 'A2-02' },
            { sku: '333206', name: 'Jumper Wires M-F 40pc',      qty: 1, location: 'B1-06' },
            { sku: '333207', name: 'Resistor Kit 600pc',         qty: 1, location: 'A3-07' },
            { sku: '333208', name: 'Capacitor Kit 300pc',        qty: 1, location: 'A3-08' },
            { sku: '333209', name: 'LED Assortment 100pc',       qty: 1, location: 'B2-09' },
            { sku: '333210', name: 'Arduino Nano',               qty: 3, location: 'A1-01' },
            { sku: '333211', name: 'USB-C Cable 2m',             qty: 2, location: 'D1-03' },
            { sku: '333212', name: 'Heat Shrink Tubes Kit',      qty: 1, location: 'C3-01' },
            { sku: '333213', name: 'Multimeter DT830',           qty: 1, location: 'D3-02' },
            { sku: '333214', name: 'Soldering Iron 60W',         qty: 1, location: 'D2-05' },
            { sku: '333215', name: 'Solder Wire 100g',           qty: 2, location: 'D2-06' },
            { sku: '333216', name: 'Relay Module 5V',            qty: 4, location: 'B1-07' },
            { sku: '333217', name: 'HC-SR04 Ultrasonic Sensor',  qty: 2, location: 'C1-08' },
            { sku: '333218', name: 'L298N Motor Driver',         qty: 1, location: 'C2-09' },
            { sku: '333219', name: 'DS18B20 Temp Sensor',        qty: 3, location: 'A2-10' },
        ]},
        { number: 'S10003', buyer_name: 'Klaus Müller', delivery: 'GLS', items: [
            { sku: '333300', name: 'ESP32 Dev Board',        qty: 4, location: 'A2-05' },
            { sku: '333301', name: 'OLED Display 0.96"',     qty: 2, location: 'B1-04' },
            { sku: '333302', name: 'DHT22 Temp Sensor',      qty: 1, location: 'A1-08' },
        ]},
        { number: '2026-00044', buyer_name: 'OŠ Nikola Tesla Zagreb', delivery: 'Osobno preuzimanje', items: [
            { sku: '333400', name: 'Jumper Wires 40pc M-M',  qty: 5, location: 'B3-02' },
            { sku: '333100', name: 'Arduino Uno R3',          qty: 10, location: 'A1-01' },
            { sku: '333205', name: 'Breadboard 830pt',        qty: 10, location: 'A2-02' },
        ]},
    ];
}

async function packingTest() {
    await _openPackingScreen([], true);
}


// ── All Orders tab ─────────────────────────────────────────────────────────────
let _aoOrders = [];
let _aoLoaded = false;
document.addEventListener('keydown', e => { if (e.key === 'Escape') { document.getElementById('order-modal-overlay').classList.remove('active'); } });

let _aoAgeTicker = null;
function aoOnActivate() {
    aoUpdateSyncAge();
    if (_aoAgeTicker) clearInterval(_aoAgeTicker);
    _aoAgeTicker = setInterval(aoUpdateSyncAge, 30000);
    if (!_aoLoaded) aoLoad();
}

async function aoLoad() {
    const btn = document.getElementById('ao-sync-btn');
    btn.disabled = true;
    btn.textContent = 'Loading…';
    try {
        const r = await fetch('/orders/list');
        const data = await r.json();
        _aoOrders = data.orders || [];
        aoRender(_aoOrders);
        _aoLoaded = true;
    } catch (e) {
        document.getElementById('orders-tbody').innerHTML =
            `<tr><td colspan="10" class="table-empty">Load failed: ${e}</td></tr>`;
    } finally {
        btn.disabled = false;
        btn.innerHTML = '<span>⟳ Sync from e-računi</span><span class="tab-sync-sub">refresh orders</span>';
    }
}

const AO_STATUS_LABELS = {
    Draft: 'Draft', Opened: 'Opened', Processing: 'Processing',
    OnHold: 'On Hold', PartialDelivery: 'Partial Delivery',
    CompletedDelivery: 'Completed', CompletedDeliveryAndSettledInvoice: 'Completed & Invoiced',
    Cancelled: 'Cancelled',
};
const AO_STATUS_CLASS = {
    Draft: 'status-onhold', Opened: 'status-opened', Processing: 'status-processing',
    OnHold: 'status-onhold', PartialDelivery: 'status-processing',
    CompletedDelivery: 'status-completed', CompletedDeliveryAndSettledInvoice: 'status-completed',
    Cancelled: 'status-cancelled',
};

function aoRender(orders) {
    const STATUS_LABELS = AO_STATUS_LABELS;
    const STATUS_CLASS  = AO_STATUS_CLASS;
    if (!orders.length) {
        document.getElementById('orders-tbody').innerHTML =
            '<tr><td colspan="10" class="table-empty">No orders found. Click "Sync from e-računi" to fetch.</td></tr>';
        return;
    }
    const rows = orders.map(o => {
        const items = Array.isArray(o.items) ? o.items : [];
        const itemCount = items.length;
        const itemSummary = items.map(it => {
            const qty  = Math.round(parseFloat(it.quantity || it.qty || 1));
            const name = it.description || it.productName || it.name || it.productCode || '?';
            return `${qty}× ${name}`;
        }).join(' | ');
        const itemTooltipLines = items.map(it => {
            const qty  = Math.round(parseFloat(it.quantity || it.qty || 1));
            const sku  = it.productCode || it.sku || '?';
            const name = it.description || it.productName || it.name || sku;
            return `<span>${qty}× <b>${sku}</b> – ${name}</span>`;
        }).join('');
        const status = o.status || '';
        const label  = STATUS_LABELS[status] || status;
        const cls    = STATUS_CLASS[status]  || 'status-opened';
        const rawDate = (o.date || '').slice(0, 10);
        const date = rawDate.length === 10
            ? rawDate.slice(8, 10) + '.' + rawDate.slice(5, 7) + '.' + rawDate.slice(0, 4)
            : rawDate;
        const currency = o.documentCurrency || 'EUR';
        const total  = o.totalAmountInDomCurr != null
            ? parseFloat(o.totalAmountInDomCurr).toFixed(2) + '\u00a0' + currency : '—';
        const lang = o.language || '—';
        const langCls = lang === 'HR' ? 'lang-hr' : lang === 'DE' ? 'lang-de' : 'lang-en';
        return `<tr class="order-row" data-status="${status}" data-number="${o.number || ''}" onclick="aoModalOpen(this)">
            <td class="order-num-cell">${o.number || ''}</td>
            <td>${date}</td>
            <td>${o.buyerName || ''}</td>
            <td>${itemCount}</td>
            <td class="items-cell">${itemSummary}</td>
            <td><span class="status-badge ${cls}">${label}</span></td>
            <td class="col-shipping">
                <span class="carrier-badge">${o.carrier || o.deliveryMethod || ''}</span>
                ${o.deliveryMethod && o.carrier !== o.deliveryMethod
                    ? `<div class="col-shipping-raw">${o.deliveryMethod}</div>` : ''}
            </td>
            <td class="col-country">${o.buyerCountry || ''}</td>
            <td><span class="lang-badge ${langCls}">${lang}</span></td>
            <td class="col-total">${total}</td>
        </tr>`;
    });
    document.getElementById('orders-tbody').innerHTML = rows.join('');

}

let _aoModalOrder = null;

function aoModalOpen(row) {
    const number = row.dataset.number;
    _aoModalOrder = _aoOrders.find(o => o.number === number);
    if (!_aoModalOrder) return;
    const o = _aoModalOrder;
    const status = o.status || '';
    const label  = AO_STATUS_LABELS[status] || status;
    const cls    = AO_STATUS_CLASS[status]  || 'status-opened';
    const rawDate = (o.date || '').slice(0, 10);
    const date = rawDate.length === 10
        ? rawDate.slice(8, 10) + '.' + rawDate.slice(5, 7) + '.' + rawDate.slice(0, 4)
        : rawDate;
    const items = Array.isArray(o.items) ? o.items : [];

    document.getElementById('order-modal-title').innerHTML =
        `<span class="order-num-cell">${o.number || ''}</span> &nbsp; <span class="status-badge ${cls}">${label}</span>`;

    const row2 = (label, val) => val
        ? `<tr><td class="om-label">${label}</td><td class="om-val">${val}</td></tr>` : '';

    const itemRows = items.map(it => {
        const qty  = Math.round(parseFloat(it.quantity || 1));
        const sku  = it.productCode || '?';
        const name = it.description || it.productName || sku;
        const price = it.price != null ? parseFloat(it.price).toFixed(2) + ' ' + (o.documentCurrency || 'EUR') : '';
        return `<tr class="om-item-row">
            <td>${qty}×</td>
            <td class="om-item-sku">${sku}</td>
            <td>${name}</td>
            <td class="om-item-price">${price}</td>
        </tr>`;
    }).join('');

    const lang = o.language || '—';
    const langCls = lang === 'HR' ? 'lang-hr' : lang === 'DE' ? 'lang-de' : 'lang-en';

    document.getElementById('order-modal-body').innerHTML = `
        <div class="om-section-label">Order</div>
        <table class="om-table">
            ${row2('Date', date)}
            ${row2('Status', `<span class="status-badge ${cls}">${label}</span>`)}
            ${row2('Language', `<span class="lang-badge ${langCls}">${lang}</span>`)}
            ${row2('Total', o.totalAmountInDomCurr != null ? parseFloat(o.totalAmountInDomCurr).toFixed(2) + ' ' + (o.documentCurrency || 'EUR') : '')}
            ${row2('Delivery', o.carrier
                ? (o.carrier + (o.deliveryMethod && o.carrier !== o.deliveryMethod
                    ? `<span class="om-raw-method"> (${o.deliveryMethod})</span>` : ''))
                : (o.deliveryMethod || ''))}
            ${row2('Payment', o.methodOfPayment)}
            ${row2('Remarks', o.remarks)}
        </table>
        <div class="om-section-label">Customer</div>
        <table class="om-table">
            ${row2('Name', o.buyerName)}
            ${row2('Contact', o.buyerName1)}
            ${row2('Email', o.buyerEMail ? `<a href="mailto:${o.buyerEMail}">${o.buyerEMail}</a>` : '')}
            ${row2('Phone', o.buyerPhone)}
            ${row2('Tax No.', o.buyerTaxNumber)}
            ${row2('Street', o.buyerStreet)}
            ${row2('Postcode', o.buyerPostalCode)}
            ${row2('City', o.buyerCity)}
            ${row2('Country', o.buyerCountry)}
        </table>
        <div class="om-section-label">Delivery Address</div>
        ${(() => {
            const hasDel = o.deliveryStreet || o.deliveryCity || o.deliveryPostalCode;
            if (!hasDel) return '<p class="om-same-addr">Same as customer address</p>';
            return `<table class="om-table">
                ${row2('Name',     o.deliveryName)}
                ${row2('Street',   o.deliveryStreet)}
                ${row2('Postcode', o.deliveryPostalCode)}
                ${row2('City',     o.deliveryCity)}
                ${row2('Country',  o.deliveryCountry)}
            </table>`;
        })()}
        ${items.length ? `<div class="om-section-label">Items (${items.length})</div>
        <table class="om-items-table"><tbody>${itemRows}</tbody></table>` : ''}
    `;

    document.getElementById('order-modal-raw').textContent = JSON.stringify(o, null, 2);
    document.getElementById('order-modal-raw').style.display = 'block';
    document.getElementById('order-modal-print-msg').style.display = 'none';
    document.getElementById('order-modal-print-btn').textContent = '🖨 Print Labels';
    document.getElementById('order-modal-print-btn').disabled = false;
    document.getElementById('order-modal-overlay').classList.add('active');
}

function aoModalClose(e) {
    if (e && e.target !== document.getElementById('order-modal-overlay')) return;
    document.getElementById('order-modal-overlay').classList.remove('active');
    _aoModalOrder = null;
}

function aoModalToggleRaw() {
    const el = document.getElementById('order-modal-raw');
    if (el.style.display === 'none') {
        el.textContent = JSON.stringify(_aoModalOrder, null, 2);
        el.style.display = 'block';
    } else {
        el.style.display = 'none';
    }
}

async function aoModalPrint() {
    if (!_aoModalOrder) return;
    const btn = document.getElementById('order-modal-print-btn');
    const msg = document.getElementById('order-modal-print-msg');
    btn.disabled = true;
    btn.textContent = 'Printing…';
    msg.style.display = 'none';
    try {
        const r = await fetch(`/orders/${_aoModalOrder.number}/print-labels`, {method: 'POST'});
        const data = await r.json();
        msg.style.display = 'block';
        if (data.ok) {
            msg.className = 'order-modal-print-msg msg-ok';
            msg.textContent = data.message;
            btn.textContent = '✓ Printed';
        } else {
            msg.className = 'order-modal-print-msg msg-err';
            msg.textContent = data.error || 'Unknown error';
            btn.disabled = false;
            btn.textContent = '🖨 Print Labels';
        }
    } catch(e) {
        msg.style.display = 'block';
        msg.className = 'order-modal-print-msg msg-err';
        msg.textContent = 'Request failed: ' + e;
        btn.disabled = false;
        btn.textContent = '🖨 Print Labels';
    }
}

function aoFilter() {
    const search = (document.getElementById('orders-search').value || '').toLowerCase();
    const status = document.getElementById('orders-status-filter').value;
    const filtered = _aoOrders.filter(o => {
        const matchStatus = !status || o.status === status;
        if (!matchStatus) return false;
        if (!search) return true;
        const text = [
            o.number, o.buyerName, o.carrier, o.deliveryMethod,
            (o.items || []).map(i => i.description || i.productName || i.name || i.productCode || '').join(' '),
        ].join(' ').toLowerCase();
        return text.includes(search);
    });
    aoRender(filtered);
}

function syncTerminalClose() {
    document.getElementById('sync-terminal-overlay').style.display = 'none';
}

async function aoSync() {
    const btn  = document.getElementById('ao-sync-btn');
    const log  = document.getElementById('ao-sync-log');
    const overlay = document.getElementById('sync-terminal-overlay');
    btn.disabled = true;
    btn.innerHTML = '<span>Syncing…</span><span class="tab-sync-sub">please wait</span>';
    log.innerHTML = '';
    overlay.style.display = 'flex';

    let hasError = false;

    const addLine = (msg, cls = '') => {
        if (cls === 'sync-err') hasError = true;
        const div = document.createElement('div');
        div.style.cssText = cls === 'sync-err'
            ? 'color:#f87171'
            : cls === 'sync-ok' ? 'color:#4ade80' : 'color:#ccc';
        div.textContent = msg;
        log.appendChild(div);
        log.scrollTop = log.scrollHeight;
    };

    try {
        const resp = await fetch('/orders/sync', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({sync_products: false}),
        });
        const reader = resp.body.getReader();
        const dec = new TextDecoder();
        let buf = '';
        while (true) {
            const {done, value} = await reader.read();
            if (done) break;
            buf += dec.decode(value, {stream: true});
            const lines = buf.split('\n\n');
            buf = lines.pop();
            for (const chunk of lines) {
                const dataLine = chunk.split('\n').find(l => l.startsWith('data:'));
                if (!dataLine) continue;
                try {
                    const ev = JSON.parse(dataLine.slice(5));
                    if (ev.done) { addLine('Done.', 'sync-ok'); break; }
                    if (ev.error) addLine(ev.message, 'sync-err');
                    else addLine(ev.message);
                } catch (_) {}
            }
        }
        // ── Phase 2: Shopify sync ─────────────────────────────────────────
        addLine('── Syncing Shopify order IDs…');
        try {
            const sresp = await fetch('/sync/shopify', { method: 'POST' });
            const sreader = sresp.body.getReader();
            let sbuf = '';
            while (true) {
                const {done, value} = await sreader.read();
                if (done) break;
                sbuf += dec.decode(value, {stream: true});
                const slines = sbuf.split('\n\n');
                sbuf = slines.pop();
                for (const chunk of slines) {
                    const dataLine = chunk.split('\n').find(l => l.startsWith('data:'));
                    if (!dataLine) continue;
                    try {
                        const ev = JSON.parse(dataLine.slice(5));
                        if (ev.message) addLine(ev.message, ev.message.startsWith('ERROR') ? 'sync-err' : '');
                        if (ev.done) {
                            localStorage.setItem('sync_shopify_last', Date.now().toString());
                            _syncLoaded = false;
                        }
                    } catch (_) {}
                }
            }
        } catch (e) {
            addLine(`Shopify sync failed: ${e}`, 'sync-err');
        }

    } catch (e) {
        addLine(`Sync failed: ${e}`, 'sync-err');
    } finally {
        btn.disabled = false;
        btn.innerHTML = '<span>⟳ Sync from e-računi</span><span class="tab-sync-sub">refresh orders</span>';
        localStorage.setItem('ao_last_sync', Date.now());
        aoUpdateSyncAge();
        await aoLoad();
        if (!hasError) {
            setTimeout(syncTerminalClose, 1200);
        }
    }
}

function aoUpdateSyncAge() {
    const el = document.getElementById('ao-sync-age');
    const btn = document.getElementById('ao-sync-btn');
    const ts = parseInt(localStorage.getItem('ao_last_sync') || '0', 10);
    if (!ts) {
        el.textContent = 'never synced';
        el.className = 'sync-age sync-age-old';
        btn.classList.add('sync-btn-nudge');
        return;
    }
    const mins = Math.floor((Date.now() - ts) / 60000);
    const text = mins < 1 ? 'just now' : mins < 60 ? `${mins} min${mins===1?'':'s'} ago` : `${Math.floor(mins/60)}h ${mins%60}m ago`;
    const old = mins > 10;
    el.textContent = 'last sync: ' + text;
    el.className = 'sync-age' + (old ? ' sync-age-old' : '');
    btn.classList.toggle('sync-btn-nudge', old);
}

// ── Custom label preview ───────────────────────────────────────────────────────
function updateLabelPreview() {
    const typeMap = {
        soldered:      'SOLDERED',
        engineering:   'SOLDERED ENGINEERING',
        manufacturing: 'SOLDERED MANUFACTURING',
        empty:         '',
    };
    const type  = document.getElementById('label-type').value;
    const title = document.getElementById('label-title').value;
    const body  = document.getElementById('label-body').value;
    document.getElementById('preview-type').textContent  = typeMap[type] || '';
    document.getElementById('preview-title').textContent = title;
    document.getElementById('preview-body').textContent  = body;
}

function printCustomLabel() {
    const amount = parseInt(document.getElementById('label-amount').value) || 1;
    // TODO: send to backend
    console.log('print custom label ×' + amount);
    alert('Print job sent ×' + amount + ' (backend not connected yet)');
}

// ── Settings: save helpers ──────────────────────────────────────────────────────
let _toastTimer = null;
window.showToast = function showToast(msg, type) {
    const el = document.getElementById('settings-toast');
    if (!el) return;
    el.textContent = msg;
    el.className = 'settings-toast show settings-toast-' + (type || 'ok');
    clearTimeout(_toastTimer);
    _toastTimer = setTimeout(() => el.classList.remove('show'), 2200);
};

function _collectFields(container) {
    const settings = {};
    container.querySelectorAll('.setting-field').forEach(f => {
        if (f.dataset.key) settings[f.dataset.key] = f.value;
    });
    return settings;
}

async function _postSettings(settings) {
    const r = await fetch('/settings/save-all', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ settings }),
    });
    return r.json();
}

async function saveCard(btn) {
    const card = btn.closest('.scard');
    const statusEl = card.querySelector('.scard-save-status');
    btn.disabled = true;
    btn.textContent = 'Saving…';
    try {
        const data = await _postSettings(_collectFields(card));
        if (data.ok) {
            statusEl.textContent = '✓ Saved';
            statusEl.style.color = 'green';
        } else {
            statusEl.textContent = '⚠ Error: ' + (data.errors || []).join(', ');
            statusEl.style.color = '#c00';
        }
    } catch (e) {
        statusEl.textContent = '⚠ Network error';
        statusEl.style.color = '#c00';
    }
    btn.disabled = false;
    btn.textContent = 'Save';
    setTimeout(() => { statusEl.textContent = ''; }, 3000);
}

async function saveAllSettings(btn) {
    const statusEl = document.getElementById('settings-save-status');
    btn.disabled = true;
    btn.textContent = '💾 Saving…';
    try {
        const settings = _collectFields(document.getElementById('tab-settings'));
        const data = await _postSettings(settings);
        if (data.ok) {
            statusEl.textContent = `✓ ${data.saved.length} settings saved`;
            statusEl.style.color = 'green';
        } else {
            statusEl.textContent = '⚠ Some settings could not be saved';
            statusEl.style.color = '#c00';
        }
    } catch (e) {
        statusEl.textContent = '⚠ Network error';
        statusEl.style.color = '#c00';
    }
    btn.disabled = false;
    btn.textContent = '💾 Save All Settings';
    setTimeout(() => { statusEl.textContent = ''; }, 3000);
}

// ── Print mode toggle ──────────────────────────────────────────────────────────
function onPrintModeChange(mode) {
    document.getElementById('print-api-card').style.display = (mode === 'preview') ? 'none' : '';
    if (typeof lpSetMode === 'function') lpSetMode(mode);
}

// ── Detect local CUPS printers ─────────────────────────────────────────────────
let _cachedPrinters = null;

async function detectPrinter(inputId) {
    if (!_cachedPrinters) {
        try {
            const r = await fetch('/settings/printers/list');
            const data = await r.json();
            _cachedPrinters = data.printers || [];
        } catch (e) {
            _cachedPrinters = [];
        }
    }

    const input = document.getElementById(inputId);
    if (!_cachedPrinters.length) {
        showToast('No local printers found', 'err');
        return;
    }
    if (_cachedPrinters.length === 1) {
        input.value = _cachedPrinters[0];
        input.dispatchEvent(new Event('change'));
        return;
    }

    // Show a small inline picker
    const existing = document.getElementById('printer-picker');
    if (existing) existing.remove();

    const picker = document.createElement('div');
    picker.id = 'printer-picker';
    picker.style.cssText = 'position:absolute;z-index:999;background:var(--bg-card,#1e1e2e);border:1px solid var(--border,#333);border-radius:6px;padding:4px 0;min-width:260px;box-shadow:0 4px 16px rgba(0,0,0,.4);top:100%;left:0';
    _cachedPrinters.forEach(name => {
        const opt = document.createElement('div');
        opt.textContent = name;
        opt.style.cssText = 'padding:8px 14px;cursor:pointer;font-size:.85rem';
        opt.onmouseenter = () => opt.style.background = 'var(--bg-hover,#2a2a3e)';
        opt.onmouseleave = () => opt.style.background = '';
        opt.onclick = () => {
            input.value = name;
            input.dispatchEvent(new Event('change'));
            picker.remove();
        };
        picker.appendChild(opt);
    });

    const btn = input.nextElementSibling;
    btn.style.position = 'relative';
    btn.appendChild(picker);
    const closePicker = (e) => {
        if (!picker.contains(e.target) && e.target !== btn) {
            picker.remove();
            document.removeEventListener('click', closePicker);
        }
    };
    setTimeout(() => document.addEventListener('click', closePicker), 0);
}

// ── Label Template Editor ──────────────────────────────────────────────────────
const LT_FIELDS = {
    order_summary: [
        {id:'order_number', label:'Order Number'},
        {id:'buyer_name',   label:'Buyer Name'},
        {id:'num_items',    label:'Item Count'},
        {id:'delivery',     label:'Delivery Method'},
        {id:'total_eur',    label:'Total (EUR)'},
        {id:'letter',       label:'Batch Letter'},
    ],
    order_item: [
        {id:'sku',          label:'SKU'},
        {id:'product_url',  label:'Product URL'},
        {id:'location',     label:'Warehouse Location'},
        {id:'qty_name',     label:'Qty × Name'},
        {id:'barcode_data', label:'Barcode Data'},
        {id:'letter',       label:'Batch Letter'},
    ],
};

const LT_SAMPLE_DEFAULTS = {
    order_summary: {
        order_number: 'S1042', buyer_name: 'Ivan Horvat',
        num_items: '3 items',  delivery: 'DHL',
        total_eur: '49.99 EUR', letter: 'A',
    },
    order_item: {
        sku: 'SOLR-WV2023',   product_url: 'solde.red/SOLR-WV2023',
        location: 'B-07',     qty_name: '2\u00d7 Inkplate 10',
        barcode_data: 'SOLR-WV2023-2-S1042', letter: 'A',
    },
    product: {
        sku: '333023', name: '2-channel relay board',
        location: 'P4-11', barcode: '732388674107',
    },
    product_sealed: {
        sku: '333023', name: '2-channel relay board',
        location: 'P4-11', sealed_amount: '10\u00d7',
    },
    digikey: {
        sku: '333023', name: '2-channel relay board',
        location: 'P4-11',
    },
};

const lt = {
    name: 'order_summary',
    elements: [],
    fields: [],
    modalIdx: null,
    initialized: false,
    _previewTimer: null,
    _saveTimer: null,
};

const LT_W = 440, LT_H = 256;

let ltDrag = { active: false, idx: -1, startLx: 0, startLy: 0, origX: 0, origY: 0 };

function ltElemBounds(elem) {
    const x = elem.x || 0, y = elem.y || 0;
    switch (elem.type) {
        case 'text':    return { x, y, w: Math.max(60, (elem.size || 14) * 9), h: Math.ceil((elem.size || 14) * 1.5) };
        case 'barcode': return { x, y, w: elem.w || 200, h: elem.h || 48 };
        case 'logo':    return { x, y, w: elem.w || 80,  h: elem.h || 40 };
        case 'line':    return { x, y, w: elem.w || 420, h: Math.max(8, (elem.thickness || 2) + 6) };
        default:        return { x, y, w: 50, h: 20 };
    }
}

function ltHitTest(lx, ly) {
    for (let i = lt.elements.length - 1; i >= 0; i--) {
        const { x, y, w, h } = ltElemBounds(lt.elements[i]);
        if (lx >= x && lx <= x + w && ly >= y && ly <= y + h) return i;
    }
    return -1;
}

function ltMouseToLabel(e) {
    const canvas = document.getElementById('lt-drag-canvas');
    const rect = canvas.getBoundingClientRect();
    return {
        lx: (e.clientX - rect.left) / rect.width  * LT_W,
        ly: (e.clientY - rect.top)  / rect.height * LT_H,
    };
}

function ltDrawOverlay(hoverIdx = -1) {
    const canvas = document.getElementById('lt-drag-canvas');
    if (!canvas) return;
    canvas.width  = canvas.clientWidth;
    canvas.height = canvas.clientHeight;
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    const sx = canvas.width  / LT_W;
    const sy = canvas.height / LT_H;
    lt.elements.forEach((elem, i) => {
        const { x, y, w, h } = ltElemBounds(elem);
        const active = ltDrag.active && i === ltDrag.idx;
        const hover  = !ltDrag.active && i === hoverIdx;
        ctx.strokeStyle = active ? '#5c2a85' : hover ? '#7840a8' : 'rgba(92,42,133,0.35)';
        ctx.lineWidth   = active || hover ? 1.5 : 1;
        ctx.setLineDash(active || hover ? [] : [3, 2]);
        ctx.strokeRect(x * sx + 0.5, y * sy + 0.5, w * sx, h * sy);
        if (active || hover) {
            ctx.fillStyle = 'rgba(92,42,133,0.08)';
            ctx.fillRect(x * sx, y * sy, w * sx, h * sy);
        }
    });
}

function ltInitDragCanvas() {
    const canvas = document.getElementById('lt-drag-canvas');
    if (!canvas || canvas._ltBound) return;
    canvas._ltBound = true;

    canvas.addEventListener('mousemove', e => {
        if (ltDrag.active) {
            const { lx, ly } = ltMouseToLabel(e);
            const elem = lt.elements[ltDrag.idx];
            elem.x = Math.round(Math.max(0, ltDrag.origX + (lx - ltDrag.startLx)));
            elem.y = Math.round(Math.max(0, ltDrag.origY + (ly - ltDrag.startLy)));
            ltRenderList();
            ltDrawOverlay(ltDrag.idx);
        } else {
            const { lx, ly } = ltMouseToLabel(e);
            const idx = ltHitTest(lx, ly);
            canvas.style.cursor = idx >= 0 ? 'grab' : 'default';
            ltDrawOverlay(idx);
        }
    });

    canvas.addEventListener('mousedown', e => {
        const { lx, ly } = ltMouseToLabel(e);
        const idx = ltHitTest(lx, ly);
        if (idx >= 0) {
            ltDrag = { active: true, idx, startLx: lx, startLy: ly,
                       origX: lt.elements[idx].x, origY: lt.elements[idx].y };
            canvas.style.cursor = 'grabbing';
            e.preventDefault();
        }
    });

    const endDrag = () => {
        if (!ltDrag.active) return;
        ltDrag.active = false;
        document.getElementById('lt-drag-canvas').style.cursor = 'default';
        ltAutoSave();
        ltDrawOverlay();
    };
    canvas.addEventListener('mouseup',    endDrag);
    canvas.addEventListener('mouseleave', endDrag);
}

// ── Sample data (persisted in localStorage) ──
function ltGetSample(name) {
    const defs = {...(LT_SAMPLE_DEFAULTS[name] || {})};
    try {
        const saved = JSON.parse(localStorage.getItem(`lt_sample_${name}`) || 'null');
        if (saved) return {...defs, ...saved};
    } catch (_) {}
    return defs;
}
function ltSaveSample(name, data) {
    try { localStorage.setItem(`lt_sample_${name}`, JSON.stringify(data)); } catch (_) {}
}

// ── Init / load ──
function ltOnTabActivate() {
    if (!lt.initialized) { lt.initialized = true; ltLoadTemplate('order_summary'); }
    ltInitDragCanvas();
}

async function ltLoadTemplate(name) {
    lt.name = name;
    try {
        const r = await fetch(`/label-templates/${name}/get`);
        const data = await r.json();
        lt.elements = data.elements || [];
        lt.fields   = data.fields   || [];
    } catch (_) { lt.elements = []; lt.fields = []; }
    ltRenderList();
    ltRenderSampleFields();
    ltRefreshPreview();
}

function ltSwitchTemplate(name) {
    ltLoadTemplate(name);
}

// ── Sample data fields ──
function ltRenderSampleFields() {
    const fields = lt.fields;
    const data   = ltGetSample(lt.name);
    document.getElementById('lt-sample-fields').innerHTML = fields.map(f => `
        <div class="lt-sample-row">
            <span class="lt-sample-lbl">${f.label}</span>
            <input class="lt-sample-input" type="text" data-field="${f.id}"
                   value="${(data[f.id]||'').replace(/"/g,'&quot;')}"
                   oninput="ltOnSampleInput(this)">
        </div>
    `).join('');
}

function ltOnSampleInput(el) {
    const data = ltGetSample(lt.name);
    data[el.dataset.field] = el.value;
    ltSaveSample(lt.name, data);
    clearTimeout(lt._previewTimer);
    lt._previewTimer = setTimeout(ltRefreshPreview, 500);
}

// ── Preview (POST with custom fields, blob URL to avoid caching) ──
async function ltRefreshPreview() {
    const img = document.getElementById('lt-preview-img');
    try {
        const r = await fetch(`/label-templates/${lt.name}/preview.png`, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({fields: ltGetSample(lt.name)}),
        });
        if (!r.ok) return;
        const blob = await r.blob();
        const newUrl = URL.createObjectURL(blob);
        const old = img.src;
        img.addEventListener('load', () => ltDrawOverlay(), { once: true });
        img.src = newUrl;
        if (old && old.startsWith('blob:')) URL.revokeObjectURL(old);
    } catch (_) {}
}

// ── Element list ──
function ltRenderList() {
    const list = document.getElementById('lt-elem-list');
    if (!lt.elements.length) {
        list.innerHTML = '<div class="lt-empty">No elements yet. Click "+ Add Element" to start.</div>';
        return;
    }
    list.innerHTML = lt.elements.map((e, i) => `
        <div class="lt-elem-card">
            <span class="lt-elem-badge lt-badge-${e.type}">${e.type}</span>
            <span class="lt-elem-info">${ltElemSummary(e)}</span>
            <div class="lt-elem-actions">
                <button onclick="ltMoveElem(${i},-1)" ${i===0?'disabled':''} title="Move up">▲</button>
                <button onclick="ltMoveElem(${i}, 1)" ${i===lt.elements.length-1?'disabled':''} title="Move down">▼</button>
                <button onclick="ltOpenEdit(${i})" title="Edit">✎</button>
                <button onclick="ltDeleteElem(${i})" title="Delete" class="lt-btn-delete">✕</button>
            </div>
        </div>
    `).join('');
}

function ltElemSummary(e) {
    const pos = `x:${e.x} y:${e.y}`;
    switch (e.type) {
        case 'text':    return `${pos}  sz:${e.size}${e.bold?' B':''}  ${e.field ? '\u2039'+e.field+'\u203a' : '"'+e.value+'"'}`;
        case 'barcode': return `${pos}  ${e.w}\u00d7${e.h}  \u2039${e.field}\u203a`;
        case 'logo':    return `${pos}  ${e.w}\u00d7${e.h}`;
        case 'line':    return `${pos}  w:${e.w}  t:${e.thickness}`;
        default:        return pos;
    }
}

// ── Modal ──
function ltOpenAdd() {
    lt.modalIdx = null;
    document.getElementById('lt-modal-title').textContent = 'Add Element';
    document.getElementById('lt-modal-save-btn').textContent = 'Add';
    ltBuildForm('text', null);
    document.getElementById('lt-modal').style.display = 'flex';
}
function ltOpenEdit(idx) {
    lt.modalIdx = idx;
    const e = lt.elements[idx];
    document.getElementById('lt-modal-title').textContent = 'Edit Element';
    document.getElementById('lt-modal-save-btn').textContent = 'Update';
    ltBuildForm(e.type, e);
    document.getElementById('lt-modal').style.display = 'flex';
}
function ltCloseModal() { document.getElementById('lt-modal').style.display = 'none'; }
function ltModalOverlayClick(ev) { if (ev.target === document.getElementById('lt-modal')) ltCloseModal(); }

function ltBuildForm(type, elem) {
    const e = elem || {};
    const fields = lt.fields;
    const fieldOpts = fields.map(f =>
        `<option value="${f.id}" ${e.field===f.id?'selected':''}>${f.label}</option>`
    ).join('');
    document.getElementById('lt-modal-body').innerHTML = `
        <div class="form-row">
            <label class="form-lbl">Type</label>
            <select class="form-ctrl" id="lt-f-type" onchange="ltOnTypeChange(this.value)">
                <option value="text"    ${type==='text'   ?'selected':''}>Text</option>
                <option value="barcode" ${type==='barcode'?'selected':''}>Barcode</option>
                <option value="logo"    ${type==='logo'   ?'selected':''}>Logo (soldered_logo.png)</option>
                <option value="line"    ${type==='line'   ?'selected':''}>Line (horizontal rule)</option>
            </select>
        </div>
        <div class="form-row">
            <label class="form-lbl">Position — X · Y (dots)</label>
            <div class="offset-pair">
                <input type="number" class="form-ctrl" id="lt-f-x" value="${e.x??0}">
                <input type="number" class="form-ctrl" id="lt-f-y" value="${e.y??0}">
            </div>
        </div>
        <div id="lt-type-fields">${ltTypeFields(type, e, fieldOpts)}</div>`;
}

function ltTypeFields(type, e, fieldOpts) {
    e = e || {};
    const useField = e.value === undefined;
    switch (type) {
        case 'text': return `
            <div class="form-row">
                <label class="form-lbl">Size (px) · Bold</label>
                <div class="offset-pair" style="align-items:center">
                    <input type="number" class="form-ctrl form-ctrl-sm" id="lt-f-size" value="${e.size??14}" min="6" max="120">
                    <label class="lt-src-toggle" style="white-space:nowrap">
                        <input type="checkbox" id="lt-f-bold" ${e.bold?'checked':''}> Bold
                    </label>
                </div>
            </div>
            <div class="form-row">
                <label class="form-lbl">Source</label>
                <div class="lt-src-toggle">
                    <label><input type="radio" name="lt-src" value="field"  ${useField ?'checked':''} onchange="ltToggleSrc('field')">  Field (dynamic)</label>
                    <label><input type="radio" name="lt-src" value="static" ${!useField?'checked':''} onchange="ltToggleSrc('static')"> Static text</label>
                </div>
            </div>
            <div id="lt-src-field-row"  class="form-row" ${!useField?'style="display:none"':''}>
                <label class="form-lbl">Field</label>
                <select class="form-ctrl" id="lt-f-field">${fieldOpts}</select>
            </div>
            <div id="lt-src-static-row" class="form-row" ${useField?'style="display:none"':''}>
                <label class="form-lbl">Value (supports Unicode: &#x2713; &#x2192; &#x2605; …)</label>
                <input type="text" class="form-ctrl" id="lt-f-value" value="${(e.value||'').replace(/"/g,'&quot;')}">
            </div>`;
        case 'barcode': return `
            <div class="form-row">
                <label class="form-lbl">Width × Height (dots)</label>
                <div class="offset-pair">
                    <input type="number" class="form-ctrl" id="lt-f-w" value="${e.w??340}">
                    <input type="number" class="form-ctrl" id="lt-f-h" value="${e.h??48}">
                </div>
            </div>
            <div class="form-row">
                <label class="form-lbl">Field</label>
                <select class="form-ctrl" id="lt-f-field">${fieldOpts}</select>
            </div>`;
        case 'logo': return `
            <div class="form-row">
                <label class="form-lbl">Width × Height (dots)</label>
                <div class="offset-pair">
                    <input type="number" class="form-ctrl" id="lt-f-w" value="${e.w??80}">
                    <input type="number" class="form-ctrl" id="lt-f-h" value="${e.h??40}">
                </div>
            </div>`;
        case 'line': return `
            <div class="form-row">
                <label class="form-lbl">Width (dots)</label>
                <input type="number" class="form-ctrl" id="lt-f-w" value="${e.w??420}">
            </div>
            <div class="form-row">
                <label class="form-lbl">Thickness (dots)</label>
                <input type="number" class="form-ctrl form-ctrl-sm" id="lt-f-thickness" value="${e.thickness??2}" min="1">
            </div>`;
        default: return '';
    }
}

function ltOnTypeChange(type) {
    const e = lt.modalIdx !== null ? lt.elements[lt.modalIdx] : null;
    const fields = lt.fields;
    const fieldOpts = fields.map(f => `<option value="${f.id}">${f.label}</option>`).join('');
    document.getElementById('lt-type-fields').innerHTML = ltTypeFields(type, e, fieldOpts);
}
function ltToggleSrc(src) {
    document.getElementById('lt-src-field-row') .style.display = src === 'field'  ? '' : 'none';
    document.getElementById('lt-src-static-row').style.display = src === 'static' ? '' : 'none';
}

function ltReadForm() {
    const type = document.getElementById('lt-f-type').value;
    const x = parseInt(document.getElementById('lt-f-x').value) || 0;
    const y = parseInt(document.getElementById('lt-f-y').value) || 0;
    const id = lt.modalIdx !== null ? lt.elements[lt.modalIdx].id : `e${Date.now()}`;
    const elem = {id, type, x, y};
    switch (type) {
        case 'text': {
            elem.size = parseInt(document.getElementById('lt-f-size').value) || 14;
            elem.bold = document.getElementById('lt-f-bold').checked;
            const src = document.querySelector('input[name="lt-src"]:checked')?.value || 'field';
            if (src === 'field') elem.field = document.getElementById('lt-f-field').value;
            else                 elem.value = document.getElementById('lt-f-value').value;
            break;
        }
        case 'barcode':
            elem.w = parseInt(document.getElementById('lt-f-w').value) || 340;
            elem.h = parseInt(document.getElementById('lt-f-h').value) || 48;
            elem.field = document.getElementById('lt-f-field').value;
            break;
        case 'logo':
            elem.w = parseInt(document.getElementById('lt-f-w').value) || 80;
            elem.h = parseInt(document.getElementById('lt-f-h').value) || 40;
            break;
        case 'line':
            elem.w         = parseInt(document.getElementById('lt-f-w').value) || 420;
            elem.thickness = parseInt(document.getElementById('lt-f-thickness').value) || 2;
            break;
    }
    return elem;
}

function ltSaveElement() {
    const elem = ltReadForm();
    if (lt.modalIdx !== null) lt.elements[lt.modalIdx] = elem;
    else                      lt.elements.push(elem);
    ltCloseModal();
    ltRenderList();
    ltAutoSave();
}
function ltDeleteElem(idx) {
    if (!confirm('Delete this element?')) return;
    lt.elements.splice(idx, 1);
    ltRenderList();
    ltAutoSave();
}
function ltMoveElem(idx, dir) {
    const ni = idx + dir;
    if (ni < 0 || ni >= lt.elements.length) return;
    [lt.elements[idx], lt.elements[ni]] = [lt.elements[ni], lt.elements[idx]];
    ltRenderList();
    ltAutoSave();
}

function ltAutoSave() {
    clearTimeout(lt._saveTimer);
    lt._saveTimer = setTimeout(async () => {
        const r = await fetch(`/label-templates/${lt.name}/save`, {
            method: 'POST', headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({elements: lt.elements}),
        });
        const data = await r.json();
        if (data.ok) ltRefreshPreview();
        else showToast('Auto-save error: ' + (data.error || '?'), 'err');
    }, 400);
}

// ── Server actions ──
async function ltSave() {
    const r = await fetch(`/label-templates/${lt.name}/save`, {
        method: 'POST', headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({elements: lt.elements}),
    });
    const data = await r.json();
    if (data.ok) { showToast('Template saved', 'ok'); ltRefreshPreview(); }
    else           showToast('Save error: ' + (data.error || '?'), 'err');
}
async function ltReset() {
    if (!confirm('Reset to built-in default? Unsaved changes will be lost.')) return;
    const r = await fetch(`/label-templates/${lt.name}/reset`, {method: 'POST'});
    const data = await r.json();
    if (data.ok) { showToast('Reset to default', 'ok'); ltLoadTemplate(lt.name); }
    else           showToast('Reset error: ' + (data.error || '?'), 'err');
}
async function ltTestPrint() {
    try {
        const r = await fetch(`/label-templates/${lt.name}/test-print`, {
            method: 'POST', headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({fields: ltGetSample(lt.name)}),
        });
        const data = await r.json();
        if (data.ok) showToast('Test print sent', 'ok');
        else          showToast('Print error: ' + (data.error || '?'), 'err');
    } catch(e) {
        showToast('Request failed: ' + e.message, 'err');
    } finally {
        if (window.plPollNow) await window.plPollNow();
    }
}

// ── Print test page ────────────────────────────────────────────────────────────
async function printTestPage(printer) {
    try {
        const r = await fetch('/settings/printers/test', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({printer}),
        });
        const data = await r.json();
        if (data.ok) {
            showToast('Test label sent to ' + printer + ' printer');
        } else {
            showToast('Print error: ' + (data.error || 'unknown'), 'err');
        }
    } catch (e) {
        showToast('Request failed: ' + e.message, 'err');
    } finally {
        if (window.plPollNow) await window.plPollNow();
    }
}

// ── Shopify settings actions ────────────────────────────────────────────────────
async function makeSendTestEmail(btn) {
    const emailEl = document.getElementById('make-test-email');
    const status  = document.getElementById('make-test-status');
    const email   = (emailEl.value || '').trim();
    if (!email) { status.textContent = '✗ Enter an email address first'; status.style.color = '#c00'; return; }
    btn.disabled = true;
    btn.textContent = 'Sending…';
    status.textContent = '';
    status.style.color = '';
    try {
        const r = await fetch('/orders/notify-test', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ email }),
        });
        const data = await r.json();
        if (data.ok) {
            status.textContent = `✓ Sent to ${email}. Not arriving? Check that the Make.com scenario is active and not paused.`;
            status.style.color = 'var(--ok, #3a3)';
        } else {
            status.textContent = `✗ ${data.error}`;
            status.style.color = '#c00';
        }
    } catch (e) {
        status.textContent = `✗ ${e}`;
        status.style.color = '#c00';
    } finally {
        btn.disabled = false;
        btn.textContent = 'Send Test Email';
    }
}

async function makeDetermineStructure(btn) {
    const status = document.getElementById('make-structure-status');
    btn.disabled = true;
    btn.textContent = 'Sending…';
    status.textContent = '';
    status.style.color = '';
    try {
        const r = await fetch('/orders/make-data-structure', { method: 'POST' });
        const data = await r.json();
        if (data.ok) {
            status.textContent = '✓ Sample sent — click "Determine data structure" in Make.com to confirm.';
            status.style.color = 'var(--ok, #3a3)';
        } else {
            status.textContent = `✗ ${data.error}`;
            status.style.color = '#c00';
        }
    } catch (e) {
        status.textContent = `✗ ${e}`;
        status.style.color = '#c00';
    } finally {
        btn.disabled = false;
        btn.textContent = 'Determine Data Structure';
    }
}

async function shopifyRequestToken(btn) {
    const status = document.getElementById('shopify-token-status');
    btn.disabled = true;
    btn.textContent = 'Requesting…';
    status.textContent = '';
    status.style.color = '';
    try {
        const r = await fetch('/shopify/request-token', { method: 'POST' });
        const data = await r.json();
        if (data.ok) {
            status.textContent = `✓ Token saved (${data.token_preview})`;
            status.style.color = 'var(--ok, #3a3)';
            // Reload page so token field shows the new value
            setTimeout(() => location.reload(), 1200);
        } else {
            status.textContent = `✗ ${data.error}`;
            status.style.color = '#c00';
        }
    } catch (e) {
        status.textContent = `✗ ${e}`;
        status.style.color = '#c00';
    } finally {
        btn.disabled = false;
        btn.textContent = 'Get New Access Token';
    }
}

async function shopifyTestConnection(btn) {
    const status = document.getElementById('shopify-test-status');
    btn.disabled = true;
    btn.textContent = 'Testing…';
    status.textContent = '';
    status.style.color = '';
    try {
        const r = await fetch('/shopify/test-connection', { method: 'POST' });
        const data = await r.json();
        if (data.ok) {
            status.textContent = `✓ Connected — ${data.shop_name}`;
            status.style.color = 'var(--ok, #3a3)';
        } else {
            status.textContent = `✗ ${data.error}`;
            status.style.color = '#c00';
        }
    } catch (e) {
        status.textContent = `✗ ${e}`;
        status.style.color = '#c00';
    } finally {
        btn.disabled = false;
        btn.textContent = 'Test API Connection';
    }
}

// ── Shipping Rules editor ──────────────────────────────────────────────────────
let _srLoaded = false;
let _srCarriers = ['DPD', 'DHL', 'Paket24', 'Pickup', 'GLS', 'FREE_SHIPPING'];

function srOnActivate() {
    if (!_srLoaded) srLoad();
}

async function srLoad() {
    try {
        const r = await fetch('/settings/shipping-rules');
        const data = await r.json();
        _srCarriers = data.carriers || _srCarriers;
        srRender(data.rules || []);
        _srLoaded = true;
    } catch (e) {
        document.getElementById('shipping-rules-body').innerHTML =
            `<tr><td colspan="4" style="color:#c00;padding:12px">Failed to load: ${e}</td></tr>`;
    }
}

function srRender(rules) {
    const tbody = document.getElementById('shipping-rules-body');
    if (!rules.length) {
        tbody.innerHTML = '<tr><td colspan="4" style="text-align:center;color:#aaa;padding:16px">No rules. Click "+ Add Rule" to add one.</td></tr>';
        return;
    }
    tbody.innerHTML = rules.map((rule, i) => `
        <tr data-idx="${i}">
            <td style="text-align:center;color:var(--text-muted);font-size:0.8rem">${i + 1}</td>
            <td><input class="form-ctrl sr-match" value="${_esc(rule.match || '')}"
                       oninput="srChanged()" placeholder="e.g. besplatna dostava" style="width:100%"></td>
            <td>
                <select class="form-ctrl sr-carrier" onchange="srChanged()">
                    ${_srCarriers.map(c =>
                        `<option value="${c}"${c === rule.carrier ? ' selected' : ''}>${c}</option>`
                    ).join('')}
                </select>
            </td>
            <td style="text-align:center">
                <button class="sr-del-btn" onclick="srDeleteRow(${i})" title="Delete">✕</button>
            </td>
        </tr>`).join('');
}

function _esc(s) {
    return s.replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;');
}

function srCollect() {
    const rows = document.querySelectorAll('#shipping-rules-body tr[data-idx]');
    return Array.from(rows).map(row => ({
        match:   row.querySelector('.sr-match').value.trim(),
        carrier: row.querySelector('.sr-carrier').value,
    })).filter(r => r.match);
}

let _srSaveTimer = null;
function srChanged() {
    clearTimeout(_srSaveTimer);
    _srSaveTimer = setTimeout(srSave, 600);
}

async function srSave() {
    const rules = srCollect();
    const status = document.getElementById('sr-status');
    try {
        const r = await fetch('/settings/shipping-rules', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({rules}),
        });
        const data = await r.json();
        if (data.ok) {
            status.textContent = `Saved ${data.count} rules`;
            setTimeout(() => { status.textContent = ''; }, 2000);
        }
    } catch (e) {
        status.textContent = 'Save failed';
    }
}

function srAddRule() {
    const rules = srCollect();
    rules.push({match: '', carrier: 'DPD'});
    srRender(rules);
    // Focus the new input
    const inputs = document.querySelectorAll('.sr-match');
    if (inputs.length) inputs[inputs.length - 1].focus();
    srChanged();
}

function srDeleteRow(idx) {
    const rules = srCollect();
    rules.splice(idx, 1);
    srRender(rules);
    srSave();
}

async function srResetDefaults() {
    if (!confirm('Reset to default rules? This will overwrite your current rules.')) return;
    const r = await fetch('/settings/shipping-rules/defaults');
    const data = await r.json();
    srRender(data.rules || []);
    await srSave();
}

// ── Products tab ──────────────────────────────────────────────────────────────
const pr = { allProducts: [], loaded: false, selectedCode: null };

async function prLoad() {
    if (pr.loaded) return;
    const r = await fetch('/products/list');
    const data = await r.json();
    pr.allProducts = data.products || [];
    pr.loaded = true;
    prRender(pr.allProducts);
}

function prFilter() {
    const q = document.getElementById('pr-search').value.trim().toLowerCase();
    const solderedOnly = document.getElementById('pr-soldered-only').checked;
    let rows = pr.allProducts;
    if (solderedOnly) rows = rows.filter(p => (p.productCode || '').startsWith('333'));
    if (q) rows = rows.filter(p =>
        (p.productCode || '').toLowerCase().includes(q) ||
        (p.name || '').toLowerCase().includes(q) ||
        (p.englishName || '').toLowerCase().includes(q) ||
        (p.germanName || '').toLowerCase().includes(q) ||
        (p.defaultWarehouseLocation || '').toLowerCase().includes(q) ||
        (p.barcode || '').toLowerCase().includes(q)
    );
    prRender(rows);
}

function prClearSearch() {
    document.getElementById('pr-search').value = '';
    document.getElementById('pr-soldered-only').checked = false;
    prRender(pr.allProducts);
}

function prRender(rows) {
    const tbody = document.getElementById('pr-tbody');
    if (!rows.length) {
        tbody.innerHTML = '<tr><td colspan="7" class="pr-empty-cell">No products found.</td></tr>';
        return;
    }
    tbody.innerHTML = rows.map(p => `
        <tr class="pr-row" data-code="${esc(p.productCode || '')}" onclick="prSelectRow(this)">
            <td class="pr-td pr-td-info" onclick="event.stopPropagation();prModalOpen(this.closest('tr').dataset.code)">&#x2139;</td>
            <td class="pr-td pr-td-sku">${esc(p.productCode || '')}</td>
            <td class="pr-td">${esc(p.name || '')}</td>
            <td class="pr-td">${esc(p.englishName || '')}</td>
            <td class="pr-td">${esc(p.germanName || '')}</td>
            <td class="pr-td pr-td-loc">${esc(p.defaultWarehouseLocation || '')}</td>
            <td class="pr-td pr-td-bc">${esc(p.barcode || '')}</td>
        </tr>`).join('');
}

function prSelectRow(tr) {
    document.querySelectorAll('#pr-tbody .pr-row').forEach(r => r.classList.remove('pr-row-selected'));
    tr.classList.add('pr-row-selected');
    pr.selectedCode = tr.dataset.code;
    document.getElementById('pr-print-status').textContent = '';
}

async function prModalOpen(code) {
    const modal = document.getElementById('pr-modal');
    const backdrop = document.getElementById('pr-modal-backdrop');
    document.getElementById('pr-modal-sku').textContent = code;
    document.getElementById('pr-modal-db-table').innerHTML = '<tr><td colspan="2" style="padding:8px;color:#888">Loading…</td></tr>';
    document.getElementById('pr-modal-raw').textContent = 'Loading…';
    modal.style.display = 'flex';
    backdrop.style.display = 'block';

    try {
        const r = await fetch(`/products/${encodeURIComponent(code)}/detail`);
        const data = await r.json();

        // DB table
        const db = data.db || {};
        const labels = {
            productCode: 'SKU', name: 'Croatian name', englishName: 'English name',
            germanName: 'German name', barcode: 'Barcode',
            defaultWarehouseLocation: 'Location',
        };
        document.getElementById('pr-modal-db-table').innerHTML =
            Object.entries(db).map(([k, v]) =>
                `<tr><th class="pr-modal-key">${esc(labels[k] || k)}</th><td class="pr-modal-val">${esc(String(v ?? ''))}</td></tr>`
            ).join('');

        // Raw JSON
        document.getElementById('pr-modal-raw').textContent =
            JSON.stringify(data.raw || {}, null, 2);
    } catch (e) {
        document.getElementById('pr-modal-raw').textContent = 'Error: ' + e.message;
    }
}

function prModalClose() {
    document.getElementById('pr-modal').style.display = 'none';
    document.getElementById('pr-modal-backdrop').style.display = 'none';
}

function esc(s) {
    return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}

async function prSync() {
    const btn = document.getElementById('pr-sync-btn');
    const status = document.getElementById('pr-sync-status');
    btn.disabled = true;
    btn.textContent = '⟳ Syncing…';
    status.textContent = '';
    try {
        const es = new EventSource('/products/sync');
        es.onmessage = function (e) {
            const data = JSON.parse(e.data);
            if (data.done) {
                es.close();
                btn.disabled = false;
                btn.textContent = '⟳ Sync Products';
                pr.loaded = false;
                prLoad();
            } else {
                status.textContent = data.message || '';
            }
        };
        es.onerror = function () {
            es.close();
            btn.disabled = false;
            btn.textContent = '⟳ Sync Products';
            status.textContent = 'Sync failed.';
        };
    } catch (err) {
        btn.disabled = false;
        btn.textContent = '⟳ Sync Products';
        status.textContent = 'Error: ' + err.message;
    }
}

function prClearSealed() {
    document.getElementById('pr-sealed-amount').value = '';
}

function prResetCount() {
    document.getElementById('pr-label-count').value = '1';
}

async function prPrintLabel() {
    const status = document.getElementById('pr-print-status');
    if (!pr.selectedCode) {
        status.textContent = 'Select a product row first.';
        return;
    }
    const labelType   = document.getElementById('pr-label-type').value;
    const language    = document.getElementById('pr-lang').value;
    const sealedRaw   = document.getElementById('pr-sealed-amount').value.trim();
    const sealedAmount = sealedRaw ? parseInt(sealedRaw, 10) : null;
    const count       = parseInt(document.getElementById('pr-label-count').value, 10) || 1;

    if (labelType === 'product_sealed' && !sealedAmount) {
        status.textContent = 'Enter a sealed amount first.';
        return;
    }

    status.textContent = 'Printing…';
    try {
        const r = await fetch(`/products/${encodeURIComponent(pr.selectedCode)}/print-label`, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({label_type: labelType, language, sealed_amount: sealedAmount, count}),
        });
        const data = await r.json();
        status.textContent = data.ok ? `Printed ${count} label(s).` : ('Error: ' + data.error);
    } catch (e) {
        status.textContent = 'Error: ' + e.message;
    }
}

// Called when the Products tab is activated
function prOnActivate() {
    prLoad();
}

// ── Sync tab ───────────────────────────────────────────────────────────────────
let _syncLoaded = false;

function syncOnActivate() {
    if (!_syncLoaded) syncLoadMappings();
}

async function syncLoadMappings() {
    const list = document.getElementById('sync-mappings-list');
    list.innerHTML = '<div style="color:#aaa;font-size:.85rem;padding:8px">Loading…</div>';
    try {
        const r = await fetch('/sync/mappings');
        const data = await r.json();
        _syncLoaded = true;
        syncRenderMappings(data.mappings || []);
    } catch (e) {
        list.innerHTML = `<div style="color:#c00;font-size:.85rem;padding:8px">Failed to load: ${e}</div>`;
    }
}

function _shopifyFinancialColor(s) {
    return { paid: '#2a9', partially_paid: '#8a6', partially_refunded: '#a80',
             refunded: '#888', voided: '#888', authorized: '#48a', pending: '#a80' }[s] || '#aaa';
}
function _shopifyFulfillmentColor(s) {
    return { fulfilled: '#2a9', partial: '#a80', unfulfilled: '#888', restocked: '#48a' }[s] || '#aaa';
}
function _erStatusColor(s) {
    return { Processing: '#48a', Delivered: '#2a9', PartialDelivery: '#a80',
             Cancelled: '#a44', Draft: '#888' }[s] || '#aaa';
}

function syncRenderMappings(mappings) {
    const list = document.getElementById('sync-mappings-list');
    if (!mappings.length) {
        list.innerHTML = '<div style="color:#aaa;font-size:.85rem;padding:8px">No linked orders yet. Run a sync first.</div>';
        return;
    }
    list.innerHTML = mappings.map(o => {
        const total = o.totalAmountInDomCurr != null
            ? `${parseFloat(o.totalAmountInDomCurr).toFixed(2)} ${o.documentCurrency || ''}`.trim()
            : '';
        const ffc = _shopifyFinancialColor(o.shopify_financial_status);
        const fuc = _shopifyFulfillmentColor(o.shopify_fulfillment_status);
        const erc = _erStatusColor(o.status);
        const badge = (label, color) =>
            `<span style="display:inline-block;padding:1px 7px;border-radius:3px;font-size:.65rem;font-weight:600;letter-spacing:.04em;background:${color}22;color:${color};border:1px solid ${color}55">${label}</span>`;
        const hasShopify = o.shopify_id && o.shopify_id !== '';
        const shopifyPanel = hasShopify ? `
                <div style="font-size:.88rem;font-weight:600;margin-bottom:2px">${o.shopify_order_name || ''}</div>
                <div style="font-size:.8rem;color:#aaa;margin-bottom:6px">${o.shopify_customer_name || ''}</div>
                <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px">
                    ${o.shopify_financial_status ? badge(o.shopify_financial_status, ffc) : ''}
                    ${o.shopify_fulfillment_status ? badge(o.shopify_fulfillment_status, fuc) : ''}
                </div>
                <div style="font-family:monospace;font-size:.68rem;color:#666;margin-top:2px">${o.shopify_id}</div>`
            : `<div style="font-size:.85rem;color:#aaa;font-style:italic;margin-top:4px">Not on Shopify</div>`;
        return `
        <div style="display:flex;align-items:stretch;border:1px solid var(--border);border-radius:4px;overflow:hidden;background:var(--surface)${!hasShopify ? ';opacity:.8' : ''}">
            <div style="flex:1;padding:10px 14px;border-right:1px solid var(--border)${!hasShopify ? ';background:#fafafa' : ''}">
                <div style="font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;color:var(--brand-purple);font-family:'Tektur',sans-serif;margin-bottom:6px">Shopify</div>
                ${shopifyPanel}
            </div>
            <div style="display:flex;align-items:center;justify-content:center;padding:0 12px;font-size:1.1rem;color:#888;background:var(--bg);flex-shrink:0">${hasShopify ? '⟷' : '→'}</div>
            <div style="flex:1;padding:10px 14px;border-left:1px solid var(--border)">
                <div style="font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;color:var(--brand-purple);font-family:'Tektur',sans-serif;margin-bottom:6px">e-računi</div>
                <div style="font-size:.88rem;font-weight:600;margin-bottom:2px">${o.number}</div>
                <div style="font-size:.8rem;color:#aaa;margin-bottom:6px">${o.buyerName || ''}</div>
                <div style="display:flex;flex-wrap:wrap;align-items:center;gap:6px">
                    ${o.status ? badge(o.status, erc) : ''}
                    ${total ? `<span style="font-size:.75rem;color:#888">${total}</span>` : ''}
                </div>
            </div>
        </div>`;
    }).join('');
}


// Load the default active tab on page load
document.addEventListener('DOMContentLoaded', function () {
    const activeTab = document.querySelector('.tab-panel.active');
    if (activeTab && activeTab.id === 'tab-process-orders') {
        poOnActivate();
    }
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') prModalClose();
    });
});
</script>
{% endblock %}