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

{% block title %}{{ t('pages.create_new') }}{% endblock %}

{% block extra_css %}
{% endblock %}

{% block content %}
<div class="page-header page-header--with-action">
    <div class="page-header__content">
        <h2>📄 {{ t('pages.create_new') }}</h2>
        <p>{{ t('pages.create_subtitle') }}</p>
    </div>
    <div class="btn-group">
        <button type="submit" form="createForm" name="status" value="draft" class="btn btn-secondary btn-sm">📝 {{ t('editor.save_draft') }}</button>
        <button type="submit" form="createForm" name="status" value="published" class="btn btn-primary btn-sm">🚀 {{ t('editor.publish') }}</button>
        <a href="{{ admin_back_url('admin_pages_list') }}" class="btn btn-secondary btn-sm">{{ t('common.cancel') }}</a>
    </div>
</div>

{% if source_page %}
<div class="source-info">
    <h4>🌍 {{ t('translate.creating_translation') }}</h4>
    <p>{{ t('translate.translating_from') }} <strong>{{ source_page.title }}</strong> ({{ source_page.get_language_name() }})</p>
</div>
{% endif %}

<form method="POST" id="createForm" class="container-xl">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <input type="hidden" name="return_to" value="{{ admin_back_value() }}">
    <!-- Hidden field for translation group linking -->
    {% if source_page %}
    <input type="hidden" name="translation_group" value="{{ source_page.translation_group }}">
    {% endif %}

    <div class="editor-layout">
        <!-- MAIN CONTENT (left) -->
        <div class="editor-main">
            <div class="form-group">
                <label for="title" class="required">{{ t('editor.title_label') }}</label>
                <input type="text" id="title" name="title" required placeholder="{{ t('editor.title_page_placeholder') }}">
                <div class="help-text">{{ t('editor.title_help_page') }}</div>
            </div>
            <div class="form-group">
                <label for="slug">{{ t('editor.slug_label') }}</label>
                <input type="text" id="slug" name="slug" oninput="cleanSlugInput(this)" placeholder="{{ t('editor.slug_placeholder') }}" onblur="checkSlug('page', null)">
                <div id="slug-feedback" class="help-text">{{ t('editor.slug_help') }}</div>
            </div>
            <div class="form-group">
                <label for="excerpt">{{ t('editor.excerpt_label') }}</label>
                <textarea id="excerpt" name="excerpt" rows="3" placeholder="{{ t('editor.excerpt_placeholder_page') }}"></textarea>
                <div class="help-text">{{ t('editor.excerpt_help') }}</div>
            </div>
            <div class="form-group">
                <label for="content">{{ t('editor.content_label') }}</label>
                <textarea id="content" name="content" placeholder="{{ t('editor.content_placeholder') }}"></textarea>
            </div>

            <!-- SEO Meta Tags -->
            <div class="collapsible">
                <div class="collapsible-header" onclick="toggleSection(this)">
                    <span>🔍 {{ t('seo.meta_tags') }}</span><span class="arrow">▶</span>
                </div>
                <div class="collapsible-content">
                    <div class="form-group">
                        <label for="meta_title">{{ t('seo.meta_title') }}</label>
                        <input type="text" id="meta_title" name="meta_title" maxlength="60" placeholder="{{ t('seo.meta_title_placeholder') }}">
                        <div class="help-text">{{ t('seo.meta_title_help_page') }}</div>
                    </div>
                    <div class="form-group">
                        <label for="meta_description">{{ t('seo.meta_description') }}</label>
                        <textarea id="meta_description" name="meta_description" rows="3" maxlength="160" placeholder="{{ t('seo.meta_description_placeholder') }}"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="meta_keywords">{{ t('seo.keywords') }}</label>
                        <input type="text" id="meta_keywords" name="meta_keywords" placeholder="{{ t('seo.keywords_placeholder') }}">
                    </div>
                    <div class="form-group">
                        <label for="canonical_url">{{ t('seo.canonical_url') }}</label>
                        <input type="url" id="canonical_url" name="canonical_url" placeholder="{{ t('seo.canonical_url_placeholder') }}">
                        <div class="help-text">{{ t('seo.canonical_url_help') }}</div>
                    </div>
                </div>
            </div>

            <!-- Open Graph -->
            <div class="collapsible">
                <div class="collapsible-header" onclick="toggleSection(this)">
                    <span>📱 {{ t('seo.og_section') }}</span><span class="arrow">▶</span>
                </div>
                <div class="collapsible-content">
                    <div class="form-group">
                        <label for="og_title">{{ t('seo.og_title') }}</label>
                        <input type="text" id="og_title" name="og_title" placeholder="{{ t('seo.og_title_placeholder') }}">
                        <div class="help-text">{{ t('seo.og_title_help') }}</div>
                    </div>
                    <div class="form-group">
                        <label for="og_description">{{ t('seo.og_description') }}</label>
                        <textarea id="og_description" name="og_description" rows="2" placeholder="{{ t('seo.og_description_placeholder') }}"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="og_image">{{ t('seo.og_image') }}</label>
                        <div class="image-field-row">
                            <input type="text" id="og_image" name="og_image" placeholder="/static/uploads/..." class="input-readonly" readonly>
                            <button type="button" class="btn-pick-image" onclick="pickImageFor('og_image')">📷 {{ t('common.choose') }}</button>
                        </div>
                        <div id="og_image_preview_wrap" class="image-preview-wrap">
                        <img id="og_image_preview" class="image-preview-thumb" alt="{{ t('common.preview') }}">
                        <button type="button" class="btn-remove-preview" onclick="clearImageField('og_image')" title="{{ t('common.remove') }}">✕</button>
                        </div>
                        <div class="help-text" id="og_image_hint">{{ t('seo.og_image_help') }}</div>
                    </div>
                </div>
            </div>

            <!-- Twitter Card -->
            <div class="collapsible">
                <div class="collapsible-header" onclick="toggleSection(this)">
                    <span>🐦 {{ t('seo.twitter_section') }}</span><span class="arrow">▶</span>
                </div>
                <div class="collapsible-content">
                    <div class="form-group">
                        <label for="twitter_title">{{ t('seo.twitter_title') }}</label>
                        <input type="text" id="twitter_title" name="twitter_title">
                    </div>
                    <div class="form-group">
                        <label for="twitter_description">{{ t('seo.twitter_description') }}</label>
                        <textarea id="twitter_description" name="twitter_description" rows="2"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="twitter_image">{{ t('seo.twitter_image') }}</label>
                        <div class="image-field-row">
                            <input type="text" id="twitter_image" name="twitter_image" class="input-readonly" readonly>
                            <button type="button" class="btn-pick-image" onclick="pickImageFor('twitter_image')">📷 {{ t('common.choose') }}</button>
                        </div>
                        <div id="twitter_image_preview_wrap" class="image-preview-wrap">
                        <img id="twitter_image_preview" class="image-preview-thumb" alt="{{ t('common.preview') }}">
                        <button type="button" class="btn-remove-preview" onclick="clearImageField('twitter_image')" title="{{ t('common.remove') }}">✕</button>
                        </div>
                        <div class="help-text" id="twitter_image_hint">{{ t('seo.twitter_image_help') }}</div>
                    </div>
                </div>
            </div>

            <!-- Schema.org -->
            <div class="collapsible">
                <div class="collapsible-header" onclick="toggleSection(this)">
                    <span>🏗️ {{ t('seo.schema_section') }}</span><span class="arrow">▶</span>
                </div>
                <div class="collapsible-content">
                    <div class="form-group">
                        <label for="schema_type">{{ t('seo.schema_type') }}</label>
                        <select id="schema_type" name="schema_type">
                            <option value="WebPage">WebPage</option>
                            <option value="AboutPage">AboutPage</option>
                            <option value="ContactPage">ContactPage</option>
                            <option value="FAQPage">FAQPage</option>
                            <option value="CollectionPage">CollectionPage</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="schema_author">{{ t('seo.schema_author') }}</label>
                        <input type="text" id="schema_author" name="schema_author" placeholder="{{ t('seo.schema_author_help') }}">
                    </div>
                    <div class="form-group">
                        <label for="schema_publisher">{{ t('seo.schema_publisher') }}</label>
                        <input type="text" id="schema_publisher" name="schema_publisher" placeholder="{{ t('seo.schema_publisher_help') }}">
                    </div>
                </div>
            </div>

            <!-- Featured Image -->
            <div class="collapsible">
                <div class="collapsible-header" onclick="toggleSection(this)">
                    <span>🖼️ {{ t('seo.featured_image') }}</span><span class="arrow">▶</span>
                </div>
                <div class="collapsible-content">
                    <div class="form-group">
                        <label for="featured_image">{{ t('seo.featured_image_url') }}</label>
                        <div class="image-field-row">
                            <input type="text" id="featured_image" name="featured_image" class="input-readonly" readonly>
                            <button type="button" class="btn-pick-image" onclick="pickImageFor('featured_image','featured_image_alt')">📷 {{ t('common.choose') }}</button>
                        </div>
                        <div id="featured_image_preview_wrap" class="image-preview-wrap">
                        <img id="featured_image_preview" class="image-preview-thumb" alt="{{ t('common.preview') }}">
                        <button type="button" class="btn-remove-preview" onclick="clearImageField('featured_image')" title="{{ t('common.remove') }}">✕</button>
                        </div>
                        <div class="help-text">{{ t('seo.featured_image_help') }} {{ t('seo.featured_image_social_hint') }}</div>
                    </div>
                    <div class="form-group">
                        <label for="featured_image_alt" class="required">{{ t('seo.featured_image_alt') }}</label>
                        <input type="text" id="featured_image_alt" name="featured_image_alt">
                        <div class="help-text">{{ t('seo.featured_image_alt_help') }}</div>
                    </div>
                    <div class="form-group">
                        <label for="featured_image_caption">{{ t('seo.featured_image_caption') }}</label>
                        <textarea id="featured_image_caption" name="featured_image_caption" rows="2"></textarea>
                    </div>
                </div>
            </div>

            <!-- FAQ Section (AEO) -->
            <div class="collapsible">
                <div class="collapsible-header" onclick="toggleSection(this)">
                    <span>❓ {{ t('editor.faq_section') }}</span><span class="arrow">▶</span>
                </div>
                <div class="collapsible-content">
                    <div class="help-text mb-3">{{ t('editor.faq_help') }}</div>
                    <div id="faqContainer"></div>
                    <button type="button" class="btn btn-secondary btn-sm mt-2" onclick="addFaqItem()">➕ {{ t('editor.faq_add') }}</button>
                    <input type="hidden" id="faq_json" name="faq_json" value="[]">
                </div>
            </div>

        </div>

        <!-- SIDEBAR (right) -->
        <div class="editor-sidebar">
            <div class="form-section">
                <h3>📊 {{ t('editor.status_language') }}</h3>
                <div class="form-group">
                    <label for="status">{{ t('editor.status_label') }}</label>
                    <select id="status" name="status">
                        <option value="draft">{{ t('editor.status_draft') }}</option>
                        <option value="published" selected>{{ t('editor.status_published') }}</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="language">{{ t('editor.language_label') }}</label>
                    <select id="language" name="language">
                        {% for lang in active_languages %}
                        <option value="{{ lang.code }}" {% if target_lang == lang.code %}selected{% endif %}>{{ lang.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label for="template">{{ t('editor.template_label') }}</label>
                    <select id="template" name="template">
                        <option value="default">{{ t('editor.template_default') }}</option>
                        <option value="full-width">{{ t('editor.template_full_width') }}</option>
                        <option value="landing">{{ t('editor.template_landing') }}</option>
                        <option value="landing-narrow">{{ t('editor.template_landing_narrow') }}</option>
                    </select>
                </div>
            </div>
            <div class="form-section">
                <h3>🚀 {{ t('editor.quick_actions') }}</h3>
                <div class="builder-promo mb-3">
                    <div class="builder-promo__icon">🧩</div>
                    <div class="builder-promo__title">{{ t('builder.page_builder') }}</div>
                    <div class="builder-promo__hint">{{ t('builder.save_first_hint') }}</div>
                </div>
            </div>
            <div class="form-section">
                <h3>🤖 {{ t('ai.tools_title') }}</h3>
                <button type="button" class="ai-assist-btn sidebar-btn" onclick="openAIAssistant('generate_full')">
                    🤖 {{ t('ai.ai_generate_content') }}
                </button>
                <button type="button" class="ai-assist-btn sidebar-btn mt-2" onclick="openAIAssistant('seo')">
                    🤖 {{ t('ai.ai_fill_seo') }}
                </button>
                <div class="help-text mt-2">{{ t('ai.seo_help') }}</div>
            </div>
            <div class="form-section">
                <h3>🏷️ {{ t('editor.categorization') }}</h3>
                <div class="form-group"><label for="category">{{ t('editor.category_label') }}</label><input type="text" id="category" name="category" placeholder="{{ t('editor.category_placeholder_page') }}"></div>
                <div class="form-group"><label for="tags">{{ t('editor.tags_label') }}</label><input type="text" id="tags" name="tags" placeholder="{{ t('editor.tags_placeholder') }}"><div class="help-text">{{ t('editor.tags_help') }}</div></div>
            </div>
            <div class="form-section">
                <h3>👁️ {{ t('editor.display_options') }}</h3>
                <div class="form-group">
                    <label class="checkbox-label"><input type="checkbox" name="show_date"> {{ t('editor.show_date') }}</label>
                </div>
                <div class="form-group">
                    <label class="checkbox-label"><input type="checkbox" name="show_author"> {{ t('editor.show_author') }}</label>
                </div>
                <div class="help-text">{{ t('editor.display_help') }}</div>
                <div class="form-group" style="border-top:1px solid var(--adm-border-light); margin-top:14px; padding-top:14px;">
                    <label class="checkbox-label"><input type="checkbox" name="is_posts_page" {% if source_page and source_page.is_posts_page %}checked{% endif %}> {{ t('editor.posts_page') }}</label>
                </div>
                <div class="help-text">{{ t('editor.posts_page_help') }}</div>
            </div>
        </div>
    </div>
</form>
{% endblock %}

{% block extra_js %}
<script src="{{ static_v('js/tinymce/tinymce.min.js') }}"></script>
<script>
function toggleSection(header) {
    const content = header.nextElementSibling;
    const arrow = header.querySelector('.arrow');
    content.classList.toggle('active');
    arrow.classList.toggle('active');
}
tinymce.init({
    base_url: '/static/js/tinymce',
    license_key: 'gpl',
    convert_urls: false,
    relative_urls: false,
    remove_script_host: false,
    selector: '#content', height: 500, menubar: false,
    plugins: ['advlist','autolink','lists','link','image','charmap','preview','anchor','searchreplace','visualblocks','code','fullscreen','insertdatetime','media','table','help','wordcount'],
    toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright | bullist numlist | link image | code',
    skin: _tinyTheme.skin,
    content_style: _tinyTheme.content_style,
    file_picker_callback: function(cb, val, meta) { if (meta.filetype === 'image') openImagePicker(cb); },
    setup: function(editor) { editor.on('change', function() { editor.save(); }); }
});
let slugIsValid = true;
document.getElementById('createForm').addEventListener('submit', function(e) {
    if (typeof tinymce !== 'undefined') tinymce.triggerSave();
    if (!slugIsValid) { e.preventDefault(); alert('{{ t("editor.slug_taken") }}'); document.getElementById('slug').focus(); return false; }
});

// ============================================================
// AI ASSISTANT — uses global AliothAI component from base.html
// ============================================================

function openAIAssistant(mode) {
    var lang = document.getElementById('language');
    var langName = lang ? lang.options[lang.selectedIndex].text : 'English';
    var titleVal = document.getElementById('title').value;
    var contentVal = '';
    if (typeof tinymce !== 'undefined' && tinymce.get('content')) {
        contentVal = tinymce.get('content').getContent({ format: 'text' });
    } else {
        contentVal = document.getElementById('content').value;
    }

    AliothAI.open({
        mode: mode,
        contentType: 'page',
        language: langName,
        existingTitle: titleVal,
        existingContent: contentVal,
        onApply: function(result) {
            applyAIResult(result, mode);
        }
    });
}

function applyAIResult(result, mode) {
    if (!result) return;
    // Title
    if (result.title) {
        document.getElementById('title').value = result.title;
    }
    // Content
    if (result.content) {
        if (typeof tinymce !== 'undefined' && tinymce.get('content')) {
            tinymce.get('content').setContent(result.content);
        } else {
            document.getElementById('content').value = result.content;
        }
    }
    // Excerpt
    if (result.excerpt) {
        var exc = document.getElementById('excerpt');
        if (exc) exc.value = result.excerpt;
    }
    // SEO fields
    if (result.meta_title) { var el = document.getElementById('meta_title'); if (el) el.value = result.meta_title; }
    if (result.meta_description) { var el = document.getElementById('meta_description'); if (el) el.value = result.meta_description; }
    if (result.meta_keywords) { var el = document.getElementById('meta_keywords'); if (el) el.value = result.meta_keywords; }
    if (result.og_title) { var el = document.getElementById('og_title'); if (el) el.value = result.og_title; }
    if (result.og_description) { var el = document.getElementById('og_description'); if (el) el.value = result.og_description; }
    // Twitter fields (use OG as fallback)
    var twTitle = document.getElementById('twitter_title');
    if (twTitle && (result.og_title || result.twitter_title)) twTitle.value = result.twitter_title || result.og_title;
    var twDesc = document.getElementById('twitter_description');
    if (twDesc && (result.og_description || result.twitter_description)) twDesc.value = result.twitter_description || result.og_description;
    if (result.faq && Array.isArray(result.faq)) {
        var container = document.getElementById('faqContainer');
        if (container) {
            container.innerHTML = '';
            result.faq.forEach(function(item) {
                addFaqItem();
                var items = container.querySelectorAll('.faq-editor-item');
                var last = items[items.length - 1];
                if (last) {
                    last.querySelector('.faq-question').value = item.question || '';
                    last.querySelector('.faq-answer').value = item.answer || '';
                }
            });
            updateFaqJson();
        }
    }
}


function setSlugState(feedback, slugInput, state) {
    feedback.classList.remove('slug-valid', 'slug-error', 'text-muted');
    slugInput.classList.remove('slug-input-valid', 'slug-input-error');
    if (state === 'valid') { feedback.classList.add('slug-valid'); slugInput.classList.add('slug-input-valid'); }
    else if (state === 'error') { feedback.classList.add('slug-error'); slugInput.classList.add('slug-input-error'); }
    else { feedback.classList.add('text-muted'); }
}
async function checkSlug(contentType, excludeId) {
    const slugInput = document.getElementById('slug');
    const feedback = document.getElementById('slug-feedback');
    const slug = slugInput.value.trim();
    if (!slug) { feedback.textContent = '{{ t('editor.slug_help') }}'; setSlugState(feedback, slugInput, 'default'); slugIsValid = true; return; }
    try {
        const response = await fetch('/admin/api/check-slug', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ slug, content_type: contentType, exclude_id: excludeId }) });
        const data = await response.json();
        if (data.available) { feedback.textContent = '✅ ' + data.message; setSlugState(feedback, slugInput, 'valid'); slugIsValid = true; }
        else { feedback.textContent = '❌ ' + data.message; setSlugState(feedback, slugInput, 'error'); slugIsValid = false; }
    } catch (err) { feedback.textContent = '{{ t('editor.slug_check_error') }}'; setSlugState(feedback, slugInput, 'default'); slugIsValid = true; }
}
function clearImageField(inputId) {
    document.getElementById(inputId).value = '';
    var wrap = document.getElementById(inputId + "_preview_wrap");
    if (wrap) wrap.style.display = "none";
    if (typeof updateImageHints === 'function') updateImageHints();
}
function setHintState(el, text, state) {
    el.textContent = text;
    el.classList.remove('hint-success', 'hint-muted');
    if (state) el.classList.add(state);
}
function updateImageHints() {
    var fi = document.getElementById("featured_image").value;
    var og = document.getElementById("og_image").value;
    var ogHint = document.getElementById("og_image_hint");
    var twHint = document.getElementById("twitter_image_hint");
    if (ogHint) {
        if (og) { setHintState(ogHint, '', ''); }
        else if (fi) { setHintState(ogHint, '\u2705 {{ t("seo.og_hint_uses_featured") }}', 'hint-success'); }
        else { setHintState(ogHint, '{{ t("seo.og_hint_no_image") }}', 'hint-muted'); }
    }
    if (twHint) {
        var tw = document.getElementById("twitter_image").value;
        if (tw) { setHintState(twHint, '', ''); }
        else if (og) { setHintState(twHint, '\u2705 {{ t("seo.twitter_hint_uses_og") }}', 'hint-success'); }
        else if (fi) { setHintState(twHint, '\u2705 {{ t("seo.twitter_hint_uses_featured") }}', 'hint-success'); }
        else { setHintState(twHint, '{{ t("seo.twitter_hint_no_image") }}', 'hint-muted'); }
    }
}
document.addEventListener("DOMContentLoaded", function() {
    ["featured_image", "og_image", "twitter_image"].forEach(function(id) {
        var input = document.getElementById(id);
        var preview = document.getElementById(id + "_preview");
        var wrap = document.getElementById(id + "_preview_wrap");
        if (input && preview && input.value) { preview.src = input.value; if (wrap) wrap.style.display = "block"; }
    });
    ["featured_image", "og_image", "twitter_image"].forEach(function(id) {
        var el = document.getElementById(id);
        if (el) { el.addEventListener("input", updateImageHints); }
    });
    updateImageHints();
});
function addFaqItem() {
    var container = document.getElementById('faqContainer');
    var item = document.createElement('div');
    item.className = 'faq-editor-item';
    item.innerHTML = '<div class="form-group"><label>{{ t("editor.faq_question") }}</label><input type="text" class="faq-question" placeholder="{{ t("editor.faq_question_placeholder") }}"></div><div class="form-group"><label>{{ t("editor.faq_answer") }}</label><textarea class="faq-answer" rows="2" placeholder="{{ t("editor.faq_answer_placeholder") }}"></textarea></div><button type="button" class="btn btn-danger btn-sm" onclick="this.closest(\'.faq-editor-item\').remove(); updateFaqJson();">🗑️ {{ t("editor.faq_remove") }}</button>';
    container.appendChild(item);
    item.querySelector('.faq-question').addEventListener('input', updateFaqJson);
    item.querySelector('.faq-answer').addEventListener('input', updateFaqJson);
}
function updateFaqJson() {
    var items = document.querySelectorAll('.faq-editor-item');
    var faq = [];
    items.forEach(function(item) {
        var q = item.querySelector('.faq-question').value.trim();
        var a = item.querySelector('.faq-answer').value.trim();
        if (q || a) faq.push({question: q, answer: a});
    });
    document.getElementById('faq_json').value = JSON.stringify(faq);
}
function cleanSlugInput(input) {
    var v = input.value.toLowerCase();
    v = v.replace(/\s+/g, "-");
    v = v.replace(/[^a-z0-9\-]/g, "");
    v = v.replace(/-+/g, "-");
    v = v.replace(/^-|-$/g, "");
    input.value = v;
}
</script>
{% endblock %}