@php
    $steps = [
        1 => ['label' => __('Upload'), 'icon' => 'arrow-up-tray'],
        2 => ['label' => __('Map columns'), 'icon' => 'table-cells'],
        3 => ['label' => __('Assign'), 'icon' => 'user-group'],
        4 => ['label' => __('Review'), 'icon' => 'check-circle'],
        5 => ['label' => __('Result'), 'icon' => 'flag'],
    ];
    $classColors = ['new' => 'emerald', 'match' => 'sky', 'possible' => 'amber', 'error' => 'rose'];
    $classCounts = $batch?->options['classes'] ?? [];
    $select = 'mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500';
@endphp

<div class="mx-auto max-w-5xl px-4 py-6 sm:px-6 lg:px-8">
    <div class="mb-6">
        <a href="{{ route('crm.data') }}" wire:navigate class="inline-flex items-center gap-1 text-xs font-medium text-slate-500 hover:text-slate-700">
            <x-icon name="chevron-left" class="h-3.5 w-3.5" /> {{ __('Imports and Exports') }}
        </a>
        <h1 class="mt-2 text-2xl font-bold tracking-tight text-slate-900">{{ __('Import client profiles') }}</h1>
        <p class="mt-1 text-sm text-slate-500">{{ __('Load organisations and their contacts from a spreadsheet into a portfolio. Nothing enters the pipeline until someone pulls it from the work queue.') }}</p>
    </div>

    {{-- Progress --}}
    <div class="mb-8">
        <div class="flex items-center">
            @foreach ($steps as $n => $s)
                @php $state = $step > $n ? 'done' : ($step === $n ? 'current' : 'todo'); @endphp
                <button type="button" wire:click="goToStep({{ $n }})"
                    class="group flex shrink-0 items-center gap-2.5 rounded-full py-1 pr-1 text-left transition {{ $state === 'todo' ? 'cursor-default' : '' }}"
                    @if ($state !== 'done') disabled @endif>
                    <span @class([
                        'flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold ring-1 transition',
                        'bg-indigo-600 text-white ring-indigo-600 shadow-sm shadow-indigo-200' => $state === 'current',
                        'bg-emerald-500 text-white ring-emerald-500' => $state === 'done',
                        'bg-white text-slate-400 ring-slate-200' => $state === 'todo',
                    ])>
                        @if ($state === 'done')
                            <x-icon name="check" class="h-5 w-5" />
                        @else
                            <x-icon name="{{ $s['icon'] }}" class="h-5 w-5" />
                        @endif
                    </span>
                    <span class="hidden md:block">
                        <span class="block text-[10px] font-semibold uppercase tracking-wider {{ $state === 'todo' ? 'text-slate-300' : 'text-slate-400' }}">{{ __('Step') }} {{ $n }}</span>
                        <span @class([
                            'block text-sm font-semibold leading-tight',
                            'text-indigo-700' => $state === 'current',
                            'text-slate-700' => $state === 'done',
                            'text-slate-400' => $state === 'todo',
                        ])>{{ $s['label'] }}</span>
                    </span>
                </button>
                @if (! $loop->last)
                    <div class="mx-2 h-0.5 flex-1 rounded-full {{ $step > $n ? 'bg-emerald-400' : 'bg-slate-200' }} transition"></div>
                @endif
            @endforeach
        </div>
    </div>

    <div class="space-y-5">
        @if ($step >= 3 && $errors->any())
            <div class="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
                <ul class="list-inside list-disc space-y-0.5">
                    @foreach ($errors->all() as $message)
                        <li>{{ $message }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        {{-- ===================== STEP 1 · UPLOAD ===================== --}}
        @if ($step === 1)
            <x-card class="overflow-hidden !p-0">
                <div class="flex items-center gap-3 border-b border-slate-100 bg-slate-50/60 px-5 py-3">
                    <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-100 text-indigo-700"><x-icon name="arrow-up-tray" class="h-4 w-4" /></span>
                    <h2 class="text-sm font-bold text-slate-900">{{ __('Where is the list?') }}</h2>
                </div>
                <div class="space-y-4 p-5">
                    <div class="flex flex-wrap items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-sm font-medium sm:w-fit">
                        @foreach (['upload' => ['label' => __('Excel or CSV file'), 'icon' => 'document-text'], 'google_sheet' => ['label' => __('Google Sheet link'), 'icon' => 'link']] as $key => $meta)
                            <button type="button" wire:click="$set('sourceType', '{{ $key }}')"
                                class="flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 transition {{ $sourceType === $key ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">
                                <x-icon :name="$meta['icon']" class="h-4 w-4" />
                                {{ $meta['label'] }}
                            </button>
                        @endforeach
                    </div>

                    @if ($sourceType === 'upload')
                        <div>
                            <x-label for="crm-upload" value="{{ __('Spreadsheet (.xlsx or .csv, up to 10 MB)') }}" />
                            <input id="crm-upload" type="file" wire:model="upload" accept=".xlsx,.xls,.csv"
                                class="mt-1 block w-full rounded-xl border border-slate-300 text-sm text-slate-600 file:mr-3 file:rounded-lg file:border-0 file:bg-indigo-50 file:px-3 file:py-2 file:text-sm file:font-semibold file:text-indigo-700 hover:file:bg-indigo-100" />
                            <div wire:loading wire:target="upload" class="mt-2 text-xs text-slate-500">{{ __('Reading the file…') }}</div>
                            <x-input-error for="upload" class="mt-2" />
                        </div>
                    @else
                        <div>
                            <x-label for="crm-sheet-url" value="{{ __('Google Sheet link') }}" />
                            <div class="mt-1 flex flex-col gap-2 sm:flex-row">
                                <x-input id="crm-sheet-url" type="text" class="block w-full" wire:model="sheetUrl" placeholder="https://docs.google.com/spreadsheets/d/…" />
                                <x-button type="button" wire:click="loadSheet" wire:loading.attr="disabled" wire:target="loadSheet">
                                    <span wire:loading.remove wire:target="loadSheet">{{ __('Load') }}</span>
                                    <span wire:loading wire:target="loadSheet">{{ __('Loading…') }}</span>
                                </x-button>
                            </div>
                            <p class="mt-1 text-xs text-slate-400">{{ __('The sheet must be shared as "Anyone with the link can view".') }}</p>
                            <x-input-error for="sheetUrl" class="mt-2" />
                        </div>
                    @endif

                    <div class="flex flex-col gap-2 rounded-xl border border-dashed border-slate-200 p-4 text-sm text-slate-600 sm:flex-row sm:items-center sm:justify-between">
                        <p>{{ __('Starting from scratch? The template has every column the import understands, with example rows. One row can hold an organisation and one of its contacts; repeat the organisation for more contacts.') }}</p>
                        <x-secondary-button type="button" wire:click="downloadTemplate" class="shrink-0">
                            <x-icon name="arrow-down-tray" class="mr-1.5 h-4 w-4" /> {{ __('Template') }}
                        </x-secondary-button>
                    </div>
                </div>
            </x-card>
        @endif

        {{-- ===================== STEP 2 · MAP ===================== --}}
        @if ($step === 2 && $batch)
            @if ($previous)
                <div class="flex items-start gap-3 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
                    <x-icon name="exclamation-triangle" class="mt-0.5 h-4 w-4 shrink-0" />
                    <p>{{ __('This file was imported on :date by :name. Rows already on record will show as matches, so nothing is created twice.', [
                        'date' => $previous->created_at->timezone(config('app.display_timezone'))->format('j M Y'),
                        'name' => $previous->user?->name ?? __('someone'),
                    ]) }}
                        <a href="{{ route('crm.imports.show', $previous) }}" wire:navigate class="font-semibold underline">{{ __('See that import') }}</a>
                    </p>
                </div>
            @endif

            <x-card class="overflow-hidden !p-0">
                <div class="flex items-center gap-3 border-b border-slate-100 bg-slate-50/60 px-5 py-3">
                    <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-100 text-indigo-700"><x-icon name="table-cells" class="h-4 w-4" /></span>
                    <h2 class="text-sm font-bold text-slate-900">{{ $batch->file_name }}</h2>
                </div>
                <div class="space-y-4 p-5">
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        @if (count($sheetNames) > 1)
                            <div>
                                <x-label for="crm-sheet" value="{{ __('Sheet') }}" />
                                <select id="crm-sheet" wire:model.live="sheet" class="{{ $select }}">
                                    @foreach ($sheetNames as $name)
                                        <option value="{{ $name }}">{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        @endif
                        <div>
                            <x-label for="crm-header" value="{{ __('Header row') }}" />
                            <select id="crm-header" wire:model.live="headerRow" class="{{ $select }}">
                                @foreach ($previewGrid as $index => $cells)
                                    <option value="{{ $index }}">{{ __('Row :n', ['n' => $index + 1]) }}: {{ \Illuminate\Support\Str::limit(implode(', ', array_filter($cells, fn ($c) => trim((string) $c) !== '')), 70) }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="overflow-x-auto rounded-xl border border-slate-200">
                        <table class="min-w-full divide-y divide-slate-100 text-xs">
                            <tbody class="divide-y divide-slate-100">
                                @foreach (array_slice($previewGrid, $headerRow, 5, true) as $index => $cells)
                                    <tr wire:key="preview-{{ $index }}" class="{{ $index === $headerRow ? 'bg-indigo-50/60 font-semibold text-indigo-800' : 'text-slate-600' }}">
                                        @foreach ($cells as $cell)
                                            <td class="max-w-[12rem] truncate px-3 py-2">{{ $cell }}</td>
                                        @endforeach
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </x-card>

            @foreach (['organisation' => __('Organisation columns'), 'contact' => __('Contact columns, from the same row')] as $group => $title)
                <x-card class="overflow-hidden !p-0">
                    <div class="flex items-center gap-3 border-b border-slate-100 bg-slate-50/60 px-5 py-3">
                        <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-100 text-indigo-700"><x-icon :name="$group === 'organisation' ? 'building-office' : 'users'" class="h-4 w-4" /></span>
                        <h2 class="text-sm font-bold text-slate-900">{{ $title }}</h2>
                    </div>
                    <div class="grid grid-cols-1 gap-4 p-5 sm:grid-cols-2 lg:grid-cols-3">
                        @foreach ($fields as $field => [$label, $fieldGroup])
                            @if ($fieldGroup === $group)
                                <div wire:key="map-{{ $field }}">
                                    <x-label for="map-{{ $field }}" value="{{ __($label) }}{{ in_array($field, \App\Services\Crm\Import\ClientProfileFields::REQUIRED, true) ? ' *' : '' }}" />
                                    <select id="map-{{ $field }}" wire:model="mapping.{{ $field }}" class="{{ $select }}">
                                        <option value="">{{ __('Not in this file') }}</option>
                                        @foreach ($headers as $header)
                                            <option value="{{ $header }}">{{ $header }}</option>
                                        @endforeach
                                    </select>
                                    <x-input-error for="mapping.{{ $field }}" class="mt-2" />
                                </div>
                            @endif
                        @endforeach
                    </div>
                </x-card>
            @endforeach

            <label class="flex items-center gap-2 text-sm text-slate-600">
                <input type="checkbox" wire:model="rememberMapping" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                {{ __('Remember these columns for the next import') }}
            </label>
        @endif

        {{-- ===================== STEP 3 · ASSIGN ===================== --}}
        @if ($step === 3 && $batch)
            <x-card class="overflow-hidden !p-0">
                <div class="flex items-center gap-3 border-b border-slate-100 bg-slate-50/60 px-5 py-3">
                    <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-100 text-indigo-700"><x-icon name="folder" class="h-4 w-4" /></span>
                    <h2 class="text-sm font-bold text-slate-900">{{ __('Which portfolio') }}</h2>
                </div>
                <div class="space-y-4 p-5">
                    <div class="grid gap-3 sm:grid-cols-2">
                        @foreach (['new' => [__('A new list'), __('Start a portfolio for these organisations.'), 'plus'], 'existing' => [__('An existing list'), __('Top up a portfolio already being worked.'), 'folder']] as $key => [$title, $hint, $icon])
                            <button type="button" wire:click="$set('target', '{{ $key }}')"
                                class="rounded-2xl border-2 p-4 text-left transition {{ $target === $key ? 'border-indigo-400 bg-indigo-50/50 ring-2 ring-indigo-100' : 'border-slate-200 bg-white hover:border-indigo-300' }}">
                                <span class="flex items-center gap-2 text-sm font-bold text-slate-900"><x-icon :name="$icon" class="h-4 w-4" /> {{ $title }}</span>
                                <span class="mt-1 block text-xs text-slate-500">{{ $hint }}</span>
                            </button>
                        @endforeach
                    </div>

                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-12">
                        @if ($target === 'existing')
                            <div class="sm:col-span-12">
                                <x-label for="imp-portfolio" value="{{ __('Portfolio') }}" />
                                <select id="imp-portfolio" wire:model.live="portfolioId" class="{{ $select }}">
                                    <option value="">{{ __('Choose…') }}</option>
                                    @foreach ($portfolios as $portfolio)
                                        <option value="{{ $portfolio->id }}">{{ $portfolio->name }}</option>
                                    @endforeach
                                </select>
                                <x-input-error for="portfolioId" class="mt-2" />
                                @if ($portfolios->isEmpty())
                                    <p class="mt-1 text-xs text-slate-400">{{ __('There is no open list you may add to.') }}</p>
                                @endif
                            </div>
                        @else
                            <div class="sm:col-span-6">
                                <x-label for="imp-name" value="{{ __('List name') }}" />
                                <x-input id="imp-name" type="text" class="mt-1 block w-full" wire:model="listName" placeholder="{{ __('e.g. Harare NGOs') }}" />
                                <x-input-error for="listName" class="mt-2" />
                            </div>
                            <div class="sm:col-span-6">
                                <x-label for="imp-sponsor" value="{{ __('Sponsor (who brought the list)') }}" />
                                <select id="imp-sponsor" wire:model="sponsorId" class="{{ $select }}">
                                    @foreach ($teamUsers as $person)
                                        <option value="{{ $person->id }}">{{ $person->name }}</option>
                                    @endforeach
                                </select>
                                <x-input-error for="sponsorId" class="mt-2" />
                            </div>
                            <div class="sm:col-span-6">
                                <x-label for="imp-mode" value="{{ __('Mode') }}" />
                                <select id="imp-mode" wire:model="mode" class="{{ $select }}">
                                    <option value="delegated">{{ __('Delegated: the assignees work it, the sponsor watches') }}</option>
                                    <option value="joint">{{ __('Joint: sponsor and assignees work it together') }}</option>
                                </select>
                            </div>
                            <div class="sm:col-span-6">
                                <x-label for="imp-close" value="{{ __('Target close date (optional)') }}" />
                                <x-input id="imp-close" type="date" class="mt-1 block w-full" wire:model="targetCloseOn" />
                            </div>
                        @endif
                        <div class="sm:col-span-6">
                            <x-label for="imp-tier" value="{{ __('Tier for rows without one') }}" />
                            <select id="imp-tier" wire:model="defaultTier" class="{{ $select }}">
                                <option value="">{{ __('None') }}</option>
                                @foreach (\App\Models\Customer::PRIORITY_TIERS as $value => $label)
                                    <option value="{{ $value }}">{{ __($label) }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="sm:col-span-6">
                            <x-label for="imp-source" value="{{ __('Source for rows without one') }}" />
                            <select id="imp-source" wire:model="source" class="{{ $select }}">
                                <option value="">{{ __('Not recorded') }}</option>
                                @foreach ($sources as $value => $label)
                                    <option value="{{ $value }}">{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </x-card>

            <x-card class="overflow-hidden !p-0">
                <div class="flex items-center gap-3 border-b border-slate-100 bg-slate-50/60 px-5 py-3">
                    <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-100 text-indigo-700"><x-icon name="user-group" class="h-4 w-4" /></span>
                    <h2 class="text-sm font-bold text-slate-900">{{ __('Who works it') }}</h2>
                </div>
                <div class="space-y-4 p-5">
                    <div class="flex flex-wrap gap-2">
                        @foreach ($teamUsers as $person)
                            <label wire:key="imp-assignee-{{ $person->id }}" class="flex cursor-pointer items-center gap-2 rounded-xl border border-slate-200 px-3 py-1.5 text-sm text-slate-600 transition has-[:checked]:border-indigo-400 has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-700">
                                <input type="checkbox" value="{{ $person->id }}" wire:model.live="assigneeIds" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                                {{ $person->name }}
                                @if (isset($split[$person->id]))
                                    <span class="rounded-full bg-white px-1.5 text-[11px] font-semibold tabular-nums text-indigo-700 ring-1 ring-indigo-200">{{ $split[$person->id] }}</span>
                                @endif
                            </label>
                        @endforeach
                    </div>
                    <x-input-error for="assigneeIds" class="mt-2" />

                    <div>
                        <x-label for="imp-split" value="{{ __('Split') }}" />
                        <select id="imp-split" wire:model.live="splitRule" class="{{ $select }} sm:w-72">
                            @foreach (\App\Models\Crm\Portfolio::SPLIT_RULES as $value => $label)
                                <option value="{{ $value }}">{{ __($label) }}</option>
                            @endforeach
                        </select>
                        <p class="mt-1 text-xs text-slate-400">{{ __('By sector and by tier keep each group with one person. The number beside each name is how many organisations they would receive.') }}</p>
                        <x-input-error for="splitRule" class="mt-2" />
                    </div>
                </div>
            </x-card>
        @endif

        {{-- ===================== STEP 4 · REVIEW ===================== --}}
        @if ($step === 4 && $batch)
            @php
                $reviewMeta = ['' => __('All rows')] + array_map(fn ($label) => __($label), \App\Services\Crm\Import\ProfileStager::CLASSES);
                $pages = (int) ceil($review['total'] / 25);
            @endphp

            <section class="grid grid-cols-2 gap-4 sm:grid-cols-4">
                @foreach (\App\Services\Crm\Import\ProfileStager::CLASSES as $class => $label)
                    <button type="button" wire:click="filterReview('{{ $class }}')" class="text-left">
                        <x-card class="flex items-center gap-3 p-4 transition hover:-translate-y-0.5 {{ $reviewClass === $class ? 'ring-2 ring-indigo-300' : '' }}">
                            <x-badge :color="$classColors[$class]">{{ number_format($classCounts[$class] ?? 0) }}</x-badge>
                            <span class="text-sm font-semibold text-slate-700">{{ __($label) }}</span>
                        </x-card>
                    </button>
                @endforeach
            </section>

            <x-card class="overflow-hidden">
                <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-center sm:justify-between sm:p-5">
                    <div>
                        <h2 class="text-base font-semibold text-slate-900">{{ $reviewMeta[$reviewClass] ?? __('All rows') }}</h2>
                        <p class="text-xs text-slate-400">{{ __('Nothing is merged. For each match, link the existing record, fill in what it is missing, or skip the row.') }}</p>
                    </div>
                    <div class="flex flex-wrap items-center gap-3 text-sm">
                        @if (($classCounts['match'] ?? 0) > 0)
                            <button type="button" wire:click="decideAll('match', 'link')" class="font-medium text-indigo-600 hover:text-indigo-800">{{ __('Link all matches') }}</button>
                            <button type="button" wire:click="decideAll('match', 'skip')" class="font-medium text-slate-500 hover:text-slate-700">{{ __('Skip all matches') }}</button>
                        @endif
                        @if (($classCounts['possible'] ?? 0) > 0)
                            <button type="button" wire:click="decideAll('possible', 'skip')" class="font-medium text-slate-500 hover:text-slate-700">{{ __('Skip all possible duplicates') }}</button>
                        @endif
                    </div>
                </div>

                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-100">
                        <thead>
                            <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Row') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Organisation') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Contact') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Class') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('What to do') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @forelse ($review['rows'] as $row)
                                @php
                                    $choice = $decisions[$row['i']] ?? [];
                                    $decidable = in_array($row['class'], ['match', 'possible'], true) && $row['same_as'] === null;
                                @endphp
                                <tr wire:key="review-{{ $row['i'] }}" class="align-top transition hover:bg-slate-50/70">
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm tabular-nums text-slate-500">{{ $row['row'] }}</td>
                                    <td class="px-3 lg:px-4 py-4 text-sm">
                                        <span class="font-medium text-slate-900">{{ $row['org']['name'] ?? __('No name') }}</span>
                                        <p class="mt-0.5 text-xs text-slate-400">{{ collect([$row['org']['website'] ?? null, $row['org']['email'] ?? null, $row['org']['phone'] ?? null])->filter()->join(' · ') }}</p>
                                    </td>
                                    <td class="px-3 lg:px-4 py-4 text-sm text-slate-600">
                                        {{ $row['contact']['name'] ?? '-' }}
                                        @if (! empty($row['contact']['email']))
                                            <p class="text-xs text-slate-400">{{ $row['contact']['email'] }}</p>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                        <x-badge :color="$classColors[$row['class']]">{{ __(\App\Services\Crm\Import\ProfileStager::CLASSES[$row['class']]) }}</x-badge>
                                    </td>
                                    <td class="px-3 lg:px-4 py-4 text-sm text-slate-600">
                                        @if ($row['class'] === 'error')
                                            <span class="text-rose-700">{{ implode(' ', $row['errors']) }}</span>
                                        @elseif ($row['same_as'] !== null)
                                            {{ __('Same organisation as an earlier row: its contact is added there.') }}
                                        @elseif ($row['class'] === 'new')
                                            {{ __('Create a new prospect') }}
                                        @elseif ($decidable)
                                            <div class="space-y-2">
                                                <select wire:model.live="decisions.{{ $row['i'] }}.action" class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 {{ empty($choice['action']) ? 'border-amber-400 bg-amber-50' : '' }}">
                                                    <option value="">{{ __('Choose…') }}</option>
                                                    @foreach (\App\Services\Crm\Import\ClientProfileImporter::DECISIONS as $action => $label)
                                                        <option value="{{ $action }}">{{ __($label) }}</option>
                                                    @endforeach
                                                </select>
                                                @if (in_array($choice['action'] ?? '', ['link', 'update'], true) && count($row['matches']) > 1)
                                                    <select wire:model.live="decisions.{{ $row['i'] }}.customer_id" class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                                        @foreach ($row['matches'] as $match)
                                                            <option value="{{ $match['customer_id'] }}">{{ $customers[$match['customer_id']]->name ?? __('Organisation #:id', ['id' => $match['customer_id']]) }}</option>
                                                        @endforeach
                                                    </select>
                                                @endif
                                                <ul class="space-y-0.5 text-xs text-slate-400">
                                                    @foreach ($row['matches'] as $match)
                                                        @php $existing = $customers[$match['customer_id']] ?? null; @endphp
                                                        <li>
                                                            {{ $existing?->name ?? __('Organisation #:id', ['id' => $match['customer_id']]) }}:
                                                            {{ __('same :fields', ['fields' => implode(', ', $match['matched_on'])]) }}.
                                                            {{ $existing?->relationshipOwner ? __('Owned by :name.', ['name' => $existing->relationshipOwner->name]) : __('No relationship owner.') }}
                                                        </li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="px-6 py-12">
                                        <x-empty-state icon="check-circle" :title="__('No rows here')" :message="__('No row in this file is in this class.')" class="border-0 bg-transparent py-0" />
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                @if ($pages > 1)
                    <div class="flex items-center justify-between border-t border-slate-100 px-4 py-3 text-sm sm:px-6">
                        <span class="text-slate-500">{{ __('Page :page of :pages', ['page' => $reviewPage, 'pages' => $pages]) }}</span>
                        <div class="flex gap-2">
                            @if ($reviewPage > 1)
                                <x-secondary-button type="button" wire:click="reviewGoTo({{ $reviewPage - 1 }})">{{ __('Previous') }}</x-secondary-button>
                            @endif
                            @if ($reviewPage < $pages)
                                <x-secondary-button type="button" wire:click="reviewGoTo({{ $reviewPage + 1 }})">{{ __('Next') }}</x-secondary-button>
                            @endif
                        </div>
                    </div>
                @endif
            </x-card>
        @endif

        {{-- Sticky footer --}}
        @if ($step > 1)
            <div class="sticky bottom-3 z-20 mt-1 flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-slate-200 bg-white/90 px-4 py-3 shadow-[0_8px_30px_-8px_rgba(15,23,42,0.25)] backdrop-blur">
                <div class="flex items-center gap-3">
                    <x-secondary-button type="button" wire:click="goToStep({{ $step - 1 }})">
                        <x-icon name="chevron-left" class="mr-1 h-4 w-4" /> {{ __('Back') }}
                    </x-secondary-button>
                    <button type="button" wire:click="startOver" wire:confirm="{{ __('Start again with another file?') }}" class="text-sm text-slate-500 hover:text-slate-700">{{ __('Start over') }}</button>
                </div>
                <div class="flex items-center gap-3">
                    @if ($step === 2)
                        <x-button type="button" wire:click="stage" wire:loading.attr="disabled" wire:target="stage">
                            <span wire:loading.remove wire:target="stage">{{ __('Check the rows') }}</span>
                            <span wire:loading wire:target="stage">{{ __('Checking every row…') }}</span>
                        </x-button>
                    @elseif ($step === 3)
                        <x-button type="button" wire:click="toReview">{{ __('Review') }} <x-icon name="arrow-right" class="ml-1 h-4 w-4" /></x-button>
                    @elseif ($step === 4)
                        @if ($undecided > 0)
                            <span class="text-xs font-medium text-amber-700">{{ trans_choice(':count possible duplicate needs a decision|:count possible duplicates need a decision', $undecided, ['count' => $undecided]) }}</span>
                        @endif
                        <x-button type="button" wire:click="import" wire:loading.attr="disabled" wire:target="import" :disabled="$undecided > 0">
                            <span wire:loading.remove wire:target="import">{{ __('Import :count rows', ['count' => number_format($batch?->total_rows ?? 0)]) }}</span>
                            <span wire:loading wire:target="import">{{ __('Starting…') }}</span>
                        </x-button>
                    @endif
                </div>
            </div>
        @endif
    </div>
</div>