import { useCallback, useState } from 'react';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import {
    Dialog,
    DialogBody,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { Separator } from '@/components/ui/separator';
import { useI18n } from '@/hooks/use-i18n';

interface SagaExportModalProps {
    clientId: number;
    open: boolean;
    onOpenChange: (open: boolean) => void;
}

type DocType = 'facturi_intrare' | 'facturi_iesire' | 'bonuri_fiscale';

const DOC_TYPES: { key: DocType; labelKey: string }[] = [
    { key: 'facturi_intrare', labelKey: 'clients.show.saga_export.type_facturi_intrare' },
    { key: 'facturi_iesire', labelKey: 'clients.show.saga_export.type_facturi_iesire' },
    { key: 'bonuri_fiscale', labelKey: 'clients.show.saga_export.type_bonuri_fiscale' },
];

function currentYearMonth(): string {
    const now = new Date();
    return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
}

export function SagaExportModal({ clientId, open, onOpenChange }: SagaExportModalProps) {
    const { t } = useI18n();
    const [dateFrom, setDateFrom] = useState<string>(currentYearMonth);
    const [dateTo, setDateTo] = useState<string>(currentYearMonth);
    const [selected, setSelected] = useState<Set<DocType>>(
        new Set(['facturi_intrare', 'facturi_iesire', 'bonuri_fiscale']),
    );

    const toggle = useCallback((key: DocType) => {
        setSelected((prev) => {
            const next = new Set(prev);
            next.has(key) ? next.delete(key) : next.add(key);
            return next;
        });
    }, []);

    const handleDownload = useCallback(() => {
        const params = new URLSearchParams({ date_from: dateFrom, date_to: dateTo });
        selected.forEach((type) => params.append('types[]', type));
        window.location.href = `/admin/clients/${clientId}/export/saga?${params.toString()}`;
        onOpenChange(false);
    }, [clientId, dateFrom, dateTo, selected, onOpenChange]);

    const canDownload = dateFrom && dateTo && selected.size > 0;

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="gap-0 sm:max-w-sm">
                <DialogHeader>
                    <DialogTitle>{t('clients.show.saga_export.modal_title')}</DialogTitle>
                    <DialogDescription>{t('clients.show.saga_export.modal_desc')}</DialogDescription>
                </DialogHeader>

                <DialogBody className="grid gap-4">
                    {/* Perioadă */}
                    <div className="grid gap-3">
                        <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                            {t('clients.show.saga_export.section_period')}
                        </p>
                        <div className="grid grid-cols-2 gap-3">
                            <div className="grid gap-1.5">
                                <label className="text-xs font-medium text-foreground/80" htmlFor="saga-date-from">
                                    {t('clients.show.saga_export.label_from')}
                                </label>
                                <input
                                    id="saga-date-from"
                                    type="month"
                                    value={dateFrom}
                                    max={dateTo}
                                    onChange={(e) => setDateFrom(e.target.value)}
                                    className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                                />
                            </div>
                            <div className="grid gap-1.5">
                                <label className="text-xs font-medium text-foreground/80" htmlFor="saga-date-to">
                                    {t('clients.show.saga_export.label_to')}
                                </label>
                                <input
                                    id="saga-date-to"
                                    type="month"
                                    value={dateTo}
                                    min={dateFrom}
                                    onChange={(e) => setDateTo(e.target.value)}
                                    className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                                />
                            </div>
                        </div>
                    </div>

                    <Separator />

                    {/* Tipuri documente */}
                    <div className="grid gap-3">
                        <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                            {t('clients.show.saga_export.section_types')}
                        </p>
                        <div className="grid gap-2.5">
                            {DOC_TYPES.map(({ key, labelKey }) => (
                                <label
                                    key={key}
                                    className="flex cursor-pointer items-center gap-3 rounded-md border border-transparent px-1 py-0.5 hover:border-border"
                                >
                                    <Checkbox
                                        checked={selected.has(key)}
                                        onCheckedChange={() => toggle(key)}
                                    />
                                    <span className="text-sm">{t(labelKey)}</span>
                                </label>
                            ))}
                        </div>
                    </div>
                </DialogBody>

                <DialogFooter>
                    <Button variant="outline" onClick={() => onOpenChange(false)}>
                        {t('clients.show.saga_export.btn_cancel')}
                    </Button>
                    <Button onClick={handleDownload} disabled={!canDownload}>
                        {t('clients.show.saga_export.btn_download')}
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}