{{--
    Stores operational overview.

    Each store renders as a sibling `<div>` card (not an `<a>`),
    because each card contains an Archive button — and HTML forbids
    nesting a `<button>` inside an `<a>`. The "Open settings →" link
    inside the card header is the explicit navigation target; the
    Archive button is a separate interactive element.

    Data shape: `$this->stores` is an Eloquent Collection (settings
    eager-loaded). `$this->integrationSummaryFor($store)` returns
    the shopify/helm/custom_count shape for the row badges. Both
    are tenant-scoped — no per-row queries inside the Blade loop.
--}}
<section class="flex h-full w-full flex-1 flex-col gap-6">
    {{-- Header --}}
    <div class="flex flex-col gap-2">
        <div class="flex items-center gap-2 text-xs text-zinc-500 dark:text-zinc-400" data-test="tenant-context">
            <flux:icon.building-office-2 class="size-3.5" />
            <span>{{ __('Workspace') }}:</span>
            <flux:badge color="zinc" size="sm">{{ $account->name }}</flux:badge>
        </div>
        <flux:heading size="xl" level="1">{{ __('Stores') }}</flux:heading>
        <flux:subheading>
            {{ __('Operational overview. Each store has its own SLA, customer self-service settings and integrations.') }}
        </flux:subheading>
    </div>

    {{-- Filter bar --}}
    <div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between" data-test="stores-filter-bar">
        <div class="w-full sm:max-w-xs">
            <flux:input
                wire:model.live.debounce.300ms="search"
                :placeholder="__('Search stores by name')"
                icon="magnifying-glass"
                clearable
                data-test="stores-search"
            />
        </div>

        <div class="flex items-center gap-2">
            <flux:select
                wire:model.live="sort"
                size="sm"
                data-test="stores-sort"
            >
                <flux:select.option value="name">{{ __('Sort: Name') }}</flux:select.option>
                <flux:select.option value="dispatch_sla_working_days">{{ __('Sort: SLA') }}</flux:select.option>
                <flux:select.option value="updated_at">{{ __('Sort: Last updated') }}</flux:select.option>
            </flux:select>

            <flux:select
                wire:model.live="direction"
                size="sm"
                data-test="stores-direction"
            >
                <flux:select.option value="asc">{{ __('Asc') }}</flux:select.option>
                <flux:select.option value="desc">{{ __('Desc') }}</flux:select.option>
            </flux:select>
        </div>
    </div>

    <div class="grid gap-6 {{ $this->canManage ? 'lg:grid-cols-3' : 'lg:grid-cols-1' }}">
        {{-- Stores list (cards) --}}
        <div class="{{ $this->canManage ? 'lg:col-span-2' : '' }}">
            <div class="flex flex-col gap-3" data-test="stores-list">
                @forelse ($this->stores as $store)
                    @php
                        $summary = $this->integrationSummaryFor($store);
                        $settings = $store->settings;
                    @endphp

                    {{-- Card root is a <div> (not <a>) so that the
                         "Archive" button can live inside without
                         violating HTML's no-button-in-anchor rule.
                         The "Open settings →" link is the explicit
                         navigation control. --}}
                    @php $isConfirmingArchive = $confirmingArchiveOf === $store->id; @endphp

                    <div
                        class="rounded-xl border border-zinc-200 bg-white p-5 transition hover:border-zinc-300 hover:shadow-sm dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700"
                        data-test="store-row"
                        data-store-id="{{ $store->id }}"
                        data-store-slug="{{ $store->slug }}"
                    >
                        {{-- Row header: name + status + actions --}}
                        <div class="flex items-start justify-between gap-3">
                            <div class="min-w-0">
                                <div class="flex flex-wrap items-center gap-2">
                                    <span class="truncate text-base font-semibold text-zinc-900 dark:text-zinc-100" data-test="store-name">
                                        {{ $store->name }}
                                    </span>
                                    <flux:badge
                                        size="sm"
                                        :color="$store->status === \App\Models\Store::STATUS_ACTIVE ? 'lime' : 'zinc'"
                                    >
                                        {{ $store->status }}
                                    </flux:badge>
                                </div>
                                <div class="mt-1 flex flex-wrap items-center gap-2 text-xs text-zinc-500 dark:text-zinc-400">
                                    <span class="font-mono">{{ $store->slug }}</span>
                                    @if ($settings)
                                        <span>·</span>
                                        <span data-test="store-sla-summary">
                                            {{ trans_choice('SLA: {1} :n working day|[2,*] SLA: :n working days', $settings->dispatch_sla_working_days, ['n' => $settings->dispatch_sla_working_days]) }}
                                        </span>
                                    @endif
                                    <span>·</span>
                                    <span>{{ __('Updated') }} {{ $store->updated_at->diffForHumans() }}</span>
                                </div>
                            </div>

                            <div class="flex shrink-0 items-center gap-2">
                                @if ($this->canManage)
                                    <flux:button
                                        variant="ghost"
                                        size="xs"
                                        icon="archive-box"
                                        wire:click="confirmArchiveStore({{ $store->id }})"
                                        :title="__('Archive store')"
                                        data-test="store-archive"
                                    >
                                        {{ __('Archive') }}
                                    </flux:button>
                                @endif
                                <a
                                    wire:navigate
                                    href="{{ route('stores.show', $store->id) }}"
                                    class="text-xs font-medium text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100"
                                    data-test="store-open-settings"
                                >
                                    {{ __('Open settings') }} →
                                </a>
                            </div>
                        </div>

                        {{-- Archive confirmation prompt — inline so
                             the operator sees which store is affected.
                             Two-step gate matches the dashboard
                             remove-widget pattern. --}}
                        @if ($this->canManage && $isConfirmingArchive)
                            <div
                                class="mt-3 flex flex-wrap items-center justify-between gap-2 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900 dark:border-amber-900/40 dark:bg-amber-950/20 dark:text-amber-200"
                                data-test="store-archive-confirm"
                            >
                                <span>
                                    {{ __('Archive ":name"? Tickets, settings and integrations remain but the store is hidden from the index.', ['name' => $store->name]) }}
                                </span>
                                <div class="flex items-center gap-2">
                                    <flux:button
                                        variant="ghost"
                                        size="xs"
                                        wire:click="cancelArchiveStore"
                                        data-test="store-archive-cancel"
                                    >
                                        {{ __('Cancel') }}
                                    </flux:button>
                                    <flux:button
                                        variant="primary"
                                        size="xs"
                                        wire:click="archiveStore({{ $store->id }})"
                                        data-test="store-archive-confirm-button"
                                    >
                                        {{ __('Archive') }}
                                    </flux:button>
                                </div>
                            </div>
                        @endif

                        {{-- Defensive: every store should have settings (Phase 1
                             invariant), but if a lifecycle bug ever drops the
                             row, surface it as an amber warning rather than
                             silently rendering empty config lines. --}}
                        @if (! $settings)
                            <div class="mt-4 flex items-start gap-2 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800 dark:border-amber-900/40 dark:bg-amber-950/20 dark:text-amber-200" data-test="store-settings-missing">
                                <flux:icon.exclamation-triangle class="mt-0.5 size-3.5 shrink-0" />
                                <span>{{ __('Settings row missing for this store. Open settings to repair.') }}</span>
                            </div>
                        @else
                            {{-- Configuration summary line --}}
                            <div class="mt-4 flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs text-zinc-600 dark:text-zinc-300">
                                <span class="inline-flex items-center gap-1" data-test="store-returns-portal">
                                    {{ __('Returns portal') }}:
                                    @if ($settings->returns_portal_url)
                                        <flux:icon.check class="size-3.5 text-lime-600 dark:text-lime-400" />
                                    @else
                                        <flux:icon.x-mark class="size-3.5 text-zinc-400 dark:text-zinc-500" />
                                    @endif
                                </span>

                                <span class="inline-flex items-center gap-1" data-test="store-faq">
                                    {{ __('FAQ') }}:
                                    @if ($settings->faq_url)
                                        <flux:icon.check class="size-3.5 text-lime-600 dark:text-lime-400" />
                                    @else
                                        <flux:icon.x-mark class="size-3.5 text-zinc-400 dark:text-zinc-500" />
                                    @endif
                                </span>

                                <span class="text-zinc-300 dark:text-zinc-600">|</span>

                                <span data-test="store-cancel-mode">
                                    {{ __('Cancel order') }}:
                                    <span class="font-medium text-zinc-800 dark:text-zinc-200">
                                        {{ ucfirst($settings->cancel_order_mode->value) }}
                                    </span>
                                </span>

                                <span data-test="store-edit-mode">
                                    {{ __('Edit address') }}:
                                    <span class="font-medium text-zinc-800 dark:text-zinc-200">
                                        {{ ucfirst($settings->edit_address_mode->value) }}
                                    </span>
                                </span>
                            </div>

                            {{-- Integration + flag badges --}}
                            <div class="mt-3 flex flex-wrap items-center gap-1.5">
                                <flux:badge
                                    size="sm"
                                    :color="match ($summary['shopify']) {
                                        'configured' => 'lime',
                                        'error'      => 'red',
                                        default      => 'zinc',
                                    }"
                                    data-test="store-int-shopify"
                                    data-status="{{ $summary['shopify'] }}"
                                >
                                    Shopify {{ match ($summary['shopify']) {
                                        'configured' => '✓',
                                        'error'      => '!',
                                        default      => '✗',
                                    } }}
                                </flux:badge>

                                <flux:badge
                                    size="sm"
                                    :color="match ($summary['helm']) {
                                        'configured' => 'lime',
                                        'error'      => 'red',
                                        default      => 'zinc',
                                    }"
                                    data-test="store-int-helm"
                                    data-status="{{ $summary['helm'] }}"
                                >
                                    Helm {{ match ($summary['helm']) {
                                        'configured' => '✓',
                                        'error'      => '!',
                                        default      => '✗',
                                    } }}
                                </flux:badge>

                                @if ($summary['custom_count'] > 0)
                                    <flux:badge size="sm" color="zinc" data-test="store-int-custom">
                                        {{ __('Custom') }}: {{ $summary['custom_count'] }}
                                    </flux:badge>
                                @endif

                                @if ($settings->high_volume_mode)
                                    <flux:badge size="sm" color="orange" data-test="store-flag-hv">
                                        {{ __('High volume') }}
                                    </flux:badge>
                                @endif

                                @if ($settings->wismo_auto_close_enabled)
                                    <flux:badge size="sm" color="sky" data-test="store-flag-wismo">
                                        {{ __('WISMO auto-close') }}
                                    </flux:badge>
                                @endif
                            </div>
                        @endif
                    </div>{{-- /store-row card. Closes the `<div data-test="store-row">` opened above. Was previously an `</a>` left over from when the whole card was an anchor — that mismatch broke DOM nesting and caused store cards to render inside each other. --}}
                @empty
                    <div class="rounded-xl border border-dashed border-zinc-300 p-8 text-center text-sm text-zinc-500 dark:border-zinc-700 dark:text-zinc-400" data-test="stores-empty">
                        @if (trim($search) !== '')
                            {{ __('No stores match your search.') }}
                        @else
                            {{ __('No stores yet.') }}
                        @endif
                    </div>
                @endforelse
            </div>
        </div>

        {{-- Create store form — owner/admin only. Server-side gate
             in createStore() blocks any forged Livewire call too. --}}
        @if ($this->canManage)
            <div class="lg:col-span-1" data-test="create-store-card">
                <div class="rounded-xl border border-zinc-200 p-5 dark:border-zinc-800 dark:bg-zinc-900">
                    <flux:heading size="lg">{{ __('Create a store') }}</flux:heading>
                    <flux:subheading>{{ __('Add a new store to this account.') }}</flux:subheading>

                    <form wire:submit="createStore" class="mt-5 space-y-4">
                        <flux:input
                            wire:model="name"
                            :label="__('Name')"
                            type="text"
                            required
                            autocomplete="off"
                            :description="__('A URL slug is generated automatically from the name. Duplicate names within this account get a numeric suffix.')"
                            data-test="store-name-input"
                        />

                        <div class="pt-2">
                            <flux:button variant="primary" type="submit" class="w-full" data-test="store-create">
                                {{ __('Create store') }}
                            </flux:button>
                        </div>
                    </form>
                </div>
            </div>
        @endif
    </div>
</section>