import { useRef, useState } from 'react';
import { router } from '@inertiajs/react';
import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogBody,
    DialogContent,
    DialogFooter,
    DialogHeader,
    DialogIconClose,
    DialogTitle,
} from '@/components/ui/dialog';
import { LoadingButton } from '@/components/ui/loading-button';
import { useI18n } from '@/hooks/use-i18n';

type ChartOfAccountsImportDialogProps = {
    open: boolean;
    onOpenChange: (open: boolean) => void;
};

export function ChartOfAccountsImportDialog({ open, onOpenChange }: ChartOfAccountsImportDialogProps) {
    const { t } = useI18n();
    const inputRef = useRef<HTMLInputElement>(null);
    const [processing, setProcessing] = useState(false);

    const submit = () => {
        const file = inputRef.current?.files?.[0];

        if (!file) {
            return;
        }

        setProcessing(true);
        router.post(
            '/settings/chart-of-accounts/import',
            { file },
            {
                forceFormData: true,
                preserveScroll: true,
                onFinish: () => {
                    setProcessing(false);
                },
                onSuccess: () => {
                    onOpenChange(false);

                    if (inputRef.current) {
                        inputRef.current.value = '';
                    }
                },
            },
        );
    };

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="max-w-md gap-0">
                <DialogHeader>
                    <div className="flex items-start justify-between gap-3">
                        <DialogTitle>{t('settings.chart_of_accounts.import.title')}</DialogTitle>
                        <DialogIconClose />
                    </div>
                </DialogHeader>

                <DialogBody className="space-y-3 text-sm text-muted-foreground">
                    <p>
                        {t('settings.chart_of_accounts.import.body_intro')}{' '}
                        <span className="font-mono text-foreground">{t('settings.chart_of_accounts.import.body_columns')}</span>
                    </p>
                    <p>{t('settings.chart_of_accounts.import.body_updates')}</p>
                    <input
                        ref={inputRef}
                        type="file"
                        accept=".xls,.xlsx,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                        className="block w-full text-sm file:mr-3 file:rounded-md file:border-0 file:bg-primary file:px-3 file:py-1.5 file:text-xs file:font-medium file:text-primary-foreground"
                    />
                </DialogBody>

                <DialogFooter className="gap-2 sm:justify-end">
                    <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={processing}>
                        {t('settings.chart_of_accounts.import.close')}
                    </Button>
                    <LoadingButton type="button" loading={processing} onClick={submit}>
                        {t('settings.chart_of_accounts.import.submit')}
                    </LoadingButton>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}