import { useForm } from '@inertiajs/react';
import { useMemo } from 'react';
import type { FormEvent, ReactNode } from 'react';
import EmployeeController from '@/actions/App/Http/Controllers/Admin/EmployeeController';
import InputError from '@/components/input-error';
import { SearchableSelect } from '@/components/searchable-select';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';

export type ContractTypeOption = { value: string; label: string };
export type UserOption = { id: number; name: string };
export type ManagerOption = {
    user_id: number;
    code: string;
    full_name: string;
};
export type DepartmentOption = { id: number; code: string; name: string };
export type SiteOption = { id: number; code: string; name: string };
export type JobPositionOption = {
    id: number;
    code: string;
    name: string;
    professional_category: string | null;
    classification: string | null;
};

export type EmployeeFormData = {
    id?: number;
    code?: string;
    first_name: string;
    last_name: string;
    civility?: 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_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;
    marital_status?: 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 | null;
    professional_category?: string | null;
    classification?: string | null;
    work_time?: string | null;
    weekly_hours?: string | number | null;
    department: string | null;
    department_id?: number | null;
    site_id?: number | null;
    hire_date: string | null;
    seniority_date?: string | null;
    probation_end_date?: string | null;
    contract_type?: string;
    contract_start?: string | null;
    contract_end?: string | null;
    user_id: number | null;
    manager_id: number | null;
    is_active: boolean;
    is_departed?: boolean;
};

type Props = {
    employee: EmployeeFormData;
    users: UserOption[];
    managers: ManagerOption[];
    departments: DepartmentOption[];
    sites: SiteOption[];
    jobPositions: JobPositionOption[];
    civilities: ContractTypeOption[];
    maritalStatuses: ContractTypeOption[];
    idDocumentTypes: ContractTypeOption[];
    workTimes: ContractTypeOption[];
    professionalCategories: ContractTypeOption[];
    onCancel: () => void;
};

function FormSection({
    title,
    children,
}: {
    title: string;
    children: ReactNode;
}) {
    return (
        <div className="space-y-4">
            <p className="text-xs font-medium tracking-[0.14em] text-muted-foreground uppercase">
                {title}
            </p>
            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                {children}
            </div>
        </div>
    );
}

function digitsOnlyPhone(value: string): string {
    return value.replace(/[^\d+\s().-]/g, '');
}

export function EmployeeForm({
    employee,
    users,
    managers,
    departments,
    sites,
    jobPositions,
    civilities,
    maritalStatuses,
    idDocumentTypes,
    workTimes,
    professionalCategories,
    onCancel,
}: Props) {
    const form = useForm({
        civility: employee.civility ?? 'none',
        first_name: employee.first_name ?? '',
        last_name: employee.last_name ?? '',
        birth_name: employee.birth_name ?? '',
        email: employee.email ?? '',
        personal_email: employee.personal_email ?? '',
        phone: employee.phone ?? '',
        work_phone: employee.work_phone ?? '',
        birth_date: employee.birth_date ?? '',
        birth_place: employee.birth_place ?? '',
        nationality: employee.nationality ?? '',
        cnps_number: employee.cnps_number ?? '',
        cmu_number: employee.cmu_number ?? '',
        id_document_type: employee.id_document_type ?? 'none',
        id_document_number: employee.id_document_number ?? '',
        id_document_issued_on: employee.id_document_issued_on ?? '',
        id_document_expires_on: employee.id_document_expires_on ?? '',
        residence_permit_number: employee.residence_permit_number ?? '',
        residence_permit_expires_on: employee.residence_permit_expires_on ?? '',
        work_permit_number: employee.work_permit_number ?? '',
        work_permit_expires_on: employee.work_permit_expires_on ?? '',
        address: employee.address ?? '',
        postal_code: employee.postal_code ?? '',
        city: employee.city ?? '',
        quartier: employee.quartier ?? '',
        commune: employee.commune ?? '',
        country: employee.country ?? '',
        marital_status: employee.marital_status ?? 'none',
        dependent_children_count:
            employee.dependent_children_count !== null &&
            employee.dependent_children_count !== undefined
                ? String(employee.dependent_children_count)
                : '',
        emergency_contact_name: employee.emergency_contact_name ?? '',
        emergency_contact_relationship:
            employee.emergency_contact_relationship ?? '',
        emergency_contact_phone: employee.emergency_contact_phone ?? '',
        job_title: employee.job_title ?? '',
        job_position_id: employee.job_position_id
            ? String(employee.job_position_id)
            : 'none',
        professional_category: employee.professional_category ?? 'none',
        classification: employee.classification ?? '',
        work_time: employee.work_time ?? 'none',
        weekly_hours:
            employee.weekly_hours !== null &&
            employee.weekly_hours !== undefined
                ? String(employee.weekly_hours)
                : '',
        department_id: employee.department_id
            ? String(employee.department_id)
            : 'none',
        site_id: employee.site_id ? String(employee.site_id) : 'none',
        hire_date: employee.hire_date ?? '',
        seniority_date: employee.seniority_date ?? '',
        probation_end_date: employee.probation_end_date ?? '',
        user_id: employee.user_id ? String(employee.user_id) : 'none',
        manager_id: employee.manager_id ? String(employee.manager_id) : 'none',
        is_active: employee.is_active ?? true,
    });

    const userOptions = useMemo(
        () =>
            users.map((user) => ({
                value: String(user.id),
                label: user.name,
            })),
        [users],
    );

    const managerOptions = useMemo(
        () =>
            managers.map((manager) => ({
                value: String(manager.user_id),
                label: `${manager.full_name} (${manager.code})`,
            })),
        [managers],
    );

    const departmentOptions = useMemo(
        () =>
            departments.map((department) => ({
                value: String(department.id),
                label: department.name,
            })),
        [departments],
    );

    const siteOptions = useMemo(
        () =>
            sites.map((site) => ({
                value: String(site.id),
                label: site.name,
            })),
        [sites],
    );

    const jobPositionOptions = useMemo(
        () =>
            jobPositions.map((position) => ({
                value: String(position.id),
                label: position.name,
            })),
        [jobPositions],
    );

    function submit(event: FormEvent) {
        event.preventDefault();

        form.transform((data) => ({
            civility: data.civility === 'none' ? null : data.civility,
            first_name: data.first_name,
            last_name: data.last_name,
            birth_name: data.birth_name || null,
            email: data.email || null,
            personal_email: data.personal_email || null,
            phone: data.phone || null,
            work_phone: data.work_phone || null,
            birth_date: data.birth_date || null,
            birth_place: data.birth_place || null,
            nationality: data.nationality || null,
            cnps_number: data.cnps_number || null,
            cmu_number: data.cmu_number || null,
            id_document_type:
                data.id_document_type === 'none' ? null : data.id_document_type,
            id_document_number: data.id_document_number || null,
            id_document_issued_on: data.id_document_issued_on || null,
            id_document_expires_on: data.id_document_expires_on || null,
            residence_permit_number: data.residence_permit_number || null,
            residence_permit_expires_on:
                data.residence_permit_expires_on || null,
            work_permit_number: data.work_permit_number || null,
            work_permit_expires_on: data.work_permit_expires_on || null,
            address: data.address || null,
            postal_code: data.postal_code || null,
            city: data.city || null,
            quartier: data.quartier || null,
            commune: data.commune || null,
            country: data.country || null,
            marital_status:
                data.marital_status === 'none' ? null : data.marital_status,
            dependent_children_count:
                data.dependent_children_count === ''
                    ? null
                    : Number(data.dependent_children_count),
            emergency_contact_name: data.emergency_contact_name || null,
            emergency_contact_relationship:
                data.emergency_contact_relationship || null,
            emergency_contact_phone: data.emergency_contact_phone || null,
            job_title: data.job_title || null,
            job_position_id:
                data.job_position_id === 'none'
                    ? null
                    : Number(data.job_position_id),
            professional_category:
                data.professional_category === 'none'
                    ? null
                    : data.professional_category,
            classification: data.classification || null,
            work_time: data.work_time === 'none' ? null : data.work_time,
            weekly_hours:
                data.weekly_hours === '' ? null : Number(data.weekly_hours),
            department_id:
                data.department_id === 'none'
                    ? null
                    : Number(data.department_id),
            site_id: data.site_id === 'none' ? null : Number(data.site_id),
            hire_date: data.hire_date || null,
            seniority_date: data.seniority_date || null,
            probation_end_date: data.probation_end_date || null,
            user_id: data.user_id === 'none' ? null : Number(data.user_id),
            manager_id:
                data.manager_id === 'none' ? null : Number(data.manager_id),
            is_active: data.is_active,
        }));

        form.put(EmployeeController.update.url(employee.id!));
    }

    return (
        <form onSubmit={submit} className="space-y-8">
            {employee.code && (
                <div className="grid gap-2">
                    <Label>Code</Label>
                    <Input
                        value={employee.code}
                        disabled
                        readOnly
                        className="font-mono"
                    />
                </div>
            )}

            <FormSection title="État civil">
                <div className="grid gap-2">
                    <Label>Civilité</Label>
                    <SearchableSelect
                        options={civilities}
                        value={form.data.civility}
                        onChange={(value) => form.setData('civility', value)}
                        placeholder="Choisir…"
                        noneLabel="Non renseignée"
                    />
                    <InputError message={form.errors.civility} />
                </div>
                <div className="grid gap-2">
                    <Label htmlFor="last_name">Nom</Label>
                    <Input
                        id="last_name"
                        value={form.data.last_name}
                        onChange={(e) =>
                            form.setData('last_name', e.target.value)
                        }
                    />
                    <InputError message={form.errors.last_name} />
                </div>
                <div className="grid gap-2">
                    <Label htmlFor="first_name">Prénom</Label>
                    <Input
                        id="first_name"
                        value={form.data.first_name}
                        onChange={(e) =>
                            form.setData('first_name', e.target.value)
                        }
                    />
                    <InputError message={form.errors.first_name} />
                </div>
                <div className="grid gap-2">
                    <Label htmlFor="birth_name">Nom de naissance</Label>
                    <Input
                        id="birth_name"
                        value={form.data.birth_name}
                        onChange={(e) =>
                            form.setData('birth_name', e.target.value)
                        }
                    />
                    <InputError message={form.errors.birth_name} />
                </div>
                <div className="grid gap-2">
                    <Label htmlFor="birth_date">Date de naissance</Label>
                    <Input
                        id="birth_date"
                        type="date"
                        value={form.data.birth_date}
                        onChange={(e) =>
                            form.setData('birth_date', e.target.value)
                        }
                    />
                    <InputError message={form.errors.birth_date} />
                </div>
                <div className="grid gap-2">
                    <Label htmlFor="birth_place">Lieu de naissance</Label>
                    <Input
                        id="birth_place"
                        value={form.data.birth_place}
                        onChange={(e) =>
                            form.setData('birth_place', e.target.value)
                        }
                    />
                    <InputError message={form.errors.birth_place} />
                </div>
                <div className="grid gap-2">
                    <Label htmlFor="nationality">Nationalité</Label>
                    <Input
                        id="nationality"
                        value={form.data.nationality}
                        onChange={(e) =>
                            form.setData('nationality', e.target.value)
                        }
                    />
                    <InputError message={form.errors.nationality} />
                </div>
                <div className="grid gap-2">
                    <Label htmlFor="cnps_number">N° CNPS</Label>
                    <Input
                        id="cnps_number"
                        value={form.data.cnps_number}
                        onChange={(e) =>
                            form.setData('cnps_number', e.target.value)
                        }
                    />
                    <InputError message={form.errors.cnps_number} />
                </div>
                <div className="grid gap-2">
                    <Label htmlFor="cmu_number">N° CMU</Label>
                    <Input
                        id="cmu_number"
                        value={form.data.cmu_number}
                        onChange={(e) =>
                            form.setData('cmu_number', e.target.value)
                        }
                    />
                    <InputError message={form.errors.cmu_number} />
                </div>
                <div className="grid gap-2">
                    <Label>Situation familiale</Label>
                    <SearchableSelect
                        options={maritalStatuses}
                        value={form.data.marital_status}
                        onChange={(value) =>
                            form.setData('marital_status', value)
                        }
                        placeholder="Choisir…"
                        noneLabel="Non renseignée"
                    />
                    <InputError message={form.errors.marital_status} />
                </div>
                <div className="grid gap-2">
                    <Label htmlFor="dependent_children_count">
                        Enfants à charge
                    </Label>
                    <Input
                        id="dependent_children_count"
                        type="number"
                        min={0}
                        max={20}
                        value={form.data.dependent_children_count}
                        onChange={(e) =>
                            form.setData(
                                'dependent_children_count',
                                e.target.value,
                            )
                        }
                    />
                    <InputError
                        message={form.errors.dependent_children_count}
                    />
                </div>
            </FormSection>

            <FormSection title="Pièce d’identité">
                <div className="grid gap-2">
                    <Label>Type de pièce</Label>
                    <SearchableSelect
                        options={idDocumentTypes}
                        value={form.data.id_document_type}
                        onChange={(value) =>
                            form.setData('id_document_type', value)
                        }
                        placeholder="Choisir…"
                        noneLabel="Non renseigné"
                    />
                    <InputError message={form.errors.id_document_type} />
                </div>
                <div className="grid gap-2">
                    <Label htmlFor="id_document_number">Numéro</Label>
                    <Input
                        id="id_document_number"
                        value={form.data.id_document_number}
                        onChange={(e) =>
                            form.setData('id_document_number', e.target.value)
                        }
                    />
                    <InputError message={form.errors.id_document_number} />
                </div>
                <div className="grid gap-2">
                    <Label htmlFor="id_document_issued_on">
                        Date de délivrance
                    </Label>
                    <Input
                        id="id_document_issued_on"
                        type="date"
                        value={form.data.id_document_issued_on}
                        onChange={(e) =>
                            form.setData(
                                'id_document_issued_on',
                                e.target.value,
                            )
                        }
                    />
                    <InputError message={form.errors.id_document_issued_on} />
                </div>
                <div className="grid gap-2">
                    <Label htmlFor="id_document_expires_on">
                        Date d’expiration
                    </Label>
                    <Input
                        id="id_document_expires_on"
                        type="date"
                        value={form.data.id_document_expires_on}
                        onChange={(e) =>
                            form.setData(
                                'id_document_expires_on',
                                e.target.value,
                            )
                        }
                    />
                    <InputError message={form.errors.id_document_expires_on} />
                </div>
            </FormSection>

            <FormSection title="Titre de séjour et travail">
                <div className="grid gap-2">
                    <Label htmlFor="residence_permit_number">
                        N° titre de séjour
                    </Label>
                    <Input
                        id="residence_permit_number"
                        value={form.data.residence_permit_number}
                        onChange={(e) =>
                            form.setData(
                                'residence_permit_number',
                                e.target.value,
                            )
                        }
                    />
                    <InputError message={form.errors.residence_permit_number} />
                </div>
                <div className="grid gap-2">
                    <Label htmlFor="residence_permit_expires_on">
                        Expiration du titre de séjour
                    </Label>
                    <Input
                        id="residence_permit_expires_on"
                        type="date"
                        value={form.data.residence_permit_expires_on}
                        onChange={(e) =>
                            form.setData(
                                'residence_permit_expires_on',
                                e.target.value,
                            )
                        }
                    />
                    <InputError
                        message={form.errors.residence_permit_expires_on}
                    />
                </div>
                <div className="grid gap-2">
                    <Label htmlFor="work_permit_number">
                        N° autorisation de travail
                    </Label>
                    <Input
                        id="work_permit_number"
                        value={form.data.work_permit_number}
                        onChange={(e) =>
                            form.setData('work_permit_number', e.target.value)
                        }
                    />
                    <InputError message={form.errors.work_permit_number} />
                </div>
                <div className="grid gap-2">
                    <Label htmlFor="work_permit_expires_on">
                        Expiration de l’autorisation de travail
                    </Label>
                    <Input
                        id="work_permit_expires_on"
                        type="date"
                        value={form.data.work_permit_expires_on}
                        onChange={(e) =>
                            form.setData(
                                'work_permit_expires_on',
                                e.target.value,
                            )
                        }
                    />
                    <InputError message={form.errors.work_permit_expires_on} />
                </div>
            </FormSection>

            <FormSection title="Coordonnées">
                <div className="grid gap-2">
                    <Label htmlFor="email">Email professionnel</Label>
                    <Input
                        id="email"
                        type="email"
                        value={form.data.email}
                        onChange={(e) => form.setData('email', e.target.value)}
                    />
                    <InputError message={form.errors.email} />
                </div>
                <div className="grid gap-2">
                    <Label htmlFor="personal_email">Email personnel</Label>
                    <Input
                        id="personal_email"
                        type="email"
                        value={form.data.personal_email}
                        onChange={(e) =>
                            form.setData('personal_email', e.target.value)
                        }
                    />
                    <InputError message={form.errors.personal_email} />
                </div>
                <div className="grid gap-2">
                    <Label htmlFor="phone">Téléphone personnel</Label>
                    <Input
                        id="phone"
                        type="tel"
                        inputMode="tel"
                        value={form.data.phone}
                        onChange={(e) =>
                            form.setData(
                                'phone',
                                digitsOnlyPhone(e.target.value),
                            )
                        }
                        autoComplete="tel"
                    />
                    <InputError message={form.errors.phone} />
                </div>
                <div className="grid gap-2">
                    <Label htmlFor="work_phone">Téléphone professionnel</Label>
                    <Input
                        id="work_phone"
                        type="tel"
                        inputMode="tel"
                        value={form.data.work_phone}
                        onChange={(e) =>
                            form.setData(
                                'work_phone',
                                digitsOnlyPhone(e.target.value),
                            )
                        }
                    />
                    <InputError message={form.errors.work_phone} />
                </div>
                <div className="grid gap-2 lg:col-span-3">
                    <Label htmlFor="address">Adresse</Label>
                    <Textarea
                        id="address"
                        value={form.data.address}
                        onChange={(e) =>
                            form.setData('address', e.target.value)
                        }
                    />
                    <InputError message={form.errors.address} />
                </div>
                <div className="grid gap-2">
                    <Label htmlFor="postal_code">Code postal</Label>
                    <Input
                        id="postal_code"
                        value={form.data.postal_code}
                        onChange={(e) =>
                            form.setData('postal_code', e.target.value)
                        }
                    />
                    <InputError message={form.errors.postal_code} />
                </div>
                <div className="grid gap-2">
                    <Label htmlFor="quartier">Quartier</Label>
                    <Input
                        id="quartier"
                        value={form.data.quartier}
                        onChange={(e) =>
                            form.setData('quartier', e.target.value)
                        }
                    />
                    <InputError message={form.errors.quartier} />
                </div>
                <div className="grid gap-2">
                    <Label htmlFor="commune">Commune</Label>
                    <Input
                        id="commune"
                        value={form.data.commune}
                        onChange={(e) =>
                            form.setData('commune', e.target.value)
                        }
                    />
                    <InputError message={form.errors.commune} />
                </div>
                <div className="grid gap-2">
                    <Label htmlFor="city">Ville</Label>
                    <Input
                        id="city"
                        value={form.data.city}
                        onChange={(e) => form.setData('city', e.target.value)}
                    />
                    <InputError message={form.errors.city} />
                </div>
                <div className="grid gap-2">
                    <Label htmlFor="country">Pays</Label>
                    <Input
                        id="country"
                        value={form.data.country}
                        onChange={(e) =>
                            form.setData('country', e.target.value)
                        }
                        placeholder="Côte d’Ivoire"
                    />
                    <InputError message={form.errors.country} />
                </div>
            </FormSection>

            <FormSection title="Contact d’urgence">
                <div className="grid gap-2">
                    <Label htmlFor="emergency_contact_name">Nom</Label>
                    <Input
                        id="emergency_contact_name"
                        value={form.data.emergency_contact_name}
                        onChange={(e) =>
                            form.setData(
                                'emergency_contact_name',
                                e.target.value,
                            )
                        }
                    />
                    <InputError message={form.errors.emergency_contact_name} />
                </div>
                <div className="grid gap-2">
                    <Label htmlFor="emergency_contact_relationship">Lien</Label>
                    <Input
                        id="emergency_contact_relationship"
                        value={form.data.emergency_contact_relationship}
                        onChange={(e) =>
                            form.setData(
                                'emergency_contact_relationship',
                                e.target.value,
                            )
                        }
                        placeholder="Conjoint, parent…"
                    />
                    <InputError
                        message={form.errors.emergency_contact_relationship}
                    />
                </div>
                <div className="grid gap-2">
                    <Label htmlFor="emergency_contact_phone">Téléphone</Label>
                    <Input
                        id="emergency_contact_phone"
                        type="tel"
                        inputMode="tel"
                        value={form.data.emergency_contact_phone}
                        onChange={(e) =>
                            form.setData(
                                'emergency_contact_phone',
                                digitsOnlyPhone(e.target.value),
                            )
                        }
                    />
                    <InputError message={form.errors.emergency_contact_phone} />
                </div>
            </FormSection>

            <FormSection title="Informations professionnelles">
                <div className="grid gap-2">
                    <Label>Poste (référentiel)</Label>
                    <SearchableSelect
                        options={jobPositionOptions}
                        value={form.data.job_position_id}
                        onChange={(value) => {
                            const position = jobPositions.find(
                                (item) => String(item.id) === value,
                            );
                            const categoryIsEmpty =
                                form.data.professional_category === 'none' ||
                                form.data.professional_category === '';
                            const classificationIsEmpty =
                                form.data.classification === '';

                            form.setData({
                                ...form.data,
                                job_position_id: value,
                                professional_category:
                                    categoryIsEmpty &&
                                    position?.professional_category
                                        ? position.professional_category
                                        : form.data.professional_category,
                                classification:
                                    classificationIsEmpty &&
                                    position?.classification
                                        ? position.classification
                                        : form.data.classification,
                            });
                        }}
                        placeholder="Choisir un poste…"
                        searchPlaceholder="Nom du poste…"
                        noneLabel="Aucun"
                    />
                    <InputError message={form.errors.job_position_id} />
                </div>
                <div className="grid gap-2">
                    <Label htmlFor="job_title">Intitulé du poste</Label>
                    <Input
                        id="job_title"
                        value={form.data.job_title}
                        onChange={(e) =>
                            form.setData('job_title', e.target.value)
                        }
                    />
                    <InputError message={form.errors.job_title} />
                </div>
                <div className="grid gap-2">
                    <Label>Service</Label>
                    <SearchableSelect
                        options={departmentOptions}
                        value={form.data.department_id}
                        onChange={(value) =>
                            form.setData('department_id', value)
                        }
                        placeholder="Choisir un département…"
                        searchPlaceholder="Nom du département…"
                        noneLabel="Aucun"
                    />
                    <InputError message={form.errors.department_id} />
                </div>
                <div className="grid gap-2">
                    <Label>Site</Label>
                    <SearchableSelect
                        options={siteOptions}
                        value={form.data.site_id}
                        onChange={(value) => form.setData('site_id', value)}
                        placeholder="Choisir un site…"
                        searchPlaceholder="Nom du site…"
                        noneLabel="Aucun"
                    />
                    <InputError message={form.errors.site_id} />
                </div>
                <div className="grid gap-2">
                    <Label>Statut</Label>
                    <SearchableSelect
                        options={professionalCategories}
                        value={form.data.professional_category}
                        onChange={(value) =>
                            form.setData('professional_category', value)
                        }
                        placeholder="Choisir…"
                        noneLabel="Non renseigné"
                    />
                    <InputError message={form.errors.professional_category} />
                </div>
                <div className="grid gap-2">
                    <Label htmlFor="classification">Catégorie / échelon</Label>
                    <Input
                        id="classification"
                        value={form.data.classification}
                        onChange={(e) =>
                            form.setData('classification', e.target.value)
                        }
                        placeholder="Ex. Catégorie 3, échelon 2"
                    />
                    <InputError message={form.errors.classification} />
                </div>
                <div className="grid gap-2">
                    <Label>Temps de travail</Label>
                    <SearchableSelect
                        options={workTimes}
                        value={form.data.work_time}
                        onChange={(value) => form.setData('work_time', value)}
                        placeholder="Choisir…"
                        noneLabel="Non renseigné"
                    />
                    <InputError message={form.errors.work_time} />
                </div>
                <div className="grid gap-2">
                    <Label htmlFor="weekly_hours">Heures hebdomadaires</Label>
                    <Input
                        id="weekly_hours"
                        type="number"
                        min={0}
                        max={60}
                        step="0.5"
                        value={form.data.weekly_hours}
                        onChange={(e) =>
                            form.setData('weekly_hours', e.target.value)
                        }
                    />
                    <InputError message={form.errors.weekly_hours} />
                </div>
                <div className="grid gap-2">
                    <Label htmlFor="hire_date">Date d&apos;embauche</Label>
                    <Input
                        id="hire_date"
                        type="date"
                        value={form.data.hire_date}
                        onChange={(e) =>
                            form.setData('hire_date', e.target.value)
                        }
                    />
                    <InputError message={form.errors.hire_date} />
                </div>
                <div className="grid gap-2">
                    <Label htmlFor="seniority_date">
                        Date d&apos;ancienneté
                    </Label>
                    <Input
                        id="seniority_date"
                        type="date"
                        value={form.data.seniority_date}
                        onChange={(e) =>
                            form.setData('seniority_date', e.target.value)
                        }
                    />
                    <InputError message={form.errors.seniority_date} />
                </div>
                <div className="grid gap-2">
                    <Label htmlFor="probation_end_date">
                        Fin de période d&apos;essai
                    </Label>
                    <Input
                        id="probation_end_date"
                        type="date"
                        value={form.data.probation_end_date}
                        onChange={(e) =>
                            form.setData('probation_end_date', e.target.value)
                        }
                    />
                    <InputError message={form.errors.probation_end_date} />
                </div>
            </FormSection>

            <FormSection title="Rattachement">
                <div className="grid gap-2">
                    <Label>Compte utilisateur</Label>
                    <SearchableSelect
                        options={userOptions}
                        value={form.data.user_id}
                        onChange={(value) => form.setData('user_id', value)}
                        placeholder="Rechercher un compte…"
                        searchPlaceholder="Nom du compte…"
                        noneLabel="Non lié"
                    />
                    <InputError message={form.errors.user_id} />
                </div>
                <div className="grid gap-2">
                    <Label>Manager</Label>
                    <SearchableSelect
                        options={managerOptions}
                        value={form.data.manager_id}
                        onChange={(value) => form.setData('manager_id', value)}
                        placeholder="Rechercher un manager…"
                        searchPlaceholder="Nom du manager…"
                        noneLabel="Aucun"
                    />
                    <InputError message={form.errors.manager_id} />
                </div>
            </FormSection>

            {employee.is_departed ? (
                <p className="text-sm leading-relaxed text-muted-foreground">
                    Ce collaborateur a un départ en cours. Utilisez
                    « Réactiver » sur la fiche plutôt que cette case.
                </p>
            ) : (
                <div className="flex items-start gap-2">
                    <Checkbox
                        id="is_active"
                        className="mt-0.5"
                        checked={form.data.is_active}
                        onCheckedChange={(checked) =>
                            form.setData('is_active', checked === true)
                        }
                    />
                    <div className="space-y-1">
                        <Label htmlFor="is_active">Collaborateur actif</Label>
                        <p className="text-xs leading-relaxed text-muted-foreground">
                            Pour un départ définitif, utilisez plutôt
                            l&apos;action Terminer la collaboration.
                        </p>
                    </div>
                </div>
            )}

            <div className="flex gap-2">
                <Button type="submit" disabled={form.processing}>
                    Enregistrer
                </Button>
                <Button type="button" variant="outline" onClick={onCancel}>
                    Annuler
                </Button>
            </div>
        </form>
    );
}