{% extends "base.html" %}

{% block title %}Gnomenall Forte | Editor{% endblock %}

{% block content %}
<section class="section">
    <h2 data-i18n="editor.title">{{ t('editor.title') }}</h2>
    <p class="stat-label" data-i18n="editor.subtitle">{{ t('editor.subtitle') }}</p>

    {% if item %}
    <form id="editor-form" method="post" action="/editor/submit">
        <input type="hidden" name="item_id" value="{{ item_id }}">
        <div class="field">
            <label for="title" data-i18n="editor.fields.title">{{ t('editor.fields.title') }}</label>
            <input type="text" id="title" name="title" value="{{ item.title }}" required>
        </div>
        <div class="field">
            <label for="description" data-i18n="editor.fields.description">{{ t('editor.fields.description') }}</label>
            <textarea id="description" name="description" required>{{ item.description or '' }}</textarea>
        </div>
        <div class="field">
            <label for="magnet" data-i18n="editor.fields.magnet">{{ t('editor.fields.magnet') }}</label>
            <input type="text" id="magnet" name="magnet" value="{{ item.magnet or '' }}" required>
        </div>
        <div class="grid two">
            <div class="field">
                <label for="publisher" data-i18n="editor.fields.publisher">{{ t('editor.fields.publisher') }}</label>
                <input type="text" id="publisher" name="publisher" value="{{ item.publisher or identity_alias }}">
            </div>
            <div class="field">
                <label for="cover_image" data-i18n="editor.fields.cover">{{ t('editor.fields.cover') }}</label>
                <input type="text" id="cover_image" name="cover_image" value="{{ item.cover_image or '' }}">
            </div>
        </div>
        <div class="field">
            <label for="info" data-i18n="editor.fields.info">{{ t('editor.fields.info') }}</label>
            <textarea id="info" name="info">{{ item.info or '' }}</textarea>
        </div>
        <div class="actions">
            <button class="btn" type="submit" id="editor-submit" data-i18n="editor.actions.save">{{ t('editor.actions.save') }}</button>
            <a class="btn secondary" href="/" data-i18n="editor.actions.back">{{ t('editor.actions.back') }}</a>
        </div>
    </form>
    {% else %}
    <div class="stat-label" data-i18n="editor.empty">{{ t('editor.empty') }}</div>
    {% endif %}
</section>
{% endblock %}

{% block scripts %}
<script>
    const form = document.getElementById('editor-form');
    const i18nFallback = {
        vaultLocked: "{{ t('editor.notices.vault_locked') }}",
        vaultCheckFailed: "{{ t('editor.notices.vault_check_failed') }}",
        saveInProgress: "{{ t('editor.notices.save_in_progress') }}",
        saveFailed: "{{ t('editor.notices.save_failed') }}",
        saveSuccess: "{{ t('editor.notices.save_success') }}",
        saveError: "{{ t('editor.notices.save_error') }}"
    };
    let i18n = { ...i18nFallback };
    const getText = (key, fallbackValue) => {
        if (window.GNOMENALL_UI && typeof window.GNOMENALL_UI.translate === 'function') {
            return window.GNOMENALL_UI.translate(key);
        }
        return fallbackValue;
    };
    const refreshI18n = () => {
        i18n = {
            vaultLocked: getText('editor.notices.vault_locked', i18nFallback.vaultLocked),
            vaultCheckFailed: getText('editor.notices.vault_check_failed', i18nFallback.vaultCheckFailed),
            saveInProgress: getText('editor.notices.save_in_progress', i18nFallback.saveInProgress),
            saveFailed: getText('editor.notices.save_failed', i18nFallback.saveFailed),
            saveSuccess: getText('editor.notices.save_success', i18nFallback.saveSuccess),
            saveError: getText('editor.notices.save_error', i18nFallback.saveError)
        };
    };
    refreshI18n();
    if (window.GNOMENALL_UI) {
        window.GNOMENALL_UI.onLocaleChange = refreshI18n;
    }
    if (form) {
        const submitBtn = document.getElementById('editor-submit');
        const updateVault = async () => {
            try {
                const response = await fetch('/api/vault/status');
                const vault = await response.json();
                if (vault.state === 'LOCKED') {
                    submitBtn.disabled = true;
                    window.GNOMENALL_UI.pushLocalNotice('error', i18n.vaultLocked);
                } else {
                    submitBtn.disabled = false;
                }
            } catch (err) {
                window.GNOMENALL_UI.pushLocalNotice('error', i18n.vaultCheckFailed);
            }
        };
        form.addEventListener('submit', async (event) => {
            event.preventDefault();
            submitBtn.disabled = true;
            window.GNOMENALL_UI.pushLocalNotice('info', i18n.saveInProgress);
            const payload = Object.fromEntries(new FormData(form));
            try {
                const response = await fetch('/api/editor/update', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(payload)
                });
                const data = await response.json();
                if (!response.ok) {
                    window.GNOMENALL_UI.pushLocalNotice('error', data.error || i18n.saveFailed);
                } else {
                    window.GNOMENALL_UI.pushLocalNotice('success', i18n.saveSuccess);
                }
            } catch (err) {
                window.GNOMENALL_UI.pushLocalNotice('error', i18n.saveError);
            } finally {
                await updateVault();
            }
        });
        updateVault();
    }
</script>
{% endblock %}