@csrf

@if ($errors->any())
    <div class="alert-info mb-3" role="alert" style="background: rgba(209, 67, 67, 0.12); color: #8b1e1e; border: 1px solid rgba(209, 67, 67, 0.35);">
        <p class="body-m" style="margin: 0 0 0.5rem;">تعذر حفظ المقالة. راجع الحقول التالية:</p>
        <ul class="body-s" style="margin: 0; padding-inline-start: 1.25rem;">
            @foreach ($errors->all() as $message)
                <li>{{ $message }}</li>
            @endforeach
        </ul>
    </div>
@endif

@php
    $selectedCategoryIds = collect(old('categories', isset($article) && $article->exists ? $article->categories->pluck('id')->all() : []))
        ->map(fn ($id) => (int) $id)
        ->all();
    $selectedTagIds = collect(old('tags', isset($article) && $article->exists ? $article->tags->pluck('id')->all() : []))
        ->map(fn ($id) => (int) $id)
        ->all();
    $metaBefore = old('meta.before_start', isset($article) ? ($article->meta['before_start'] ?? '') : '');
    $metaQuick = old('meta.quick_solutions', isset($article) ? ($article->meta['quick_solutions'] ?? '') : '');
    $metaLinks = old('meta.external_links', isset($article) ? ($article->meta['external_links'] ?? []) : []);
    if (! is_array($metaLinks) || $metaLinks === []) {
        $metaLinks = [['url' => '', 'label' => '']];
    }
@endphp

<div class="form-grid">
    <div>
        <label class="form-label" for="title">عنوان المقال</label>
        <input id="title" name="title" type="text" value="{{ old('title', $article->title ?? '') }}" class="input-control @error('title') is-invalid @enderror" placeholder="مثال: خطوات تركيب النظام" required data-slug-source>
        @error('title')
            <span class="form-error">{{ $message }}</span>
        @enderror
    </div>

    <div>
        <label class="form-label" for="slug">الرابط (Slug)</label>
        <input id="slug" name="slug" type="text" value="{{ old('slug', $article->slug ?? '') }}" class="input-control @error('slug') is-invalid @enderror" placeholder="setup-guide" required data-slug-target>
        @error('slug')
            <span class="form-error">{{ $message }}</span>
        @enderror
    </div>

    <div>
        <label class="form-label" for="categories">التصنيفات</label>
        <div id="categories" class="multi-select" data-multi-select data-name="categories[]" data-placeholder="اختر تصنيفات" data-selected='@json($selectedCategoryIds)'>
            <button type="button" class="multi-select__button">
                <span class="multi-select__label">اختر تصنيفات</span>
            </button>
            <div class="multi-select__panel" hidden>
                @foreach ($categories as $parent)
                    <label class="multi-select__option multi-select__option--root" title="تصنيف أساسي">
                        <input type="checkbox" value="{{ $parent->id }}">
                        <span class="multi-select__option-text">{{ $parent->name }}</span>
                    </label>
                    @foreach ($parent->children as $child)
                        <label class="multi-select__option multi-select__option--child" title="تصنيف فرعي">
                            <input type="checkbox" value="{{ $child->id }}">
                            <span class="multi-select__option-text">
                                <span class="multi-select__child-prefix" aria-hidden="true">..</span>{{ $child->name }}
                            </span>
                        </label>
                    @endforeach
                @endforeach
            </div>
        </div>
        <span class="form-help body-s">يمكنك اختيار أكثر من تصنيفة.</span>
    </div>

    <div class="form-grid__triple">
        <div>
            <label class="form-label" for="status">الحالة</label>
            <select id="status" name="status" class="input-control">
                @foreach (['draft' => 'مسودة', 'published' => 'منشور'] as $value => $label)
                    <option value="{{ $value }}" @selected(old('status', $article->status ?? 'draft') === $value)>
                        {{ $label }}
                    </option>
                @endforeach
            </select>
        </div>

        <div>
            <label class="form-label" for="visibility">الظهور</label>
            <select id="visibility" name="visibility" class="input-control">
                @foreach (['public' => 'عام', 'private' => 'خاص'] as $value => $label)
                    <option value="{{ $value }}" @selected(old('visibility', $article->visibility ?? 'public') === $value)>
                        {{ $label }}
                    </option>
                @endforeach
            </select>
        </div>

        <div class="show-new-toggle-field">
            <span class="form-label show-new-toggle-field__spacer" aria-hidden="true">الحالة</span>
            @include('admin.partials.show-new-toggle', ['model' => $article ?? null, 'toggleId' => 'show_new_badge_article'])
        </div>
    </div>

    <div>
        <label class="form-label" for="tags">الوسوم</label>
        <div id="tags" class="multi-select" data-multi-select data-name="tags[]" data-placeholder="اختر وسوماً" data-selected='@json($selectedTagIds)'>
            <button type="button" class="multi-select__button">
                <span class="multi-select__label">اختر وسوماً</span>
            </button>
            <div class="multi-select__panel" hidden>
                @foreach ($tags as $tag)
                    @php
                        $tagColor = $tag->color ?: '#4abcb3';
                    @endphp
                    <label class="multi-select__option">
                        <input type="checkbox" value="{{ $tag->id }}">
                        <span class="multi-select__option-text multi-select__option-text--tag"><span class="multi-select__tag-swatch" style="background-color: {{ $tagColor }}" title="لون الوسم" aria-hidden="true"></span>{{ $tag->name }}@if ($tag->show_new_badge) <span class="new-badge new-badge--inline" aria-hidden="true"><span class="new-badge__fire">🔥</span><span class="new-badge__label">جديد</span></span>@endif</span>
                    </label>
                @endforeach
            </div>
        </div>
        <span class="form-help body-s">يمكنك اختيار أكثر من وسم .</span>
    </div>
</div>

<div class="mt-3 article-editor-wrap">
    <label class="form-label" for="article-editor">محرر المقال</label>
    <textarea id="article-editor" name="body" rows="24" class="input-control editor-textarea @error('body') is-invalid @enderror" placeholder="اكتب محتوى المقال هنا...">{{ old('body', $article->body ?? '') }}</textarea>
    @error('body')
        <span class="form-error">{{ $message }}</span>
    @enderror

    <button
        type="button"
        id="article-ai-format-btn"
        class="btn btn--primary w-full mt-3"
        @disabled(! config('ai.enabled'))
        @unless (config('ai.enabled'))
            title="فعّل AI_ENABLED و OPENAI_API_KEY وقالب المرجع في ملف .env"
        @endunless
    >
        تنسيق المقالة
    </button>
</div>

<div class="mt-4 article-sidebar-fields">
    <h2 class="form-label" style="font-size: 1.1rem; margin-bottom: 1rem;">أقسام إضافية (الشريط الجانبي في صفحة المقالة)</h2>

    <div class="mb-4">
        <div class="mb-2" style="display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
            <label class="form-label mb-0" for="meta-before-start">قبل أن تبدأ</label>
            <button
                type="button"
                class="btn btn--secondary"
                id="article-ai-before-start-btn"
                @disabled(! config('ai.enabled'))
            >
                تعبئة باستخدام ال AI
            </button>
        </div>
        <textarea id="meta-before-start" name="meta[before_start]" rows="5" class="input-control" placeholder="يظهر هذا القسم في المقالة فقط عند وجود نص هنا.">{{ $metaBefore }}</textarea>
    </div>

    <div class="mb-4">
        <div class="mb-2" style="display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
            <label class="form-label mb-0" for="meta-quick-solutions">حلول سريعة عند التعثر</label>
            <button
                type="button"
                class="btn btn--secondary"
                id="article-ai-quick-solutions-btn"
                @disabled(! config('ai.enabled'))
            >
                تعبئة باستخدام ال AI
            </button>
        </div>
        <textarea id="meta-quick-solutions" name="meta[quick_solutions]" rows="6" class="input-control" placeholder="يظهر هذا القسم فقط عند وجود نص هنا.">{{ $metaQuick }}</textarea>
    </div>

    <div class="mb-2">
        <label class="form-label">روابط خارجية</label>
        <p class="form-help body-s mb-2">يظهر القسم في المقالة فقط عند إضافة رابط واحد على الأقل.</p>
        <div id="external-links-rows" class="external-links-rows">
            @foreach ($metaLinks as $i => $row)
                @php
                    $u = is_array($row) ? ($row['url'] ?? '') : '';
                    $lbl = is_array($row) ? ($row['label'] ?? '') : '';
                @endphp
                <div class="external-link-row mb-2" style="display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap;">
                    <div style="flex: 1; min-width: 200px;">
                        <label class="form-help body-s">الرابط</label>
                        <input type="text" name="meta[external_links][{{ $i }}][url]" value="{{ $u }}" class="input-control" placeholder="https://..." autocomplete="off">
                    </div>
                    <div style="flex: 1; min-width: 160px;">
                        <label class="form-help body-s">عنوان اختياري</label>
                        <input type="text" name="meta[external_links][{{ $i }}][label]" value="{{ $lbl }}" class="input-control" placeholder="يُعرض بدل الرابط" autocomplete="off">
                    </div>
                    <button type="button" class="btn btn--secondary external-link-remove" title="حذف" aria-label="حذف">✕</button>
                </div>
            @endforeach
        </div>
        <button type="button" class="btn btn--secondary mt-2" id="external-link-add" title="إضافة رابط">+ إضافة رابط</button>
    </div>
</div>

<div class="mt-4 flex-end">
    <a href="{{ route('admin.articles.index') }}" class="btn btn--secondary">عودة</a>
    <button type="submit" class="btn btn--primary">{{ $submitLabel }}</button>
</div>

@once
    @push('scripts')
        @php
            $tinymceToolbar = 'undo redo | blocks | bold italic underline strikethrough | forecolor backcolor | alignright aligncenter alignleft alignjustify | bullist numlist | link image table | removeformat | code | fullscreen';
        @endphp
        <script src="https://cdn.jsdelivr.net/npm/tinymce@6.8.4/tinymce.min.js" referrerpolicy="origin"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var linkContainer = document.getElementById('external-links-rows');
                var linkAdd = document.getElementById('external-link-add');
                if (linkContainer && linkAdd) {
                    linkAdd.addEventListener('click', function () {
                        var n = linkContainer.querySelectorAll('.external-link-row').length;
                        var wrap = document.createElement('div');
                        wrap.className = 'external-link-row mb-2';
                        wrap.style.display = 'flex';
                        wrap.style.gap = '0.5rem';
                        wrap.style.alignItems = 'flex-end';
                        wrap.style.flexWrap = 'wrap';
                        wrap.innerHTML =
                            '<div style="flex: 1; min-width: 200px;">' +
                            '<label class="form-help body-s">الرابط</label>' +
                            '<input type="text" name="meta[external_links][' +
                            n +
                            '][url]" value="" class="input-control" placeholder="https://..." autocomplete="off">' +
                            '</div>' +
                            '<div style="flex: 1; min-width: 160px;">' +
                            '<label class="form-help body-s">عنوان اختياري</label>' +
                            '<input type="text" name="meta[external_links][' +
                            n +
                            '][label]" value="" class="input-control" placeholder="يُعرض بدل الرابط" autocomplete="off">' +
                            '</div>' +
                            '<button type="button" class="btn btn--secondary external-link-remove" title="حذف" aria-label="حذف">✕</button>';
                        linkContainer.appendChild(wrap);
                        wrap.querySelector('.external-link-remove').addEventListener('click', onRemoveLinkRow);
                    });
                    function onRemoveLinkRow(e) {
                        var row = e.target.closest('.external-link-row');
                        if (!row || !linkContainer) return;
                        var rows = linkContainer.querySelectorAll('.external-link-row');
                        if (rows.length <= 1) {
                            row.querySelectorAll('input').forEach(function (inp) {
                                inp.value = '';
                            });
                            return;
                        }
                        row.remove();
                    }
                    linkContainer.querySelectorAll('.external-link-remove').forEach(function (b) {
                        b.addEventListener('click', onRemoveLinkRow);
                    });
                }

                if (!window.tinymce) return;
                var aiFormatUrl = @json(route('admin.articles.ai-format'));
                var aiSidebarUrl = @json(route('admin.articles.ai-sidebar'));
                var aiEnabled = @json(config('ai.enabled'));
                tinymce.remove('#article-editor');
                tinymce.init({
                    selector: '#article-editor',
                    base_url: 'https://cdn.jsdelivr.net/npm/tinymce@6.8.4',
                    suffix: '.min',
                    height: 520,
                    resize: false,
                    directionality: 'rtl',
                    language: 'ar',
                    language_url: 'https://cdn.jsdelivr.net/npm/tinymce-i18n@23.10.9/langs6/ar.js',
                    plugins: 'lists advlist link image table code fullscreen searchreplace visualblocks wordcount',
                    toolbar: @json($tinymceToolbar),
                    menubar: false,
                    branding: false,
                    entity_encoding: 'raw',
                    content_css: [@json(asset('css/tinymce-article-content.css'))],
                    content_style: 'body { margin: 0; }',
                    image_caption: true,
                    extended_valid_elements:
                        'iframe[src|width|height|frameborder|allowfullscreen|loading|referrerpolicy|style|class|title|allow],script[src|type|async|defer|charset],style',
                    init_instance_callback: function (editor) {
                        if (!aiEnabled) {
                            return;
                        }
                        var beforeBtn = document.getElementById('article-ai-before-start-btn');
                        var quickBtn = document.getElementById('article-ai-quick-solutions-btn');
                        function delay(ms) {
                            return new Promise(function (resolve) {
                                setTimeout(resolve, ms);
                            });
                        }
                        function randomSidebarWaitMs() {
                            return 3000 + Math.floor(Math.random() * 4001);
                        }
                        function setSidebarAiButtonLoading(btn, loading) {
                            if (!btn) {
                                return;
                            }
                            if (loading) {
                                if (!btn.dataset.originalLabel) {
                                    btn.dataset.originalLabel = btn.textContent.trim();
                                }
                                btn.disabled = true;
                                btn.classList.add('btn--ai-loading');
                                btn.setAttribute('aria-busy', 'true');
                                btn.innerHTML =
                                    '<span class="article-ai-btn-spinner" aria-hidden="true"></span> جاري التعبئة…';
                            } else {
                                btn.classList.remove('btn--ai-loading');
                                btn.removeAttribute('aria-busy');
                                if (btn.dataset.originalLabel) {
                                    btn.textContent = btn.dataset.originalLabel;
                                    delete btn.dataset.originalLabel;
                                }
                                btn.disabled = false;
                            }
                        }
                        function postSidebar(kind, textarea, activeBtn) {
                            var html = editor.getContent();
                            var token = document.querySelector('meta[name="csrf-token"]');
                            token = token ? token.getAttribute('content') : '';
                            var minWait = randomSidebarWaitMs();
                            editor.setProgressState(true);
                            if (beforeBtn) beforeBtn.disabled = true;
                            if (quickBtn) quickBtn.disabled = true;
                            setSidebarAiButtonLoading(activeBtn, true);
                            var fetchPromise = fetch(aiSidebarUrl, {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    Accept: 'application/json',
                                    'X-CSRF-TOKEN': token,
                                    'X-Requested-With': 'XMLHttpRequest',
                                },
                                body: JSON.stringify({ html: html, kind: kind }),
                            }).then(function (res) {
                                return res.json().then(function (data) {
                                    if (!res.ok) {
                                        throw new Error(data.message || 'فشل الطلب');
                                    }
                                    return data;
                                });
                            });
                            Promise.all([fetchPromise, delay(minWait)])
                                .then(function (results) {
                                    var data = results[0];
                                    if (data.text && textarea) {
                                        textarea.value = data.text;
                                    }
                                })
                                .catch(function (err) {
                                    if (typeof showAppAlert === 'function') {
                                        showAppAlert(err.message || 'تعذر التعبئة', {
                                            title: 'تعذر التعبئة',
                                        });
                                    } else {
                                        alert(err.message || 'تعذر التعبئة');
                                    }
                                })
                                .finally(function () {
                                    editor.setProgressState(false);
                                    setSidebarAiButtonLoading(activeBtn, false);
                                    if (beforeBtn) beforeBtn.disabled = false;
                                    if (quickBtn) quickBtn.disabled = false;
                                });
                        }
                        if (beforeBtn) {
                            beforeBtn.addEventListener('click', function () {
                                var ta = document.getElementById('meta-before-start');
                                postSidebar('before_start', ta, beforeBtn);
                            });
                        }
                        if (quickBtn) {
                            quickBtn.addEventListener('click', function () {
                                var ta = document.getElementById('meta-quick-solutions');
                                postSidebar('quick_solutions', ta, quickBtn);
                            });
                        }
                        var btn = document.getElementById('article-ai-format-btn');
                        if (!btn) {
                            return;
                        }
                        btn.addEventListener('click', function () {
                            var token = document.querySelector('meta[name="csrf-token"]');
                            token = token ? token.getAttribute('content') : '';
                            var html = editor.getContent();
                            editor.setProgressState(true);
                            btn.disabled = true;
                            fetch(aiFormatUrl, {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    Accept: 'application/json',
                                    'X-CSRF-TOKEN': token,
                                    'X-Requested-With': 'XMLHttpRequest',
                                },
                                body: JSON.stringify({
                                    html: html,
                                    instructions: null,
                                }),
                            })
                                .then(function (res) {
                                    return res.json().then(function (data) {
                                        if (!res.ok) {
                                            throw new Error(data.message || 'فشل الطلب');
                                        }
                                        return data;
                                    });
                                })
                                .then(function (data) {
                                    if (data.html) {
                                        editor.setContent(data.html);
                                    }
                                })
                                .catch(function (err) {
                                    if (typeof showAppAlert === 'function') {
                                        showAppAlert(err.message || 'تعذر تنسيق المقالة', {
                                            title: 'تعذر التنسيق',
                                        });
                                    } else {
                                        alert(err.message || 'تعذر تنسيق المقالة');
                                    }
                                })
                                .finally(function () {
                                    editor.setProgressState(false);
                                    btn.disabled = false;
                                });
                        });
                    },
                });

                var articleForm = document.getElementById('article-form');
                if (articleForm) {
                    articleForm.addEventListener('submit', function () {
                        if (window.tinymce) {
                            tinymce.triggerSave();
                        }
                    });
                }
            });
        </script>
    @endpush
@endonce