{{--
    Scroll discipline mirrors the previous version — workspace
    layout owns the outer overflow; this section owns its own
    scroll so content past the fold stays reachable.
--}}
<section
    class="flex h-full w-full min-h-0 flex-1 flex-col gap-6 overflow-y-auto p-6"
    data-test="flows-index"
>
    @php
        $canManage = $this->canManage();
        $defaultFlows = $this->defaultFlows();
        $customByStore = $this->customFlowsByStore();
        $storesUsingDefaults = $this->storesUsingDefaults();
        $allStores = $this->allStores();
    @endphp

    {{-- ─── Header ──────────────────────────────────────────────── --}}
    <div class="flex items-end justify-between gap-3">
        <div class="flex flex-col gap-1">
            <flux:heading size="xl" level="1">{{ __('Self-help flows') }}</flux:heading>
            <p class="text-sm text-zinc-600 dark:text-zinc-400">
                {{ __('Default flows ship to every store. Custom store flows override a default with the same slug on a specific store. Customers reach published flows at /self-help/{account}/{store}.') }}
            </p>
        </div>

        @if ($canManage)
            <flux:button
                variant="primary"
                :href="route('flows.create')"
                wire:navigate
                icon="plus"
                data-test="flows-create"
            >
                {{ __('New flow') }}
            </flux:button>
        @endif
    </div>

    {{-- ─── Store summary ───────────────────────────────────────────
         Owner/admin glance: which stores use the default set, which
         have custom flows. Shipped here rather than as a separate
         page so the operator can see at-a-glance + jump to copy
         actions. --}}
    @if ($allStores->count() > 0)
        <div
            class="grid gap-3 sm:grid-cols-2"
            data-test="flows-store-summary"
        >
            <div class="rounded-lg border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-900">
                <div class="text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
                    {{ __('Using default flows') }}
                </div>
                <div
                    class="mt-2 flex flex-wrap gap-1.5 text-sm"
                    data-test="flows-stores-using-defaults"
                >
                    @forelse ($storesUsingDefaults as $store)
                        <flux:badge size="sm" color="zinc" data-store-slug="{{ $store->slug }}">
                            {{ $store->name }}
                        </flux:badge>
                    @empty
                        <span class="text-xs text-zinc-500 dark:text-zinc-400">
                            {{ __('Every store has at least one custom flow.') }}
                        </span>
                    @endforelse
                </div>
            </div>

            <div class="rounded-lg border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-900">
                <div class="text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
                    {{ __('Stores with custom flows') }}
                </div>
                <div
                    class="mt-2 flex flex-wrap gap-1.5 text-sm"
                    data-test="flows-stores-with-customs"
                >
                    @forelse ($customByStore as $row)
                        <flux:badge size="sm" color="sky" data-store-slug="{{ $row['store']->slug }}">
                            {{ $row['store']->name }} <span class="font-mono">({{ $row['flows']->count() }})</span>
                        </flux:badge>
                    @empty
                        <span class="text-xs text-zinc-500 dark:text-zinc-400">
                            {{ __('No store has custom flows yet.') }}
                        </span>
                    @endforelse
                </div>
            </div>
        </div>
    @endif

    {{-- ─── DEFAULT FLOWS ───────────────────────────────────────── --}}
    <div class="flex flex-col gap-3" data-test="flows-default-section">
        <div class="flex items-baseline justify-between gap-3">
            <div>
                <flux:heading size="lg" level="2">{{ __('Default flows') }}</flux:heading>
                <p class="text-xs text-zinc-500 dark:text-zinc-400">
                    {{ __('Account-wide templates. Surface on every store unless overridden by a same-slug store flow.') }}
                </p>
            </div>
        </div>

        @if ($defaultFlows->isEmpty())
            <div
                class="rounded-md border border-dashed border-zinc-200 px-6 py-8 text-center text-sm text-zinc-500 dark:border-zinc-800 dark:text-zinc-400"
                data-test="flows-default-empty"
            >
                {{ __('No default flows yet.') }}
            </div>
        @else
            @include('livewire.flows._index-flow-table', [
                'flows' => $defaultFlows,
                'canManage' => $canManage,
                'allStores' => $allStores,
                'tableTestKey' => 'flows-default-list',
            ])
        @endif
    </div>

    {{-- ─── CUSTOM STORE FLOWS ──────────────────────────────────── --}}
    <div class="flex flex-col gap-3" data-test="flows-custom-section">
        <div class="flex items-baseline justify-between gap-3">
            <div>
                <flux:heading size="lg" level="2">{{ __('Custom store flows') }}</flux:heading>
                <p class="text-xs text-zinc-500 dark:text-zinc-400">
                    {{ __('Per-store overrides + additions. A custom flow with the same slug as a default replaces the default on its store.') }}
                </p>
            </div>
        </div>

        @if ($customByStore->isEmpty())
            <div
                class="rounded-md border border-dashed border-zinc-200 px-6 py-8 text-center text-sm text-zinc-500 dark:border-zinc-800 dark:text-zinc-400"
                data-test="flows-custom-empty"
            >
                {{ __('No store has custom flows yet. Use "Copy to store" on a default to promote one.') }}
            </div>
        @else
            @foreach ($customByStore as $row)
                <div
                    class="flex flex-col gap-2"
                    data-test="flows-custom-store-block"
                    data-store-slug="{{ $row['store']->slug }}"
                >
                    <div class="flex items-baseline gap-2">
                        <flux:heading size="sm" level="3">{{ $row['store']->name }}</flux:heading>
                        <span class="text-xs font-mono text-zinc-400 dark:text-zinc-500">/{{ $row['store']->slug }}</span>
                    </div>
                    @include('livewire.flows._index-flow-table', [
                        'flows' => $row['flows'],
                        'canManage' => $canManage,
                        'allStores' => $allStores,
                        'tableTestKey' => 'flows-custom-list-'.$row['store']->id,
                    ])
                </div>
            @endforeach
        @endif
    </div>
</section>