import { useState, useEffect } from 'react';
import { router, useForm } from '@inertiajs/react';
import { FormEvent } from 'react';
import { motion } from 'framer-motion';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { status as employeeLoansStatus } from '@/routes/admin/employee-loans';

interface AdjustLoanModalProps {
    isOpen: boolean;
    onClose: () => void;
    loan: any;
}

export function AdjustLoanModal({ isOpen, onClose, loan }: AdjustLoanModalProps) {
    const [monthlyInstallment, setMonthlyInstallment] = useState('');
    const { data, setData, patch, processing } = useForm({
        status: 'employee_signature_pending',
        monthly_installment: '',
    });

    useEffect(() => {
        if (loan) {
            setMonthlyInstallment(loan.monthly_installment || '');
            setData('monthly_installment', loan.monthly_installment || '');
        }
    }, [loan]);

    if (!loan) return null;

    const handleConfirm = (e: FormEvent) => {
        e.preventDefault();
        patch(employeeLoansStatus(loan.id).url, {
            onSuccess: () => {
                onClose();
            },
        });
    };

    return (
        <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
            <DialogContent className="sm:max-w-[425px] p-1 border border-border/10 shadow-2xl bg-gray-200 dark:bg-gray-800 sm:rounded-[32px]">
                <motion.div
                    initial={{ opacity: 0, scale: 0.96, y: 15 }}
                    animate={{ opacity: 1, scale: 1, y: 0 }}
                    transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
                    className="bg-background w-full h-full sm:rounded-[26px] p-6 sm:p-8 shadow-sm border border-border/30 overflow-y-auto max-h-[90vh]"
                >
                    <form onSubmit={handleConfirm}>
                        <DialogHeader className="mb-4 pb-4 border-b border-border">
                            <DialogTitle className="text-orange-600 font-bold text-xl">Ajuster et demander signature</DialogTitle>
                            <DialogDescription>
                                Ajustez la mensualité pour respecter la quotité saisissable. L'employé devra signer cet accord.
                            </DialogDescription>
                        </DialogHeader>
                        <div className="grid gap-4 py-4">
                            <div className="space-y-2">
                                <Label>Montant total du prêt</Label>
                                <Input value={loan.total_amount} disabled />
                            </div>
                            <div className="space-y-2">
                                <Label>Nouvelle Mensualité (XOF)</Label>
                                <Input 
                                    type="number" 
                                    min="1"
                                    max={loan.total_amount}
                                    value={monthlyInstallment} 
                                    onChange={(e) => {
                                        setMonthlyInstallment(e.target.value);
                                        setData('monthly_installment', e.target.value);
                                    }} 
                                />
                            </div>
                        </div>
                        <DialogFooter className="mt-6 pt-4 border-t border-border">
                            <Button type="button" variant="outline" onClick={onClose} disabled={processing} className="rounded-xl">
                                Annuler
                            </Button>
                            <Button type="submit" disabled={processing} className="rounded-xl bg-orange-600 hover:bg-orange-700 text-white">
                                {processing ? 'Envoi...' : 'Enregistrer & Demander signature'}
                            </Button>
                        </DialogFooter>
                    </form>
                </motion.div>
            </DialogContent>
        </Dialog>
    );
}