{% extends "admin_base.html" %}
{% block page_title %}{% if edit_mode %}Edit{% else %}Create{% endif %} Template{% endblock %}

{% block admin_content %}
<main class="designer-container mx-auto w-full max-w-[100rem] p-4 text-foreground sm:p-6"
     data-max-image-size-kb="{{ max_image_size_kb | default(value=2048) }}"
     data-template-bg="{% if template and template.background_image %}{{ template.background_image }}{% endif %}"
     data-coordinate-map="{% if template and template.coordinate_map %}{{ template.coordinate_map }}{% else %}[]{% endif %}">
    <div class="designer-header mb-5 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div><p class="text-sm font-medium text-brand">Howzzy design studio</p><h1 class="mt-1 text-2xl font-bold tracking-tight sm:text-3xl">{% if edit_mode %}Edit{% else %}Create{% endif %} ticket template</h1><p class="mt-1 text-sm text-muted">Customize the ticket and preview every change before saving.</p></div>
        <div class="header-actions flex flex-col-reverse gap-2 sm:flex-row">
            <a href="/plugins/howzzy/templates_index" class="blocks-button blocks-button-secondary justify-center">Cancel</a>
            <button type="button" onclick="saveTemplate()" class="blocks-button blocks-button-primary justify-center">💾 Save Template</button>
        </div>
    </div>

    <div class="designer-layout grid grid-cols-1 gap-4 lg:grid-cols-[20rem_minmax(0,1fr)] lg:items-start">
        <!-- Sidebar with controls -->
        <aside class="designer-sidebar flex min-w-0 flex-col overflow-hidden rounded-2xl border border-divider bg-surface shadow-sm lg:sticky lg:top-4 lg:max-h-[calc(100vh-2rem)]" id="designerSidebar" aria-label="Ticket design controls">
            <!-- Sidebar Toggle Button -->
            <button type="button" onclick="window.toggleSidebar()" class="sidebar-toggle m-3 self-start rounded-lg border border-divider bg-canvas px-3 py-2 text-sm font-medium text-foreground hover:bg-brand/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand" aria-expanded="true" aria-controls="designerControls">
                <span aria-hidden="true">◀</span> <span id="sidebar-toggle-label">Hide controls</span>
            </button>
            <div id="designerControls">
            <div class="control-tabs flex gap-1 overflow-x-auto border-b border-divider bg-canvas px-2" role="tablist" aria-label="Design settings">
                <button id="tab-button-basic" type="button" role="tab" aria-selected="true" aria-controls="tab-basic" tabindex="0" class="tab-btn active shrink-0 border-b-2 border-brand px-3 py-3 text-sm font-semibold text-brand focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand" onclick="switchTab('basic', event)">Basic</button>
                <button id="tab-button-layout" type="button" role="tab" aria-selected="false" aria-controls="tab-layout" tabindex="-1" class="tab-btn shrink-0 border-b-2 border-transparent px-3 py-3 text-sm font-medium text-muted  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand" onclick="switchTab('layout', event)">Layout</button>
                <div id="grid-mode-tabs" class="contents">
                    <button id="tab-button-grid" type="button" role="tab" aria-selected="false" aria-controls="tab-grid" tabindex="-1" class="tab-btn shrink-0 border-b-2 border-transparent px-3 py-3 text-sm font-medium text-muted  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand" onclick="switchTab('grid', event)">Grid</button>
                    <button id="tab-button-number" type="button" role="tab" aria-selected="false" aria-controls="tab-number" tabindex="-1" class="tab-btn shrink-0 border-b-2 border-transparent px-3 py-3 text-sm font-medium text-muted  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand" onclick="switchTab('number', event)">Ticket #</button>
                    <button id="tab-button-style" type="button" role="tab" aria-selected="false" aria-controls="tab-style" tabindex="-1" class="tab-btn shrink-0 border-b-2 border-transparent px-3 py-3 text-sm font-medium text-muted  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand" onclick="switchTab('style', event)">Style</button>
                </div>
                <div id="custom-mode-tabs" class="hidden">
                    <button id="tab-button-custom" type="button" role="tab" aria-selected="false" aria-controls="tab-custom" tabindex="-1" class="tab-btn shrink-0 border-b-2 border-transparent px-3 py-3 text-sm font-medium text-muted  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand" onclick="switchTab('custom', event)">Map</button>
                </div>
            </div>

            <div class="control-panels min-h-0 overflow-y-auto p-4 sm:p-5">
                <!-- Basic Tab -->
                <div id="tab-basic" class="control-panel active space-y-4" role="tabpanel" aria-labelledby="tab-button-basic" tabindex="0">
                    <h3 class="border-b border-divider pb-2 text-sm font-semibold uppercase tracking-wide text-muted">Basic Info</h3>
                    <div class="space-y-2">
                        <label for="template_name" class="block text-sm font-medium text-foreground">Template Name</label>
                        <input type="text" id="template_name" class="form-control" value="{% if template %}{{ template.name }}{% else %}My Template{% endif %}" required>
                    </div>
                    <div class="space-y-2">
                        <label for="template_desc" class="block text-sm font-medium text-foreground">Description</label>
                        <textarea id="template_desc" class="form-control" rows="2">{% if template %}{{ template.description }}{% endif %}</textarea>
                    </div>
                    <h3 class="border-b border-divider pb-2 text-sm font-semibold uppercase tracking-wide text-muted">Dimensions</h3>
                    <div class="space-y-2">
                        <label for="width" class="block text-sm font-medium text-foreground">Width (px)</label>
                        <input type="number" id="width" class="form-control" value="{% if template %}{{ template.width }}{% else %}800{% endif %}" min="400" max="1200" onchange="updateCanvas()">
                    </div>
                    <div class="space-y-2">
                        <label for="height" class="block text-sm font-medium text-foreground">Height (px)</label>
                        <input type="number" id="height" class="form-control" value="{% if template %}{{ template.height }}{% else %}400{% endif %}" min="200" max="800" onchange="updateCanvas()">
                    </div>
                    <h3 class="border-b border-divider pb-2 text-sm font-semibold uppercase tracking-wide text-muted">Background</h3>
                    <div class="space-y-2">
                        <label for="bg_color" class="block text-sm font-medium text-foreground">Background Color</label>
                        <input type="color" id="bg_color" class="form-control" value="{% if template %}{{ template.background_color }}{% else %}#ffffff{% endif %}" onchange="updateCanvas()">
                    </div>
                    <div class="space-y-2">
                        <label for="bg_image" class="block text-sm font-medium text-foreground">Background Image</label>
                        <input type="file" id="bg_image" class="form-control" accept="image/*" onchange="uploadBackground()">
                        {% if template and template.background_image %}
                        <button type="button" onclick="removeBackground()" class="blocks-button blocks-button-secondary blocks-button-sm mt-2">Remove Image</button>
                        {% endif %}
                    </div>
                    <div id="bg-image-controls" {% if not template or not template.background_image %}hidden{% endif %}>
                        <div class="space-y-2">
                            <label for="bg_opacity" class="block text-sm font-medium text-foreground">Image Opacity</label>
                        <input type="range" id="bg_opacity" class="form-control" min="0" max="1" step="0.1" value="{% if template %}{{ template.background_opacity }}{% else %}1{% endif %}" onchange="updateCanvas()" oninput="document.getElementById('opacity-value').textContent = this.value">
                            <small>Opacity: <span id="opacity-value">{% if template %}{{ template.background_opacity }}{% else %}1{% endif %}</span></small>
                        </div>
                        <div class="space-y-2">
                            <label for="bg_fit" class="block text-sm font-medium text-foreground">Image Fit</label>
                        <select id="bg_fit" class="form-control" onchange="updateCanvas()">
                                <option value="cover" {% if not template or template.background_fit == 'cover' %}selected{% endif %}>Cover (crop to fill)</option>
                                <option value="contain" {% if template and template.background_fit == 'contain' %}selected{% endif %}>Contain (fit inside)</option>
                                <option value="fill" {% if template and template.background_fit == 'fill' %}selected{% endif %}>Fill (stretch)</option>
                                <option value="none" {% if template and template.background_fit == 'none' %}selected{% endif %}>None (original size)</option>
                            </select>
                        </div>
                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                            <div class="space-y-2">
                                <label for="bg_position_x" class="block text-sm font-medium text-foreground">Position X</label>
                        <input type="number" id="bg_position_x" class="form-control" value="{% if template %}{{ template.background_position_x }}{% else %}0{% endif %}" onchange="updateCanvas()">
                            </div>
                            <div class="space-y-2">
                                <label for="bg_position_y" class="block text-sm font-medium text-foreground">Position Y</label>
                        <input type="number" id="bg_position_y" class="form-control" value="{% if template %}{{ template.background_position_y }}{% else %}0{% endif %}" onchange="updateCanvas()">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Layout Mode Selection Tab -->
                <div id="tab-layout" class="control-panel hidden space-y-4" role="tabpanel" aria-labelledby="tab-button-layout" tabindex="0" hidden>
                    <h3 class="border-b border-divider pb-2 text-sm font-semibold uppercase tracking-wide text-muted">Layout Mode</h3>
                    <div class="space-y-2">
                                <label class="radio-label flex cursor-pointer items-start gap-3 rounded-xl border border-divider p-3 text-sm font-medium text-foreground">
                            <input type="radio" name="layout_mode" value="grid" checked onchange="toggleLayoutMode('grid')">
                            Standard Grid (3x9)
                        </label>
                        <small class="text-muted">Classic Box Layout</small>
                    </div>
                    <div class="space-y-2">
                                <label class="radio-label flex cursor-pointer items-start gap-3 rounded-xl border border-divider p-3 text-sm font-medium text-foreground">
                            <input type="radio" name="layout_mode" value="custom" onchange="toggleLayoutMode('custom')">
                            Custom Map
                        </label>
                        <small class="text-muted">Place 15 numbers anywhere on the image</small>
                    </div>
                </div>

                <!-- Custom Map Tab (The Palette) -->
                <div id="tab-custom" class="control-panel hidden space-y-4" role="tabpanel" aria-labelledby="tab-button-custom" tabindex="0" hidden>
                    <h3 class="border-b border-divider pb-2 text-sm font-semibold uppercase tracking-wide text-muted">Custom Map Designer</h3>
                    <p class="text-sm text-muted">Drag points on the preview or enter exact coordinates below.</p>
                    
                    <div class="space-y-3 rounded-xl border border-divider p-3">
                        <!-- Will be populated by JS -->
                        <div id="number-palette" class="grid grid-cols-1 gap-2 sm:grid-cols-2" aria-label="Custom map number points"></div>
                    </div>
                    
                    <div class="flex flex-wrap gap-2">
                        <button type="button" class="blocks-button blocks-button-secondary blocks-button-sm" onclick="addCustomPoint()">Add number point</button>
                        <button type="button" class="blocks-button blocks-button-secondary blocks-button-sm" onclick="resetCustomMap()">Reset All Points</button>
                    </div>

                    <hr>
                    <h3 class="border-b border-divider pb-2 text-sm font-semibold uppercase tracking-wide text-muted">Number Styling</h3>
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div class="space-y-2">
                            <label for="custom_cell_width" class="block text-sm font-medium text-foreground">Width</label>
                        <input type="number" id="custom_cell_width" class="form-control" value="{% if template %}{{ template.cell_width }}{% else %}80{% endif %}" min="20" max="200" onchange="updateCanvas()">
                        </div>
                        <div class="space-y-2">
                            <label for="custom_cell_height" class="block text-sm font-medium text-foreground">Height</label>
                        <input type="number" id="custom_cell_height" class="form-control" value="{% if template %}{{ template.cell_height }}{% else %}60{% endif %}" min="20" max="200" onchange="updateCanvas()">
                        </div>
                    </div>
                    <div class="space-y-2">
                        <label for="cell_border_radius" class="block text-sm font-medium text-foreground">Background Radius</label>
                        <input type="range" id="cell_border_radius" class="form-control" min="0" max="50" value="{% if template %}{{ template.cell_border_radius | default(value=0) }}{% else %}0{% endif %}" onchange="updateCanvas()" oninput="document.getElementById('custom-radius-value').textContent = this.value">
                        <small>Radius: <span id="custom-radius-value">{% if template %}{{ template.cell_border_radius | default(value=0) }}{% else %}0{% endif %}</span>px</small>
                    </div>
                    <div class="space-y-2">
                        <label for="custom_grid_bg_color" class="block text-sm font-medium text-foreground">Background Color</label>
                        <input type="color" id="custom_grid_bg_color" class="form-control" value="{% if template %}{{ template.grid_bg_color }}{% else %}#ffffff{% endif %}" onchange="updateCanvas()">
                    </div>
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div class="space-y-2">
                            <label for="custom_grid_font_size" class="block text-sm font-medium text-foreground">Font Size</label>
                        <input type="number" id="custom_grid_font_size" class="form-control" value="{% if template %}{{ template.grid_font_size }}{% else %}24{% endif %}" min="10" max="60" onchange="updateCanvas()">
                        </div>
                        <div class="space-y-2">
                            <label for="custom_grid_font_color" class="block text-sm font-medium text-foreground">Font Color</label>
                        <input type="color" id="custom_grid_font_color" class="form-control" value="{% if template %}{{ template.grid_font_color }}{% else %}#000000{% endif %}" onchange="updateCanvas()">
                        </div>
                    </div>
                </div>

                <!-- Grid Tab -->
                <div id="tab-grid" class="control-panel hidden space-y-4" role="tabpanel" aria-labelledby="tab-button-grid" tabindex="0" hidden>
                    <h3 class="border-b border-divider pb-2 text-sm font-semibold uppercase tracking-wide text-muted">Number Grid Position</h3>
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div class="space-y-2">
                            <label for="grid_x" class="block text-sm font-medium text-foreground">X Position</label>
                        <input type="number" id="grid_x" class="form-control" value="{% if template %}{{ template.grid_x }}{% else %}50{% endif %}" min="0" onchange="updateCanvas()">
                        </div>
                        <div class="space-y-2">
                            <label for="grid_y" class="block text-sm font-medium text-foreground">Y Position</label>
                        <input type="number" id="grid_y" class="form-control" value="{% if template %}{{ template.grid_y }}{% else %}80{% endif %}" min="0" onchange="updateCanvas()">
                        </div>
                    </div>
                    <h3 class="border-b border-divider pb-2 text-sm font-semibold uppercase tracking-wide text-muted">Cell Size</h3>
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div class="space-y-2">
                            <label for="cell_width" class="block text-sm font-medium text-foreground">Cell Width</label>
                        <input type="number" id="cell_width" class="form-control" value="{% if template %}{{ template.cell_width }}{% else %}80{% endif %}" min="30" max="150" onchange="updateCanvas()">
                        </div>
                        <div class="space-y-2">
                            <label for="cell_height" class="block text-sm font-medium text-foreground">Cell Height</label>
                        <input type="number" id="cell_height" class="form-control" value="{% if template %}{{ template.cell_height }}{% else %}60{% endif %}" min="30" max="150" onchange="updateCanvas()">
                        </div>
                    </div>

                    <h3 class="border-b border-divider pb-2 text-sm font-semibold uppercase tracking-wide text-muted">Grid Style</h3>
                    <div class="space-y-2">
                        <label for="grid_font_size" class="block text-sm font-medium text-foreground">Font Size</label>
                        <input type="number" id="grid_font_size" class="form-control" value="{% if template %}{{ template.grid_font_size }}{% else %}24{% endif %}" min="12" max="48" onchange="updateCanvas()">
                    </div>
                    <div class="space-y-2">
                        <label for="grid_font_color" class="block text-sm font-medium text-foreground">Font Color</label>
                        <input type="color" id="grid_font_color" class="form-control" value="{% if template %}{{ template.grid_font_color }}{% else %}#000000{% endif %}" onchange="updateCanvas()">
                    </div>
                    <div class="space-y-2">
                        <label for="grid_bg_color" class="block text-sm font-medium text-foreground">Cell Background</label>
                        <input type="color" id="grid_bg_color" class="form-control" value="{% if template %}{{ template.grid_bg_color }}{% else %}#ffffff{% endif %}" onchange="updateCanvas()">
                    </div>
                </div>

                <!-- Ticket Number Tab -->
                <div id="tab-number" class="control-panel hidden space-y-4" role="tabpanel" aria-labelledby="tab-button-number" tabindex="0" hidden>
                    <h3 class="border-b border-divider pb-2 text-sm font-semibold uppercase tracking-wide text-muted">Ticket Number Position</h3>
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div class="space-y-2">
                            <label for="ticket_num_x" class="block text-sm font-medium text-foreground">X Position</label>
                        <input type="number" id="ticket_num_x" class="form-control" value="{% if template %}{{ template.ticket_num_x }}{% else %}20{% endif %}" min="0" onchange="updateCanvas()">
                        </div>
                        <div class="space-y-2">
                            <label for="ticket_num_y" class="block text-sm font-medium text-foreground">Y Position</label>
                        <input type="number" id="ticket_num_y" class="form-control" value="{% if template %}{{ template.ticket_num_y }}{% else %}20{% endif %}" min="0" onchange="updateCanvas()">
                        </div>
                    </div>
                    <h3 class="border-b border-divider pb-2 text-sm font-semibold uppercase tracking-wide text-muted">Ticket Number Style</h3>
                    <div class="space-y-2">
                        <label for="ticket_num_font_size" class="block text-sm font-medium text-foreground">Font Size</label>
                        <input type="number" id="ticket_num_font_size" class="form-control" value="{% if template %}{{ template.ticket_num_font_size }}{% else %}16{% endif %}" min="10" max="32" onchange="updateCanvas()">
                    </div>
                    <div class="space-y-2">
                        <label for="ticket_num_font_color" class="block text-sm font-medium text-foreground">Font Color</label>
                        <input type="color" id="ticket_num_font_color" class="form-control" value="{% if template %}{{ template.ticket_num_font_color }}{% else %}#666666{% endif %}" onchange="updateCanvas()">
                    </div>
                </div>

                <!-- Style Tab -->
                <div id="tab-style" class="control-panel hidden space-y-4" role="tabpanel" aria-labelledby="tab-button-style" tabindex="0" hidden>
                    <h3 class="border-b border-divider pb-2 text-sm font-semibold uppercase tracking-wide text-muted">Cell Borders</h3>
                    <div class="space-y-2">
                        <label class="checkbox-label flex cursor-pointer items-center gap-3 text-sm font-medium text-foreground">
                            <input type="checkbox" id="show_borders" {% if not template or template.show_borders %}checked{% endif %} onchange="updateCanvas()">
                            Show Cell Borders
                        </label>
                    </div>
                    <div class="space-y-2">
                        <label for="border_color" class="block text-sm font-medium text-foreground">Border Color</label>
                        <input type="color" id="border_color" class="form-control" value="{% if template %}{{ template.border_color }}{% else %}#000000{% endif %}" onchange="updateCanvas()">
                    </div>
                    <div class="space-y-2">
                        <label for="border_width" class="block text-sm font-medium text-foreground">Border Width</label>
                        <input type="number" id="border_width" class="form-control" value="{% if template %}{{ template.border_width }}{% else %}2{% endif %}" min="1" max="10" onchange="updateCanvas()">
                    </div>
                    
                    <h3 class="border-b border-divider pb-2 text-sm font-semibold uppercase tracking-wide text-muted">Outer Border</h3>
                    <div class="space-y-2">
                        <label class="checkbox-label flex cursor-pointer items-center gap-3 text-sm font-medium text-foreground">
                            <input type="checkbox" id="show_outer_border" {% if template and template.show_outer_border %}checked{% endif %} onchange="updateCanvas()">
                            Show Outer Border
                        </label>
                    </div>
                    <div class="space-y-2">
                        <label for="outer_border_color" class="block text-sm font-medium text-foreground">Outer Border Color</label>
                        <input type="color" id="outer_border_color" class="form-control" value="{% if template %}{{ template.outer_border_color }}{% else %}#667eea{% endif %}" onchange="updateCanvas()">
                    </div>
                    <div class="space-y-2">
                        <label for="outer_border_width" class="block text-sm font-medium text-foreground">Outer Border Width</label>
                        <input type="number" id="outer_border_width" class="form-control" value="{% if template %}{{ template.outer_border_width }}{% else %}10{% endif %}" min="0" max="50" onchange="updateCanvas()">
                    </div>
                    <div class="space-y-2">
                        <label for="outer_border_radius" class="block text-sm font-medium text-foreground">Corner Radius</label>
                        <input type="number" id="outer_border_radius" class="form-control" value="{% if template %}{{ template.outer_border_radius }}{% else %}12{% endif %}" min="0" max="50" onchange="updateCanvas()">
                    </div>
                </div>
            </div>
            </div>
        </div>

        <!-- Canvas Preview -->
        <section class="designer-canvas flex min-h-[28rem] min-w-0 flex-col overflow-hidden rounded-2xl border border-divider bg-surface p-4 shadow-sm sm:p-6" aria-label="Live ticket preview">
            <div class="canvas-toolbar mb-4 flex flex-wrap items-center justify-between gap-3 border-b border-divider pb-4">
                <span class="canvas-label font-semibold text-foreground">Live Preview</span>
                <div class="canvas-actions flex shrink-0 items-center gap-2">
                    <button type="button" onclick="zoomOut()" class="blocks-button blocks-button-secondary blocks-button-sm" aria-label="Zoom out">−</button>
                    <span id="zoom-level">100%</span>
                    <button type="button" onclick="zoomIn()" class="blocks-button blocks-button-secondary blocks-button-sm" aria-label="Zoom in">+</button>
                    <button type="button" onclick="fitToScreen()" class="blocks-button blocks-button-primary blocks-button-sm ml-1 whitespace-nowrap">Fit to Screen</button>
                </div>
            </div>
            <div class="canvas-wrapper flex min-h-[24rem] flex-1 items-center justify-center overflow-auto rounded-xl bg-canvas p-2 sm:p-4" id="canvas-wrapper">
                <canvas id="ticket-canvas" class="max-w-none rounded bg-surface shadow-xl" role="img" aria-label="Live ticket preview; edit custom number coordinates in the design controls"></canvas>
            </div>
            <p class="canvas-hint mt-4 rounded-xl border border-divider bg-canvas p-3 text-center text-sm text-muted">
                💡 Tip: Adjust values in the sidebar to see changes in real-time
            </p>
        </section>
        <div id="designer-feedback" class="blocks-workspace-notice" role="status" aria-live="polite" tabindex="-1" hidden></div>
    </div>
</main>
{% endblock %}

{% block scripts %}
<script src="/plugins/howzzy/assets/js/ticket-renderer.js"></script>
<script src="/plugins/howzzy/assets/js/ticket-designer.js"></script>
<script src="/plugins/howzzy/assets/js/template-designer-ui.js"></script>
{% endblock %}