import React, { useEffect, useState } from 'react';
import Header from '../components/Header';
import WelcomeSection from '../components/WelcomeSections';
import MyCalendar from '../components/MyCalendar';
import NewLeaveRequestForm from '../components/NewLeaveRequestForm';
import LeaveCounters from '../components/LeaveCounters';
import '../pages/Dashboard.css';
import { useAuth } from '../context/AuthContext';

export default function DashboardPage() {
    const { user } = useAuth();

    const [showLeaveForm, setShowLeaveForm] = useState(false);
    const [selectedDateRange, setSelectedDateRange] = useState([]);

    // Initialisation sécurisée avec des valeurs par défaut
    const [availableCounters, setAvailableCounters] = useState({
        availableCP: 0,
        rttInProcess: 0,
        absenteism: 0,
        availableRTT: 0,
        availableABS: 0
    });

    const [isLoadingCounters, setIsLoadingCounters] = useState(true);
    const [countersError, setCountersError] = useState(null);

    const fetchCounters = async () => {
        setIsLoadingCounters(true);
        setCountersError(null);
        const userId = user?.id;

        if (!userId) {
            console.error("DashboardPage: User ID is not available for fetching counters.");
            setCountersError("ID utilisateur non disponible. Impossible de charger les soldes.");
            setIsLoadingCounters(false);
            return;
        }

        try {
            console.log("DashboardPage: Début de la récupération des compteurs pour userId:", userId);
            const response = await fetch(`http://localhost/GestionDemandeCongeV1/api/getLeaveCounters.php?user_id=${userId}`);

            if (!response.ok) {
                throw new Error(`Erreur HTTP: ${response.status} - ${response.statusText}`);
            }

            const data = await response.json();
            console.log("DashboardPage: Données reçues du backend pour compteurs:", data);

            if (data.success && data.counters) {
                setAvailableCounters({
                    availableCP: data.counters.availableCP ?? 0,
                    rttInProcess: data.counters.rttInProcess ?? 0,
                    absenteism: data.counters.absenteism ?? 0,
                    availableRTT: data.counters.availableRTT ?? 0,
                    availableABS: data.counters.availableABS ?? 0,
                });
            } else {
                setCountersError(data.message || "Erreur inconnue lors de la récupération des compteurs.");
                setAvailableCounters({
                    availableCP: 0,
                    rttInProcess: 0,
                    absenteism: 0,
                    availableRTT: 0,
                    availableABS: 0
                });
            }
        } catch (error) {
            console.error("DashboardPage: Erreur réseau ou du serveur lors de la récupération des compteurs:", error);
            setCountersError("Impossible de se connecter au serveur pour charger les soldes de congés.");
            setAvailableCounters({
                availableCP: 0,
                rttInProcess: 0,
                absenteism: 0,
                availableRTT: 0,
                availableABS: 0
            });
        } finally {
            setIsLoadingCounters(false);
        }
    };

    useEffect(() => {
        fetchCounters();
    }, [user]);

    const handleDaySelect = (date) => {
        if (selectedDateRange.length === 0) {
            setSelectedDateRange([date]);
        } else if (selectedDateRange.length === 1) {
            let start = selectedDateRange[0];
            let end = date;

            if (start.getTime() > end.getTime()) {
                [start, end] = [end, start];
            }
            setSelectedDateRange([start, end]);
            setShowLeaveForm(true);
        } else {
            setSelectedDateRange([date]);
            setShowLeaveForm(false);
        }
    };

    const handleClearSelection = () => {
        setSelectedDateRange([]);
        setShowLeaveForm(false);
    };

    const handleCloseForm = () => {
        setShowLeaveForm(false);
        setSelectedDateRange([]);
        fetchCounters(); // Refresh counters
    };

    return (
        <div className="dashboard-page-container">
            <div className="dashboard-left-column">
                <Header />
                <WelcomeSection />
                <MyCalendar
                    onDaySelect={handleDaySelect}
                    selectedDateRange={selectedDateRange}
                    onClearSelection={handleClearSelection}
                />

                <LeaveCounters
                    availableCP={availableCounters.availableCP}
                    rttInProcess={availableCounters.rttInProcess}
                    absenteism={availableCounters.availableABS} 
                    isLoading={isLoadingCounters}
                    error={countersError}
                />


                <div style={{ padding: '10px', borderTop: '1px solid #eee', marginTop: '20px' }}>
                    <h3>Soldes de Congés (vérification):</h3>
                    {isLoadingCounters ? (
                        <p>Chargement des soldes...</p>
                    ) : countersError ? (
                        <p style={{ color: 'red' }}>Erreur: {countersError}</p>
                    ) : (
                        <ul>
                            <li>CP: {availableCounters.availableCP} jours</li>
                            <li>RTT: {availableCounters.availableRTT} jours</li>
                            <li>ABS: {availableCounters.availableABS} jours</li>
                        </ul>
                    )}
                </div>
            </div>

            {showLeaveForm ? (
                <div className="dashboard-right-column form-overlay">
                    {!isLoadingCounters ? (
                        <NewLeaveRequestForm
                            startDate={selectedDateRange[0]}
                            endDate={selectedDateRange[1]}
                            onClose={handleCloseForm}
                            availableLeaveCounters={availableCounters}
                            userId={user?.id}
                        />
                    ) : (
                        <p>Veuillez patienter pendant le chargement des soldes de congés pour afficher la demande.</p>
                    )}
                </div>
            ) : (
                <div className="dashboard-right-column welcome-right-panel">
                    <h2 className="panel-title">Bienvenue sur votre espace congés !</h2>
                    <p>Cliquez sur un jour du calendrier pour commencer une demande de congé. Sélectionnez une deuxième date pour définir une plage.</p>
                </div>
            )}
        </div>
    );
}
