@props([
    'model',                   // Livewire property path, e.g. "body"
    'placeholder' => '',       // empty-state text
    'disabled'    => false,    // read-only mode
    'minHeight'   => 200,      // height of the writing area, in px
])
{{--
    RedFamosa's rich text field. Ported from Zentra (saas-base), adapted to the
    RedFamosa design tokens (--color-*), base classes (.rf-btn/.rf-input/
    .rf-textarea) and the class-based `.dark` theme.

    A drop-in replacement for <textarea class="rf-textarea">: give it the same
    Livewire property the textarea was bound to and nothing else about the form
    changes.

        <x-rich-text model="body" :minHeight="240" />

    WHAT IT PRODUCES. HTML, limited to what App\Support\RichText allows: bold,
    italic, underline, strikethrough, two heading levels, both list kinds,
    quote, inline code and links. The editor cannot make anything else, and the
    server would strip it if it could — the two lists are kept in step on
    purpose, so what the admin sees in the toolbar is what survives the save.

    WHY wire:ignore. Livewire re-renders by morphing the real DOM against fresh
    server HTML. The editor exists only in the browser — a contenteditable tree
    the server never sent — so the first morph would tear it out from under the
    caret. wire:ignore fences off the whole subtree (not wire:ignore.self,
    which protects the node and not its children); the value then travels as
    DATA through $wire instead of as markup.

    @see resources/js/editor.js                            the Alpine/Quill half
    @see resources/views/components/rich-html.blade.php    printing it back out
--}}
@php
    /*
     | Toolbar glyphs, inline and stroke-only: 24×24 box, fill:none,
     | currentColor. They live here rather than in the shared sprite because
     | they are the only twelve icons in the product that mean nothing outside
     | an editor.
     */
    $glyphs = [
        'bold'      => '<path d="M14 12a4 4 0 0 1 0 8H6V4h7a4 4 0 0 1 0 8"/>',
        'italic'    => '<path d="M19 4h-9M14 20H5M15 4 9 20"/>',
        'underline' => '<path d="M6 4v6a6 6 0 0 0 12 0V4M4 20h16"/>',
        'strike'    => '<path d="M16 4H9a3 3 0 0 0-2.83 4M14 12a4 4 0 0 1 0 8H6M4 12h16"/>',
        'heading'   => '<path d="M4 12h8M4 18V6M12 18V6"/><path d="M21 18h-4c0-4 4-3 4-6 0-1.5-2-2.5-4-1"/>',
        'subhead'   => '<path d="M4 12h8M4 18V6M12 18V6"/><path d="M17.5 10.5c1.7-1 3.5 0 3.5 1.5a2 2 0 0 1-2 2M17 17.5c2 1.5 4 .3 4-1.5a2 2 0 0 0-2-2"/>',
        'bullets'   => '<path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/>',
        'numbers'   => '<path d="M10 6h11M10 12h11M10 18h11M4 4h1v4M4 8h2M6 18H4c0-1 2-1.8 2-2.8S5 14 4 14.4"/>',
        'quote'     => '<path d="M9 7H5a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h2v1a2 2 0 0 1-2 2H4M19 7h-4a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h2v1a2 2 0 0 1-2 2h-1"/>',
        'code'      => '<path d="m16 18 6-6-6-6M8 6l-6 6 6 6"/>',
        'link'      => '<path d="M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7"/><path d="M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7"/>',
        'clear'     => '<path d="M4 7V4h16v3M5 20h6M13 4 8 20"/><path d="m15 15 5 5M20 15l-5 5"/>',
    ];

    /*
     | Toolbar groups: [Quill control class, value or null, glyph, label].
     | The ql-* class is the whole contract with Quill — its toolbar module
     | reads it off the button and wires the click and the active state itself.
     */
    $groups = [
        [
            ['ql-bold',       null,      'bold',      __('Bold')],
            ['ql-italic',     null,      'italic',    __('Italic')],
            ['ql-underline',  null,      'underline', __('Underline')],
            ['ql-strike',     null,      'strike',    __('Strikethrough')],
        ],
        [
            ['ql-header',     '2',       'heading',   __('Heading')],
            ['ql-header',     '3',       'subhead',   __('Subheading')],
        ],
        [
            ['ql-list',       'bullet',  'bullets',   __('Bulleted list')],
            ['ql-list',       'ordered', 'numbers',   __('Numbered list')],
        ],
        [
            ['ql-blockquote', null,      'quote',     __('Quote')],
            ['ql-code',       null,      'code',      __('Inline code')],
        ],
        [
            ['ql-link',       null,      'link',      __('Link')],
            ['ql-clean',      null,      'clear',     __('Clear formatting')],
        ],
    ];
@endphp

<div {{ $attributes->merge(['class' => 'rte']) }}
     wire:ignore
     style="--rte-min:{{ (int) $minHeight }}px"
     x-data="rfRichText({
         model: @js($model),
         placeholder: @js($placeholder),
         readOnly: @js((bool) $disabled),
     })"
     {{-- linkOpen counts as focus: the caret is in the popover's own input,
          and dropping the ring there reads as the field losing your place. --}}
     x-bind:class="{ 'is-focus': focused || linkOpen, 'is-readonly': readOnly }">

    <div class="rte-bar" x-ref="toolbar" role="toolbar" aria-label="{{ __('Text formatting') }}" x-show="!failed">
        @foreach($groups as $group)
            <div class="rte-group">
                @foreach($group as [$control, $value, $glyph, $label])
                    <button type="button" class="{{ $control }}" @if($value) value="{{ $value }}" @endif
                            title="{{ $label }}" aria-label="{{ $label }}" aria-pressed="false"
                            @disabled($disabled)>
                        <svg viewBox="0 0 24 24" width="20" height="20" class="ic" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">{!! $glyphs[$glyph] !!}</svg>
                    </button>
                @endforeach
            </div>
        @endforeach
    </div>

    {{-- Quill's own link control calls window.prompt(): untranslatable, styled
         by the browser, and it names the host in its title bar. This replaces
         it, in the product's own language and colours. --}}
    <div class="rte-link" x-show="linkOpen" x-cloak x-on:keydown.escape.stop="closeLink()">
        <label x-bind:for="$id('rte-url')">{{ __('Link URL') }}</label>
        <input x-bind:id="$id('rte-url')" x-ref="linkInput" x-model="linkUrl" class="rf-input"
               type="text" inputmode="url" placeholder="https://" dir="ltr"
               autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
               data-lpignore="true" data-1p-ignore data-form-type="other"
               x-on:keydown.enter.prevent="applyLink()">
        <div class="rte-link-act">
            <button type="button" class="rf-btn rf-btn-sm rf-btn-secondary" x-on:click="closeLink()">{{ __('Cancel') }}</button>
            <button type="button" class="rf-btn rf-btn-sm rf-btn-secondary" x-show="onLink" x-on:click="removeLink()">{{ __('Remove link') }}</button>
            <button type="button" class="rf-btn rf-btn-sm rf-btn-primary" x-on:click="applyLink()">{{ __('Apply') }}</button>
        </div>
    </div>

    <div class="rte-canvas" x-ref="canvas" x-show="!failed"></div>

    {{-- Visible only if the editor chunk fails to load. It edits the same
         Livewire property, so a network hiccup costs the formatting toolbar,
         not the text. --}}
    <textarea class="rf-textarea rte-fallback" x-show="failed" x-cloak x-model="value"
              x-on:input="push(value)" style="min-height:{{ (int) $minHeight }}px"
              autocomplete="off" spellcheck="false" @disabled($disabled)></textarea>
</div>