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, usePage } from '@inertiajs/react';
import { Loader2, Ruler } 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;
    defaultValues?: {
        id: number;
        uid: string;
        name: string;
        short_code: string;
        base_unit_id: number | null;
        conversion_factor: number;
        status: number;
        created_at: string;
        updated_at: string;
    };
}

interface BaseUnit {
    id: number;
    name: string;
    short_code: string;
}

interface PageProps {
    errors?: Record<string, string>;
    data: {
        base_units?: BaseUnit[];
    };
}

// Validation schema
const createSchema = yup.object({
    name: yup.string().required('Name is required').max(255),
    short_code: yup.string().required('Short code is required').max(50),
    base_unit_id: yup.number().nullable().transform((value) => (value === '' ? null : value)),
    conversion_factor: yup.number().nullable().min(0).transform((value) => (value === '' ? 1 : value)),
    status: yup.number().oneOf([1, 0], 'Invalid status').required('Status is required'),
});

export function EditModal({ open, onOpenChange, onSuccess, defaultValues }: ItemModalProps) {
    const [isSubmitting, setIsSubmitting] = useState(false);
    const { props } = usePage<PageProps>();
    const baseUnits = props.data?.base_units || [];
    const serverErrors = props.errors || {};

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

        const submitData = { ...data };
        // Ensure conversion_factor is a number
        if (submitData.conversion_factor === null || submitData.conversion_factor === '') {
            submitData.conversion_factor = 1;
        }

        try {
            const url = route('product-unit.update', defaultValues?.id);
            router.put(url, submitData, {
                onSuccess: () => {
                    toast.success('ProductUnit updated successfully!');
                    onOpenChange(false);
                    onSuccess?.();
                },
                onError: () => {
                    // Errors are handled by the Form component via props.errors
                    setIsSubmitting(false);
                },
                onFinish: () => {
                    if (!router.page?.props.errors) {
                        setIsSubmitting(false);
                    }
                },
            });
        } catch (error) {
            console.error('Submission error:', error);
            toast.error('Something went wrong. Please try again.');
            setIsSubmitting(false);
        }
    };

    const modalTitle = 'Edit Product Unit';
    const modalDescription = 'Update the measurement unit details. Click save when you are done.';
    const IconComponent = Ruler;

    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 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)}
                        defaultValues={defaultValues}
                        key={'edit'}
                        errors={serverErrors}
                    >
                        <div className="mb-5 grid gap-4 sm:grid-cols-2">
                            <FormField
                                type="text"
                                name="name"
                                label="Unit Name"
                                placeholder="e.g., Kilogram, Meter, Liter"
                                required
                            />
                            <FormField
                                type="text"
                                name="short_code"
                                label="Short Code"
                                placeholder="e.g., kg, m, L"
                                required
                            />
                            <FormField
                                type="select"
                                name="base_unit_id"
                                label="Base Unit"
                                placeholder="Select a base unit (optional)"
                                options={baseUnits.map((unit) => ({
                                    label: `${unit.name} (${unit.short_code})`,
                                    value: unit.id,
                                }))}
                            />
                            <FormField
                                type="number"
                                name="conversion_factor"
                                label="Conversion Factor"
                                placeholder="1"
                                step="0.000001"
                                helpText="How many of this unit equal 1 base unit"
                            />
                            <FormField
                                type="select"
                                name="status"
                                label="Status"
                                required
                                options={[
                                    { label: 'Active', value: 1 },
                                    { label: 'Inactive', value: 0 },
                                ]}
                            />
                        </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...
                                    </>
                                ) : (
                                    <p>Update Changes</p>
                                )}
                            </Button>
                        </div>
                    </Form>
                </div>
            </DialogContent>
        </Dialog>
    );
}

export default EditModal;