{% extends "modern/base.html" %}

{% block title %}Edit: {{ filename }} - Zebra Day{% endblock %}

{% block extra_head %}
<style>
    .editor-container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); }
    .editor-textarea { min-height: 500px; font-family: var(--font-mono); font-size: 14px; }
    .preview-frame { background: var(--color-white); border-radius: var(--radius-md); padding: var(--spacing-lg); min-height: 300px; }
	    .vars-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--spacing-md); }
    @media (max-width: 1024px) { .editor-container { grid-template-columns: 1fr; } }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">Edit: {{ filename }}</h1>
    <p class="page-subtitle">
        {% if source_location == 'user' %}
        <i class="fas fa-user text-success"></i> User template
        {% else %}
        <i class="fas fa-box text-info"></i> Package template
        {% endif %}
    </p>
</div>

<!-- Breadcrumb -->
<div class="mb-lg">
    <a href="/" class="text-muted">Dashboard</a>
    <span class="text-muted"> / </span>
    <a href="/templates">Templates</a>
    <span class="text-muted"> / </span>
    <span>{{ filename }}</span>
</div>

<form id="editor-form" action="/save" method="post">
    
    <div class="editor-container">
	        <!-- Left Column: Editor + Variables + Test Print -->
	        <div class="d-flex" style="flex-direction: column; gap: var(--spacing-lg);">
	            <!-- Editor Panel -->
	            <div class="card">
	                <div class="card-header">
	                    <h3 class="card-title"><i class="fas fa-code"></i> ZPL Code</h3>
	                    <button type="button" class="btn btn-outline btn-sm" onclick="previewTemplate()">
	                        <i class="fas fa-eye"></i> Preview
	                    </button>
	                </div>
	                <textarea name="content" id="zpl-editor" class="form-control editor-textarea">{{ content }}</textarea>
	            </div>

	            <!-- Dynamic Variables -->
	            <div class="card">
	                <div class="card-header">
	                    <h3 class="card-title"><i class="fas fa-sliders"></i> Template Variables</h3>
	                    <span class="badge badge-info" id="vars-status">Auto</span>
	                </div>
	                <div class="card-body">
	                    <p class="text-muted mb-md" style="margin-top: 0;">
	                        Variables are detected from <code>{variable_name}</code> placeholders in the ZPL.
	                        Values entered here are substituted for Preview and Test Print.
	                    </p>
	                    <div id="vars-container" class="vars-grid"></div>
	                    <div id="vars-empty" class="text-muted" style="display: none;">
	                        No placeholders detected.
	                    </div>
	                </div>
	            </div>

	            <!-- Print Test Label -->
	            <div class="card">
	                <div class="card-header">
	                    <h3 class="card-title"><i class="fas fa-print"></i> Print Test Label</h3>
	                </div>
	                <div class="card-body">
	                    <div class="grid grid-3">
	                        <div class="form-group mb-0">
	                            <label class="form-label">Lab</label>
	                            <select class="form-control" id="lab-select" onchange="updatePrinters()">
	                                <option value="__download_png__" selected>Download as PNG</option>
	                                <option disabled>──────────</option>
	                                <option value="">Select a lab...</option>
	                                {% for lab in labs %}
	                                <option value="{{ lab }}">{{ lab }}</option>
	                                {% endfor %}
	                            </select>
	                        </div>
	                        <div class="form-group mb-0">
	                            <label class="form-label">Printer</label>
	                            <select class="form-control" id="printer-select" disabled>
	                                <option value="">Select a printer...</option>
	                            </select>
	                        </div>
	                        <div class="form-group mb-0">
	                            <label class="form-label">Action</label>
	                            <button type="button" class="btn btn-primary" style="width: 100%;" onclick="printTestLabel()">
	                                <i class="fas fa-play"></i> Print Test Label
	                            </button>
	                        </div>
	                    </div>
	                    <p class="text-muted" style="margin-bottom: 0; margin-top: var(--spacing-md);">
	                        Uses the same printer routing schema as the Print page (<code>labs_dict[lab].printers</code>).
	                    </p>
	                </div>
	            </div>
	        </div>

        <!-- Preview Panel -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-image"></i> Preview</h3>
                <span class="badge badge-info" id="preview-status">Ready</span>
            </div>
            <div class="preview-frame" id="preview-container">
                <div class="empty-state">
                    <i class="fas fa-image"></i>
                    <p>Click Preview to generate</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Save Options -->
    <div class="card mt-lg">
        <div class="card-header">
            <h3 class="card-title"><i class="fas fa-save"></i> Save Options</h3>
        </div>
        <div class="card-body">
            <div class="grid grid-3">
                <div class="form-group mb-0">
                    <label class="form-label">Save as</label>
                    <input type="text" name="filename" class="form-control"
                           value="{{ template_name }}.zpl"
                           placeholder="my_template.zpl">
                    <small class="text-muted">Filename (e.g., my_template.zpl)</small>
                </div>
                <div class="form-group mb-0">
                    <label class="form-label">Location</label>
                    <select name="location" class="form-control" id="save-location">
                        <option value="user" {% if source_location == 'user' %}selected{% endif %}>
                            User Config (~/.config/zebra_day/label_styles/)
                        </option>
                        <option value="package" {% if source_location == 'package' %}selected{% endif %}>
                            Package (requires write access)
                        </option>
                    </select>
                </div>
                <div class="form-group mb-0">
                    <label class="form-label">Options</label>
                    <div style="display: flex; flex-direction: column; gap: var(--spacing-xs);">
                        <label style="display: flex; align-items: center; gap: var(--spacing-sm); font-weight: normal;">
                            <input type="checkbox" name="backup" value="true" checked>
                            Backup existing file
                        </label>
                        <label style="display: flex; align-items: center; gap: var(--spacing-sm); font-weight: normal;">
                            <input type="checkbox" name="overwrite" value="true" checked>
                            Overwrite if exists
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Actions -->
    <div class="card mt-lg">
        <div class="d-flex" style="justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--spacing-md);">
            <a href="/templates" class="btn btn-outline">
                <i class="fas fa-arrow-left"></i> Cancel
            </a>
            <div class="d-flex gap-md">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save"></i> Save Template
                </button>
            </div>
        </div>
    </div>
</form>
{% endblock %}

{% block extra_scripts %}
<script>
	    var labsDict = {{ labs_dict | safe }};
	    var currentFilename = "{{ filename }}";
	    var DOWNLOAD_SENTINEL = "__download_png__";

	    var DEFAULT_TEST_VALUES = {
	        uid_barcode: "TEST-UID",
	        alt_a: "Sample A",
	        alt_b: "Sample B",
	        alt_c: "Sample C",
	        alt_d: "Sample D",
	        alt_e: "Sample E",
	        alt_f: "Sample F"
	    };

	    function humanizeVarName(v) {
	        return v.replaceAll('_', ' ').replace(/\b[a-z]/g, c => c.toUpperCase());
	    }

	    function detectZplVariables(zplText) {
	        // Find placeholders like {uid_barcode}.
		        // Skip double-brace patterns like {% raw %}{{...}}{% endraw %} if they ever appear.
	        var vars = new Set();
	        var re = /\{[A-Za-z_][A-Za-z0-9_]*\}/g;
	        var match;
	        while ((match = re.exec(zplText)) !== null) {
	            var token = match[0];
	            var start = match.index;
	            var end = start + token.length;
	            var prevChar = start > 0 ? zplText[start - 1] : "";
	            var nextChar = end < zplText.length ? zplText[end] : "";
	            if (prevChar === "{" || nextChar === "}") {
	                continue;
	            }
	            vars.add(token.slice(1, -1));
	        }
	        return Array.from(vars).sort();
	    }

	    function getVarInputId(varName) {
	        return "var-" + varName;
	    }

	    function getVariableValues() {
	        var container = document.getElementById('vars-container');
	        var inputs = container.querySelectorAll('input[data-var]');
	        var values = {};
	        inputs.forEach(function (inp) {
	            values[inp.dataset.var] = inp.value;
	        });
	        return values;
	    }

	    function syncVariableFields() {
	        var status = document.getElementById('vars-status');
	        var zplText = document.getElementById('zpl-editor').value;
	        var vars = detectZplVariables(zplText);
	
	        status.textContent = 'Synced';
	        status.className = 'badge badge-success';
	
	        var container = document.getElementById('vars-container');
	        var empty = document.getElementById('vars-empty');
	
	        var existing = getVariableValues();
	
	        container.innerHTML = "";
	        if (vars.length === 0) {
	            empty.style.display = 'block';
	            return;
	        }
	        empty.style.display = 'none';

	        vars.forEach(function (v) {
	            var group = document.createElement('div');
	            group.className = 'form-group mb-0';
	
	            var label = document.createElement('label');
	            label.className = 'form-label';
	            label.setAttribute('for', getVarInputId(v));
	            label.textContent = '{' + v + '}';
	
	            var input = document.createElement('input');
	            input.type = 'text';
	            input.className = 'form-control';
	            input.id = getVarInputId(v);
	            input.dataset.var = v;
	            input.placeholder = humanizeVarName(v);
	
	            if (existing[v] !== undefined && existing[v] !== null && existing[v] !== '') {
	                input.value = existing[v];
	            } else if (DEFAULT_TEST_VALUES[v] !== undefined) {
	                input.value = DEFAULT_TEST_VALUES[v];
	            } else {
	                input.value = 'TEST';
	            }

	            group.appendChild(label);
	            group.appendChild(input);
	            container.appendChild(group);
	        });
	
	        // Drop back to info after a moment
	        setTimeout(function () {
	            status.textContent = 'Auto';
	            status.className = 'badge badge-info';
	        }, 800);
	    }

	    function substituteZpl(zplText, values) {
	        return zplText.replace(/\{([A-Za-z_][A-Za-z0-9_]*)\}/g, function (match, varName, offset, whole) {
	            var prevChar = offset > 0 ? whole[offset - 1] : "";
	            var nextChar = offset + match.length < whole.length ? whole[offset + match.length] : "";
	            if (prevChar === "{" || nextChar === "}") {
	                return match;
	            }
	            if (values[varName] === undefined) {
	                return match;
	            }
	            return values[varName];
	        });
	    }

	    async function renderCurrentZpl() {
	        var zplText = document.getElementById('zpl-editor').value;
	        var values = getVariableValues();
	        var rendered = substituteZpl(zplText, values);

	        var response = await fetch('/api/v1/render', {
	            method: 'POST',
	            headers: { 'Content-Type': 'application/json' },
	            body: JSON.stringify({ zpl_content: rendered })
	        });

	        var data = await response.json();
	        if (!response.ok) {
	            throw new Error(data.detail || 'Render failed');
	        }
	        if (!data.success || !data.png_url) {
	            throw new Error(data.detail || data.error || 'Render failed');
	        }
	        return data.png_url;
	    }

	    async function previewTemplate() {
	        var statusBadge = document.getElementById('preview-status');
	        var container = document.getElementById('preview-container');

	        statusBadge.textContent = 'Loading...';
	        statusBadge.className = 'badge badge-warning';

	        try {
	            var pngUrl = await renderCurrentZpl();
	            container.innerHTML = '<img src="' + pngUrl + '" alt="Preview" style="max-width: 100%;">';
	            statusBadge.textContent = 'Ready';
	            statusBadge.className = 'badge badge-success';
	        } catch (err) {
	            container.innerHTML = '<div class="empty-state"><i class="fas fa-exclamation-triangle"></i><p>' + err.message + '</p></div>';
	            statusBadge.textContent = 'Error';
	            statusBadge.className = 'badge badge-error';
	        }
	    }

	    function updatePrinters() {
	        var labSelect = document.getElementById('lab-select');
	        var printerSelect = document.getElementById('printer-select');
	        var lab = labSelect.value;

	        printerSelect.innerHTML = '<option value="">Select a printer...</option>';
	        printerSelect.disabled = true;

	        if (!lab || lab === DOWNLOAD_SENTINEL) {
	            return;
	        }

	        if (labsDict[lab] && labsDict[lab].printers) {
	            var printers = labsDict[lab].printers;
	            for (var printerId in printers) {
	                var printerInfo = printers[printerId];
	                var option = document.createElement('option');
	                option.value = printerId;
	                option.text = printerInfo.printer_name || printerId;
	                printerSelect.appendChild(option);
	            }
	            printerSelect.disabled = false;
	        }
	    }

	    async function downloadCurrentPng() {
	        showLoading('Rendering PNG...');
	        try {
	            var pngUrl = await renderCurrentZpl();
	            var response = await fetch(pngUrl);
	            if (!response.ok) {
	                throw new Error('Failed to download PNG');
	            }
	            var blob = await response.blob();
	            var url = window.URL.createObjectURL(blob);
	            var a = document.createElement('a');
	            a.href = url;
	            var stem = (currentFilename || 'label').replace(/\.zpl$/, '');
	            a.download = stem + '_test.png';
	            document.body.appendChild(a);
	            a.click();
	            window.URL.revokeObjectURL(url);
	            a.remove();
	            showToast('success', 'Success', 'PNG downloaded');
	        } finally {
	            hideLoading();
	        }
	    }

	    async function printTestLabel() {
	        var lab = document.getElementById('lab-select').value;
	        var printer = document.getElementById('printer-select').value;

	        if (lab === DOWNLOAD_SENTINEL) {
	            try {
	                await downloadCurrentPng();
	            } catch (e) {
	                showToast('error', 'Error', 'Failed to render/download PNG: ' + e.message);
	            }
	            return;
	        }

	        if (!lab) {
	            showToast('warning', 'Select Lab', 'Please select a lab, or choose Download as PNG.');
	            return;
	        }
	        if (!printer) {
	            showToast('warning', 'Select Printer', 'Please select a printer.');
	            return;
	        }

	        var zplText = document.getElementById('zpl-editor').value;
	        var values = getVariableValues();
	        var rendered = substituteZpl(zplText, values);

	        showLoading('Sending print request...');
	        try {
	            var response = await fetch('/api/v1/print', {
	                method: 'POST',
	                headers: { 'Content-Type': 'application/json' },
	                body: JSON.stringify({
	                    lab: lab,
	                    printer: printer,
	                    copies: 1,
	                    zpl_content: rendered
	                })
	            });
	
	            var data = await response.json();
	            if (!response.ok) {
	                showToast('error', 'Print Failed', data.detail || 'Unknown error');
	                return;
	            }
	            if (!data.success) {
	                showToast('error', 'Print Failed', data.message || 'Unknown error');
	                return;
	            }
	            showToast('success', 'Print Sent', data.message || 'Print request sent successfully');
	        } catch (e) {
	            showToast('error', 'Error', 'Failed to print: ' + e.message);
	        } finally {
	            hideLoading();
	        }
	    }

	    var syncVariableFieldsDebounced = debounce(syncVariableFields, 250);
	    document.addEventListener('DOMContentLoaded', function() {
	        // Initial sync and wire updates.
	        syncVariableFields();
	        document.getElementById('zpl-editor').addEventListener('input', syncVariableFieldsDebounced);
	        updatePrinters();
	    });
</script>
{% endblock %}