import { useEffect, useState } from 'react';
import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { AlertTriangle, Clock } from 'lucide-react';
import { Link } from '@inertiajs/react';
import { show as employeeShow } from '@/routes/admin/employees';

export type ExpiringContract = {
    id: number;
    employee_id: number;
    employee_name: string;
    job_title: string | null;
    type: string;
    end_date: string;
    days_remaining: number;
};

export function ExpiringContractsModal({
    contracts = [],
}: {
    contracts?: ExpiringContract[];
}) {
    const [open, setOpen] = useState(false);

    useEffect(() => {
        if (contracts && contracts.length > 0) {
            setOpen(true);
        }
    }, [contracts]);

    if (!contracts || contracts.length === 0) return null;

    return (
        <Dialog open={open} onOpenChange={setOpen}>
            <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
                <DialogHeader>
                    <DialogTitle className="flex items-center gap-2 text-destructive">
                        <AlertTriangle className="h-5 w-5" />
                        Alertes d'échéance de contrats
                    </DialogTitle>
                    <DialogDescription>
                        Les contrats suivants arrivent à terme dans moins de 30 jours. Veuillez prévoir leur renouvellement ou leur fin.
                    </DialogDescription>
                </DialogHeader>
                <div className="space-y-4 py-4">
                    {contracts.map((contract) => (
                        <div key={contract.id} className="flex flex-col sm:flex-row sm:items-center justify-between p-4 border rounded-lg gap-4">
                            <div>
                                <h4 className="font-medium text-base">{contract.employee_name}</h4>
                                <p className="text-sm text-muted-foreground">
                                    {contract.job_title} • {contract.type}
                                </p>
                            </div>
                            <div className="flex items-center gap-4">
                                <div className="text-right">
                                    <div className="text-sm font-medium flex justify-end items-center gap-1 text-orange-600">
                                        <Clock className="h-4 w-4" />
                                        J-{contract.days_remaining}
                                    </div>
                                    <div className="text-xs text-muted-foreground mt-1">
                                        Fin le {contract.end_date}
                                    </div>
                                </div>
                                <Button asChild variant="outline" size="sm">
                                    <Link href={employeeShow(contract.employee_id) + '?tab=contracts'}>
                                        Voir la fiche
                                    </Link>
                                </Button>
                            </div>
                        </div>
                    ))}
                </div>
                <DialogFooter>
                    <Button variant="secondary" onClick={() => setOpen(false)}>Fermer</Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}