import { zodResolver } from '@hookform/resolvers/zod';
import { router } from '@inertiajs/react';
import { Controller, useForm } from 'react-hook-form';
import { toast } from 'sonner';
import {
    FormLanguageTabs,
    FormSwitch,
    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 { faqSchema } from '@/lib/validators/faq';
import type { FaqFormValues } from '@/lib/validators/faq';

type Faq = {
    id: number;
    is_active: boolean;
    sort_order: number;
    translations: {
        id: { question: string; answer: string };
        en: { question: string; answer: string };
    };
};

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

export default function FaqDialog({ open, onOpenChange, faq, nextOrder }: Props) {
    const isEdit = !!faq;

    const {
        register,
        control,
        handleSubmit,
        formState: { isSubmitting },
    } = useForm<FaqFormValues>({
        resolver: zodResolver(faqSchema),
        defaultValues: {
            question: {
                id: faq?.translations.id.question ?? '',
                en: faq?.translations.en.question ?? '',
            },
            answer: {
                id: faq?.translations.id.answer ?? '',
                en: faq?.translations.en.answer ?? '',
            },
            is_active: faq?.is_active ?? true,
            sort_order: faq?.sort_order ?? nextOrder ?? 0,
        },
    });

    const onSubmit = (values: FaqFormValues) => {
        if (!values.question.id.trim()) {
            toast.error('Pertanyaan (Indonesia) wajib diisi.');

            return;
        }

        if (!values.question.en.trim()) {
            toast.error('Pertanyaan (English) wajib diisi. Silakan pindah ke tab English.');
            const tabList = document.querySelector('[aria-label="Bahasa konten"]');
            const triggers = tabList?.querySelectorAll<HTMLElement>('[role="tab"]');
            triggers?.[1]?.click();

            return;
        }

        const payload = {
            question: values.question,
            answer: values.answer,
            is_active: values.is_active,
            sort_order: values.sort_order ?? 0,
        };

        const opts = {
            preserveScroll: true,
            onSuccess: () => {
                onOpenChange(false);
            },
        };

        if (isEdit && faq) {
            router.put(`/admin/faqs/${faq.id}`, payload, opts);
        } else {
            router.post('/admin/faqs', payload, opts);
        }
    };

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="max-h-[90vh] gap-5 overflow-y-auto sm:max-w-3xl">
                <DialogHeader>
                    <DialogTitle>{isEdit ? 'Ubah FAQ' : 'Tambah FAQ'}</DialogTitle>
                    <DialogDescription>
                        Pertanyaan umum seputar MOQ, private label, dan pengiriman.
                    </DialogDescription>
                </DialogHeader>

                <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
                    <FormLanguageTabs>
                        <Controller
                            control={control}
                            name="question"
                            render={({ field }) => (
                                <TranslatableField
                                    label="Pertanyaan"
                                    required
                                    value={field.value}
                                    onChange={field.onChange}
                                    placeholder="mis. Berapa MOQ?"
                                />
                            )}
                        />
                        <Controller
                            control={control}
                            name="answer"
                            render={({ field }) => (
                                <TranslatableField
                                    label="Jawaban"
                                    value={field.value}
                                    onChange={field.onChange}
                                    type="richtext"
                                    placeholder="Tulis jawaban..."
                                />
                            )}
                        />
                    </FormLanguageTabs>

                    <div className="grid gap-4 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"
                                {...register('sort_order')}
                            />
                        </div>
                        <Controller
                            control={control}
                            name="is_active"
                            render={({ field }) => (
                                <FormSwitch
                                    label="Aktif"
                                    description="FAQ aktif tampil di halaman publik."
                                    checked={field.value}
                                    onCheckedChange={field.onChange}
                                    name="is_active"
                                />
                            )}
                        />
                    </div>

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