@extends('layouts.app')

@section('title', 'Import Preview')

@section('content')
<x-breadcrumb :items="[
    ['label' => 'Imports', 'url' => route('imports.index')],
    ['label' => $import->original_name ?? 'Import', 'url' => route('imports.show', $import)],
    ['label' => 'Preview'],
]" />

<x-page-header title="Import Preview" subtitle="Review normalized rows before executing the import.">
    <x-slot name="actions">
        <a href="{{ route('imports.show', $import) }}" class="procure-btn"><i class="fas fa-arrow-left"></i> Back</a>
        <a href="{{ route('imports.invalid', $import) }}" class="procure-btn"><i class="fas fa-exclamation-triangle"></i> Invalid Rows</a>
        <form method="POST" action="{{ route('imports.execute', $import) }}" class="d-inline">
            @csrf
            <button type="submit" class="procure-btn-primary"><i class="fas fa-play"></i> Execute Import</button>
        </form>
    </x-slot>
</x-page-header>

<div class="row mb-3">
    <div class="col-md-4 mb-2">
        <x-kpi-card label="Preview Rows" :value="(string) ($rows ?? collect())->count()" icon="fas fa-table" color="blue" />
    </div>
    <div class="col-md-4 mb-2">
        <x-kpi-card label="Valid" :value="(string) ($import->valid_rows ?? 0)" icon="fas fa-check" color="green" />
    </div>
    <div class="col-md-4 mb-2">
        <x-kpi-card label="Invalid" :value="(string) ($import->invalid_rows ?? 0)" icon="fas fa-times" color="purple" />
    </div>
</div>

@if(($rows ?? collect())->isEmpty())
    <div class="chart-card">
        <div class="chart-card-body">
            <x-empty-state icon="fas fa-table" title="No preview rows" message="Rows will appear after mapping and validation." />
        </div>
    </div>
@else
    <div class="chart-card">
        <div class="chart-card-body" style="overflow-x:auto;">
            <table class="procure-table">
                <thead>
                    <tr>
                        <th>Row #</th>
                        <th>Status</th>
                        <th>Normalized Data</th>
                        <th>Errors</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($rows as $row)
                        <tr>
                            <td>{{ $row->row_number }}</td>
                            <td><x-status-badge :status="$row->status" /></td>
                            <td>
                                <code style="font-size:11px;white-space:pre-wrap;">{{ json_encode($row->normalized_data ?? $row->raw_data ?? [], JSON_UNESCAPED_UNICODE) }}</code>
                            </td>
                            <td class="text-danger small">
                                @if(!empty($row->validation_errors))
                                    {{ is_array($row->validation_errors) ? implode('; ', $row->validation_errors) : $row->validation_errors }}
                                @else
                                    —
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="px-3 pb-3 text-muted small">Showing up to 50 rows.</div>
    </div>
@endif
@endsection