{% extends 'admin/base.html' %}

{% block title %}
{%- if mode == 'new' %}{{ t('popup_manager.form_new_title') }}
{%- elif mode == 'translate' %}{{ t('popup_manager.form_translate_title') }}
{%- else %}{{ t('popup_manager.form_edit_title') }}{% endif -%}
{% endblock %}

{% block content %}
<div class="page-header page-header--with-action">
    <div class="page-header__content">
        {% if mode == 'new' %}
        <h2>💬 {{ t('popup_manager.form_new_title') }}</h2>
        {% elif mode == 'translate' %}
        <h2>🌍 {{ t('popup_manager.form_translate_title') }}</h2>
        {% else %}
        <h2>💬 {{ t('popup_manager.form_edit_title') }}</h2>
        {% endif %}
    </div>
    <div class="btn-group">
        <button type="submit" form="popupForm" class="btn btn-primary btn-sm">💾 {{ t('common.save') }}</button>
        <a href="{{ url_for('popup_manager.list_popups') }}" class="btn btn-secondary btn-sm">{{ t('common.cancel') }}</a>
        {% if mode == 'edit' %}
        <form method="POST" action="{{ url_for('popup_manager.delete_popup', popup_id=popup.id) }}" class="d-inline" id="pmDeleteForm">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button type="submit" class="btn btn-danger">🗑️ {{ t('popup_manager.delete_version') }}</button>
        </form>
        {% endif %}
    </div>
</div>

{% if mode == 'translate' %}
<div class="source-info">
    <h4>💬 {{ t('translate.source_page') }} ({{ source.get_language_name() }})</h4>
    <p><strong>{{ source.name }}</strong>{% if source.title %} — {{ source.title }}{% endif %}</p>
    <a href="{{ url_for('popup_manager.edit_popup', popup_id=source.id) }}">← {{ t('translate.back_to_original') }}</a>
</div>
{% endif %}

<form method="POST" id="popupForm" class="container-xl">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <div class="editor-layout">
        <!-- ============================================================ -->
        <!-- MAIN CONTENT (left) — mirrors the posts/pages editor layout -->
        <!-- ============================================================ -->
        <div class="editor-main">
            <div class="form-group">
                <label for="title">{{ t('popup_manager.title_label') }}</label>
                <input type="text" id="title" name="title" maxlength="300"
                       value="{{ (popup.title if popup else (source.title if source else '')) or '' }}">
                <div class="help-text">{{ t('popup_manager.title_help') }}</div>
            </div>

            <div class="form-group">
                <label>{{ t('popup_manager.content_label') }}</label>
                {#  The content field is a plain textarea enhanced by the core
                    AliothEditor (Visual / Markdown / HTML tabs). The toolbar is
                    restricted to exactly what sanitize_popup_html() allows, so
                    nothing the author can click gets silently stripped on save. #}
                <textarea name="content" id="content">{{ content_html }}</textarea>
                <div class="help-text">{{ t('popup_manager.content_help') }} {{ t('popup_manager.button_edit_hint') }}</div>
            </div>
        </div>

        <!-- ============================================================ -->
        <!-- SIDEBAR (right) — all options live here, like posts/pages   -->
        <!-- ============================================================ -->
        <div class="editor-sidebar">
            <!-- Status & Language -->
            <div class="form-section">
                <h3>📊 {{ t('editor.status_section') }}</h3>

                {% if mode != 'translate' %}
                <div class="form-group">
                    <label class="pm-check">
                        <input type="checkbox" name="enabled" {% if popup and popup.enabled %}checked{% endif %}>
                        {{ t('popup_manager.enabled_label') }}
                    </label>
                    <div class="help-text">{{ t('popup_manager.enabled_help') }}</div>
                </div>

                <div class="form-group">
                    <label for="name" class="required">{{ t('popup_manager.name_label') }}</label>
                    <input type="text" id="name" name="name" required maxlength="200"
                           value="{{ popup.name if popup else '' }}">
                    <div class="help-text">{{ t('popup_manager.name_help') }}</div>
                </div>
                {% endif %}

                <div class="form-group">
                    <label for="language">{{ t('editor.language_label') }}</label>
                    {% if mode == 'new' %}
                    <select id="language" name="language">
                        {% for lang in language_choices %}
                        <option value="{{ lang.code }}" {% if lang.code == default_language %}selected{% endif %}>{{ lang.name }}</option>
                        {% endfor %}
                    </select>
                    {% elif mode == 'translate' %}
                    <select id="language" name="language" required>
                        <option value="">{{ t('translate.select_language_option') }}</option>
                        {% for lang in missing_languages %}
                        <option value="{{ lang.code }}" {% if lang.code == preselect_lang %}selected{% endif %}>{{ lang.name }}</option>
                        {% endfor %}
                    </select>
                    {% else %}
                    <div><span class="lang-badge">{{ popup.language|upper }}</span> {{ popup.get_language_name() }}</div>
                    {% endif %}
                </div>

                {% if mode == 'translate' %}
                <div class="help-text">{{ t('popup_manager.behavior_note') }}</div>
                {% endif %}
            </div>

            {% if mode == 'edit' %}
            <!-- Translations — native core component.
                 Placed right after Status, matching the posts/pages sidebar order
                 (the plugin has no Quick Actions / AI Tools sections). -->
            <div class="form-section">
                <h3>🌍 {{ t('translate.translations_title') }}</h3>

                <div class="mb-3">
                    <span class="current-lang-badge">{{ popup.get_language_name() }}</span>
                    <span class="text-sm text-muted ml-1">— {{ t('translate.this_version') }}</span>
                </div>

                {% set translations = popup.get_translations() %}
                {% if translations %}
                <ul class="translation-list">
                    {% for tr in translations %}
                    <li class="translation-item">
                        <span class="translation-lang">{{ tr.get_language_name() }}</span>
                        <a href="{{ url_for('popup_manager.edit_popup', popup_id=tr.id) }}" class="translation-link">{{ t('table.edit') }} →</a>
                    </li>
                    {% endfor %}
                </ul>
                {% else %}
                <p class="sidebar-meta">{{ t('translate.no_translations_yet') }}</p>
                {% endif %}

                {% if popup.get_missing_languages() %}
                <div class="mt-3">
                    <a href="{{ url_for('popup_manager.translate_popup', popup_id=popup.id) }}" class="btn btn-secondary btn-sm">🌍 {{ t('translate.create_translation') }}</a>
                </div>
                {% endif %}
            </div>
            {% endif %}

            {% if mode != 'translate' %}
            <!-- Behavior -->
            <div class="form-section">
                <h3>⚙️ {{ t('popup_manager.behavior_title') }}</h3>
                <p class="help-text">{{ t('popup_manager.behavior_note') }}</p>

                <div class="form-group">
                    <label>{{ t('popup_manager.trigger_label') }}</label>
                    {% set trig = popup.trigger_type if popup else 'delay' %}
                    <label class="pm-check"><input type="radio" name="trigger_type" value="immediate" {% if trig == 'immediate' %}checked{% endif %}> {{ t('popup_manager.trigger_immediate') }}</label>
                    <label class="pm-check"><input type="radio" name="trigger_type" value="delay" {% if trig == 'delay' %}checked{% endif %}> {{ t('popup_manager.trigger_delay') }}
                        <input type="number" name="delay_seconds" min="0" max="600" value="{{ popup.delay_seconds if popup else 3 }}" class="pm-num"> {{ t('popup_manager.delay_seconds_label') }}</label>
                    <label class="pm-check"><input type="radio" name="trigger_type" value="scroll" {% if trig == 'scroll' %}checked{% endif %}> {{ t('popup_manager.trigger_scroll') }}
                        <input type="number" name="scroll_percent" min="1" max="100" value="{{ popup.scroll_percent if popup else 50 }}" class="pm-num"> %</label>
                    <label class="pm-check"><input type="radio" name="trigger_type" value="exit" {% if trig == 'exit' %}checked{% endif %}> {{ t('popup_manager.trigger_exit') }}</label>
                </div>

                <div class="form-group">
                    <label>{{ t('popup_manager.frequency_label') }}</label>
                    {% set freq = popup.frequency if popup else 'days' %}
                    <label class="pm-check"><input type="radio" name="frequency" value="every" {% if freq == 'every' %}checked{% endif %}> {{ t('popup_manager.freq_every') }}</label>
                    <label class="pm-check"><input type="radio" name="frequency" value="days" {% if freq == 'days' %}checked{% endif %}> {{ t('popup_manager.freq_days') }}
                        <input type="number" name="frequency_days" min="1" max="365" value="{{ popup.frequency_days if popup else 7 }}" class="pm-num"> {{ t('popup_manager.days_label') }}</label>
                    <label class="pm-check"><input type="radio" name="frequency" value="once" {% if freq == 'once' %}checked{% endif %}> {{ t('popup_manager.freq_once') }}</label>
                </div>

                <div class="form-group">
                    <label class="pm-check">
                        <input type="checkbox" name="fallback_default_lang" {% if popup and popup.fallback_default_lang %}checked{% endif %}>
                        {{ t('popup_manager.fallback_label') }}
                    </label>
                    <div class="help-text">{{ t('popup_manager.fallback_help') }}</div>
                </div>
            </div>

            <!-- Targeting -->
            <div class="form-section">
                <h3>📍 {{ t('popup_manager.target_label') }}</h3>
                {% set tgt = popup.target_type if popup else 'all' %}
                <label class="pm-check"><input type="radio" name="target_type" value="all" {% if tgt == 'all' %}checked{% endif %} onchange="pmToggleTargets()"> {{ t('popup_manager.target_all') }}</label>
                <label class="pm-check"><input type="radio" name="target_type" value="custom" {% if tgt == 'custom' %}checked{% endif %} onchange="pmToggleTargets()"> {{ t('popup_manager.target_custom') }}</label>

                <div id="pm-targets" class="pm-targets" {% if tgt != 'custom' %}hidden{% endif %}>
                    <input type="text" id="pm-target-filter" placeholder="{{ t('popup_manager.target_filter_placeholder') }}" oninput="pmFilterTargets(this.value)">
                    <div class="pm-targets__list">
                        <label class="pm-check" data-pm-target-label="🏠">
                            <input type="checkbox" name="targets" value="home" {% if 'home' in selected_targets %}checked{% endif %}>
                            🏠 {{ t('popup_manager.target_home') }}
                        </label>
                        {% for c in content_choices %}
                        <label class="pm-check" data-pm-target-label="{{ c.title|lower }}">
                            <input type="checkbox" name="targets" value="{{ c.group }}" {% if c.group in selected_targets %}checked{% endif %}>
                            {% if c.kind == 'page' %}📄 {{ t('popup_manager.kind_page') }}{% else %}📝 {{ t('popup_manager.kind_post') }}{% endif %}: {{ c.title }}
                        </label>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endif %}

            {% if mode == 'edit' %}
            <!-- Timestamps — same closing section as posts/pages -->
            <div class="form-section">
                <h3>📅 {{ t('editor.info') }}</h3>
                <p class="sidebar-meta">
                    <strong>{{ t('editor.created') }}</strong><br>
                    {{ popup.created_at|format_datetime }}
                </p>
                <p class="sidebar-meta">
                    <strong>{{ t('editor.last_updated') }}</strong><br>
                    {{ popup.updated_at|format_datetime }}
                </p>
            </div>
            {% endif %}
        </div>
    </div>
</form>

<style>
/* All colors below come from the admin design tokens (--adm-*), defined in
   admin.css for both light and dark mode (body[data-theme="dark"]).
   No own palette, no hex fallbacks — the plugin inherits the unified admin
   look in both modes automatically. */

/* Editor look & feel comes from the core AliothEditor stylesheet.
   Below: only what is specific to pop-up CONTENT inside the editor. */

/* Editor preview of theme buttons — colored exactly like the admin's own
   .btn-primary / secondary patterns (the real public look comes from the
   active theme's ap-btn styles). #f0f2f5 mirrors admin.css .btn-primary. */
.ae-content a.ap-btn { display: inline-flex; padding: 6px 14px; border-radius: var(--adm-radius-sm);
    text-decoration: none; font-weight: 500; margin-block: 2px; margin-inline-end: 6px; cursor: pointer;
    border: 1px solid transparent; }
.ae-content a.ap-btn--primary { background: var(--adm-primary); color: #f0f2f5;
    border-color: var(--adm-primary); }
.ae-content a.ap-btn--outline { background: transparent; color: var(--adm-primary);
    border-color: var(--adm-primary); }

/* Legacy alignment classes (pre-1.4 pop-ups); new content uses the core
   ae-align-* classes. Both stay whitelisted server-side. */
.ae-content .pm-ta-left { text-align: left; } .ae-content .pm-ta-center { text-align: center; }
.ae-content .pm-ta-right { text-align: right; } .ae-content .pm-ta-justify { text-align: justify; }
[dir="rtl"] .ae-content .pm-ta-right { text-align: left; }

/* Behaviour section */
.pm-check { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-weight: 400;
    flex-wrap: wrap; color: var(--adm-text); }
.pm-num { width: 84px; }
.pm-targets { margin-top: 10px; }
.pm-targets__list { max-height: 260px; overflow-y: auto; margin-top: 8px; padding: 8px 10px;
    border: 1px solid var(--adm-border); border-radius: var(--adm-radius);
    background: var(--adm-surface); }
</style>

{% include 'admin/editor_assets.html' %}
<script>
(function () {
    'use strict';

    var BTN_TEXT = {{ t('popup_manager.button_default_text')|tojson }};
    var BTN_TEXT_PROMPT = {{ t('popup_manager.button_text_prompt')|tojson }};
    var BTN_EDIT_PROMPT = {{ t('popup_manager.button_edit_prompt')|tojson }};
    var LINK_PROMPT = {{ t('popup_manager.link_prompt')|tojson }};
    var INSERT_PRIMARY = {{ t('popup_manager.insert_primary')|tojson }};
    var INSERT_OUTLINE = {{ t('popup_manager.insert_outline')|tojson }};

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

    // ── Core editor, restricted to the pop-up server whitelist ─────────
    // sanitize_popup_html() allows: p/br, b/i/u/s, a, lists, h2-h4,
    // blockquote — so the toolbar shows exactly that and nothing that
    // would be silently stripped on save (no tables, images or code).
    var ed = AliothEditor.init({
        selector: '#content',
        height: 340,
        toolbar: ['undo', 'redo', 'sep', 'blocks', 'sep',
                  'bold', 'italic', 'underline', 'strikeThrough', 'sep',
                  'align', 'sep', 'lists', 'sep',
                  'createLink', 'unlink', 'removeFormat'],
        blockOptions: ['p', 'h2', 'h3', 'h4', 'blockquote'],
        custom: [
            { name: 'btn-primary', label: '\u25a3 ' + INSERT_PRIMARY, title: INSERT_PRIMARY,
              onClick: function (e) { insertThemeButton(e, 'ap-btn ap-btn--primary'); } },
            { name: 'btn-outline', label: '\u25a2 ' + INSERT_OUTLINE, title: INSERT_OUTLINE,
              onClick: function (e) { insertThemeButton(e, 'ap-btn ap-btn--outline'); } }
        ]
    });

    // Theme buttons are atomic in the Visual pane: contenteditable="false"
    // keeps the caret from falling inside, so typing or Backspace can't
    // tear the button apart — it moves/deletes as one unit. The attribute
    // is stripped again by sanitize_popup_html() on save.
    function lockButtons() {
        var btns = ed.visual.querySelectorAll('a.ap-btn');
        for (var i = 0; i < btns.length; i++) {
            btns[i].setAttribute('contenteditable', 'false');
        }
    }
    lockButtons();
    ed.visual.addEventListener('focus', lockButtons);

    // Tell the editor its Visual pane changed after direct DOM edits
    // (button insert/edit below) — its own input listener marks the
    // content dirty and syncs the textarea.
    function touch() {
        ed.visual.dispatchEvent(new Event('input', { bubbles: true }));
    }

    function insertThemeButton(editor, classes) {
        var sel = window.getSelection();
        var preset = BTN_TEXT;
        if (sel.rangeCount && !sel.isCollapsed) {
            preset = sel.toString().trim() || BTN_TEXT;
        }
        // One themed dialog (core AliothEditor.dialog) instead of two
        // native prompts — matches the admin look in light & dark mode.
        AliothEditor.dialog({
            title: classes.indexOf('outline') === -1 ? INSERT_PRIMARY : INSERT_OUTLINE,
            fields: [
                { name: 'text', label: BTN_TEXT_PROMPT, value: preset },
                { name: 'url', label: LINK_PROMPT, value: 'https://' }
            ]
        }).then(function (v) {
            if (!v || !v.url || v.url === 'https://') return;
            var text = (v.text || '').trim() || BTN_TEXT;
            editor.insertHtml('<a class="' + classes + '" contenteditable="false" href="'
                + escAttr(v.url.trim()) + '">' + escHtml(text) + '</a>&nbsp;');
            lockButtons();
            touch();
        });
    }

    // Click a button in the editor to edit its text and URL.
    // Empty text removes the button.
    ed.visual.addEventListener('click', function (e) {
        var btn = e.target.closest ? e.target.closest('a.ap-btn') : null;
        if (!btn || !ed.visual.contains(btn)) return;
        e.preventDefault();
        AliothEditor.dialog({
            title: BTN_EDIT_PROMPT,
            fields: [
                { name: 'text', label: BTN_TEXT_PROMPT, value: btn.textContent },
                { name: 'url', label: LINK_PROMPT, value: btn.getAttribute('href') || 'https://' }
            ]
        }).then(function (v) {
            if (v === null) return;
            if (!(v.text || '').trim()) { btn.parentNode.removeChild(btn); touch(); return; }
            btn.textContent = v.text.trim();
            if (v.url && v.url.trim()) btn.setAttribute('href', v.url.trim());
            touch();
        });
    });

    // ── Submit: sync the editor into the textarea before the POST ──────
    document.getElementById('popupForm').addEventListener('submit', function () {
        AliothEditor.triggerSave();
    });

    // ── Delete confirmation (edit mode only) ───────────────────────────
    var deleteForm = document.getElementById('pmDeleteForm');
    if (deleteForm) {
        var CONFIRM_DELETE = {{ t('popup_manager.confirm_delete_version')|tojson }};
        deleteForm.addEventListener('submit', function (e) {
            if (!window.confirm(CONFIRM_DELETE)) e.preventDefault();
        });
    }
})();

function pmToggleTargets() {
    var box = document.getElementById('pm-targets');
    var custom = document.querySelector('input[name="target_type"][value="custom"]');
    if (box) box.hidden = !(custom && custom.checked);
}

function pmFilterTargets(query) {
    query = (query || '').toLowerCase();
    document.querySelectorAll('#pm-targets [data-pm-target-label]').forEach(function (el) {
        el.style.display = el.getAttribute('data-pm-target-label').indexOf(query) === -1 && query
            ? 'none' : '';
    });
}
</script>
{% endblock %}