(() => {
    const form = document.getElementById('templateForm');
    const tabs = document.getElementById('languageTabs');
    const panes = document.getElementById('languagePanes');
    const activeField = document.getElementById('ActiveLanguageIndex');
    const variablesField = document.getElementById('VariablesJson');
    const samples = document.getElementById('previewVariables');
    let dirty = !!form.querySelector('.validation-summary-errors');
    const sampleValues = new Map();

    function escapeHtml(value) {
        return String(value).replaceAll('&', '&amp;').replaceAll('<', '&lt;')
            .replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#39;');
    }

    function activePane() {
        return panes.querySelector('.language-pane:not([hidden])');
    }

    function selectPane(pane, focus = false) {
        Array.from(panes.children).forEach(item => { item.hidden = item !== pane; });
        Array.from(tabs.children).forEach(tab => {
            const selected = tab.dataset.pane === pane.id;
            tab.classList.toggle('active', selected);
            tab.setAttribute('aria-selected', String(selected));
            tab.tabIndex = selected ? 0 : -1;
            if (selected && focus) tab.focus();
        });
        activeField.value = Array.from(panes.children).indexOf(pane);
        updatePreview();
    }

    function readVariables() {
        const variables = JSON.parse(variablesField.value);
        if (!Array.isArray(variables)) throw new Error('Variables must be an array.');
        const names = new Set();
        variables.forEach(variable => {
            if (!variable || typeof variable.name !== 'string' || !variable.name.trim() || typeof variable.required !== 'boolean')
                throw new Error('Every variable needs a name and a boolean required property.');
            if (Object.keys(variable).some(key => !['name', 'required'].includes(key)))
                throw new Error('Use only name and required properties for each variable.');
            if (names.has(variable.name)) throw new Error('Variable names must be unique.');
            names.add(variable.name);
        });
        return variables;
    }

    function renderSamples() {
        const status = document.getElementById('previewStatus');
        samples.replaceChildren();
        try {
            const variables = readVariables();
            variables.forEach((variable, index) => {
                const wrapper = document.createElement('div');
                wrapper.className = 'mb-2';
                const label = document.createElement('label');
                label.htmlFor = `sample-${index}`;
                label.className = 'form-label';
                label.textContent = variable.name + (variable.required ? ' *' : '');
                const input = document.createElement('input');
                input.id = label.htmlFor;
                input.dataset.variableName = variable.name;
                input.className = 'form-control form-control-sm';
                input.value = sampleValues.get(variable.name) ?? `Sample ${variable.name}`;
                sampleValues.set(variable.name, input.value);
                input.addEventListener('input', () => { sampleValues.set(variable.name, input.value); updatePreview(); });
                wrapper.append(label, input);
                samples.append(wrapper);
            });
            status.textContent = 'Ready';
            status.className = 'badge text-bg-secondary';
        } catch (error) {
            status.textContent = error.message;
            status.className = 'badge text-bg-danger';
        }
        updatePreview();
    }

    function interpolate(text, html = false) {
        return text.replace(/\{\{([^{}]+)\}\}/g, (placeholder, name) => {
            if (!sampleValues.has(name)) return placeholder;
            const value = sampleValues.get(name);
            return html ? escapeHtml(value) : value;
        });
    }

    function updatePreview() {
        const pane = activePane();
        const push = !!document.getElementById('previewTitle');
        document.getElementById('previewLanguage').textContent = pane?.querySelector('.language-code').value ?? '(no versions)';
        const heading = pane?.querySelector(push ? '[data-content="title"]' : '[data-content="subject"]')?.value ?? '';
        const body = pane?.querySelector(push ? '[data-content="body"]' : '[data-content="text"]')?.value ?? '';
        document.getElementById(push ? 'previewTitle' : 'previewSubject').textContent = interpolate(heading);
        document.getElementById(push ? 'previewBody' : 'previewText').textContent = interpolate(body);
        updateHtmlPreview(pane);
        updateActionsPreview(pane);
    }

    function updateActionsPreview(pane) {
        const container = document.getElementById('previewActions');
        if (!container) return;
        container.replaceChildren();
        const hint = document.getElementById('previewDefaultAction');
        try {
            const actions = JSON.parse(pane?.querySelector('[data-content="actions"]')?.value || '{}');
            if (!actions || (actions.buttons !== undefined && !Array.isArray(actions.buttons))) throw new Error();
            (actions.buttons ?? []).forEach(item => {
                const button = document.createElement('button');
                button.type = 'button';
                button.className = 'btn btn-outline-primary btn-sm';
                button.textContent = interpolate(item.label);
                button.title = `Action: ${item.action}. Preview only.`;
                container.append(button);
            });
            hint.textContent = actions.defaultAction ? `Notification tap: ${actions.defaultAction}` : 'No notification tap action configured.';
        } catch {
            hint.textContent = 'Invalid actions JSON. Use defaultAction and buttons with action and label.';
        }
    }

    function updateHtmlPreview(pane) {
        const frame = document.getElementById('previewHtmlFrame');
        if (!frame) return;
        const html = interpolate(pane?.querySelector('[data-content="html"]')?.value ?? '', true);
        frame.srcdoc = '<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="Content-Security-Policy" content="default-src \'none\'; style-src \'unsafe-inline\'; img-src data:; base-uri \'none\'; form-action \'none\'"><style>body{font-family:Arial,sans-serif;padding:20px;color:#1f2937;background:white}img{max-width:100%}</style></head><body>' + html + '</body></html>';
    }

    tabs.addEventListener('click', event => {
        const tab = event.target.closest('[role="tab"]');
        if (tab) selectPane(document.getElementById(tab.dataset.pane));
    });
    tabs.addEventListener('keydown', event => {
        const offsets = { ArrowLeft: -1, ArrowRight: 1, Home: -tabs.children.length, End: tabs.children.length };
        if (!(event.key in offsets)) return;
        event.preventDefault();
        const buttons = Array.from(tabs.children);
        if (!buttons.length) return;
        let index = buttons.indexOf(event.target) + offsets[event.key];
        if (event.key === 'Home') index = 0;
        if (event.key === 'End') index = buttons.length - 1;
        const tab = buttons[(index + buttons.length) % buttons.length];
        selectPane(document.getElementById(tab.dataset.pane), true);
    });
    panes.addEventListener('input', updatePreview);
    variablesField.addEventListener('input', renderSamples);
    form.addEventListener('input', () => { dirty = true; });
    form.addEventListener('submit', () => { dirty = false; });
    window.addEventListener('beforeunload', event => {
        if (dirty) { event.preventDefault(); event.returnValue = ''; }
    });

    const navigationDialog = document.createElement('dialog');
    navigationDialog.className = 'template-unsaved-dialog';
    navigationDialog.setAttribute('aria-labelledby', 'unsaved-title');
    navigationDialog.innerHTML = '<h2 id="unsaved-title" class="h5">Unsaved changes</h2><p>Save this channel before leaving, or discard its unsaved changes.</p><div class="d-flex flex-wrap gap-2"><button type="button" class="btn btn-primary" data-keep-editing>Keep editing</button><button type="button" class="btn btn-outline-danger" data-discard-changes>Discard changes</button></div>';
    document.body.append(navigationDialog);
    let pendingNavigation;
    navigationDialog.querySelector('[data-keep-editing]').addEventListener('click', () => navigationDialog.close());
    navigationDialog.querySelector('[data-discard-changes]').addEventListener('click', () => {
        dirty = false;
        navigationDialog.close();
        window.location.assign(pendingNavigation);
    });
    document.addEventListener('click', event => {
        const link = event.target.closest('a');
        if (!dirty || !link || link.target === '_blank') return;
        event.preventDefault();
        pendingNavigation = link.href;
        navigationDialog.showModal();
    });

    renderSamples();
})();