@extends('layouts.admin')

@section('title', 'Preview CSV Import')
@section('header_title', 'Preview & Validation')

@section('header_badge')
    <span class="text-xs font-semibold px-2.5 py-1 rounded-full bg-teal-50 text-teal-700 border border-teal-200">
        Step C & D: Pre-Import Verification
    </span>
@endsection

@section('content')
<div class="space-y-6">

    <!-- Validation Metrics Summary Cards -->
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
        <div class="bg-white p-4 rounded-xl border border-slate-200 text-center shadow-xs">
            <span class="text-xs text-slate-500 font-medium">Total Rows</span>
            <p class="text-2xl font-extrabold text-navy-900 mt-1">{{ $totalCount }}</p>
        </div>
        <div class="bg-white p-4 rounded-xl border border-emerald-200 text-center shadow-xs bg-emerald-50/20">
            <span class="text-xs text-emerald-700 font-medium">Valid (Clean)</span>
            <p class="text-2xl font-extrabold text-emerald-700 mt-1">{{ $validCount }}</p>
        </div>
        <div class="bg-white p-4 rounded-xl border border-amber-200 text-center shadow-xs bg-amber-50/20">
            <span class="text-xs text-amber-700 font-medium">Warnings (Shared Info)</span>
            <p class="text-2xl font-extrabold text-amber-700 mt-1">{{ $warningCount }}</p>
        </div>
        <div class="bg-white p-4 rounded-xl border border-rose-200 text-center shadow-xs bg-rose-50/20">
            <span class="text-xs text-rose-700 font-medium">Errors (Invalid Data)</span>
            <p class="text-2xl font-extrabold text-rose-700 mt-1">{{ $errorCount }}</p>
        </div>
    </div>

    <!-- Confirm Execution Bar -->
    <div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm flex flex-col sm:flex-row items-center justify-between gap-4">
        <div>
            <h4 class="text-sm font-bold text-slate-800">Ready to execute import batch?</h4>
            <p class="text-xs text-slate-500">
                Shared family numbers will be safely imported without duplicate blocking. Unique Member Codes will be generated.
            </p>
        </div>

        <form method="POST" action="{{ route('admin.import.execute') }}" class="flex items-center gap-4">
            @csrf
            @if($errorCount > 0)
                <label class="flex items-center gap-2 text-xs text-slate-700 cursor-pointer">
                    <input type="checkbox" name="skip_errors" value="1" checked class="rounded text-teal-600 focus:ring-teal-500">
                    <span>Skip invalid rows with errors</span>
                </label>
            @endif

            <a href="{{ route('admin.import.index') }}" class="px-4 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:text-slate-800 transition">
                Cancel
            </a>

            <button type="submit" class="px-6 py-2.5 rounded-xl text-xs font-bold text-white bg-teal-600 hover:bg-teal-700 transition shadow-md shadow-teal-500/20 flex items-center gap-2">
                <i class="fa-solid fa-cloud-arrow-down"></i>
                <span>Confirm & Ingest {{ $validCount + $warningCount }} Members</span>
            </button>
        </form>
    </div>

    <!-- Preview Table -->
    <div class="bg-white rounded-2xl border border-slate-200/80 shadow-sm overflow-hidden">
        <div class="p-4 border-b border-slate-200 bg-slate-50/50 flex items-center justify-between text-xs">
            <span class="font-bold text-slate-700 uppercase tracking-wider">Source Rows Inspection</span>
            <span class="text-slate-500">Review status tags before final database commit</span>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse text-xs">
                <thead>
                    <tr class="bg-slate-50 text-[11px] font-semibold text-slate-500 uppercase tracking-wider border-b border-slate-200">
                        <th class="py-3 px-4">Row #</th>
                        <th class="py-3 px-4">Full Name</th>
                        <th class="py-3 px-4">Membership #</th>
                        <th class="py-3 px-4">Mobile</th>
                        <th class="py-3 px-4">Email</th>
                        <th class="py-3 px-4">City</th>
                        <th class="py-3 px-4">Validation Status</th>
                        <th class="py-3 px-4">Validation Notes</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 font-sans">
                    @foreach($rows as $r)
                        <tr class="hover:bg-slate-50/80 {{ $r['status'] === 'invalid' ? 'bg-rose-50/40' : ($r['status'] === 'warning' ? 'bg-amber-50/30' : '') }}">
                            <td class="py-3 px-4 font-mono font-bold text-slate-600">{{ $r['row_number'] }}</td>
                            <td class="py-3 px-4 font-bold text-slate-900">{{ $r['data']['full_name'] ?? '—' }}</td>
                            <td class="py-3 px-4 font-mono text-slate-600">{{ $r['data']['membership_no'] ?? '—' }}</td>
                            <td class="py-3 px-4 font-mono text-slate-700">{{ $r['data']['mobile_primary'] ?? '—' }}</td>
                            <td class="py-3 px-4 text-slate-600">{{ $r['data']['email'] ?? '—' }}</td>
                            <td class="py-3 px-4 text-slate-600">{{ $r['data']['city'] ?? '—' }}</td>
                            <td class="py-3 px-4">
                                @if($r['status'] === 'valid')
                                    <span class="px-2 py-0.5 rounded-full text-[10px] font-semibold bg-emerald-100 text-emerald-800 border border-emerald-200">
                                        Clean / Valid
                                    </span>
                                @elseif($r['status'] === 'warning')
                                    <span class="px-2 py-0.5 rounded-full text-[10px] font-semibold bg-amber-100 text-amber-800 border border-amber-200">
                                        Warning
                                    </span>
                                @else
                                    <span class="px-2 py-0.5 rounded-full text-[10px] font-semibold bg-rose-100 text-rose-800 border border-rose-200">
                                        Invalid
                                    </span>
                                @endif
                            </td>
                            <td class="py-3 px-4 max-w-xs">
                                @if(!empty($r['errors']))
                                    <p class="text-rose-700 font-medium">{{ implode(' | ', $r['errors']) }}</p>
                                @endif
                                @if(!empty($r['warnings']))
                                    <p class="text-amber-800">{{ implode(' | ', $r['warnings']) }}</p>
                                @endif
                                @if(empty($r['errors']) && empty($r['warnings']))
                                    <span class="text-slate-400">Ready for insertion</span>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

</div>
@endsection