{% extends 'base.html.twig' %}

{% block title %}{{ isEdit ? 'Edit Post' : 'New Post' }} — Blog Admin{% endblock %}

{% block stylesheets %}
{{ parent() }}
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
    --adm-primary: #6366f1;
    --adm-primary-light: #818cf8;
    --adm-success: #10b981;
    --adm-danger: #ef4444;
    --adm-bg: #f1f5f9;
    --adm-card: #ffffff;
    --adm-text: #1e293b;
    --adm-text-muted: #64748b;
    --adm-border: #e2e8f0;
}
body { font-family: 'Inter', sans-serif; background: var(--adm-bg); }

.blog-form-wrap {
    max-width: 1100px;
    margin: 30px auto;
    padding: 0 20px;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--adm-text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    margin-bottom: 16px;
}
.back-link:hover { color: var(--adm-primary); }

.form-header {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--adm-text);
    margin-bottom: 24px;
}

.form-card {
    background: var(--adm-card);
    border-radius: 12px;
    border: 1px solid var(--adm-border);
    padding: 24px;
    margin-bottom: 24px;
}

.form-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--adm-text);
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--adm-border);
}

.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
}
.form-row .form-group { flex: 1; }

.form-group {
    margin-bottom: 16px;
}
.form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--adm-text-muted);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.form-group input[type="text"],
.form-group input[type="date"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--adm-border);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--adm-text);
    background: #fff;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--adm-primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}
.form-group textarea { min-height: 80px; resize: vertical; }
.form-group .rtl-input { direction: rtl; text-align: right; }

.lang-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
}
.lang-tab {
    padding: 8px 20px;
    border: 1px solid var(--adm-border);
    background: #fff;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--adm-text-muted);
    transition: all 0.15s;
    border-bottom: 2px solid transparent;
}
.lang-tab.active {
    color: var(--adm-primary);
    border-bottom-color: var(--adm-primary);
    background: #f0f0ff;
}
.lang-tab:hover { color: var(--adm-primary); }

.lang-panel { display: none; }
.lang-panel.active { display: block; }

.cover-preview-box {
    width: 200px;
    height: 120px;
    border: 2px dashed var(--adm-border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 10px;
    background: #f8fafc;
}
.cover-preview-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cover-preview-box .placeholder-text {
    color: #94a3b8;
    font-size: 0.8rem;
}

.toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}
.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
}
.toggle-switch input { display: none; }
.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #cbd5e1;
    border-radius: 24px;
    transition: 0.3s;
}
.toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.3s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--adm-success); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

.btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: var(--adm-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-submit:hover { background: #4f46e5; }

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: #fff;
    color: var(--adm-text);
    border: 1px solid var(--adm-border);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}
.btn-secondary:hover { border-color: var(--adm-primary); color: var(--adm-primary); text-decoration: none; }

.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 16px;
}

.slug-preview {
    font-size: 0.75rem;
    color: var(--adm-text-muted);
    margin-top: 4px;
}
.slug-preview code {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
}

.author-presets {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}
.author-preset {
    padding: 4px 12px;
    border: 1px solid var(--adm-border);
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    background: #fff;
    color: var(--adm-text-muted);
    transition: all 0.15s;
}
.author-preset:hover { border-color: var(--adm-primary); color: var(--adm-primary); }

@media (max-width: 768px) {
    .form-row { flex-direction: column; gap: 0; }
}
</style>
{% endblock %}

{% block body %}
<div class="blog-form-wrap">
    <a href="{{ path('admin_blog_index') }}" class="back-link">
        <i class="fa fa-arrow-left"></i> Back to Blog Posts
    </a>

    <h1 class="form-header">
        <i class="fa fa-{{ isEdit ? 'pencil' : 'plus' }}"></i>
        {{ isEdit ? 'Edit Post' : 'New Blog Post' }}
    </h1>

    <form method="post" enctype="multipart/form-data">
        {# ── Basic Info ── #}
        <div class="form-card">
            <h3><i class="fa fa-info-circle"></i> Basic Information</h3>

            <div class="form-row">
                <div class="form-group">
                    <label>Slug (URL)</label>
                    <input type="text" name="slug" value="{{ post ? post.slug : '' }}" placeholder="e.g. how-we-built-ai-detection">
                    <div class="slug-preview">URL: <code>/blog/<span id="slugPreview">{{ post ? post.slug : '...' }}</span></code></div>
                </div>
                <div class="form-group">
                    <label>Author</label>
                    <input type="text" name="author_name" id="authorField" value="{{ post ? post.authorName : 'Shamra Academia Team' }}">
                    <div class="author-presets">
                        <button type="button" class="author-preset" onclick="document.getElementById('authorField').value='Shamra Academia Team'">Shamra Academia Team</button>
                        <button type="button" class="author-preset" onclick="document.getElementById('authorField').value='Shadi Saleh'">Shadi Saleh</button>
                    </div>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label>Published Date</label>
                    <input type="date" name="published_at" value="{{ post ? post.publishedAt|date('Y-m-d') : 'now'|date('Y-m-d') }}">
                </div>
                <div class="form-group">
                    <label>Status</label>
                    <div class="toggle-wrapper" style="margin-top: 8px;">
                        <label class="toggle-switch">
                            <input type="hidden" name="is_published" value="0">
                            <input type="checkbox" name="is_published" value="1" {{ (post and post.isPublished()) ? 'checked' : '' }}>
                            <span class="toggle-slider"></span>
                        </label>
                        <span style="font-size:0.85rem; color:var(--adm-text);">Published</span>
                    </div>
                </div>
            </div>
        </div>

        {# ── Cover Image ── #}
        <div class="form-card">
            <h3><i class="fa fa-image"></i> Cover Image</h3>
            <div class="cover-preview-box" id="coverPreview">
                {% if post and post.coverImage %}
                    <img src="{{ post.coverImageUrl }}" alt="cover" id="coverImg">
                {% else %}
                    <span class="placeholder-text" id="coverPlaceholder"><i class="fa fa-image"></i> No image</span>
                {% endif %}
            </div>
            <input type="file" name="cover_image" accept="image/*" onchange="previewCover(this)">
        </div>

        {# ── Content (Multilingual) ── #}
        <div class="form-card">
            <h3><i class="fa fa-language"></i> Content</h3>

            <div class="lang-tabs">
                <div class="lang-tab active" data-lang="ar" onclick="switchLang('ar')">🇸🇦 Arabic</div>
                <div class="lang-tab" data-lang="en" onclick="switchLang('en')">🇬🇧 English</div>
            </div>

            {# Arabic Panel #}
            <div class="lang-panel active" id="panel-ar">
                <div class="form-group">
                    <label>Title (Arabic)</label>
                    <input type="text" name="title_ar" class="rtl-input" value="{{ post ? post.titleAr : '' }}" placeholder="عنوان المقال بالعربية">
                </div>
                <div class="form-group">
                    <label>Description (Arabic)</label>
                    <textarea name="description_ar" class="rtl-input" rows="2" placeholder="وصف مختصر بالعربية">{{ post ? post.descriptionAr : '' }}</textarea>
                </div>
                <div class="form-group">
                    <label>Content (Arabic)</label>
                    <textarea name="content_ar" id="editor_ar">{{ post ? post.contentAr : '' }}</textarea>
                </div>
            </div>

            {# English Panel #}
            <div class="lang-panel" id="panel-en">
                <div class="form-group">
                    <label>Title (English)</label>
                    <input type="text" name="title_en" value="{{ post ? post.titleEn : '' }}" placeholder="Article title in English">
                </div>
                <div class="form-group">
                    <label>Description (English)</label>
                    <textarea name="description_en" rows="2" placeholder="Short description in English">{{ post ? post.descriptionEn : '' }}</textarea>
                </div>
                <div class="form-group">
                    <label>Content (English)</label>
                    <textarea name="content_en" id="editor_en">{{ post ? post.contentEn : '' }}</textarea>
                </div>
            </div>
        </div>

        {# ── Actions ── #}
        <div class="form-actions">
            <a href="{{ path('admin_blog_index') }}" class="btn-secondary">Cancel</a>
            <button type="submit" class="btn-submit">
                <i class="fa fa-check"></i> {{ isEdit ? 'Update Post' : 'Create Post' }}
            </button>
        </div>
    </form>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script src="{{ asset('tinymce/tinymce/js/tinymce/tinymce.min.js') }}"></script>
<script>
// ── Language tab switching ──
function switchLang(lang) {
    // Save current TinyMCE content before switching
    if (tinymce.get('editor_ar')) {
        tinymce.get('editor_ar').save();
    }
    if (tinymce.get('editor_en')) {
        tinymce.get('editor_en').save();
    }

    document.querySelectorAll('.lang-tab').forEach(function(t) { t.classList.remove('active'); });
    document.querySelectorAll('.lang-panel').forEach(function(p) { p.classList.remove('active'); });
    document.querySelector('.lang-tab[data-lang="' + lang + '"]').classList.add('active');
    document.getElementById('panel-' + lang).classList.add('active');

    // Re-initialize editor for the newly visible panel
    var editorId = 'editor_' + lang;
    var editor = tinymce.get(editorId);
    if (editor) {
        // Editor exists, just trigger a resize
        setTimeout(function() { editor.fire('ResizeWindow'); }, 100);
    }
}

// ── TinyMCE initialization ──
function initTinyMCE(selector, lang) {
    var isArabic = (lang === 'ar');
    tinymce.init({
        selector: selector,
        language: isArabic ? 'ar' : null,
        directionality: isArabic ? 'rtl' : 'ltr',
        height: 500,
        menubar: 'file edit view insert format tools table help',
        plugins: [
            'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
            'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
            'insertdatetime', 'media', 'table', 'help', 'wordcount', 'directionality',
            'codesample', 'quickbars'
        ],
        toolbar: 'undo redo | blocks | bold italic underline strikethrough | ' +
                 'forecolor backcolor | alignleft aligncenter alignright alignjustify | ' +
                 'bullist numlist outdent indent | image media link | ' +
                 'ltr rtl | table | code fullscreen | removeformat help',
        // Image upload
        images_upload_url: '{{ path("admin_blog_upload_image") }}',
        images_upload_credentials: true,
        automatic_uploads: true,
        file_picker_types: 'image',
        image_advtab: true,
        image_caption: true,
        // Content styling
        content_style: isArabic ?
            'body { font-family: "Segoe UI", Tahoma, Arial, sans-serif; font-size: 16px; direction: rtl; text-align: right; line-height: 1.8; }' :
            'body { font-family: "Segoe UI", Tahoma, Arial, sans-serif; font-size: 16px; line-height: 1.8; }',
        // Quickbars
        quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote',
        quickbars_insert_toolbar: 'image media table',
        // Setup
        setup: function(editor) {
            editor.on('change', function() {
                editor.save();
            });
        },
        // Paste
        paste_data_images: true,
        // Promote false for self-hosted
        promotion: false,
        branding: false,
        license_key: 'gpl'
    });
}

// Initialize both editors
document.addEventListener('DOMContentLoaded', function() {
    initTinyMCE('#editor_ar', 'ar');
    initTinyMCE('#editor_en', 'en');
});

// ── Slug auto-generate from title ──
(function() {
    var slugInput = document.querySelector('input[name="slug"]');
    var slugPreview = document.getElementById('slugPreview');
    var titleEnInput = document.querySelector('input[name="title_en"]');

    if (slugInput) {
        slugInput.addEventListener('input', function() {
            slugPreview.textContent = this.value || '...';
        });
    }
    {% if not isEdit %}
    if (titleEnInput) {
        titleEnInput.addEventListener('blur', function() {
            if (slugInput && !slugInput.value) {
                var slug = this.value.toLowerCase()
                    .replace(/[^a-z0-9\s-]/g, '')
                    .replace(/\s+/g, '-')
                    .replace(/-+/g, '-')
                    .replace(/^-|-$/g, '');
                slugInput.value = slug;
                slugPreview.textContent = slug || '...';
            }
        });
    }
    {% endif %}
})();

// ── Cover image preview ──
function previewCover(input) {
    var preview = document.getElementById('coverPreview');
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            preview.innerHTML = '<img src="' + e.target.result + '" alt="cover">';
        };
        reader.readAsDataURL(input.files[0]);
    }
}
</script>
{% endblock %}