"use client"

import { useState } from "react";
import { useRouter } from "next/navigation";
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Trash2Icon } from "lucide-react";
import { deleteCredential } from "@/modules/shared/actions/credentials";

export function DeleteCredentialDialog({
    profileId,
    credentialId,
    service,
}: {
    profileId: string;
    credentialId: string;
    service: string;
}) {
    const [open, setOpen] = useState(false);
    const [pending, setPending] = useState(false);
    const router = useRouter();

    async function handleDelete() {
        setPending(true);
        const result = await deleteCredential(profileId, credentialId);
        setPending(false);

        if (result && "success" in result) {
            setOpen(false);
            router.refresh();
        }
    }

    return (
        <Dialog open={open} onOpenChange={setOpen}>
            <DialogTrigger
                render={<Button variant="ghost" size="icon-sm" aria-label="Löschen" />}
            >
                <Trash2Icon className="size-4" />
            </DialogTrigger>
            <DialogContent>
                <DialogHeader className="mb-4">
                    <DialogTitle>Eintrag löschen</DialogTitle>
                    <DialogDescription>
                        Möchtest du den Eintrag <span className="font-medium text-foreground">{service}</span> wirklich löschen?
                        Diese Aktion kann nicht rückgängig gemacht werden.
                    </DialogDescription>
                </DialogHeader>
                <DialogFooter>
                    <Button type="button" variant="outline" onClick={() => setOpen(false)} disabled={pending}>
                        Abbrechen
                    </Button>
                    <Button type="button" variant="destructive" onClick={handleDelete} disabled={pending}>
                        {pending ? "Wird gelöscht..." : "Löschen"}
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}