import { useHttp } from '@inertiajs/react';
import { Plus } from 'lucide-react';
import { useMemo, useState } from 'react';
import { toast } from 'sonner';
import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { store as brigadistasStore } from '@/routes/brigadistas';
import { CatalogSelect } from './form-controls';

export function BrigadistaSelectWithCreate({
    value,
    options,
    onChange,
}: {
    value: number | null;
    options: Array<{ id: number; nombre: string; codigo?: string }>;
    onChange: (value: number | null) => void;
}) {
    const [open, setOpen] = useState(false);
    const [created, setCreated] = useState<Array<{ id: number; nombre: string }>>([]);
    const localOptions = useMemo(() => [...options, ...created], [options, created]);

    const http = useHttp({
        nombre: '',
    });

    const handleOpen = () => {
        http.setData('nombre', '');
        http.setDefaults({ nombre: '' });
        setOpen(true);
    };

    const handleSave = () => {
        const trimmed = http.data.nombre.trim();
        if (!trimmed) {
            toast.error('El nombre del brigadista es obligatorio');
            return;
        }

        http.post(brigadistasStore.url(), {
            onSuccess: (response: unknown) => {
                const data = response as { id: number; nombre: string };
                if (
                    !data ||
                    typeof data.id !== 'number' ||
                    typeof data.nombre !== 'string'
                ) {
                    toast.error('Respuesta inesperada del servidor');
                    return;
                }
                setCreated((prev) => [
                    ...prev,
                    { id: data.id, nombre: data.nombre },
                ]);
                onChange(data.id);
                setOpen(false);
                http.setData('nombre', '');
                toast.success('Brigadista creado correctamente');
            },
            onError: (errors: unknown) => {
                const msgs = errors as Record<string, string[]>;
                const first = Object.values(msgs).flat()[0];
                toast.error(first ?? 'No se pudo crear el brigadista');
            },
        });
    };

    return (
        <div className="flex items-center gap-2">
            <div className="flex-1">
                <CatalogSelect
                    value={value}
                    options={localOptions}
                    onChange={onChange}
                />
            </div>
            <Button
                type="button"
                variant="outline"
                size="icon"
                className="size-11 shrink-0"
                onClick={handleOpen}
                title="Añadir brigadista"
            >
                <Plus className="size-4" />
            </Button>

            <Dialog open={open} onOpenChange={setOpen}>
                <DialogContent>
                    <DialogHeader>
                        <DialogTitle>Añadir brigadista</DialogTitle>
                        <DialogDescription>
                            Ingrese el nombre completo del nuevo brigadista.
                        </DialogDescription>
                    </DialogHeader>
                    <div className="py-4">
                        <Input
                            placeholder="Nombre del brigadista"
                            value={http.data.nombre}
                            onChange={(e) =>
                                http.setData('nombre', e.target.value)
                            }
                            onKeyDown={(e) => {
                                if (e.key === 'Enter') {
                                    e.preventDefault();
                                    handleSave();
                                }
                            }}
                            autoFocus
                        />
                    </div>
                    <DialogFooter>
                        <Button
                            type="button"
                            variant="outline"
                            onClick={() => setOpen(false)}
                            disabled={http.processing}
                        >
                            Cancelar
                        </Button>
                        <Button
                            type="button"
                            onClick={handleSave}
                            disabled={http.processing || !http.data.nombre.trim()}
                        >
                            {http.processing ? 'Guardando...' : 'Guardar'}
                        </Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>
        </div>
    );
}