import { router, usePage } from '@inertiajs/react';
import { useEffect, useMemo, useRef, useState } from 'react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Icon } from '@/components/ui/icon';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { LoadingButton } from '@/components/ui/loading-button';
import {
    Sheet,
    SheetClose,
    SheetContent,
    SheetDescription,
    SheetFooter,
    SheetHeader,
    SheetTitle,
} from '@/components/ui/sheet';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import {
    SupplierFormGeneralSection,
    SupplierFormLocationSection,
    SupplierFormNotesSection,
} from '@/features/suppliers/components/supplier-form-sheet-sections';
import {
    emptySupplierFormDraft,
    supplierEntityToFormDraft,
    supplierFormDraftToPayload,
    type SupplierFormDraft,
} from '@/features/suppliers/lib/supplier-form-draft';
import type { ClientOption, SupplierFormEntity } from '@/features/suppliers/types';
import { useI18n } from '@/hooks/use-i18n';
import { cn } from '@/lib/utils';

type SupplierFormStep = 'lookup' | 'form';
type SupplierFormTabId = 'general' | 'location' | 'notes';

type AnafLookupResult = {
    name: string;
    trade_register_number: string;
    phone: string;
    address: string;
    city: string;
    county: string;
    country: string;
    is_vat_payer: boolean;
};

type SupplierFormSheetProps = {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    mode: 'create' | 'edit';
    supplier: SupplierFormEntity | null;
    clients: ClientOption[];
    onAfterSave: () => void;
};

function flattenErrors(errors: Record<string, string | string[]>): Record<string, string> {
    const out: Record<string, string> = {};

    for (const [key, value] of Object.entries(errors)) {
        const message = Array.isArray(value) ? value[0] : value;
        if (message) {
            out[key] = message;
        }
    }

    return out;
}

export function SupplierFormSheet({
    open,
    onOpenChange,
    mode,
    supplier,
    clients,
    onAfterSave,
}: SupplierFormSheetProps) {
    const { t } = useI18n();
    const page = usePage<{ errors: Record<string, string | string[]> }>();

    const [submitting, setSubmitting] = useState(false);
    const [tab, setTab] = useState<SupplierFormTabId>('general');
    const [step, setStep] = useState<SupplierFormStep>(mode === 'create' ? 'lookup' : 'form');
    const [cuiInput, setCuiInput] = useState('');
    const [lookupLoading, setLookupLoading] = useState(false);
    const [lookupError, setLookupError] = useState<string | null>(null);
    const [lookupSuccess, setLookupSuccess] = useState(false);
    const cuiRef = useRef<HTMLInputElement>(null);
    const [form, setForm] = useState<SupplierFormDraft>(() =>
        mode === 'edit' && supplier
            ? supplierEntityToFormDraft(supplier)
            : emptySupplierFormDraft(t('suppliers.admin_form.defaults.country')),
    );

    const fieldErrors = useMemo(() => flattenErrors(page.props.errors ?? {}), [page.props.errors]);

    useEffect(() => {
        if (!open) {
            return;
        }

        setTab('general');
        setLookupError(null);
        setLookupSuccess(false);

        if (mode === 'create') {
            setStep('lookup');
            setCuiInput('');
            setForm(emptySupplierFormDraft(t('suppliers.admin_form.defaults.country')));

            return;
        }

        setStep('form');
        if (supplier) {
            setForm(supplierEntityToFormDraft(supplier));
        }
    }, [open, mode, supplier, t]);

    useEffect(() => {
        if (open && step === 'lookup') {
            setTimeout(() => cuiRef.current?.focus(), 50);
        }
    }, [open, step]);

    const handleAnafLookup = async () => {
        const cui = cuiInput.trim();
        if (!cui) {
            return;
        }

        setLookupLoading(true);
        setLookupError(null);
        setLookupSuccess(false);

        try {
            const res = await fetch(`/admin/suppliers/anaf-lookup?cui=${encodeURIComponent(cui)}`);
            const data = (await res.json()) as AnafLookupResult & { error?: string };

            if (!res.ok) {
                setLookupError(data.error ?? t('suppliers.admin_form.anaf_lookup.not_found'));

                return;
            }

            const normalizedCui = cui.replace(/\s/g, '').toUpperCase();

            setForm((prev) => ({
                ...prev,
                name: data.name || prev.name,
                cif: normalizedCui,
                vat_number: data.is_vat_payer ? normalizedCui : prev.vat_number,
                trade_register_number: data.trade_register_number || prev.trade_register_number,
                phone: data.phone || prev.phone,
                address: data.address || prev.address,
                city: data.city || prev.city,
                county: data.county || prev.county,
                country: data.country || prev.country,
                is_vat_payer: data.is_vat_payer,
            }));

            setLookupSuccess(true);
            setStep('form');
        } catch {
            setLookupError(t('suppliers.admin_form.anaf_lookup.service_error'));
        } finally {
            setLookupLoading(false);
        }
    };

    const title =
        step === 'lookup'
            ? t('suppliers.admin_form.anaf_lookup.step_title')
            : mode === 'create'
              ? t('suppliers.admin_form.sheet.title_create')
              : t('suppliers.admin_form.sheet.title_edit');

    const submit = () => {
        const payload = supplierFormDraftToPayload(form);

        const options = {
            preserveScroll: true,
            onStart: () => setSubmitting(true),
            onFinish: () => setSubmitting(false),
            onSuccess: () => {
                onOpenChange(false);
                onAfterSave();
            },
        };

        if (mode === 'create') {
            router.post('/admin/suppliers', payload as Parameters<typeof router.post>[1], options);
        } else if (supplier) {
            router.patch(`/admin/suppliers/${supplier.id}`, payload as Parameters<typeof router.patch>[1], options);
        }
    };

    const errorBanner = useMemo(() => {
        const errs = page.props.errors ?? {};
        const keys = Object.keys(errs);

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

        const first = errs[keys[0] ?? ''];
        const message = Array.isArray(first) ? first[0] : first;

        return (
            <div className="rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
                {message ?? t('suppliers.admin_form.sheet.error_fallback')}
            </div>
        );
    }, [page.props.errors, t]);

    const lookupBody = (
        <div className="flex flex-1 flex-col items-center justify-center px-6 py-10">
            <div className="w-full max-w-sm space-y-6">
                <p className="text-center text-sm text-muted-foreground">
                    {t('suppliers.admin_form.anaf_lookup.step_description')}
                </p>

                <div className="space-y-2">
                    <Label htmlFor="supplier-anaf-cui">{t('suppliers.admin_form.anaf_lookup.cui_label')}</Label>
                    <Input
                        id="supplier-anaf-cui"
                        ref={cuiRef}
                        value={cuiInput}
                        onChange={(e) => {
                            setCuiInput(e.target.value);
                            setLookupError(null);
                        }}
                        placeholder={t('suppliers.admin_form.anaf_lookup.cui_placeholder')}
                        onKeyDown={(e) => {
                            if (e.key === 'Enter') {
                                void handleAnafLookup();
                            }
                        }}
                        autoComplete="off"
                    />
                    {lookupError ? <p className="text-sm text-destructive">{lookupError}</p> : null}
                </div>

                <LoadingButton
                    type="button"
                    className="w-full"
                    loading={lookupLoading}
                    loadingPosition="end"
                    onClick={() => void handleAnafLookup()}
                >
                    {t('suppliers.admin_form.anaf_lookup.search_button')}
                </LoadingButton>

                <div className="text-center">
                    <button
                        type="button"
                        className="text-sm text-muted-foreground underline underline-offset-4 hover:text-foreground"
                        onClick={() => setStep('form')}
                    >
                        {t('suppliers.admin_form.anaf_lookup.skip_link')}
                    </button>
                </div>
            </div>
        </div>
    );

    const sectionProps = {
        form,
        setForm,
        t,
        clients,
        mode,
        errors: fieldErrors,
    };

    const sheetBody = (
        <Tabs
            value={tab}
            onValueChange={(value) => setTab(value as SupplierFormTabId)}
            className="flex min-h-0 flex-1 flex-col gap-0 sm:flex-row sm:items-stretch"
            aria-label={title}
        >
            <TabsList className="h-auto w-full shrink-0 flex-row gap-1.5 rounded-none border-b border-border bg-transparent px-3 py-2 sm:h-auto sm:w-52 sm:flex-col sm:items-stretch sm:justify-start sm:rounded-none sm:border-b-0 sm:border-r sm:px-3 sm:py-3">
                <TabsTrigger value="general" className="w-full flex-none basis-auto">
                    {t('suppliers.admin_form.tabs.general')}
                </TabsTrigger>
                <TabsTrigger value="location" className="w-full flex-none basis-auto">
                    {t('suppliers.admin_form.tabs.location')}
                </TabsTrigger>
                <TabsTrigger value="notes" className="w-full flex-none basis-auto">
                    {t('suppliers.admin_form.tabs.notes')}
                </TabsTrigger>
            </TabsList>

            <div className="flex min-h-0 min-w-0 flex-1 flex-col">
                <TabsContent value="general" className="m-0 mt-0 flex-1 overflow-y-auto p-4 sm:p-5">
                    {mode === 'edit' && supplier ? (
                        <div className="mb-4 flex items-center gap-2 text-sm">
                            <span className="text-muted-foreground">{t('suppliers.admin_form.current_status')}</span>
                            {supplier.active ? (
                                <Badge variant="successSoft">{t('suppliers.admin_index.table.status_active')}</Badge>
                            ) : (
                                <Badge variant="secondary">{t('suppliers.admin_index.table.status_inactive')}</Badge>
                            )}
                        </div>
                    ) : null}
                    <SupplierFormGeneralSection {...sectionProps} />
                </TabsContent>
                <TabsContent value="location" className="m-0 mt-0 flex-1 overflow-y-auto p-4 sm:p-5">
                    <SupplierFormLocationSection {...sectionProps} />
                </TabsContent>
                <TabsContent value="notes" className="m-0 mt-0 flex-1 overflow-y-auto p-4 sm:p-5">
                    <SupplierFormNotesSection {...sectionProps} />
                </TabsContent>
            </div>
        </Tabs>
    );

    return (
        <Sheet open={open} onOpenChange={onOpenChange}>
            <SheetContent
                showCloseButton={false}
                side="right"
                className="h-full w-full gap-0 border-l p-0 sm:max-w-xl lg:max-w-3xl"
            >
                <SheetHeader className="shrink-0 flex-row items-start justify-between gap-4 border-b border-border px-4 py-4">
                    <div className="min-w-0 space-y-1">
                        <SheetTitle className="text-lg">{title}</SheetTitle>
                        <SheetDescription>{t('suppliers.admin_form.sheet.description')}</SheetDescription>
                    </div>
                    <SheetClose
                        className={cn(
                            'inline-flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted-foreground transition-colors',
                            'hover:bg-muted/60 hover:text-foreground',
                            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
                        )}
                    >
                        <Icon icon="material-symbols:close" className="size-5" />
                        <span className="sr-only">{t('suppliers.admin_form.sheet.close_sr')}</span>
                    </SheetClose>
                </SheetHeader>

                <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
                    {lookupSuccess && step === 'form' ? (
                        <div className="shrink-0 border-b border-border px-4 py-3 sm:px-5">
                            <div className="flex items-center gap-2 rounded-md border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-800 dark:border-green-800 dark:bg-green-950 dark:text-green-300">
                                <Icon icon="material-symbols:check-circle-outline" className="size-4 shrink-0" />
                                {t('suppliers.admin_form.anaf_lookup.found_hint')}
                            </div>
                        </div>
                    ) : errorBanner ? (
                        <div className="shrink-0 border-b border-border px-4 py-3 sm:px-5">{errorBanner}</div>
                    ) : null}
                    <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
                        {step === 'lookup' ? lookupBody : sheetBody}
                    </div>
                </div>

                <SheetFooter className="shrink-0 flex-row justify-end gap-2 border-t border-border bg-background px-4 py-4">
                    <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
                        {t('suppliers.admin_form.footer.cancel')}
                    </Button>
                    {step === 'form' ? (
                        <LoadingButton
                            type="button"
                            loading={submitting}
                            loadingPosition="end"
                            disabled={mode === 'edit' && !supplier}
                            onClick={submit}
                        >
                            {mode === 'create'
                                ? t('suppliers.admin_form.footer.create')
                                : t('suppliers.admin_form.footer.save')}
                        </LoadingButton>
                    ) : null}
                </SheetFooter>
            </SheetContent>
        </Sheet>
    );
}