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 { heroSectionSchema } from '@/lib/validators/hero-section';
import type { HeroSectionFormValues } from '@/lib/validators/hero-section';
import { index, store, update } from '@/routes/admin/heroes';

type HeroTranslation = {
    title: string;
    subtitle: string;
    description: string;
    badge: string;
    cta_label: string;
    cta_secondary_label: string;
    cta_link: string;
    cta_secondary_link: string;
    usp1: string;
    usp2: string;
    usp3: string;
};

type HeroData = {
    id: number;
    translations: {
        id: HeroTranslation;
        en: HeroTranslation;
    };
    is_active: boolean;
    sort_order: number;
    cover_url: string | null;
};

type Props = {
    mode: 'create' | 'edit';
    hero?: HeroData;
    nextOrder?: number;
};

const translatableFields = [
    'title',
    'subtitle',
    'description',
    'badge',
    'cta_label',
    'cta_secondary_label',
    'cta_link',
    'cta_secondary_link',
    'usp1',
    'usp2',
    'usp3',
] as const;

type TranslatableFieldKey = (typeof translatableFields)[number];

const emptyTranslations = (): Record<
    TranslatableFieldKey,
    { id: string; en: string }
> => ({
    title: { id: '', en: '' },
    subtitle: { id: '', en: '' },
    description: { id: '', en: '' },
    badge: { id: '', en: '' },
    cta_label: { id: '', en: '' },
    cta_secondary_label: { id: '', en: '' },
    cta_link: { id: '', en: '' },
    cta_secondary_link: { id: '', en: '' },
    usp1: { id: '', en: '' },
    usp2: { id: '', en: '' },
    usp3: { id: '', en: '' },
});

export default function HeroForm({ mode, hero, nextOrder }: Props) {
    const isCreate = mode === 'create';
    const [imageFile, setImageFile] = useState<File | null>(null);
    const [imageMedia, setImageMedia] = useState<SelectedMedia | null>(null);
    const [imageCleared, setImageCleared] = useState(false);

    const {
        register,
        control,
        handleSubmit,
        formState: { isSubmitting },
    } = useForm<HeroSectionFormValues>({
        resolver: zodResolver(heroSectionSchema),
        defaultValues: (() => {
            const translations = emptyTranslations();

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

            return {
                ...translations,
                is_active: hero?.is_active ?? true,
                sort_order: hero?.sort_order ?? nextOrder ?? 0,
            };
        })(),
    });

    const onSubmit = (values: HeroSectionFormValues) => {
        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('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 (!isCreate && imageCleared) {
            formData.append('remove_image', '1');
        }

        if (isCreate) {
            router.post(store(), formData, { preserveScroll: true });
        } else if (hero) {
            router.put(update(hero.id), formData, { preserveScroll: true });
        }
    };

    return (
        <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6">
            <FormSection
                title="Thumbnail"
                description="Gambar background slide hero. PNG, JPG, atau WEBP — maks. 4 MB."
            >
                <div className="w-full lg:w-1/3">
                    <FormImageUpload
                        label="Thumbnail"
                        existingUrl={imageCleared ? null : hero?.cover_url}
                        selectedMedia={imageMedia}
                        onChange={setImageFile}
                        onSelectMedia={setImageMedia}
                        onClear={() => setImageCleared(true)}
                        showLibraryButton={false}
                        showClearButton={false}
                        aspectRatio="video"
                    />
                </div>
            </FormSection>

            <TranslationCard
                title="Konten"
                description="Isi slide per bahasa — pilih tab bahasa di atas, lalu lengkapi field di bawahnya."
            >
                <div className="grid gap-6 lg:grid-cols-2">
                    <Controller
                        control={control}
                        name="title"
                        render={({ field }) => (
                            <TranslatableField
                                label="Judul"
                                required
                                value={field.value}
                                onChange={field.onChange}
                                placeholder="mis. Bangun Bisnis Anda Bersama Kami"
                            />
                        )}
                    />
                    <Controller
                        control={control}
                        name="badge"
                        render={({ field }) => (
                            <TranslatableField
                                label="Badge"
                                value={field.value}
                                onChange={field.onChange}
                                placeholder="mis. Mitra Terpercaya Sejak 2015"
                            />
                        )}
                    />
                </div>

                <Controller
                    control={control}
                    name="subtitle"
                    render={({ field }) => (
                        <TranslatableField
                            label="Subjudul"
                            value={field.value}
                            onChange={field.onChange}
                            type="richtext"
                            placeholder="Tulis subjudul singkat yang memperkuat judul..."
                        />
                    )}
                />

                <Controller
                    control={control}
                    name="description"
                    render={({ field }) => (
                        <TranslatableField
                            label="Deskripsi"
                            value={field.value}
                            onChange={field.onChange}
                            type="richtext"
                            placeholder="Jelaskan nilai utama / ajakan pada slide ini..."
                        />
                    )}
                />

                <div className="grid gap-6 lg:grid-cols-3">
                    <Controller
                        control={control}
                        name="usp1"
                        render={({ field }) => (
                            <TranslatableField label="USP 1" value={field.value} onChange={field.onChange} placeholder="mis. 100% Cocoa Indonesia" />
                        )}
                    />
                    <Controller
                        control={control}
                        name="usp2"
                        render={({ field }) => (
                            <TranslatableField label="USP 2" value={field.value} onChange={field.onChange} placeholder="mis. Kualitas Terjamin" />
                        )}
                    />
                    <Controller
                        control={control}
                        name="usp3"
                        render={({ field }) => (
                            <TranslatableField label="USP 3" value={field.value} onChange={field.onChange} placeholder="mis. Melayani Pasar Global" />
                        )}
                    />
                </div>

                <div className="grid gap-6 lg:grid-cols-2">
                    <div className="space-y-4">
                        <Controller
                            control={control}
                            name="cta_label"
                            render={({ field }) => (
                                <TranslatableField
                                    label="Label Tombol CTA"
                                    value={field.value}
                                    onChange={field.onChange}
                                    placeholder="mis. Mulai Sekarang"
                                />
                            )}
                        />
                        <Controller
                            control={control}
                            name="cta_link"
                            render={({ field }) => (
                                <TranslatableField
                                    label="Link Tombol CTA"
                                    value={field.value}
                                    onChange={field.onChange}
                                    placeholder="/kontak atau https://..."
                                    hint="Path relatif (mis. /kontak) otomatis memakai bahasa aktif; atau tulis URL lengkap (https://...) untuk link eksternal / target beda per bahasa."
                                />
                            )}
                        />
                    </div>
                    <div className="space-y-4">
                        <Controller
                            control={control}
                            name="cta_secondary_label"
                            render={({ field }) => (
                                <TranslatableField
                                    label="Label Tombol CTA Sekunder"
                                    value={field.value}
                                    onChange={field.onChange}
                                    placeholder="mis. Lihat Layanan"
                                />
                            )}
                        />
                        <Controller
                            control={control}
                            name="cta_secondary_link"
                            render={({ field }) => (
                                <TranslatableField
                                    label="Link Tombol CTA Sekunder"
                                    value={field.value}
                                    onChange={field.onChange}
                                    placeholder="/layanan atau https://..."
                                    hint="Path relatif (mis. /layanan) otomatis memakai bahasa aktif; atau tulis URL lengkap (https://...) untuk link eksternal / target beda per bahasa."
                                />
                            )}
                        />
                    </div>
                </div>
            </TranslationCard>

            <FormSection
                title="Pengaturan"
                description="Urutan tampilan dan status publikasi slide."
            >
                <div className="grid gap-6 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"
                            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 }) => (
                            <FormSwitch
                                label="Aktif"
                                description="Slide tampil di carousel."
                                checked={field.value}
                                onCheckedChange={field.onChange}
                                name="is_active"
                            />
                        )}
                    />
                </div>
            </FormSection>

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