import React, { useState } from 'react';
import axios from 'axios';
import './LoginPage.css';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';

export default function LoginPage() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const navigate = useNavigate();
    const { login } = useAuth();

    const handleLogin = async (e) => {
        e.preventDefault();
        try {
            const response = await axios.post('http://localhost/GestionDemandeCongeV1/api/login.php', {
                email,
                mot_de_passe: password,
            });

            if (response.data.success) {
                // IMPORTANT : Adaptez ceci en fonction de ce que votre API PHP renvoie exactement
                const userData = {
                    id: response.data.user.id || null,
                    // Supposons que votre API renvoie 'prenom' et 'nom'
                    prenom: response.data.user.prenom || 'Utilisateur', // Prénom
                    nom: response.data.user.nom || '',               // Nom
                    email: response.data.user.email || email,
                    // Vous pouvez toujours garder un champ 'fullName' si utile ailleurs
                    fullName: (response.data.user.prenom && response.data.user.nom)
                        ? `${response.data.user.prenom} ${response.data.user.nom}`
                        : (response.data.user.prenom || email)
                };

                login(userData); // Passe l'objet utilisateur structuré au contexte
                navigate('/dashboard');
            } else {
                alert(`Erreur de connexion : ${response.data.message || 'identifiants invalides'}`);
            }
        } catch (err) {
            console.error("Erreur de connexion :", err);
            if (err.response) {
                alert(`Erreur du serveur : ${err.response.data.message || 'Problème de connexion'}`);
            } else if (err.request) {
                alert("Erreur réseau : Le serveur ne répond pas. Vérifiez votre connexion.");
            } else {
                alert("Erreur inattendue lors de la connexion.");
            }
        }
    };

    return (
        <div className="login-container">
            <div className="image-side">
                <img src="/PageAccueil_Calendrier.png" alt="Logo de l'application" className="login-image" />
            </div>
            <div className="form-side">
                <h1>Mes Congés</h1>
                <form onSubmit={handleLogin}>
                    <label htmlFor="email">Email</label>
                    <input
                        type="email"
                        id="email"
                        value={email}
                        onChange={e => setEmail(e.target.value)}
                        required
                    />

                    <label htmlFor="password">Mot de passe</label>
                    <div className="password-wrapper">
                        <input
                            type="password"
                            id="password"
                            value={password}
                            onChange={e => setPassword(e.target.value)}
                            required
                        />
                    </div>

                    <button type="submit">Se connecter</button>
                </form>
            </div>
        </div>
    );
}