@props([
    'name',
    'label'       => null,
    'placeholder' => null,
    'rows'        => 4,
    'cols'        => null,
    'class'       => '',
    'value'       => null,
    'required'    => true,
    'readonly'    => false,
    'disabled'    => false,
    'tooltip'     => null,
    'editor'      => false,
    'toolbar'     => false,
])

@php
    $textareaId = $name;
@endphp

<div class="mb-3 {{ $class }}">
    @if($label)
    <label for="{{ $textareaId }}" class="form-label">
        {{ $label }}
        @if ($tooltip)
        <i class="bi bi-question-circle text-muted ms-1"
           data-bs-toggle="tooltip"
           title="{{ $tooltip }}"
           style="cursor: pointer;"></i>
        @endif
    </label>
    @endif

    {{-- Hide textarea if in editor mode --}}
    <textarea
        name="{{ $name }}"
        id="{{ $textareaId }}"
        class="form-control @error($name) is-invalid @enderror"
        placeholder="{{ $placeholder }}"
        rows="{{ $rows }}"
        @if($cols) cols="{{ $cols }}" @endif
        @if($required) data-required="1" @endif
        @if($readonly) readonly @endif
        @if($disabled) disabled @endif
        style="@if($editor) display:none; @endif"
    >{{ old($name, $value) }}</textarea>

    @error($name)
    <div class="text-danger small mt-1">{{ $message }}</div>
    @enderror
</div>

@if ($editor)
@once
    {{-- Load CSS first (very important) --}}
    <link rel="stylesheet" href="{{ asset('build/assets/libs/quill/quill.snow.css') }}">
    {{-- Quill JS after CSS --}}
    <script src="{{ asset('build/assets/libs/quill/quill.js') }}"></script>

    <style>
        /* Make sure toolbar/pickers are visible (override accidental global rules) */
        .quill-editor .ql-toolbar { display:flex !important; flex-wrap:wrap; gap:.25rem; }
        .quill-editor .ql-toolbar .ql-formats { display:inline-flex; align-items:center; gap:.5rem; }

        /* Ensure picker label (the dropdown icon) is visible */
        .ql-toolbar .ql-picker-label { display: inline-flex !important; align-items:center !important; }

        /* Ensure the picker options area is visible and swatches not clipped */
        .ql-picker.ql-color, .ql-picker.ql-background { min-width: 36px !important; z-index: 9999 !important; }
        .ql-picker.ql-color .ql-picker-options button,
        .ql-picker.ql-background .ql-picker-options button {
            width: 18px !important;
            height: 18px !important;
            padding: 0 !important;
            border-radius: 3px !important;
            box-shadow: none !important;
            border: 1px solid rgba(0,0,0,.06) !important;
            background-clip: padding-box !important;
        }
    </style>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const textarea = document.getElementById('{{ $textareaId }}');
        const wrapper  = document.createElement('div');
        wrapper.classList.add('quill-editor');
        if ({{ $toolbar ? 'true' : 'false' }}) wrapper.classList.add('has-toolbar');

        textarea.parentNode.insertBefore(wrapper, textarea.nextSibling);

        const modules = {};
        if ({{ $toolbar ? 'true' : 'false' }}) {
            modules.toolbar = [
                [{ header: [1,2,3,false] }],
                ['bold','italic','underline','strike'],
                [{ color: [] }, { background: [] }], // <-- color + background pickers
                [{ list:'ordered' },{ list:'bullet' }],
                ['blockquote','code-block'],
                [{ align: [] }],
                ['link','image','video'],
                ['clean']
            ];
        }

        const formats = [
            'header','bold','italic','underline','strike',
            'color','background',
            'list','bullet','blockquote','code-block',
            'align','link','image','video'
        ];

        // create Quill AFTER CSS is loaded (we already linked CSS above)
        const quill = new Quill(wrapper, { theme: 'snow', modules: modules, formats: formats });

        // populate and keep textarea in sync
        quill.root.innerHTML = textarea.value || '';
        quill.on('text-change', () => textarea.value = quill.root.innerHTML);

        setTimeout(() => {
            const colorPicker = wrapper.querySelector('.ql-picker.ql-color');
            if (colorPicker && colorPicker.querySelectorAll('.ql-picker-options button').length === 0) {
                const label = colorPicker.querySelector('.ql-picker-label');
                if (label) { label.click(); setTimeout(()=>label.click(), 60); }
            }
        }, 150);

        if (textarea.dataset.required === '1') {
            document.querySelectorAll('form').forEach(form => {
                form.addEventListener('submit', function(e) {
                    if (!form.contains(textarea)) return;
                    const text = quill.getText().trim();
                    if (text.length === 0) {
                        e.preventDefault(); e.stopImmediatePropagation();
                        const msg = 'Please enter description for "{{ $label ?? $name }}".';
                        if (window.showAlertModal) window.showAlertModal(msg); else alert(msg);
                        quill.focus();
                    }
                });
            });
        }
    });
    </script>
@endonce

@endif