import { Button } from '@/components/ui/button';
import {
    Tooltip,
    TooltipContent,
    TooltipProvider,
    TooltipTrigger,
} from '@/components/ui/tooltip';
import { useEncryptionKey } from '@/contexts/encryption-key-context';
import { type Account, type Bank } from '@/types/account';
import { type AutomationRule } from '@/types/automation-rule';
import { type Category } from '@/types/category';
import { Upload } from 'lucide-react';
import { useState } from 'react';
import { toast } from 'sonner';
import { ImportTransactionsDrawer } from './import-transactions-drawer';

interface ImportData {
    accounts: Account[];
    categories: Category[];
    banks: Bank[];
    automationRules: AutomationRule[];
}

export function ImportTransactionsButton() {
    const { isKeySet } = useEncryptionKey();
    const [drawerOpen, setDrawerOpen] = useState(false);
    const [importData, setImportData] = useState<ImportData | null>(null);
    const [loading, setLoading] = useState(false);

    const handleOpenDrawer = async () => {
        if (!isKeySet) {
            toast.error(
                'Please unlock your encryption key to import transactions',
            );
            return;
        }

        // Fetch data on-demand when drawer opens
        setLoading(true);
        try {
            const response = await fetch('/api/import/data');
            if (!response.ok) {
                throw new Error('Failed to load import data');
            }
            const data = await response.json();
            setImportData(data);
            setDrawerOpen(true);
        } catch (error) {
            toast.error('Failed to load import data');
            console.error(error);
        } finally {
            setLoading(false);
        }
    };

    return (
        <>
            <TooltipProvider>
                <Tooltip>
                    <TooltipTrigger asChild>
                        <Button
                            variant="ghost"
                            className={`h-9 ${!isKeySet || loading ? 'cursor-not-allowed opacity-50' : ''}`}
                            onClick={handleOpenDrawer}
                            disabled={loading}
                            aria-label="Import transactions"
                        >
                            <Upload className="h-5 w-5" />
                            <span className="">
                                {loading ? 'Loading...' : 'Import'}
                            </span>
                        </Button>
                    </TooltipTrigger>
                    <TooltipContent>
                        {!isKeySet
                            ? `Unlock encryption to import transactions`
                            : `Import transactions from CSV/Excel`}
                    </TooltipContent>
                </Tooltip>
            </TooltipProvider>

            {importData && (
                <ImportTransactionsDrawer
                    open={drawerOpen}
                    onOpenChange={setDrawerOpen}
                    accounts={importData.accounts}
                    categories={importData.categories}
                    banks={importData.banks}
                    automationRules={importData.automationRules}
                />
            )}
        </>
    );
}