@props([
    'id' => null,
    'label' => 'Contenu',
    'name',
    'placeholder' => 'Saisissez votre contenu…',
    'required' => false,
    'value' => '',
])

@php
    $editorId = $id ?: 'rich-text-'.\Illuminate\Support\Str::uuid();
    $renderedValue = \App\Support\RichText::render($value);
@endphp

<div class="rich-text-editor" data-rich-text-editor data-required="{{ $required ? 'true' : 'false' }}">
    <label for="{{ $editorId }}" class="rich-text-editor__label">{{ $label }}</label>

    <div class="rich-text-editor__toolbar" role="toolbar" aria-label="Mise en forme du texte">
        <select class="rich-text-editor__select" data-rich-text-block aria-label="Style du texte" title="Style du texte">
            <option value="p">Texte</option>
            <option value="h2">Titre</option>
            <option value="h3">Sous-titre</option>
        </select>

        <span class="rich-text-editor__separator" aria-hidden="true"></span>

        <button type="button" data-rich-text-command="bold" aria-label="Gras" title="Gras"><strong>G</strong></button>
        <button type="button" data-rich-text-command="italic" aria-label="Italique" title="Italique"><em>I</em></button>
        <button type="button" data-rich-text-command="underline" aria-label="Souligné" title="Souligné"><u>S</u></button>

        <span class="rich-text-editor__separator" aria-hidden="true"></span>

        <button type="button" data-rich-text-command="insertUnorderedList" aria-label="Liste à puces" title="Liste à puces">• Liste</button>
        <button type="button" data-rich-text-command="insertOrderedList" aria-label="Liste numérotée" title="Liste numérotée">1. Liste</button>
        <button type="button" data-rich-text-command="formatBlock" data-rich-text-value="blockquote" aria-label="Citation" title="Citation">❝</button>

        <span class="rich-text-editor__separator" aria-hidden="true"></span>

        <button type="button" data-rich-text-link aria-label="Ajouter un lien" title="Ajouter un lien">Lien</button>
        <button type="button" data-rich-text-command="unlink" aria-label="Retirer le lien" title="Retirer le lien">Délier</button>
        <button type="button" data-rich-text-command="removeFormat" aria-label="Effacer la mise en forme" title="Effacer la mise en forme">Effacer</button>
    </div>

    <div id="{{ $editorId }}"
         class="rich-text-editor__content"
         contenteditable="true"
         role="textbox"
         aria-multiline="true"
         aria-required="{{ $required ? 'true' : 'false' }}"
         data-placeholder="{{ $placeholder }}"
         data-rich-text-content>{!! $renderedValue !!}</div>

    <textarea name="{{ $name }}" data-rich-text-input hidden>{{ $renderedValue }}</textarea>
    <p class="rich-text-editor__error" data-rich-text-error hidden>Ce contenu est obligatoire.</p>
</div>

@once
    <style>
        .rich-text-editor {
            margin-bottom: 16px;
        }

        .rich-text-editor__label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            font-weight: 600;
        }

        .rich-text-editor__toolbar {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 5px;
            padding: 8px;
            border: 1px solid rgba(127, 127, 127, .35);
            border-bottom: 0;
            border-radius: 8px 8px 0 0;
            background: rgba(127, 127, 127, .08);
        }

        .rich-text-editor__toolbar button,
        .rich-text-editor__select {
            min-height: 34px;
            padding: 6px 10px;
            border: 1px solid rgba(127, 127, 127, .35);
            border-radius: 5px;
            color: inherit;
            background: transparent;
            cursor: pointer;
            font: inherit;
            font-size: 13px;
        }

        .rich-text-editor__toolbar button:hover,
        .rich-text-editor__toolbar button:focus,
        .rich-text-editor__select:hover,
        .rich-text-editor__select:focus {
            border-color: #e52900;
            outline: none;
        }

        .rich-text-editor__separator {
            width: 1px;
            height: 24px;
            margin: 0 3px;
            background: rgba(127, 127, 127, .35);
        }

        .rich-text-editor__content {
            min-height: 190px;
            padding: 14px;
            overflow: auto;
            border: 1px solid rgba(127, 127, 127, .35);
            border-radius: 0 0 8px 8px;
            line-height: 1.6;
            outline: none;
        }

        .rich-text-editor__content:focus {
            border-color: #e52900;
            box-shadow: 0 0 0 2px rgba(229, 41, 0, .12);
        }

        .rich-text-editor__content:empty::before {
            color: rgba(127, 127, 127, .8);
            content: attr(data-placeholder);
            pointer-events: none;
        }

        .rich-text-editor__content h2,
        .rich-text-editor__content h3,
        .rich-text-editor__content p {
            margin-top: 0;
        }

        .rich-text-editor__content blockquote {
            margin-left: 0;
            padding-left: 16px;
            border-left: 3px solid #e52900;
        }

        .rich-text-editor.has-error .rich-text-editor__content {
            border-color: #e52900;
        }

        .rich-text-editor__error {
            margin: 6px 0 0;
            color: #e52900;
            font-size: 13px;
        }

        @media (max-width: 767px) {
            .rich-text-editor__separator {
                display: none;
            }

            .rich-text-editor__toolbar button,
            .rich-text-editor__select {
                flex: 1 1 auto;
            }
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('[data-rich-text-editor]').forEach(function (wrapper) {
                const editor = wrapper.querySelector('[data-rich-text-content]');
                const input = wrapper.querySelector('[data-rich-text-input]');
                const error = wrapper.querySelector('[data-rich-text-error]');
                const form = wrapper.closest('form');

                const sync = function () {
                    input.value = editor.innerHTML.trim();

                    if (editor.innerText.replace(/\u00a0/g, ' ').trim() !== '') {
                        wrapper.classList.remove('has-error');
                        error.hidden = true;
                    }
                };

                const runCommand = function (command, value) {
                    editor.focus();
                    document.execCommand(command, false, value || null);
                    sync();
                };

                wrapper.querySelectorAll('[data-rich-text-command]').forEach(function (button) {
                    button.addEventListener('mousedown', function (event) {
                        event.preventDefault();
                    });

                    button.addEventListener('click', function () {
                        runCommand(button.dataset.richTextCommand, button.dataset.richTextValue);
                    });
                });

                const blockSelector = wrapper.querySelector('[data-rich-text-block]');
                blockSelector.addEventListener('change', function () {
                    runCommand('formatBlock', blockSelector.value);
                    blockSelector.value = 'p';
                });

                wrapper.querySelector('[data-rich-text-link]').addEventListener('mousedown', function (event) {
                    event.preventDefault();
                });

                wrapper.querySelector('[data-rich-text-link]').addEventListener('click', function () {
                    const selection = window.getSelection();

                    if (!selection || selection.isCollapsed) {
                        window.alert('Sélectionnez d’abord le texte à transformer en lien.');
                        return;
                    }

                    const url = window.prompt('Adresse du lien (https://…) :');

                    if (url) {
                        runCommand('createLink', url.trim());
                    }
                });

                editor.addEventListener('input', sync);
                editor.addEventListener('blur', sync);
                editor.addEventListener('paste', function (event) {
                    event.preventDefault();
                    const text = (event.clipboardData || window.clipboardData).getData('text/plain');
                    document.execCommand('insertText', false, text);
                    sync();
                });

                if (form) {
                    form.addEventListener('submit', function (event) {
                        sync();

                        if (wrapper.dataset.required === 'true' && editor.innerText.replace(/\u00a0/g, ' ').trim() === '') {
                            event.preventDefault();
                            wrapper.classList.add('has-error');
                            error.hidden = false;
                            editor.focus();
                        }
                    });
                }
            });
        });
    </script>
@endonce