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

{% block title %}{{ t('popup_manager.nav_label') }}{% endblock %}

{% block content %}
<div class="page-header page-header--with-action">
    <div class="page-header__content">
        <h2>💬 {{ t('popup_manager.nav_label') }}</h2>
        <p>{{ t('popup_manager.list_subtitle') }}</p>
    </div>
    <div class="btn-group">
        <a href="{{ url_for('popup_manager.new_popup') }}" class="btn btn-primary btn-sm">{{ t('popup_manager.new_popup') }}</a>
    </div>
</div>

<div class="filter-bar">
    <a href="{{ url_for('popup_manager.list_popups', status='all', lang=lang_filter, q=search_query, per_page=per_page) }}" class="filter-link {% if status_filter == 'all' %}active{% endif %}">{{ t('table.all') }}</a>
    <a href="{{ url_for('popup_manager.list_popups', status='enabled', lang=lang_filter, q=search_query, per_page=per_page) }}" class="filter-link {% if status_filter == 'enabled' %}active{% endif %}">{{ t('popup_manager.status_enabled') }}</a>
    <a href="{{ url_for('popup_manager.list_popups', status='disabled', lang=lang_filter, q=search_query, per_page=per_page) }}" class="filter-link {% if status_filter == 'disabled' %}active{% endif %}">{{ t('popup_manager.status_disabled') }}</a>
</div>

<div class="filter-row">
    <input type="text" id="pmSearchInput" value="{{ search_query or '' }}" placeholder="🔍 {{ t('popup_manager.search_placeholder') }}" autocomplete="off">

    <label>{{ t('table.language') }}:</label>
    <select onchange="location.href=this.value">
        <option value="{{ url_for('popup_manager.list_popups', status=status_filter, lang='all', q=search_query, sort=sort_by, per_page=per_page) }}" {% if lang_filter == 'all' %}selected{% endif %}>{{ t('table.all_languages') }}</option>
        {% for lang in language_choices %}
        <option value="{{ url_for('popup_manager.list_popups', status=status_filter, lang=lang.code, q=search_query, sort=sort_by, per_page=per_page) }}" {% if lang_filter == lang.code %}selected{% endif %}>{{ lang.name }}</option>
        {% endfor %}
    </select>

    <label class="ml-3">{{ t('table.title') }}:</label>
    <select onchange="location.href=this.value">
        <option value="{{ url_for('popup_manager.list_popups', status=status_filter, lang=lang_filter, q=search_query, sort='updated-desc', per_page=per_page) }}" {% if sort_by not in ['name-asc', 'name-desc'] %}selected{% endif %}>—</option>
        <option value="{{ url_for('popup_manager.list_popups', status=status_filter, lang=lang_filter, q=search_query, sort='name-asc', per_page=per_page) }}" {% if sort_by == 'name-asc' %}selected{% endif %}>A→Z</option>
        <option value="{{ url_for('popup_manager.list_popups', status=status_filter, lang=lang_filter, q=search_query, sort='name-desc', per_page=per_page) }}" {% if sort_by == 'name-desc' %}selected{% endif %}>Z→A</option>
    </select>

    <label class="ml-3">{{ t('table.updated_date') }}:</label>
    <select onchange="location.href=this.value">
        <option value="{{ url_for('popup_manager.list_popups', status=status_filter, lang=lang_filter, q=search_query, sort='updated-desc', per_page=per_page) }}" {% if sort_by == 'updated-desc' %}selected{% endif %}>{{ t('table.newest_first') }}</option>
        <option value="{{ url_for('popup_manager.list_popups', status=status_filter, lang=lang_filter, q=search_query, sort='updated-asc', per_page=per_page) }}" {% if sort_by == 'updated-asc' %}selected{% endif %}>{{ t('table.oldest_first') }}</option>
    </select>
</div>

<div id="popups-content">
{% if groups %}
<div class="table-scroll">
<table class="content-table">
    <thead>
        <tr>
            <th>{{ t('popup_manager.col_name') }}</th>
            <th>{{ t('popup_manager.col_languages') }}</th>
            <th>{{ t('popup_manager.col_behavior') }}</th>
            <th>{{ t('table.status') }}</th>
            <th>{{ t('table.updated_date') }}</th>
            <th>{{ t('table.actions') }}</th>
        </tr>
    </thead>
    <tbody>
        {% for row in groups %}
        <tr>
            <td>
                <a href="{{ url_for('popup_manager.edit_popup', popup_id=row.primary.id) }}" class="title-link">{{ row.primary.name }}</a>
            </td>
            <td class="pm-lang-cell">
                {% for v in row.versions %}
                <a href="{{ url_for('popup_manager.edit_popup', popup_id=v.id) }}" class="lang-badge" title="{{ v.get_language_name() }}">{{ v.language|upper }}</a>
                {% endfor %}
                <a href="{{ url_for('popup_manager.translate_popup', popup_id=row.primary.id) }}" class="lang-badge--add" title="{{ t('popup_manager.add_translation') }}">＋</a>
            </td>
            <td class="text-sm text-muted">
                {{ t('popup_manager.trigger_' + row.primary.trigger_type) }}
                ·
                {% if row.primary.target_type == 'all' %}{{ t('popup_manager.target_all') }}{% else %}{{ t('popup_manager.target_custom') }}{% endif %}
            </td>
            <td>
                {% if row.primary.enabled %}
                <span class="badge badge-success">{{ t('popup_manager.status_enabled') }}</span>
                {% else %}
                <span class="badge badge-secondary">{{ t('popup_manager.status_disabled') }}</span>
                {% endif %}
            </td>
            <td class="date-cell">
                {% if row.updated %}
                    {{ row.updated|format_date }}<br>
                    <small>{{ row.updated.strftime('%H:%M') }}</small>
                {% else %}
                    —
                {% endif %}
            </td>
            <td>
                <div class="actions">
                    <a href="{{ url_for('popup_manager.edit_popup', popup_id=row.primary.id) }}" class="action-link action-edit">✏️ {{ t('table.edit') }}</a>
                    <a href="{{ url_for('popup_manager.translate_popup', popup_id=row.primary.id) }}" class="action-link action-translate">🌍 {{ t('table.translate') }}</a>
                    <form method="POST" action="{{ url_for('popup_manager.toggle_group', group_id=row.group) }}" class="d-inline">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <button type="submit" class="action-link action-view">
                            {% if row.primary.enabled %}⏸ {{ t('popup_manager.btn_disable') }}{% else %}▶ {{ t('popup_manager.btn_enable') }}{% endif %}
                        </button>
                    </form>
                    <form method="POST" action="{{ url_for('popup_manager.delete_group', group_id=row.group) }}" class="d-inline pm-delete-group" data-name="{{ row.primary.name|e }}">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <button type="submit" class="action-link action-delete">🗑️ {{ t('table.delete') }}</button>
                    </form>
                </div>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
</div>

<div class="pagination-footer">
{% if pages > 1 %}
<div class="pagination">
    {% if page > 1 %}
    <a href="{{ url_for('popup_manager.list_popups', page=page-1, status=status_filter, lang=lang_filter, q=search_query, per_page=per_page) }}">{{ t('pagination.prev') }}</a>
    {% endif %}
    {% for p in range(1, pages + 1) %}
        {% if p == page %}
        <span class="current">{{ p }}</span>
        {% elif p <= 2 or p > pages - 2 or (p >= page - 2 and p <= page + 2) %}
        <a href="{{ url_for('popup_manager.list_popups', page=p, status=status_filter, lang=lang_filter, q=search_query, per_page=per_page) }}">{{ p }}</a>
        {% elif p == 3 or p == pages - 2 %}
        <span>…</span>
        {% endif %}
    {% endfor %}
    {% if page < pages %}
    <a href="{{ url_for('popup_manager.list_popups', page=page+1, status=status_filter, lang=lang_filter, q=search_query, per_page=per_page) }}">{{ t('pagination.next') }}</a>
    {% endif %}
</div>
{% endif %}
    <div class="per-page-selector">
        <span>{{ t('pagination.per_page') }}</span>
        <select onchange="var u=new URLSearchParams(location.search);u.set('per_page',this.value);u.delete('page');location.search=u">
            {% for pp in [20, 50, 100] %}
            <option value="{{ pp }}" {% if per_page == pp %}selected{% endif %}>{{ pp }}</option>
            {% endfor %}
        </select>
        <span>{{ t('pagination.per_page_suffix') }}</span>
    </div>
</div>
{% else %}
<div class="settings-section">
    {% if total == 0 and not search_query and status_filter == 'all' and lang_filter == 'all' %}
    <p>{{ t('popup_manager.no_popups_yet') }}</p>
    <a href="{{ url_for('popup_manager.new_popup') }}" class="btn btn-primary">{{ t('popup_manager.new_popup') }}</a>
    {% else %}
    <p>{{ t('popup_manager.no_results') }}</p>
    <a href="{{ url_for('popup_manager.list_popups') }}" class="btn btn-secondary btn-sm">{{ t('common.clear') }}</a>
    {% endif %}
</div>
{% endif %}
</div><!-- /popups-content -->

<style>
/* "Add translation" chip: same geometry as .lang-badge, dashed boundary on
   --adm-input-border (the token the admin reserves for WCAG-checked control
   boundaries) and full-contrast --adm-text-secondary text. No opacity tricks
   — visible in light AND dark mode. */
.lang-badge--add {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    color: var(--adm-text-secondary);
    background: transparent;
    border: 1px dashed var(--adm-input-border);
    transition: color var(--adm-transition), border-color var(--adm-transition);
}
.lang-badge--add:hover {
    color: var(--adm-primary);
    border-color: var(--adm-primary);
    border-style: solid;
}
.pm-lang-cell .lang-badge { margin: 2px 6px 2px 0; }
</style>

<script>
var CONFIRM = {{ t('popup_manager.confirm_delete_group')|tojson }};

(function () {
    'use strict';
    var input = document.getElementById('pmSearchInput');
    if (!input) return;

    var _csrf = '{{ csrf_token() }}';
    var _status = '{{ status_filter }}';
    var _lang = '{{ lang_filter }}';
    var _sort = '{{ sort_by }}';
    var _perPage = {{ per_page }};
    var _base = '{{ url_for("popup_manager.list_popups") }}';
    var _debounce;

    var _i18n = {
        edit: {{ t('table.edit')|tojson }},
        translate: {{ t('table.translate')|tojson }},
        del: {{ t('table.delete')|tojson }},
        enable: {{ t('popup_manager.btn_enable')|tojson }},
        disable: {{ t('popup_manager.btn_disable')|tojson }},
        enabled: {{ t('popup_manager.status_enabled')|tojson }},
        disabled: {{ t('popup_manager.status_disabled')|tojson }},
        add_tr: {{ t('popup_manager.add_translation')|tojson }},
        col_name: {{ t('popup_manager.col_name')|tojson }},
        col_langs: {{ t('popup_manager.col_languages')|tojson }},
        col_behavior: {{ t('popup_manager.col_behavior')|tojson }},
        col_status: {{ t('table.status')|tojson }},
        col_updated: {{ t('table.updated_date')|tojson }},
        col_actions: {{ t('table.actions')|tojson }},
        no_results: {{ t('popup_manager.no_results')|tojson }},
        clear: {{ t('common.clear')|tojson }},
        prev: {{ t('pagination.prev')|tojson }},
        next: {{ t('pagination.next')|tojson }},
        confirm_group: CONFIRM
    };

    function esc(s) {
        var d = document.createElement('div');
        d.appendChild(document.createTextNode(s == null ? '' : s));
        return d.innerHTML;
    }

    function render(data) {
        var box = document.getElementById('popups-content');
        if (!data.items.length) {
            box.innerHTML = '<div class="settings-section"><p>' + esc(_i18n.no_results) + '</p>' +
                '<a href="' + _base + '" class="btn btn-secondary btn-sm">' + esc(_i18n.clear) + '</a></div>';
            return;
        }
        var h = '<div class="table-scroll"><table class="content-table"><thead><tr>' +
            '<th>' + esc(_i18n.col_name) + '</th><th>' + esc(_i18n.col_langs) + '</th>' +
            '<th>' + esc(_i18n.col_behavior) + '</th><th>' + esc(_i18n.col_status) + '</th>' +
            '<th>' + esc(_i18n.col_updated) + '</th>' +
            '<th>' + esc(_i18n.col_actions) + '</th></tr></thead><tbody>';
        data.items.forEach(function (p) {
            var langs = p.languages.map(function (v) {
                return '<a href="' + _base + v.id + '/edit" class="lang-badge" title="' +
                    esc(v.title) + '">' + esc(v.code.toUpperCase()) + '</a>';
            }).join(' ');
            langs += ' <a href="' + _base + p.id + '/translate" class="lang-badge--add" title="' +
                esc(_i18n.add_tr) + '">＋</a>';
            var badge = p.enabled
                ? '<span class="badge badge-success">' + esc(_i18n.enabled) + '</span>'
                : '<span class="badge badge-secondary">' + esc(_i18n.disabled) + '</span>';
            var csrf = '<input type="hidden" name="csrf_token" value="' + _csrf + '">';
            h += '<tr>' +
                '<td><a href="' + _base + p.id + '/edit" class="title-link">' + esc(p.name) + '</a></td>' +
                '<td class="pm-lang-cell">' + langs + '</td>' +
                '<td class="text-sm text-muted">' + esc(p.behavior) + '</td>' +
                '<td>' + badge + '</td>' +
                '<td class="date-cell">' + esc(p.updated_date) +
                (p.updated_time ? '<br><small>' + esc(p.updated_time) + '</small>' : '') + '</td>' +
                '<td><div class="actions">' +
                '<a href="' + _base + p.id + '/edit" class="action-link action-edit">✏️ ' + esc(_i18n.edit) + '</a>' +
                '<a href="' + _base + p.id + '/translate" class="action-link action-translate">🌍 ' + esc(_i18n.translate) + '</a>' +
                '<form method="POST" action="' + _base + 'group/' + esc(p.group) + '/toggle" class="d-inline">' + csrf +
                '<button type="submit" class="action-link action-view">' +
                (p.enabled ? '⏸ ' + esc(_i18n.disable) : '▶ ' + esc(_i18n.enable)) + '</button></form>' +
                '<form method="POST" action="' + _base + 'group/' + esc(p.group) + '/delete" class="d-inline pm-delete-group" data-name="' + esc(p.name) + '">' + csrf +
                '<button type="submit" class="action-link action-delete">🗑️ ' + esc(_i18n.del) + '</button></form>' +
                '</div></td></tr>';
        });
        h += '</tbody></table></div>';
        if (data.pages > 1) {
            h += '<div class="pagination-footer"><div class="pagination">';
            if (data.has_prev) h += '<a href="#" onclick="window._pmLive(' + data.prev_num + ');return false">' + esc(_i18n.prev) + '</a>';
            for (var p = 1; p <= data.pages; p++) {
                if (p === data.page) h += '<span class="current">' + p + '</span>';
                else h += '<a href="#" onclick="window._pmLive(' + p + ');return false">' + p + '</a>';
            }
            if (data.has_next) h += '<a href="#" onclick="window._pmLive(' + data.next_num + ');return false">' + esc(_i18n.next) + '</a>';
            h += '</div></div>';
        }
        box.innerHTML = h;
        bindDeleteConfirms();
    }

    function bindDeleteConfirms() {
        document.querySelectorAll('.pm-delete-group').forEach(function (form) {
            if (form._pmBound) return;
            form._pmBound = true;
            form.addEventListener('submit', function (e) {
                var msg = _i18n.confirm_group.replace('{name}', form.getAttribute('data-name') || '');
                if (!window.confirm(msg)) e.preventDefault();
            });
        });
    }
    bindDeleteConfirms();

    window._pmLive = function (page) {
        var q = input.value.trim();
        var params = new URLSearchParams();
        params.set('status', _status);
        params.set('lang', _lang);
        params.set('sort', _sort);
        params.set('format', 'json');
        if (_perPage && _perPage !== 20) params.set('per_page', _perPage);
        if (q) params.set('q', q);
        if (page && page > 1) params.set('page', page);
        fetch(_base + '?' + params.toString())
            .then(function (r) { return r.json(); })
            .then(function (data) {
                render(data);
                var u = new URLSearchParams(window.location.search);
                if (q) u.set('q', q); else u.delete('q');
                if (page && page > 1) u.set('page', page); else u.delete('page');
                u.delete('format');
                history.replaceState(null, '', window.location.pathname +
                    (u.toString() ? '?' + u.toString() : ''));
            })
            .catch(function (err) { console.error('Search error:', err); });
    };

    input.addEventListener('input', function () {
        clearTimeout(_debounce);
        _debounce = setTimeout(function () { window._pmLive(1); }, 300);
    });
})();

</script>
{% endblock %}