{{--
    محرر تنسيق (WYSIWYG) مستقل بالكامل — لا يعتمد على أي مكتبة خارجية أو CDN،
    يشتغل بمتصفحك نفسه فقط. مهم خصوصاً مع اتصال إنترنت غير مستقر.

    الاستخدام: @include('components.rich-editor', ['name' => 'body', 'value' => $article->body])
--}}
@php
    $editorId = $name.'-editor-'.\Illuminate\Support\Str::random(6);
@endphp

<div class="rich-editor-wrap" data-editor-id="{{ $editorId }}">
    <div class="rich-editor-toolbar" style="display:flex; flex-wrap:wrap; gap:4px; border:1px solid #d1d5db; border-bottom:none; border-radius:6px 6px 0 0; padding:6px; background:#f9fafb;">
        <button type="button" data-cmd="bold" title="عريض"><b>B</b></button>
        <button type="button" data-cmd="italic" title="مائل"><i>I</i></button>
        <button type="button" data-cmd="underline" title="تسطير"><u>U</u></button>
        <button type="button" data-cmd="strikeThrough" title="خط فوق النص"><s>S</s></button>
        <span style="border-right:1px solid #d1d5db; margin:0 4px;"></span>
        <button type="button" data-cmd="formatBlock" data-value="H2" title="عنوان كبير">H2</button>
        <button type="button" data-cmd="formatBlock" data-value="H3" title="عنوان صغير">H3</button>
        <button type="button" data-cmd="formatBlock" data-value="P" title="فقرة عادية">¶</button>
        <button type="button" data-cmd="formatBlock" data-value="BLOCKQUOTE" title="اقتباس">❝</button>
        <span style="border-right:1px solid #d1d5db; margin:0 4px;"></span>
        <button type="button" data-cmd="insertUnorderedList" title="قائمة نقطية">•—</button>
        <button type="button" data-cmd="insertOrderedList" title="قائمة مرقّمة">1.—</button>
        <span style="border-right:1px solid #d1d5db; margin:0 4px;"></span>
        <button type="button" data-action="link" title="إدراج رابط">🔗</button>
        <button type="button" data-action="image" title="إدراج صورة (رابط)">🖼️</button>
        <button type="button" data-action="media-library" title="فتح مكتبة الوسائط بتبويب جديد">📁 الوسائط</button>
        <span style="border-right:1px solid #d1d5db; margin:0 4px;"></span>
        <button type="button" data-cmd="undo" title="تراجع">↶</button>
        <button type="button" data-cmd="redo" title="إعادة">↷</button>
        <button type="button" data-cmd="removeFormat" title="مسح التنسيق">🧹</button>
    </div>

    <div id="{{ $editorId }}"
         class="rich-editor-content"
         contenteditable="true"
         style="min-height:320px; border:1px solid #d1d5db; border-radius:0 0 6px 6px; padding:12px; background:#fff; line-height:1.8;"
    >{!! $value ?? '' !!}</div>

    <textarea id="{{ $name }}" name="{{ $name }}" style="display:none"></textarea>
</div>

<style>
.rich-editor-toolbar button {
    background:#fff; border:1px solid #d1d5db; border-radius:4px;
    padding:5px 9px; font-size:13px; cursor:pointer; min-width:32px;
}
.rich-editor-toolbar button:hover { background:#eef2ff; }
.rich-editor-content:focus { outline:2px solid #2563eb; outline-offset:1px; }
.rich-editor-content img { max-width:100%; border-radius:6px; margin:8px 0; }
.rich-editor-content blockquote { border-right:3px solid #d1d5db; padding-right:12px; color:#6b7280; margin:8px 0; }
</style>

<script>
(function () {
    const wrap = document.querySelector('[data-editor-id="{{ $editorId }}"]');
    const content = document.getElementById('{{ $editorId }}');
    const hiddenField = document.getElementById('{{ $name }}');

    // مزامنة المحتوى الأولي فوراً (عشان صندوق السيو يشتغل حتى قبل أول تعديل)
    hiddenField.value = content.innerHTML;

    function sync() {
        hiddenField.value = content.innerHTML;
        // نطلق حدث input يدوياً على الحقل المخفي عشان أي كود آخر (زي محلل السيو) يلتقطه
        hiddenField.dispatchEvent(new Event('input', { bubbles: true }));
    }

    content.addEventListener('input', sync);
    content.addEventListener('blur', sync);

    wrap.querySelectorAll('.rich-editor-toolbar button').forEach(btn => {
        btn.addEventListener('click', () => {
            content.focus();

            if (btn.dataset.cmd) {
                document.execCommand(btn.dataset.cmd, false, btn.dataset.value || null);
            } else if (btn.dataset.action === 'link') {
                const url = prompt('رابط الوصلة (URL):', 'https://');
                if (url) document.execCommand('createLink', false, url);
            } else if (btn.dataset.action === 'image') {
                const url = prompt('رابط الصورة (URL) — انسخه من مكتبة الوسائط أو أي مصدر آخر:', 'https://');
                if (url) document.execCommand('insertImage', false, url);
            } else if (btn.dataset.action === 'media-library') {
                window.open('{{ route('tenant.media.index') }}', '_blank');
            }

            sync();
        });
    });
})();
</script>