import Form from '@/components/form/Form';
import FormField from '@/components/form/FormField';
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import TextEditor from '@admin/components/rich-text-editor';
import { yupResolver } from '@hookform/resolvers/yup';
import { router, usePage } from '@inertiajs/react';
import { Loader2, UserPlus } from 'lucide-react';
import { useEffect, useRef, useState } from 'react';
import { SubmitHandler, useFormContext } from 'react-hook-form';
import { toast } from 'sonner';
import * as yup from 'yup';

// Project globals (Ziggy / Inertia route helper)
declare const route: (...args: any[]) => string;

interface Language {
    id?: number;
    name: string;
    value: number;
    code: string;
    is_default: number;
}

function TranslatableFields({
    languages,
    defaultLocale,
    slugEditedRefs,
}: {
    languages: Language[];
    defaultLocale: string;
    slugEditedRefs: React.MutableRefObject<Record<string, React.MutableRefObject<boolean>>>;
}) {
    const { watch } = useFormContext();
    const selectedLocale = watch('locale');

    return (
        <div className="space-y-4">
            {languages.map((lang) => (
                <div key={lang.code} className={selectedLocale === lang.code ? 'block' : 'hidden'}>
                    <SlugSync locale={lang.code} slugEditedRef={slugEditedRefs.current[lang.code]} />
                    <div className="grid gap-4 sm:grid-cols-2">
                        <FormField
                            type="text"
                            name={`title.${lang.code}`}
                            label={`Title (${lang.name})`}
                            placeholder="Enter admission form title"
                            required={lang.code === defaultLocale}
                        />

                        <FormField type="text" name={`slug.${lang.code}`} label={`Slug (${lang.name})`} placeholder="Enter admission form slug" />

                        <div className="sm:col-span-2">
                            <TextEditor
                                name={`description.${lang.code}`}
                                label={`Description (${lang.name})`}
                                type="textarea"
                                placeholder="Enter admission form description..."
                            />
                        </div>
                    </div>
                </div>
            ))}
        </div>
    );
}

interface ItemModalProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    onSuccess?: () => void;
    classes?: { label: string; value: number }[];
    languages?: Language[];
}

const generateSlug = (text: string) =>
    text
        .toLowerCase()
        .trim()
        .replace(/[^\w\s-]/g, '')
        .replace(/[\s_-]+/g, '-')
        .replace(/^-+|-+$/g, '');

/**
 * Per-locale slug sync: watches title[locale] and auto-fills slug[locale]
 * unless the user has manually edited that slug.
 */
function SlugSync({ locale, slugEditedRef }: { locale: string; slugEditedRef: React.MutableRefObject<boolean> }) {
    const { watch, setValue } = useFormContext();
    const title = watch(`title.${locale}`);
    const slug = watch(`slug.${locale}`);

    useEffect(() => {
        if (!slugEditedRef.current && title) {
            setValue(`slug.${locale}`, generateSlug(title), { shouldValidate: true });
        }
    }, [title]);

    useEffect(() => {
        if (slug && slug !== generateSlug(title || '')) {
            slugEditedRef.current = true;
        }
    }, [slug]);

    return null;
}

export function AddModal({ open, onOpenChange, onSuccess, classes: classesProp, languages: langsProp }: ItemModalProps) {
    const { data } = usePage().props as any;
    // Prefer props passed from Index.tsx, fallback to page props
    const languages: Language[] = langsProp ?? data?.languages ?? [];
    const classes = classesProp ?? data?.classes ?? [];
    const appInfoName = data?.app_info_name as [string, string] | undefined;

    const defaultLocale = languages.find((l) => l.is_default === 1)?.code ?? languages[0]?.code ?? 'us';

    const [isSubmitting, setIsSubmitting] = useState(false);

    // One ref per locale — tracks whether the user manually edited that locale's slug
    const slugEditedRefs = useRef<Record<string, React.MutableRefObject<boolean>>>(
        Object.fromEntries(languages.map((l) => [l.code, { current: false }])),
    );

    // Build Yup schema dynamically from the active languages list
    const buildSchema = (langs: Language[], defaultLocale: string) => {
        const localeStringShape = Object.fromEntries(langs.map((l) => [l.code, yup.string().nullable()]));

        // Make the default locale's title required
        localeStringShape[defaultLocale] = yup
            .string()
            .required(`Title (${langs.find((l) => l.code === defaultLocale)?.name ?? defaultLocale}) is required`);

        return yup.object({
            locale: yup.string().required('Language is required'),
            title: yup.object(localeStringShape).required(),
            slug: yup.object(Object.fromEntries(langs.map((l) => [l.code, yup.string().nullable()]))).nullable(),
            description: yup.object(Object.fromEntries(langs.map((l) => [l.code, yup.string().nullable()]))).nullable(),
            institute_class_id: yup
                .number()
                .nullable()
                .transform((v, o) => (o === '' ? null : v)),
            media_id: yup
                .number()
                .nullable()
                .transform((v, o) => (o === '' ? null : v)),
            status: yup.number().oneOf([1, 0], 'Invalid status').required('Status is required'),
        });
    };

    const defaultValues = {
        locale: defaultLocale,
        title: Object.fromEntries(languages.map((l) => [l.code, ''])),
        slug: Object.fromEntries(languages.map((l) => [l.code, ''])),
        description: Object.fromEntries(languages.map((l) => [l.code, ''])),
        institute_class_id: '',
        media_id: null,
        status: 1,
    };

    const handleSubmit: SubmitHandler<any> = async (formData) => {
        setIsSubmitting(true);
        try {
            router.post(route('admission-form.store'), formData, {
                onSuccess: () => {
                    toast.success('Admission Form created successfully!');
                    onOpenChange(false);
                    onSuccess?.();
                },
                onError: (errors) => {
                    console.error('Form submission errors:', errors);
                    toast.error('Something went wrong. Please try again.');
                },
                onFinish: () => {
                    setIsSubmitting(false);
                },
            });
        } catch (error) {
            console.error('Submission error:', error);
            toast.error('Something went wrong. Please try again.');
            setIsSubmitting(false);
        }
    };

    useEffect(() => {
        if (!open) {
            setIsSubmitting(false);
            // Reset all slug-edited flags when modal closes
            languages.forEach((l) => {
                if (slugEditedRefs.current[l.code]) {
                    slugEditedRefs.current[l.code].current = false;
                }
            });
        }
    }, [open]);

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="max-h-[95vh] w-[95vw] max-w-4xl overflow-y-auto sm:w-[90vw] md:max-w-3xl">
                <DialogHeader className="gap-0 pb-4">
                    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
                        <div className="flex items-center gap-3">
                            <UserPlus className="h-6 w-6" />

                            <div>
                                <DialogTitle className="text-lg sm:text-xl">Add New Admission Form</DialogTitle>
                            </div>
                        </div>
                    </div>
                    <DialogDescription className="text-sm text-text-gray sm:text-base">
                        Create new admission form here. Click save when you&apos;re done.
                    </DialogDescription>
                </DialogHeader>

                <div className="space-y-6 rounded-lg border px-2 py-4 sm:px-4 md:px-6">
                    <Form
                        submitHandler={handleSubmit}
                        resolver={yupResolver(buildSchema(languages, defaultLocale))}
                        key="create"
                        defaultValues={defaultValues}
                    >
                        <FormField
                            type="select"
                            name="locale"
                            label="Language"
                            options={languages.map((l) => ({
                                value: l.code,
                                label: `${l.name}${l.is_default ? ' (Default)' : ''}`,
                            }))}
                        />

                        <TranslatableFields languages={languages} defaultLocale={defaultLocale} slugEditedRefs={slugEditedRefs} />

                        {/* ── Non-translatable fields ── */}
                        <div className="mb-5 grid gap-4 sm:grid-cols-2">
                            <FormField type="select" name="institute_class_id" label="Class" placeholder="Select class" options={classes} />

                            <FormField
                                type="select"
                                name="status"
                                label="Status"
                                required
                                options={[
                                    { label: 'Active', value: 1 },
                                    { label: 'Inactive', value: 0 },
                                ]}
                            />

                            <div className="sm:col-span-2">
                                <FormField
                                    type="media-picker"
                                    name="media_id"
                                    label="Media"
                                    placeholder="Select media"
                                    app_name={appInfoName?.[0] || ''}
                                    app_module={appInfoName?.[1] || ''}
                                />
                            </div>
                        </div>

                        {/* Actions */}
                        <div className="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
                            <Button type="submit" disabled={isSubmitting} className="w-full bg-success hover:bg-brand-800 sm:w-auto">
                                {isSubmitting ? (
                                    <>
                                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                                        Creating...
                                    </>
                                ) : (
                                    <p>Save Changes</p>
                                )}
                            </Button>
                        </div>
                    </Form>
                </div>
            </DialogContent>
        </Dialog>
    );
}

export default AddModal;