import { router } from '@inertiajs/react';
import { Sparkles } from 'lucide-react';
import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogBody,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { Label } from '@/components/ui/label';
import { LoadingButton } from '@/components/ui/loading-button';
import type { DocumentsFilters } from '@/features/documents/types';
import { useI18n } from '@/hooks/use-i18n';

type DocumentsQueueAllAiButtonProps = {
    filters: Required<DocumentsFilters>;
};

export function DocumentsQueueAllAiButton({ filters }: DocumentsQueueAllAiButtonProps) {
    const { t } = useI18n();
    const [open, setOpen] = useState(false);
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [useCurrentFilters, setUseCurrentFilters] = useState(false);
    const [includeProcessed, setIncludeProcessed] = useState(false);

    const submit = () => {
        router.post(
            '/admin/documents/queue-ai-processing',
            {
                use_current_filters: useCurrentFilters,
                include_processed: includeProcessed,
                search: filters.search,
                client_id: filters.client_id,
                uploaded_by_user_id: filters.uploaded_by_user_id,
                accountant_status: filters.accountant_status || null,
                ai_status: filters.ai_status || null,
                extraction_status: filters.extraction_status || null,
                uploaded_from: filters.uploaded_from || null,
                uploaded_to: filters.uploaded_to || null,
                client_mismatch: filters.client_mismatch,
                hide_duplicates: filters.hide_duplicates,
                duplicates_only: filters.duplicates_only,
            },
            {
                preserveScroll: true,
                onStart: () => setIsSubmitting(true),
                onFinish: () => {
                    setIsSubmitting(false);
                    setOpen(false);
                },
            },
        );
    };

    return (
        <>
            <Button type="button" variant="outline" onClick={() => setOpen(true)}>
                <Sparkles className="mr-2 h-4 w-4" />
                {t('documents.admin_index.queue_ai.button')}
            </Button>

            <AlertDialog open={open} onOpenChange={setOpen}>
                <AlertDialogContent>
                    <AlertDialogHeader>
                        <AlertDialogTitle>{t('documents.admin_index.queue_ai.dialog_title')}</AlertDialogTitle>
                    </AlertDialogHeader>

                    <AlertDialogBody>
                        <AlertDialogDescription>
                            {t('documents.admin_index.queue_ai.dialog_description')}
                        </AlertDialogDescription>

                        <div className="space-y-3">
                        <div className="flex items-start gap-2">
                            <Checkbox
                                id="queue-ai-use-filters"
                                checked={useCurrentFilters}
                                onCheckedChange={(checked) => setUseCurrentFilters(checked === true)}
                            />
                            <Label htmlFor="queue-ai-use-filters" className="cursor-pointer font-normal leading-snug">
                                {t('documents.admin_index.queue_ai.use_filters')}
                            </Label>
                        </div>
                        <div className="flex items-start gap-2">
                            <Checkbox
                                id="queue-ai-include-processed"
                                checked={includeProcessed}
                                onCheckedChange={(checked) => setIncludeProcessed(checked === true)}
                            />
                            <Label
                                htmlFor="queue-ai-include-processed"
                                className="cursor-pointer font-normal leading-snug"
                            >
                                {t('documents.admin_index.queue_ai.include_processed')}
                            </Label>
                        </div>
                        </div>
                    </AlertDialogBody>

                    <AlertDialogFooter>
                        <AlertDialogCancel asChild>
                            <Button type="button" variant="outline" disabled={isSubmitting}>
                                {t('documents.admin_index.queue_ai.cancel')}
                            </Button>
                        </AlertDialogCancel>
                        <AlertDialogAction asChild>
                            <LoadingButton loading={isSubmitting} onClick={submit}>
                                {t('documents.admin_index.queue_ai.confirm')}
                            </LoadingButton>
                        </AlertDialogAction>
                    </AlertDialogFooter>
                </AlertDialogContent>
            </AlertDialog>
        </>
    );
}