{% extends "admin/layout.html" %}
{% block title %}Translate — {{ page_label }}{% endblock %}

{% block body %}
<div class="space-y-6">

    <div class="flex items-center justify-between flex-wrap gap-4">
        <div>
            <div class="flex items-center gap-2 mb-1">
                <a href="{{ full_url('/admin/pages/edit') }}?page_id={{ page_id }}" class="text-sm text-gray-400 dark:text-gray-500 hover:text-primary dark:hover:text-primary-light transition-colors">
                    <i class="fa fa-arrow-left mr-1"></i>{% trans %}Back to editor{% endtrans %}
                </a>
            </div>
            <h2 class="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
                <i class="fa fa-language text-primary dark:text-primary-light"></i>
                {{ page_label }}
            </h2>
            <p class="text-xs text-gray-400 dark:text-gray-500 mt-0.5">{{ page_id }}</p>
        </div>
        <div class="flex items-center gap-3 flex-wrap">
            <div class="flex items-center gap-2">
                <label class="text-sm font-medium text-gray-600 dark:text-gray-400">{% trans %}Translating to:{% endtrans %}</label>
                <select id="lang-selector" class="px-3 py-2 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm focus:ring-2 focus:ring-primary/50 outline-none transition-all">
                    {% for l in langs %}
                    <option value="{{ l }}" {% if l == lang %}selected{% endif %}>{{ l | upper }}</option>
                    {% endfor %}
                </select>
            </div>
            {% if is_translation_complete %}
            <button type="button" id="complete-toggle-btn" data-complete="1"
                    class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 border border-green-200 dark:border-green-800/40 text-sm font-medium hover:bg-green-200 dark:hover:bg-green-800/40 transition-all">
                <i class="fa fa-check-circle"></i>
                {% trans %}Translation complete{% endtrans %}
            </button>
            {% else %}
            <button type="button" id="complete-toggle-btn" data-complete="0"
                    class="inline-flex items-center gap-2 px-4 py-2 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 text-sm font-medium hover:border-green-400 hover:text-green-600 dark:hover:text-green-400 transition-all">
                <i class="fa fa-circle text-xs"></i>
                {% trans %}Mark as complete{% endtrans %}
            </button>
            {% endif %}
            <button type="button" id="save-all-btn"
                    class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-primary text-white text-sm font-medium hover:bg-primary-dark transition-all shadow-sm">
                <i class="fa fa-save"></i>
                {% trans %}Save all{% endtrans %}
            </button>
        </div>
    </div>

    <div class="rounded-xl bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800/40 px-5 py-3 flex items-start gap-3">
        <i class="fa fa-info-circle text-amber-500 dark:text-amber-400 mt-0.5 flex-shrink-0"></i>
        <p class="text-sm text-amber-700 dark:text-amber-300">
            {% trans %}Fill in any field on the right to add or update the translation. Leaving a field blank does <strong>not</strong> delete existing content — it simply leaves it unchanged. Click <strong>Save all</strong> when done.{% endtrans %}
        </p>
    </div>

    <form id="translate-form">
        <input type="hidden" name="page_id" value="{{ page_id }}">
        <input type="hidden" name="lang" value="{{ lang }}">

        {% for section in sections %}
        <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden mb-5">
            <div class="px-6 py-3 border-b border-gray-100 dark:border-gray-800 bg-gradient-to-r from-primary/5 to-secondary/5 dark:from-primary-light/5 dark:to-secondary-light/5">
                <h3 class="font-semibold text-gray-800 dark:text-white text-sm uppercase tracking-wide">{{ section.title }}</h3>
            </div>

            <div class="divide-y divide-gray-100 dark:divide-gray-800">
                <div class="grid grid-cols-2 px-6 py-2.5 bg-gray-50 dark:bg-gray-800/50 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">
                    <div>{% trans %}English{% endtrans %}</div>
                    <div>{{ lang | upper }} {% trans %}Translation{% endtrans %}</div>
                </div>

                {% for f in section.fields %}
                {% set en_val = en_map.get(f.key, '') %}
                {% set tr_val = lang_map.get(f.key, '') %}
                <div class="grid grid-cols-2 gap-0 divide-x divide-gray-100 dark:divide-gray-800">
                    <div class="px-6 py-4">
                        <p class="text-xs font-medium text-gray-400 dark:text-gray-500 mb-1.5">{{ f.label }}</p>
                        {% if en_val %}
                            {% if f.key in ('head_html', 'format_definition', 'page_description', 'before_faq_content', 'filetype_long_description') %}
                            <div class="text-sm text-gray-600 dark:text-gray-400 whitespace-pre-wrap bg-gray-50 dark:bg-gray-800/50 rounded-lg p-3 max-h-48 overflow-y-auto font-mono text-xs leading-relaxed">{{ en_val }}</div>
                            {% else %}
                            <p class="text-sm text-gray-700 dark:text-gray-300">{{ en_val }}</p>
                            {% endif %}
                        {% else %}
                        <p class="text-sm text-gray-300 dark:text-gray-600 italic">{% trans %}(no English value set){% endtrans %}</p>
                        {% endif %}
                    </div>
                    <div class="px-6 py-4">
                        <p class="text-xs font-medium text-gray-400 dark:text-gray-500 mb-1.5">
                            {% if tr_val %}<span class="inline-block w-2 h-2 rounded-full bg-green-400 mr-1"></span>{% else %}<span class="inline-block w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-600 mr-1"></span>{% endif %}
                            {% trans %}Your translation{% endtrans %}
                        </p>
                        {% if f.key in ('head_html', 'format_definition', 'page_description', 'before_faq_content', 'filetype_long_description') %}
                        <textarea name="field_{{ f.key }}" rows="5"
                                  placeholder="{{ en_val | truncate(80) if en_val else '…' }}"
                                  class="w-full px-3 py-2.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm text-gray-800 dark:text-gray-200 font-mono leading-relaxed focus:ring-2 focus:ring-primary/50 outline-none resize-y transition-all">{{ tr_val }}</textarea>
                        {% else %}
                        <input type="text" name="field_{{ f.key }}" value="{{ tr_val }}"
                               placeholder="{{ en_val | truncate(80) if en_val else '…' }}"
                               class="w-full px-3 py-2.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-primary/50 outline-none transition-all">
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endfor %}

        {% if max_faqs > 0 or en_faqs %}
        <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden mb-5">
            <div class="px-6 py-3 border-b border-gray-100 dark:border-gray-800 bg-gradient-to-r from-primary/5 to-secondary/5 dark:from-primary-light/5 dark:to-secondary-light/5">
                <h3 class="font-semibold text-gray-800 dark:text-white text-sm uppercase tracking-wide">{% trans %}FAQs{% endtrans %}</h3>
            </div>
            <div class="divide-y divide-gray-100 dark:divide-gray-800">
                <div class="grid grid-cols-2 px-6 py-2.5 bg-gray-50 dark:bg-gray-800/50 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">
                    <div>{% trans %}English{% endtrans %}</div>
                    <div>{{ lang | upper }} {% trans %}Translation{% endtrans %}</div>
                </div>

                {% set faq_count = [en_faqs | length, lang_faqs | length] | max %}
                {% for i in range(faq_count) %}
                {% set en_q = en_faqs[i][0] if i < en_faqs | length else '' %}
                {% set en_a = en_faqs[i][1] if i < en_faqs | length else '' %}
                {% set tr_q = lang_faqs[i][0] if i < lang_faqs | length else '' %}
                {% set tr_a = lang_faqs[i][1] if i < lang_faqs | length else '' %}
                <div class="px-6 py-4 bg-primary/2 dark:bg-primary-light/2">
                    <div class="text-xs font-semibold text-gray-500 dark:text-gray-400 mb-3 uppercase tracking-wide">{% trans %}FAQ{% endtrans %} {{ i + 1 }}</div>
                    <div class="grid grid-cols-2 gap-4 divide-x divide-gray-100 dark:divide-gray-800">
                        <div class="space-y-2.5 pr-4">
                            <div>
                                <p class="text-xs text-gray-400 dark:text-gray-500 mb-1">{% trans %}Question{% endtrans %}</p>
                                <p class="text-sm text-gray-700 dark:text-gray-300">{{ en_q or '—' }}</p>
                            </div>
                            <div>
                                <p class="text-xs text-gray-400 dark:text-gray-500 mb-1">{% trans %}Answer{% endtrans %}</p>
                                <p class="text-sm text-gray-600 dark:text-gray-400 whitespace-pre-wrap">{{ en_a or '—' }}</p>
                            </div>
                        </div>
                        <div class="space-y-2.5 pl-4">
                            <div>
                                <p class="text-xs text-gray-400 dark:text-gray-500 mb-1">{% trans %}Question{% endtrans %}</p>
                                <input type="text" name="faq_{{ i + 1 }}_question" value="{{ tr_q }}"
                                       placeholder="{{ en_q | truncate(60) if en_q else '…' }}"
                                       class="w-full px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-primary/50 outline-none transition-all">
                            </div>
                            <div>
                                <p class="text-xs text-gray-400 dark:text-gray-500 mb-1">{% trans %}Answer{% endtrans %}</p>
                                <textarea name="faq_{{ i + 1 }}_answer" rows="3"
                                          placeholder="{{ en_a | truncate(60) if en_a else '…' }}"
                                          class="w-full px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-primary/50 outline-none resize-y transition-all">{{ tr_a }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        <input type="hidden" name="faq_count" value="{{ faq_count }}">
        {% else %}
        <input type="hidden" name="faq_count" value="0">
        {% endif %}

        <div class="flex justify-end pb-6">
            <button type="button" id="save-all-btn-bottom"
                    class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-primary text-white text-sm font-medium hover:bg-primary-dark transition-all shadow-sm">
                <i class="fa fa-save"></i>
                {% trans %}Save all{% endtrans %}
            </button>
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var langSel = document.getElementById('lang-selector');
    if (langSel) {
        langSel.addEventListener('change', function () {
            window.location.href = "{{ url('/admin/pages/translate') }}?page_id={{ page_id }}&lang=" + this.value;
        });
    }

    function setSaveBtns(disabled, html) {
        ['save-all-btn', 'save-all-btn-bottom'].forEach(function (id) {
            var b = document.getElementById(id);
            if (b) { b.disabled = disabled; b.innerHTML = html; }
        });
    }

    function clsSwap(el, remove, add) {
        (remove || '').split(' ').forEach(function (c) { if (c) el.classList.remove(c); });
        (add || '').split(' ').forEach(function (c) { if (c) el.classList.add(c); });
    }

    function markCompleteUI(complete) {
        var btn = document.getElementById('complete-toggle-btn');
        if (!btn) return;
        btn.setAttribute('data-complete', complete ? '1' : '0');
        if (complete) {
            clsSwap(btn,
                'border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 border',
                'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 border border-green-200 dark:border-green-800/40');
            btn.innerHTML = '<i class="fa fa-check-circle"></i> {% trans %}Translation complete{% endtrans %}';
        } else {
            clsSwap(btn,
                'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 border-green-200 dark:border-green-800/40',
                'border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400');
            btn.innerHTML = '<i class="fa fa-circle text-xs"></i> {% trans %}Mark as complete{% endtrans %}';
        }
    }

    function doSave() {
        var formData = new FormData(document.getElementById('translate-form'));
        setSaveBtns(true, '<i class="fa fa-spinner fa-spin mr-2"></i>{% trans %}Saving...{% endtrans %}');
        fetch("{{ url('/admin/pages/translate') }}", {
            method: 'POST',
            body: formData,
            headers: {'X-Requested-With': 'XMLHttpRequest'}
        })
        .then(function (r) { return r.json(); })
        .then(function (resp) {
            var msg = (resp.saved || 0) + ' {% trans %}field(s) saved{% endtrans %}';
            if (resp.marked_complete) {
                msg += ' \u2014 {% trans %}page marked as complete!{% endtrans %} \u2713';
                markCompleteUI(true);
            }
            toastr.success(msg);
            setSaveBtns(false, '<i class="fa fa-check mr-2"></i>{% trans %}Saved!{% endtrans %}');
            setTimeout(function () {
                setSaveBtns(false, '<i class="fa fa-save mr-2"></i>{% trans %}Save all{% endtrans %}');
            }, 2500);
            document.querySelectorAll('input[type=text], textarea').forEach(function (el) {
                var row = el.closest('.pl-4, .px-6');
                var dot = row ? row.querySelector('.w-2.h-2') : null;
                if (dot && el.value.trim()) {
                    dot.classList.remove('bg-gray-300');
                    dot.classList.add('bg-green-400');
                }
            });
        })
        .catch(function () {
            toastr.error('{% trans %}Save failed{% endtrans %}.');
            setSaveBtns(false, '<i class="fa fa-save mr-2"></i>{% trans %}Save all{% endtrans %}');
        });
    }

    var completeBtn = document.getElementById('complete-toggle-btn');
    if (completeBtn) {
        completeBtn.addEventListener('click', function () {
            var isComplete = this.getAttribute('data-complete') === '1';
            var action = isComplete ? 'unmark' : 'mark';
            var self = this;
            self.disabled = true;
            var body = new URLSearchParams({page_id: '{{ page_id }}', lang: '{{ lang }}', action: action});
            fetch("{{ url('/admin/pages/translation-complete') }}", {
                method: 'POST',
                body: body,
                headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/x-www-form-urlencoded'}
            })
            .then(function (r) { return r.json(); })
            .then(function (resp) {
                markCompleteUI(resp.complete);
                if (resp.complete) {
                    toastr.success('{% trans %}Page marked as translation complete!{% endtrans %}');
                } else {
                    toastr.info('{% trans %}Completion status cleared.{% endtrans %}');
                }
                self.disabled = false;
            })
            .catch(function () {
                toastr.error('{% trans %}Failed to update status.{% endtrans %}');
                self.disabled = false;
            });
        });
    }

    ['save-all-btn', 'save-all-btn-bottom'].forEach(function (id) {
        var b = document.getElementById(id);
        if (b) b.addEventListener('click', doSave);
    });
});
</script>
{% endblock %}