import { router } from '@inertiajs/react';
import { useState } from 'react';
import { IconButton } from '@/components/common/IconButton';
import { Button } from '@/components/ui/button';
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogBody,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
    AlertDialogTrigger,
} from '@/components/ui/alert-dialog';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { LoadingButton } from '@/components/ui/loading-button';
import { tableRowIconButtonClass } from '@/lib/icon-button-classes';
import { useI18n } from '@/hooks/use-i18n';

type DeleteDocumentButtonProps = {
    documentId: number;
    canDelete: boolean;
};

export function DeleteDocumentButton({ documentId, canDelete }: DeleteDocumentButtonProps) {
    const { t } = useI18n();
    const [open, setOpen] = useState(false);
    const [isDeleting, setIsDeleting] = useState(false);

    if (!canDelete) {
        return null;
    }

    const confirmDelete = () => {
        router.delete(`/admin/documents/${documentId}`, {
            preserveScroll: true,
            onStart: () => setIsDeleting(true),
            onFinish: () => {
                setIsDeleting(false);
                setOpen(false);
            },
        });
    };

    return (
        <AlertDialog open={open} onOpenChange={setOpen}>
            <TooltipProvider delayDuration={150}>
                <Tooltip>
                    <TooltipTrigger asChild>
                        <AlertDialogTrigger asChild>
                            <IconButton
                                type="button"
                                variant="text"
                                color="danger"
                                size="sm"
                                className={tableRowIconButtonClass}
                                icon="solar:trash-bin-minimalistic-bold-duotone"
                                aria-label={t('documents.admin_index.delete.aria')}
                            />
                        </AlertDialogTrigger>
                    </TooltipTrigger>
                    <TooltipContent>{t('documents.admin_index.delete.tooltip')}</TooltipContent>
                </Tooltip>
            </TooltipProvider>

            <AlertDialogContent>
                <AlertDialogHeader>
                    <AlertDialogTitle>{t('documents.admin_index.delete.dialog_title')}</AlertDialogTitle>
                </AlertDialogHeader>
                <AlertDialogBody>
                    <AlertDialogDescription>{t('documents.admin_index.delete.dialog_description')}</AlertDialogDescription>
                </AlertDialogBody>
                <AlertDialogFooter>
                    <AlertDialogCancel asChild>
                        <Button type="button" variant="outline" disabled={isDeleting}>
                            {t('documents.admin_index.delete.cancel')}
                        </Button>
                    </AlertDialogCancel>
                    <AlertDialogAction asChild>
                        <LoadingButton loading={isDeleting} onClick={confirmDelete}>
                            {t('documents.admin_index.delete.confirm')}
                        </LoadingButton>
                    </AlertDialogAction>
                </AlertDialogFooter>
            </AlertDialogContent>
        </AlertDialog>
    );
}