@extends('backend.layouts.app')

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

@section('content')
    @php
        $pageTitle = 'Preview Department Import';
        $indexRoute = 'content-directory-department.index';
        $indexLabel = 'Departments';
    @endphp
    @include('backend.layouts.partials._page_header')

    <div class="space-y-6">
        <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="flex flex-wrap items-start justify-between gap-4 px-5 py-4 sm:px-6 sm:py-5">
                <div>
                    <h3 class="text-base font-medium text-gray-800 dark:text-white/90">Import Preview</h3>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                        File: <span class="font-medium text-gray-700 dark:text-gray-300">{{ $filename }}</span>
                    </p>
                </div>
                <span class="inline-flex items-center rounded-md bg-brand-50 px-2.5 py-1 text-xs font-medium text-brand-600 dark:bg-brand-500/10 dark:text-brand-400">
                    {{ number_format($totalRows) }} data row(s)
                </span>
            </div>

            <div class="grid grid-cols-2 gap-4 border-t border-gray-100 p-5 sm:grid-cols-4 sm:p-6 dark:border-gray-800">
                <div class="rounded-xl bg-success-50 p-4 dark:bg-success-500/10">
                    <p class="text-xs font-medium text-success-600 dark:text-success-400">Valid rows</p>
                    <p class="mt-1 text-2xl font-semibold text-success-700 dark:text-success-400">{{ number_format($validRows) }}</p>
                </div>
                <div class="rounded-xl bg-error-50 p-4 dark:bg-error-500/10">
                    <p class="text-xs font-medium text-error-600 dark:text-error-400">Invalid rows</p>
                    <p class="mt-1 text-2xl font-semibold text-error-700 dark:text-error-400">{{ number_format($invalidRows) }}</p>
                </div>
                <div class="rounded-xl bg-brand-50 p-4 dark:bg-brand-500/10">
                    <p class="text-xs font-medium text-brand-600 dark:text-brand-400">Will insert</p>
                    <p class="mt-1 text-2xl font-semibold text-brand-700 dark:text-brand-400">{{ number_format($insertCount) }}</p>
                </div>
                <div class="rounded-xl bg-warning-50 p-4 dark:bg-warning-500/10">
                    <p class="text-xs font-medium text-warning-600 dark:text-warning-400">Will update</p>
                    <p class="mt-1 text-2xl font-semibold text-warning-700 dark:text-warning-400">{{ number_format($updateCount) }}</p>
                </div>
            </div>

            <div class="border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
                @if ($invalidRows > 0)
                    <div class="flex items-start gap-3 rounded-xl border border-error-200 bg-error-50 p-4 dark:border-error-500/20 dark:bg-error-500/10">
                        <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-error-100 text-error-600 dark:bg-error-500/20 dark:text-error-400">
                            <svg class="fill-current" width="18" height="18" viewBox="0 0 20 20" aria-hidden="true">
                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-4a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 6Zm0 8.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd"/>
                            </svg>
                        </div>
                        <div>
                            <p class="text-sm font-semibold text-error-700 dark:text-error-400">This file cannot be imported yet.</p>
                            <p class="mt-1 text-sm text-error-700/90 dark:text-error-400/90">
                                Fix the invalid rows below and upload the corrected file. No data has been written to the database.
                            </p>
                        </div>
                    </div>
                @endif

                @if ($errors->any())
                    <div class="mt-4 rounded-lg border border-error-200 bg-error-50 p-4 text-sm text-error-700 dark:border-error-500/20 dark:bg-error-500/10 dark:text-error-400">
                        {{ $errors->first() }}
                    </div>
                @endif

                <form action="{{ route('content-directory-department.import.store') }}" method="POST" class="mt-5">
                    @csrf
                    <input type="hidden" name="token" value="{{ $token }}">

                    <div class="flex flex-wrap items-center justify-between gap-3">
                        <div class="flex flex-wrap gap-3">
                            <a href="{{ route('content-directory-department.import') }}"
                                class="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-white/[0.03]">
                                Cancel
                            </a>

                            @if ($invalidRows > 0)
                                <a href="{{ route('content-directory-department.import.errors', ['token' => $token]) }}"
                                    class="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-white/[0.03]">
                                    Download Error Report
                                </a>
                            @endif
                        </div>

                        <button type="submit" @disabled($invalidRows > 0 || $validRows === 0)
                            class="rounded-lg bg-brand-500 px-4 py-2 text-sm text-white hover:bg-brand-600 disabled:cursor-not-allowed disabled:opacity-50">
                            Confirm Import
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="px-5 py-4 sm:px-6 sm:py-5">
                <h3 class="text-base font-medium text-gray-800 dark:text-white/90">Row Validation</h3>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                    Showing {{ count($rows) }} of {{ number_format($totalRows) }} rows.
                    @if ($truncated)
                        The table is limited to the first 100 rows; validation covers the whole file.
                    @endif
                </p>
            </div>

            <div class="border-t border-gray-100 dark:border-gray-800">
                <div class="max-w-full overflow-x-auto">
                    <table class="w-full min-w-[1000px]">
                        <thead>
                            <tr class="border-b border-gray-100 dark:border-gray-800">
                                <th class="px-5 py-3 text-center text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Row</th>
                                <th class="px-5 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Code</th>
                                <th class="px-5 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Name (BM)</th>
                                <th class="px-5 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Name (EN)</th>
                                <th class="px-5 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Parent</th>
                                <th class="px-5 py-3 text-center text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Sort</th>
                                <th class="px-5 py-3 text-center text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Action</th>
                                <th class="px-5 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Status</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                            @foreach ($rows as $row)
                                <tr class="{{ ! empty($row['errors']) ? 'bg-error-50/60 dark:bg-error-500/5' : 'hover:bg-gray-50 dark:hover:bg-white/[0.02]' }}">
                                    <td class="px-5 py-4 text-center text-sm text-gray-600 dark:text-gray-400">{{ $row['row'] }}</td>
                                    <td class="px-5 py-4 text-sm font-medium text-gray-800 dark:text-white/90">{{ $row['code'] ?: '—' }}</td>
                                    <td class="px-5 py-4 text-sm text-gray-600 dark:text-gray-400">{{ $row['name_bm'] ?: '—' }}</td>
                                    <td class="px-5 py-4 text-sm text-gray-600 dark:text-gray-400">{{ $row['name_en'] ?: '—' }}</td>
                                    <td class="px-5 py-4 text-sm text-gray-600 dark:text-gray-400">{{ $row['parent_code'] ?: '—' }}</td>
                                    <td class="px-5 py-4 text-center text-sm text-gray-600 dark:text-gray-400">{{ $row['sort'] }}</td>
                                    <td class="px-5 py-4 text-center">
                                        @if ($row['action'] === 'update')
                                            <span class="inline-flex items-center rounded-md bg-warning-50 px-2 py-1 text-xs font-medium text-warning-600 dark:bg-warning-500/10 dark:text-warning-400">Update</span>
                                        @else
                                            <span class="inline-flex items-center rounded-md bg-success-50 px-2 py-1 text-xs font-medium text-success-600 dark:bg-success-500/10 dark:text-success-400">Insert</span>
                                        @endif
                                    </td>
                                    <td class="px-5 py-4 text-sm">
                                        @if (empty($row['errors']))
                                            <span class="inline-flex items-center rounded-md bg-success-50 px-2 py-1 text-xs font-medium text-success-600 dark:bg-success-500/10 dark:text-success-400">Valid</span>
                                        @else
                                            <span class="inline-flex items-center rounded-md bg-error-50 px-2 py-1 text-xs font-medium text-error-600 dark:bg-error-500/10 dark:text-error-400">Invalid</span>
                                        @endif
                                    </td>
                                </tr>

                                @if (! empty($row['errors']))
                                    <tr class="bg-error-50/60 dark:bg-error-500/5">
                                        <td colspan="8" class="px-5 pb-5 pt-0">
                                            <div class="flex items-start gap-3 rounded-lg border border-error-200/80 bg-white/80 p-3.5 dark:border-error-500/20 dark:bg-error-500/[0.06]">
                                                <div class="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-error-100 text-error-600 dark:bg-error-500/20 dark:text-error-400">
                                                    <svg class="fill-current" width="15" height="15" viewBox="0 0 20 20" aria-hidden="true">
                                                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-4a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 6Zm0 8.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd"/>
                                                    </svg>
                                                </div>
                                                <div class="min-w-0">
                                                    <p class="text-xs font-semibold uppercase tracking-wide text-error-600 dark:text-error-400">
                                                        Row {{ $row['row'] }} needs attention
                                                    </p>
                                                    <ul class="mt-2 space-y-1.5 text-xs text-error-700 dark:text-error-400">
                                                        @foreach ($row['errors'] as $error)
                                                            <li class="flex items-start gap-2">
                                                                <span class="mt-1.5 h-1 w-1 flex-shrink-0 rounded-full bg-error-500"></span>
                                                                <span class="leading-5">{{ $error }}</span>
                                                            </li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endif
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
@endsection