@php
    $steps = [
        'source'    => __('Upload'),
        'configure' => __('Map columns'),
        'preview'   => __('Review'),
        'done'      => __('Done'),
    ];
    $order = ['source', 'configure', 'preview', 'done'];
    $currentIndex = array_search($stage, $order, true);
    $statusBadge = [
        'DRAFT' => 'slate', 'SENT' => 'sky', 'PARTIAL' => 'amber',
        'PAID' => 'emerald', 'OVERDUE' => 'rose', 'VOID' => 'slate',
    ];
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-6xl">

        <x-page-header :title="__('Import')" :subtitle="__('Bring in past jobs from spreadsheets or invoice/quote PDFs, customers, products, invoices and jobs are created for you.')">
            <x-secondary-button wire:click="downloadTemplate" type="button">
                <x-icon name="arrow-down-tray" class="mr-1.5 h-4 w-4" />
                {{ __('CSV template') }}
            </x-secondary-button>
        </x-page-header>

        <!-- Stepper -->
        <nav class="mb-8 flex items-center gap-2 text-sm">
            @foreach ($steps as $key => $label)
                @php
                    $idx = array_search($key, $order, true);
                    $isActive = $key === $stage;
                    $isDone = $idx < $currentIndex;
                    $skip = ($key === 'configure' && in_array($sourceType, ['pdf', 'pnl', 'products', 'bank', 'bundle'], true))
                        || ($key === 'preview' && $sourceType === 'products');
                @endphp
                @unless ($skip)
                    <div class="flex items-center gap-2 {{ $loop->first ? '' : 'flex-1' }}">
                        @unless ($loop->first)
                            <span class="h-px flex-1 {{ $isDone || $isActive ? 'bg-indigo-400' : 'bg-slate-200' }}"></span>
                        @endunless
                        <span @class([
                            'flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-bold',
                            'bg-brand-gradient text-white shadow-glow' => $isActive,
                            'bg-indigo-100 text-indigo-700' => $isDone,
                            'bg-slate-100 text-slate-400' => ! $isActive && ! $isDone,
                        ])>
                            @if ($isDone)<x-icon name="check" class="h-4 w-4" />@else {{ $idx + 1 }} @endif
                        </span>
                        <span class="font-semibold {{ $isActive ? 'text-slate-900' : 'text-slate-400' }}">{{ $label }}</span>
                    </div>
                @endunless
            @endforeach
        </nav>

        {{-- ======================= STEP 1: SOURCE ======================= --}}
        @if ($stage === 'source')
            <x-card class="p-6">
                <h2 class="text-base font-semibold text-slate-900">{{ __('What are you importing?') }}</h2>

                <div class="mt-4 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                    <label @class([
                        'cursor-pointer rounded-2xl border-2 p-5 transition',
                        'border-indigo-500 bg-indigo-50/50' => $sourceType === 'spreadsheet',
                        'border-slate-200 hover:border-slate-300' => $sourceType !== 'spreadsheet',
                    ])>
                        <input type="radio" wire:model.live="sourceType" value="spreadsheet" class="sr-only">
                        <div class="flex items-center gap-3">
                            <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-50 text-emerald-600">
                                <x-icon name="table-cells" class="h-5 w-5" />
                            </span>
                            <div>
                                <p class="font-semibold text-slate-900">{{ __('Spreadsheet') }}</p>
                                <p class="text-xs text-slate-500">{{ __('CSV or Excel (.xlsx), map columns yourself') }}</p>
                            </div>
                        </div>
                    </label>

                    <label @class([
                        'cursor-pointer rounded-2xl border-2 p-5 transition',
                        'border-indigo-500 bg-indigo-50/50' => $sourceType === 'products',
                        'border-slate-200 hover:border-slate-300' => $sourceType !== 'products',
                    ])>
                        <input type="radio" wire:model.live="sourceType" value="products" class="sr-only">
                        <div class="flex items-center gap-3">
                            <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-amber-50 text-amber-600">
                                <x-icon name="cube" class="h-5 w-5" />
                            </span>
                            <div>
                                <p class="font-semibold text-slate-900">{{ __('Products & costs') }}</p>
                                <p class="text-xs text-slate-500">{{ __('Costing workbook, products, BOM, tiers, rate master') }}</p>
                            </div>
                        </div>
                    </label>

                    <label @class([
                        'cursor-pointer rounded-2xl border-2 p-5 transition',
                        'border-indigo-500 bg-indigo-50/50' => $sourceType === 'pnl',
                        'border-slate-200 hover:border-slate-300' => $sourceType !== 'pnl',
                    ])>
                        <input type="radio" wire:model.live="sourceType" value="pnl" class="sr-only">
                        <div class="flex items-center gap-3">
                            <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600">
                                <x-icon name="calendar-days" class="h-5 w-5" />
                            </span>
                            <div>
                                <p class="font-semibold text-slate-900">{{ __('P&L monthly workbook') }}</p>
                                <p class="text-xs text-slate-500">{{ __('Monthly jobs + operating costs, P&L sheet layout') }}</p>
                            </div>
                        </div>
                    </label>

                    <label @class([
                        'cursor-pointer rounded-2xl border-2 p-5 transition',
                        'border-indigo-500 bg-indigo-50/50' => $sourceType === 'pdf',
                        'border-slate-200 hover:border-slate-300' => $sourceType !== 'pdf',
                    ])>
                        <input type="radio" wire:model.live="sourceType" value="pdf" class="sr-only">
                        <div class="flex items-center gap-3">
                            <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-rose-50 text-rose-600">
                                <x-icon name="document-text" class="h-5 w-5" />
                            </span>
                            <div>
                                <p class="font-semibold text-slate-900">{{ __('Invoice / Quote PDF') }}</p>
                                <p class="text-xs text-slate-500">{{ __('PDFs generated by Semita BillPro') }}</p>
                            </div>
                        </div>
                    </label>

                    <label @class([
                        'cursor-pointer rounded-2xl border-2 p-5 transition',
                        'border-indigo-500 bg-indigo-50/50' => $sourceType === 'bank',
                        'border-slate-200 hover:border-slate-300' => $sourceType !== 'bank',
                    ])>
                        <input type="radio" wire:model.live="sourceType" value="bank" class="sr-only">
                        <div class="flex items-center gap-3">
                            <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-sky-50 text-sky-600">
                                <x-icon name="banknotes" class="h-5 w-5" />
                            </span>
                            <div>
                                <p class="font-semibold text-slate-900">{{ __('Bank or cash statement') }}</p>
                                <p class="text-xs text-slate-500">{{ __('A bank export, or a cash book you typed yourself, classified row by row') }}</p>
                            </div>
                        </div>
                    </label>

                    <label @class([
                        'cursor-pointer rounded-2xl border-2 p-5 transition',
                        'border-indigo-500 bg-indigo-50/50' => $sourceType === 'bundle',
                        'border-slate-200 hover:border-slate-300' => $sourceType !== 'bundle',
                    ])>
                        <input type="radio" wire:model.live="sourceType" value="bundle" class="sr-only">
                        <div class="flex items-center gap-3">
                            <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-violet-50 text-violet-600">
                                <x-icon name="arrows-right-left" class="h-5 w-5" />
                            </span>
                            <div>
                                <p class="font-semibold text-slate-900">{{ __('Transaction bundle') }}</p>
                                <p class="text-xs text-slate-500">{{ __('Paperwork, work and counter requests exported from another BillPro workspace') }}</p>
                            </div>
                        </div>
                    </label>
                </div>

                <div class="mt-6">
                    @if ($sourceType === 'spreadsheet')
                        <x-label :value="__('Spreadsheet file')" />
                        <input type="file" wire:model="upload" accept=".csv,.txt,.xlsx"
                            class="mt-1 block w-full text-sm text-slate-600 file:mr-4 file:rounded-xl file:border-0 file:bg-indigo-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-indigo-700 hover:file:bg-indigo-100">
                        <x-upload-progress target="upload" class="mt-2" />
                        <div wire:loading wire:target="upload" class="mt-2 text-xs text-indigo-600">{{ __('Reading file…') }}</div>
                        @if ($upload && $headers !== [])
                            <p class="mt-2 text-xs text-emerald-600">{{ __('File read, :n columns detected.', ['n' => count($headers)]) }}</p>
                        @endif

                        {{-- Or load straight from a shared Google Sheet --}}
                        <div class="mt-4 rounded-2xl border border-emerald-200 bg-emerald-50/40 p-4">
                            <div class="flex items-center gap-2">
                                <x-icon name="arrow-path" class="h-4 w-4 text-emerald-600" />
                                <p class="text-sm font-semibold text-slate-900">{{ __('…or load from Google Sheets') }}</p>
                            </div>
                            <p class="mt-1 text-xs text-slate-500">{{ __('Paste a shared Google Sheet link to pull it in directly, then pick the tab and map columns as usual.') }}</p>
                            <div class="mt-3 flex flex-col gap-2 sm:flex-row">
                                <input type="text" wire:model="spreadsheetGoogleSheet" placeholder="https://docs.google.com/spreadsheets/d/…"
                                    class="w-full rounded-xl border-slate-300 text-sm focus:border-emerald-500 focus:ring-emerald-500">
                                <x-button wire:click="loadSpreadsheetFromGoogle" wire:loading.attr="disabled" wire:target="loadSpreadsheetFromGoogle" class="shrink-0">
                                    <x-icon name="arrow-path" class="mr-1.5 h-4 w-4" wire:loading.class="animate-spin" wire:target="loadSpreadsheetFromGoogle" />
                                    <span wire:loading.remove wire:target="loadSpreadsheetFromGoogle">{{ __('Load sheet') }}</span>
                                    <span wire:loading wire:target="loadSpreadsheetFromGoogle">{{ __('Pulling…') }}</span>
                                </x-button>
                            </div>
                            <x-input-error for="spreadsheetGoogleSheet" class="mt-2" />
                            @if ($spreadsheetPath && $headers !== [])
                                <p class="mt-2 text-xs text-emerald-600">{{ __('Google Sheet loaded, :n columns detected.', ['n' => count($headers)]) }}</p>
                            @endif
                            <p class="mt-2 text-xs text-slate-400">{{ __('The sheet must be shared as “Anyone with the link → Viewer”.') }}</p>
                        </div>

                        <label class="mt-4 flex items-start gap-2 rounded-xl border border-slate-200 p-3">
                            <input type="checkbox" wire:model.live="sheetPerJob" class="mt-0.5 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
                            <span class="text-sm text-slate-700">
                                {{ __('This workbook has one job per sheet') }}
                                <span class="block text-xs text-slate-400">{{ __('Each sheet (tab) becomes one customer (named after the sheet) with a job built from its Item / Qty / Rate / Discount / Total quote table. Costing-only tabs are skipped.') }}</span>
                            </span>
                        </label>

                        @if ($sheetPerJob)
                            <div class="mt-3 w-48">
                                <x-label :value="__('Status for imported jobs')" />
                                <select wire:model="defaultStatus" class="mt-1 w-full rounded-xl border-slate-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                                    <option value="PAID">{{ __('Paid') }}</option>
                                    <option value="SENT">{{ __('Sent / unpaid') }}</option>
                                    <option value="DRAFT">{{ __('Draft') }}</option>
                                </select>
                            </div>
                        @endif

                        <div class="mt-4 rounded-xl border border-emerald-100 bg-emerald-50/40 p-3 text-xs text-slate-600">
                            <p class="font-semibold text-slate-700">{{ __('What gets created') }}</p>
                            <p class="mt-1">{{ __('Each row is one line item. Rows are grouped into documents (by document number, customer + date, or one per row) and each becomes a Customer → Invoice → Job, with Products created from any new item names.') }}</p>
                            <p class="mt-1.5">{{ __('On the next step you map your columns, only Item Name is required; Date, Customer, Qty, Unit Price, Status, Currency and discounts are optional.') }} <span class="font-medium text-slate-700">{{ __('Download the CSV template (top-right) for the exact column layout.') }}</span></p>
                            <p class="mt-1.5">{{ __('Got a workbook where each tab is a single job, like the "April costing" sheets, with one Item / Qty / Rate / Discount / Total table per tab? Tick the box above; the tab name becomes the customer and costing-only tabs are skipped.') }}</p>
                        </div>
                    @elseif ($sourceType === 'pnl')
                        {{-- Shared options (used by both the live sync and a file upload) --}}
                        <div class="grid gap-4 sm:grid-cols-3">
                            <div>
                                <x-label :value="__('Sheet')" />
                                @if (count($sheetNames) > 1)
                                    <select wire:model="pnlSheet" class="mt-1 w-full rounded-xl border-slate-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        @foreach ($sheetNames as $name)
                                            <option value="{{ $name }}">{{ $name }}</option>
                                        @endforeach
                                    </select>
                                @else
                                    <input type="text" wire:model="pnlSheet" class="mt-1 w-full rounded-xl border-slate-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                                @endif
                                <p class="mt-1 text-xs text-slate-400">{{ __('Tab holding the monthly P&L ledger.') }}</p>
                            </div>
                            <div>
                                <x-label :value="__('Year')" />
                                <input type="number" wire:model="pnlYear" min="2000" max="2100" class="mt-1 w-full rounded-xl border-slate-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                                <p class="mt-1 text-xs text-slate-400">{{ __('Calendar year the month columns belong to.') }}</p>
                                <x-input-error for="pnlYear" class="mt-1" />
                            </div>
                            <div>
                                <x-label :value="__('Post cash to account')" />
                                <label class="mt-2 flex items-center gap-2 text-sm text-slate-700">
                                    <input type="checkbox" wire:model.live="recordPayments" class="rounded text-indigo-600 focus:ring-indigo-500">
                                    {{ __('Record payments + expenses in treasury') }}
                                </label>
                                @if ($recordPayments)
                                    <select wire:model="fundAccountId" class="mt-2 w-full rounded-xl border-slate-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        <option value="">{{ __('Choose account…') }}</option>
                                        @foreach ($fundAccounts as $acc)
                                            <option value="{{ $acc->id }}">{{ $acc->name }} ({{ $acc->currency_code }})</option>
                                        @endforeach
                                    </select>
                                @endif
                            </div>
                        </div>

                        {{-- Live sync from Google Sheets --}}
                        <div class="mt-5 rounded-2xl border border-indigo-200 bg-indigo-50/40 p-4">
                            <div class="flex items-center gap-2">
                                <x-icon name="arrow-path" class="h-4 w-4 text-indigo-600" />
                                <p class="text-sm font-semibold text-slate-900">{{ __('Sync live from Google Sheets') }}</p>
                                <x-badge color="indigo">{{ __('keeps records in sync') }}</x-badge>
                            </div>
                            <p class="mt-1 text-xs text-slate-500">{{ __('Pulls the latest from the live sheet: new rows are added, changed rows are updated in place, and rows deleted from the sheet are removed, nothing is duplicated.') }}</p>
                            <div class="mt-3 flex flex-col gap-2 sm:flex-row">
                                <input type="text" wire:model="pnlGoogleSheet" placeholder="https://docs.google.com/spreadsheets/d/…"
                                    class="w-full rounded-xl border-slate-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                                <x-button wire:click="syncPnlFromGoogle" wire:loading.attr="disabled" wire:target="syncPnlFromGoogle" class="shrink-0">
                                    <x-icon name="arrow-path" class="mr-1.5 h-4 w-4" wire:loading.class="animate-spin" wire:target="syncPnlFromGoogle" />
                                    <span wire:loading.remove wire:target="syncPnlFromGoogle">{{ __('Sync now') }}</span>
                                    <span wire:loading wire:target="syncPnlFromGoogle">{{ __('Pulling…') }}</span>
                                </x-button>
                            </div>
                            <x-input-error for="pnlGoogleSheet" class="mt-2" />
                            <p class="mt-2 text-xs text-slate-400">{{ __('The sheet must be shared as “Anyone with the link → Viewer”. Paste the full URL or just the sheet ID.') }}</p>
                        </div>

                        {{-- Or import a one-off file --}}
                        <div class="mt-5">
                            <x-label :value="__('…or import a one-off .xlsx file')" />
                            <input type="file" wire:model="upload" accept=".xlsx"
                                class="mt-1 block w-full text-sm text-slate-600 file:mr-4 file:rounded-xl file:border-0 file:bg-indigo-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-indigo-700 hover:file:bg-indigo-100">
                            <x-upload-progress target="upload" class="mt-2" />
                            <div wire:loading wire:target="upload" class="mt-2 text-xs text-indigo-600">{{ __('Reading file…') }}</div>
                            <p class="mt-1 text-xs text-slate-400">{{ __('A file import only adds new rows (existing ones are skipped). Use the live sync to also update changed rows.') }}</p>
                        </div>

                        <div class="mt-4 rounded-xl border border-indigo-100 bg-indigo-50/40 p-3 text-xs text-slate-600">
                            <p class="font-semibold text-slate-700">{{ __('What gets created') }}</p>
                            <p class="mt-1">{{ __('Each job → customer, invoice (revenue treated as collected), completed job, and production-cost lines routed to the right cost bucket by their COA code. Each month → operating-cost lines filed under the matching expense category, with director-funded overheads recorded as repayable director loans.') }}</p>
                        </div>
                    @elseif ($sourceType === 'products')
                        {{-- Load the costing workbook from Google or an .xlsx file --}}
                        <div class="rounded-2xl border border-amber-200 bg-amber-50/40 p-4">
                            <div class="flex items-center gap-2">
                                <x-icon name="arrow-path" class="h-4 w-4 text-amber-600" />
                                <p class="text-sm font-semibold text-slate-900">{{ __('Load the costing workbook from Google Sheets') }}</p>
                            </div>
                            <p class="mt-1 text-xs text-slate-500">{{ __('Paste the shared link to your "Semita Print Costing" workbook, then choose which tabs to import.') }}</p>
                            <div class="mt-3 flex flex-col gap-2 sm:flex-row">
                                <input type="text" wire:model="productsGoogleSheet" placeholder="https://docs.google.com/spreadsheets/d/…"
                                    class="w-full rounded-xl border-slate-300 text-sm focus:border-amber-500 focus:ring-amber-500">
                                <x-button wire:click="loadProductsFromGoogle" wire:loading.attr="disabled" wire:target="loadProductsFromGoogle" class="shrink-0">
                                    <x-icon name="arrow-path" class="mr-1.5 h-4 w-4" wire:loading.class="animate-spin" wire:target="loadProductsFromGoogle" />
                                    <span wire:loading.remove wire:target="loadProductsFromGoogle">{{ __('Load sheet') }}</span>
                                    <span wire:loading wire:target="loadProductsFromGoogle">{{ __('Pulling…') }}</span>
                                </x-button>
                            </div>
                            <x-input-error for="productsGoogleSheet" class="mt-2" />
                            <p class="mt-2 text-xs text-slate-400">{{ __('The sheet must be shared as “Anyone with the link → Viewer”.') }}</p>
                        </div>

                        <div class="mt-4">
                            <x-label :value="__('…or upload the .xlsx workbook')" />
                            <input type="file" wire:model="productsUpload" accept=".xlsx"
                                class="mt-1 block w-full text-sm text-slate-600 file:mr-4 file:rounded-xl file:border-0 file:bg-amber-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-amber-700 hover:file:bg-amber-100">
                            <x-upload-progress target="productsUpload" class="mt-2" />
                            <div wire:loading wire:target="productsUpload" class="mt-2 text-xs text-amber-600">{{ __('Reading workbook…') }}</div>
                        </div>

                        {{-- Per-tab selection (only tabs found in the workbook) --}}
                        @if ($productsSections !== [])
                            @php $sectionMeta = $this->productSectionMeta(); @endphp
                            <div class="mt-5">
                                <div class="flex items-center justify-between">
                                    <h3 class="text-sm font-semibold text-slate-900">{{ __('Which sheets to import') }}</h3>
                                    <p class="text-xs text-emerald-600">{{ __(':n importable tab(s) found', ['n' => count($productsSections)]) }}</p>
                                </div>
                                <div class="mt-3 grid gap-2 sm:grid-cols-2">
                                    @foreach ($productsSections as $key)
                                        <label class="flex items-start gap-2 rounded-xl border border-slate-200 p-3 hover:border-slate-300">
                                            <input type="checkbox" wire:model="productsSelected.{{ $key }}" class="mt-0.5 rounded border-slate-300 text-amber-600 focus:ring-amber-500">
                                            <span class="text-sm text-slate-700">
                                                {{ $sectionMeta[$key]['label'] ?? $key }}
                                                <span class="block text-xs text-slate-400">{{ $sectionMeta[$key]['sheet'] ?? '' }}</span>
                                            </span>
                                        </label>
                                    @endforeach
                                </div>
                                <p class="mt-2 text-xs text-slate-400">{{ __('Tiers & retail details attach to products by name, they\'ll match products from this import or a previous one. Re-running updates existing records.') }}</p>
                                <x-input-error for="productsCommit" class="mt-2" />
                                <div class="mt-4 flex justify-end">
                                    <x-button wire:click="runProductsImport" wire:loading.attr="disabled" wire:target="runProductsImport">
                                        <span wire:loading.remove wire:target="runProductsImport">{{ __('Import selected') }}</span>
                                        <span wire:loading wire:target="runProductsImport">{{ __('Importing… (this can take a moment)') }}</span>
                                    </x-button>
                                </div>
                            </div>
                        @endif

                        <div class="mt-4 rounded-xl border border-amber-100 bg-amber-50/40 p-3 text-xs text-slate-600">
                            <p class="font-semibold text-slate-700">{{ __('What gets created') }}</p>
                            <p class="mt-1">{{ __('Each product tab becomes real Products with an itemised bill of materials (material, ink, labour, overhead) reproducing the sheet\'s cost build-up, plus markup/buffer/risk pricing, quantity tiers, and the rate master (labour, overhead, ink). Optional tabs add the chart of accounts, asset register and startup capital.') }}</p>
                        </div>
                    @elseif ($sourceType === 'bank')
                        <div>
                            <x-label for="bankFundAccountId" :value="__('Which account is this statement for?')" />
                            <select id="bankFundAccountId" wire:model="bankFundAccountId"
                                class="mt-1 block w-full rounded-xl border-slate-300 text-sm focus:border-sky-500 focus:ring-sky-500">
                                <option value="">{{ __('Select an account…') }}</option>
                                @foreach ($fundAccounts as $account)
                                    <option value="{{ $account->id }}">{{ $account->name }} ({{ $account->currency_code }})</option>
                                @endforeach
                            </select>
                            <x-input-error for="bankFundAccountId" class="mt-2" />
                        </div>

                        {{--
                            Livewire stores uploads as random(30) . '-meta' . base64(name) . '-.ext',
                            so the base64 expansion pushes a ~160-character original name past the
                            255-character limit a single filename has on most filesystems. That write
                            happens before the component is reached, so no server-side rule can catch
                            it, the upload would just spin. Hence the check here, before it starts.
                        --}}
                        <div class="mt-4" x-data="{ tooLong: null }">
                            <x-label :value="__('Statement file')" />
                            <input type="file" wire:model="upload" accept=".csv,.txt,.xlsx"
                                x-on:change="tooLong = ((Math.ceil(($event.target.files[0]?.name.length ?? 0) / 3) * 4) > 210)
                                    ? $event.target.files[0].name : null;
                                    if (tooLong) { $event.target.value = ''; $event.stopImmediatePropagation() }"
                                class="mt-1 block w-full text-sm text-slate-600 file:mr-4 file:rounded-xl file:border-0 file:bg-sky-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-sky-700 hover:file:bg-sky-100">
                            <div wire:loading wire:target="upload" class="mt-2 text-xs text-sky-600" x-show="! tooLong">{{ __('Uploading…') }}</div>
                            <p x-show="tooLong" x-cloak class="mt-2 text-sm text-rose-600">
                                {{ __('That filename is too long to upload, Windows cannot store it. Rename the file to something short, like') }}
                                <span class="font-semibold">statement.xlsx</span>{{ __(', and choose it again.') }}
                            </p>
                            <x-upload-progress target="upload" class="mt-2" />
                            <p class="mt-2 text-xs text-slate-400">{{ __('A bank export (CSV or Excel, not PDF), the header block, running balance and fee lines are all read automatically. A cash book works too: any table with a date, a description and money-out / money-in columns, imported against the cash or wallet account it belongs to.') }}</p>
                        </div>

                        <div class="mt-4 rounded-xl border border-sky-100 bg-sky-50/40 p-3 text-xs text-slate-600">
                            <p class="font-semibold text-slate-700">{{ __('What each line becomes') }}</p>
                            <ul class="mt-2 space-y-1">
                                <li>{{ __('Cash withdrawals and deposits → a transfer between this account and the cash account.') }}</li>
                                <li>{{ __('Ledger fees, transfer fees and transaction tax → an expense in Bank Charges, attached to the transaction that incurred it.') }}</li>
                                <li>{{ __('Receipts → a payment against the chosen invoice, or other income when none is chosen.') }}</li>
                                <li>{{ __('Payments out → an expense in the chosen category, optionally costed to a job.') }}</li>
                                <li>{{ __('Reversals → a treasury adjustment, which moves the balance without touching the P&L.') }}</li>
                            </ul>
                            <p class="mt-2 border-t border-sky-100 pt-2">{{ __('Lines matching an existing movement on this account are marked as duplicates and excluded. The resulting balance is verified against the statement\'s closing figure.') }}</p>
                        </div>
                    @elseif ($sourceType === 'bundle')
                        <x-label :value="__('Bundle file')" />
                        <input type="file" wire:model="upload" accept=".json,application/json"
                            class="mt-1 block w-full text-sm text-slate-600 file:mr-4 file:rounded-xl file:border-0 file:bg-violet-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-violet-700 hover:file:bg-violet-100">
                        <div wire:loading wire:target="upload" class="mt-2 text-xs text-violet-600">{{ __('Uploading…') }}</div>
                        <x-input-error for="upload" class="mt-2" />
                        <p class="mt-2 text-xs text-slate-400">{{ __('The .json file another workspace produced on its Data Export screen. Nothing is written until you have seen the preview.') }}</p>

                        <div class="mt-4 rounded-xl border border-violet-100 bg-violet-50/40 p-3 text-xs text-slate-600">
                            <p class="font-semibold text-slate-700">{{ __('What comes across, and what does not') }}</p>
                            <ul class="mt-2 space-y-1">
                                <li>{{ __('Invoices and quotes with their lines, keeping the date they were raised.') }}</li>
                                <li>{{ __('Customers, products and categories are matched by name against this workspace, never created. A name that finds nothing is reported, and the document starts unticked.') }}</li>
                                <li>{{ __('Money is posted here rather than copied. An invoice arrives owing its full value, and the payments in the file are receipted again into accounts this workspace owns, matched by name like everything else.') }}</li>
                                <li>{{ __('The movement behind a payment or an expense is left out on purpose, because recording the payment raises it here. Only transfers and adjustments nothing else is behind travel as movements of their own.') }}</li>
                                <li>{{ __('A document number already in use here is renumbered, and the preview says so before anything is written.') }}</li>
                            </ul>
                            <p class="mt-2 border-t border-violet-100 pt-2">{{ __('Importing the same file twice changes nothing: every document remembers where it came from, and one already here is recognised rather than repeated.') }}</p>
                        </div>
                    @else
                        <x-label :value="__('PDF files')" />
                        <input type="file" wire:model="pdfUploads" multiple accept="application/pdf,.pdf"
                            class="mt-1 block w-full text-sm text-slate-600 file:mr-4 file:rounded-xl file:border-0 file:bg-rose-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-rose-700 hover:file:bg-rose-100">
                        <x-upload-progress target="pdfUploads" class="mt-2" />
                        @if ($pdfUploads)
                            <p class="mt-2 text-xs text-slate-500">{{ __(':n file(s) ready.', ['n' => count($pdfUploads)]) }}</p>
                        @endif
                    @endif
                </div>

                @unless ($sourceType === 'products')
                    <div class="mt-6 flex justify-end">
                        <x-button wire:click="proceed" wire:loading.attr="disabled">
                            {{ __('Continue') }}
                            <x-icon name="arrow-right" class="ml-1.5 h-4 w-4" />
                        </x-button>
                    </div>
                @endunless
            </x-card>
        @endif

        {{-- ======================= STEP 2: CONFIGURE (spreadsheet) ======================= --}}
        @if ($stage === 'configure')
            <x-card class="p-6">
                <div class="flex flex-wrap items-end gap-4">
                    @if (count($sheetNames) > 1)
                        <div>
                            <x-label :value="__('Sheet')" />
                            <select wire:model.live="sheet" class="mt-1 rounded-xl border-slate-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                                @foreach ($sheetNames as $name)
                                    <option value="{{ $name }}">{{ $name }}</option>
                                @endforeach
                            </select>
                        </div>
                    @endif
                    <div>
                        <x-label :value="__('Header row')" />
                        <select wire:model.live="headerRowIndex" class="mt-1 rounded-xl border-slate-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                            @foreach ($previewGrid as $i => $row)
                                <option value="{{ $i }}">{{ __('Row :n', ['n' => $i + 1]) }}, {{ \Illuminate\Support\Str::limit(collect($row)->filter()->implode(' | '), 60) }}</option>
                            @endforeach
                        </select>
                        <p class="mt-1 text-xs text-slate-400">{{ __('Pick the row that holds your column titles.') }}</p>
                    </div>
                </div>

                {{-- Preview grid --}}
                @if ($previewGrid !== [])
                    <div class="mt-4 overflow-x-auto rounded-xl border border-slate-200">
                        <table class="min-w-full text-xs">
                            <tbody>
                                @foreach (array_slice($previewGrid, 0, 8) as $i => $row)
                                    <tr class="{{ $i === (int) $headerRowIndex ? 'bg-indigo-50 font-semibold text-indigo-800' : 'text-slate-600' }} border-b border-slate-100">
                                        <td class="px-2 py-1 text-slate-300">{{ $i + 1 }}</td>
                                        @foreach (array_slice($row, 0, 10) as $cell)
                                            <td class="whitespace-nowrap px-3 py-1">{{ \Illuminate\Support\Str::limit($cell, 24) }}</td>
                                        @endforeach
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif

                {{-- Column mapping --}}
                <h3 class="mt-6 text-sm font-semibold text-slate-900">{{ __('Map your columns') }}</h3>
                <p class="text-xs text-slate-500">{{ __('Only Item Name is required. Leave a field blank to skip it.') }}</p>
                <div class="mt-3 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach ($this->fieldLabels() as $field => $label)
                        <div>
                            <label class="block text-xs font-medium text-slate-600">
                                {{ $label }}
                                @if ($field === 'item_name')<span class="text-rose-500">*</span>@endif
                            </label>
                            <select wire:model="mapping.{{ $field }}" class="mt-1 w-full rounded-xl border-slate-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                                <option value="">— {{ __('not mapped') }} —</option>
                                @foreach ($headers as $header)
                                    <option value="{{ $header }}">{{ $header }}</option>
                                @endforeach
                            </select>
                        </div>
                    @endforeach
                </div>
                <x-input-error for="mapping.item_name" class="mt-2" />

                {{-- Grouping --}}
                <div class="mt-6">
                    <h3 class="text-sm font-semibold text-slate-900">{{ __('Group rows into documents by') }}</h3>
                    <div class="mt-2 flex flex-wrap gap-4 text-sm text-slate-700">
                        <label class="flex items-center gap-2"><input type="radio" wire:model="groupBy" value="document_number" class="text-indigo-600 focus:ring-indigo-500"> {{ __('Document number') }}</label>
                        <label class="flex items-center gap-2"><input type="radio" wire:model="groupBy" value="customer_date" class="text-indigo-600 focus:ring-indigo-500"> {{ __('Customer + date') }}</label>
                        <label class="flex items-center gap-2"><input type="radio" wire:model="groupBy" value="row" class="text-indigo-600 focus:ring-indigo-500"> {{ __('One per row') }}</label>
                    </div>
                </div>

                <div class="mt-6 flex justify-between">
                    <x-secondary-button wire:click="resetWizard">{{ __('Start over') }}</x-secondary-button>
                    <x-button wire:click="buildSpreadsheetPreview" wire:loading.attr="disabled">
                        {{ __('Build preview') }}
                        <x-icon name="arrow-right" class="ml-1.5 h-4 w-4" />
                    </x-button>
                </div>
            </x-card>
        @endif

        {{-- ======================= STEP 3: PREVIEW (P&L) ======================= --}}
        @if ($stage === 'preview' && $sourceType === 'pnl')
            @php
                $recon = $pnlSummary['reconciliation'] ?? ['parsed' => [], 'sheet' => [], 'months' => []];
                $fmt = fn ($v) => number_format((float) $v, 2);
            @endphp

            <x-card class="mb-4 p-5">
                <div class="flex flex-wrap items-center gap-2">
                    <h3 class="text-sm font-semibold text-slate-900">{{ __('Ready to import from :sheet', ['sheet' => $pnlSheet]) }}</h3>
                    @if ($pnlMode === 'sync')
                        <x-badge color="indigo">{{ __('Live sync, updates changed rows & removes deleted ones') }}</x-badge>
                    @endif
                </div>
                <div class="mt-3 grid grid-cols-2 gap-4 sm:grid-cols-3">
                    @foreach ([
                        ['label' => __('Jobs'), 'value' => $pnlSummary['counts']['jobs'] ?? 0],
                        ['label' => __('Operating-cost lines'), 'value' => $pnlSummary['counts']['opex'] ?? 0],
                        ['label' => __('Customers'), 'value' => $pnlSummary['counts']['customers'] ?? 0],
                    ] as $stat)
                        <div class="rounded-2xl bg-slate-50 p-4 text-center">
                            <p class="text-3xl font-bold text-slate-900">{{ $stat['value'] }}</p>
                            <p class="mt-1 text-xs font-medium uppercase tracking-wider text-slate-500">{{ $stat['label'] }}</p>
                        </div>
                    @endforeach
                </div>

                {{-- Reconciliation: parsed vs the sheet's own month-summary rows --}}
                <h4 class="mt-5 text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('Reconciliation (parsed vs sheet totals)') }}</h4>
                <div class="mt-2 overflow-x-auto rounded-xl border border-slate-200">
                    <table class="min-w-full text-sm">
                        <thead class="bg-slate-50 text-left text-xs uppercase tracking-wider text-slate-400">
                            <tr>
                                <th class="px-4 py-2 font-medium"></th>
                                <th class="px-4 py-2 text-right font-medium">{{ __('Revenue') }}</th>
                                <th class="px-4 py-2 text-right font-medium">{{ __('Production cost') }}</th>
                                <th class="px-4 py-2 text-right font-medium">{{ __('Operating cost') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            <tr>
                                <td class="px-4 py-2 font-medium text-slate-700">{{ __('Parsed') }}</td>
                                <td class="px-4 py-2 text-right text-slate-800">{{ $fmt($recon['parsed']['revenue'] ?? 0) }}</td>
                                <td class="px-4 py-2 text-right text-slate-800">{{ $fmt($recon['parsed']['cost'] ?? 0) }}</td>
                                <td class="px-4 py-2 text-right text-slate-800">{{ $fmt($recon['parsed']['opex'] ?? 0) }}</td>
                            </tr>
                            <tr class="text-slate-500">
                                <td class="px-4 py-2 font-medium">{{ __('Sheet totals') }}</td>
                                <td class="px-4 py-2 text-right">{{ $fmt($recon['sheet']['revenue'] ?? 0) }}</td>
                                <td class="px-4 py-2 text-right">{{ $fmt($recon['sheet']['cost'] ?? 0) }}</td>
                                <td class="px-4 py-2 text-right">{{ $fmt($recon['sheet']['opex'] ?? 0) }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                @if (! empty($pnlSummary['warnings']))
                    <div class="mt-3 rounded-xl border border-amber-100 bg-amber-50 px-4 py-2 text-xs text-amber-700">
                        @foreach ($pnlSummary['warnings'] as $w)<p>⚠ {{ $w }}</p>@endforeach
                    </div>
                @endif
            </x-card>

            {{-- Sample of the jobs that will be created --}}
            @if (! empty($pnlSummary['sample_jobs']))
                <x-card class="mb-4 overflow-hidden">
                    <div class="border-b border-slate-100 bg-slate-50/60 px-4 py-3 text-xs font-semibold uppercase tracking-wider text-slate-500">
                        {{ __('First :n jobs', ['n' => count($pnlSummary['sample_jobs'])]) }}
                    </div>
                    <div class="overflow-x-auto">
                        <table class="min-w-full text-sm">
                            <thead>
                                <tr class="text-left text-xs uppercase tracking-wider text-slate-400">
                                    <th class="px-4 py-2 font-medium">{{ __('Month') }}</th>
                                    <th class="px-4 py-2 font-medium">{{ __('Job') }}</th>
                                    <th class="px-4 py-2 font-medium">{{ __('Customer') }}</th>
                                    <th class="px-4 py-2 text-right font-medium">{{ __('Revenue') }}</th>
                                    <th class="px-4 py-2 text-right font-medium">{{ __('Cost') }}</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100">
                                @foreach ($pnlSummary['sample_jobs'] as $j)
                                    <tr>
                                        <td class="whitespace-nowrap px-4 py-2 text-xs text-slate-500">{{ $j['month'] }}</td>
                                        <td class="px-4 py-2">
                                            <span class="font-medium text-slate-800">{{ \Illuminate\Support\Str::limit($j['title'], 48) }}</span>
                                            @if ($j['reprints'] > 0)<x-badge color="amber">{{ __(':n reprint(s)', ['n' => $j['reprints']]) }}</x-badge>@endif
                                        </td>
                                        <td class="px-4 py-2 text-slate-600">{{ \Illuminate\Support\Str::limit($j['customer'], 28) }}</td>
                                        <td class="px-4 py-2 text-right font-medium text-slate-800">{{ $fmt($j['revenue']) }}</td>
                                        <td class="px-4 py-2 text-right text-slate-600">{{ $fmt($j['cost']) }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </x-card>
            @endif

            <x-input-error for="commit" class="mt-2" />

            <div class="mt-6 flex justify-between">
                <x-secondary-button wire:click="resetWizard">{{ __('Start over') }}</x-secondary-button>
                <x-button wire:click="runPnlImport" wire:loading.attr="disabled">
                    <span wire:loading.remove wire:target="runPnlImport">{{ __('Import now') }}</span>
                    <span wire:loading wire:target="runPnlImport">{{ __('Importing…') }}</span>
                </x-button>
            </div>
        @endif

        {{-- ======================= STEP 3: PREVIEW ======================= --}}
        {{-- ======================= STEP 3: PREVIEW (bank statement) ======================= --}}
        @if ($stage === 'preview' && $sourceType === 'bank' && $bankStatement)
            @php
                $statement = $this->statement();
                $bankRows = $statement->principalRows();
                $recon = $this->bankReconciliation();
                $kinds = \App\Services\Import\Data\BankStatementRow::KINDS;
                $accountKinds = ['cash_withdrawal', 'cash_deposit', 'transfer', 'personal'];
                $expenseKinds = ['payment_out', 'bank_charge'];
            @endphp

            <x-card class="p-6">
                <div class="flex flex-wrap items-start justify-between gap-4">
                    <div>
                        <h2 class="text-base font-semibold text-slate-900">{{ $statement->bank ?: __('Bank statement') }}</h2>
                        <p class="mt-0.5 text-sm text-slate-500">
                            {{ $statement->accountName }}
                            @if ($statement->accountNumber) · {{ $statement->accountNumber }} @endif
                            @if ($statement->currency) · {{ $statement->currency }} @endif
                        </p>
                        @if ($statement->periodFrom && $statement->periodTo)
                            <p class="text-xs text-slate-400">{{ $statement->periodFrom->format('d M Y') }} → {{ $statement->periodTo->format('d M Y') }}</p>
                        @endif
                    </div>

                    {{-- The parse is only trustworthy if the bank's own closing figure is reproduced. --}}
                    <div @class([
                        'rounded-xl border px-4 py-3 text-sm',
                        'border-emerald-200 bg-emerald-50' => $recon['checkable'] && $recon['matches'],
                        'border-rose-200 bg-rose-50' => $recon['checkable'] && ! $recon['matches'],
                        'border-slate-200 bg-slate-50' => ! $recon['checkable'],
                    ])>
                        <div class="flex items-center gap-2">
                            <x-icon :name="$recon['checkable'] && ! $recon['matches'] ? 'exclamation-triangle' : 'check-circle'"
                                @class([
                                    'h-5 w-5',
                                    'text-emerald-600' => $recon['checkable'] && $recon['matches'],
                                    'text-rose-600' => $recon['checkable'] && ! $recon['matches'],
                                    'text-slate-400' => ! $recon['checkable'],
                                ]) />
                            <span class="font-semibold text-slate-900">
                                @if (! $recon['checkable'])
                                    {{ __('No closing balance to check') }}
                                @elseif ($recon['matches'])
                                    {{ __('Statement reads clean') }}
                                @else
                                    {{ __('Statement does not balance') }}
                                @endif
                            </span>
                        </div>
                        <p class="mt-1 text-xs text-slate-600">
                            {{ __('Opening :o + movements = :d', ['o' => number_format($statement->openingBalance ?? 0, 2), 'd' => number_format($recon['expected'], 2)]) }}
                            @if ($recon['closing'] !== null)
                                · {{ __('bank says :c', ['c' => number_format($recon['closing'], 2)]) }}
                            @endif
                        </p>
                    </div>
                </div>

                <div class="mt-4 grid gap-3 sm:grid-cols-4">
                    <div class="rounded-xl bg-slate-50 p-3">
                        <p class="text-xs text-slate-500">{{ __('Transactions') }}</p>
                        <p class="text-lg font-semibold text-slate-900">{{ count($bankRows) }}</p>
                    </div>
                    <div class="rounded-xl bg-slate-50 p-3">
                        <p class="text-xs text-slate-500">{{ __('Fee lines folded in') }}</p>
                        <p class="text-lg font-semibold text-slate-900">{{ count($statement->rows) - count($bankRows) }}</p>
                    </div>
                    <div class="rounded-xl bg-emerald-50 p-3">
                        <p class="text-xs text-slate-500">{{ __('Money in') }}</p>
                        <p class="text-lg font-semibold text-emerald-700">{{ number_format($statement->totalIn(), 2) }}</p>
                    </div>
                    <div class="rounded-xl bg-rose-50 p-3">
                        <p class="text-xs text-slate-500">{{ __('Money out') }}</p>
                        <p class="text-lg font-semibold text-rose-700">{{ number_format($statement->totalOut(), 2) }}</p>
                    </div>
                </div>

                @if ($bankDuplicates !== [])
                    <div class="mt-4 rounded-xl border border-amber-200 bg-amber-50 p-3 text-xs text-slate-700">
                        <p class="font-semibold text-amber-800">{{ __(':n row(s) look already recorded', ['n' => count($bankDuplicates)]) }}</p>
                        <p class="mt-1">{{ __('These match a movement already on this account by amount, direction and date. They start unticked so nothing is counted twice, tick one back on only if you are sure it is a separate transaction.') }}</p>
                    </div>
                @endif
            </x-card>

            <x-card class="mt-6 overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-200 text-sm">
                        <thead class="bg-slate-50 text-xs uppercase tracking-wide text-slate-500">
                            <tr>
                                <th class="px-3 py-3 text-left lg:px-4">{{ __('Use') }}</th>
                                <th class="whitespace-nowrap px-3 py-3 text-left lg:px-4">{{ __('Date') }}</th>
                                <th class="px-3 py-3 text-left lg:px-4">{{ __('Description') }}</th>
                                <th class="whitespace-nowrap px-3 py-3 text-right lg:px-4">{{ __('Amount') }}</th>
                                <th class="whitespace-nowrap px-3 py-3 text-right lg:px-4">{{ __('Fees') }}</th>
                                <th class="px-3 py-3 text-left lg:px-4">{{ __('Treat as') }}</th>
                                <th class="px-3 py-3 text-left lg:px-4">{{ __('Post to') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            @foreach ($bankRows as $row)
                                @php
                                    $i = $row->index;
                                    $kind = $bankDecisions[$i]['kind'] ?? $row->kind;
                                    $fees = $statement->totalFeesFor($i);
                                    $isDupe = isset($bankDuplicates[$i]);
                                @endphp
                                <tr @class(['align-top', 'bg-amber-50/40' => $isDupe])>
                                    <td class="px-3 py-3 lg:px-4">
                                        <input type="checkbox" wire:model.live="bankDecisions.{{ $i }}.include"
                                            class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-3 text-slate-600 lg:px-4">
                                        {{ $row->date?->format('d M Y') }}
                                    </td>
                                    <td class="px-3 py-3 lg:px-4">
                                        <p class="text-slate-900">{{ \Illuminate\Support\Str::limit($row->description, 90) }}</p>
                                        @if ($isDupe)
                                            <span class="mt-1 inline-flex items-center gap-1 text-xs font-medium text-amber-700">
                                                <x-icon name="exclamation-triangle" class="h-3.5 w-3.5" />
                                                {{ __('Possibly already recorded') }}
                                            </span>
                                        @endif
                                    </td>
                                    <td @class([
                                        'whitespace-nowrap px-3 py-3 text-right font-medium lg:px-4',
                                        'text-emerald-700' => $row->direction() === 'in',
                                        'text-rose-700' => $row->direction() === 'out',
                                    ])>
                                        {{ $row->direction() === 'in' ? '+' : '−' }}{{ number_format($row->amount(), 2) }}
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-3 text-right text-slate-500 lg:px-4">
                                        {{ $fees > 0 ? number_format($fees, 2) : '—' }}
                                    </td>
                                    <td class="px-3 py-3 lg:px-4">
                                        <select wire:model.live="bankDecisions.{{ $i }}.kind"
                                            class="w-full rounded-lg border-slate-300 text-xs focus:border-indigo-500 focus:ring-indigo-500">
                                            @foreach ($kinds as $value => $label)
                                                <option value="{{ $value }}">{{ $label }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td class="px-3 py-3 lg:px-4">
                                        @if (in_array($kind, $accountKinds, true))
                                            <select wire:model="bankDecisions.{{ $i }}.target_account_id"
                                                class="w-full rounded-lg border-slate-300 text-xs focus:border-indigo-500 focus:ring-indigo-500">
                                                <option value="">{{ __('Other account…') }}</option>
                                                @foreach ($fundAccounts as $account)
                                                    @continue($account->id === $bankFundAccountId)
                                                    <option value="{{ $account->id }}">{{ $account->name }}</option>
                                                @endforeach
                                            </select>
                                        @elseif (in_array($kind, $expenseKinds, true))
                                            <select wire:model="bankDecisions.{{ $i }}.expense_category_id"
                                                class="w-full rounded-lg border-slate-300 text-xs focus:border-indigo-500 focus:ring-indigo-500">
                                                <option value="">{{ __('Expense category…') }}</option>
                                                @foreach ($expenseCategories as $category)
                                                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                                                @endforeach
                                            </select>
                                            <input type="text" wire:model="bankDecisions.{{ $i }}.vendor"
                                                placeholder="{{ __('Paid to') }}"
                                                class="mt-1 w-full rounded-lg border-slate-300 text-xs focus:border-indigo-500 focus:ring-indigo-500">
                                        @elseif ($kind === 'receipt')
                                            <select wire:model="bankDecisions.{{ $i }}.invoice_id"
                                                class="w-full rounded-lg border-slate-300 text-xs focus:border-indigo-500 focus:ring-indigo-500">
                                                <option value="">{{ __('No invoice, book as other income') }}</option>
                                                @foreach ($openInvoices as $invoice)
                                                    <option value="{{ $invoice->id }}">
                                                        {{ $invoice->invoice_number }} · {{ $invoice->customer?->name }} ({{ number_format((float) $invoice->balance_due, 2) }})
                                                    </option>
                                                @endforeach
                                            </select>
                                        @else
                                            <span class="text-xs text-slate-400">—</span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </x-card>

            <div class="mt-6 flex flex-wrap items-center justify-between gap-3">
                <x-secondary-button wire:click="resetWizard">{{ __('Start over') }}</x-secondary-button>

                <x-button wire:click="runBankImport" wire:loading.attr="disabled" wire:target="runBankImport">
                    <span wire:loading.remove wire:target="runBankImport">{{ __('Import these rows') }}</span>
                    <span wire:loading wire:target="runBankImport">{{ __('Importing…') }}</span>
                </x-button>
            </div>
        @endif

        {{-- ======================= STEP 4: DONE (bank statement) ======================= --}}
        @if ($stage === 'done' && $sourceType === 'bank' && $bankResult)
            <x-card class="p-6">
                <div class="flex items-center gap-3">
                    <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-50 text-emerald-600">
                        <x-icon name="check-circle" class="h-6 w-6" />
                    </span>
                    <div>
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Statement imported') }}</h2>
                        <p class="text-sm text-slate-500">
                            {{ __(':created created · :duplicates already present · :skipped skipped', [
                                'created' => $bankResult['created'],
                                'duplicates' => $bankResult['duplicates'],
                                'skipped' => $bankResult['skipped'],
                            ]) }}
                        </p>
                    </div>
                </div>

                @if ($bankResult['by_kind'] !== [])
                    <div class="mt-4 flex flex-wrap gap-2">
                        @foreach ($bankResult['by_kind'] as $kind => $count)
                            <x-badge color="slate">{{ \App\Services\Import\Data\BankStatementRow::KINDS[$kind] ?? $kind }}: {{ $count }}</x-badge>
                        @endforeach
                    </div>
                @endif

                @if ($bankResult['errors'] !== [])
                    <div class="mt-4 rounded-xl border border-rose-200 bg-rose-50 p-3">
                        <p class="text-sm font-semibold text-rose-800">{{ __('Rows that could not be imported') }}</p>
                        <ul class="mt-2 list-disc space-y-1 pl-5 text-xs text-rose-700">
                            @foreach ($bankResult['errors'] as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <p class="mt-2 text-xs text-rose-600">{{ __('Fix the cause, then re-import the same file, rows already in are recognised and left alone.') }}</p>
                    </div>
                @endif

                @if ($this->bankAccount())
                    <div class="mt-4 rounded-xl border border-slate-200 bg-slate-50 p-3 text-sm">
                        <p class="text-slate-600">
                            {{ __(':name now reads :balance.', [
                                'name' => $this->bankAccount()->name,
                                'balance' => number_format($this->bankAccount()->fresh()->balance, 2),
                            ]) }}
                            {{ __('Compare that against the closing balance printed on the statement, if they agree, the account is fully reconciled.') }}
                        </p>
                    </div>
                @endif

                <div class="mt-6 flex gap-3">
                    <x-button wire:click="resetWizard">{{ __('Import another') }}</x-button>
                    <a href="{{ route('treasury.index') }}"
                        class="inline-flex items-center gap-1.5 rounded-lg px-3 py-2 text-sm font-medium text-slate-600 transition hover:bg-slate-100 hover:text-slate-900">
                        {{ __('Open Treasury') }}
                        <x-icon name="arrow-right" class="h-4 w-4" />
                    </a>
                </div>
            </x-card>
        @endif

        {{-- ============ TRANSACTION BUNDLE: PREVIEW ============ --}}
        @if ($stage === 'preview' && $sourceType === 'bundle' && $bundlePlan)
            @php
                // Named and iconed by the import plan, which got them from the
                // registry, so a new kind of record gets a section by arriving.
                $entityMeta = $bundlePlan['entities'] ?? [];
                $stateMeta = [
                    'new' => ['label' => __('New here'), 'color' => 'emerald'],
                    'renumbered' => ['label' => __('Renumbered'), 'color' => 'amber'],
                    'adopted' => ['label' => __('Already here'), 'color' => 'slate'],
                ];
            @endphp

            <x-card class="mb-6 p-5">
                <div class="flex items-start gap-3">
                    <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-violet-50 text-violet-600">
                        <x-icon name="arrows-right-left" class="h-5 w-5" />
                    </span>
                    <div class="space-y-3 text-sm text-slate-600">
                        <p>
                            <span class="font-semibold text-slate-900">{{ $bundlePlan['workspace'] }}</span>
                            {{ __('wrote this file, covering :from to :to.', [
                                'from' => \Illuminate\Support\Carbon::parse($bundlePlan['window']['from'])->format('j M Y'),
                                'to' => \Illuminate\Support\Carbon::parse($bundlePlan['window']['to'])->format('j M Y'),
                            ]) }}
                            @if ($bundlePlan['manifest']['generated_by'] ?? null)
                                {{ __('Exported by :who.', ['who' => $bundlePlan['manifest']['generated_by']]) }}
                            @endif
                        </p>
                        <p class="font-medium text-slate-700">
                            {{ __('Nothing has been written yet.') }}
                            <span class="font-normal text-slate-600">{{ __('Untick anything that should stay out, then import. Documents already here are recognised and left alone whatever you tick.') }}</span>
                        </p>
                        @foreach ($bundlePlan['warnings'] as $warning)
                            <p class="flex items-start gap-2 rounded-xl bg-amber-50 px-3 py-2 text-amber-800">
                                <x-icon name="exclamation-triangle" class="mt-0.5 h-4 w-4 shrink-0" />
                                <span>{{ $warning }}</span>
                            </p>
                        @endforeach
                    </div>
                </div>
            </x-card>

            @foreach ($bundlePlan['rows'] as $entity => $rows)
                @continue ($rows === [])
                <x-card class="mb-6 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 class="flex items-center gap-3">
                            <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-slate-100 text-slate-600">
                                <x-icon :name="$entityMeta[$entity]['icon']" class="h-5 w-5" />
                            </span>
                            <div>
                                <h2 class="text-base font-semibold text-slate-900">{{ $entityMeta[$entity]['label'] }}</h2>
                                <p class="text-xs text-slate-400">
                                    {{ __(':new new · :renumbered renumbered · :adopted already here · :lines line(s)', [
                                        'new' => $bundlePlan['totals'][$entity]['new'],
                                        'renumbered' => $bundlePlan['totals'][$entity]['renumbered'],
                                        'adopted' => $bundlePlan['totals'][$entity]['adopted'],
                                        'lines' => $bundlePlan['totals'][$entity]['lines'],
                                    ]) }}
                                </p>
                            </div>
                        </div>
                        <div class="flex items-center gap-3 text-sm">
                            <button type="button" wire:click="toggleAllBundle('{{ $entity }}', true)" class="font-medium text-indigo-600 transition hover:text-indigo-800">{{ __('Tick all') }}</button>
                            <button type="button" wire:click="toggleAllBundle('{{ $entity }}', false)" class="font-medium text-slate-500 transition hover:text-slate-700">{{ __('Untick all') }}</button>
                        </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="w-10 px-3 py-3.5 lg:px-4"></th>
                                    <th class="px-3 py-3.5 lg:px-4">{{ __('Number') }}</th>
                                    <th class="px-3 py-3.5 lg:px-4">{{ __('Raised') }}</th>
                                    <th class="px-3 py-3.5 lg:px-4">{{ __('Customer') }}</th>
                                    <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Lines') }}</th>
                                    <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Total') }}</th>
                                    <th class="px-3 py-3.5 lg:px-4">{{ __('What happens') }}</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100 bg-white">
                                @foreach ($rows as $row)
                                    <tr wire:key="bundle-{{ $entity }}-{{ $row['ref'] }}" class="transition hover:bg-slate-50/70 {{ $row['state'] === 'adopted' ? 'opacity-60' : '' }}">
                                        <td class="whitespace-nowrap px-3 py-4 lg:px-4">
                                            <input type="checkbox" wire:model="bundleInclude.{{ $entity }}.{{ $row['ref'] }}"
                                                @disabled($row['state'] === 'adopted')
                                                class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500 disabled:opacity-40" />
                                        </td>
                                        <td class="whitespace-nowrap px-3 py-4 text-sm font-medium text-slate-900 lg:px-4">
                                            {{ $row['final_number'] }}
                                            @if ($row['final_number'] !== $row['number'])
                                                <span class="ml-1 text-xs font-normal text-slate-400">{{ __('was :number', ['number' => $row['number']]) }}</span>
                                            @endif
                                        </td>
                                        <td class="whitespace-nowrap px-3 py-4 text-sm text-slate-500 lg:px-4">
                                            {{ $row['issued_at'] ? \Illuminate\Support\Carbon::parse($row['issued_at'])->format('j M Y') : '—' }}
                                        </td>
                                        <td class="px-3 py-4 text-sm lg:px-4">
                                            @if ($row['customer_id'])
                                                <span class="text-slate-600">{{ $row['customer'] }}</span>
                                            @else
                                                <span class="text-rose-600">{{ $row['customer'] ?? __('nobody') }}</span>
                                            @endif
                                        </td>
                                        <td class="whitespace-nowrap px-3 py-4 text-right text-sm tabular-nums text-slate-500 lg:px-4">{{ $row['lines'] }}</td>
                                        <td class="whitespace-nowrap px-3 py-4 text-right text-sm font-semibold tabular-nums text-slate-900 lg:px-4">
                                            {{ $row['currency_code'] }} {{ number_format($row['total'], 2) }}
                                        </td>
                                        <td class="px-3 py-4 text-sm lg:px-4">
                                            <x-badge :color="$stateMeta[$row['state']]['color']">{{ $stateMeta[$row['state']]['label'] }}</x-badge>
                                            @if ($row['issues'] !== [])
                                                <ul class="mt-1.5 space-y-1 text-xs text-slate-500">
                                                    @foreach ($row['issues'] as $issue)
                                                        <li>{{ $issue }}</li>
                                                    @endforeach
                                                </ul>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </x-card>
            @endforeach

            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                <x-secondary-button wire:click="resetWizard" type="button">
                    <x-icon name="arrow-left" class="mr-1.5 h-4 w-4" />
                    {{ __('Choose another file') }}
                </x-secondary-button>
                <x-button wire:click="runBundleImport" wire:loading.attr="disabled" wire:target="runBundleImport">
                    <span wire:loading.remove wire:target="runBundleImport">{{ __('Import the ticked documents') }}</span>
                    <span wire:loading wire:target="runBundleImport">{{ __('Importing…') }}</span>
                </x-button>
            </div>
        @endif

        {{-- ============ TRANSACTION BUNDLE: DONE ============ --}}
        @if ($stage === 'done' && $sourceType === 'bundle' && $bundleResult)
            <x-card class="p-6">
                <div class="flex items-center gap-3">
                    <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-50 text-emerald-600">
                        <x-icon name="check-circle" class="h-6 w-6" />
                    </span>
                    <div>
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Bundle imported') }}</h2>
                        <p class="text-sm text-slate-500">
                            {{ __(':imported imported · :adopted already here · :skipped left out · :lines line(s)', [
                                'imported' => array_sum($bundleResult['imported']),
                                'adopted' => array_sum($bundleResult['adopted']),
                                'skipped' => array_sum($bundleResult['skipped']),
                                'lines' => $bundleResult['lines'],
                            ]) }}
                        </p>
                    </div>
                </div>

                <div class="mt-4 rounded-xl border border-slate-200 bg-slate-50 p-3 text-sm text-slate-600">
                    {{ __('Every invoice came in owing its full value, and only the payments in the file will have settled it. Anything still showing a balance is either genuinely unpaid or was paid by something that did not travel: receipt those here as the customer pays, so the cash and the ledger agree.') }}
                </div>

                @if ($bundleResult['warnings'] !== [])
                    <div class="mt-4 rounded-xl border border-amber-200 bg-amber-50 p-3">
                        <p class="text-sm font-semibold text-amber-800">{{ __('Worth knowing') }}</p>
                        <ul class="mt-2 list-disc space-y-1 pl-5 text-xs text-amber-700">
                            @foreach ($bundleResult['warnings'] as $warning)
                                <li>{{ $warning }}</li>
                            @endforeach
                        </ul>
                        <p class="mt-2 text-xs text-amber-600">{{ __('Fix the cause, then import the same file again, everything already in is recognised and left alone.') }}</p>
                    </div>
                @endif

                <div class="mt-6 flex gap-3">
                    <x-button wire:click="resetWizard">{{ __('Import another') }}</x-button>
                    <a href="{{ route('invoices.index') }}"
                        class="inline-flex items-center gap-1.5 rounded-lg px-3 py-2 text-sm font-medium text-slate-600 transition hover:bg-slate-100 hover:text-slate-900">
                        {{ __('Open Invoices') }}
                        <x-icon name="arrow-right" class="h-4 w-4" />
                    </a>
                </div>
            </x-card>
        @endif

        @if ($stage === 'preview' && ! in_array($sourceType, ['pnl', 'bank', 'bundle'], true))
            @php $meta = $this->meta; @endphp

            @if ($parseErrors !== [])
                <div class="mb-4 rounded-2xl border border-rose-200 bg-rose-50 p-4 text-sm text-rose-700">
                    <p class="font-semibold">{{ __('Some PDFs were skipped:') }}</p>
                    <ul class="mt-1 list-disc pl-5">
                        @foreach ($parseErrors as $err)<li>{{ $err }}</li>@endforeach
                    </ul>
                </div>
            @endif

            {{-- Import options --}}
            <x-card class="mb-4 p-5">
                <h3 class="text-sm font-semibold text-slate-900">{{ __('Import options') }}</h3>

                {{-- Sync mode --}}
                <label class="mt-3 flex items-start gap-2 rounded-xl border border-indigo-200 bg-indigo-50/40 p-3">
                    <input type="checkbox" wire:model.live="syncMode" class="mt-0.5 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
                    <span class="text-sm text-slate-700">
                        {{ __('Sync mode, safe to re-run, no duplicates') }}
                        <span class="block text-xs text-slate-400">
                            @if ($sourceType === 'pdf')
                                {{ __('Matching invoice/quote numbers are updated in place instead of duplicated. (Pruning is skipped for PDF uploads.)') }}
                            @else
                                {{ __('Re-importing this sheet updates changed records, leaves unchanged ones, and removes records you deleted from the sheet. Matches by document number (or row content when there is none).') }}
                            @endif
                        </span>
                    </span>
                </label>

                <div class="mt-3 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                    <div>
                        <x-label :value="__('Job status')" />
                        <select wire:model="defaultJobStatus" class="mt-1 w-full rounded-xl border-slate-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('Auto (from invoice)') }}</option>
                            <option value="completed">{{ __('Completed') }}</option>
                            <option value="delivered">{{ __('Delivered') }}</option>
                            <option value="pending">{{ __('Pending') }}</option>
                        </select>
                    </div>
                    <div>
                        <x-label :value="__('New items become')" />
                        <select wire:model="defaultProductType" class="mt-1 w-full rounded-xl border-slate-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="product">{{ __('Products') }}</option>
                            <option value="service">{{ __('Services') }}</option>
                        </select>
                    </div>
                    <div class="flex items-end">
                        @if ($syncMode)
                            <p class="text-xs text-slate-400">{{ __('Sync handles existing records automatically.') }}</p>
                        @else
                            <label class="flex items-center gap-2 text-sm text-slate-700">
                                <input type="checkbox" wire:model="skipExistingDocNumbers" class="rounded text-indigo-600 focus:ring-indigo-500">
                                {{ __('Skip existing invoice numbers') }}
                            </label>
                        @endif
                    </div>
                    <div>
                        <label class="flex items-center gap-2 text-sm text-slate-700">
                            <input type="checkbox" wire:model.live="recordPayments" class="rounded text-indigo-600 focus:ring-indigo-500">
                            {{ __('Record payment for PAID') }}
                        </label>
                        @if ($recordPayments)
                            <select wire:model="fundAccountId" class="mt-2 w-full rounded-xl border-slate-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                                <option value="">{{ __('Choose account…') }}</option>
                                @foreach ($fundAccounts as $acc)
                                    <option value="{{ $acc->id }}">{{ $acc->name }} ({{ $acc->currency_code }})</option>
                                @endforeach
                            </select>
                            <p class="mt-1 text-xs text-slate-400">{{ __('Only PAID invoices in the account currency are recorded.') }}</p>
                        @endif
                    </div>
                </div>
            </x-card>

            @if ($documents === [])
                <x-empty-state icon="inbox" :title="__('Nothing to import')" :message="__('No documents could be built from this source.')">
                    <x-secondary-button wire:click="resetWizard">{{ __('Start over') }}</x-secondary-button>
                </x-empty-state>
            @else
                <div class="mb-3 flex items-center justify-between">
                    <p class="text-sm text-slate-500">{{ __(':n document(s) ready', ['n' => count($documents)]) }}</p>
                    <div class="flex gap-2 text-xs">
                        <button wire:click="toggleAll(true)" class="font-semibold text-indigo-600 hover:underline">{{ __('Select all') }}</button>
                        <span class="text-slate-300">·</span>
                        <button wire:click="toggleAll(false)" class="font-semibold text-slate-500 hover:underline">{{ __('Clear') }}</button>
                    </div>
                </div>

                <div class="space-y-4">
                    @foreach ($documents as $i => $doc)
                        @php $m = $meta[$i] ?? ['customer_exists' => false, 'products' => [], 'valid' => true]; @endphp
                        <x-card class="overflow-hidden {{ ($included[$i] ?? false) ? '' : 'opacity-60' }}">
                            <div class="flex items-start gap-3 border-b border-slate-100 bg-slate-50/60 p-4">
                                <input type="checkbox" wire:model.live="included.{{ $i }}" class="mt-1 rounded text-indigo-600 focus:ring-indigo-500">
                                <div class="min-w-0 flex-1">
                                    <div class="flex flex-wrap items-center gap-2">
                                        <span class="font-semibold text-slate-900">{{ $doc['customer_name'] }}</span>
                                        @if ($m['customer_exists'])
                                            <x-badge color="slate">{{ __('existing customer') }}</x-badge>
                                        @else
                                            <x-badge color="emerald">{{ __('new customer') }}</x-badge>
                                        @endif
                                        <x-badge :color="$statusBadge[$doc['status']] ?? 'slate'">{{ $doc['status'] }}</x-badge>
                                    </div>
                                    <p class="mt-0.5 text-xs text-slate-500">
                                        {{ $doc['document_number'] ?: __('(number will be generated)') }}
                                        @if ($doc['date']) · {{ $doc['date'] }} @endif
                                        @if ($doc['currency_code']) · {{ $doc['currency_code'] }} @endif
                                    </p>
                                </div>
                                <div class="text-right">
                                    <p class="text-xs text-slate-400">{{ __('Total') }}</p>
                                    <p class="font-bold text-slate-900">{{ number_format($doc['totals']['total'] ?? 0, 2) }}</p>
                                    @if (($doc['cost_total'] ?? null) !== null)
                                        @php
                                            $docTotal = $doc['totals']['total'] ?? 0;
                                            $docMargin = $docTotal > 0 ? round((($docTotal - $doc['cost_total']) / $docTotal) * 100) : null;
                                        @endphp
                                        <p class="mt-1 text-[11px] text-slate-400">{{ __('Cost') }} <span class="font-medium text-slate-600">{{ number_format($doc['cost_total'], 2) }}</span>@if ($docMargin !== null) · <span class="font-medium {{ $docMargin >= 0 ? 'text-emerald-600' : 'text-rose-600' }}">{{ $docMargin }}%</span>@endif</p>
                                    @endif
                                </div>
                            </div>

                            <div class="overflow-x-auto">
                                <table class="min-w-full text-sm">
                                    <thead>
                                        <tr class="text-left text-xs uppercase tracking-wider text-slate-400">
                                            <th class="px-4 py-2 font-medium">{{ __('Item') }}</th>
                                            <th class="px-4 py-2 text-right font-medium">{{ __('Qty') }}</th>
                                            <th class="px-4 py-2 text-right font-medium">{{ __('Rate') }}</th>
                                            <th class="px-4 py-2 text-right font-medium">{{ __('Discount') }}</th>
                                            <th class="px-4 py-2 text-right font-medium">{{ __('Total') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody class="divide-y divide-slate-100">
                                        @foreach ($doc['lines'] as $line)
                                            <tr>
                                                <td class="px-4 py-2">
                                                    <div class="flex items-center gap-2">
                                                        <span class="font-medium text-slate-800">{{ $line['name'] }}</span>
                                                        @if (! ($m['products'][$line['name']] ?? false))
                                                            <x-badge color="emerald">{{ __('new') }}</x-badge>
                                                        @endif
                                                    </div>
                                                    @if (! empty($line['description']))
                                                        <p class="text-xs text-slate-400">{{ \Illuminate\Support\Str::limit($line['description'], 90) }}</p>
                                                    @endif
                                                </td>
                                                <td class="px-4 py-2 text-right text-slate-600">{{ rtrim(rtrim(number_format($line['qty'], 2), '0'), '.') }}</td>
                                                <td class="px-4 py-2 text-right text-slate-600">{{ number_format($line['unit_price'], 2) }}</td>
                                                <td class="px-4 py-2 text-right text-slate-600">{{ number_format($line['discount'], 2) }}</td>
                                                <td class="px-4 py-2 text-right font-medium text-slate-800">{{ number_format($line['line_total'], 2) }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                            @if (! empty($doc['warnings']))
                                <div class="border-t border-amber-100 bg-amber-50 px-4 py-2 text-xs text-amber-700">
                                    @foreach ($doc['warnings'] as $w)<p>⚠ {{ $w }}</p>@endforeach
                                </div>
                            @endif
                        </x-card>
                    @endforeach
                </div>

                <x-input-error for="commit" class="mt-4" />

                <div class="mt-6 flex justify-between">
                    <x-secondary-button wire:click="backToConfigure">{{ __('Back') }}</x-secondary-button>
                    <x-button wire:click="runImport" wire:loading.attr="disabled">
                        <span wire:loading.remove wire:target="runImport">{{ __('Import now') }}</span>
                        <span wire:loading wire:target="runImport">{{ __('Importing…') }}</span>
                    </x-button>
                </div>
            @endif
        @endif

        {{-- ======================= STEP 4: DONE (P&L) ======================= --}}
        @if ($stage === 'done' && $sourceType === 'pnl' && $pnlResult)
            @php $c = $pnlResult['counts']; @endphp
            <x-card class="p-6">
                <div class="flex items-center gap-3">
                    <span class="flex h-12 w-12 items-center justify-center rounded-2xl bg-emerald-50 text-emerald-600">
                        <x-icon name="check-circle" class="h-7 w-7" />
                    </span>
                    <div>
                        <h2 class="text-lg font-bold text-slate-900">{{ __('P&L imported') }}</h2>
                        <p class="text-sm text-slate-500">{{ __('Your monthly jobs and operating costs are now in BillPro.') }}</p>
                    </div>
                </div>

                @php
                    $pnlStats = $pnlMode === 'sync'
                        ? [
                            ['label' => __('New jobs'), 'value' => $c['jobs'] ?? 0],
                            ['label' => __('Updated'), 'value' => ($c['jobs_updated'] ?? 0) + ($c['expenses_updated'] ?? 0)],
                            ['label' => __('Unchanged'), 'value' => $c['unchanged'] ?? 0],
                            ['label' => __('Removed'), 'value' => $c['pruned'] ?? 0],
                            ['label' => __('Customers'), 'value' => $c['customers'] ?? 0],
                            ['label' => __('Expenses'), 'value' => $c['expenses'] ?? 0],
                            ['label' => __('Funding'), 'value' => $c['job_funding'] ?? 0],
                            ['label' => __('Director loans'), 'value' => $c['director_loans'] ?? 0],
                        ]
                        : [
                            ['label' => __('Jobs'), 'value' => $c['jobs'] ?? 0],
                            ['label' => __('Invoices'), 'value' => $c['invoices'] ?? 0],
                            ['label' => __('Job costs'), 'value' => $c['job_costs'] ?? 0],
                            ['label' => __('Customers'), 'value' => $c['customers'] ?? 0],
                            ['label' => __('Expenses'), 'value' => $c['expenses'] ?? 0],
                            ['label' => __('Funding'), 'value' => $c['job_funding'] ?? 0],
                            ['label' => __('Director loans'), 'value' => $c['director_loans'] ?? 0],
                            ['label' => __('Skipped'), 'value' => $c['skipped'] ?? 0],
                        ];
                @endphp
                <div class="mt-6 grid grid-cols-2 gap-4 sm:grid-cols-4 lg:grid-cols-8">
                    @foreach ($pnlStats as $stat)
                        <div class="rounded-2xl bg-slate-50 p-4 text-center">
                            <p class="text-3xl font-bold text-slate-900">{{ $stat['value'] }}</p>
                            <p class="mt-1 text-xs font-medium uppercase tracking-wider text-slate-500">{{ $stat['label'] }}</p>
                        </div>
                    @endforeach
                </div>

                @if (! empty($pnlResult['notes']))
                    <div class="mt-4 rounded-xl border border-amber-100 bg-amber-50 p-3 text-xs text-amber-700">
                        <p class="font-semibold">{{ __('Notes') }}</p>
                        @foreach ($pnlResult['notes'] as $n)<p>⚠ {{ $n }}</p>@endforeach
                    </div>
                @endif

                @if (! empty($pnlResult['errors']))
                    <div class="mt-4 rounded-xl border border-rose-200 bg-rose-50 p-3 text-xs text-rose-700">
                        <p class="font-semibold">{{ __(':n row(s) could not be imported', ['n' => count($pnlResult['errors'])]) }}</p>
                        @foreach (array_slice($pnlResult['errors'], 0, 20) as $e)<p>{{ $e }}</p>@endforeach
                    </div>
                @endif

                <div class="mt-6 flex gap-3">
                    <x-button wire:click="resetWizard">{{ __('Import another') }}</x-button>
                    <a href="{{ route('jobs.index') }}"><x-secondary-button>{{ __('View jobs') }}</x-secondary-button></a>
                </div>
            </x-card>
        @endif

        {{-- ======================= STEP 4: DONE (products & costs) ======================= --}}
        @if ($stage === 'done' && $sourceType === 'products' && $productsResult)
            @php $c = $productsResult['counts'] ?? []; @endphp
            <x-card class="p-6">
                <div class="flex items-center gap-3">
                    <span class="flex h-12 w-12 items-center justify-center rounded-2xl bg-emerald-50 text-emerald-600">
                        <x-icon name="check-circle" class="h-7 w-7" />
                    </span>
                    <div>
                        <h2 class="text-lg font-bold text-slate-900">{{ __('Products & costs imported') }}</h2>
                        <p class="text-sm text-slate-500">{{ __('Your costing workbook is now in BillPro.') }}</p>
                    </div>
                </div>

                <div class="mt-6 grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
                    @foreach ([
                        ['label' => __('Products'), 'value' => $c['products'] ?? 0],
                        ['label' => __('BOM lines'), 'value' => $c['bom_lines'] ?? 0],
                        ['label' => __('Price tiers'), 'value' => $c['tiers'] ?? 0],
                        ['label' => __('Operating costs'), 'value' => $c['operating_costs'] ?? 0],
                        ['label' => __('Ink modes'), 'value' => $c['ink_modes'] ?? 0],
                        ['label' => __('Accounts'), 'value' => $c['accounts'] ?? 0],
                        ['label' => __('Assets'), 'value' => $c['assets'] ?? 0],
                        ['label' => __('Capital'), 'value' => $c['capital'] ?? 0],
                        ['label' => __('Director loans'), 'value' => $c['director_loans'] ?? 0],
                        ['label' => __('Prices updated'), 'value' => $c['prices_updated'] ?? 0],
                        ['label' => __('Currencies'), 'value' => $c['currencies'] ?? 0],
                    ] as $stat)
                        <div class="rounded-2xl bg-slate-50 p-4 text-center">
                            <p class="text-3xl font-bold text-slate-900">{{ $stat['value'] }}</p>
                            <p class="mt-1 text-xs font-medium uppercase tracking-wider text-slate-500">{{ $stat['label'] }}</p>
                        </div>
                    @endforeach
                </div>

                @if (! empty($productsResult['notes']))
                    <div class="mt-4 rounded-xl border border-amber-100 bg-amber-50 p-3 text-xs text-amber-700">
                        <p class="font-semibold">{{ __('Notes') }}</p>
                        @foreach ($productsResult['notes'] as $n)<p>⚠ {{ $n }}</p>@endforeach
                    </div>
                @endif

                <div class="mt-6 flex gap-3">
                    <x-button wire:click="resetWizard">{{ __('Import another') }}</x-button>
                    <a href="{{ route('products.index') }}"><x-secondary-button>{{ __('View products') }}</x-secondary-button></a>
                </div>
            </x-card>
        @endif

        {{-- ======================= STEP 4: DONE ======================= --}}
        @if ($stage === 'done' && ! in_array($sourceType, ['pnl', 'products', 'bank', 'bundle'], true) && $result)
            <x-card class="p-6">
                <div class="flex items-center gap-3">
                    <span class="flex h-12 w-12 items-center justify-center rounded-2xl bg-emerald-50 text-emerald-600">
                        <x-icon name="check-circle" class="h-7 w-7" />
                    </span>
                    <div>
                        <h2 class="text-lg font-bold text-slate-900">{{ __('Import complete') }}</h2>
                        <p class="text-sm text-slate-500">{{ __('Your past jobs are now in BillPro.') }}</p>
                    </div>
                </div>

                <div class="mt-6 grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
                    @foreach (array_filter([
                        ['label' => __('New invoices'), 'value' => $result['invoices_created'], 'color' => 'indigo'],
                        $syncMode ? ['label' => __('Updated'), 'value' => $result['invoices_updated'] ?? 0, 'color' => 'sky'] : null,
                        $syncMode ? ['label' => __('Unchanged'), 'value' => $result['invoices_unchanged'] ?? 0, 'color' => 'slate'] : null,
                        $syncMode ? ['label' => __('Removed'), 'value' => $result['records_pruned'] ?? 0, 'color' => 'rose'] : null,
                        ['label' => __('Jobs'), 'value' => $result['jobs_created'], 'color' => 'violet'],
                        ['label' => __('Job costs'), 'value' => $result['job_costs_created'] ?? 0, 'color' => 'amber'],
                        ['label' => __('Customers'), 'value' => $result['customers_created'], 'color' => 'emerald'],
                        ['label' => __('Products'), 'value' => $result['products_created'], 'color' => 'sky'],
                        ['label' => __('Payments'), 'value' => $result['payments_created'], 'color' => 'amber'],
                        ! $syncMode ? ['label' => __('Skipped'), 'value' => $result['documents_skipped'], 'color' => 'slate'] : null,
                    ]) as $stat)
                        <div class="rounded-2xl bg-slate-50 p-4 text-center">
                            <p class="text-3xl font-bold text-slate-900">{{ $stat['value'] }}</p>
                            <p class="mt-1 text-xs font-medium uppercase tracking-wider text-slate-500">{{ $stat['label'] }}</p>
                        </div>
                    @endforeach
                </div>

                @if (! empty($result['skipped']))
                    <div class="mt-4 rounded-xl border border-slate-200 bg-slate-50 p-3 text-xs text-slate-600">
                        <p class="font-semibold">{{ __('Skipped') }}</p>
                        @foreach ($result['skipped'] as $s)<p>{{ $s['ref'] }}, {{ $s['message'] }}</p>@endforeach
                    </div>
                @endif

                @if (! empty($result['errors']))
                    <div class="mt-4 rounded-xl border border-rose-200 bg-rose-50 p-3 text-xs text-rose-700">
                        <p class="font-semibold">{{ __('Errors') }}</p>
                        @foreach ($result['errors'] as $e)<p>{{ $e['ref'] }}, {{ $e['message'] }}</p>@endforeach
                    </div>
                @endif

                <div class="mt-6 flex gap-3">
                    <x-button wire:click="resetWizard">{{ __('Import another') }}</x-button>
                    <a href="{{ route('jobs.index') }}"><x-secondary-button>{{ __('View jobs') }}</x-secondary-button></a>
                </div>
            </x-card>
        @endif

    </div>
</div>