{{--
    Return-label modal (Push 2D).

    Opens when the operator clicks "Run" on the
    `generate_return_label` suggested-action chip.

    Three required selections, each a Livewire action so the
    component can clear dependent state on change:

      1. Order picker — defaults to the slide-out's active order
         when one is open. Lists every Shopify order on the active
         ticket's customer (already AccountScope-filtered).
      2. Wrong line-item picker — radio cards, one per line item
         on the chosen order. Image + title + variant + qty.
      3. Replacement variant picker — same-product only for Push
         2D. Shows the same-product variants present on the same
         order; clearly marks the "send another of the same"
         option if the wrong variant itself is in the candidate
         set.

    Quantity input is clamped to the wrong line item's original
    quantity. Confirm button is only enabled once all three
    fields are picked. Cancel + the X close the modal with no
    side effects — no ReturnGo call, no DB write.
--}}
@php
    $rtnOrderOptions = $this->returnLabelOrderOptions();
    $rtnWrongOptions = $this->returnLabelWrongItemOptions();
    $rtnVariantOptions = $this->returnLabelCorrectVariantOptions();
    $rtnCap = $this->returnLabelWrongItemQuantity();
    $rtnCanConfirm = $this->returnLabelCanConfirm();
@endphp

<template x-teleport="body">
<div
    class="fixed inset-0 z-[60] flex items-center justify-center bg-zinc-900/60 p-4 backdrop-blur-sm"
    data-test="return-label-modal"
    wire:key="return-label-modal-{{ $returnLabelOrderId ?? 'unselected' }}"
>
    <div class="flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-xl dark:border-zinc-800 dark:bg-zinc-900">
        {{-- Header --}}
        <div class="flex items-center justify-between gap-3 border-b border-zinc-200 px-5 py-3 dark:border-zinc-800">
            <div class="flex items-center gap-2">
                <flux:icon.arrow-uturn-left class="size-4 text-zinc-500 dark:text-zinc-400" />
                <flux:heading size="lg" level="2">{{ __('Generate return label') }}</flux:heading>
            </div>
            <button
                type="button"
                wire:click="closeReturnLabelModal"
                class="text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200"
                data-test="return-label-modal-close"
            >
                <flux:icon.x-mark class="size-5" />
            </button>
        </div>

        {{-- Body --}}
        <div class="flex-1 overflow-y-auto px-5 py-4">
            <p class="text-sm text-zinc-600 dark:text-zinc-300">
                {{ __('Pick the order, the wrong item, and the correct replacement variant. Royal Mail Click & Drop will generate the Tracked Returns 48 label and queue it for your next reply.') }}
            </p>

            {{-- 1. Order picker — hidden when the flow was opened
                 from the Shopify order panel's "Wrong item → Free
                 Return" entry (order is already locked). Operators
                 reach this state via `openReturnLabelForOrder($id)`. --}}
            <section class="mt-4 @if ($returnLabelOrderLocked) hidden @endif" data-test="return-label-modal-order-section" data-locked="{{ $returnLabelOrderLocked ? 'true' : 'false' }}">
                <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400" for="return-label-order">
                    {{ __('1. Order') }}
                </label>
                @if (count($rtnOrderOptions) === 0)
                    <div class="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800 dark:border-amber-900/40 dark:bg-amber-950/30 dark:text-amber-200" data-test="return-label-modal-no-orders">
                        {{ __('No Shopify orders are linked to this customer yet.') }}
                    </div>
                @else
                    <select
                        id="return-label-order"
                        class="w-full rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 focus:border-zinc-400 focus:outline-none focus:ring-0 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100"
                        data-test="return-label-modal-order-select"
                        wire:change="setReturnLabelOrder($event.target.value)"
                    >
                        <option value="" @selected($returnLabelOrderId === null)>{{ __('Pick an order…') }}</option>
                        @foreach ($rtnOrderOptions as $opt)
                            <option value="{{ $opt['id'] }}" @selected($returnLabelOrderId === $opt['id'])>
                                {{ $opt['name'] }}
                            </option>
                        @endforeach
                    </select>
                @endif
            </section>

            {{-- 2. Wrong-item picker --}}
            <section class="mt-5">
                <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
                    {{ __('2. Wrong item') }}
                </label>
                @if ($returnLabelOrderId === null)
                    <div class="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 text-xs text-zinc-500 dark:border-zinc-800 dark:bg-zinc-950/30 dark:text-zinc-400" data-test="return-label-modal-wrong-item-empty">
                        {{ __('Pick an order first.') }}
                    </div>
                @elseif (count($rtnWrongOptions) === 0)
                    <div class="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800 dark:border-amber-900/40 dark:bg-amber-950/30 dark:text-amber-200">
                        {{ __('That order has no line items.') }}
                    </div>
                @else
                    <div class="flex flex-col divide-y divide-zinc-200 overflow-hidden rounded-lg border border-zinc-200 bg-white dark:divide-zinc-800 dark:border-zinc-800 dark:bg-zinc-900" data-test="return-label-modal-wrong-item-list">
                        @foreach ($rtnWrongOptions as $li)
                            @php
                                $isPicked = $returnLabelWrongLineItemId === (string) $li['id'];
                            @endphp
                            <label
                                class="flex cursor-pointer items-center gap-3 px-3 py-2 hover:bg-zinc-50 dark:hover:bg-zinc-800/60 @if ($isPicked) bg-sky-50/60 dark:bg-sky-950/30 @endif"
                                data-test="return-label-modal-wrong-item"
                                data-item-id="{{ $li['id'] }}"
                                data-picked="{{ $isPicked ? 'true' : 'false' }}"
                            >
                                {{--
                                    Bound via `wire:model.live` rather than a
                                    string-interpolated `wire:change` call —
                                    Livewire receives the raw `value` attribute
                                    intact, even when the id is opaque (e.g.
                                    `gid://shopify/LineItem/...`) or contains
                                    HTML-escaped characters. Side effects
                                    (variant reset, qty clamp) run in the
                                    `updatedReturnLabelWrongLineItemId` hook.
                                --}}
                                <input
                                    type="radio"
                                    name="return-label-wrong-item"
                                    value="{{ $li['id'] }}"
                                    wire:model.live="returnLabelWrongLineItemId"
                                    class="shrink-0 text-sky-600 focus:ring-sky-500"
                                />
                                @if ($li['image_url'] ?? null)
                                    <img
                                        src="{{ $li['image_url'] }}"
                                        alt=""
                                        class="size-10 shrink-0 rounded-md border border-zinc-200 bg-white object-cover dark:border-zinc-700 dark:bg-zinc-800"
                                        loading="lazy"
                                    />
                                @else
                                    <div class="flex size-10 shrink-0 items-center justify-center rounded-md border border-zinc-200 bg-gradient-to-br from-zinc-100 to-zinc-200 text-zinc-400 dark:border-zinc-700 dark:from-zinc-800 dark:to-zinc-900 dark:text-zinc-600">
                                        <flux:icon.photo class="size-5" />
                                    </div>
                                @endif
                                <div class="min-w-0 flex-1">
                                    <div class="truncate text-sm font-semibold text-zinc-900 dark:text-zinc-100">
                                        {{ $li['title'] }}
                                    </div>
                                    <div class="truncate text-xs text-zinc-500 dark:text-zinc-400">
                                        @if ($li['variant_title'] ?? null){{ $li['variant_title'] }}@endif
                                        @if (($li['variant_title'] ?? null) && ($li['sku'] ?? null)) · @endif
                                        @if ($li['sku'] ?? null)<span class="font-mono">{{ $li['sku'] }}</span>@endif
                                        <span class="text-zinc-400 dark:text-zinc-500">· {{ __('ordered :n', ['n' => (int) ($li['quantity'] ?? 0)]) }}</span>
                                    </div>
                                </div>
                            </label>
                        @endforeach
                    </div>
                @endif
            </section>

            {{-- 3. Replacement variant picker --}}
            <section class="mt-5">
                <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
                    {{ __('3. Replacement variant') }}
                    <span class="ml-1 text-[10px] font-medium normal-case text-zinc-400 dark:text-zinc-500">
                        ({{ __('same product only for now') }})
                    </span>
                </label>
                @if ($returnLabelWrongLineItemId === '')
                    <div class="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 text-xs text-zinc-500 dark:border-zinc-800 dark:bg-zinc-950/30 dark:text-zinc-400" data-test="return-label-modal-variant-empty">
                        {{ __('Pick the wrong item first.') }}
                    </div>
                @elseif (count($rtnVariantOptions) === 0)
                    <div class="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800 dark:border-amber-900/40 dark:bg-amber-950/30 dark:text-amber-200" data-test="return-label-modal-variant-none">
                        {{ __('No alternate variants found for this product.') }}
                    </div>
                @else
                    <div class="flex flex-col divide-y divide-zinc-200 overflow-hidden rounded-lg border border-zinc-200 bg-white dark:divide-zinc-800 dark:border-zinc-800 dark:bg-zinc-900" data-test="return-label-modal-variant-list">
                        @foreach ($rtnVariantOptions as $v)
                            @php
                                $isPicked = $returnLabelCorrectVariantId === (string) $v['variant_id'];
                            @endphp
                            <label
                                class="flex cursor-pointer items-center gap-3 px-3 py-2 hover:bg-zinc-50 dark:hover:bg-zinc-800/60 @if ($isPicked) bg-sky-50/60 dark:bg-sky-950/30 @endif"
                                data-test="return-label-modal-variant"
                                data-variant-id="{{ $v['variant_id'] }}"
                                data-picked="{{ $isPicked ? 'true' : 'false' }}"
                            >
                                <input
                                    type="radio"
                                    name="return-label-correct-variant"
                                    value="{{ $v['variant_id'] }}"
                                    wire:model.live="returnLabelCorrectVariantId"
                                    class="shrink-0 text-sky-600 focus:ring-sky-500"
                                />
                                @if ($v['image_url'] ?? null)
                                    <img
                                        src="{{ $v['image_url'] }}"
                                        alt=""
                                        class="size-10 shrink-0 rounded-md border border-zinc-200 bg-white object-cover dark:border-zinc-700 dark:bg-zinc-800"
                                        loading="lazy"
                                    />
                                @else
                                    <div class="flex size-10 shrink-0 items-center justify-center rounded-md border border-zinc-200 bg-gradient-to-br from-zinc-100 to-zinc-200 text-zinc-400 dark:border-zinc-700 dark:from-zinc-800 dark:to-zinc-900 dark:text-zinc-600">
                                        <flux:icon.photo class="size-5" />
                                    </div>
                                @endif
                                <div class="min-w-0 flex-1">
                                    <div class="truncate text-sm font-semibold text-zinc-900 dark:text-zinc-100">
                                        {{ $v['title'] }}
                                    </div>
                                    <div class="truncate text-xs text-zinc-500 dark:text-zinc-400">
                                        @if ($v['variant_title'] ?? null){{ $v['variant_title'] }}@endif
                                        @if (! empty($v['is_same_as_wrong']))
                                            @if ($v['variant_title'] ?? null) · @endif
                                            <span class="text-zinc-400 dark:text-zinc-500">{{ __('same as the wrong item') }}</span>
                                        @endif
                                    </div>
                                </div>
                            </label>
                        @endforeach
                    </div>
                @endif
            </section>

            {{-- Quantity --}}
            <section class="mt-5">
                <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400" for="return-label-qty">
                    {{ __('Quantity to return') }}
                </label>
                <div class="flex items-center gap-3">
                    <input
                        id="return-label-qty"
                        type="number"
                        min="1"
                        max="{{ max(1, $rtnCap) }}"
                        wire:model.live.number="returnLabelQuantity"
                        @disabled($returnLabelWrongLineItemId === '')
                        class="w-24 rounded-md border border-zinc-200 bg-zinc-50 px-2 py-2 text-center text-base font-medium tabular-nums focus:border-zinc-400 focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 dark:focus:border-zinc-500"
                        data-test="return-label-modal-quantity"
                    />
                    <span class="text-xs text-zinc-500 dark:text-zinc-400" data-test="return-label-modal-quantity-cap">
                        {{ __('max :n', ['n' => max(1, $rtnCap)]) }}
                    </span>
                </div>
            </section>

            @if ($returnLabelError)
                <div class="mt-4 flex items-start gap-2 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-800 dark:border-red-900/40 dark:bg-red-950/30 dark:text-red-200" data-test="return-label-modal-error">
                    <flux:icon.exclamation-triangle class="mt-0.5 size-4 shrink-0" />
                    <div>{{ $returnLabelError }}</div>
                </div>
            @endif

            {{-- Royal Mail Click & Drop slice — the in-modal
                 Debug details collapsible was REMOVED here. The
                 same diagnostic surface (endpoint, method,
                 request body redacted, response body verbatim,
                 HTTP status, parsed errors) is now captured on
                 every Click & Drop call by `ClickAndDropClient`
                 via `ApiErrorRecorder` and surfaces on
                 `/super-admin/api-errors`, scoped to super-admins
                 only. Keeping the deep wire-debug surface there
                 instead of in the agent-facing modal:
                   - avoids leaking internal API mechanics into
                     the agent UX;
                   - keeps the operator surface in one place
                     across every integration (Landmark, Royal
                     Mail tracking, Royal Mail Click & Drop, …);
                   - means non-super-admins can never trip into
                     viewing request/response detail.

                 Earlier-shape (ReturnGo) modals that still
                 populate `$returnLabelDebugDetails` will not
                 render anything here any more — that channel is
                 dormant. Inspection lives on /super-admin/api-
                 errors. --}}
        </div>

        {{-- Footer --}}
        <div class="flex items-center justify-between gap-2 border-t border-zinc-200 bg-zinc-50 px-5 py-3 dark:border-zinc-800 dark:bg-zinc-950/40">
            <div class="text-xs text-zinc-500 dark:text-zinc-400">
                {{ __('No call is made until you click Generate label.') }}
            </div>
            <div class="flex items-center gap-2">
                <flux:button
                    variant="ghost"
                    size="sm"
                    wire:click="closeReturnLabelModal"
                    data-test="return-label-modal-cancel"
                >
                    {{ __('Cancel') }}
                </flux:button>
                <flux:button
                    variant="primary"
                    size="sm"
                    wire:click="confirmReturnLabel"
                    wire:loading.attr="disabled"
                    wire:target="confirmReturnLabel"
                    :disabled="! $rtnCanConfirm"
                    data-test="return-label-modal-confirm"
                >
                    <span wire:loading.remove wire:target="confirmReturnLabel">
                        {{ __('Generate label') }}
                    </span>
                    <span wire:loading wire:target="confirmReturnLabel">
                        {{ __('Generating…') }}
                    </span>
                </flux:button>
            </div>
        </div>
    </div>
</div>
</template>