import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { Label } from '@/components/ui/label';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Textarea } from '@/components/ui/textarea';
import {
    Flash,
    showFlash,
    useFlashToasts,
} from '@/components/use-flash-toasts';
import { update } from '@/routes/verifications';
import { useForm } from '@inertiajs/react';
import { CheckCircle, LoaderCircle, XCircle } from 'lucide-react';
import { FormEventHandler, useId } from 'react';

export interface VerificationForm {
    accreditation_id: number;
    user_id: number;
    status: 'approved' | 'rejected';
    rejection_message?: string | null;
}

interface Props {
    open: boolean;
    setOpen: (value: boolean) => void;
    accreditationId: number;
    userId: number;
}

export default function VerifyModal({
    open,
    setOpen,
    accreditationId,
    userId,
}: Props) {
    const id = useId();
    const { data, setData, post, processing, reset, errors } =
        useForm<VerificationForm>({
            accreditation_id: accreditationId,
            user_id: userId,
            status: 'approved',
            rejection_message: null,
        });

    // Show errors as toasts
    useFlashToasts({ errors });

    const submit: FormEventHandler = (e) => {
        e.preventDefault();
        post(update(accreditationId).url, {
            onSuccess: (page) => {
                const flash = page.props.flash as Flash;
                showFlash(flash);
                reset();
                setOpen(false);
            },
        });
    };

    const handleStatusChange = (value: 'approved' | 'rejected') => {
        setData('status', value);
        if (value === 'approved') setData('rejection_message', null);
    };

    const handleRejectionMessageChange = (
        e: React.ChangeEvent<HTMLTextAreaElement>,
    ) => {
        setData('rejection_message', e.target.value);
    };

    return (
        <Dialog open={open} onOpenChange={setOpen}>
            <DialogContent className="w-full max-w-[98vw] pb-4 sm:max-w-md">
                <DialogHeader>
                    <DialogTitle>Confirmar verificación</DialogTitle>
                    <DialogDescription>
                        ¿Estás seguro que deseas verificar este perfil?
                    </DialogDescription>
                </DialogHeader>
                <form id="verify-form" onSubmit={submit} className="space-y-4">
                    <RadioGroup
                        className="grid grid-cols-2 gap-2"
                        value={data.status}
                        onValueChange={handleStatusChange}
                    >
                        {/* Aprobar */}
                        <div className="relative flex cursor-pointer flex-col items-center gap-2 rounded-md border border-input px-2 py-3 text-center shadow-xs transition outline-none has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50 has-data-[state=checked]:border-primary/50">
                            <RadioGroupItem
                                id={`${id}-approved`}
                                value="approved"
                                className="sr-only"
                            />
                            <CheckCircle
                                className="opacity-60"
                                size={20}
                                aria-hidden="true"
                            />
                            <label
                                htmlFor={`${id}-approved`}
                                className="cursor-pointer text-xs leading-none font-medium text-foreground after:absolute after:inset-0"
                            >
                                Aprobar
                            </label>
                        </div>
                        {/* Rechazar */}
                        <div className="relative flex cursor-pointer flex-col items-center gap-2 rounded-md border border-input px-2 py-3 text-center shadow-xs transition outline-none has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50 has-data-[state=checked]:border-primary/50">
                            <RadioGroupItem
                                id={`${id}-rejected`}
                                value="rejected"
                                className="sr-only"
                            />
                            <XCircle
                                className="opacity-60"
                                size={20}
                                aria-hidden="true"
                            />
                            <label
                                htmlFor={`${id}-rejected`}
                                className="cursor-pointer text-xs leading-none font-medium text-foreground after:absolute after:inset-0"
                            >
                                Rechazar
                            </label>
                        </div>
                    </RadioGroup>
                    {data.status === 'rejected' && (
                        <div>
                            <Label
                                htmlFor={`${id}-rejection_message`}
                                className="mb-1 block text-sm font-medium"
                            >
                                Motivo de rechazo
                            </Label>
                            <Textarea
                                id={`${id}-rejection_message`}
                                value={data.rejection_message ?? ''}
                                onChange={handleRejectionMessageChange}
                                placeholder="Escribe el motivo de rechazo..."
                                required
                            />
                        </div>
                    )}
                </form>
                <DialogFooter>
                    <DialogClose asChild>
                        <Button variant="outline" type="button">
                            Cancelar
                        </Button>
                    </DialogClose>
                    <Button
                        type="submit"
                        form="verify-form"
                        disabled={processing}
                    >
                        {processing && (
                            <LoaderCircle className="h-4 w-4 animate-spin" />
                        )}
                        {data.status === 'approved'
                            ? 'Confirmar verificación'
                            : 'Rechazar verificación'}
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}