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 { VatRateFormEntity } from '@/features/vat-rates/types';
import { useI18n } from '@/hooks/use-i18n';

type FormData = {
    code: string;
    name: string;
    rate_percent: string;
    sort_order: number;
    is_active: boolean;
};

type VatRateFormSheetProps = {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    mode: 'create' | 'edit';
    vatRate: VatRateFormEntity | null;
    onAfterSave: () => void;
};

const emptyForm: FormData = {
    code: '',
    name: '',
    rate_percent: '',
    sort_order: 0,
    is_active: true,
};

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

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

        if (mode === 'edit' && vatRate) {
            form.setData({
                code: vatRate.code,
                name: vatRate.name,
                rate_percent: vatRate.rate_percent,
                sort_order: vatRate.sort_order,
                is_active: vatRate.is_active,
            });

            return;
        }

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

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

            return;
        }

        if (vatRate) {
            form.patch(`/settings/vat-rates/${vatRate.id}`, {
                preserveScroll: true,
                onSuccess: () => {
                    onAfterSave();
                },
            });
        }
    };

    const title = mode === 'create' ? t('settings.vat_rates.form.create_title') : t('settings.vat_rates.form.edit_title');
    const description =
        mode === 'create'
            ? t('settings.vat_rates.form.create_description')
            : t('settings.vat_rates.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' && vatRate ? (
                        <div className="flex items-center gap-2 text-sm">
                            <span className="text-muted-foreground">{t('settings.vat_rates.form.current_status')}</span>
                            {vatRate.is_active ? (
                                <Badge variant="successSoft">{t('settings.vat_rates.table.status_active')}</Badge>
                            ) : (
                                <Badge variant="secondary">{t('settings.vat_rates.table.status_inactive')}</Badge>
                            )}
                        </div>
                    ) : null}

                    <div className="space-y-2">
                        <Label htmlFor="vat-code">{t('settings.vat_rates.form.code_label')}</Label>
                        <Input
                            id="vat-code"
                            value={form.data.code}
                            onChange={(e) => form.setData('code', e.target.value)}
                            disabled={form.processing}
                            autoComplete="off"
                            placeholder={t('settings.vat_rates.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="vat-name">{t('settings.vat_rates.form.name_label')}</Label>
                        <Input
                            id="vat-name"
                            value={form.data.name}
                            onChange={(e) => form.setData('name', e.target.value)}
                            disabled={form.processing}
                            placeholder={t('settings.vat_rates.form.name_placeholder')}
                        />
                        {form.errors.name ? <p className="text-xs text-destructive">{form.errors.name}</p> : null}
                    </div>

                    <div className="space-y-2">
                        <Label htmlFor="vat-rate">{t('settings.vat_rates.form.rate_label')}</Label>
                        <Input
                            id="vat-rate"
                            type="text"
                            inputMode="decimal"
                            value={form.data.rate_percent}
                            onChange={(e) => form.setData('rate_percent', e.target.value)}
                            disabled={form.processing}
                            placeholder={t('settings.vat_rates.form.rate_placeholder')}
                        />
                        {form.errors.rate_percent ? (
                            <p className="text-xs text-destructive">{form.errors.rate_percent}</p>
                        ) : null}
                    </div>

                    <div className="space-y-2">
                        <Label htmlFor="vat-sort">{t('settings.vat_rates.form.sort_order_label')}</Label>
                        <Input
                            id="vat-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>

                    {mode === 'create' ? (
                        <div className="flex items-center justify-between rounded-lg border px-3 py-2">
                            <div className="space-y-0.5">
                                <Label htmlFor="vat-active">{t('settings.vat_rates.form.active_on_create_label')}</Label>
                                <p className="text-xs text-muted-foreground">
                                    {t('settings.vat_rates.form.active_on_create_hint')}
                                </p>
                            </div>
                            <Switch
                                id="vat-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.vat_rates.form.discard')}
                        </Button>
                    </SheetClose>
                    <LoadingButton type="button" loading={form.processing} onClick={submit}>
                        {t('settings.vat_rates.form.save')}
                    </LoadingButton>
                </SheetFooter>
            </SheetContent>
        </Sheet>
    );
}