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 IconPicker from '@/components/admin/IconPicker';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { processStepSchema } from '@/lib/validators/process-step';
import type { ProcessStepFormValues } from '@/lib/validators/process-step';

type StepTranslation = { title: string; slug: string; description: string };

type GalleryItem = { id: number; url: string };

type StepData = {
    id: number;
    step_number: number;
    icon: string | null;
    is_active: boolean;
    sort_order: number;
    gallery?: GalleryItem[];
    translations: { id: StepTranslation; en: StepTranslation };
};

type Props = {
    mode: 'create' | 'edit';
    step?: StepData;
    nextOrder?: number;
    nextStep?: number;
};

const translatableFields = ['title', 'slug', 'description'] as const;

type TranslatableFieldKey = (typeof translatableFields)[number];

const emptyTranslations = (): Record<TranslatableFieldKey, { id: string; en: string }> => ({
    title: { id: '', en: '' },
    slug: { id: '', en: '' },
    description: { 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, '-');

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

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

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

            return {
                ...translations,
                step_number: step?.step_number ?? nextStep ?? 1,
                icon: step?.icon ?? '',
                is_active: step?.is_active ?? true,
                sort_order: step?.sort_order ?? nextOrder ?? 0,
            };
        })(),
    });

    const onSubmit = (values: ProcessStepFormValues) => {
        const formData = new FormData();
        (['title', 'slug', 'description'] as const).forEach((field) => {
            const v = (values as any)[field] as { id: string; en: string };
            formData.append(`${field}[id]`, v.id ?? '');
            formData.append(`${field}[en]`, v.en ?? '');
        });
        formData.append('step_number', String(values.step_number));
        formData.append('icon', values.icon || '');
        formData.append('is_active', values.is_active ? '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('/admin/process-steps', formData, { preserveScroll: true });
        } else if (step) {
            formData.append('_method', 'PUT');
            router.post(`/admin/process-steps/${step.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."
            >
                <Controller
                    control={control}
                    name="title"
                    render={({ field }) => (
                        <TranslatableField
                            label="Judul Step"
                            required
                            value={field.value}
                            onChange={(next) => {
                                const prev = field.value;

                                if (!slugEdited.id && prev.id !== next.id) {
                                    setValue('slug', { ...getValues('slug'), id: toSlug(next.id) }, { shouldValidate: false });
                                }

                                if (!slugEdited.en && prev.en !== next.en) {
                                    setValue('slug', { ...getValues('slug'), en: toSlug(next.en) }, { shouldValidate: false });
                                }

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

                                setSlugEdited({
                                    id: slugEdited.id || next.id !== prev.id,
                                    en: slugEdited.en || next.en !== prev.en,
                                });
                                field.onChange(next);
                            }}
                            placeholder="mis. budidaya"
                        />
                    )}
                />
                <Controller
                    control={control}
                    name="description"
                    render={({ field }) => (
                        <TranslatableField
                            label="Deskripsi"
                            value={field.value}
                            onChange={field.onChange}
                            type="richtext"
                            placeholder="Kalimat pendek di bawah judul step..."
                        />
                    )}
                />
            </TranslationCard>

            <FormSection title="Pengaturan" description="Nomor step, ikon, urutan, dan status publikasi.">
                <div className="grid gap-6 sm:grid-cols-3 sm:items-start">
                    <div className="space-y-2">
                        <Label htmlFor="step_number">Nomor Step *</Label>
                        <Input
                            id="step_number"
                            type="number"
                            min={1}
                            max={20}
                            className="w-20 text-center"
                            {...register('step_number')}
                        />
                    </div>
                    <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')}
                        />
                    </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}
                                />
                            </div>
                        )}
                    />
                </div>
            </FormSection>

            <FormSection title="Dokumentasi Proses" description="Galeri foto proses (maks. 12 gambar) — tampil di halaman /proses-kami dan detail step. Seret untuk mengatur urutan.">
                <GalleryPicker label="Dokumentasi Proses (maks. 12 gambar)" existing={step?.gallery ?? []} max={12} onChange={setGallery} />
            </FormSection>

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