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

type DocumentsBulkDeleteBarProps = {
    selectedIds: number[];
    onClearSelection: () => void;
};

export function DocumentsBulkDeleteBar({ selectedIds, onClearSelection }: DocumentsBulkDeleteBarProps) {
    const { t } = useI18n();
    const [open, setOpen] = useState(false);
    const [isDeleting, setIsDeleting] = useState(false);

    if (selectedIds.length === 0) {
        return null;
    }

    const confirmDelete = () => {
        router.delete('/admin/documents/bulk', {
            data: { document_ids: selectedIds },
            preserveScroll: true,
            onStart: () => setIsDeleting(true),
            onFinish: () => {
                setIsDeleting(false);
                setOpen(false);
                onClearSelection();
            },
        });
    };

    return (
        <>
            <div className="flex items-center gap-3 rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2">
                <p className="text-sm text-muted-foreground">
                    {t('documents.admin_index.bulk_delete.selected_count', {
                        count: selectedIds.length,
                    })}
                </p>

                <TooltipProvider delayDuration={150}>
                    <Tooltip>
                        <TooltipTrigger asChild>
                            <span
                                role="button"
                                tabIndex={0}
                                aria-label={t('documents.admin_index.bulk_delete.aria')}
                                onClick={() => setOpen(true)}
                                onKeyDown={(event) => {
                                    if (event.key === 'Enter' || event.key === ' ') {
                                        event.preventDefault();
                                        setOpen(true);
                                    }
                                }}
                                className={cn(
                                    'inline-flex cursor-pointer text-destructive',
                                    isDeleting && 'pointer-events-none opacity-50',
                                )}
                            >
                                <Icon
                                    icon="solar:trash-bin-minimalistic-bold-duotone"
                                    className="h-5 w-5"
                                />
                            </span>
                        </TooltipTrigger>
                        <TooltipContent>{t('documents.admin_index.bulk_delete.aria')}</TooltipContent>
                    </Tooltip>
                </TooltipProvider>
            </div>

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