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 FormImageUpload from '@/components/admin/FormImageUpload';
import type { SelectedMedia } from '@/components/admin/FormImageUpload';
import IconPicker from '@/components/admin/IconPicker';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { serviceSchema } from '@/lib/validators/service';
import type { ServiceFormValues } from '@/lib/validators/service';
import { index, store, update } from '@/routes/admin/services';

type ServiceTranslation = {
    name: string;
    slug: string;
    short_description: string;
    description: string;
};

type ServiceData = {
    id: number;
    translations: {
        id: ServiceTranslation;
        en: ServiceTranslation;
    };
    icon: string;
    is_active: boolean;
    sort_order: number;
    cover_url: string | null;
};

type Props = {
    mode: 'create' | 'edit';
    service?: ServiceData;
    nextOrder?: number;
};

const translatableFields = [
    'name',
    'slug',
    'short_description',
    'description',
] 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: '' },
});

/**
 * Slug otomatis dari nama (Str::slug setara): huruf kecil + tanda hubung.
 */
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 ServiceForm({ mode, service, nextOrder }: Props) {
    const isCreate = mode === 'create';
    const [imageFile, setImageFile] = useState<File | null>(null);
    const [imageMedia, setImageMedia] = useState<SelectedMedia | null>(null);
    const [removeImage, setRemoveImage] = useState(false);

    // Slug yang sudah diedit manual tidak akan ditimpa auto-fill dari name.
    // Auto-fill hanya untuk locale yang nama-nya berubah (locale lain tidak disentuh).
    const [slugEdited, setSlugEdited] = useState<{ id: boolean; en: boolean }>({
        id: false,
        en: false,
    });

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

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

            return {
                ...translations,
                icon: service?.icon ?? 'code',
                is_active: service?.is_active ?? true,
                sort_order: service?.sort_order ?? nextOrder ?? 0,
            };
        })(),
    });

    // Auto-fill slug dari name per locale (hanya bila slug belum diedit manual).
    // Set objek lengkap + getValues agar Controller slug re-render real-time
    // (setValue nested path tidak memicu re-render di react-hook-form 7.84).
    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: ServiceFormValues) => {
        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('icon', values.icon);
        formData.append('is_active', values.is_active ? '1' : '0');
        formData.append('sort_order', String(values.sort_order ?? 0));

        if (imageFile) {
            formData.append('image', imageFile);
        } else if (imageMedia) {
            formData.append('image_media_id', String(imageMedia.id));
        } else if (removeImage) {
            formData.append('remove_image', '1');
        }

        if (isCreate) {
            router.post(store(), formData, { preserveScroll: true });
        } else if (service) {
            router.put(update(service.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:grid-cols-3 sm:items-start">
                    <Controller
                        control={control}
                        name="name"
                        render={({ field }) => (
                            <TranslatableField
                                label="Nama Layanan"
                                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. Pengembangan Website"
                            />
                        )}
                    />
                    <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;

                                    // Perubahan slug yang TIDAK berasal dari auto-fill = edit manual.
                                    // (syncSlug hanya dipanggil saat nama berubah, jadi slug yang
                                    // berubah tanpa nama berubah pasti diketik user.)
                                    for (const locale of [
                                        'id',
                                        'en',
                                    ] as const) {
                                        if (next[locale] !== prev[locale]) {
                                            setSlugEdited((current) => ({
                                                ...current,
                                                [locale]: true,
                                            }));
                                        }
                                    }

                                    field.onChange(next);
                                }}
                                placeholder="mis. pengembangan-website"
                            />
                        )}
                    />
                </div>

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

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

            <FormSection
                title="Pengaturan"
                description="Ikon, urutan tampilan, dan status publikasi layanan."
            >
                <div className="grid gap-6 sm:grid-cols-3 sm:items-start">
                    <Controller
                        control={control}
                        name="icon"
                        render={({ field }) => (
                            <IconPicker
                                value={field.value ?? ''}
                                onChange={field.onChange}
                            />
                        )}
                    />
                    <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 angkanya, semakin awal posisinya.
                        </p>
                    </div>
                    <Controller
                        control={control}
                        name="is_active"
                        render={({ field }) => (
                            <div className="space-y-2">
                                <Label htmlFor="is_active">Aktif</Label>
                                <FormSwitch
                                    label=""
                                    checked={field.value}
                                    onCheckedChange={field.onChange}
                                    name="is_active"
                                    boxed
                                    showLabel={false}
                                />
                                <p className="text-xs text-muted-foreground">
                                    Layanan aktif ditampilkan di halaman Layanan
                                    & Home.
                                </p>
                            </div>
                        )}
                    />
                </div>
            </FormSection>

            <FormSection
                title="Media"
                description="Gambar cover layanan (opsional)."
            >
                <div className="max-w-sm">
                    <FormImageUpload
                        label="Gambar Cover (opsional)"
                        existingUrl={service?.cover_url}
                        selectedMedia={imageMedia}
                        onChange={setImageFile}
                        onSelectMedia={setImageMedia}
                        onClear={() => setRemoveImage(true)}
                        showLibraryButton={false}
                        hint="PNG, JPG, atau WEBP — maks. 4 MB"
                    />
                </div>
            </FormSection>

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