import React, { useState, useEffect } from 'react';
import { X, Calendar, AlertCircle, Upload } from 'lucide-react';

const EditLeaveRequestModal = ({
    onClose,
    request,
    availableLeaveCounters,
    accessToken,
    userId,
    userEmail,
    userRole,
    userName,
    onRequestUpdated
}) => {
    const [leaveType, setLeaveType] = useState(request.typeId || '');
    const [startDate, setStartDate] = useState(request.startDate || '');
    const [endDate, setEndDate] = useState(request.endDate || '');
    const [reason, setReason] = useState(request.reason || '');
    const [businessDays, setBusinessDays] = useState(request.days || 0);
    const [saturdayCount, setSaturdayCount] = useState(0);
    const [medicalDocuments, setMedicalDocuments] = useState([]);
    const [errors, setErrors] = useState({});
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [submitMessage, setSubmitMessage] = useState({ type: '', text: '' });

    // ⭐ Types de congés disponibles selon le rôle
    const getLeaveTypes = () => {
        const baseTypes = [
            { id: 1, name: 'Congé payé', key: 'CP', counter: availableLeaveCounters.availableCP },
        ];

        // Ajouter RTT sauf pour les apprentis
        if (userRole !== 'Apprenti') {
            baseTypes.push({
                id: 2,
                name: 'RTT',
                key: 'RTT',
                counter: availableLeaveCounters.availableRTT
            });
        }

        // Ajouter les types sans compteur
        baseTypes.push(
            { id: 3, name: 'Arrêt maladie', key: 'ABS', counter: null },
            { id: 5, name: 'Récupération (samedi)', key: 'Récup', counter: null }
        );

        // Ajouter Formation pour les apprentis
        if (userRole === 'Apprenti') {
            baseTypes.push({ id: 4, name: 'Formation', key: 'Formation', counter: null });
        }

        return baseTypes;
    };

    const leaveTypes = getLeaveTypes();

    // ⭐ Calcul des jours ouvrés ET des samedis
    useEffect(() => {
        if (startDate && endDate) {
            const result = calculateBusinessDaysAndSaturdays(startDate, endDate);
            setBusinessDays(result.workingDays);
            setSaturdayCount(result.saturdays);
        }
    }, [startDate, endDate]);

    const calculateBusinessDaysAndSaturdays = (start, end) => {
        const startD = new Date(start);
        const endD = new Date(end);
        let workingDays = 0;
        let saturdays = 0;
        const current = new Date(startD);

        while (current <= endD) {
            const dayOfWeek = current.getDay();
            if (dayOfWeek === 6) {
                saturdays++;
            } else if (dayOfWeek !== 0) { // Pas dimanche
                workingDays++;
            }
            current.setDate(current.getDate() + 1);
        }

        return { workingDays, saturdays };
    };

    const validateForm = () => {
        const newErrors = {};

        if (!leaveType) {
            newErrors.leaveType = 'Veuillez sélectionner un type de congé';
        }

        if (!startDate) {
            newErrors.startDate = 'La date de début est requise';
        }

        if (!endDate) {
            newErrors.endDate = 'La date de fin est requise';
        }

        if (startDate && endDate && new Date(startDate) > new Date(endDate)) {
            newErrors.endDate = 'La date de fin doit être après la date de début';
        }

        // ⭐ Validation spécifique pour Récupération
        const selectedType = leaveTypes.find(t => t.id === parseInt(leaveType));
        if (selectedType?.key === 'Récup') {
            if (saturdayCount === 0) {
                newErrors.days = 'Une récupération nécessite au moins un samedi dans la période sélectionnée';
            }
        }

        // ⭐ Validation spécifique pour Arrêt maladie
        if (selectedType?.key === 'ABS' && medicalDocuments.length === 0) {
            newErrors.medical = 'Un justificatif médical est obligatoire pour un arrêt maladie';
        }

        // Vérification du solde disponible (CP et RTT uniquement)
        if (selectedType && selectedType.counter !== null && businessDays > selectedType.counter) {
            newErrors.days = `Solde insuffisant. Disponible : ${selectedType.counter} jour(s)`;
        }

        setErrors(newErrors);
        return Object.keys(newErrors).length === 0;
    };

    const handleFileUpload = (e) => {
        const files = Array.from(e.target.files);
        const validFiles = [];
        const maxSize = 5 * 1024 * 1024; // 5MB

        for (const file of files) {
            const validTypes = ['application/pdf', 'image/jpeg', 'image/jpg', 'image/png'];
            if (!validTypes.includes(file.type)) {
                setSubmitMessage({
                    type: 'error',
                    text: `Le fichier "${file.name}" n'est pas un format valide.`
                });
                continue;
            }
            if (file.size > maxSize) {
                setSubmitMessage({
                    type: 'error',
                    text: `Le fichier "${file.name}" est trop volumineux (max 5MB).`
                });
                continue;
            }
            validFiles.push(file);
        }

        setMedicalDocuments(prev => [...prev, ...validFiles]);
        e.target.value = '';
    };

    const removeDocument = (index) => {
        setMedicalDocuments(prev => prev.filter((_, i) => i !== index));
    };

    const formatFileSize = (bytes) => {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    };

    const handleSubmit = async (e) => {
        e.preventDefault();

        if (!validateForm()) {
            return;
        }

        setIsSubmitting(true);
        setSubmitMessage({ type: '', text: '' });

        try {
            const formDataToSend = new FormData();

            formDataToSend.append('requestId', request.id);
            formDataToSend.append('leaveType', parseInt(leaveType));
            formDataToSend.append('startDate', startDate);
            formDataToSend.append('endDate', endDate);
            formDataToSend.append('reason', reason);
            formDataToSend.append('userId', userId);
            formDataToSend.append('userEmail', userEmail);
            formDataToSend.append('userName', userName);
            formDataToSend.append('accessToken', accessToken);

            // ⭐ Calcul des jours selon le type
            const selectedType = leaveTypes.find(t => t.id === parseInt(leaveType));
            const daysToSend = selectedType?.key === 'Récup' ? saturdayCount : businessDays;
            formDataToSend.append('businessDays', daysToSend);

            // ⭐ Documents médicaux
            medicalDocuments.forEach((file) => {
                formDataToSend.append('medicalDocuments', file);
            });

            const response = await fetch('http://localhost:3000/updateRequest', {
                method: 'POST',
                body: formDataToSend
            });

            const data = await response.json();

            if (data.success) {
                setSubmitMessage({
                    type: 'success',
                    text: '✅ Demande modifiée avec succès ! Le manager a été informé par email.'
                });

                setTimeout(() => {
                    onRequestUpdated();
                    onClose();
                }, 2000);
            } else {
                setSubmitMessage({
                    type: 'error',
                    text: `❌ ${data.message || 'Erreur lors de la modification'}`
                });
            }
        } catch (error) {
            console.error('Erreur:', error);
            setSubmitMessage({
                type: 'error',
                text: '❌ Une erreur est survenue. Veuillez réessayer.'
            });
        } finally {
            setIsSubmitting(false);
        }
    };

    const getMinDate = () => {
        const today = new Date();
        return today.toISOString().split('T')[0];
    };

    const selectedType = leaveTypes.find(t => t.id === parseInt(leaveType));

    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
            {/* Overlay */}
            <div
                className="absolute inset-0 bg-black bg-opacity-50"
                onClick={onClose}
            />

            {/* Modal */}
            <div className="relative bg-white rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
                {/* Header */}
                <div className="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex justify-between items-center rounded-t-2xl">
                    <h2 className="text-2xl font-bold text-gray-900">Modifier la demande</h2>
                    <button
                        onClick={onClose}
                        className="text-gray-400 hover:text-gray-600 transition-colors"
                    >
                        <X className="w-6 h-6" />
                    </button>
                </div>

                {/* Body */}
                <form onSubmit={handleSubmit} className="p-6 space-y-6">
                    {/* Message de statut */}
                    {submitMessage.text && (
                        <div className={`p-4 rounded-lg ${submitMessage.type === 'success'
                            ? 'bg-green-50 text-green-800 border border-green-200'
                            : 'bg-red-50 text-red-800 border border-red-200'
                            }`}>
                            {submitMessage.text}
                        </div>
                    )}

                    {/* Info - Demande originale */}
                    <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                        <h3 className="font-semibold text-blue-900 mb-2 flex items-center gap-2">
                            <AlertCircle className="w-5 h-5" />
                            Demande actuelle
                        </h3>
                        <div className="text-sm text-blue-800 space-y-1">
                            <p><strong>Type :</strong> {request.type}</p>
                            <p><strong>Dates :</strong> {request.dateDisplay}</p>
                            <p><strong>Jours :</strong> {request.days}</p>
                        </div>
                    </div>

                    {/* Type de congé */}
                    <div>
                        <label className="block text-sm font-medium text-gray-700 mb-2">
                            Type de congé *
                        </label>
                        <select
                            value={leaveType}
                            onChange={(e) => setLeaveType(e.target.value)}
                            className={`w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 ${errors.leaveType ? 'border-red-500' : 'border-gray-300'
                                }`}
                        >
                            <option value="">Sélectionnez un type</option>
                            {leaveTypes.map(type => (
                                <option key={type.id} value={type.id}>
                                    {type.name}
                                    {type.counter !== null && ` (${type.counter.toFixed(1)} jours disponibles)`}
                                </option>
                            ))}
                        </select>
                        {errors.leaveType && (
                            <p className="mt-1 text-sm text-red-600">{errors.leaveType}</p>
                        )}
                    </div>

                    {/* Dates */}
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label className="block text-sm font-medium text-gray-700 mb-2">
                                Date de début *
                            </label>
                            <div className="relative">
                                <Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
                                <input
                                    type="date"
                                    value={startDate}
                                    onChange={(e) => setStartDate(e.target.value)}
                                    min={getMinDate()}
                                    className={`w-full pl-10 pr-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 ${errors.startDate ? 'border-red-500' : 'border-gray-300'
                                        }`}
                                />
                            </div>
                            {errors.startDate && (
                                <p className="mt-1 text-sm text-red-600">{errors.startDate}</p>
                            )}
                        </div>

                        <div>
                            <label className="block text-sm font-medium text-gray-700 mb-2">
                                Date de fin *
                            </label>
                            <div className="relative">
                                <Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
                                <input
                                    type="date"
                                    value={endDate}
                                    onChange={(e) => setEndDate(e.target.value)}
                                    min={startDate || getMinDate()}
                                    className={`w-full pl-10 pr-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 ${errors.endDate ? 'border-red-500' : 'border-gray-300'
                                        }`}
                                />
                            </div>
                            {errors.endDate && (
                                <p className="mt-1 text-sm text-red-600">{errors.endDate}</p>
                            )}
                        </div>
                    </div>

                    {/* ⭐ Résumé de la période */}
                    {startDate && endDate && (
                        <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
                            <p className="text-sm font-medium text-blue-900 mb-1">Résumé de la période :</p>
                            <div className="text-xs text-blue-700 space-y-1">
                                <p>• <strong>{businessDays} jour(s) ouvré(s)</strong> (lundi-vendredi)</p>
                                {saturdayCount > 0 && (
                                    <>
                                        <p className="text-purple-700">• {saturdayCount} samedi(s) détecté(s)</p>
                                        {selectedType?.key !== 'Récup' && (
                                            <p className="text-orange-700 font-medium">
                                                ⚠️ Les samedis seront ignorés (sélectionnez "Récupération" pour les inclure)
                                            </p>
                                        )}
                                        {selectedType?.key === 'Récup' && (
                                            <p className="text-green-700 font-medium">
                                                ✅ Récupération : {saturdayCount} samedi(s) seront comptabilisés
                                            </p>
                                        )}
                                    </>
                                )}
                            </div>
                        </div>
                    )}

                    {/* Nombre de jours */}
                    {(businessDays > 0 || saturdayCount > 0) && (
                        <div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
                            <p className="text-sm text-gray-700">
                                <strong>Nombre de jours {selectedType?.key === 'Récup' ? '(samedis)' : 'ouvrés'} :</strong>{' '}
                                {selectedType?.key === 'Récup' ? saturdayCount : businessDays}
                            </p>
                            {errors.days && (
                                <p className="mt-1 text-sm text-red-600">{errors.days}</p>
                            )}
                        </div>
                    )}

                    {/* ⭐ Upload documents médicaux pour Arrêt maladie */}
                    {selectedType?.key === 'ABS' && (
                        <div>
                            <label className="block text-sm font-medium text-gray-900 mb-3">
                                Justificatif médical <span className="text-red-600">*</span>
                            </label>

                            <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-gray-400 transition-colors">
                                <div className="w-12 h-12 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center">
                                    <Upload className="w-6 h-6 text-gray-400" />
                                </div>
                                <p className="text-gray-700 text-sm mb-2">
                                    Glissez vos documents ici ou cliquez pour sélectionner
                                </p>
                                <p className="text-gray-500 text-xs mb-4">
                                    Formats acceptés : PDF, JPG, PNG (max 5MB par fichier)
                                </p>
                                <input
                                    type="file"
                                    multiple
                                    accept=".pdf,.jpg,.jpeg,.png"
                                    onChange={handleFileUpload}
                                    className="hidden"
                                    id="medical-documents"
                                />
                                <label
                                    htmlFor="medical-documents"
                                    className="inline-block px-6 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 cursor-pointer transition-colors text-sm font-medium text-gray-700"
                                >
                                    Sélectionner des fichiers
                                </label>
                            </div>

                            {medicalDocuments.length > 0 && (
                                <div className="mt-4 space-y-2">
                                    <p className="text-sm font-medium text-gray-900 mb-2">
                                        Fichiers sélectionnés ({medicalDocuments.length}) :
                                    </p>
                                    {medicalDocuments.map((file, index) => (
                                        <div key={index} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-200">
                                            <div className="flex items-center gap-3 flex-1 min-w-0">
                                                <div className="w-8 h-8 bg-blue-100 rounded flex items-center justify-center flex-shrink-0">
                                                    {file.type === 'application/pdf' ? (
                                                        <svg className="w-4 h-4 text-red-600" fill="currentColor" viewBox="0 0 20 20">
                                                            <path fillRule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clipRule="evenodd" />
                                                        </svg>
                                                    ) : (
                                                        <svg className="w-4 h-4 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                                                            <path fillRule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clipRule="evenodd" />
                                                        </svg>
                                                    )}
                                                </div>
                                                <div className="min-w-0 flex-1">
                                                    <p className="text-sm font-medium text-gray-900 truncate">{file.name}</p>
                                                    <p className="text-xs text-gray-500">{formatFileSize(file.size)}</p>
                                                </div>
                                            </div>
                                            <button
                                                type="button"
                                                onClick={() => removeDocument(index)}
                                                className="text-gray-400 hover:text-red-600 ml-2 flex-shrink-0"
                                            >
                                                <X className="w-5 h-5" />
                                            </button>
                                        </div>
                                    ))}
                                </div>
                            )}

                            {errors.medical && (
                                <p className="mt-2 text-sm text-red-600">{errors.medical}</p>
                            )}
                        </div>
                    )}

                    {/* Motif */}
                    <div>
                        <label className="block text-sm font-medium text-gray-700 mb-2">
                            Motif (optionnel)
                        </label>
                        <textarea
                            value={reason}
                            onChange={(e) => setReason(e.target.value)}
                            rows={3}
                            placeholder="Précisez le motif de votre demande..."
                            className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
                        />
                    </div>

                    {/* Info importante */}
                    <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                        <p className="text-sm text-yellow-800">
                            <strong>Important :</strong> Votre manager sera automatiquement informé par email de cette modification.
                        </p>
                    </div>

                    {/* Actions */}
                    <div className="flex gap-3 pt-4">
                        <button
                            type="button"
                            onClick={onClose}
                            className="flex-1 px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 font-medium transition-colors"
                        >
                            Annuler
                        </button>
                        <button
                            type="submit"
                            disabled={isSubmitting}
                            className={`flex-1 px-6 py-3 bg-blue-600 text-white rounded-lg font-medium transition-colors ${isSubmitting
                                    ? 'opacity-50 cursor-not-allowed'
                                    : 'hover:bg-blue-700'
                                }`}
                        >
                            {isSubmitting ? 'Modification...' : 'Modifier la demande'}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
};

export default EditLeaveRequestModal;