import { useForm } from '@inertiajs/react';
import { useEffect } from 'react';
import type { FormEvent } from 'react';
import CostCenterController from '@/actions/App/Http/Controllers/Admin/CostCenterController';
import InputError from '@/components/input-error';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';

export type CostCenterFormValues = {
    id: number;
    code: string;
    name: string;
    department_id: number | null;
    is_active: boolean;
};

type DepartmentOption = { id: number; code: string; name: string };

type Props = {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    costCenter?: CostCenterFormValues | null;
    departments: DepartmentOption[];
};

export function CostCenterFormModal({
    open,
    onOpenChange,
    costCenter = null,
    departments,
}: Props) {
    const isEditing = costCenter !== null;

    const form = useForm({
        name: '',
        department_id: '' as string,
        is_active: true,
    });

    useEffect(() => {
        if (!open) {
            return;
        }

        form.setData({
            name: costCenter?.name ?? '',
            department_id: costCenter?.department_id
                ? String(costCenter.department_id)
                : '',
            is_active: costCenter?.is_active ?? true,
        });
        form.clearErrors();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [open, costCenter]);

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

        const payload = {
            name: form.data.name,
            department_id: form.data.department_id
                ? Number(form.data.department_id)
                : null,
            is_active: form.data.is_active,
        };

        form.transform(() => payload);

        const options = {
            preserveScroll: true,
            onSuccess: () => onOpenChange(false),
        };

        if (isEditing && costCenter) {
            form.put(CostCenterController.update.url(costCenter.id), options);

            return;
        }

        form.post(CostCenterController.store.url(), options);
    }

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>
                        {isEditing
                            ? 'Modifier le centre de coût'
                            : 'Nouveau centre de coût'}
                    </DialogTitle>
                    <DialogDescription>
                        Axe analytique pour ventiler charges et produits par
                        service ou projet.
                    </DialogDescription>
                </DialogHeader>

                <form onSubmit={submit} className="space-y-4">
                    <div className="grid gap-2">
                        <Label htmlFor="cc-name">
                            Nom
                            <span className="ml-0.5 text-destructive">*</span>
                        </Label>
                        <Input
                            id="cc-name"
                            value={form.data.name}
                            onChange={(event) =>
                                form.setData('name', event.target.value)
                            }
                            required
                        />
                        <InputError message={form.errors.name} />
                    </div>

                    <div className="grid gap-2">
                        <Label htmlFor="cc-department">Service (optionnel)</Label>
                        <Select
                            value={form.data.department_id || '__none__'}
                            onValueChange={(value) =>
                                form.setData(
                                    'department_id',
                                    value === '__none__' ? '' : value,
                                )
                            }
                        >
                            <SelectTrigger id="cc-department">
                                <SelectValue placeholder="Aucun service" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem value="__none__">Aucun</SelectItem>
                                {departments.map((department) => (
                                    <SelectItem
                                        key={department.id}
                                        value={String(department.id)}
                                    >
                                        {department.name}
                                    </SelectItem>
                                ))}
                            </SelectContent>
                        </Select>
                        <InputError message={form.errors.department_id} />
                    </div>

                    <div className="flex items-center gap-2">
                        <Checkbox
                            id="cc-active"
                            checked={form.data.is_active}
                            onCheckedChange={(checked) =>
                                form.setData('is_active', checked === true)
                            }
                        />
                        <Label htmlFor="cc-active">Actif</Label>
                    </div>

                    <DialogFooter>
                        <Button
                            type="button"
                            variant="outline"
                            onClick={() => onOpenChange(false)}
                        >
                            Annuler
                        </Button>
                        <Button type="submit" disabled={form.processing}>
                            {isEditing ? 'Enregistrer' : 'Créer'}
                        </Button>
                    </DialogFooter>
                </form>
            </DialogContent>
        </Dialog>
    );
}