import { useForm } from '@inertiajs/react';
import type { FormEvent } from 'react';
import { useEffect } from 'react';
import TaskController from '@/actions/App/Http/Controllers/Admin/TaskController';
import TicketController from '@/actions/App/Http/Controllers/Admin/TicketController';
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';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';

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

type Props = {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    type: 'task' | 'ticket';
    status: string;
    statusLabel: string;
    projectId: number | null;
    projects: ProjectOption[];
};

export function KanbanCreateDialog({
    open,
    onOpenChange,
    type,
    status,
    statusLabel,
    projectId,
    projects,
}: Props) {
    const form = useForm({
        title: '',
        project_id: '' as string | number,
        status,
        priority: 'medium',
        category: 'request',
    });

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

        form.setData({
            title: '',
            project_id: projectId ?? '',
            status,
            priority: 'medium',
            category: 'request',
        });
        form.clearErrors();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [open, projectId, status]);

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

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

        if (type === 'task') {
            form.transform((data) => ({
                title: data.title,
                project_id: Number(data.project_id),
                status: data.status,
                priority: data.priority,
            }));
            form.post(TaskController.store.url(), options);

            return;
        }

        form.transform((data) => ({
            title: data.title,
            project_id: Number(data.project_id),
            status: data.status,
            priority: data.priority,
            category: data.category,
        }));
        form.post(TicketController.store.url(), options);
    }

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="sm:max-w-md">
                <DialogHeader>
                    <DialogTitle>
                        {type === 'task' ? 'Nouvelle tâche' : 'Nouveau ticket'}
                    </DialogTitle>
                    <DialogDescription>
                        Création dans la colonne « {statusLabel} ».
                    </DialogDescription>
                </DialogHeader>

                <form onSubmit={submit} className="space-y-4">
                    <div className="grid gap-2">
                        <Label htmlFor="kanban-create-title">Titre</Label>
                        <Input
                            id="kanban-create-title"
                            value={form.data.title}
                            onChange={(event) =>
                                form.setData('title', event.target.value)
                            }
                            required
                            autoFocus
                        />
                        <InputError message={form.errors.title} />
                    </div>

                    <div className="grid gap-2">
                        <Label htmlFor="kanban-create-project">Projet</Label>
                        <Select
                            value={
                                form.data.project_id === ''
                                    ? undefined
                                    : String(form.data.project_id)
                            }
                            onValueChange={(value) =>
                                form.setData('project_id', Number(value))
                            }
                        >
                            <SelectTrigger id="kanban-create-project">
                                <SelectValue placeholder="Sélectionner un projet" />
                            </SelectTrigger>
                            <SelectContent>
                                {projects.map((project) => (
                                    <SelectItem
                                        key={project.id}
                                        value={String(project.id)}
                                    >
                                        {project.code} — {project.name}
                                    </SelectItem>
                                ))}
                            </SelectContent>
                        </Select>
                        <InputError message={form.errors.project_id} />
                    </div>

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