@extends('layouts.app')
@section('title', 'Import '.$import->original_filename)

@section('content')
<div class="space-y-6"
     @if ($import->isRunning())
         x-data x-init="const poll = setInterval(async () => {
             const response = await fetch(@js(route('imports.progress', $import)), { headers: { Accept: 'application/json' } });
             if (!response.ok) return;
             const data = await response.json();
             document.getElementById('import-progress-bar').style.width = data.percent + '%';
             document.getElementById('import-progress-text').textContent = data.processed_rows + ' / ' + data.total_rows + ' rows · ' + data.percent + '%';
             if (['completed', 'failed', 'cancelled'].includes(data.status)) { clearInterval(poll); window.location.reload(); }
         }, 4000)"
     @endif
>
    <div class="card-pad">
        <div class="flex flex-wrap items-start justify-between gap-4">
            <div>
                <h2 class="text-lg font-semibold text-slate-900 dark:text-white">{{ $import->original_filename }}</h2>
                <p class="mt-1 text-sm text-slate-500">
                    Uploaded {{ $import->created_at->format('d M Y H:i') }} by {{ $import->user?->name ?? '—' }}
                    @if ($import->contactList) · into <a href="{{ route('lists.show', $import->contactList) }}" class="text-brand-600 hover:underline">{{ $import->contactList->name }}</a>@endif
                </p>
            </div>
            <div class="flex items-center gap-2">
                <x-status-badge :status="$import->status"/>
                @if ($import->isRunning())
                    @can('manage imports')
                        <x-confirm-form :action="route('imports.cancel', $import)" buttonClass="btn-secondary" message="Stop this import? Rows already imported are kept.">
                            Cancel
                        </x-confirm-form>
                    @endcan
                @endif
            </div>
        </div>

        @if ($import->isRunning())
            <div class="mt-5">
                <div class="mb-1 flex justify-between text-sm text-slate-500">
                    <span>Processing in background batches (cron)…</span>
                    <span id="import-progress-text">{{ $import->processed_rows }} / {{ $import->total_rows }} rows · {{ $import->progressPercent() }}%</span>
                </div>
                <div class="progress-track"><div id="import-progress-bar" class="progress-bar" style="width: {{ $import->progressPercent() }}%"></div></div>
            </div>
        @endif

        @if ($import->error)
            <div class="mt-4 rounded-lg bg-rose-50 p-3 text-sm text-rose-800 dark:bg-rose-950/50 dark:text-rose-300">{{ $import->error }}</div>
        @endif
    </div>

    <div class="grid grid-cols-2 gap-4 sm:grid-cols-4 xl:grid-cols-8">
        <x-stat-card label="Total rows" :value="number_format($import->total_rows)"/>
        <x-stat-card label="Imported" :value="number_format($import->imported_count)" tone="green"/>
        <x-stat-card label="Updated" :value="number_format($import->updated_count)" tone="blue"/>
        <x-stat-card label="Duplicates" :value="number_format($import->duplicate_count)" tone="amber"/>
        <x-stat-card label="Invalid" :value="number_format($import->invalid_count)" tone="red"/>
        <x-stat-card label="Suppressed" :value="number_format($import->suppressed_count)" tone="red"/>
        <x-stat-card label="Unsubscribed" :value="number_format($import->unsubscribed_count)" tone="red"/>
        <x-stat-card label="Failed" :value="number_format($import->failed_count)" tone="red"/>
    </div>

    <div class="card">
        <div class="flex items-center justify-between border-b border-slate-200 px-5 py-4 dark:border-slate-800">
            <h3 class="text-base font-semibold text-slate-900 dark:text-white">Rows with problems</h3>
            @if ($errorRows->total() > 0)
                <a href="{{ route('imports.errors', $import) }}" class="btn-secondary">Download error report</a>
            @endif
        </div>
        <table class="table">
            <thead><tr><th class="w-20">Row</th><th>Status</th><th>Reason</th><th>Data</th></tr></thead>
            <tbody class="divide-y divide-slate-200 dark:divide-slate-800">
            @forelse ($errorRows as $row)
                <tr>
                    <td class="tabular-nums">{{ $row->row_number }}</td>
                    <td><x-status-badge :status="$row->status"/></td>
                    <td class="max-w-60 truncate">{{ $row->reason }}</td>
                    <td class="max-w-md truncate text-slate-500">{{ implode(' | ', array_map('strval', array_slice($row->data ?? [], 0, 6))) }}</td>
                </tr>
            @empty
                <tr><td colspan="4" class="py-8 text-center text-sm text-slate-500">No problem rows 🎉</td></tr>
            @endforelse
            </tbody>
        </table>
        <div class="px-5 py-3">{{ $errorRows->links() }}</div>
    </div>
</div>
@endsection