@php
    $tz = config('app.display_timezone');
    $statusColors = ['draft' => 'slate', 'processing' => 'sky', 'completed' => 'emerald', 'failed' => 'rose', 'undone' => 'amber'];
    $metrics = [
        ['label' => __('Created'), 'value' => $batch->created_count, 'icon' => 'plus', 'accent' => '#10b981', 'sub' => __('New prospects')],
        ['label' => __('Linked'), 'value' => $batch->linked_count, 'icon' => 'link', 'accent' => '#0ea5e9', 'sub' => __('Existing records')],
        ['label' => __('Updated'), 'value' => $batch->updated_count, 'icon' => 'pencil', 'accent' => '#6366f1', 'sub' => __('Blanks filled in')],
        ['label' => __('Skipped'), 'value' => $batch->skipped_count, 'icon' => 'arrow-right', 'accent' => '#64748b', 'sub' => __('Chosen, or already listed')],
        ['label' => __('Failed'), 'value' => $batch->failed_count, 'icon' => 'exclamation-triangle', 'accent' => '#e11d48', 'sub' => __('Download to fix')],
    ];
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8" @if ($batch->status === 'processing' && $canRun) wire:poll.750ms="processNext" @endif>
    <div class="mx-auto max-w-7xl space-y-6">
        <div>
            <a href="{{ route('crm.data') }}" wire:navigate class="inline-flex items-center gap-1 text-xs font-medium text-slate-500 hover:text-slate-700">
                <x-icon name="chevron-left" class="h-3.5 w-3.5" /> {{ __('Imports and Exports') }}
            </a>
        </div>

        <x-page-header :title="$batch->file_name ?: __('Import')"
            :subtitle="__('Client profiles imported by :name on :date.', [
                'name' => $batch->user?->name ?? __('someone'),
                'date' => $batch->created_at->timezone($tz)->format('j M Y, H:i'),
            ])">
            <x-badge :color="$statusColors[$batch->status] ?? 'slate'">{{ __(\App\Models\Crm\ImportBatch::STATUSES[$batch->status] ?? $batch->status) }}</x-badge>
            @if ($batch->failed_count > 0 && $batch->failed_rows_path)
                <x-secondary-button type="button" wire:click="downloadFailed">
                    <x-icon name="arrow-down-tray" class="mr-1.5 h-4 w-4" /> {{ __('Failed rows') }}
                </x-secondary-button>
            @endif
            @if ($portfolioLive)
                <a href="{{ route('crm.portfolios.show', $batch->portfolio) }}" wire:navigate>
                    <x-button type="button">
                        <x-icon name="folder" class="mr-1.5 h-4 w-4" /> {{ __('Open the work queue') }}
                    </x-button>
                </a>
            @endif
        </x-page-header>

        @if ($batch->status === 'processing')
            <x-card class="p-5">
                <div class="flex items-center justify-between text-sm">
                    <span class="font-semibold text-slate-700">{{ $canRun ? __('Writing the rows…') : __('This import is still being written by the person who started it.') }}</span>
                    <span class="tabular-nums text-slate-500">{{ number_format($batch->options['offset'] ?? 0) }} / {{ number_format($batch->total_rows) }}</span>
                </div>
                <div class="mt-3 h-2 overflow-hidden rounded-full bg-slate-100">
                    <div class="h-full rounded-full bg-indigo-500 transition-all" style="width: {{ $progress }}%"></div>
                </div>
                @if ($canRun)
                    <p class="mt-2 text-xs text-slate-400">{{ __('Keep this page open. If it closes, opening it again carries on where it stopped.') }}</p>
                @endif
            </x-card>
        @elseif ($batch->status === 'draft')
            <x-card class="p-5 text-sm text-slate-600">
                {{ __('This import was not finished, so nothing from it was written.') }}
                <a href="{{ route('crm.imports.index') }}" wire:navigate class="font-semibold text-indigo-600 hover:text-indigo-800">{{ __('Start an import') }}</a>
            </x-card>
        @endif

        <section class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
            @foreach ($metrics as $m)
                <x-card class="group relative flex flex-col overflow-hidden p-5 ring-slate-200/70">
                    <div class="flex items-start justify-between gap-2">
                        <p class="truncate text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ $m['label'] }}</p>
                        <span class="flex items-center justify-center rounded-xl text-white shadow-sm ring-1 ring-white/40" style="height: 2rem; width: 2rem; background: linear-gradient(135deg, {{ $m['accent'] }}, {{ $m['accent'] }}bb)">
                            <x-icon :name="$m['icon']" class="h-4 w-4" />
                        </span>
                    </div>
                    <p class="mt-3 font-bold leading-none tracking-tight text-slate-900 tabular-nums" style="font-size: 19px;">{{ number_format($m['value']) }}</p>
                    <span class="mt-2.5 inline-flex w-fit items-center gap-1 rounded-full bg-slate-100 px-2 py-1 text-[11px] font-semibold text-slate-500">{{ $m['sub'] }}</span>
                </x-card>
            @endforeach
        </section>

        <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
            <x-card class="p-5 lg:col-span-2">
                <h2 class="text-base font-semibold text-slate-900">{{ __('About this import') }}</h2>
                <dl class="mt-4 grid grid-cols-1 gap-x-6 gap-y-3 text-sm sm:grid-cols-2">
                    <div>
                        <dt class="text-xs text-slate-400">{{ __('Rows in the file') }}</dt>
                        <dd class="font-medium tabular-nums text-slate-900">{{ number_format($batch->total_rows) }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs text-slate-400">{{ __('Contacts added') }}</dt>
                        <dd class="font-medium tabular-nums text-slate-900">{{ number_format($batch->options['contacts_created'] ?? 0) }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs text-slate-400">{{ __('From') }}</dt>
                        <dd class="font-medium text-slate-900">{{ __(\App\Models\Crm\ImportBatch::SOURCES[$batch->source] ?? $batch->source) }}{{ ! empty($batch->options['sheet']) ? ', '.__('sheet :name', ['name' => $batch->options['sheet']]) : '' }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs text-slate-400">{{ __('Portfolio') }}</dt>
                        <dd class="font-medium text-slate-900">{{ $batch->portfolio?->name ?? __('Not available') }}</dd>
                    </div>
                    @if ($batch->completed_at)
                        <div>
                            <dt class="text-xs text-slate-400">{{ __('Finished') }}</dt>
                            <dd class="font-medium text-slate-900">{{ $batch->completed_at->timezone($tz)->format('j M Y, H:i') }}</dd>
                        </div>
                    @endif
                    @if ($batch->undone_at)
                        <div>
                            <dt class="text-xs text-slate-400">{{ __('Undone') }}</dt>
                            <dd class="font-medium text-slate-900">{{ __(':date by :name', ['date' => $batch->undone_at->timezone($tz)->format('j M Y, H:i'), 'name' => $batch->undoneBy?->name ?? __('someone')]) }}</dd>
                        </div>
                    @endif
                </dl>

                @if ($mapping !== [])
                    <h3 class="mt-6 text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('Columns used') }}</h3>
                    <div class="mt-2 flex flex-wrap gap-2">
                        @foreach ($mapping as $field => $header)
                            <span class="rounded-lg bg-slate-50 px-2 py-1 text-xs text-slate-600 ring-1 ring-slate-200">{{ __($field) }} <span class="text-slate-400">←</span> {{ $header }}</span>
                        @endforeach
                    </div>
                @endif
            </x-card>

            <x-card class="p-5">
                <h2 class="text-base font-semibold text-slate-900">{{ __('Undo') }}</h2>
                @if ($batch->status === 'undone')
                    <p class="mt-2 text-sm text-slate-500">{{ __('This import has been undone.') }}</p>
                @elseif ($batch->status !== 'completed')
                    <p class="mt-2 text-sm text-slate-500">{{ __('An import can be undone once it has finished.') }}</p>
                @elseif ($undoBlocker)
                    <p class="mt-2 text-sm text-slate-500">{{ $undoBlocker }}</p>
                @else
                    <p class="mt-2 text-sm text-slate-500">
                        {{ __('Until :date, and while nothing from it has been worked, this import can be taken back out: the organisations and contacts it created are removed and the blanks it filled in are emptied again.', ['date' => $batch->undo_expires_at?->timezone($tz)->format('j M Y')]) }}
                    </p>
                    @if ($canUndo)
                        <button type="button" wire:click="undo" wire:confirm="{{ __('Undo this import? What it created is removed.') }}"
                            class="mt-4 inline-flex items-center gap-1.5 text-sm font-semibold text-rose-600 hover:text-rose-800">
                            <x-icon name="arrow-uturn-left" class="h-4 w-4" /> {{ __('Undo this import') }}
                        </button>
                    @endif
                @endif
            </x-card>
        </div>
    </div>
</div>