import { zodResolver } from '@hookform/resolvers/zod';
import { router } from '@inertiajs/react';
import { useEffect } from 'react';
import { Controller, useForm } from 'react-hook-form';
import {
    FormLanguageTabs,
    TranslatableField,
} from '@/components/admin/form-language';
import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { aboutStatSchema } from '@/lib/validators/about-stat';
import type { AboutStatFormValues } from '@/lib/validators/about-stat';
import {
    store as statStore,
    update as statUpdate,
} from '@/routes/admin/about/stats';
import type { AboutStat } from '@/types';

type Props = {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    stat?: AboutStat | null;
    nextOrder?: number;
};

const emptyValues = (nextOrder = 0): AboutStatFormValues => ({
    label: { id: '', en: '' },
    value: '',
    icon: '',
    sort_order: nextOrder,
});

/**
 * Modal tambah/edit statistik about — submit terpisah (post/put) ke routes stats.
 */
export default function AboutStatDialog({
    open,
    onOpenChange,
    stat,
    nextOrder,
}: Props) {
    const isEdit = Boolean(stat);

    const {
        control,
        register,
        handleSubmit,
        reset,
        formState: { errors, isSubmitting },
    } = useForm<AboutStatFormValues>({
        resolver: zodResolver(aboutStatSchema),
        defaultValues: emptyValues(),
    });

    useEffect(() => {
        if (!open) {
            return;
        }

        reset(
            stat
                ? {
                      label: {
                          id: stat.translations.id.label ?? '',
                          en: stat.translations.en.label ?? '',
                      },
                      value: stat.value ?? '',
                      icon: stat.icon ?? '',
                      sort_order: stat.sort_order ?? 0,
                  }
                : emptyValues(nextOrder),
        );
    }, [open, stat, nextOrder, reset]);

    const onSubmit = (values: AboutStatFormValues) => {
        if (stat) {
            router.put(statUpdate(stat.id), values, { preserveScroll: true });
        } else {
            router.post(statStore(), values, { preserveScroll: true });
        }
    };

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="max-w-lg">
                <DialogHeader>
                    <DialogTitle>
                        {isEdit ? 'Ubah Statistik' : 'Tambah Statistik'}
                    </DialogTitle>
                    <DialogDescription>
                        Angka-angka perusahaan yang tampil di halaman About.
                    </DialogDescription>
                </DialogHeader>

                <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
                    <FormLanguageTabs>
                        <Controller
                            control={control}
                            name="label"
                            render={({ field }) => (
                                <TranslatableField
                                    label="Label"
                                    required
                                    value={field.value}
                                    onChange={field.onChange}
                                />
                            )}
                        />
                    </FormLanguageTabs>

                    <div className="grid gap-4 sm:grid-cols-2">
                        <div className="space-y-2">
                            <Label htmlFor="stat_value">Nilai</Label>
                            <Input
                                id="stat_value"
                                placeholder="mis. 500+"
                                {...register('value')}
                            />
                            {errors.value && (
                                <p className="text-sm text-destructive">
                                    {errors.value.message}
                                </p>
                            )}
                        </div>

                        <div className="space-y-2">
                            <Label htmlFor="stat_sort">Urutan</Label>
                            <Input
                                id="stat_sort"
                                type="number"
                                min={0}
                                placeholder="0"
                                className="w-20 text-center"
                                {...register('sort_order')}
                            />
                        </div>
                    </div>

                    <div className="space-y-2">
                        <Label htmlFor="stat_icon">Ikon (opsional)</Label>
                        <Input
                            id="stat_icon"
                            placeholder="award, briefcase, calendar, users, star..."
                            {...register('icon')}
                        />
                        <p className="text-xs text-muted-foreground">
                            Nama ikon lucide-react. Kosongkan untuk ikon
                            default.
                        </p>
                    </div>

                    <DialogFooter>
                        <Button
                            type="button"
                            variant="outline"
                            onClick={() => onOpenChange(false)}
                        >
                            Batal
                        </Button>
                        <Button type="submit" disabled={isSubmitting}>
                            {isEdit ? 'Simpan Perubahan' : 'Tambah'}
                        </Button>
                    </DialogFooter>
                </form>
            </DialogContent>
        </Dialog>
    );
}