import { Head, Link, router, useForm } from '@inertiajs/react';
import {
    Download,
    FileText,
    Pencil,
    Plus,
    Trash2,
    UserCheck,
    UserMinus,
} from 'lucide-react';
import { useState } from 'react';
import type { FormEvent, ReactNode } from 'react';
import { EmployeeCareerEventsSection } from './employee-career-events-section';
import { EmployeeCompensationSection } from './employee-compensation-section';
import type { EmployeeCompensationData } from './employee-compensation-section';
import type {
    CareerEventTypeOption,
    EmployeeCareerEventData,
} from './employee-career-events-section';
import { EmployeeContractsSection } from './employee-contracts-section';
import type { EmployeeContractData } from './employee-contracts-section';
import {
    DocumentScanLinks,
    EmployeeDocumentsSection,
} from './employee-documents-section';
import type {
    DocumentChecklist,
    DocumentTypeOption,
    EmployeeDocumentData,
} from './employee-documents-section';
import type {
    ContractTypeOption,
    DepartmentOption,
    JobPositionOption,
    ManagerOption,
    SiteOption,
} from './employee-form';
import { EmployeeTerminationDialog } from './employee-termination-dialog';
import type { TerminationReasonOption } from './employee-termination-dialog';
import EmployeeController from '@/actions/App/Http/Controllers/Admin/EmployeeController';
import { ConfirmDialog } from '@/components/confirm-dialog';
import InputError from '@/components/input-error';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { cn, formatDate } from '@/lib/utils';
import { dashboard } from '@/routes';
import { edit, index } from '@/routes/admin/employees';
import { show as showLeaveRequest } from '@/routes/admin/leave-requests';

const IDENTITY_SCAN_TYPES = [
    'national_id',
    'passport',
    'ecowas',
    'identity_certificate',
    'resident_card',
];

type EmployeeShow = {
    id: number;
    code: string;
    first_name: string;
    last_name: string;
    full_name: string;
    civility: string | null;
    civility_label: string | null;
    birth_name: string | null;
    email: string | null;
    personal_email: string | null;
    phone: string | null;
    work_phone: string | null;
    birth_date: string | null;
    birth_place: string | null;
    nationality: string | null;
    cnps_number: string | null;
    cmu_number: string | null;
    id_document_type: string | null;
    id_document_type_label: string | null;
    id_document_number: string | null;
    id_document_issued_on: string | null;
    id_document_expires_on: string | null;
    residence_permit_number: string | null;
    residence_permit_expires_on: string | null;
    work_permit_number: string | null;
    work_permit_expires_on: string | null;
    address: string | null;
    postal_code: string | null;
    city: string | null;
    quartier: string | null;
    commune: string | null;
    country: string | null;
    full_address: string | null;
    marital_status: string | null;
    marital_status_label: string | null;
    dependent_children_count: number | null;
    emergency_contact_name: string | null;
    emergency_contact_relationship: string | null;
    emergency_contact_phone: string | null;
    job_title: string | null;
    job_position: { id: number; name: string } | null;
    site: { id: number; name: string } | null;
    professional_category: string | null;
    professional_category_label: string | null;
    classification: string | null;
    work_time: string | null;
    work_time_label: string | null;
    weekly_hours: number | null;
    department: string | null;
    hire_date: string | null;
    seniority_date: string | null;
    probation_end_date: string | null;
    contract_type_label: string;
    is_active: boolean;
    employment_status: 'active' | 'inactive' | 'departed';
    employment_status_label: string;
    terminated_at: string | null;
    termination_reason: string | null;
    termination_reason_label: string | null;
    termination_note: string | null;
    has_termination_decision: boolean;
    termination_decision_original_name: string | null;
    terminated_by: { id: number; name: string } | null;
    user: { id: number; name: string; email: string } | null;
    manager: { id: number; name: string } | null;
    current_contract: EmployeeContractData | null;
    contracts: EmployeeContractData[];
    career_events: EmployeeCareerEventData[];
    documents: EmployeeDocumentData[];
    document_checklist: DocumentChecklist;
    document_alert: 'expired' | 'expiring' | 'incomplete' | null;
    confidential_documents_hidden: number;
    leave_balances: Array<{
        id: number;
        year: number;
        entitled: number;
        taken: number;
        remaining: number;
        leave_type: {
            id: number;
            name: string;
            code: string;
            deducts_balance: boolean;
        } | null;
    }>;
    leave_requests: Array<{
        id: number;
        code: string;
        start_date: string;
        end_date: string;
        days: number;
        status: string;
        status_label: string;
        leave_type: { id: number; name: string; code: string } | null;
    }>;
    compensations: EmployeeCompensationData[];
};

function Section({
    eyebrow,
    title,
    description,
    action,
    children,
}: {
    eyebrow: string;
    title: string;
    description?: string;
    action?: ReactNode;
    children: ReactNode;
}) {
    return (
        <section className="space-y-6 border-t border-border pt-10">
            <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
                <div className="space-y-1.5">
                    <p className="text-xs font-medium tracking-[0.14em] text-muted-foreground uppercase">
                        {eyebrow}
                    </p>
                    <h2 className="text-lg font-semibold tracking-tight">
                        {title}
                    </h2>
                    {description && (
                        <p className="max-w-xl text-sm leading-relaxed text-muted-foreground">
                            {description}
                        </p>
                    )}
                </div>
                {action}
            </div>
            {children}
        </section>
    );
}

function MetaItem({ label, children }: { label: string; children: ReactNode }) {
    return (
        <div className="space-y-1">
            <p className="text-xs tracking-wide text-muted-foreground uppercase">
                {label}
            </p>
            <div className="text-sm font-medium tracking-tight">{children}</div>
        </div>
    );
}

export default function EmployeesShow({
    employee,
    documentTypes,
    contractTypes,
    careerEventTypes,
    professionalCategories,
    terminationReasons,
    departments,
    sites,
    jobPositions,
    managers,
    leaveTypes,
    paymentMethods,
    compensationItemTypes,
    can,
}: {
    employee: EmployeeShow;
    documentTypes: DocumentTypeOption[];
    contractTypes: ContractTypeOption[];
    careerEventTypes: CareerEventTypeOption[];
    professionalCategories: Array<{ value: string; label: string }>;
    terminationReasons: TerminationReasonOption[];
    departments: DepartmentOption[];
    sites: SiteOption[];
    jobPositions: JobPositionOption[];
    managers: ManagerOption[];
    leaveTypes: Array<{ id: number; name: string; code: string }>;
    paymentMethods: Array<{ value: string; label: string }>;
    compensationItemTypes: Array<{ value: string; label: string }>;
    can: {
        update: boolean;
        delete: boolean;
        viewCompensation: boolean;
        updateCompensation: boolean;
        viewConfidentialDocuments: boolean;
    };
}) {
    const [balanceOpen, setBalanceOpen] = useState(false);
    const [terminationOpen, setTerminationOpen] = useState(false);

    const displayName =
        [employee.last_name, employee.first_name].filter(Boolean).join(' ') ||
        employee.full_name;

    const initials = [employee.first_name, employee.last_name]
        .map((part) => part?.charAt(0)?.toUpperCase() ?? '')
        .join('')
        .slice(0, 2);

    const balanceForm = useForm({
        leave_type_id: leaveTypes[0] ? String(leaveTypes[0].id) : '',
        year: String(new Date().getFullYear()),
        entitled: '25',
    });

    function submitBalance(event: FormEvent) {
        event.preventDefault();
        balanceForm.transform((data) => ({
            leave_type_id: Number(data.leave_type_id),
            year: Number(data.year),
            entitled: Number(data.entitled),
        }));
        balanceForm.post(EmployeeController.adjustBalance.url(employee.id), {
            preserveScroll: true,
            onSuccess: () => {
                setBalanceOpen(false);
                balanceForm.reset('entitled');
            },
        });
    }

    return (
        <>
            <Head title={displayName} />
            <div className="flex h-full flex-1 flex-col gap-10 p-4 md:p-6">
                <header className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
                    <div className="flex items-start gap-4">
                        <div
                            aria-hidden
                            className="flex size-14 shrink-0 items-center justify-center rounded-full bg-foreground text-sm font-semibold tracking-wide text-background"
                        >
                            {initials || '—'}
                        </div>
                        <div className="min-w-0 space-y-2">
                            <p className="font-mono text-xs tracking-wide text-muted-foreground">
                                {employee.code}
                            </p>
                            <h1 className="text-2xl font-semibold tracking-tight">
                                {displayName}
                            </h1>
                            <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-muted-foreground">
                                <span>
                                    {employee.job_title || 'Sans poste'}
                                </span>
                                {employee.department && (
                                    <>
                                        <span aria-hidden>·</span>
                                        <span>{employee.department}</span>
                                    </>
                                )}
                                <span aria-hidden>·</span>
                                <Badge
                                    variant={
                                        employee.employment_status === 'active'
                                            ? 'secondary'
                                            : 'outline'
                                    }
                                    className="font-normal"
                                >
                                    {employee.employment_status === 'departed'
                                        ? `Parti le ${formatDate(employee.terminated_at)}${
                                              employee.termination_reason_label
                                                  ? ` · ${employee.termination_reason_label}`
                                                  : ''
                                          }`
                                        : employee.employment_status_label}
                                </Badge>
                            </div>
                        </div>
                    </div>

                    <div className="flex flex-wrap gap-2">
                        <Button variant="outline" asChild>
                            <a href={EmployeeController.downloadProfile.url(employee.id)}>
                                <FileText />
                                Fiche PDF
                            </a>
                        </Button>
                        <Button variant="outline" asChild>
                            <a href={EmployeeController.downloadWorkAttestation.url(employee.id)}>
                                <Download />
                                Attestation de travail
                            </a>
                        </Button>
                        {can.update && (
                            <Button variant="outline" asChild>
                                <Link href={edit(employee.id)}>
                                    <Pencil />
                                    Modifier
                                </Link>
                            </Button>
                        )}
                        {can.update && employee.is_active && (
                            <Button
                                type="button"
                                variant="outline"
                                onClick={() => setTerminationOpen(true)}
                            >
                                <UserMinus />
                                Terminer la collaboration
                            </Button>
                        )}
                        {can.update &&
                            employee.employment_status === 'departed' && (
                            <ConfirmDialog
                                trigger={
                                    <Button variant="outline">
                                        <UserCheck />
                                        Réactiver
                                    </Button>
                                }
                                title={`Réactiver ${displayName} ?`}
                                description="Le collaborateur redeviendra actif et son compte pourra se reconnecter. Le contrat clôturé et l’historique de départ sont conservés."
                                confirmLabel="Réactiver"
                                variant="default"
                                onConfirm={() =>
                                    router.post(
                                        EmployeeController.reactivate.url(
                                            employee.id,
                                        ),
                                    )
                                }
                            />
                        )}
                        {can.delete && (
                            <ConfirmDialog
                                trigger={
                                    <Button variant="ghost">
                                        <Trash2 />
                                        Supprimer
                                    </Button>
                                }
                                title={`Supprimer ${displayName} ?`}
                                description="Le collaborateur sera archivé."
                                confirmLabel="Supprimer"
                                onConfirm={() =>
                                    router.delete(
                                        EmployeeController.destroy.url(
                                            employee.id,
                                        ),
                                    )
                                }
                            />
                        )}
                    </div>
                </header>

                <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
                    <MetaItem label="Email professionnel">
                        {employee.email || '—'}
                    </MetaItem>
                    <MetaItem label="Téléphone professionnel">
                        {employee.work_phone || '—'}
                    </MetaItem>
                    <MetaItem label="Embauche">
                        {formatDate(employee.hire_date) || '—'}
                    </MetaItem>
                    <MetaItem label="Contrat">
                        {employee.contract_type_label}
                    </MetaItem>
                    <MetaItem label="Compte">
                        {employee.user?.name || 'Non lié'}
                    </MetaItem>
                    <MetaItem label="Manager">
                        {employee.manager?.name || '—'}
                    </MetaItem>
                </div>

                <Section
                    eyebrow="Identité"
                    title="Informations personnelles"
                    description="État civil, pièce d’identité, coordonnées et contact d’urgence."
                >
                    <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
                        <MetaItem label="Civilité">
                            {employee.civility_label || '—'}
                        </MetaItem>
                        <MetaItem label="Nom de naissance">
                            {employee.birth_name || '—'}
                        </MetaItem>
                        <MetaItem label="Date de naissance">
                            {formatDate(employee.birth_date) || '—'}
                        </MetaItem>
                        <MetaItem label="Lieu de naissance">
                            {employee.birth_place || '—'}
                        </MetaItem>
                        <MetaItem label="Nationalité">
                            {employee.nationality || '—'}
                        </MetaItem>
                        <MetaItem label="N° CNPS">
                            {employee.cnps_number || '—'}
                            <DocumentScanLinks
                                employeeId={employee.id}
                                documents={employee.documents}
                                types={['cnps_certificate']}
                            />
                        </MetaItem>
                        <MetaItem label="N° CMU">
                            {employee.cmu_number || '—'}
                            <DocumentScanLinks
                                employeeId={employee.id}
                                documents={employee.documents}
                                types={['cmu_card']}
                            />
                        </MetaItem>
                        <MetaItem label="Situation familiale">
                            {employee.marital_status_label || '—'}
                        </MetaItem>
                        <MetaItem label="Enfants à charge">
                            {employee.dependent_children_count ?? '—'}
                        </MetaItem>
                        <MetaItem label="Type de pièce">
                            {employee.id_document_type_label || '—'}
                            <DocumentScanLinks
                                employeeId={employee.id}
                                documents={employee.documents}
                                types={IDENTITY_SCAN_TYPES}
                            />
                        </MetaItem>
                        <MetaItem label="N° de pièce">
                            {employee.id_document_number || '—'}
                        </MetaItem>
                        <MetaItem label="Délivrance de la pièce">
                            {formatDate(employee.id_document_issued_on) || '—'}
                        </MetaItem>
                        <MetaItem label="Expiration de la pièce">
                            {formatDate(employee.id_document_expires_on) || '—'}
                        </MetaItem>
                        <MetaItem label="N° titre de séjour">
                            {employee.residence_permit_number || '—'}
                            <DocumentScanLinks
                                employeeId={employee.id}
                                documents={employee.documents}
                                types={['residence_permit']}
                            />
                        </MetaItem>
                        <MetaItem label="Expiration du titre de séjour">
                            {formatDate(employee.residence_permit_expires_on) ||
                                '—'}
                        </MetaItem>
                        <MetaItem label="N° autorisation de travail">
                            {employee.work_permit_number || '—'}
                            <DocumentScanLinks
                                employeeId={employee.id}
                                documents={employee.documents}
                                types={['work_permit']}
                            />
                        </MetaItem>
                        <MetaItem label="Expiration de l’autorisation">
                            {formatDate(employee.work_permit_expires_on) || '—'}
                        </MetaItem>
                        <MetaItem label="Email personnel">
                            {employee.personal_email || '—'}
                        </MetaItem>
                        <MetaItem label="Téléphone personnel">
                            {employee.phone || '—'}
                        </MetaItem>
                        <MetaItem label="Quartier">
                            {employee.quartier || '—'}
                        </MetaItem>
                        <MetaItem label="Commune">
                            {employee.commune || '—'}
                        </MetaItem>
                        <MetaItem label="Adresse">
                            {employee.full_address || employee.address || '—'}
                        </MetaItem>
                        <MetaItem label="Contact d’urgence">
                            {[
                                employee.emergency_contact_name,
                                employee.emergency_contact_relationship,
                            ]
                                .filter(Boolean)
                                .join(' · ') || '—'}
                        </MetaItem>
                        <MetaItem label="Téléphone d’urgence">
                            {employee.emergency_contact_phone || '—'}
                        </MetaItem>
                    </div>
                </Section>

                <Section
                    eyebrow="Poste"
                    title="Informations professionnelles"
                    description="Statut, conditions de travail et dates clés."
                >
                    <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
                        <MetaItem label="Poste">
                            {employee.job_position?.name ||
                                employee.job_title ||
                                '—'}
                        </MetaItem>
                        <MetaItem label="Service">
                            {employee.department || '—'}
                        </MetaItem>
                        <MetaItem label="Site">
                            {employee.site?.name || '—'}
                        </MetaItem>
                        <MetaItem label="Statut">
                            {employee.professional_category_label || '—'}
                        </MetaItem>
                        <MetaItem label="Catégorie / échelon">
                            {employee.classification || '—'}
                        </MetaItem>
                        <MetaItem label="Temps de travail">
                            {employee.work_time_label || '—'}
                        </MetaItem>
                        <MetaItem label="Heures hebdomadaires">
                            {employee.weekly_hours !== null
                                ? `${employee.weekly_hours} h`
                                : '—'}
                        </MetaItem>
                        <MetaItem label="Date d’ancienneté">
                            {formatDate(employee.seniority_date) || '—'}
                        </MetaItem>
                        <MetaItem label="Fin de période d’essai">
                            {formatDate(employee.probation_end_date) || '—'}
                        </MetaItem>
                    </div>
                </Section>

                <EmployeeContractsSection
                    employeeId={employee.id}
                    currentContract={employee.current_contract}
                    contracts={employee.contracts}
                    contractTypes={contractTypes}
                    canUpdate={can.update}
                />

                <EmployeeCareerEventsSection
                    employeeId={employee.id}
                    events={employee.career_events}
                    careerEventTypes={careerEventTypes}
                    professionalCategories={professionalCategories}
                    departments={departments}
                    sites={sites}
                    jobPositions={jobPositions}
                    managers={managers}
                    canUpdate={can.update}
                />

                <EmployeeCompensationSection
                    employeeId={employee.id}
                    compensations={employee.compensations ?? []}
                    paymentMethods={paymentMethods ?? []}
                    itemTypes={compensationItemTypes ?? []}
                    canView={can.viewCompensation}
                    canUpdate={can.updateCompensation}
                />

                {employee.terminated_at && (
                    <Section
                        eyebrow="Sortie"
                        title={
                            employee.employment_status === 'departed'
                                ? 'Départ'
                                : 'Dernier départ'
                        }
                        description={
                            employee.employment_status === 'departed'
                                ? 'Motif et date de fin de collaboration.'
                                : 'Historique conservé après la réactivation.'
                        }
                    >
                        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
                            <MetaItem label="Date de départ">
                                {formatDate(employee.terminated_at)}
                            </MetaItem>
                            <MetaItem label="Motif">
                                {employee.termination_reason_label || '—'}
                            </MetaItem>
                            <MetaItem label="Enregistré par">
                                {employee.terminated_by?.name || '—'}
                            </MetaItem>
                            <MetaItem label="Note">
                                {employee.termination_note || '—'}
                            </MetaItem>
                        </div>
                        {employee.has_termination_decision && (
                            <Button variant="outline" size="sm" asChild>
                                <a
                                    href={EmployeeController.downloadTerminationDecision.url(
                                        employee.id,
                                    )}
                                >
                                    <Download />
                                    {employee.termination_decision_original_name ||
                                        'Pièce de décision'}
                                </a>
                            </Button>
                        )}
                    </Section>
                )}

                <EmployeeDocumentsSection
                    employeeId={employee.id}
                    documents={employee.documents}
                    documentTypes={documentTypes}
                    checklist={employee.document_checklist}
                    documentAlert={employee.document_alert}
                    canUpdate={can.update}
                    canViewConfidentialDocuments={can.viewConfidentialDocuments}
                    confidentialDocumentsHidden={
                        employee.confidential_documents_hidden
                    }
                />

                <Section
                    eyebrow="Absences"
                    title="Soldes de congés"
                    description="Droits acquis et consommation par type."
                    action={
                        can.update && leaveTypes.length > 0 ? (
                            <Button
                                type="button"
                                variant="outline"
                                size="sm"
                                onClick={() => setBalanceOpen((v) => !v)}
                            >
                                <Plus />
                                Ajuster
                            </Button>
                        ) : undefined
                    }
                >
                    {balanceOpen && can.update && leaveTypes.length > 0 && (
                        <form
                            onSubmit={submitBalance}
                            className="grid gap-4 border border-border p-4 md:grid-cols-4"
                        >
                            <div className="grid gap-2">
                                <Label>Type</Label>
                                <Select
                                    value={balanceForm.data.leave_type_id}
                                    onValueChange={(v) =>
                                        balanceForm.setData('leave_type_id', v)
                                    }
                                >
                                    <SelectTrigger>
                                        <SelectValue placeholder="Type" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        {leaveTypes.map((type) => (
                                            <SelectItem
                                                key={type.id}
                                                value={String(type.id)}
                                            >
                                                {type.name}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                                <InputError
                                    message={balanceForm.errors.leave_type_id}
                                />
                            </div>
                            <div className="grid gap-2">
                                <Label>Année</Label>
                                <Input
                                    value={balanceForm.data.year}
                                    onChange={(e) =>
                                        balanceForm.setData(
                                            'year',
                                            e.target.value,
                                        )
                                    }
                                />
                            </div>
                            <div className="grid gap-2">
                                <Label>Droit acquis</Label>
                                <Input
                                    type="number"
                                    step="0.5"
                                    value={balanceForm.data.entitled}
                                    onChange={(e) =>
                                        balanceForm.setData(
                                            'entitled',
                                            e.target.value,
                                        )
                                    }
                                />
                            </div>
                            <div className="flex items-end gap-2">
                                <Button
                                    type="submit"
                                    disabled={balanceForm.processing}
                                >
                                    Enregistrer
                                </Button>
                                <Button
                                    type="button"
                                    variant="ghost"
                                    onClick={() => setBalanceOpen(false)}
                                >
                                    Fermer
                                </Button>
                            </div>
                        </form>
                    )}

                    {employee.leave_balances.length === 0 ? (
                        <p className="text-sm text-muted-foreground">
                            Aucun solde enregistré.
                        </p>
                    ) : (
                        <ul className="divide-y divide-border border-y">
                            {employee.leave_balances.map((balance) => (
                                <li
                                    key={balance.id}
                                    className="grid grid-cols-2 gap-3 py-3.5 sm:grid-cols-5"
                                >
                                    <div className="col-span-2 sm:col-span-1">
                                        <p className="text-sm font-medium tracking-tight">
                                            {balance.leave_type?.name ?? '—'}
                                        </p>
                                        <p className="text-xs text-muted-foreground">
                                            {balance.year}
                                        </p>
                                    </div>
                                    <div>
                                        <p className="text-xs text-muted-foreground uppercase">
                                            Acquis
                                        </p>
                                        <p className="text-sm font-medium">
                                            {balance.entitled}
                                        </p>
                                    </div>
                                    <div>
                                        <p className="text-xs text-muted-foreground uppercase">
                                            Pris
                                        </p>
                                        <p className="text-sm font-medium">
                                            {balance.taken}
                                        </p>
                                    </div>
                                    <div>
                                        <p className="text-xs text-muted-foreground uppercase">
                                            Restant
                                        </p>
                                        <p
                                            className={cn(
                                                'text-sm font-medium',
                                                balance.remaining <= 0 &&
                                                    'text-muted-foreground',
                                            )}
                                        >
                                            {balance.remaining}
                                        </p>
                                    </div>
                                </li>
                            ))}
                        </ul>
                    )}
                </Section>

                <Section
                    eyebrow="Absences"
                    title="Demandes de congés"
                    description="Historique récent des demandes."
                >
                    {employee.leave_requests.length === 0 ? (
                        <p className="text-sm text-muted-foreground">
                            Aucune demande.
                        </p>
                    ) : (
                        <ul className="divide-y divide-border border-y">
                            {employee.leave_requests.map((leave) => (
                                <li
                                    key={leave.id}
                                    className="flex flex-col gap-2 py-3.5 sm:flex-row sm:items-center sm:justify-between"
                                >
                                    <div className="min-w-0 space-y-1">
                                        <div className="flex flex-wrap items-center gap-2">
                                            <Link
                                                href={showLeaveRequest(
                                                    leave.id,
                                                )}
                                                className="font-mono text-sm hover:underline"
                                            >
                                                {leave.code}
                                            </Link>
                                            <span className="text-sm text-muted-foreground">
                                                {leave.leave_type?.name ?? '—'}
                                            </span>
                                        </div>
                                        <p className="text-xs text-muted-foreground">
                                            {formatDate(leave.start_date)} →{' '}
                                            {formatDate(leave.end_date)}
                                            {' · '}
                                            {leave.days} j
                                        </p>
                                    </div>
                                    <Badge
                                        variant="outline"
                                        className="w-fit font-normal"
                                    >
                                        {leave.status_label}
                                    </Badge>
                                </li>
                            ))}
                        </ul>
                    )}
                </Section>
            </div>

            <EmployeeTerminationDialog
                employeeId={employee.id}
                employeeName={displayName}
                open={terminationOpen}
                onOpenChange={setTerminationOpen}
                reasons={terminationReasons}
            />
        </>
    );
}

EmployeesShow.layout = {
    breadcrumbs: [
        { title: 'Tableau de bord', href: dashboard() },
        { title: 'Collaborateurs', href: index() },
        { title: 'Fiche', href: '#' },
    ],
};