import { router } from '@inertiajs/react';
import { useState } from 'react';
import { IconButton } from '@/components/common/IconButton';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { cn } from '@/lib/utils';
import { tableRowIconButtonClass } from '@/lib/icon-button-classes';
import { useI18n } from '@/hooks/use-i18n';

type ParseDocumentButtonProps = {
    documentId: number;
    canProcess: boolean;
};

export function ParseDocumentButton({ documentId, canProcess }: ParseDocumentButtonProps) {
    const { t } = useI18n();
    const [isProcessing, setIsProcessing] = useState(false);

    if (!canProcess) {
        return null;
    }

    const triggerParse = () => {
        router.post(
            `/admin/documents/${documentId}/parse`,
            {},
            {
                preserveScroll: true,
                onStart: () => setIsProcessing(true),
                onFinish: () => setIsProcessing(false),
            },
        );
    };

    return (
        <TooltipProvider delayDuration={150}>
            <Tooltip>
                <TooltipTrigger asChild>
                    <IconButton
                        type="button"
                        variant="text"
                        color="ghost"
                        size="sm"
                        className={cn(tableRowIconButtonClass, isProcessing && '[&_svg]:animate-spin')}
                        onClick={triggerParse}
                        disabled={isProcessing}
                        icon={
                            isProcessing
                                ? 'solar:refresh-bold-duotone'
                                : 'solar:magic-stick-3-bold-duotone'
                        }
                        aria-label={t('documents.admin_index.parse.aria')}
                    />
                </TooltipTrigger>
                <TooltipContent>{t('documents.admin_index.parse.tooltip')}</TooltipContent>
            </Tooltip>
        </TooltipProvider>
    );
}