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 { CornerUpLeft, Loader2 } from 'lucide-react';
import { useEffect, useState } from 'react';
import { SubmitHandler } from 'react-hook-form';
import { toast } from 'sonner';
import * as yup from 'yup';

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

interface ReturnReasonData {
    id: number;
    uid: string;
    name: string;
    description: string | null;
    status: number;
}

interface EditModalProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    onSuccess?: () => void;
    defaultValues?: ReturnReasonData;
}

const schema = yup.object({
    name:        yup.string().required('Name is required').max(100),
    description: yup.string().nullable(),
    status:      yup.number().oneOf([1, 0]).required(),
});

export function EditModal({ open, onOpenChange, onSuccess, defaultValues }: EditModalProps) {
    const [isSubmitting, setIsSubmitting] = useState(false);

    const handleSubmit: SubmitHandler<any> = (data) => {
        setIsSubmitting(true);
        router.put(route('purchase.return-reason.update', defaultValues?.id), data, {
            onSuccess: () => {
                toast.success('Return reason updated!');
                onOpenChange(false);
                onSuccess?.();
            },
            onError: () => setIsSubmitting(false),
            onFinish: () => {
                if (!router.page?.props.errors) setIsSubmitting(false);
            },
        });
    };

    useEffect(() => { if (!open) setIsSubmitting(false); }, [open]);

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="max-h-[95vh] w-[95vw] max-w-2xl overflow-y-auto sm:w-[90vw]">
                <DialogHeader className="gap-0 pb-4">
                    <div className="flex items-center gap-3">
                        <CornerUpLeft className="h-6 w-6" />
                        <DialogTitle className="text-lg sm:text-xl">Edit Return Reason</DialogTitle>
                    </div>
                    <DialogDescription>Update the return reason details.</DialogDescription>
                </DialogHeader>

                <div className="rounded-lg border px-2 py-4 sm:px-4">
                    <Form
                        submitHandler={handleSubmit}
                        resolver={yupResolver(schema)}
                        key={`edit-${defaultValues?.id}`}
                        defaultValues={defaultValues ?? { name: '', description: '', status: 1 }}
                    >
                        <div className="mb-5 grid gap-4 sm:grid-cols-2">
                            <FormField type="text" name="name" label="Name" placeholder="e.g., Damaged, Wrong Item, Overstock" required />
                            <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="textarea" name="description" label="Description" placeholder="Optional notes about this return reason" />
                            </div>
                        </div>

                        <div className="flex justify-end">
                            <Button type="submit" disabled={isSubmitting} className="bg-success hover:bg-brand-800">
                                {isSubmitting ? <><Loader2 className="mr-2 h-4 w-4 animate-spin" />Updating...</> : 'Update'}
                            </Button>
                        </div>
                    </Form>
                </div>
            </DialogContent>
        </Dialog>
    );
}

export default EditModal;