{{--
    Operational-macro warning modal (Push 2G).

    Fires when the operator applies a macro whose attached action
    is operational — i.e. one of:

      - cancel_order
      - refund_order
      - edit_address
      - reship
      - generate_return_label

    Macros must NEVER silently run these actions. The warning
    walks the operator through three explicit choices:

      1. Open order panel — closes the warning, opens the slide-
         out for the active order so the operator runs the right
         action from More Actions there.
      2. Insert macro text only — drops the rendered macro body
         into the public-reply composer + clears any previous
         chip / pending attachments. No action call, no ReturnGo
         HTTP, no label row.
      3. Cancel — abandons everything; composer untouched.

    The warning is the ONLY thing applyMacro produces when an
    operational macro is staged. attach_file_template +
    plain-reply macros bypass the warning entirely.
--}}
@php
    $opMacroName = (string) ($pendingOperationalMacroName ?? '');
    $opActionType = (string) ($pendingOperationalMacroActionType ?? '');
    $opOrderId = $pendingOperationalMacroOrderId;
    $opActionLabel = match ($opActionType) {
        \App\Actions\Cancel\CancelShopifyOrderAction::KEY => __('Cancel order'),
        \App\Actions\Refund\RefundShopifyOrderAction::KEY => __('Refund order'),
        \App\Actions\EditAddress\EditAddressAction::KEY => __('Edit shipping address'),
        'reship' => __('Reship'),
        \App\Actions\GenerateReturnLabel\GenerateReturnLabelAction::KEY => __('Generate return label'),
        default => __('Operational action'),
    };
@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="operational-macro-warning-modal"
    wire:key="operational-macro-warning-{{ (int) $pendingOperationalMacroId }}"
>
    <div class="flex max-h-[90vh] w-full max-w-md 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.exclamation-triangle class="size-4 text-amber-600 dark:text-amber-400" />
                <flux:heading size="lg" level="2">{{ __('This macro runs an operational action') }}</flux:heading>
            </div>
            <button
                type="button"
                wire:click="dismissOperationalMacroWarning"
                class="text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200"
                data-test="operational-macro-warning-close"
            >
                <flux:icon.x-mark class="size-5" />
            </button>
        </div>

        {{-- Body --}}
        <div class="flex-1 overflow-y-auto px-5 py-4 space-y-4">
            <p class="text-sm text-zinc-700 dark:text-zinc-200">
                {!! __('The macro <strong>:name</strong> is linked to the <strong>:action</strong> action.', [
                    'name' => e($opMacroName !== '' ? $opMacroName : __('you just applied')),
                    'action' => e($opActionLabel),
                ]) !!}
            </p>
            <p class="text-sm text-zinc-600 dark:text-zinc-300">
                {{ __('Macros never run operational actions on their own. To run the action, open the Shopify order panel and use the relevant button there. Otherwise you can insert the macro\'s text into your reply without running anything.') }}
            </p>

            <ul class="space-y-2 text-xs text-zinc-500 dark:text-zinc-400">
                @if ($opOrderId !== null)
                    <li class="flex items-start gap-2" data-test="operational-macro-warning-has-order">
                        <flux:icon.shopping-bag class="mt-0.5 size-3.5 shrink-0" />
                        <span>{{ __('An order is active on this conversation — Open order panel will jump you to it.') }}</span>
                    </li>
                @else
                    <li class="flex items-start gap-2 text-amber-700 dark:text-amber-400" data-test="operational-macro-warning-no-order">
                        <flux:icon.exclamation-triangle class="mt-0.5 size-3.5 shrink-0" />
                        <span>{{ __('No order is currently open. Open the relevant order from the Shopify orders panel on the right before running this action.') }}</span>
                    </li>
                @endif
                <li class="flex items-start gap-2">
                    <flux:icon.document-text class="mt-0.5 size-3.5 shrink-0" />
                    <span>{{ __('Insert macro text only drops the reply body into the composer. It does NOT call ReturnGo, stage any file, or mutate any order.') }}</span>
                </li>
            </ul>
        </div>

        {{-- Footer --}}
        <div class="flex flex-col gap-2 border-t border-zinc-200 bg-zinc-50 px-5 py-3 dark:border-zinc-800 dark:bg-zinc-950/40 sm:flex-row sm:items-center sm:justify-end">
            <flux:button
                variant="ghost"
                size="sm"
                wire:click="dismissOperationalMacroWarning"
                data-test="operational-macro-warning-cancel"
            >
                {{ __('Cancel') }}
            </flux:button>
            <flux:button
                variant="ghost"
                size="sm"
                wire:click="confirmInsertMacroTextOnly"
                data-test="operational-macro-warning-insert-text"
            >
                {{ __('Insert macro text only') }}
            </flux:button>
            <flux:button
                variant="primary"
                size="sm"
                wire:click="openOrderPanelFromMacroWarning"
                :disabled="$opOrderId === null"
                data-test="operational-macro-warning-open-order"
            >
                {{ __('Open order panel') }}
            </flux:button>
        </div>
    </div>
</div>
</template>