import { useForm } from '@inertiajs/react';
import { AlertTriangle } from 'lucide-react';
import { useEffect, useRef } from 'react';
import UserController from '@/actions/App/Http/Controllers/UserController';
import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { Spinner } from '@/components/ui/spinner';
import type { UserDetail } from '@/types';
import { formatUserName } from './helpers';

type ActionType = 'toggle-active' | 'delete';

type Props = {
    action: ActionType;
    open: boolean;
    user: UserDetail;
    onOpenChange: (open: boolean) => void;
};

export function ConfirmActionDialog({
    action,
    open,
    user,
    onOpenChange,
}: Props) {
    const previousOpen = useRef(open);
    const form = useForm({});

    useEffect(() => {
        if (!open && previousOpen.current) {
            form.clearErrors();
        }

        previousOpen.current = open;
    }, [form, open]);

    const isDelete = action === 'delete';
    const isCurrentlyActive = user.is_active;
    const title = isDelete
        ? 'Eliminar usuario'
        : isCurrentlyActive
          ? 'Desactivar usuario'
          : 'Reactivar usuario';
    const description = isDelete
        ? `Esta accion archivara a ${formatUserName(user)} mediante soft-delete. Podras conservar integridad referencial, pero dejara de aparecer en la lista.`
        : isCurrentlyActive
          ? `La cuenta de ${formatUserName(user)} dejara de poder iniciar sesion hasta ser reactivada.`
          : `La cuenta de ${formatUserName(user)} volvera a estar habilitada para iniciar sesion.`;

    const submit = () => {
        const route =
            action === 'delete'
                ? UserController.destroy(user.id)
                : UserController.toggleActive(user.id);

        form.submit(route, {
            preserveScroll: true,
            onSuccess: () => onOpenChange(false),
        });
    };

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>{title}</DialogTitle>
                    <DialogDescription>{description}</DialogDescription>
                </DialogHeader>

                <div className="rounded-2xl border border-destructive/20 bg-destructive/5 p-4 text-sm text-muted-foreground">
                    <div className="flex items-start gap-3">
                        <AlertTriangle className="mt-0.5 text-destructive" />
                        <p>
                            El backend debe impedir esta accion si el usuario es
                            el ultimo administrador activo.
                        </p>
                    </div>
                </div>

                <DialogFooter>
                    <Button
                        type="button"
                        variant="outline"
                        onClick={() => onOpenChange(false)}
                    >
                        Cancelar
                    </Button>
                    <Button
                        type="button"
                        variant="destructive"
                        disabled={form.processing}
                        onClick={submit}
                    >
                        {form.processing && <Spinner />}
                        {isDelete
                            ? 'Confirmar eliminacion'
                            : isCurrentlyActive
                              ? 'Confirmar desactivacion'
                              : 'Confirmar reactivacion'}
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}