import { router } from '@inertiajs/react';
import { Mail } from 'lucide-react';
import { useState } 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 Props = {
    open: boolean;
    user: UserDetail;
    onOpenChange: (open: boolean) => void;
};

export function ResetPasswordDialog({ open, user, onOpenChange }: Props) {
    const [processing, setProcessing] = useState(false);

    const handleSendResetEmail = () => {
        setProcessing(true);

        router.patch(
            UserController.resetPassword.url(user.id),
            {},
            {
                preserveScroll: true,
                onSuccess: () => onOpenChange(false),
                onFinish: () => setProcessing(false),
            },
        );
    };

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>Resetear contrasena</DialogTitle>
                    <DialogDescription>
                        Se enviara un correo a {formatUserName(user)} con un
                        enlace para que establezca una nueva contrasena.
                    </DialogDescription>
                </DialogHeader>

                <div className="flex items-start gap-3 rounded-lg border bg-muted/50 p-4">
                    <Mail className="mt-0.5 size-4 text-muted-foreground" />
                    <div className="flex-1 text-sm">
                        <p className="font-medium">
                            Enlace de restablecimiento
                        </p>
                        <p className="text-muted-foreground">
                            El usuario recibira un correo en{' '}
                            <span className="font-medium text-foreground">
                                {user.email}
                            </span>{' '}
                            con instrucciones para crear una nueva contrasena.
                        </p>
                    </div>
                </div>

                <DialogFooter>
                    <Button
                        type="button"
                        variant="outline"
                        onClick={() => onOpenChange(false)}
                    >
                        Cancelar
                    </Button>
                    <Button
                        type="button"
                        disabled={processing}
                        onClick={handleSendResetEmail}
                    >
                        {processing && <Spinner />}
                        <Mail className="size-3.5" />
                        Enviar enlace
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}