'use client';

import { deleteArticleByExternalId } from '@/lib/feature/article/article.external';
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
    AlertDialogTrigger,
} from '@/ui/components/shadcn/alert-dialog';
import { Button } from '@/ui/components/shadcn/button';
import { UUIDv4 } from '@/utils/types/uuid';
import { Trash2Icon } from 'lucide-react';
import { useTransition } from 'react';
import { toast } from 'sonner';

interface DeleteArticleButtonProps {
    externalID: UUIDv4;
    title: string;
}

export const DeleteArticleButton = ({
    externalID,
    title,
}: DeleteArticleButtonProps) => {
    const [isPending, startTransition] = useTransition();

    const handleDelete = () => {
        startTransition(async () => {
            const result = await deleteArticleByExternalId(externalID);
            if (!result.ok) {
                toast.error('Failed to delete article', {
                    description: result.error.message,
                    position: 'bottom-right',
                });
                return;
            }
            toast.success('Article deleted', {
                description: `"${title}" has been removed.`,
                position: 'bottom-right',
            });
        });
    };

    return (
        <AlertDialog>
            <AlertDialogTrigger asChild>
                <Button variant='destructive' size='sm' disabled={isPending}>
                    <Trash2Icon className='size-4' />
                    Delete
                </Button>
            </AlertDialogTrigger>
            <AlertDialogContent>
                <AlertDialogHeader>
                    <AlertDialogTitle>Delete article?</AlertDialogTitle>
                    <AlertDialogDescription>
                        This will permanently delete &ldquo;{title}
                        &rdquo;. This action cannot be undone.
                    </AlertDialogDescription>
                </AlertDialogHeader>
                <AlertDialogFooter>
                    <AlertDialogCancel asChild>
                        <Button variant='outline' size='sm'>
                            Cancel
                        </Button>
                    </AlertDialogCancel>
                    <AlertDialogAction asChild>
                        <Button
                            variant='destructive'
                            size='sm'
                            disabled={isPending}
                            onClick={handleDelete}
                        >
                            {isPending ? 'Deleting…' : 'Delete'}
                        </Button>
                    </AlertDialogAction>
                </AlertDialogFooter>
            </AlertDialogContent>
        </AlertDialog>
    );
};