{% extends "admin_base.html" %}

{% block extra_head %}
<link rel="stylesheet" href="/plugins/catalog-stickers/assets/css/stickers.css">
{% endblock %}

{% block admin_content %}
<div class="catalog-stickers-container mx-auto max-w-7xl px-4 pb-32 pt-5 text-foreground sm:px-6"
     data-store-name="{{ store_name | default(value='MyMe Foods') }}"
     data-fssai-text="{{ fssai_text | default(value='FSSAI') }}"
     data-packed-marketed-by="{{ packed_marketed_by | default(value='') }}"
     data-print-barcode-default="{{ print_barcode_default | default(value=true) }}">
    <div class="stickers-header flex flex-col gap-2 border-b border-divider pb-4 sm:flex-row sm:items-end sm:justify-between">
        <div>
            <h1 class="text-2xl font-bold tracking-tight text-foreground sm:text-3xl">Print product stickers</h1>
            <p class="mt-1 text-sm text-muted">Choose products, set batch details, and generate a print-ready PDF.</p>
        </div>
    </div>

    <div class="sticker-tabs blocks-section-tabs" role="tablist" aria-label="Sticker workflow">
        <button type="button" class="tab-btn blocks-section-tab active" id="sticker-tab-select" role="tab" aria-selected="true" aria-controls="tab-select" tabindex="0" data-tab="tab-select">
            <i class="fas fa-th-list"></i> 1. Select Items
            <span class="badge" id="tabSelectCount">0</span>
        </button>
        <button type="button" class="tab-btn blocks-section-tab" id="sticker-tab-batch" role="tab" aria-selected="false" aria-controls="tab-batch" tabindex="-1" data-tab="tab-batch">
            <i class="fas fa-layer-group"></i> 2. Batch &amp; Print
            <span class="badge" id="tabBatchCount">0</span>
        </button>
        <button type="button" class="tab-btn blocks-section-tab" id="sticker-tab-design" role="tab" aria-selected="false" aria-controls="tab-design" tabindex="-1" data-tab="tab-design">
            <i class="fas fa-pen-ruler"></i> 3. Design
        </button>
    </div>

    <!-- Tab 1: Item selection -->
    <div class="tab-panel active flex flex-col gap-4" id="tab-select" role="tabpanel" aria-labelledby="sticker-tab-select">
        <div class="search-card-sticky rounded-xl border border-divider bg-surface p-4 shadow-sm">
            <div class="mb-3">
                <label class="sr-only" for="stickerSearch">Search products</label>
                <input type="search" id="stickerSearch" placeholder="Search products by name… (press / to focus)" class="blocks-input">
            </div>
            <div class="category-filters blocks-filter-tabs" id="categoryFilters" aria-label="Filter by category">
                <button type="button" class="filter-btn blocks-filter-tab active" aria-pressed="true" data-category="all">All products</button>
                {% for cat in categories %}
                <button type="button" class="filter-btn blocks-filter-tab" aria-pressed="false" data-category="{{ cat.id }}">{{ cat.title }}</button>
                {% endfor %}
            </div>
        </div>

        <div id="products-grid" class="products-grid grid grid-cols-[repeat(auto-fill,minmax(10rem,1fr))] gap-3 sm:gap-4" aria-live="polite" aria-busy="true">
            <div class="col-span-full rounded-xl border border-divider bg-surface p-8 text-center text-muted">
                <i class="fas fa-circle-notch fa-spin"></i> Loading products...
            </div>
        </div>
    </div>

    <!-- Tab 2: Print batch + queue + paper layout -->
    <div class="tab-panel flex flex-col gap-4" id="tab-batch" role="tabpanel" aria-labelledby="sticker-tab-batch" aria-hidden="true">
        <!-- Batch Settings -->
        <div class="card batch-config-card">
            <h3 class="text-lg font-semibold text-foreground"><i class="fas fa-layer-group"></i> Print batch</h3>
            <p class="mb-3 text-sm text-muted">These details apply to every sticker in this print job.</p>
            <div class="batch-config-grid blocks-responsive-form-grid">
                <div class="form-group blocks-form-field">
                    <label for="batch-no-input">Batch number</label>
                    <div class="flex flex-col gap-2 sm:flex-row">
                        <input type="text" id="batch-no-input" class="blocks-input" placeholder="e.g. B-260918-A3F">
                        <button type="button" id="generate-batch-btn" class="blocks-button blocks-button-secondary shrink-0" title="Generate a new batch number">
                            <i class="fas fa-dice"></i> Generate
                        </button>
                    </div>
                </div>
                <div class="form-group blocks-form-field">
                    <label for="mfg-date-input">Manufacturing date</label>
                    <input type="date" id="mfg-date-input" class="blocks-input">
                    <label class="mt-2 inline-flex min-h-11 items-center gap-2 text-sm text-foreground" title="When off, only month and year print on the sticker">
                        <input type="checkbox" id="mfg-include-day">
                        Include day in print
                    </label>
                    <label class="inline-flex min-h-11 items-center gap-2 text-sm text-foreground" title="Print a scannable barcode on each sticker">
                        <input type="checkbox" id="print-barcode-toggle" checked>
                        Print barcode
                    </label>
                    <label class="inline-flex min-h-11 items-center gap-2 text-sm text-foreground" title="Include or hide the MRP row">
                        <input type="checkbox" id="print-price-toggle" checked>
                        Print price
                    </label>
                </div>
            </div>
        </div>

        <!-- Print Queue -->
        <div class="card print-queue-card">
            <div class="print-queue-header">
                <div class="flex min-w-0 items-center gap-2">
                    <h3 class="m-0 text-lg font-semibold text-foreground">Print queue</h3>
                    <span class="badge" id="queueCount">0</span>
                </div>
                <button type="button" id="clear-queue-btn" class="blocks-button blocks-button-secondary">Clear all</button>
            </div>

            <div id="bulk-toolbar" class="bulk-toolbar mb-3 hidden flex-wrap items-center gap-2 rounded-lg border border-brand bg-canvas p-3 text-sm" hidden>
                <span id="bulk-selected-count">0 selected</span>
                <button type="button" id="bulk-edit-btn" class="blocks-button blocks-button-primary">
                    <i class="fas fa-edit"></i> Bulk Edit
                </button>
                <button type="button" id="bulk-remove-btn" class="blocks-button blocks-icon-button-danger">
                    <i class="fas fa-trash"></i> Remove
                </button>
            </div>

            <div id="queue-table-wrap" class="queue-table-wrap blocks-table-scroll">
                <div class="p-6 text-center text-sm text-muted" id="queue-empty-msg">Your queue is empty. <a href="#tab-select" id="goto-select-link" class="font-semibold text-brand underline">Choose products</a> to add stickers.</div>
                <table class="print-queue-table w-full min-w-[42rem] border-collapse text-sm" id="print-queue-table" hidden>
                    <thead>
                        <tr>
                            <th><input type="checkbox" id="select-all-checkbox" class="size-5" aria-label="Select all queued products"></th>
                            <th>Product</th>
                            <th>Quantity</th>
                            <th>Vegetarian</th>
                            <th>Price</th>
                            <th>Net Wt</th>
                            <th>Best Before</th>
                            <th><span class="sr-only">Actions</span></th>
                        </tr>
                    </thead>
                    <tbody id="print-queue-body">
                    </tbody>
                </table>
            </div>
        </div>


    </div>

    <!-- Tab 3: Sticker designer (drag & drop component layout) -->
    <div class="tab-panel flex flex-col gap-4" id="tab-design" role="tabpanel" aria-labelledby="sticker-tab-design" aria-hidden="true">
        <div class="card">
            <div class="dsg-head">
                <div>
                    <h3 class="m-0 text-lg font-semibold text-foreground"><i class="fas fa-pen-ruler"></i> Sticker design</h3>
                    <p class="mt-1 text-sm text-muted">Move or resize components on the canvas. Changes save to this tenant and apply to generated PDFs.</p>
                </div>
                <span class="dsg-save-status blocks-status-pill is-success" id="dsg-save-status" role="status" aria-live="polite">Saved</span>
            </div>
            <div class="dsg-toolbar" role="toolbar" aria-label="Designer tools">
                <div class="dsg-tool-group">
                    <button type="button" id="dsg-zoom-out" class="blocks-button blocks-button-secondary min-h-10 px-3" aria-label="Zoom out" title="Zoom out">−</button>
                    <span id="dsg-zoom-label" class="dsg-zoom-label">100%</span>
                    <button type="button" id="dsg-zoom-in" class="blocks-button blocks-button-secondary min-h-10 px-3" aria-label="Zoom in" title="Zoom in">+</button>
                </div>
                <div class="dsg-tool-group">
                    <button type="button" id="dsg-toggle-grid" class="blocks-button blocks-button-secondary min-h-10 px-3" aria-pressed="true" title="Toggle millimetre grid">Grid</button>
                    <button type="button" id="dsg-toggle-snap" class="blocks-button blocks-button-secondary min-h-10 px-3" aria-pressed="true" title="Toggle snap to grid and component edges">Snap</button>
                </div>
                <div class="dsg-tool-group">
                    <button type="button" id="dsg-undo" class="blocks-button blocks-button-secondary min-h-10 px-3" aria-label="Undo" title="Undo (Ctrl+Z)"><i class="fas fa-undo"></i></button>
                    <button type="button" id="dsg-redo" class="blocks-button blocks-button-secondary min-h-10 px-3" aria-label="Redo" title="Redo (Ctrl+Shift+Z)"><i class="fas fa-redo"></i></button>
                </div>
                <div class="dsg-tool-group">
                    <button type="button" id="dsg-save-now" class="blocks-button blocks-button-primary min-h-10"><i class="fas fa-save"></i> Save</button>
                    <button type="button" id="dsg-reset" class="blocks-button blocks-button-secondary min-h-10" title="Discard your design and restore the plugin's built-in default sticker layout"><i class="fas fa-undo"></i> Restore default layout</button>
                </div>
                <div class="dsg-tool-group">
                    <button type="button" id="dsg-export" class="blocks-button blocks-button-secondary min-h-10" title="Download the layout as a JSON file"><i class="fas fa-download"></i> Export JSON</button>
                    <button type="button" id="dsg-import" class="blocks-button blocks-button-secondary min-h-10" title="Load a layout from a JSON file or pasted text"><i class="fas fa-upload"></i> Import JSON</button>
                </div>
            </div>
            <div id="sticker-designer"
                 data-artwork-width="{{ artwork_width_mm | default(value=100) }}"
                 data-artwork-height="{{ artwork_height_mm | default(value=70) }}">
                <div class="dsg-workspace">
                    <aside class="dsg-palette" aria-label="Sticker components">
                        <h4>Components</h4>
                        <p class="mb-2 text-xs text-muted">Choose a component to edit it, or toggle its visibility.</p>
                        <ul id="dsg-palette-list"></ul>
                    </aside>
                    <div class="dsg-canvas-viewport" id="dsg-viewport">
                        <div class="dsg-canvas-scale" id="dsg-scale">
                            <div class="dsg-canvas" id="dsg-canvas" aria-label="Sticker design canvas"></div>
                            <div class="dsg-grid-overlay" id="dsg-grid" hidden></div>
                            <div class="dsg-select-layer" id="dsg-select-layer" hidden>
                                <div class="dsg-select-box" id="dsg-select-box"></div>
                            </div>
                        </div>
                    </div>
                    <aside class="dsg-props" aria-label="Selected component properties">
                        <h4>Properties</h4>
                        <div id="dsg-props-body">
                            <p class="text-sm text-muted">Select a component on the canvas to edit its position, size and style.</p>
                        </div>
                    </aside>
                </div>
            </div>
        </div>
    </div>

    <!-- Common sticky footer: summary + single Generate button -->
    <div class="print-footer sticky bottom-0 z-20 mt-4 flex flex-col gap-3 rounded-t-xl border border-divider bg-surface p-3 shadow-lg sm:flex-row sm:items-center sm:justify-between sm:px-5" id="print-footer">
        <div class="print-footer-summary">
            <div class="footer-stat"><span class="footer-label">Items</span><span class="footer-value" id="summary-items">0</span></div>
            <div class="footer-stat"><span class="footer-label">Total Stickers</span><span class="footer-value" id="summary-total">0</span></div>
            <div class="footer-stat"><span class="footer-label">Pages</span><span class="footer-value" id="summary-pages">0</span></div>
        </div>
        <button id="generate-stickers-btn" class="generate-btn blocks-button blocks-button-primary min-h-12 w-full text-base sm:w-auto sm:min-w-52" disabled>
            <i class="fas fa-file-pdf"></i> Generate PDF
        </button>
    </div>
</div>

<!-- PDF generation progress (staged: prepare -> send -> render -> download) -->
<dialog id="pdfProgressOverlay" class="pdf-progress-backdrop">
    <div class="pdf-progress-dialog" aria-labelledby="pdf-progress-title" aria-live="polite">
        <h3 id="pdf-progress-title"><i class="fas fa-file-pdf"></i> Generating PDF…</h3>
        <div class="pdf-progress-stage" id="pdf-progress-stage">Preparing…</div>
        <div class="pdf-progress-track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" id="pdf-progress-track">
            <div class="pdf-progress-fill" id="pdf-progress-fill"></div>
        </div>
        <div class="pdf-progress-meta">
            <span id="pdf-progress-pct">0%</span>
            <span id="pdf-progress-elapsed">0s elapsed</span>
        </div>
        <div class="pdf-progress-detail" id="pdf-progress-detail"></div>
        <div class="pdf-progress-actions">
            <button type="button" id="pdf-progress-cancel" class="blocks-button blocks-button-secondary">Cancel generation</button>
        </div>
    </div>
</dialog>

<!-- Bulk Edit Modal -->
<dialog id="bulkEditModal" class="blocks-dialog">
    <div class="modal-dialog" aria-labelledby="bulk-modal-title">
        <div class="modal-header">
            <h3 id="bulk-modal-title">Bulk edit selected items</h3>
            <button type="button" class="blocks-icon-button" id="bulk-modal-close" aria-label="Close bulk edit">×</button>
        </div>
        <div class="modal-body">
            <p class="mb-4 text-sm text-muted">Leave a field empty to keep its current value. Applies to <strong id="bulk-modal-count">0</strong> selected items.</p>
            <div class="form-group blocks-form-field">
                <label for="bulk-veg">Vegetarian status</label>
                <select id="bulk-veg" class="blocks-input">
                    <option value="">— Keep existing —</option>
                    <option value="1">Vegetarian 🟢</option>
                    <option value="0">Non-Vegetarian 🔴</option>
                </select>
            </div>
            <div class="form-group blocks-form-field mt-4">
                <label for="bulk-net-weight">Net weight</label>
                <input type="text" id="bulk-net-weight" class="blocks-input" placeholder="e.g. 500g">
            </div>
            <div class="form-group blocks-form-field mt-4">
                <label for="bulk-best-before">Best before</label>
                <input type="text" id="bulk-best-before" class="blocks-input" placeholder="e.g. 6 months from manufacturing">
            </div>
            <div class="form-group blocks-form-field mt-4">
                <label for="bulk-price">Custom price</label>
                <input type="number" step="0.01" min="0" id="bulk-price" class="blocks-input" placeholder="Leave empty to keep existing">
            </div>
        </div>
        <div class="modal-footer flex flex-wrap justify-end gap-2 border-t border-divider p-4">
            <button type="button" id="bulk-modal-cancel" class="blocks-button blocks-button-secondary">Cancel</button>
            <button type="button" id="bulk-modal-apply" class="blocks-button blocks-button-primary">Apply to selected</button>
        </div>
    </div>
</dialog>

<!-- Variant Selection Modal (POS-style: pick a specific SKU) -->
<dialog id="variantModal" class="blocks-dialog">
    <div class="modal-dialog" aria-labelledby="variantModalTitle">
        <div class="modal-header">
            <h3 id="variantModalTitle">Select Variant</h3>
            <button type="button" class="blocks-icon-button" id="variant-modal-close" aria-label="Close variant picker">×</button>
        </div>
        <div class="modal-body">
            <div id="variantList" class="variant-list-flex">
            </div>
        </div>
    </div>
</dialog>
<!-- Import Layout Modal (sticker designer) -->
<dialog id="dsgImportModal" class="blocks-dialog">
    <div class="modal-dialog" aria-labelledby="dsg-import-title">
        <div class="modal-header">
            <h3 id="dsg-import-title">Import sticker layout</h3>
            <button type="button" class="blocks-icon-button" id="dsg-import-close" aria-label="Close import dialog">×</button>
        </div>
        <div class="modal-body">
            <p class="mb-3 text-sm text-muted">Paste a layout JSON object or choose a file exported from this designer.</p>
            <div class="mb-3">
                <button type="button" id="dsg-import-pick" class="blocks-button blocks-button-secondary"><i class="fas fa-folder-open"></i> Choose JSON file…</button>
                <input type="file" id="dsg-import-file" accept=".json,application/json" hidden>
            </div>
            <label class="sr-only" for="dsg-import-text">Sticker layout JSON</label>
            <textarea id="dsg-import-text" class="blocks-input min-h-52 font-mono text-xs" rows="10" spellcheck="false" placeholder='{"version": 1, "components": [...]}'></textarea>
            <p class="mt-2 text-sm text-danger" id="dsg-import-error" role="alert" hidden></p>
        </div>
        <div class="modal-footer flex flex-wrap justify-end gap-2 border-t border-divider p-4">
            <button type="button" id="dsg-import-cancel" class="blocks-button blocks-button-secondary">Cancel</button>
            <button type="button" id="dsg-import-apply" class="blocks-button blocks-button-primary">Apply layout</button>
        </div>
    </div>
</dialog>
{% endblock %}

{% block scripts %}
<script type="application/json" id="sticker-layout-data">{{ sticker_layout | json_encode | safe }}</script>
<script src="/static/js/blocks-variant-label.js"></script>
<script src="/plugins/catalog-stickers/assets/js/stickers.js"></script>
<script src="/plugins/catalog-stickers/assets/js/sticker-designer.js"></script>
{% endblock %}