import { useForm } from '@inertiajs/react';
import { useEffect } from 'react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { LoadingButton } from '@/components/ui/loading-button';
import { Switch } from '@/components/ui/switch';
import {
    Sheet,
    SheetClose,
    SheetContent,
    SheetDescription,
    SheetFooter,
    SheetHeader,
    SheetTitle,
} from '@/components/ui/sheet';
import type { CurrencyFormEntity } from '@/features/currencies/types';
import { useI18n } from '@/hooks/use-i18n';

type FormData = {
    code: string;
    name: string;
    symbol: string;
    decimal_places: number;
    sort_order: number;
    is_default: boolean;
    is_active: boolean;
};

type CurrencyFormSheetProps = {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    mode: 'create' | 'edit';
    currency: CurrencyFormEntity | null;
    onAfterSave: () => void;
};

const emptyForm: FormData = {
    code: '',
    name: '',
    symbol: '',
    decimal_places: 2,
    sort_order: 0,
    is_default: false,
    is_active: true,
};

export function CurrencyFormSheet({ open, onOpenChange, mode, currency, onAfterSave }: CurrencyFormSheetProps) {
    const { t } = useI18n();
    const form = useForm<FormData>({ ...emptyForm });

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

        if (mode === 'edit' && currency) {
            form.setData({
                code:           currency.code,
                name:           currency.name,
                symbol:         currency.symbol,
                decimal_places: currency.decimal_places,
                sort_order:     currency.sort_order,
                is_default:     currency.is_default,
                is_active:      currency.is_active,
            });

            return;
        }

        form.setData({ ...emptyForm });
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [open, mode, currency?.id]);

    const submit = () => {
        if (mode === 'create') {
            form.post('/settings/currencies', {
                preserveScroll: true,
                onSuccess: () => {
                    form.reset();
                    onAfterSave();
                },
            });

            return;
        }

        if (currency) {
            form.patch(`/settings/currencies/${currency.id}`, {
                preserveScroll: true,
                onSuccess: () => {
                    onAfterSave();
                },
            });
        }
    };

    const title =
        mode === 'create'
            ? t('settings.currencies.form.create_title')
            : t('settings.currencies.form.edit_title');
    const description =
        mode === 'create'
            ? t('settings.currencies.form.create_description')
            : t('settings.currencies.form.edit_description');

    return (
        <Sheet open={open} onOpenChange={onOpenChange}>
            <SheetContent className="flex w-full flex-col gap-0 overflow-y-auto sm:max-w-lg">
                <SheetHeader className="space-y-1 border-b px-6 py-4 text-left">
                    <SheetTitle>{title}</SheetTitle>
                    <SheetDescription>{description}</SheetDescription>
                </SheetHeader>

                <div className="flex flex-1 flex-col gap-4 px-6 py-4">
                    {mode === 'edit' && currency ? (
                        <div className="flex items-center gap-2 text-sm">
                            <span className="text-muted-foreground">{t('settings.currencies.form.current_status')}</span>
                            {currency.is_active ? (
                                <Badge variant="successSoft">{t('settings.currencies.table.status_active')}</Badge>
                            ) : (
                                <Badge variant="secondary">{t('settings.currencies.table.status_inactive')}</Badge>
                            )}
                            {currency.is_default ? (
                                <Badge variant="outline">{t('settings.currencies.table.badge_default')}</Badge>
                            ) : null}
                        </div>
                    ) : null}

                    <div className="grid grid-cols-2 gap-4">
                        <div className="space-y-2">
                            <Label htmlFor="currency-code">{t('settings.currencies.form.code_label')}</Label>
                            <Input
                                id="currency-code"
                                value={form.data.code}
                                onChange={(e) => form.setData('code', e.target.value.toUpperCase())}
                                disabled={form.processing}
                                autoComplete="off"
                                maxLength={3}
                                placeholder={t('settings.currencies.form.code_placeholder')}
                            />
                            {form.errors.code ? (
                                <p className="text-xs text-destructive">{form.errors.code}</p>
                            ) : null}
                        </div>

                        <div className="space-y-2">
                            <Label htmlFor="currency-symbol">{t('settings.currencies.form.symbol_label')}</Label>
                            <Input
                                id="currency-symbol"
                                value={form.data.symbol}
                                onChange={(e) => form.setData('symbol', e.target.value)}
                                disabled={form.processing}
                                autoComplete="off"
                                maxLength={8}
                                placeholder={t('settings.currencies.form.symbol_placeholder')}
                            />
                            {form.errors.symbol ? (
                                <p className="text-xs text-destructive">{form.errors.symbol}</p>
                            ) : null}
                        </div>
                    </div>

                    <div className="space-y-2">
                        <Label htmlFor="currency-name">{t('settings.currencies.form.name_label')}</Label>
                        <Input
                            id="currency-name"
                            value={form.data.name}
                            onChange={(e) => form.setData('name', e.target.value)}
                            disabled={form.processing}
                            placeholder={t('settings.currencies.form.name_placeholder')}
                        />
                        {form.errors.name ? (
                            <p className="text-xs text-destructive">{form.errors.name}</p>
                        ) : null}
                    </div>

                    <div className="grid grid-cols-2 gap-4">
                        <div className="space-y-2">
                            <Label htmlFor="currency-decimals">{t('settings.currencies.form.decimal_places_label')}</Label>
                            <Input
                                id="currency-decimals"
                                type="number"
                                min={0}
                                max={4}
                                value={form.data.decimal_places}
                                onChange={(e) =>
                                    form.setData('decimal_places', Number.parseInt(e.target.value, 10) || 0)
                                }
                                disabled={form.processing}
                            />
                            {form.errors.decimal_places ? (
                                <p className="text-xs text-destructive">{form.errors.decimal_places}</p>
                            ) : null}
                        </div>

                        <div className="space-y-2">
                            <Label htmlFor="currency-sort">{t('settings.currencies.form.sort_order_label')}</Label>
                            <Input
                                id="currency-sort"
                                type="number"
                                min={0}
                                max={65535}
                                value={form.data.sort_order}
                                onChange={(e) =>
                                    form.setData('sort_order', Number.parseInt(e.target.value, 10) || 0)
                                }
                                disabled={form.processing}
                            />
                            {form.errors.sort_order ? (
                                <p className="text-xs text-destructive">{form.errors.sort_order}</p>
                            ) : null}
                        </div>
                    </div>

                    <div className="flex items-center justify-between rounded-lg border px-3 py-2">
                        <div className="space-y-0.5">
                            <Label htmlFor="currency-default">{t('settings.currencies.form.is_default_label')}</Label>
                            <p className="text-xs text-muted-foreground">
                                {t('settings.currencies.form.is_default_hint')}
                            </p>
                        </div>
                        <Switch
                            id="currency-default"
                            checked={form.data.is_default}
                            onCheckedChange={(v) => form.setData('is_default', v)}
                            disabled={form.processing || (mode === 'edit' && Boolean(currency?.is_default))}
                        />
                    </div>

                    {mode === 'create' ? (
                        <div className="flex items-center justify-between rounded-lg border px-3 py-2">
                            <div className="space-y-0.5">
                                <Label htmlFor="currency-active">{t('settings.currencies.form.is_active_label')}</Label>
                                <p className="text-xs text-muted-foreground">
                                    {t('settings.currencies.form.is_active_hint')}
                                </p>
                            </div>
                            <Switch
                                id="currency-active"
                                checked={form.data.is_active}
                                onCheckedChange={(v) => form.setData('is_active', v)}
                                disabled={form.processing}
                            />
                        </div>
                    ) : null}
                </div>

                <SheetFooter className="mt-auto flex-row justify-end gap-2 border-t px-6 py-4">
                    <SheetClose asChild>
                        <Button type="button" variant="outline" disabled={form.processing}>
                            {t('settings.currencies.form.discard')}
                        </Button>
                    </SheetClose>
                    <LoadingButton type="button" loading={form.processing} onClick={submit}>
                        {t('settings.currencies.form.save')}
                    </LoadingButton>
                </SheetFooter>
            </SheetContent>
        </Sheet>
    );
}