import { zodResolver } from '@hookform/resolvers/zod';
import { router } from '@inertiajs/react';
import { useState } from 'react';
import { Controller, useForm } from 'react-hook-form';
import { toast } from 'sonner';
import {
    FormLanguageTabs,
    FormSwitch,
    TranslatableField,
} from '@/components/admin/form-language';
import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { productCategorySchema } from '@/lib/validators/product-category';
import type { ProductCategoryFormValues } from '@/lib/validators/product-category';

type Category = {
    id: number;
    is_active: boolean;
    sort_order: number;
    translations: {
        id: { name: string; slug: string; description: string };
        en: { name: string; slug: string; description: string };
    };
};

type Props = {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    category: Category | null;
    nextOrder?: number;
};

const toSlug = (value: string) =>
    value
        .toLowerCase()
        .normalize('NFD')
        .replace(/[\u0300-\u036f]/g, '')
        .replace(/[^a-z0-9\s-]/g, '')
        .trim()
        .replace(/[\s_]+/g, '-')
        .replace(/-+/g, '-');

export default function ProductCategoryDialog({ open, onOpenChange, category, nextOrder }: Props) {
    const isEdit = !!category;
    const [slugEdited, setSlugEdited] = useState<{ id: boolean; en: boolean }>({
        id: false,
        en: false,
    });

    const {
        register,
        control,
        setValue,
        getValues,
        handleSubmit,
        formState: { isSubmitting },
    } = useForm<ProductCategoryFormValues>({
        resolver: zodResolver(productCategorySchema),
        defaultValues: {
            name: {
                id: category?.translations.id.name ?? '',
                en: category?.translations.en.name ?? '',
            },
            slug: {
                id: category?.translations.id.slug ?? '',
                en: category?.translations.en.slug ?? '',
            },
            description: {
                id: category?.translations.id.description ?? '',
                en: category?.translations.en.description ?? '',
            },
            is_active: category?.is_active ?? true,
            sort_order: category?.sort_order ?? nextOrder ?? 0,
        },
    });

    const syncSlug = (locale: 'id' | 'en', nameValue: string) => {
        if (slugEdited[locale]) {
            return;
        }

        const current = getValues('slug');

        setValue('slug', { ...current, [locale]: toSlug(nameValue) }, { shouldValidate: false });
    };

    const onSubmit = (values: ProductCategoryFormValues) => {
        if (!values.name.id.trim()) {
            toast.error('Nama kategori (Indonesia) wajib diisi.');

            return;
        }

        if (!values.name.en.trim()) {
            toast.error('Nama kategori (English) wajib diisi. Silakan pindah ke tab English.');
            const tabList = document.querySelector('[aria-label="Bahasa konten"]');
            const triggers = tabList?.querySelectorAll<HTMLElement>('[role="tab"]');
            triggers?.[1]?.click();

            return;
        }

        const payload = {
            name: values.name,
            slug: values.slug,
            description: values.description,
            is_active: values.is_active,
            sort_order: values.sort_order ?? 0,
        };

        const opts = {
            preserveScroll: true,
            onSuccess: () => {
                onOpenChange(false);
            },
        };

        if (isEdit && category) {
            router.put(`/admin/product-categories/${category.id}`, payload, opts);
        } else {
            router.post('/admin/product-categories', payload, opts);
        }
    };

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>{isEdit ? 'Ubah Kategori Produk' : 'Tambah Kategori Produk'}</DialogTitle>
                    <DialogDescription>
                        Kategori dipakai untuk mengelompokkan produk cocoa (Green Bean, Single Origin, dll).
                    </DialogDescription>
                </DialogHeader>

                <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
                    <FormLanguageTabs>
                        <Controller
                            control={control}
                            name="name"
                            render={({ field }) => (
                                <TranslatableField
                                    label="Nama Kategori"
                                    required
                                    value={field.value}
                                    onChange={(next) => {
                                        const prev = field.value;

                                        if (prev.id !== next.id) {
                                            syncSlug('id', next.id);
                                        }

                                        if (prev.en !== next.en) {
                                            syncSlug('en', next.en);
                                        }

                                        field.onChange(next);
                                    }}
                                    placeholder="mis. Green Bean"
                                />
                            )}
                        />

                        <Controller
                            control={control}
                            name="slug"
                            render={({ field }) => (
                                <TranslatableField
                                    label="Slug (otomatis dari nama, bisa diedit)"
                                    value={field.value}
                                    onChange={(next) => {
                                        const prev = field.value;

                                        for (const locale of ['id', 'en'] as const) {
                                            if (next[locale] !== prev[locale]) {
                                                setSlugEdited((current) => ({
                                                    ...current,
                                                    [locale]: true,
                                                }));
                                            }
                                        }

                                        field.onChange(next);
                                    }}
                                    placeholder="mis. green-bean"
                                />
                            )}
                        />

                        <Controller
                            control={control}
                            name="description"
                            render={({ field }) => (
                                <TranslatableField
                                    label="Deskripsi"
                                    value={field.value}
                                    onChange={field.onChange}
                                    type="textarea"
                                    placeholder="Deskripsi singkat kategori..."
                                />
                            )}
                        />
                    </FormLanguageTabs>

                    <div className="grid gap-4 sm:grid-cols-2 sm:items-start">
                        <div className="space-y-2">
                            <Label htmlFor="sort_order">Urutan</Label>
                            <Input
                                id="sort_order"
                                type="number"
                                min={0}
                                placeholder="0"
                                {...register('sort_order')}
                            />
                        </div>
                        <Controller
                            control={control}
                            name="is_active"
                            render={({ field }) => (
                                <FormSwitch
                                    label="Aktif"
                                    description="Kategori aktif tampil di katalog."
                                    checked={field.value}
                                    onCheckedChange={field.onChange}
                                    name="is_active"
                                />
                            )}
                        />
                    </div>

                    <DialogFooter>
                        <Button
                            type="button"
                            variant="outline"
                            onClick={() => onOpenChange(false)}
                        >
                            Batal
                        </Button>
                        <Button type="submit" disabled={isSubmitting}>
                            {isEdit ? 'Simpan Perubahan' : 'Tambah Kategori'}
                        </Button>
                    </DialogFooter>
                </form>
            </DialogContent>
        </Dialog>
    );
}