@props([
    /**
     * Livewire wire:model-style property path. The Alpine
     * bridge writes the editor's rendered HTML back to this
     * property via `$wire.set(path, html, false)` — landing
     * the value in Livewire state without firing a network
     * request. Save reads the up-to-date value on click.
     */
    'model' => null,
    /**
     * Initial HTML content for the editor. Passed as a Blade
     * prop instead of being read via `$wire.get()` at init
     * time — server-side rendering puts existing body content
     * on the editor surface from the very first paint.
     */
    'initial' => '',
    /** Placeholder text shown when the editor is empty. */
    'placeholder' => null,
    /**
     * data-* marker for tests + the placeholder picker.
     */
    'testId' => 'rich-editor',
])

{{--
    Native contenteditable mini-editor.

    Replaces the previous TipTap-based implementation. Pros:
      - Zero JS deps.
      - document.execCommand is widely supported for the
        simple commands we need (bold/italic/h2/h3/lists/
        link).
      - HTML output is exactly what the sanitizer and
        self-help `.sh-prose` renderer already expect.
      - Easy to debug: the editor's state IS the
        contenteditable's innerHTML.

    Architecture:
     1. `wire:ignore` on the outer wrapper. Livewire never
        morphs the editor subtree after first render.
     2. `x-data="miniEditor(...)"` on an inner element so
        wire:ignore + Alpine bindings aren't on the same
        node (Livewire 3 has subtle bugs there).
     3. Initial content arrives via the `:initial` prop.
        First paint shows the right body content.
     4. Write-back via `$wire.set(model, html, false)` — no
        network request per keystroke.
     5. Step swap via `wire:key` on the wrapper (operator's
        responsibility at the call site). Different key →
        Livewire replaces the subtree → Alpine reinits with
        the new step's content. Same key → wrapper survives.
--}}
<div
    wire:ignore
    data-test="{{ $testId }}"
    class="rounded-md border border-zinc-300 bg-white shadow-sm focus-within:border-zinc-500 dark:border-zinc-700 dark:bg-zinc-950 dark:focus-within:border-zinc-400"
>
    <div
        x-data="miniEditor({ model: @js($model), initial: @js((string) $initial), placeholder: @js((string) $placeholder) })"
        x-init="init()"
        x-on:destroy="destroy()"
        {{-- Stable lookup hook for the placeholder picker. --}}
        data-mini-root
        {{-- Flips to "true" after init() — useful for manual
             debugging. --}}
        data-mini-ready="false"
        data-mini-model="{{ $model ?? '' }}"
    >
        <div
            class="flex flex-wrap items-center gap-1 border-b border-zinc-200 px-2 py-1.5 dark:border-zinc-800"
            data-test="{{ $testId }}-toolbar"
        >
            @php
                $btnBase = 'inline-flex items-center justify-center rounded px-2 py-1 text-xs font-medium text-zinc-600 transition hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-300 dark:hover:bg-zinc-800 dark:hover:text-zinc-100';
                $activeOn = 'bg-zinc-900 text-white hover:bg-zinc-900 hover:text-white dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-100 dark:hover:text-zinc-900';
            @endphp

            {{--
                Buttons fire commands via the Alpine bridge.
                `x-on:mousedown.prevent` keeps the
                contenteditable's selection alive — without
                it, the click steals focus and the cursor
                jumps. We use `mousedown` + `prevent` then
                `click` to actually fire the command after
                the cursor is preserved.
            --}}
            <button type="button"
                x-on:mousedown.prevent=""
                x-on:click="toggleBold()"
                x-bind:class="state.bold ? '{{ $activeOn }}' : ''"
                class="{{ $btnBase }} font-bold"
                data-test="rich-editor-bold"
                aria-label="{{ __('Bold') }}"
                title="{{ __('Bold (Cmd/Ctrl + B)') }}"
            >B</button>

            <button type="button"
                x-on:mousedown.prevent=""
                x-on:click="toggleItalic()"
                x-bind:class="state.italic ? '{{ $activeOn }}' : ''"
                class="{{ $btnBase }} italic"
                data-test="rich-editor-italic"
                aria-label="{{ __('Italic') }}"
                title="{{ __('Italic (Cmd/Ctrl + I)') }}"
            >I</button>

            <span class="mx-0.5 h-4 w-px bg-zinc-200 dark:bg-zinc-700"></span>

            <button type="button"
                x-on:mousedown.prevent=""
                x-on:click="toggleH2()"
                x-bind:class="state.h2 ? '{{ $activeOn }}' : ''"
                class="{{ $btnBase }}"
                data-test="rich-editor-h2"
                aria-label="{{ __('Heading 2') }}"
            >H2</button>

            <button type="button"
                x-on:mousedown.prevent=""
                x-on:click="toggleH3()"
                x-bind:class="state.h3 ? '{{ $activeOn }}' : ''"
                class="{{ $btnBase }}"
                data-test="rich-editor-h3"
                aria-label="{{ __('Heading 3') }}"
            >H3</button>

            <span class="mx-0.5 h-4 w-px bg-zinc-200 dark:bg-zinc-700"></span>

            <button type="button"
                x-on:mousedown.prevent=""
                x-on:click="toggleBulletList()"
                x-bind:class="state.ul ? '{{ $activeOn }}' : ''"
                class="{{ $btnBase }}"
                data-test="rich-editor-bullet-list"
                aria-label="{{ __('Bulleted list') }}"
                title="{{ __('Bulleted list') }}"
            >
                <svg viewBox="0 0 16 16" class="size-3.5" fill="currentColor" aria-hidden="true"><circle cx="2" cy="4" r="1.2"/><circle cx="2" cy="8" r="1.2"/><circle cx="2" cy="12" r="1.2"/><rect x="5" y="3" width="9" height="2" rx="0.5"/><rect x="5" y="7" width="9" height="2" rx="0.5"/><rect x="5" y="11" width="9" height="2" rx="0.5"/></svg>
            </button>

            <button type="button"
                x-on:mousedown.prevent=""
                x-on:click="toggleOrderedList()"
                x-bind:class="state.ol ? '{{ $activeOn }}' : ''"
                class="{{ $btnBase }}"
                data-test="rich-editor-ordered-list"
                aria-label="{{ __('Numbered list') }}"
                title="{{ __('Numbered list') }}"
            >
                <svg viewBox="0 0 16 16" class="size-3.5" fill="currentColor" aria-hidden="true"><text x="0" y="6" font-size="5" font-family="ui-monospace,SFMono-Regular,monospace" font-weight="700">1</text><text x="0" y="10" font-size="5" font-family="ui-monospace,SFMono-Regular,monospace" font-weight="700">2</text><text x="0" y="14" font-size="5" font-family="ui-monospace,SFMono-Regular,monospace" font-weight="700">3</text><rect x="5" y="3" width="9" height="2" rx="0.5"/><rect x="5" y="7" width="9" height="2" rx="0.5"/><rect x="5" y="11" width="9" height="2" rx="0.5"/></svg>
            </button>

            <span class="mx-0.5 h-4 w-px bg-zinc-200 dark:bg-zinc-700"></span>

            <button type="button"
                x-on:mousedown.prevent=""
                x-on:click="toggleLink()"
                x-bind:class="state.link ? '{{ $activeOn }}' : ''"
                class="{{ $btnBase }}"
                data-test="rich-editor-link"
                aria-label="{{ __('Insert link') }}"
                title="{{ __('Insert / edit link') }}"
            >
                <svg viewBox="0 0 24 24" class="size-3.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
            </button>
        </div>

        {{--
            The contenteditable surface. `x-on:input` syncs
            HTML on every keystroke; `x-on:blur` does a final
            sync. The `mini-prose` CSS class controls visible
            styling of strong / em / h2 / h3 / ul / ol / li / a
            inside the editor.

            `data-mini-placeholder` exposes the placeholder
            text so a CSS `:empty::before` pseudo-element can
            render it without poisoning the editor's HTML.
        --}}
        <div
            data-mini-surface
            data-test="{{ $testId }}-surface"
            contenteditable="true"
            x-on:input="onInput()"
            x-on:blur="onBlur()"
            x-on:focus="refreshState()"
            class="mini-prose min-h-[140px] cursor-text p-3 text-sm leading-relaxed text-zinc-900 focus:outline-none dark:text-zinc-100"
            data-mini-placeholder="{{ $placeholder ?? __('Type the customer-facing copy for this step…') }}"
        ></div>
    </div>
</div>