import { SelectField, TextInputField } from '@/components/form';
import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { useFlashToasts, showFlash, Flash } from '@/components/use-flash-toasts';
import { store as storeNotification } from '@/routes/alerts';
import { useForm } from '@inertiajs/react';
import { LoaderCircle } from 'lucide-react';
import { FormEventHandler } from 'react';

export interface NotificationForm {
    user_id?: number | null;
    sender_id?: number | null;
    is_public: boolean;
    title: string;
    message: string;
    type: string;
    notifiable_type?: string | null;
    notifiable_id?: number | null;
    status: string;
}

interface CreateNotificationProps {
    open: boolean;
    setOpen: (value: boolean) => void;
}

export default function CreateNotification({ open, setOpen }: CreateNotificationProps) {
    const { data, setData, post, processing, errors, reset } =
        useForm<NotificationForm>({
            user_id: null,
            sender_id: null,
            is_public: false,
            title: '',
            message: '',
            type: '',
            notifiable_type: '',
            notifiable_id: null,
            status: 'active',
        });

    useFlashToasts({ errors });

    const submit: FormEventHandler = (e) => {
        e.preventDefault();
        if (!isFormValid) return;
        post(storeNotification().url, {
            onSuccess: (page) => {
                const flash = page.props.flash as Flash;
                showFlash(flash);
                reset();
                setOpen(false);
            },
            onError: () => {},
        });
    };

    const isFormValid = Boolean(data.title && data.message && data.type && data.status);

    return (
        <Dialog open={open} onOpenChange={setOpen}>
            <DialogContent className="w-full max-w-[98vw] pb-4 sm:max-w-md">
                <DialogHeader>
                    <DialogTitle>Crear Notificación</DialogTitle>
                    <DialogDescription>
                        Completa los campos para registrar una nueva notificación.
                    </DialogDescription>
                </DialogHeader>
                <form id="notification-form" onSubmit={submit}>
                    <div className="grid gap-4">
                        <TextInputField
                            id="title"
                            label="Título"
                            required
                            value={data.title}
                            onChange={(v) => setData('title', v)}
                            error={errors.title}
                        />
                        <TextInputField
                            id="message"
                            label="Mensaje"
                            required
                            value={data.message}
                            onChange={(v) => setData('message', v)}
                            error={errors.message}
                        />
                        <SelectField
                            id="type"
                            label="Tipo"
                            value={data.type}
                            onChange={(v) => setData('type', v)}
                            options={[
                                { value: '', label: 'Selecciona un tipo' },
                                { value: 'system', label: 'Sistema' },
                                { value: 'order', label: 'Orden' },
                                { value: 'event', label: 'Evento' },
                                { value: 'animal', label: 'Animal' },
                                { value: 'homologation', label: 'Homologación' },
                                { value: 'alert', label: 'Alerta' },
                                { value: 'reminder', label: 'Recordatorio' },
                            ]}
                            error={errors.type}
                        />
                        <SelectField
                            id="status"
                            label="Estado"
                            value={data.status}
                            onChange={(v) => setData('status', v)}
                            options={[
                                { value: 'active', label: 'Activo' },
                                { value: 'archived', label: 'Archivado' },
                                { value: 'deleted', label: 'Eliminado' },
                            ]}
                            error={errors.status}
                        />
                        <SelectField
                            id="is_public"
                            label="¿Es pública?"
                            value={data.is_public ? '1' : '0'}
                            onChange={(v) => setData('is_public', v === '1')}
                            options={[
                                { value: '0', label: 'No' },
                                { value: '1', label: 'Sí' },
                            ]}
                        />
                        {/* Puedes agregar campos para user_id, sender_id, notifiable_type, notifiable_id si lo necesitas */}
                    </div>
                </form>
                <DialogFooter>
                    <DialogClose asChild>
                        <Button variant="outline" type="button">
                            Cancelar
                        </Button>
                    </DialogClose>
                    <Button
                        type="submit"
                        form="notification-form"
                        disabled={processing || !isFormValid}
                    >
                        {processing && (
                            <LoaderCircle className="h-4 w-4 animate-spin" />
                        )}
                        Guardar
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}