import { zodResolver } from '@hookform/resolvers/zod';
import { Link, router } from '@inertiajs/react';
import { useState } from 'react';
import { Controller, useForm } from 'react-hook-form';
import {
    FormSection,
    FormSwitch,
    TranslatableField,
    TranslationCard,
} from '@/components/admin/form-language';
import GalleryPicker from '@/components/admin/GalleryPicker';
import type { GalleryChange } from '@/components/admin/GalleryPicker';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { productSchema } from '@/lib/validators/product';
import type { ProductFormValues } from '@/lib/validators/product';
import { index, store, update } from '@/routes/admin/products';

type ProductTranslation = {
    name: string;
    slug: string;
    short_description: string;
    description: string;
    flavor_notes: string;
};

type ProductData = {
    id: number;
    product_category_id: number | null;
    origin: string | null;
    variety: string | null;
    fermentation: string | null;
    grade: string | null;
    fat_content: string | number | null;
    bean_size: string | null;
    bean_count: string | null;
    moisture: string | null;
    defect: string | null;
    harvest_season: string | null;
    stock_kg: number | null;
    moq_kg: number | null;
    price_tier: string | null;
    is_active: boolean;
    is_featured: boolean;
    sort_order: number;
    cover_url: string | null;
    gallery?: { id: number; url: string }[];
    translations: {
        id: ProductTranslation;
        en: ProductTranslation;
    };
};

type Category = { id: number; name: string };

type Props = {
    mode: 'create' | 'edit';
    product?: ProductData;
    categories: Category[];
    nextOrder?: number;
};

const translatableFields = [
    'name',
    'slug',
    'short_description',
    'description',
    'flavor_notes',
] as const;

type TranslatableFieldKey = (typeof translatableFields)[number];

const emptyTranslations = (): Record<
    TranslatableFieldKey,
    { id: string; en: string }
> => ({
    name: { id: '', en: '' },
    slug: { id: '', en: '' },
    short_description: { id: '', en: '' },
    description: { id: '', en: '' },
    flavor_notes: { id: '', en: '' },
});

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

const str = (v: string | number | null | undefined) =>
    v === null || v === undefined ? '' : String(v);

export default function ProductForm({ mode, product, categories, nextOrder }: Props) {
    const isCreate = mode === 'create';
    const [gallery, setGallery] = useState<GalleryChange>({ files: [], mediaIds: [], removedIds: [], order: [] });
    const [slugEdited, setSlugEdited] = useState<{ id: boolean; en: boolean }>({
        id: false,
        en: false,
    });

    const {
        register,
        control,
        setValue,
        getValues,
        handleSubmit,
        formState: { isSubmitting },
    } = useForm<ProductFormValues>({
        resolver: zodResolver(productSchema),
        defaultValues: (() => {
            const translations = emptyTranslations();

            if (product) {
                for (const field of translatableFields) {
                    translations[field] = {
                        id: product.translations.id[field] ?? '',
                        en: product.translations.en[field] ?? '',
                    };
                }
            }

            return {
                ...translations,
                product_category_id: product?.product_category_id ? String(product.product_category_id) : '',
                origin: str(product?.origin),
                variety: str(product?.variety),
                fermentation: str(product?.fermentation),
                grade: str(product?.grade),
                fat_content: str(product?.fat_content),
                bean_size: str(product?.bean_size),
                bean_count: str(product?.bean_count),
                moisture: str(product?.moisture),
                defect: str(product?.defect),
                harvest_season: str(product?.harvest_season),
                stock_kg: str(product?.stock_kg),
                moq_kg: str(product?.moq_kg),
                price_tier: str(product?.price_tier),
                is_active: product?.is_active ?? true,
                is_featured: product?.is_featured ?? false,
                sort_order: product?.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: ProductFormValues) => {
        const formData = new FormData();

        translatableFields.forEach((field) => {
            const value = values[field];

            formData.append(`${field}[id]`, value.id ?? '');
            formData.append(`${field}[en]`, value.en ?? '');
        });

        formData.append('product_category_id', values.product_category_id || '');
        formData.append('origin', values.origin || '');
        formData.append('variety', values.variety || '');
        formData.append('fermentation', values.fermentation || '');
        formData.append('grade', values.grade || '');
        formData.append('fat_content', values.fat_content || '');
        formData.append('bean_size', values.bean_size || '');
        formData.append('bean_count', values.bean_count || '');
        formData.append('moisture', values.moisture || '');
        formData.append('defect', values.defect || '');
        formData.append('harvest_season', values.harvest_season || '');
        formData.append('stock_kg', values.stock_kg || '');
        formData.append('moq_kg', values.moq_kg || '');
        formData.append('price_tier', values.price_tier || '');
        formData.append('is_active', values.is_active ? '1' : '0');
        formData.append('is_featured', values.is_featured ? '1' : '0');
        formData.append('sort_order', String(values.sort_order ?? 0));

        gallery.files.forEach((file) => {
            formData.append('gallery[]', file);
        });
        gallery.mediaIds.forEach((id) => {
            formData.append('gallery_media_ids[]', String(id));
        });
        gallery.removedIds.forEach((id) => {
            formData.append('gallery_removed[]', String(id));
        });
        gallery.order.forEach((token) => {
            formData.append('gallery_order[]', token);
        });

        if (isCreate) {
            router.post(store(), formData, { preserveScroll: true });
        } else if (product) {
            formData.append('_method', 'PUT');
            router.post(update(product.id), formData, { preserveScroll: true });
        }
    };

    return (
        <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6">
            <TranslationCard
                title="Konten"
                description="Isi konten per bahasa — pilih tab bahasa di atas, lalu lengkapi field di bawahnya."
            >
                <div className="grid gap-6 sm:items-start lg:grid-cols-2">
                    <Controller
                        control={control}
                        name="name"
                        render={({ field }) => (
                            <TranslatableField
                                label="Nama Produk"
                                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. Cocoa Beans Sulawesi Fermented"
                            />
                        )}
                    />
                    <Controller
                        control={control}
                        name="slug"
                        render={({ field }) => (
                            <TranslatableField
                                label="Slug (otomatis dari nama, bisa diedit)"
                                required
                                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. cocoa-beans-sulawesi-fermented"
                            />
                        )}
                    />
                </div>

                <Controller
                    control={control}
                    name="short_description"
                    render={({ field }) => (
                        <TranslatableField
                            label="Deskripsi Singkat"
                            value={field.value}
                            onChange={field.onChange}
                            type="textarea"
                            placeholder="Ringkasan produk (tampil di kartu)"
                        />
                    )}
                />

                <Controller
                    control={control}
                    name="description"
                    render={({ field }) => (
                        <TranslatableField
                            label="Deskripsi Lengkap"
                            value={field.value}
                            onChange={field.onChange}
                            type="richtext"
                            placeholder="Jelaskan produk secara lengkap..."
                        />
                    )}
                />

                <Controller
                    control={control}
                    name="flavor_notes"
                    render={({ field }) => (
                        <TranslatableField
                            label="Flavor Notes"
                            value={field.value}
                            onChange={field.onChange}
                            placeholder="mis. Chocolatey, nutty, fruity"
                        />
                    )}
                />
            </TranslationCard>

            <FormSection
                title="Spesifikasi Cocoa"
                description="Field non-translatable — origin, varietas, fermentasi, grade, fat content, stok, MOQ. Harga disembunyikan di frontend (RFQ only)."
            >
                <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                    <div className="space-y-2">
                        <Label>Kategori</Label>
                        <Controller
                            control={control}
                            name="product_category_id"
                            render={({ field }) => (
                                <Select value={field.value || undefined} onValueChange={field.onChange}>
                                    <SelectTrigger>
                                        <SelectValue placeholder="— Pilih kategori —" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        {categories.map((c) => (
                                            <SelectItem key={c.id} value={String(c.id)}>
                                                {c.name}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                            )}
                        />
                    </div>
                    <div className="space-y-2">
                        <Label htmlFor="origin">Origin</Label>
                        <Input id="origin" placeholder="mis. Sulawesi, Flores" {...register('origin')} />
                    </div>
                    <div className="space-y-2">
                        <Label htmlFor="variety">Varietas</Label>
                        <Controller
                            control={control}
                            name="variety"
                            render={({ field }) => (
                                <Select value={field.value || undefined} onValueChange={field.onChange}>
                                    <SelectTrigger>
                                        <SelectValue placeholder="— Pilih varietas —" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        {['Forastero', 'Criollo', 'Trinitario', 'Blend'].map((p) => (
                                            <SelectItem key={p} value={p}>
                                                {p}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                            )}
                        />
                    </div>
                    <div className="space-y-2">
                        <Label>Fermentasi</Label>
                        <Controller
                            control={control}
                            name="fermentation"
                            render={({ field }) => (
                                <Select value={field.value || undefined} onValueChange={field.onChange}>
                                    <SelectTrigger>
                                        <SelectValue placeholder="— Pilih fermentasi —" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        {['fermented', 'unfermented', 'light-fermented', 'fully-fermented', 'dried'].map((p) => (
                                            <SelectItem key={p} value={p}>
                                                {p}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                            )}
                        />
                    </div>
                    <div className="space-y-2">
                        <Label htmlFor="grade">Grade</Label>
                        <Input id="grade" placeholder="mis. Grade A / FAQ" {...register('grade')} />
                    </div>
                    <div className="space-y-2">
                        <Label htmlFor="fat_content">Fat Content (%)</Label>
                        <Input id="fat_content" placeholder="mis. 52.5" {...register('fat_content')} />
                    </div>
                    <div className="space-y-2">
                        <Label htmlFor="bean_size">Bean Size</Label>
                        <Input id="bean_size" placeholder="mis. 100-110 beans/100g" {...register('bean_size')} />
                    </div>
                    <div className="space-y-2">
                        <Label htmlFor="bean_count">Bean Count</Label>
                        <Input id="bean_count" placeholder="mis. 95-100" {...register('bean_count')} />
                    </div>
                    <div className="space-y-2">
                        <Label htmlFor="moisture">Moisture</Label>
                        <Input id="moisture" placeholder="mis. 12%" {...register('moisture')} />
                    </div>
                    <div className="space-y-2">
                        <Label htmlFor="defect">Defect</Label>
                        <Input id="defect" placeholder="mis. max 8%" {...register('defect')} />
                    </div>
                    <div className="space-y-2">
                        <Label htmlFor="harvest_season">Harvest Season</Label>
                        <Input id="harvest_season" placeholder="mis. Jun-Sep" {...register('harvest_season')} />
                    </div>
                    <div className="space-y-2">
                        <Label htmlFor="stock_kg">Stok (kg)</Label>
                        <Input id="stock_kg" type="number" min={0} placeholder="0" {...register('stock_kg')} />
                    </div>
                    <div className="space-y-2">
                        <Label htmlFor="moq_kg">MOQ (kg)</Label>
                        <Input id="moq_kg" type="number" min={0} placeholder="100" {...register('moq_kg')} />
                    </div>
                    <div className="space-y-2">
                        <Label htmlFor="price_tier">Price Tier (hidden)</Label>
                        <Input id="price_tier" placeholder="mis. FOB Belawan" {...register('price_tier')} />
                        <p className="text-xs text-muted-foreground">Hanya admin — tidak tampil di frontend.</p>
                    </div>
                </div>
            </FormSection>

            <FormSection title="Pengaturan" description="Status featured, urutan, dan publikasi produk.">
                <div className="grid gap-6 sm:grid-cols-3 sm:items-start">
                    <div className="space-y-2">
                        <Label htmlFor="sort_order">Urutan</Label>
                        <Input
                            id="sort_order"
                            type="number"
                            min={0}
                            placeholder="0"
                            className="w-20 text-center"
                            {...register('sort_order')}
                        />
                        <p className="text-xs text-muted-foreground">Semakin kecil, semakin awal.</p>
                    </div>
                    <Controller
                        control={control}
                        name="is_active"
                        render={({ field }) => (
                            <div className="space-y-2">
                                <Label>Aktif</Label>
                                <FormSwitch
                                    label=""
                                    checked={field.value}
                                    onCheckedChange={field.onChange}
                                    name="is_active"
                                    boxed
                                    showLabel={false}
                                />
                                <p className="text-xs text-muted-foreground">Produk aktif tampil di katalog & Home.</p>
                            </div>
                        )}
                    />
                    <Controller
                        control={control}
                        name="is_featured"
                        render={({ field }) => (
                            <div className="space-y-2">
                                <Label>Featured</Label>
                                <FormSwitch
                                    label=""
                                    checked={field.value}
                                    onCheckedChange={field.onChange}
                                    name="is_featured"
                                    boxed
                                    showLabel={false}
                                />
                                <p className="text-xs text-muted-foreground">Featured tampil di Home (maks 4).</p>
                            </div>
                        )}
                    />
                </div>
            </FormSection>

            <FormSection
                title="Galeri Produk"
                description="Upload hingga 8 gambar — gambar pertama otomatis jadi cover produk. Seret untuk mengatur urutan."
            >
                <GalleryPicker
                    label="Galeri Produk (maks. 8 gambar)"
                    existing={product?.gallery ?? []}
                    max={8}
                    onChange={setGallery}
                />
            </FormSection>

            <div className="flex gap-3">
                <Button type="submit" disabled={isSubmitting}>
                    {isCreate ? 'Simpan Produk' : 'Simpan Perubahan'}
                </Button>
                <Button type="button" variant="outline" asChild>
                    <Link href={index()}>Batal</Link>
                </Button>
            </div>
        </form>
    );
}