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 { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { certificationSchema } from '@/lib/validators/certification';
import type { CertificationFormValues } from '@/lib/validators/certification';

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

type CertData = {
    id: number;
    name: string;
    issuer: string | null;
    certificate_no: string | null;
    issued_at: string | null;
    expired_at: string | null;
    pdf_path: string | null;
    is_active: boolean;
    sort_order: number;
    cover_url: string | null;
    translations: { id: CertTranslation; en: CertTranslation };
};

type Props = {
    mode: 'create' | 'edit';
    certification?: CertData;
    nextOrder?: 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 str = (v: string | null | undefined) => v ?? '';

export default function CertificationForm({ mode, certification, 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);

    const [slugEdited, setSlugEdited] = useState({ id: false, en: false });

    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 {
        register,
        control,
        setValue,
        getValues,
        handleSubmit,
        formState: { isSubmitting },
    } = useForm<CertificationFormValues>({
        resolver: zodResolver(certificationSchema),
        defaultValues: (() => {
            const translations = emptyTranslations();

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

            return {
                ...translations,
                name: certification?.name ?? '',
                issuer: str(certification?.issuer),
                certificate_no: str(certification?.certificate_no),
                issued_at: str(certification?.issued_at),
                expired_at: str(certification?.expired_at),
                pdf_path: str(certification?.pdf_path),
                is_active: certification?.is_active ?? true,
                sort_order: certification?.sort_order ?? nextOrder ?? 0,
            };
        })(),
    });

    const onSubmit = (values: CertificationFormValues) => {
        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('name', values.name);
        formData.append('issuer', values.issuer || '');
        formData.append('certificate_no', values.certificate_no || '');
        formData.append('issued_at', values.issued_at || '');
        formData.append('expired_at', values.expired_at || '');
        formData.append('pdf_path', values.pdf_path || '');
        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('/admin/certifications', formData, { preserveScroll: true });
        } else if (certification) {
            router.put(`/admin/certifications/${certification.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 Sertifikasi"
                            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. Sertifikat Halal"
                        />
                    )}
                />
                <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. sertifikat-halal"
                        />
                    )}
                />
                <Controller
                    control={control}
                    name="description"
                    render={({ field }) => (
                        <TranslatableField
                            label="Deskripsi"
                            value={field.value}
                            onChange={field.onChange}
                            type="richtext"
                            placeholder="mis. Bersertifikat Halal MUI"
                        />
                    )}
                />
            </TranslationCard>

            <FormSection title="Data Sertifikat" description="Nama internal, penerbit, nomor, dan masa berlaku.">
                <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                    <div className="space-y-2">
                        <Label htmlFor="name">Nama (internal) *</Label>
                        <Input id="name" placeholder="mis. HALAL" {...register('name')} />
                    </div>
                    <div className="space-y-2">
                        <Label htmlFor="issuer">Penerbit</Label>
                        <Input id="issuer" placeholder="mis. MUI" {...register('issuer')} />
                    </div>
                    <div className="space-y-2">
                        <Label htmlFor="certificate_no">No. Sertifikat</Label>
                        <Input id="certificate_no" placeholder="mis. HAL-2024-001" {...register('certificate_no')} />
                    </div>
                    <div className="space-y-2">
                        <Label htmlFor="issued_at">Terbit</Label>
                        <Input id="issued_at" type="date" {...register('issued_at')} />
                    </div>
                    <div className="space-y-2">
                        <Label htmlFor="expired_at">Kadaluarsa</Label>
                        <Input id="expired_at" type="date" {...register('expired_at')} />
                    </div>
                    <div className="space-y-2">
                        <Label htmlFor="pdf_path">Link PDF</Label>
                        <Input id="pdf_path" placeholder="https://..." {...register('pdf_path')} />
                    </div>
                </div>
            </FormSection>

            <FormSection title="Pengaturan" description="Urutan tampilan dan status publikasi.">
                <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')}
                        />
                    </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="Sertifikat" description="Gambar sertifikat PNG (opsional) — tampil di halaman Sertifikasi & detail produk.">
                <div className="max-w-sm">
                    <FormImageUpload
                        label="Sertifikat PNG (opsional)"
                        existingUrl={certification?.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 Sertifikasi' : 'Simpan Perubahan'}
                </Button>
                <Button type="button" variant="outline" asChild>
                    <Link href="/admin/certifications">Batal</Link>
                </Button>
            </div>
        </form>
    );
}