import Form from '@/components/form/Form';
import FormField from '@/components/form/FormField';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import AppLayout from '@/layouts/app-layout';
import { getTypes } from '@/lib/type-enum';
import TextEditor from '@admin/components/rich-text-editor';
import { yupResolver } from '@hookform/resolvers/yup';
import { Head, router, usePage } from '@inertiajs/react';
import { ArrowLeft, ChevronRight, Loader2, Plus } from 'lucide-react';
import { useState } from 'react';
import { useFormContext } from 'react-hook-form';
import * as yup from 'yup';

declare const route: (...args: any[]) => string;

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

function TranslatableFields({ languages, defaultLocale }: { languages: Language[]; defaultLocale: string }) {
    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'}
                >
                    <div className="grid gap-4 sm:grid-cols-2">
                        <FormField
                            type="text"
                            name={`name.${lang.code}`}
                            label={`Name (${lang.name})`}
                            placeholder="Enter testimonial author name"
                            required={lang.code === defaultLocale}
                        />

                        <FormField
                            type="text"
                            name={`role.${lang.code}`}
                            label={`Role (${lang.name})`}
                            placeholder="e.g., Student, Faculty"
                        />

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

/* -----------------------------------
 Create Testimonial Page
----------------------------------- */
export default function Create() {
    const { data } = usePage().props as any;
    const languages: Language[] = data?.languages ?? [];
    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);

    const buildSchema = (langs: Language[], defaultLocale: string) => {
        const localeStringShape = Object.fromEntries(langs.map((l) => [l.code, yup.string().nullable()]));
        localeStringShape[defaultLocale] = yup.string().required(
            `Name (${langs.find((l) => l.code === defaultLocale)?.name ?? defaultLocale}) is required`,
        );

        return yup.object({
            locale:      yup.string().required('Language is required'),
            name:        yup.object(localeStringShape).required(),
            role:        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(),
            rating:      yup.number().min(0, 'Rating must be at least 0').max(5, 'Rating cannot exceed 5').nullable(),
            type:        yup.number().required('Type is required'),
            status:      yup.number().oneOf([1, 0], 'Invalid status').required('Status is required'),
            media_id:    yup.number().nullable(),
        });
    };

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

    const handleSubmit = (formData: any) => {
        setIsSubmitting(true);
        router.post(route('testimonial.store'), formData, {
            onFinish: () => setIsSubmitting(false),
        });
    };

    return (
        <>
            <Head title="Create Testimonial" />

            <div className="mx-auto flex w-full flex-1 flex-col gap-4 p-3 sm:gap-6 sm:p-2">
                {/* Header */}
                <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                    <div className="flex items-start gap-3">
                        <Button variant="outline" size="icon" onClick={() => history.back()} className="border-none bg-muted">
                            <ArrowLeft className="h-4 w-4" />
                        </Button>

                        <div>
                            <h1 className="text-xl font-bold">Create Testimonial</h1>
                            <p className="text-sm text-gray-600">Create a new testimonial post</p>
                        </div>
                    </div>

                    <div className="hidden items-center gap-2 text-sm text-gray-500 sm:flex">
                        <span>Testimonial</span>
                        <ChevronRight className="h-4 w-4" />
                        <span className="font-medium text-primary">Create</span>
                    </div>
                </div>

                {/* Form */}
                <Card className="p-4 sm:p-6">
                    <Form
                        resolver={yupResolver(buildSchema(languages, defaultLocale))}
                        defaultValues={defaultValues}
                        submitHandler={handleSubmit}
                        className="space-y-6"
                    >
                        <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} />

                        {/* ── Non-translatable fields ── */}
                        <div className="grid gap-4 sm:grid-cols-3">
                            <FormField
                                type="number"
                                name="rating"
                                label="Rating (0-5)"
                                placeholder="Enter rating"
                                min={0}
                                max={5}
                                step={0.5}
                            />

                            <FormField
                                type="select"
                                name="type"
                                label="Type"
                                required
                                options={
                                    getTypes('testimonial')?.map((type: any) => ({
                                        label: type.name,
                                        value: type.value,
                                    })) || [
                                        { label: 'Student', value: 1 },
                                        { label: 'Parent', value: 2 },
                                        { label: 'Visitor', value: 3 },
                                    ]
                                }
                            />

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

                        <div>
                            <FormField
                                type="media-picker"
                                name="media_id"
                                label="Media"
                                placeholder="Select testimonial media"
                                app_name={appInfoName?.[0] ?? ''}
                                app_module={appInfoName?.[1] ?? ''}
                            />
                        </div>

                        {/* Actions */}
                        <div className="mt-2 flex justify-end gap-3 border-t pt-4">
                            <Button type="button" variant="outline" onClick={() => history.back()} disabled={isSubmitting}>
                                Cancel
                            </Button>
                            <Button type="submit" className="bg-success hover:bg-brand-800" disabled={isSubmitting}>
                                {isSubmitting ? (
                                    <>
                                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                                        Creating...
                                    </>
                                ) : (
                                    <>
                                        <Plus className="mr-2 h-4 w-4" />
                                        Create Testimonial
                                    </>
                                )}
                            </Button>
                        </div>
                    </Form>
                </Card>
            </div>
        </>
    );
}

/* -----------------------------------
 Layout
----------------------------------- */
Create.layout = (page: React.ReactNode) => (
    <AppLayout
        title="Create Testimonial"
        breadcrumbs={[
            { title: 'Dashboard', href: route('dashboard') },
            { title: 'Testimonial', href: route('testimonial.index') },
            { title: 'Create', href: route('testimonial.create') },
        ]}
    >
        {page}
    </AppLayout>
);