import InputError from '@/Components/InputError';
import InputLabel from '@/Components/InputLabel';
import PrimaryButton from '@/Components/PrimaryButton';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { PageProps } from '@/types';
import { Head, Link, useForm } from '@inertiajs/react';
import { FormEventHandler } from 'react';

type ImportResult = {
    batch_id: string;
    total_rows: number;
    processed_rows: number;
    created: number;
    updated: number;
    skipped: number;
    errors: number;
    error_rows: Array<{
        row: number;
        message: string;
    }>;
};

type Props = PageProps<{
    statusLabels: Record<string, string>;
    defaultStatus: string;
    importResult?: ImportResult | null;
    flash?: {
        success?: string | null;
        error?: string | null;
    };
}>;

export default function Import({
    statusLabels,
    defaultStatus,
    importResult,
    flash,
}: Props) {
    const form = useForm<{
        file: File | null;
        update_existing: boolean;
        status_on_import: string;
    }>({
        file: null,
        update_existing: true,
        status_on_import: defaultStatus,
    });

    const submit: FormEventHandler = (event) => {
        event.preventDefault();

        form.post(route('companies.import.store'), {
            forceFormData: true,
        });
    };

    return (
        <AuthenticatedLayout
            header={
                <div className="flex items-center justify-between">
                    <h2 className="text-xl font-semibold leading-tight text-gray-800">
                        Import entreprises (XLSX)
                    </h2>
                    <Link
                        href={route('companies.index')}
                        className="text-sm font-medium text-indigo-600 hover:text-indigo-500"
                    >
                        Retour a la liste
                    </Link>
                </div>
            }
        >
            <Head title="Import entreprises" />

            <div className="py-10">
                <div className="mx-auto max-w-5xl space-y-6 px-4 sm:px-6 lg:px-8">
                    {flash?.success && (
                        <div className="rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">
                            {flash.success}
                        </div>
                    )}
                    {flash?.error && (
                        <div className="rounded-lg border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-800">
                            {flash.error}
                        </div>
                    )}

                    <section className="rounded-lg bg-white p-6 shadow-sm">
                        <h3 className="mb-4 text-lg font-semibold text-gray-900">
                            Formats reconnus
                        </h3>
                        <p className="text-sm text-gray-700">
                            L'annuaire national des avocats est detecte automatiquement
                            grace a ses colonnes Barreau, Nom, Prenom, Raison sociale,
                            SIREN, adresse, specialites, date de serment et langue.
                        </p>
                        <p className="mt-3 text-sm text-gray-600">
                            Le format entreprises historique reste accepte. Les
                            telephones et emails deja verifies ne sont pas effaces par
                            un annuaire qui ne les fournit pas.
                        </p>
                    </section>

                    <section className="rounded-lg bg-white p-6 shadow-sm">
                        <form onSubmit={submit} className="space-y-4">
                            <div>
                                <InputLabel
                                    htmlFor="company_import_file"
                                    value="Fichier Excel (.xlsx/.xls)"
                                />
                                <input
                                    id="company_import_file"
                                    type="file"
                                    accept=".xlsx,.xls"
                                    onChange={(event) =>
                                        form.setData(
                                            'file',
                                            event.target.files?.[0] ?? null,
                                        )
                                    }
                                    className="mt-1 block w-full rounded-md border border-gray-300 p-2"
                                />
                                <InputError
                                    message={form.errors.file}
                                    className="mt-2"
                                />
                            </div>

                            <div className="grid gap-4 md:grid-cols-2">
                                <div>
                                    <InputLabel
                                        htmlFor="company_import_status"
                                        value="Statut applique aux lignes importees"
                                    />
                                    <select
                                        id="company_import_status"
                                        value={form.data.status_on_import}
                                        onChange={(event) =>
                                            form.setData(
                                                'status_on_import',
                                                event.target.value,
                                            )
                                        }
                                        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                                    >
                                        {Object.entries(statusLabels).map(
                                            ([value, label]) => (
                                                <option key={value} value={value}>
                                                    {label}
                                                </option>
                                            ),
                                        )}
                                    </select>
                                </div>

                                <label className="mt-7 flex items-center gap-2 text-sm text-gray-700">
                                    <input
                                        type="checkbox"
                                        checked={form.data.update_existing}
                                        onChange={(event) =>
                                            form.setData(
                                                'update_existing',
                                                event.target.checked,
                                            )
                                        }
                                    />
                                    Mettre a jour les entreprises deja existantes
                                </label>
                            </div>

                            {form.progress && (
                                <div className="text-sm text-gray-600">
                                    Upload: {form.progress.percentage}%
                                </div>
                            )}

                            <PrimaryButton disabled={form.processing}>
                                Lancer l'import
                            </PrimaryButton>
                        </form>
                    </section>

                    {importResult && (
                        <section className="rounded-lg bg-white p-6 shadow-sm">
                            <h3 className="mb-4 text-lg font-semibold text-gray-900">
                                Resultat du dernier import
                            </h3>

                            <dl className="grid gap-3 md:grid-cols-4">
                                <Metric label="Lignes totales" value={importResult.total_rows} />
                                <Metric
                                    label="Lignes traitees"
                                    value={importResult.processed_rows}
                                />
                                <Metric label="Creees" value={importResult.created} />
                                <Metric label="Mises a jour" value={importResult.updated} />
                                <Metric label="Ignorees" value={importResult.skipped} />
                                <Metric label="Erreurs" value={importResult.errors} />
                            </dl>

                            {importResult.error_rows.length > 0 && (
                                <div className="mt-5">
                                    <h4 className="font-medium text-gray-900">
                                        Lignes en erreur
                                    </h4>
                                    <ul className="mt-2 list-disc space-y-1 pl-5 text-sm text-rose-700">
                                        {importResult.error_rows.map((error, index) => (
                                            <li key={index}>
                                                Ligne {error.row}: {error.message}
                                            </li>
                                        ))}
                                    </ul>
                                </div>
                            )}
                        </section>
                    )}
                </div>
            </div>
        </AuthenticatedLayout>
    );
}

function Metric({ label, value }: { label: string; value: number }) {
    return (
        <div className="rounded-md border border-gray-100 bg-gray-50 px-3 py-2">
            <dt className="text-xs uppercase tracking-wide text-gray-500">{label}</dt>
            <dd className="text-lg font-semibold text-gray-900">{value}</dd>
        </div>
    );
}
