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 { type User } from '@/types';
import { yupResolver } from '@hookform/resolvers/yup';
import { router, usePage } from '@inertiajs/react';
import { Edit3, Loader2 } from 'lucide-react';
import { useEffect, useState } from 'react';
import { SubmitHandler } from 'react-hook-form';
import { toast } from 'sonner';
import * as yup from 'yup';

interface Designation {
    id: number;
    name: string;
}

interface UserDetailModalProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    user?: User | null;
    designations?: Designation[];
    onSuccess?: () => void;
}

const schema = yup.object({
    department: yup.string().optional(),
    subject: yup.string().optional(),
    designation_id: yup.string().optional(),
    qualification: yup.string().optional(),
    experience: yup.string().optional(),
    joining_date: yup.string().optional(),
    user_id: yup.string().optional(),
    address: yup.string().optional(),
});

export function UserDetailModal({ open, onOpenChange, user, designations = [], onSuccess }: UserDetailModalProps) {
    const [isSubmitting, setIsSubmitting] = useState(false);
    const page = usePage<any>();
    const userDetail = (user as any)?.user_detail || {};

    // Ensure designations is always a proper array (handles Laravel collection serialization)
    const designationOptions = (Array.isArray(designations) ? designations : Object.values(designations)).map((d: any) => ({
        value: d.id.toString(),
        label: d.name,
    }));
    const defaultValues = {
        department: userDetail.department || '',
        subject: userDetail.subject || '',
        designation_id: userDetail.designation_id?.toString() || '',
        qualification: userDetail.qualification || '',
        experience: userDetail.experience || '',
        joining_date: userDetail.joining_date ? userDetail.joining_date.split('T')[0] : '',
        user_id: userDetail.user_id || user?.id,
        address: userDetail.address || '',
    };

    const handleSubmit: SubmitHandler<any> = async (data) => {
        setIsSubmitting(true);

        try {
            //const url = isEditing ? route('users.update', user!.id) : route('users.store');
            const url = route('user-details.store');

            router.post(url, data, {
                onSuccess: () => {
                    // toast.success(isEditing ? 'User updated successfully!' : 'User created successfully!');
                    onOpenChange(false);
                    onSuccess?.();
                },
                onError: (errors) => {
                    console.error('Form submission errors:', errors);
                    //toast.error('Something went wrong. Please try again.');
                },
                onFinish: () => {
                    setIsSubmitting(false);
                },
            });

            //await axios.post(`/api/user-details/${user?.id}`, data);
            toast.success('User details updated successfully!');
            onOpenChange(false);
            onSuccess?.();
        } catch (error: any) {
            console.error('Submission error:', error);
            const message = error?.response?.data?.message || 'Something went wrong. Please try again.';
            toast.error(message);
        } finally {
            setIsSubmitting(false);
        }
    };

    useEffect(() => {
        if (!open) {
            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 items-center gap-3">
                        <Edit3 className="h-6 w-6" />
                        <DialogTitle className="text-lg sm:text-xl">Edit User Details</DialogTitle>
                    </div>
                    <DialogDescription className="text-sm text-text-gray sm:text-base">Update additional details for this user</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(schema)}
                        defaultValues={defaultValues}
                        key={user?.id || 'detail'}
                        externalErrors={(page.props as any)?.errors}
                    >
                        <div className="mb-5 grid gap-4 sm:grid-cols-1 md:grid-cols-2">
                            <FormField type="text" name="user_id" label="Employee ID" placeholder="EMP-001" disabled />
                            <FormField type="text" name="department" label="Department" placeholder="e.g. Science" />
                        </div>

                        <div className="mb-5 grid gap-4 sm:grid-cols-1 md:grid-cols-2">
                            <FormField type="text" name="subject" label="Subject" placeholder="e.g. Mathematics" />
                            <FormField
                                type="select"
                                name="designation_id"
                                label="Designation"
                                placeholder="Select designation"
                                options={designations.map((d) => ({ value: d.id.toString(), label: d.name }))}
                            />
                        </div>

                        <div className="mb-5 grid gap-4 sm:grid-cols-1 md:grid-cols-2">
                            <FormField type="text" name="qualification" label="Qualification" placeholder="e.g. M.Sc, B.Ed" />
                            <FormField type="text" name="experience" label="Experience" placeholder="e.g. 5 years" />
                        </div>

                        <div className="mb-5 grid gap-4 sm:grid-cols-1 md:grid-cols-2">
                            <FormField type="datepicker" name="joining_date" label="Joining Date" placeholder="Select date" />
                            <FormField type="textarea" name="address" label="Address" placeholder="Enter address" />
                        </div>

                        <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" />
                                        Updating...
                                    </>
                                ) : (
                                    <>Save Changes</>
                                )}
                            </Button>
                        </div>
                    </Form>
                </div>
            </DialogContent>
        </Dialog>
    );
}