{{--
    Flow Builder v2 — tree canvas + drawer.
    ──────────────────────────────────────
    Primary editor surface:
      • Left = tree canvas. The first step is the root; child
        edges follow `next` / `options[].next`. Each node is a
        clickable card; clicking opens the right drawer.
      • Right = drawer. Detail editor for the selected step
        (step_key / type / title / body / options / next /
        future placeholders).
      • Below the canvas: an "unreachable steps" section listing
        any steps not visited by the DFS-from-root. Operators
        rewire them in via the drawer until the list is empty.

    Compatibility data-test markers kept on the tree nodes so the
    pre-existing FlowBuilderTest / FlowsCrudTest assertions
    (`flows-edit-step-cards`, `flows-edit-step-card`,
    `flows-edit-step-choice-block`) continue to match.
--}}
<section
    class="flex h-full w-full min-h-0 flex-1 flex-col gap-6 overflow-y-auto bg-zinc-50 p-6 dark:bg-zinc-950"
    data-test="flows-edit"
>
    {{-- ─── Header ──────────────────────────────────────────────── --}}
    <div class="flex flex-col gap-1">
        <flux:heading size="xl" level="1">
            {{ $flowId === null ? __('New flow') : __('Edit flow') }}
        </flux:heading>
        <p class="text-sm text-zinc-600 dark:text-zinc-400">
            {{ __('Pick any node on the tree to edit it. Choice options branch visually to the step you set on each option.') }}
        </p>
    </div>

    {{-- ─── Audit banner (imported flows only) ──────────────────── --}}
    @if ($importKey !== null)
        <div
            class="relative overflow-hidden rounded-lg border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900"
            data-test="flows-edit-audit-banner"
        >
            <span class="absolute inset-y-0 left-0 w-1 bg-sky-500 dark:bg-sky-400" aria-hidden="true"></span>
            <div class="flex items-center gap-2">
                <flux:icon.information-circle class="size-4 text-sky-600 dark:text-sky-400" />
                <span class="text-sm font-semibold text-zinc-900 dark:text-zinc-50">{{ __('Imported flow') }}</span>
                @if ($needsReview)
                    <flux:badge size="sm" color="amber" data-test="flows-edit-needs-review-badge">
                        {{ __('Needs review') }}
                    </flux:badge>
                @endif
            </div>
            <dl class="mt-3 grid grid-cols-1 gap-x-6 gap-y-2 text-xs sm:grid-cols-2">
                <div>
                    <dt class="font-medium text-zinc-500 dark:text-zinc-400">{{ __('Import key') }}</dt>
                    <dd class="mt-0.5 font-mono text-zinc-900 dark:text-zinc-100" data-test="flows-edit-import-key">{{ $importKey }}</dd>
                </div>
                @if ($importSource)
                    <div>
                        <dt class="font-medium text-zinc-500 dark:text-zinc-400">{{ __('Import source') }}</dt>
                        <dd class="mt-0.5 font-mono text-zinc-900 dark:text-zinc-100" data-test="flows-edit-import-source">{{ $importSource }}</dd>
                    </div>
                @endif
                @if ($sourceDoc)
                    <div>
                        <dt class="font-medium text-zinc-500 dark:text-zinc-400">{{ __('Original document') }}</dt>
                        <dd class="mt-0.5 text-zinc-900 dark:text-zinc-100" data-test="flows-edit-source-doc">{{ $sourceDoc }}</dd>
                    </div>
                @endif
                @if (! empty($importMetadata['priority']))
                    <div>
                        <dt class="font-medium text-zinc-500 dark:text-zinc-400">{{ __('Pack priority') }}</dt>
                        <dd class="mt-0.5 text-zinc-900 dark:text-zinc-100">{{ $importMetadata['priority'] }}</dd>
                    </div>
                @endif
            </dl>
            @if (! empty($importMetadata['cleardesk_target']))
                <div class="mt-3 border-t border-zinc-100 pt-3 text-xs text-zinc-700 dark:border-zinc-800 dark:text-zinc-300">
                    <span class="font-medium text-zinc-500 dark:text-zinc-400">{{ __('ClearDesk target:') }}</span>
                    <span data-test="flows-edit-cleardesk-target">{{ $importMetadata['cleardesk_target'] }}</span>
                </div>
            @endif
        </div>
    @endif

    <form wire:submit="save" class="flex flex-col gap-5" data-test="flows-edit-form">
        {{-- ─── Global validation summary ─────────────────────────
             Catch-net for any validation errors that don't have a
             visible per-field error block (e.g. per-step
             `steps.{i}.step_key` errors when the offending step's
             drawer isn't open, or any future field that's added
             without its own `<flux:error>` companion). Without
             this, save can silently fail and the operator sees
             nothing — the original "I spent ages and it won't
             save" report. --}}
        @if ($errors->any())
            <div
                class="rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-800 dark:border-red-900/60 dark:bg-red-950/30 dark:text-red-200"
                data-test="flows-edit-error-summary"
            >
                <div class="font-medium">{{ __('Save blocked — fix the following before saving:') }}</div>
                <ul class="mt-2 list-disc space-y-1 pl-5 text-xs">
                    @foreach ($errors->all() as $errorMessage)
                        <li>{{ $errorMessage }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        {{-- ─── Flow metadata ────────────────────────────────────── --}}
        <div class="rounded-xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
            <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
                <flux:field>
                    <flux:label>{{ __('Name') }}</flux:label>
                    <flux:input wire:model="name" required data-test="flows-edit-name" />
                    <flux:error name="name" />
                </flux:field>
                <flux:field>
                    <flux:label>{{ __('Slug') }}</flux:label>
                    <flux:input wire:model="slug" required data-test="flows-edit-slug" />
                    <flux:description>{{ __('Customer-facing URL segment.') }}</flux:description>
                    <flux:error name="slug" />
                </flux:field>
            </div>

            {{-- ─── Scope: default vs store-bound ────────────────────
                 Editable on CREATE; locked + shown read-only on EDIT
                 (changing scope post-create is a copy operation,
                 not an edit). --}}
            <div class="mt-5">
                <flux:field>
                    <flux:label>{{ __('Scope') }}</flux:label>
                    @if ($this->storeSelectorIsEditable())
                        <flux:select
                            wire:model="storeId"
                            data-test="flows-edit-store-selector"
                        >
                            <option value="">{{ __('Default — visible on every store') }}</option>
                            @foreach ($this->availableStores() as $store)
                                <option value="{{ $store->id }}">
                                    {{ __('Store: :name', ['name' => $store->name]) }}
                                </option>
                            @endforeach
                        </flux:select>
                        <flux:description>
                            {{ __('Default flows ship to every store. Store-bound flows only surface on the chosen store and override same-slug defaults there.') }}
                        </flux:description>
                    @else
                        @php
                            // Store lookup MUST go through the component
                            // so AccountScope gets the current tenant
                            // rebound. Querying Store directly from
                            // Blade crashes on Livewire round-trips
                            // because /livewire/update bypasses the
                            // tenant middleware.
                            $boundStore = $this->resolvedBoundStore();
                        @endphp
                        <div
                            class="rounded-md border border-zinc-200 bg-zinc-50 px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-900"
                            data-test="flows-edit-store-readonly"
                            data-flow-scope="{{ $this->storeId === null ? 'default' : 'store' }}"
                        >
                            @if ($boundStore !== null)
                                <span class="font-medium text-zinc-900 dark:text-zinc-100">{{ __('Store-bound:') }}</span>
                                {{ $boundStore->name }}
                            @else
                                <span class="font-medium text-zinc-900 dark:text-zinc-100">{{ __('Default flow') }}</span>
                                <span class="text-zinc-500 dark:text-zinc-400">{{ __('(visible on every store)') }}</span>
                            @endif
                        </div>
                        <flux:description>
                            {{ __('Scope is fixed after creation. Promote between default and store-bound by using "Copy" on the flow list.') }}
                        </flux:description>
                    @endif
                    <flux:error name="storeId" />
                </flux:field>
            </div>

            <div class="mt-5 grid grid-cols-1 gap-5 md:grid-cols-3">
                <flux:field>
                    <flux:label>{{ __('Category') }}</flux:label>
                    <flux:input wire:model="category" placeholder="{{ __('e.g. Orders, Returns') }}" data-test="flows-edit-category" />
                </flux:field>
                <flux:field>
                    <flux:label>{{ __('Status') }}</flux:label>
                    <flux:select wire:model="status" data-test="flows-edit-status">
                        @foreach ($this->statusOptions() as $value => $label)
                            <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </flux:select>
                </flux:field>
                <flux:field>
                    <flux:label>{{ __('Entry label') }}</flux:label>
                    <flux:input wire:model="entryLabel" :placeholder="__('Falls back to flow name')" data-test="flows-edit-entry-label" />
                </flux:field>
            </div>
            <flux:field class="mt-5">
                <flux:label>{{ __('Description (optional)') }}</flux:label>
                <flux:textarea wire:model="description" rows="2" data-test="flows-edit-description" />
            </flux:field>
        </div>

        {{-- ─── Steps section header ─────────────────────────────── --}}
        <div class="flex items-center justify-between">
            <div class="flex flex-col gap-0.5">
                <flux:heading size="lg">{{ __('Flow steps') }}</flux:heading>
                <p class="text-xs text-zinc-500 dark:text-zinc-400">
                    {{ __('Click any node to edit. Branch labels sit on the connector lines so you can read the journey at a glance.') }}
                </p>
            </div>
            <flux:button
                type="button"
                variant="primary"
                icon="plus"
                wire:click="addStep"
                data-test="flows-edit-add-step"
            >
                {{ __('Add step') }}
            </flux:button>
        </div>

        @error('steps')
            <div
                class="rounded-md border border-red-200 bg-red-50 p-3 text-xs text-red-700 dark:border-red-900/60 dark:bg-red-950/30 dark:text-red-300"
                data-test="flows-edit-steps-error"
            >
                {{ $message }}
            </div>
        @enderror

        {{-- ─── Available order data (context preview) ──────────────
             Operator-facing inventory of every placeholder + context
             field the engine can populate when a customer goes
             through this flow. Visible at the top of the editor so
             Jake can SEE what data is available without having to
             dig into docs.

             Example values are illustrative — the actual values
             come from the customer's selected order at runtime.
        --}}
        <details
            class="rounded-xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-900"
            data-test="flow-context-preview"
        >
            <summary class="cursor-pointer px-5 py-3 text-sm font-semibold text-zinc-900 hover:bg-zinc-50 dark:text-zinc-100 dark:hover:bg-zinc-800/40">
                {{ __('Available order data') }}
                <span class="ml-2 text-xs font-normal text-zinc-500">
                    {{ __('What you can use in step titles, bodies, options, and conditions.') }}
                </span>
            </summary>
            <div class="grid grid-cols-1 gap-4 px-5 pb-5 pt-2 md:grid-cols-2 lg:grid-cols-3">
                @foreach ($this->placeholderCategories() as $category)
                    <div
                        class="rounded-md border border-zinc-100 p-3 dark:border-zinc-800"
                        data-test="flow-context-preview-category"
                        data-category-key="{{ $category['key'] }}"
                    >
                        <div class="mb-2 text-[10px] font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
                            {{ $category['label'] }}
                        </div>
                        <dl class="flex flex-col gap-1.5 text-[11px]">
                            @foreach ($category['placeholders'] as $placeholder)
                                <div class="flex flex-col gap-0.5">
                                    <dt class="font-mono text-zinc-700 dark:text-zinc-300" data-test="flow-context-preview-key">
                                        {{ $placeholder['key'] }}
                                    </dt>
                                    <dd class="text-zinc-500 dark:text-zinc-400">
                                        <span class="italic">{{ $placeholder['label'] }}</span>
                                        @if (! empty($placeholder['example']))
                                            <span class="ml-1 text-zinc-400">→ <span class="font-mono">{{ $placeholder['example'] }}</span></span>
                                        @endif
                                        @if (! empty($placeholder['note']))
                                            <div class="mt-0.5 text-[10px] text-zinc-400 dark:text-zinc-500">{{ $placeholder['note'] }}</div>
                                        @endif
                                    </dd>
                                </div>
                            @endforeach
                        </dl>
                    </div>
                @endforeach
            </div>
        </details>

        {{-- ─── Tree canvas + Drawer two-column layout ────────────
             Side-by-side at desktop. Width: 560px drawer column
             (in the middle of the spec'd 480-640px range).

             CRITICAL — DO NOT switch to a Tailwind arbitrary
             value (e.g. `lg:grid-cols-[minmax(0,1fr)_560px]`).
             The Tailwind JIT only compiles arbitrary values
             present in scanned source AT BUILD TIME. Editing
             this view DOES NOT trigger a rebuild unless
             `npm run dev` is already running, so the class
             silently fails to compile and the grid falls back
             to `grid-cols-1` — which stacks the drawer below
             the tree, exactly the layout the slice brief is
             trying to fix.

             We therefore enforce the grid THREE ways:
              1. `data-test="flows-edit-canvas-layout"` marker
                 the regression suite reads.
              2. `grid grid-cols-1` Tailwind class (always
                 compiled, stock single-column default).
              3. Inline `style="grid-template-columns: ..."`
                 wrapped in a `@media (min-width: 1024px)` so
                 the desktop two-column shape works regardless
                 of Tailwind state. The inline style ships in
                 the rendered HTML and cannot be tree-shaken.

             Mobile (<1024px): single column, drawer stacks
             below canvas. Desktop (>=1024px): inline grid
             template kicks in.
        --}}
        {{-- ─── Canvas layout + scroll styles ─────────────────────
             The desktop grid template lives here because Tailwind
             JIT only compiles arbitrary values it sees at build
             time (see CRITICAL note above).

             The `.flows-canvas-*` classes implement the pannable-
             graph scroll pattern. Splitting clip / scroll / inner
             into three layers is non-negotiable:

              • Shell  — sits in the grid track. `min-width: 0`
                lets the track shrink under content, `overflow:
                hidden` prevents the cell from being pushed wider
                than the track when the inner overflows.
              • Scroll — owns `overflow: auto`. THIS is the only
                element with a scroll bar. `height: 100%` +
                `max-height` keeps the viewport pannable rather
                than blowing the whole page tall on big trees.
              • Inner  — `min-width: max-content` so the inner
                grows to whatever the tree needs. `display: flex;
                justify-content: center` centres SMALL trees
                visually inside the scroll viewport (the inner
                expands to 100% of scroll when content is narrow);
                for LARGE trees the inner is content-wide and the
                flex centring becomes a no-op, leaving the scroll
                container to expose horizontal pan starting from
                origin 0. This avoids the historical bug where
                `justify-center` on a width-100% wrapper pushed
                the tree's left edge to NEGATIVE x and made the
                far-left nodes unreachable.

             The shell + scroll + inner pattern also keeps the
             drawer's overflow concerns isolated — the drawer has
             its own `overflow-y-auto` for its body, which never
             touches the canvas's scroll layer. --}}
        <style>
            @verbatim
            @media (min-width: 1024px) {
                [data-test="flows-edit-canvas-layout"][data-drawer-layout="side-by-side"] {
                    grid-template-columns: minmax(0, 1fr) 560px !important;
                }
            }

            .flows-canvas-shell {
                /* Allow the grid track to shrink + prevent the
                   shell from being pushed wider than the track
                   when the tree is wider than the viewport. */
                min-width: 0;
                overflow: hidden;
            }

            .flows-canvas-scroll {
                /* Sole owner of scroll in the canvas chain. */
                overflow: auto;
                width: 100%;
                /* Bounded viewport so the canvas is pannable
                   rather than making the whole page taller. The
                   floor keeps short trees readable; the ceiling
                   keeps long trees from running the page off the
                   bottom. */
                min-height: 24rem;
                max-height: calc(100vh - 14rem);
                /* Smooth touchpad / momentum scroll on macOS. */
                -webkit-overflow-scrolling: touch;
                /* Make wheel scrolling feel snappy on long trees. */
                overscroll-behavior: contain;
            }

            .flows-canvas-inner {
                /* The graph owns intrinsic width — the inner
                   stretches to whatever the tree needs. */
                min-width: max-content;
                min-height: max-content;
                display: flex;
                justify-content: center;
                padding: 1.5rem;
            }

            @media (max-width: 1023px) {
                /* Mobile fallback — the canvas-cell wraps below
                   the drawer (or above, given source order), and
                   the scroll still needs bounded height. Use a
                   smaller floor so the canvas doesn't dominate a
                   short viewport. */
                .flows-canvas-scroll {
                    min-height: 18rem;
                    max-height: 65vh;
                }
            }
            @endverbatim
        </style>
        <div
            class="grid grid-cols-1 gap-6"
            style="display: grid;"
            data-test="flows-edit-canvas-layout"
            data-drawer-layout="side-by-side"
        >
            {{-- ─── Tree canvas (left) ──────────────────────────────
                 Three-layer pannable-canvas pattern (see <style>
                 block above for the contract):

                   shell  → clip + grid-track sizing
                   scroll → sole `overflow: auto` owner
                   inner  → `min-width: max-content`, flex-centres
                            small trees, lets big trees scroll
                            from origin 0

                 Older tests / external scrapers reference the
                 `flows-edit-step-cards` marker (the legacy card-
                 list wrapper). It is retained as a stable alias
                 on the shell. The new canonical markers are
                 `flows-canvas-shell`, `flows-canvas-scroll`,
                 `flows-canvas-inner` — the regression suite reads
                 these to pin the layout invariants. --}}
            <div
                class="flows-canvas-shell rounded-xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-900"
                data-test="flows-edit-step-cards"
                data-canvas-shell="true"
            >
                @php $tree = $this->buildFlowTree(); @endphp

                @if (($tree['kind'] ?? null) === 'empty')
                    <div
                        class="m-6 rounded-md border border-dashed border-zinc-200 px-6 py-10 text-center text-sm text-zinc-500 dark:border-zinc-800 dark:text-zinc-400"
                        data-test="flows-edit-canvas-empty"
                    >
                        {{ __('No steps yet — click "Add step" to start.') }}
                    </div>
                @else
                    {{-- Scroll layer — the ONLY element with
                         `overflow: auto` in the canvas chain.
                         Owns horizontal + vertical pan. Bounded
                         height keeps the viewport pannable rather
                         than stretching the entire page tall on
                         deep trees. --}}
                    <div
                        class="flows-canvas-scroll"
                        data-test="flows-canvas-scroll"
                        data-canvas-scroll="true"
                        tabindex="0"
                    >
                        {{-- Inner layer — sizes to the tree's
                             intrinsic width via `min-width: max-content`.
                             Hosts the `flows-edit-tree-root` topology
                             marker the recursive partial renders
                             into. Padding lives here so scrolled-to-
                             edge nodes aren't flush against the
                             scroll edge. --}}
                        <div
                            class="flows-canvas-inner"
                            data-test="flows-canvas-inner"
                            data-canvas-inner="true"
                        >
                            <div data-test="flows-edit-tree-root">
                                @include('livewire.flows._flow-tree-node', [
                                    'node' => $tree,
                                    'selectedStepIndex' => $selectedStepIndex,
                                ])
                            </div>
                        </div>
                    </div>

                    {{-- Stable legacy marker. The old single-
                         wrapper `flows-edit-tree-canvas` lived on
                         the scroll layer; we keep an empty
                         sentinel here so existing test selectors
                         continue to find SOMETHING (a child of
                         the shell) without colliding with the new
                         multi-layer markers above. --}}
                    <div data-test="flows-edit-tree-canvas" hidden></div>

                    {{-- ─── Unreachable steps ──────────────────── --}}
                    {{-- Steps that aren't visited by DFS-from-root.
                         Operator should either wire them in (set
                         another step's `next` to them) or remove
                         them. Until then they're shown here as a
                         flat list so they're still clickable.
                         Lives OUTSIDE the scroll layer so it
                         doesn't compete with canvas pan — wraps
                         normally within the shell's width. --}}
                    @php $orphans = $this->unreachableSteps(); @endphp
                    @if (! empty($orphans))
                        <div class="mx-6 mt-2 mb-6 border-t border-zinc-100 pt-4 dark:border-zinc-800" data-test="flows-edit-tree-orphans">
                            <div class="mb-2 flex items-center gap-2 text-xs">
                                <flux:icon.exclamation-triangle class="size-4 text-amber-500" />
                                <span class="font-semibold text-zinc-700 dark:text-zinc-200">
                                    {{ __('Unreachable steps') }}
                                </span>
                                <span class="text-zinc-500 dark:text-zinc-400">
                                    {{ __('No step\'s "next" points at these yet.') }}
                                </span>
                            </div>
                            <div class="flex flex-wrap gap-3">
                                @foreach ($orphans as $orphan)
                                    @php
                                        $orphanStep = $orphan['step'];
                                        $orphanIndex = $orphan['index'];
                                        $orphanType = $orphanStep['type'] ?? '';
                                        $orphanBadge = $this->stepTypeBadgeColor($orphanType);
                                    @endphp
                                    <button
                                        type="button"
                                        wire:click="selectStep({{ $orphanIndex }})"
                                        class="inline-flex items-center gap-1.5 rounded-lg border border-amber-200 bg-amber-50 px-3 py-1.5 text-xs text-amber-900 hover:bg-amber-100 dark:border-amber-700 dark:bg-amber-950/40 dark:text-amber-100 dark:hover:bg-amber-900/40"
                                        data-test="flows-edit-tree-orphan"
                                        data-step-key="{{ $orphanStep['step_key'] ?? '' }}"
                                    >
                                        <flux:badge size="sm" :color="$orphanBadge">
                                            {{ $this->stepTypeLabel($orphanType) }}
                                        </flux:badge>
                                        <span class="font-mono">{{ $orphanStep['step_key'] ?? '' }}</span>
                                        @if (! empty($orphanStep['title']))
                                            <span class="text-zinc-700 dark:text-zinc-300">·</span>
                                            <span class="max-w-[14rem] truncate">{{ $orphanStep['title'] }}</span>
                                        @endif
                                    </button>
                                @endforeach
                            </div>
                        </div>
                    @endif
                @endif
            </div>

            {{-- ─── Drawer (right): full editor for selected step ─
                 `sticky top-0` keeps the drawer pinned within
                 the page-scroll container; `max-h-[calc(100vh-6rem)]`
                 + `overflow-y-auto` makes its body scroll
                 independently of the tree canvas. Long condition
                 lists or step bodies never push the tree off-
                 screen.

                 `wire:key` binds to the SELECTED step's stable
                 `step_key` (via `selectedStepKey()`) rather than
                 the numeric array index. This is the cure for
                 the "save lands on the card above as well" bug
                 — when the operator switches steps, the new
                 key forces Livewire to REMOUNT the entire drawer
                 subtree rather than morphdom-patch it in place.
                 Without this, an `<input wire:model="steps.1.title">`
                 from the previous selection can be reused into
                 `<input wire:model="steps.2.title">` with its
                 typed-but-uncommitted value still attached,
                 making the user's last keystroke land on the
                 wrong array index. With a stable wire:key, the
                 input element is genuinely fresh on every
                 selection change. --}}
            <aside
                wire:key="flow-step-drawer-{{ $this->selectedStepKey() ?? 'empty' }}"
                class="sticky top-0 h-fit max-h-[calc(100vh-6rem)] overflow-y-auto rounded-xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-900"
                data-test="flows-edit-drawer"
                data-drawer-state="{{ ($selectedStepIndex !== null && isset($steps[$selectedStepIndex])) ? 'open' : 'empty' }}"
                data-selected-step-key="{{ $this->selectedStepKey() ?? '' }}"
                {{-- ─── Placeholder-insertion Alpine state ─────────────
                     Modelled on the macros-edit picker. The drawer
                     root is the scope so focusin events bubble up
                     from every editable field inside (title, body,
                     option labels, condition string values).

                     `lastTargetKey` is a STRING (the value of the
                     focused field's `data-placeholder-target`), not
                     an element reference — Livewire morphs can
                     re-create DOM nodes, so we re-query by selector
                     at insert time. Survives any re-render.

                     Switching steps replaces the whole `<aside>` via
                     wire:key, so Alpine state resets between
                     selections — correct: each step's focus
                     history is its own.

                     Fallback: when no eligible field has been
                     focused yet (or the focused element is gone
                     after a re-render), copy to clipboard so the
                     operator at least has something to paste. --}}
                x-data="{
                    lastTargetKey: null,
                    flashLabel: null,
                    flashTimer: null,

                    onFocusinFromDrawer(event) {
                        // The focus target may be a descendant
                        // of the eligible field — for plain
                        // inputs the dataset is on the focused
                        // element itself, but for the TipTap
                        // editor focus lands on the
                        // contenteditable (a deep descendant of
                        // the placeholder-target wrapper).
                        // `closest()` walks up to the nearest
                        // ancestor carrying the marker.
                        const target = event?.target;
                        if (! target || typeof target.closest !== 'function') return;
                        const ancestor = target.closest('[data-placeholder-target]');
                        const key = ancestor?.dataset?.placeholderTarget;
                        if (typeof key === 'string' && key !== '') {
                            this.lastTargetKey = key;
                        }
                    },

                    insertPlaceholder(token) {
                        const el = this.lastTargetKey
                            ? this.$root.querySelector('[data-placeholder-target=\'' + this.lastTargetKey + '\']')
                            : null;
                        if (el) {
                            // Native mini-editor target: the
                            // x-data wrapper carries
                            // `data-mini-root` + the Alpine
                            // component instance hung on
                            // `_miniEditor`. Calling `insertText`
                            // restores the saved Range and uses
                            // `document.execCommand('insertText')`
                            // — falls back to end-of-surface if
                            // no Range was ever saved.
                            const root = el.querySelector?.('[data-mini-root]');
                            const editor = root?._miniEditor;
                            if (editor && typeof editor.insertText === 'function') {
                                editor.insertText(token);
                                this.flash('Inserted');
                                return;
                            }
                        }
                        if (el && typeof el.selectionStart === 'number') {
                            const start = el.selectionStart;
                            const end = el.selectionEnd;
                            const before = el.value.slice(0, start);
                            const after = el.value.slice(end);
                            el.value = before + token + after;
                            // Tell Livewire about the new value.
                            el.dispatchEvent(new Event('input', { bubbles: true }));
                            el.focus();
                            const pos = start + token.length;
                            el.setSelectionRange(pos, pos);
                            this.flash('Inserted');
                            return;
                        }
                        // Fallback: clipboard.
                        if (navigator.clipboard) {
                            navigator.clipboard.writeText(token);
                            this.flash('Copied');
                        }
                    },

                    flash(label) {
                        this.flashLabel = label;
                        if (this.flashTimer) clearTimeout(this.flashTimer);
                        this.flashTimer = setTimeout(() => this.flashLabel = null, 1500);
                    },
                }"
                x-on:focusin="onFocusinFromDrawer($event)"
            >
                @if ($selectedStepIndex === null || ! isset($steps[$selectedStepIndex]))
                    <div
                        class="flex flex-col items-center gap-2 px-6 py-12 text-center text-sm text-zinc-500 dark:text-zinc-400"
                        data-test="flows-edit-drawer-empty"
                    >
                        <flux:icon.cursor-arrow-rays class="size-6 text-zinc-300 dark:text-zinc-600" />
                        <p>{{ __('Select a step to edit') }}</p>
                        <p class="text-xs text-zinc-400 dark:text-zinc-500">{{ __('Click any node on the tree.') }}</p>
                    </div>
                @else
                    @php $step = $steps[$selectedStepIndex]; @endphp
                    @php $i = $selectedStepIndex; @endphp
                    @php $isChoice = $this->isChoiceType($step['type'] ?? ''); @endphp
                    @php $isTerminal = $this->isTerminalType($step['type'] ?? ''); @endphp
                    @php $stepKey = (string) ($step['step_key'] ?? ''); @endphp

                    {{-- Drawer header: step number + type badge +
                         step_key + reorder + remove + close. The
                         step_key is the canonical identifier
                         operators reference in `next` pointers and
                         conditions, so it lives in the header
                         alongside the badge so they don't have to
                         scroll to know which step they're editing. --}}
                    <div
                        class="flex flex-wrap items-center justify-between gap-2 border-b border-zinc-100 px-5 py-3 dark:border-zinc-800"
                        data-test="flows-edit-drawer-header"
                        data-selected-step-index="{{ $i }}"
                        data-selected-step-key="{{ $stepKey }}"
                    >
                        <div class="flex flex-wrap items-center gap-2">
                            <flux:badge size="sm" :color="$this->stepTypeBadgeColor($step['type'] ?? '')">
                                {{ $this->stepTypeLabel($step['type'] ?? '') }}
                            </flux:badge>
                            <span class="text-sm font-semibold text-zinc-900 dark:text-zinc-100" data-test="flows-edit-drawer-title">
                                {{ __('Step :n', ['n' => $i + 1]) }}
                            </span>
                            @if ($stepKey !== '')
                                <span
                                    class="rounded bg-zinc-100 px-1.5 py-0.5 font-mono text-[11px] text-zinc-700 dark:bg-zinc-800 dark:text-zinc-200"
                                    data-test="flows-edit-drawer-step-key-tag"
                                >
                                    {{ $stepKey }}
                                </span>
                            @endif
                            {{-- Reorder buttons live in the drawer
                                 header so they don't compete with
                                 the canvas click target. --}}
                            <button
                                type="button"
                                wire:click="moveStepUp({{ $i }})"
                                @class([
                                    'rounded p-1 text-zinc-400 hover:bg-zinc-100 hover:text-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-200',
                                    'pointer-events-none opacity-30' => $i === 0,
                                ])
                                data-test="flows-edit-step-move-up"
                                aria-label="{{ __('Move step up') }}"
                            >
                                <flux:icon.chevron-up class="size-3.5" />
                            </button>
                            <button
                                type="button"
                                wire:click="moveStepDown({{ $i }})"
                                @class([
                                    'rounded p-1 text-zinc-400 hover:bg-zinc-100 hover:text-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-200',
                                    'pointer-events-none opacity-30' => $i === count($steps) - 1,
                                ])
                                data-test="flows-edit-step-move-down"
                                aria-label="{{ __('Move step down') }}"
                            >
                                <flux:icon.chevron-down class="size-3.5" />
                            </button>
                        </div>
                        <div class="flex items-center gap-1">
                            @if ($confirmingRemoveStepIndex === $i)
                                <button
                                    type="button"
                                    wire:click="cancelRemoveStep"
                                    class="rounded px-2 py-1 text-[11px] text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-800"
                                    data-test="flows-edit-step-remove-cancel"
                                >{{ __('Cancel') }}</button>
                                <button
                                    type="button"
                                    wire:click="removeStep({{ $i }})"
                                    class="rounded bg-red-50 px-2 py-1 text-[11px] font-medium text-red-700 hover:bg-red-100 dark:bg-red-950/40 dark:text-red-300 dark:hover:bg-red-900/60"
                                    data-test="flows-edit-step-remove-confirm"
                                >{{ __('Remove') }}</button>
                            @else
                                <button
                                    type="button"
                                    wire:click="confirmRemoveStep({{ $i }})"
                                    class="rounded p-1 text-zinc-400 hover:bg-zinc-100 hover:text-red-600 dark:hover:bg-zinc-800 dark:hover:text-red-400"
                                    data-test="flows-edit-step-remove"
                                    aria-label="{{ __('Remove step') }}"
                                >
                                    <flux:icon.trash class="size-3.5" />
                                </button>
                            @endif
                            <button
                                type="button"
                                wire:click="closeEditor"
                                class="rounded p-1 text-zinc-400 hover:bg-zinc-100 hover:text-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-200"
                                data-test="flows-edit-drawer-close"
                                aria-label="{{ __('Close editor') }}"
                            >
                                <flux:icon.x-mark class="size-4" />
                            </button>
                        </div>
                    </div>

                    <div class="flex flex-col gap-4 px-5 py-4">
                        <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
                            <flux:field>
                                <flux:label class="!text-xs">{{ __('Step key') }}</flux:label>
                                <flux:input
                                    wire:model="steps.{{ $i }}.step_key"
                                    size="sm"
                                    class="font-mono"
                                    data-test="flows-edit-drawer-step-key"
                                />
                                {{-- Surface per-step validation errors inline.
                                     Without this, `validateStepKeysUnique` attaches
                                     a `steps.{i}.step_key` error that the operator
                                     never sees — Save then appears to silently fail.
                                     A top-level `steps` rollup error also fires for
                                     visibility when the drawer is closed. --}}
                                <flux:error name="steps.{{ $i }}.step_key" />
                            </flux:field>
                            <flux:field>
                                <flux:label class="!text-xs">{{ __('Type') }}</flux:label>
                                <flux:select
                                    wire:model.live="steps.{{ $i }}.type"
                                    size="sm"
                                    data-test="flows-edit-drawer-type"
                                >
                                    @foreach ($this->stepTypeOptions() as $value => $label)
                                        <option value="{{ $value }}">{{ $label }}</option>
                                    @endforeach
                                </flux:select>
                            </flux:field>
                        </div>

                        <flux:field>
                            <flux:label>{{ __('Title / question') }}</flux:label>
                            <flux:input
                                wire:model="steps.{{ $i }}.title"
                                :placeholder="__('e.g. Has it arrived?')"
                                data-test="flows-edit-drawer-step-title"
                                data-placeholder-target="step-title"
                            />
                        </flux:field>

                        <flux:field>
                            <flux:label>{{ __('Body (optional)') }}</flux:label>
                            {{--
                                Lightweight rich-text editor (TipTap).

                                The editor writes its rendered HTML
                                straight back to `steps.{i}.body` via
                                the Alpine bridge's `$wire.set(...,
                                false)` — no hidden input, no
                                `wire:model.live` round-trips. The
                                save action reads the up-to-date
                                value on click.

                                `wire:key` is bound to a stable
                                step identity (id when persisted,
                                step_key otherwise). When the
                                operator clicks a DIFFERENT step,
                                the key changes — Livewire treats
                                the wrapper as a new node and the
                                editor re-mounts with the new
                                step's body. When the operator
                                edits the SAME step, the key is
                                unchanged and the editor instance
                                survives across re-renders
                                (protected by `wire:ignore`).

                                The OUTER `<div>` carries
                                `data-placeholder-target="step-body"`
                                so the placeholder picker can find
                                the editor wrapper and call its
                                `_tiptap.chain().focus().insertContent()`
                                bridge.
                            --}}
                            @php
                                $editorKey = isset($step['id']) && $step['id'] !== null
                                    ? 'tiptap-step-'.$step['id']
                                    : 'tiptap-step-key-'.($step['step_key'] ?? 'new-'.$i);
                            @endphp
                            <div
                                data-placeholder-target="step-body"
                                data-test="flows-edit-drawer-step-body"
                                wire:key="{{ $editorKey }}-wrapper"
                            >
                                <x-rich-editor
                                    :model="'steps.'.$i.'.body'"
                                    :initial="(string) ($step['body'] ?? '')"
                                    :placeholder="__('Supporting copy the customer reads before answering.')"
                                    test-id="flows-edit-drawer-step-body-editor"
                                />
                            </div>
                            <flux:description>
                                {{ __('Rich text — bold, italic, headings, lists, links. Use the placeholder picker below to insert variables at the cursor.') }}
                            </flux:description>
                        </flux:field>

                        {{-- ─── Placeholder picker ─────────────────────
                             Click a token to insert it at the cursor
                             of the last-focused eligible field (title /
                             body / option label / condition string
                             value). Falls back to clipboard when no
                             eligible field has been focused yet. The
                             picker is collapsible so it never crowds
                             the drawer when the operator isn't
                             editing copy.

                             The insertion logic lives on the drawer's
                             outer Alpine scope (`<aside>` above) —
                             that's the scope `lastTargetKey` lives in,
                             and `$root` resolves to the drawer node so
                             querying for `[data-placeholder-target]`
                             never reaches sibling drawer instances or
                             stale DOM left over from a previous step
                             selection.
                        --}}
                        <details
                            class="rounded-md border border-zinc-100 px-3 py-2 dark:border-zinc-800"
                            data-test="flow-placeholder-picker"
                            open
                        >
                            <summary class="flex cursor-pointer items-center justify-between gap-2 text-xs font-medium text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200">
                                <span>{{ __('Insert placeholder (click to insert at cursor)') }}</span>
                                {{-- Tiny ephemeral feedback badge —
                                     "Inserted" when we landed in a
                                     focused field, "Copied" when we
                                     fell back to clipboard. Cleared
                                     ~1.5s later by the Alpine timer. --}}
                                <span
                                    x-show="flashLabel !== null"
                                    x-text="flashLabel"
                                    x-transition.opacity.duration.200ms
                                    class="rounded bg-lime-100 px-1.5 py-0.5 font-mono text-[10px] text-lime-800 dark:bg-lime-950/60 dark:text-lime-200"
                                    data-test="flow-placeholder-flash"
                                ></span>
                            </summary>
                            <div class="mt-3 flex flex-col gap-3">
                                @foreach ($this->placeholderCategories() as $category)
                                    <div
                                        data-test="flow-placeholder-category"
                                        data-category-key="{{ $category['key'] }}"
                                    >
                                        <div class="mb-1 text-[10px] font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
                                            {{ $category['label'] }}
                                        </div>
                                        <div class="flex flex-wrap gap-1.5">
                                            @foreach ($category['placeholders'] as $placeholder)
                                                @php
                                                    $token = '{{ '.$placeholder['key'].' }}';
                                                @endphp
                                                <button
                                                    type="button"
                                                    x-on:click="insertPlaceholder(@js($token))"
                                                    class="inline-flex items-center gap-1 rounded border border-zinc-200 bg-white px-2 py-1 text-[11px] font-mono text-zinc-700 hover:border-zinc-900 hover:text-zinc-900 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-300 dark:hover:border-zinc-100 dark:hover:text-zinc-100"
                                                    data-test="flow-placeholder-token"
                                                    data-placeholder-key="{{ $placeholder['key'] }}"
                                                    title="{{ $placeholder['note'] ?? $placeholder['label'] }}"
                                                >
                                                    {{ $placeholder['key'] }}
                                                </button>
                                            @endforeach
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </details>

                        {{-- ─── Condition groups (AND/OR routing) ─────
                             Schema: `condition_groups[]`, each with
                             `match: "all" | "any"`, inner `conditions[]`
                             rows, and a per-group `next` step.
                             Legacy flat `conditions[]` rows hydrate
                             as single-row match=all groups.
                        --}}
                        <div
                            class="flex flex-col gap-2 rounded-md border border-zinc-200 bg-zinc-50 p-3 dark:border-zinc-800 dark:bg-zinc-950"
                            data-test="flow-condition-block"
                        >
                            <div class="flex items-center justify-between gap-2">
                                <flux:label class="!text-xs">{{ __('Conditional routing') }}</flux:label>
                                <flux:button
                                    type="button"
                                    size="sm"
                                    variant="ghost"
                                    icon="plus"
                                    wire:click="addConditionGroup({{ $i }})"
                                    data-test="flow-condition-group-add"
                                >
                                    {{ __('Add condition group') }}
                                </flux:button>
                            </div>
                            <p class="text-[11px] text-zinc-500 dark:text-zinc-400">
                                {{ __('Each group is a rule. Inside a group, choose "All conditions" for AND or "Any condition" for OR. First matching group wins; otherwise falls back to the step below.') }}
                            </p>

                            @php $groups = $step['condition_groups'] ?? []; @endphp
                            @if (empty($groups))
                                <p
                                    class="text-[11px] italic text-zinc-400 dark:text-zinc-500"
                                    data-test="flow-condition-empty"
                                >
                                    {{ __('No condition groups yet. This step uses static routing.') }}
                                </p>
                            @else
                                <div class="flex flex-col gap-2" data-test="flow-condition-groups">
                                    @foreach ($groups as $groupIndex => $group)
                                        @php
                                            $match = $group['match'] ?? 'all';
                                            $groupConditions = $group['conditions'] ?? [];
                                        @endphp
                                        <div
                                            wire:key="step-{{ $i }}-group-{{ $groupIndex }}"
                                            class="flex flex-col gap-2 rounded border border-zinc-300 bg-white p-2 dark:border-zinc-700 dark:bg-zinc-900"
                                            data-test="flow-condition-group"
                                            data-group-index="{{ $groupIndex }}"
                                            data-group-match="{{ $match }}"
                                        >
                                            {{-- Group header: match dropdown + remove --}}
                                            <div class="flex flex-wrap items-center justify-between gap-2 text-[11px]">
                                                <div class="flex items-center gap-1.5">
                                                    <span class="text-[10px] uppercase tracking-wide text-zinc-400">{{ __('If') }}</span>
                                                    <select
                                                        wire:model.live="steps.{{ $i }}.condition_groups.{{ $groupIndex }}.match"
                                                        class="rounded border border-zinc-200 bg-white px-2 py-1 text-[11px] font-medium text-zinc-900 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100"
                                                        data-test="flow-condition-group-match"
                                                    >
                                                        <option value="all">{{ __('all conditions match') }}</option>
                                                        <option value="any">{{ __('any condition matches') }}</option>
                                                    </select>
                                                </div>
                                                <button
                                                    type="button"
                                                    wire:click="removeConditionGroup({{ $i }}, {{ $groupIndex }})"
                                                    class="inline-flex items-center gap-1 rounded p-1 text-[11px] text-zinc-400 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-950/40 dark:hover:text-red-400"
                                                    data-test="flow-condition-group-remove"
                                                >
                                                    <flux:icon.x-mark class="size-3" />
                                                    {{ __('Remove group') }}
                                                </button>
                                            </div>

                                            {{-- Inner condition rows --}}
                                            <div class="flex flex-col gap-1.5" data-test="flow-condition-rows">
                                                @foreach ($groupConditions as $condIndex => $condition)
                                                    @php
                                                        $lhsMeta = $this->placeholderMeta($condition['lhs'] ?? '');
                                                        $lhsType = $lhsMeta['type'] ?? null;
                                                        $operator = $condition['operator'] ?? 'equals';
                                                        $needsRhs = ! in_array($operator, ['exists', 'missing'], true);
                                                        $rhsType = $condition['rhs_type'] ?? 'literal';
                                                        $compatible = $needsRhs
                                                            ? $this->rhsCompatiblePlaceholders($condition['lhs'] ?? '')
                                                            : [];
                                                    @endphp
                                                    <div
                                                        wire:key="step-{{ $i }}-group-{{ $groupIndex }}-cond-{{ $condIndex }}"
                                                        class="flex flex-wrap items-center gap-1.5 rounded border border-zinc-200 bg-zinc-50 p-1.5 dark:border-zinc-700 dark:bg-zinc-950"
                                                        data-test="flow-condition-row"
                                                        data-condition-index="{{ $condIndex }}"
                                                        data-lhs-type="{{ $lhsType ?? 'unknown' }}"
                                                        data-operator="{{ $operator }}"
                                                        data-rhs-mode="{{ $needsRhs ? $rhsType : 'none' }}"
                                                    >
                                                        @if ($condIndex > 0)
                                                            <span class="text-[10px] uppercase tracking-wide text-zinc-400">
                                                                {{ $match === 'any' ? __('OR') : __('AND') }}
                                                            </span>
                                                        @endif

                                                        {{-- LHS — grouped human-readable dropdown. --}}
                                                        <select
                                                            wire:model.live="steps.{{ $i }}.condition_groups.{{ $groupIndex }}.conditions.{{ $condIndex }}.lhs"
                                                            class="rounded border border-zinc-200 bg-white px-2 py-1 text-[11px] text-zinc-900 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100"
                                                            data-test="flow-condition-lhs"
                                                        >
                                                            <option value="">{{ __('— pick a field —') }}</option>
                                                            @foreach ($this->placeholderCategories() as $category)
                                                                <optgroup label="{{ $category['label'] }}">
                                                                    @foreach ($category['placeholders'] as $placeholder)
                                                                        <option value="{{ $placeholder['key'] }}">{{ $placeholder['label'] }}</option>
                                                                    @endforeach
                                                                </optgroup>
                                                            @endforeach
                                                        </select>

                                                        {{-- Operator — filtered by LHS type. --}}
                                                        <select
                                                            wire:model.live="steps.{{ $i }}.condition_groups.{{ $groupIndex }}.conditions.{{ $condIndex }}.operator"
                                                            class="rounded border border-zinc-200 bg-white px-2 py-1 text-[11px] text-zinc-900 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100"
                                                            data-test="flow-condition-operator"
                                                        >
                                                            @foreach ($this->conditionOperatorOptions($condition['lhs'] ?? null) as $op)
                                                                <option value="{{ $op['value'] }}">{{ $op['label'] }}</option>
                                                            @endforeach
                                                        </select>

                                                        {{-- RHS — only when needed. --}}
                                                        @if ($needsRhs)
                                                            <div
                                                                class="flex flex-wrap items-center gap-1.5"
                                                                data-test="flow-condition-rhs"
                                                            >
                                                                {{-- RHS mode toggle. --}}
                                                                <div class="inline-flex overflow-hidden rounded border border-zinc-200 text-[10px] dark:border-zinc-700">
                                                                    <button
                                                                        type="button"
                                                                        wire:click="$set('steps.{{ $i }}.condition_groups.{{ $groupIndex }}.conditions.{{ $condIndex }}.rhs_type', 'literal')"
                                                                        class="{{ $rhsType === 'literal'
                                                                            ? 'bg-zinc-900 text-white dark:bg-zinc-100 dark:text-zinc-900'
                                                                            : 'bg-white text-zinc-600 hover:bg-zinc-50 dark:bg-zinc-950 dark:text-zinc-400 dark:hover:bg-zinc-900' }} px-2 py-1"
                                                                        data-test="flow-condition-rhs-mode-literal"
                                                                    >
                                                                        {{ __('Value') }}
                                                                    </button>
                                                                    <button
                                                                        type="button"
                                                                        wire:click="$set('steps.{{ $i }}.condition_groups.{{ $groupIndex }}.conditions.{{ $condIndex }}.rhs_type', 'placeholder')"
                                                                        class="{{ $rhsType === 'placeholder'
                                                                            ? 'bg-zinc-900 text-white dark:bg-zinc-100 dark:text-zinc-900'
                                                                            : 'bg-white text-zinc-600 hover:bg-zinc-50 dark:bg-zinc-950 dark:text-zinc-400 dark:hover:bg-zinc-900' }} border-l border-zinc-200 px-2 py-1 dark:border-zinc-700"
                                                                        data-test="flow-condition-rhs-mode-placeholder"
                                                                    >
                                                                        {{ __('Another field') }}
                                                                    </button>
                                                                </div>

                                                                {{-- RHS input. --}}
                                                                @if ($rhsType === 'placeholder')
                                                                    <select
                                                                        wire:model="steps.{{ $i }}.condition_groups.{{ $groupIndex }}.conditions.{{ $condIndex }}.rhs_placeholder"
                                                                        class="rounded border border-zinc-200 bg-white px-2 py-1 text-[11px] text-zinc-900 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100"
                                                                        data-test="flow-condition-rhs-placeholder"
                                                                    >
                                                                        <option value="">{{ __('— pick a field —') }}</option>
                                                                        @foreach ($compatible as $candidate)
                                                                            <option value="{{ $candidate['key'] }}">
                                                                                {{ $candidate['group'] }} · {{ $candidate['label'] }}
                                                                            </option>
                                                                        @endforeach
                                                                    </select>
                                                                @else
                                                                    @if ($lhsType === \App\Services\Flows\Placeholders\FlowPlaceholderRegistry::TYPE_ENUM)
                                                                        <select
                                                                            wire:model="steps.{{ $i }}.condition_groups.{{ $groupIndex }}.conditions.{{ $condIndex }}.rhs_value"
                                                                            class="rounded border border-zinc-200 bg-white px-2 py-1 text-[11px] text-zinc-900 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100"
                                                                            data-test="flow-condition-rhs-enum"
                                                                        >
                                                                            <option value="">{{ __('— pick a value —') }}</option>
                                                                            @foreach (($lhsMeta['enum_values'] ?? []) as $enumValue)
                                                                                <option value="{{ $enumValue }}">{{ $enumValue }}</option>
                                                                            @endforeach
                                                                        </select>
                                                                    @elseif ($lhsType === \App\Services\Flows\Placeholders\FlowPlaceholderRegistry::TYPE_BOOLEAN)
                                                                        <select
                                                                            wire:model="steps.{{ $i }}.condition_groups.{{ $groupIndex }}.conditions.{{ $condIndex }}.rhs_value"
                                                                            class="rounded border border-zinc-200 bg-white px-2 py-1 text-[11px] text-zinc-900 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100"
                                                                            data-test="flow-condition-rhs-boolean"
                                                                        >
                                                                            <option value="">{{ __('— pick yes/no —') }}</option>
                                                                            <option value="yes">{{ __('yes') }}</option>
                                                                            <option value="no">{{ __('no') }}</option>
                                                                        </select>
                                                                    @elseif ($lhsType === \App\Services\Flows\Placeholders\FlowPlaceholderRegistry::TYPE_NUMBER)
                                                                        <input
                                                                            type="number"
                                                                            step="any"
                                                                            wire:model="steps.{{ $i }}.condition_groups.{{ $groupIndex }}.conditions.{{ $condIndex }}.rhs_value"
                                                                            placeholder="0"
                                                                            class="w-[100px] rounded border border-zinc-200 bg-white px-2 py-1 text-[11px] text-zinc-900 placeholder-zinc-400 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100 dark:placeholder-zinc-500"
                                                                            data-test="flow-condition-rhs-number"
                                                                        />
                                                                    @elseif ($lhsType === \App\Services\Flows\Placeholders\FlowPlaceholderRegistry::TYPE_DATE)
                                                                        <input
                                                                            type="date"
                                                                            wire:model="steps.{{ $i }}.condition_groups.{{ $groupIndex }}.conditions.{{ $condIndex }}.rhs_value"
                                                                            class="rounded border border-zinc-200 bg-white px-2 py-1 text-[11px] text-zinc-900 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100"
                                                                            data-test="flow-condition-rhs-date"
                                                                        />
                                                                    @else
                                                                        <input
                                                                            type="text"
                                                                            wire:model="steps.{{ $i }}.condition_groups.{{ $groupIndex }}.conditions.{{ $condIndex }}.rhs_value"
                                                                            placeholder="{{ __('value') }}"
                                                                            class="min-w-[120px] flex-1 rounded border border-zinc-200 bg-white px-2 py-1 text-[11px] text-zinc-900 placeholder-zinc-400 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100 dark:placeholder-zinc-500"
                                                                            data-test="flow-condition-rhs-string"
                                                                            data-placeholder-target="step-condition-{{ $groupIndex }}-{{ $condIndex }}-rhs-value"
                                                                        />
                                                                    @endif
                                                                @endif
                                                            </div>
                                                        @endif

                                                        <button
                                                            type="button"
                                                            wire:click="removeConditionFromGroup({{ $i }}, {{ $groupIndex }}, {{ $condIndex }})"
                                                            class="ml-auto rounded p-1 text-zinc-400 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-950/40 dark:hover:text-red-400"
                                                            data-test="flow-condition-remove"
                                                            aria-label="{{ __('Remove condition') }}"
                                                        >
                                                            <flux:icon.x-mark class="size-3.5" />
                                                        </button>
                                                    </div>
                                                @endforeach
                                            </div>

                                            {{-- Add another condition to this group --}}
                                            <button
                                                type="button"
                                                wire:click="addConditionToGroup({{ $i }}, {{ $groupIndex }})"
                                                class="inline-flex w-fit items-center gap-1 rounded px-2 py-1 text-[11px] font-medium text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-100"
                                                data-test="flow-condition-add"
                                            >
                                                <flux:icon.plus class="size-3" />
                                                {{ __('Add condition') }}
                                            </button>

                                            {{-- Group next step --}}
                                            <div class="flex flex-wrap items-center gap-1.5 border-t border-zinc-100 pt-2 text-[11px] dark:border-zinc-800">
                                                <span class="text-[10px] uppercase tracking-wide text-zinc-400">{{ __('then go to') }}</span>
                                                <select
                                                    wire:model="steps.{{ $i }}.condition_groups.{{ $groupIndex }}.next"
                                                    class="rounded border border-zinc-200 bg-white px-2 py-1 text-[11px] text-zinc-900 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100"
                                                    data-test="flow-condition-group-next"
                                                >
                                                    <option value="">{{ __('— pick a step —') }}</option>
                                                    @foreach ($this->availableNextStepKeys($i) as $candidate)
                                                        <option value="{{ $candidate }}">{{ $candidate }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @endif

                            <div class="mt-1 flex items-center gap-2 text-[11px]">
                                <span class="text-zinc-500 dark:text-zinc-400">{{ __('Otherwise fallback to:') }}</span>
                                <select
                                    wire:model="steps.{{ $i }}.fallback_step"
                                    class="rounded border border-zinc-200 bg-white px-2 py-1 text-[11px] text-zinc-900 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100"
                                    data-test="flow-condition-fallback"
                                >
                                    <option value="">{{ __('— static next / none —') }}</option>
                                    @foreach ($this->availableNextStepKeys($i) as $candidate)
                                        <option value="{{ $candidate }}">{{ $candidate }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        {{-- Routing block per step type --}}
                        @if ($isChoice)
                            <div data-test="flows-edit-drawer-choice-block">
                                <div class="mb-1 flex items-center justify-between">
                                    <flux:label class="!text-xs">{{ __('Options') }}</flux:label>
                                    <flux:button
                                        type="button"
                                        size="sm"
                                        variant="ghost"
                                        icon="plus"
                                        wire:click="addOption({{ $i }})"
                                        data-test="flows-edit-drawer-add-option"
                                    >
                                        {{ __('Add option') }}
                                    </flux:button>
                                </div>
                                @if (empty($step['options']))
                                    <p class="text-xs text-zinc-500 dark:text-zinc-400" data-test="flows-edit-drawer-options-empty">
                                        {{ __('No options yet. A choice step needs at least one.') }}
                                    </p>
                                @else
                                    <div class="flex flex-col gap-2" data-test="flows-edit-drawer-options">
                                        @foreach ($step['options'] as $optIndex => $option)
                                            <div
                                                wire:key="drawer-{{ $i }}-option-{{ $optIndex }}"
                                                class="flex items-center gap-2 rounded-md border border-zinc-200 bg-zinc-50 px-2.5 py-2 dark:border-zinc-700 dark:bg-zinc-950"
                                                data-test="flows-edit-drawer-option"
                                                data-option-index="{{ $optIndex }}"
                                            >
                                                <input
                                                    type="text"
                                                    wire:model="steps.{{ $i }}.options.{{ $optIndex }}.label"
                                                    placeholder="{{ __('Option label') }}"
                                                    class="min-w-0 flex-1 bg-transparent text-sm text-zinc-900 placeholder-zinc-400 focus:outline-none dark:text-zinc-100 dark:placeholder-zinc-500"
                                                    data-test="flows-edit-drawer-option-label"
                                                    data-placeholder-target="step-option-{{ $optIndex }}-label"
                                                />
                                                <span class="text-xs text-zinc-400 dark:text-zinc-500">→</span>
                                                <select
                                                    wire:model="steps.{{ $i }}.options.{{ $optIndex }}.next"
                                                    class="min-w-[140px] rounded border border-zinc-200 bg-white px-2 py-1 text-xs text-zinc-900 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100"
                                                    data-test="flows-edit-drawer-option-next"
                                                >
                                                    <option value="">{{ __('— pick a step —') }}</option>
                                                    @foreach ($this->availableNextStepKeys($i) as $candidate)
                                                        <option value="{{ $candidate }}">{{ $candidate }}</option>
                                                    @endforeach
                                                </select>
                                                <button
                                                    type="button"
                                                    wire:click="removeOption({{ $i }}, {{ $optIndex }})"
                                                    class="rounded p-1 text-zinc-400 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-950/40 dark:hover:text-red-400"
                                                    data-test="flows-edit-drawer-option-remove"
                                                    aria-label="{{ __('Remove option') }}"
                                                >
                                                    <flux:icon.x-mark class="size-3.5" />
                                                </button>
                                            </div>
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                        @elseif (($step['type'] ?? '') === \App\Enums\FlowStepType::Action->value)
                            {{-- M05 — Action step config: pick the action + wire the
                                 two outcome targets. The step body above is the
                                 customer-facing confirmation copy. --}}
                            <div class="flex flex-col gap-3" data-test="flows-edit-drawer-action-block">
                                <flux:field>
                                    <flux:label class="!text-xs">{{ __('Action') }}</flux:label>
                                    <flux:select
                                        wire:model="steps.{{ $i }}.action_key"
                                        size="sm"
                                        data-test="flows-edit-drawer-action-key"
                                    >
                                        <option value="">{{ __('— pick an action —') }}</option>
                                        @foreach ($this->actionKeyOptions() as $actionKeyValue => $actionLabel)
                                            <option value="{{ $actionKeyValue }}">{{ $actionLabel }}</option>
                                        @endforeach
                                    </flux:select>
                                    <flux:description class="!text-[11px]">{{ __('What this step does when the customer confirms. The step body above is the confirmation copy they see.') }}</flux:description>
                                </flux:field>
                                <flux:field>
                                    <flux:label class="!text-xs">{{ __('On success → go to') }}</flux:label>
                                    <flux:select
                                        wire:model="steps.{{ $i }}.on_confirmed"
                                        size="sm"
                                        data-test="flows-edit-drawer-action-on-confirmed"
                                    >
                                        <option value="">{{ __('— pick a step —') }}</option>
                                        @foreach ($this->availableNextStepKeys($i) as $candidate)
                                            <option value="{{ $candidate }}">{{ $candidate }}</option>
                                        @endforeach
                                    </flux:select>
                                </flux:field>
                                <flux:field>
                                    <flux:label class="!text-xs">{{ __("If it can't be done → go to") }}</flux:label>
                                    <flux:select
                                        wire:model="steps.{{ $i }}.on_cant"
                                        size="sm"
                                        data-test="flows-edit-drawer-action-on-cant"
                                    >
                                        <option value="">{{ __('— pick a step —') }}</option>
                                        @foreach ($this->availableNextStepKeys($i) as $candidate)
                                            <option value="{{ $candidate }}">{{ $candidate }}</option>
                                        @endforeach
                                    </flux:select>
                                    <flux:description class="!text-[11px]">{{ __('Where the customer goes if the action is blocked or fails (e.g. an escalation step).') }}</flux:description>
                                </flux:field>
                            </div>
                        @elseif (! $isTerminal)
                            <flux:field data-test="flows-edit-drawer-next-block">
                                <flux:label class="!text-xs">{{ __('Next step') }}</flux:label>
                                <flux:select
                                    wire:model="steps.{{ $i }}.next"
                                    size="sm"
                                    data-test="flows-edit-drawer-next"
                                >
                                    <option value="">{{ __('— pick a step (blank for terminal) —') }}</option>
                                    @foreach ($this->availableNextStepKeys($i) as $candidate)
                                        <option value="{{ $candidate }}">{{ $candidate }}</option>
                                    @endforeach
                                </flux:select>
                            </flux:field>
                        @else
                            @php
                                $stepType = $step['type'] ?? '';
                                $isFormStep = $stepType === \App\Enums\FlowStepType::Form->value;
                                $isEscalation = $stepType === \App\Enums\FlowStepType::Escalation->value;
                                $isResolution = $stepType === \App\Enums\FlowStepType::Resolution->value;
                                if ($isFormStep) {
                                    $terminalCopy = __('Support form — when the customer submits, the runner creates a support ticket and ends the journey.');
                                } elseif ($isEscalation) {
                                    $terminalCopy = __('Terminal step — the runner marks the session escalated when reached.');
                                } else {
                                    $terminalCopy = __('Terminal step — the runner marks the session completed when reached.');
                                }
                            @endphp
                            <div
                                class="rounded-md border border-zinc-200 bg-zinc-50 px-3 py-2 text-xs text-zinc-500 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-400"
                                data-test="flows-edit-drawer-terminal-note"
                                data-terminal-type="{{ $stepType }}"
                            >
                                <flux:icon.flag class="mr-1 inline size-3 align-text-bottom" />
                                {{ $terminalCopy }}
                            </div>

                            @if ($isFormStep)
                                {{-- Support form settings. The
                                     "create a ticket on submit"
                                     toggle is intentionally NOT
                                     surfaced — every Form step
                                     creates a ticket on submit by
                                     design (that's what a contact-
                                     support form IS). The
                                     `create_ticket = false` config
                                     flag still exists for legacy /
                                     advanced-JSON edits, but
                                     adding a checkbox would just
                                     duplicate "this step exists =
                                     this step creates a ticket". --}}
                                <div
                                    class="flex flex-col gap-3 rounded-md border border-zinc-200 bg-white p-3 dark:border-zinc-800 dark:bg-zinc-950"
                                    data-test="flows-edit-drawer-form-settings"
                                >
                                    <div class="text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
                                        {{ __('Support form settings') }}
                                    </div>
                                    <label class="flex items-start gap-2 text-xs">
                                        <input
                                            type="checkbox"
                                            wire:model="steps.{{ $i }}.allow_attachments"
                                            class="mt-0.5 rounded border-zinc-300 dark:border-zinc-700"
                                            data-test="flows-edit-drawer-form-allow-attachments"
                                        />
                                        <span class="flex flex-col gap-0.5">
                                            <span class="text-zinc-700 dark:text-zinc-300">{{ __('Allow file attachments') }}</span>
                                            <span class="text-[11px] text-zinc-400 dark:text-zinc-500">
                                                {{ __('PDF, PNG, JPG, HEIC, WebP. Up to :n files, max :size MB each.', [
                                                    'n' => \App\Livewire\SelfHelp\Run::SUPPORT_FORM_MAX_ATTACHMENTS,
                                                    'size' => (int) (\App\Livewire\SelfHelp\Run::SUPPORT_FORM_MAX_FILE_KB / 1024),
                                                ]) }}
                                            </span>
                                        </span>
                                    </label>
                                </div>
                            @endif
                        @endif

                        <label class="flex items-start gap-2 text-xs">
                            <input
                                type="checkbox"
                                wire:model="steps.{{ $i }}.needs_review"
                                class="mt-0.5 rounded border-zinc-300 dark:border-zinc-700"
                                data-test="flows-edit-drawer-needs-review"
                            />
                            <span class="flex flex-col gap-0.5">
                                <span class="text-zinc-700 dark:text-zinc-300">{{ __('Needs review') }}</span>
                                <span class="text-[11px] text-zinc-400 dark:text-zinc-500">{{ __('Flag for an audit pass before publishing.') }}</span>
                            </span>
                        </label>

                        <details class="rounded-md border border-zinc-100 px-3 py-2 dark:border-zinc-800">
                            <summary class="cursor-pointer text-xs font-medium text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200">
                                {{ __('Advanced settings (preview)') }}
                            </summary>
                            <div class="mt-3 flex flex-col gap-3 text-xs">
                                <label class="flex items-start gap-2">
                                    <input
                                        type="checkbox"
                                        wire:model="steps.{{ $i }}.requires_verification"
                                        class="mt-0.5 rounded border-zinc-300 dark:border-zinc-700"
                                        data-test="flows-edit-drawer-requires-verification"
                                    />
                                    <span class="flex flex-col gap-0.5">
                                        <span class="text-zinc-700 dark:text-zinc-300">{{ __('Requires verification') }}</span>
                                        <span class="text-[11px] text-zinc-400 dark:text-zinc-500">{{ __('Future: gate this step behind email-code customer verification.') }}</span>
                                    </span>
                                </label>
                                {{-- Action selection moved to the visible per-type
                                     Action config block above (M05). --}}
                                <flux:field>
                                    <flux:label class="!text-xs">{{ __('Store scope') }}</flux:label>
                                    <flux:select
                                        wire:model="steps.{{ $i }}.store_scope"
                                        size="sm"
                                        data-test="flows-edit-drawer-store-scope"
                                    >
                                        <option value="">{{ __('Inherit from flow') }}</option>
                                        <option value="global">{{ __('Global') }}</option>
                                        <option value="store">{{ __('Store-specific') }}</option>
                                    </flux:select>
                                </flux:field>
                                <flux:field>
                                    <flux:label class="!text-xs">{{ __('Fallback step') }}</flux:label>
                                    <flux:select
                                        wire:model="steps.{{ $i }}.fallback_step"
                                        size="sm"
                                        data-test="flows-edit-drawer-fallback"
                                    >
                                        <option value="">{{ __('— none —') }}</option>
                                        @foreach ($this->availableNextStepKeys($i) as $candidate)
                                            <option value="{{ $candidate }}">{{ $candidate }}</option>
                                        @endforeach
                                    </flux:select>
                                </flux:field>
                            </div>
                        </details>
                    </div>
                @endif
            </aside>
        </div>

        {{-- ─── Advanced JSON disclosure (debug/fallback) ────────── --}}
        <details
            class="rounded-md border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900"
            data-test="flows-edit-advanced-json"
            @if ($advancedJsonOpen) open @endif
        >
            <summary
                class="cursor-pointer px-4 py-3 text-sm font-medium text-zinc-700 hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-zinc-100"
                wire:click.prevent="{{ $advancedJsonOpen ? 'closeAdvancedJson' : 'openAdvancedJson' }}"
                data-test="flows-edit-advanced-json-toggle"
            >
                {{ __('Advanced JSON editor') }}
                <span class="ml-1 text-[11px] text-zinc-400 dark:text-zinc-500">
                    {{ __('(debug / fallback — the tree canvas above is the canonical editor)') }}
                </span>
            </summary>
            @if ($advancedJsonOpen)
                <div class="border-t border-zinc-200 px-4 py-4 dark:border-zinc-800">
                    <flux:textarea
                        wire:model="advancedJsonBuffer"
                        rows="14"
                        class="font-mono text-xs"
                        data-test="flows-edit-advanced-json-buffer"
                    />
                    @if ($advancedJsonError)
                        <div
                            class="mt-2 rounded border border-red-200 bg-red-50 p-2 text-xs text-red-700 dark:border-red-900/60 dark:bg-red-950/30 dark:text-red-300"
                            data-test="flows-edit-advanced-json-error"
                        >
                            {{ $advancedJsonError }}
                        </div>
                    @endif
                    <div class="mt-3 flex items-center gap-2">
                        <flux:button
                            type="button"
                            size="sm"
                            variant="primary"
                            wire:click="applyAdvancedJson"
                            data-test="flows-edit-advanced-json-apply"
                        >
                            {{ __('Apply JSON to canvas') }}
                        </flux:button>
                        <flux:button
                            type="button"
                            size="sm"
                            variant="ghost"
                            wire:click="closeAdvancedJson"
                            data-test="flows-edit-advanced-json-close"
                        >
                            {{ __('Cancel') }}
                        </flux:button>
                        <p class="ml-2 text-[11px] text-zinc-500 dark:text-zinc-400">
                            {{ __('Applying replaces the tree. Steps lose their import-protection.') }}
                        </p>
                    </div>
                </div>
            @endif
        </details>

        {{-- ─── Sticky save bar ───────────────────────────────────
            Two save actions:
              • Save (primary) — persists and stays on the edit
                page. On a fresh create we redirect to the new
                flow's edit URL so the operator continues iterating
                with a stable URL. On edit we stay put — selected
                step, drawer state, and form scroll are preserved.
                Wired to the form's `wire:submit="save"` so Enter in
                any input also triggers this branch.
              • Save & exit (filled) — persists and redirects back
                to `/flows`. The historical "save & navigate away"
                behaviour, kept for when authoring is done.
            Both buttons funnel through `persistFlow()` so validation
            and the transactional write are identical. --}}
        {{-- Save bar — sticky/floating per the original
             behaviour. No bg, no border, no backdrop — just
             the buttons themselves. They may overlap the
             scrollable tree/editor area below; the buttons'
             own primary/filled fills keep them visible
             against any content that scrolls behind them.

             The earlier full-width black panel (bg + border
             + backdrop) was the source of the "save bar
             covers the page" complaint. Removing only the
             panel + keeping the sticky positioning restores
             the previous working UX. --}}
        <div class="sticky bottom-4 z-10 mt-4 flex items-center gap-2" data-test="flows-edit-save-bar">
            <flux:button variant="primary" type="submit" data-test="flows-edit-save">
                {{ $flowId === null ? __('Create flow') : __('Save') }}
            </flux:button>
            <flux:button
                variant="filled"
                type="button"
                wire:click="saveAndExit"
                data-test="flows-edit-save-and-exit"
            >
                {{ __('Save & exit') }}
            </flux:button>
            <flux:button variant="ghost" type="button" :href="route('flows.index')" wire:navigate>
                {{ __('Cancel') }}
            </flux:button>
        </div>
    </form>
</section>