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 { yupResolver } from '@hookform/resolvers/yup';
import { router } from '@inertiajs/react';
import {  Loader2, UserPlus } from 'lucide-react';
import { useEffect, useState } from 'react';
import { SubmitHandler } 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 ItemModalProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    onSuccess?: () => void;
}



// Create validation schema
const createSchema = yup.object({
    title: yup.string().required('Title is required'),
    description: yup.string().required('Description is required'),
    status: yup.number().oneOf([1, 0], 'Invalid status').required('Status is required'),
});

export function AddModal({ open, onOpenChange, onSuccess }: ItemModalProps) {
    const [isSubmitting, setIsSubmitting] = useState(false);
    const  defaultValue ={
        title:'',
        description:'',
        status:1
    }
    const handleSubmit: SubmitHandler<any> = async (data) => {
        setIsSubmitting(true);

        const submitData = { ...data };
        try {
            // Use the appropriate route based on whether we're editing or creating
            const url =  route('$KEBAB_NAME$.store');
            router.post(url, submitData, {
                onSuccess: () => {
                    toast.success( '$STUDLY_NAME$ 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);
        }
    };

    const modalTitle = 'Add New $STUDLY_NAME$';
    const modalDescription = "Create new $LOWER_NAME$ here. Click save when you're done.";
    const IconComponent = UserPlus;

    // Reset form when modal closes or user changes
    useEffect(() => {
        if (!open) {
            // Reset form state when modal closes
            setIsSubmitting(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">
                            <IconComponent className="h-6 w-6" />

                            <div>
                                <DialogTitle className="text-lg sm:text-xl">{modalTitle}</DialogTitle>
                            </div>
                        </div>
                    </div>
                    <DialogDescription className="text-sm text-text-gray sm:text-base">{modalDescription}</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(createSchema)}
                        key={'create'}
                        defaultValues={defaultValue}
                        // externalErrors={(page.props as any)?.errors}
                    >
                        {/* Item Details */}
                        <div className="mb-5 grid gap-4 sm:grid-cols-1">
                            <FormField type="text" name="title" label="Title" placeholder="Enter title" required />
                            <FormField name="description" label="Description" type="textarea" placeholder="Enter description" required />
                            <FormField
                                type="select"
                                name="status"
                                label="Status"
                                required
                                options={[
                                    { label: 'Active', value: 1},
                                    { label: 'Inactive', value: 0 },
                                ]}
                            />
                        </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;