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 { exportMarketSchema } from '@/lib/validators/export-market';
import type { ExportMarketFormValues } from '@/lib/validators/export-market';

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

type MarketData = {
    id: number;
    country_code: string | null;
    country_name: string;
    city: string | null;
    volume_ton: string | number | null;
    year: number | null;
    is_active: boolean;
    sort_order: number;
    cover_url: string | null;
    translations: { id: MarketTranslation; en: MarketTranslation };
};

type Props = {
    mode: 'create' | 'edit';
    market?: MarketData;
    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 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 ExportMarketForm({ mode, market, 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: boolean; en: boolean }>({
        id: false,
        en: false,
    });

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

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

            return {
                ...translations,
                country_code: str(market?.country_code),
                country_name: market?.country_name ?? '',
                city: str(market?.city),
                volume_ton: str(market?.volume_ton),
                year: str(market?.year),
                is_active: market?.is_active ?? true,
                sort_order: market?.sort_order ?? nextOrder ?? 0,
            };
        })(),
    });

    const syncSlug = (locale: 'id' | 'en', titleValue: string) => {
        if (slugEdited[locale]) {
            return;
        }

        const current = getValues('slug');

        setValue('slug', { ...current, [locale]: toSlug(titleValue) }, { shouldValidate: false });
    };

    const onSubmit = (values: ExportMarketFormValues) => {
        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('country_code', (values.country_code || '').toUpperCase());
        formData.append('country_name', values.country_name);
        formData.append('city', values.city || '');
        formData.append('volume_ton', values.volume_ton || '');
        formData.append('year', values.year || '');
        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/export-markets', formData, { preserveScroll: true });
        } else if (market) {
            router.put(`/admin/export-markets/${market.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="title"
                        render={({ field }) => (
                            <TranslatableField
                                label="Judul"
                                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. Ekspor ke Jerman"
                            />
                        )}
                    />
                    <Controller
                        control={control}
                        name="slug"
                        render={({ field }) => (
                            <TranslatableField
                                label="Slug (otomatis dari judul, 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. ekspor-jerman"
                            />
                        )}
                    />
                </div>

                <Controller
                    control={control}
                    name="description"
                    render={({ field }) => (
                        <TranslatableField
                            label="Deskripsi"
                            value={field.value}
                            onChange={field.onChange}
                            type="richtext"
                            placeholder="Cerita ekspor ke negara ini..."
                        />
                    )}
                />
            </TranslationCard>

            <FormSection title="Data Negara" description="Kode ISO, kota, volume, dan tahun ekspor.">
                <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                    <div className="space-y-2">
                        <Label htmlFor="country_code">Kode Negara (ISO)</Label>
                        <Input id="country_code" placeholder="mis. DE" maxLength={2} className="uppercase" {...register('country_code')} />
                        <p className="text-xs text-muted-foreground">2 huruf — untuk pin peta.</p>
                    </div>
                    <div className="space-y-2">
                        <Label htmlFor="country_name">Nama Negara *</Label>
                        <Input id="country_name" placeholder="mis. Germany" {...register('country_name')} />
                    </div>
                    <div className="space-y-2">
                        <Label htmlFor="city">Kota</Label>
                        <Input id="city" placeholder="mis. Hamburg" {...register('city')} />
                    </div>
                    <div className="space-y-2">
                        <Label htmlFor="volume_ton">Volume (ton)</Label>
                        <Input id="volume_ton" placeholder="mis. 12.5" {...register('volume_ton')} />
                    </div>
                    <div className="space-y-2">
                        <Label htmlFor="year">Tahun</Label>
                        <Input id="year" placeholder="mis. 2024" {...register('year')} />
                    </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="Media" description="Bendera / foto negara (opsional).">
                <div className="max-w-sm">
                    <FormImageUpload
                        label="Gambar (opsional)"
                        existingUrl={market?.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 Pasar' : 'Simpan Perubahan'}
                </Button>
                <Button type="button" variant="outline" asChild>
                    <Link href="/admin/export-markets">Batal</Link>
                </Button>
            </div>
        </form>
    );
}