import { useForm } from '@inertiajs/react';
import { useEffect } from 'react';
import type { FormEvent } from 'react';
import ChartOfAccountController from '@/actions/App/Http/Controllers/Admin/ChartOfAccountController';
import InputError from '@/components/input-error';
import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';

export type ChartOfAccountFormValues = {
    id: number;
    code: string;
    label: string;
    is_active: boolean;
};

type Props = {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    /** Compte parent quand on crée un sous-compte ; absent en édition. */
    parent?: { id: number; code: string; label: string } | null;
    /** Compte à éditer ; absent en création. */
    account?: ChartOfAccountFormValues | null;
};

export function ChartOfAccountFormModal({
    open,
    onOpenChange,
    parent = null,
    account = null,
}: Props) {
    const isEditing = account !== null;

    const form = useForm({
        code: '',
        label: '',
    });

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

        form.setData({
            code: account?.code ?? '',
            label: account?.label ?? '',
        });
        form.clearErrors();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [open, account]);

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

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

        if (isEditing && account) {
            form.transform((data) => ({ label: data.label }));
            form.put(ChartOfAccountController.update.url(account.id), options);

            return;
        }

        if (parent) {
            form.transform((data) => ({ ...data, parent_id: parent.id }));
            form.post(ChartOfAccountController.store.url(), options);
        }
    }

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>
                        {isEditing
                            ? 'Modifier le sous-compte'
                            : 'Nouveau sous-compte'}
                    </DialogTitle>
                    <DialogDescription>
                        {isEditing
                            ? 'Seul le libellé peut être modifié.'
                            : `Rattaché à ${parent?.code} — ${parent?.label}. Le code doit commencer par ${parent?.code}.`}
                    </DialogDescription>
                </DialogHeader>

                <form onSubmit={submit} className="space-y-4">
                    {!isEditing && (
                        <div className="grid gap-2">
                            <Label htmlFor="account-code">Code</Label>
                            <Input
                                id="account-code"
                                value={form.data.code}
                                onChange={(event) =>
                                    form.setData('code', event.target.value)
                                }
                                placeholder={
                                    parent ? `${parent.code}xx` : undefined
                                }
                                required
                                autoFocus
                                className="font-mono"
                            />
                            <InputError message={form.errors.code} />
                        </div>
                    )}

                    <div className="grid gap-2">
                        <Label htmlFor="account-label">Libellé</Label>
                        <Input
                            id="account-label"
                            value={form.data.label}
                            onChange={(event) =>
                                form.setData('label', event.target.value)
                            }
                            required
                            autoFocus={isEditing}
                        />
                        <InputError message={form.errors.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>
    );
}