import ApplicationLogo from '@/Components/ApplicationLogo';
import {
    IconAcademicCap,
    IconBook,
    IconBuilding,
    IconChartPie,
    IconClipboardCheck,
    IconGrid,
} from '@/Components/Icons';
import { Head, Link } from '@inertiajs/react';

const ROLES = [
    {
        nom: 'Admin',
        description: 'Accès complet à la plateforme, tous les centres.',
        icon: IconGrid,
        href: 'login',
    },
    {
        nom: 'Partenaire',
        description: 'Suivi et rapports, tous les centres.',
        icon: IconChartPie,
        href: 'login',
    },
    {
        nom: 'Gestionnaire',
        description: 'Gestion de votre centre.',
        icon: IconBuilding,
        href: 'login',
    },
    {
        nom: 'Formateur',
        description: 'Vos apprenants, vos leçons, votre programme.',
        icon: IconAcademicCap,
        href: 'login',
    },
    {
        nom: 'Secrétaire',
        description: 'Inscriptions et suivi administratif.',
        icon: IconClipboardCheck,
        href: 'login',
    },
    {
        nom: 'Apprenant',
        description: 'Votre programme et votre progression.',
        icon: IconBook,
        href: 'apprenant.login',
    },
];

export default function SelectionRole() {
    return (
        <div className="flex min-h-screen flex-col items-center bg-slate-50 px-6 py-12">
            <Head title="Bienvenue" />

            <Link href="/" className="mb-6">
                <ApplicationLogo className="h-14 w-auto" />
            </Link>

            <h1 className="text-2xl font-bold tracking-tight text-slate-900">Bienvenue sur TechniForm</h1>
            <p className="mt-1 text-center text-sm text-slate-500">
                Choisissez votre espace pour continuer.
            </p>

            <div className="mt-10 grid w-full max-w-4xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                {ROLES.map(({ nom, description, icon: Icon, href }) => (
                    <Link
                        key={nom}
                        href={route(href)}
                        className="flex flex-col items-start gap-3 rounded-lg border border-slate-200 bg-white p-5 transition-colors hover:border-brand-300 hover:bg-brand-50/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2"
                    >
                        <span className="flex h-11 w-11 items-center justify-center rounded-full bg-brand-50 text-brand-700">
                            <Icon className="h-6 w-6" />
                        </span>
                        <span className="text-base font-bold text-slate-900">{nom}</span>
                        <span className="text-sm text-slate-500">{description}</span>
                    </Link>
                ))}
            </div>
        </div>
    );
}
