script.js

const apiKey = "2f58f12fc89be85f0e416b032b1a8381"; // Clé API OpenWeatherMap
let ville = "Angers"; // Ville cible
let selectedLang = localStorage.getItem("selectedLanguage") || "Français";

// 🎯 Gestion des traductions
const translations = {
    "Français": {
        "home": "Accueil",
        "temp": "Température",
        "feels_like": "Température ressentie",
        "wind": "Vent",
        "humidity": "Humidité",
        "sky": "Ciel",
        "sunrise": "Lever du soleil",
        "sunset": "Coucher du soleil",
        "selectLang": "Sélectionnez une langue",
        "chooseLang": "🌍 Choisir une langue",
        "selectedLang": "Langue sélectionnée :",
        "changeUnitTitle": "Changer l'unité d'affichage",
        "changeTempUnit": "🔄 Changer l'unité de Température",
        "changeWindUnit": "🔄 Changer l'unité de Vent",
        "chooseCity": "Choisissez une ville",
        "updateCity": "🔄 Mettre à jour la météo",
        "bioTitle": "Biographie d'Oumaima Kaadade",
        "education": "🎓 Formation",
        "educationDesc": "Étudiante en 4ème année de Génie Informatique à Polytech Angers.",
        "experience": "💻 Expériences et Projets",
        "internshipTitle": "Stage chez Capgemini Engineering Maroc",
        "internshipDesc": "Développement d’un système de détection de véhicules avec YOLOv8.",
        "competitions": "🏆 Compétitions",
        "hackathonTitle": "Hackathon Orange Digital Center 🏅",
        "hackathonDesc": "Développement d’une solution pour aider les personnes aveugles."
    },
    "English": {
        "home": "Home",
        "temp": "Temperature",
        "feels_like": "Feels like",
        "wind": "Wind",
        "humidity": "Humidity",
        "sky": "Sky",
        "sunrise": "Sunrise",
        "sunset": "Sunset",
        "selectLang": "Select a language",
        "chooseLang": "🌍 Choose a language",
        "selectedLang": "Selected Language:",
        "changeUnitTitle": "Change Display Unit",
        "changeTempUnit": "🔄 Change Temperature Unit",
        "changeWindUnit": "🔄 Change Wind Unit",
        "chooseCity": "Choose a city",
        "updateCity": "🔄 Update weather",
        "bioTitle": "Biography of Oumaima Kaadade",
        "education": "🎓 Education",
        "educationDesc": "4th-year Computer Engineering student at Polytech Angers.",
        "experience": "💻 Experience & Projects",
        "internshipTitle": "Internship at Capgemini Engineering Morocco",
        "internshipDesc": "Developed a vehicle detection system using YOLOv8.",
        "competitions": "🏆 Competitions",
        "hackathonTitle": "Hackathon Orange Digital Center 🏅",
        "hackathonDesc": "Developed a solution to assist blind people."
    },
    "Español": {
        "home": "Inicio",
        "temp": "Temperatura",
        "feels_like": "Sensación térmica",
        "wind": "Viento",
        "humidity": "Humedad",
        "sky": "Cielo",
        "sunrise": "Amanecer",
        "sunset": "Atardecer",
        "selectLang": "Selecciona un idioma",
        "chooseLang": "🌍 Elegir un idioma",
        "selectedLang": "Idioma seleccionado:",
        "changeUnitTitle": "Cambiar unidad de visualización",
        "changeTempUnit": "🔄 Cambiar unidad de temperatura",
        "changeWindUnit": "🔄 Cambiar unidad de viento",
        "chooseCity": "Elige una ciudad",
        "updateCity": "🔄 Actualizar el clima",
        "bioTitle": "Biografía de Oumaima Kaadade",
        "education": "🎓 Formación",
        "educationDesc": "Estudiante de 4º año de Ingeniería Informática en Polytech Angers.",
        "experience": "💻 Experiencias y Proyectos",
        "internshipTitle": "Prácticas en Capgemini Engineering Marruecos",
        "internshipDesc": "Desarrollo de un sistema de detección de vehículos con YOLOv8.",
        "competitions": "🏆 Competiciones",
        "hackathonTitle": "Hackathon Orange Digital Center 🏅",
        "hackathonDesc": "Desarrollo de una solución para ayudar a personas ciegas."
    }
};

// 🌍 Traduction dynamique de la page
function translatePage(lang) {
    if (!translations[lang]) return console.error("❌ Langue non trouvée :", lang);

    document.querySelectorAll("[data-translate]").forEach(element => {
        const key = element.getAttribute("data-translate");
        if (translations[lang][key]) element.textContent = translations[lang][key];
    });

    const searchInput = document.getElementById("searchLang");
    if (searchInput) searchInput.setAttribute("placeholder", translations[lang]["searchPlaceholder"]);

    localStorage.setItem("selectedLanguage", lang);

    // 🔄 Mise à jour de la météo dans la bonne langue
    litDonnees();
}

// ✅ Gestion de l'affichage des pages
function showPage(pageId) {
    document.querySelectorAll("section").forEach(section => {
        section.style.display = section.id === pageId ? "block" : "none";
    });
}

// 📌 Sélection de la langue
function selectLanguage(lang) {
    document.getElementById("selectedLang").textContent = translations[lang]["selectedLang"] + " " + lang;
    translatePage(lang);
}

// ✅ Gestion de l'affichage du menu de langue
function toggleMenu() {
    const menu = document.getElementById("langMenu");
    menu.classList.toggle("show");
}

// 🌦️ Récupérer la météo depuis OpenWeather
async function litDonnees() {
    try {
        const lang = localStorage.getItem("selectedLanguage") || "Français";
        const langCode = lang === "Français" ? "fr" : lang === "Español" ? "es" : "en";

        // Appel à l'API OpenWeatherMap
        const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${ville}&appid=${apiKey}&units=metric&lang=${langCode}`);
        const data = await response.json();

        if (!response.ok) throw new Error(`Erreur API : ${data.message}`);

        // Mise à jour des valeurs météo
        document.getElementById("temperature").textContent = convertirValeur("temp", data.main.temp);
        document.getElementById("feels_like").textContent = convertirValeur("temp", data.main.feels_like);
        document.getElementById("vent").textContent = convertirValeur("vent", data.wind.speed * 3.6);
        document.getElementById("humiditeValeur").textContent = data.main.humidity + " %";
        document.getElementById("cielValeur").textContent = capitalizeFirstLetter(data.weather[0].description);

        // Affichage de l'icône météo
        const iconUrl = `http://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png`;
        document.getElementById("weatherIcon").src = iconUrl;

        // Convertir timestamp UNIX en heure locale
        document.getElementById("sunrise").textContent = new Date(data.sys.sunrise * 1000).toLocaleTimeString(langCode);
        document.getElementById("sunset").textContent = new Date(data.sys.sunset * 1000).toLocaleTimeString(langCode);

        // ✅ Afficher la ville sélectionnée sur Accueil
        document.getElementById("cityDisplay").textContent = "Météo de : " + ville;

        // Récupérer les coordonnées GPS pour l'API Sunrise-Sunset
        const lat = data.coord.lat;
        const lon = data.coord.lon;
        getSunriseSunset(lat, lon, langCode);

        // Initialiser la carte avec l'icône météo
        initMap(lat, lon, iconUrl);

    } catch (error) {
        console.error("⚠️ Erreur lors de la récupération des données météo :", error);
    }
}

// 🔘 Changer d’unité
function changerUnite(type) {
    unitesChoisies[type] = (unitesChoisies[type] + 1) % unitesPossibles[type].length;
    litDonnees();
}

// 🔁 Conversion des unités
const unitesPossibles = {
    temp: ["°C", "°F", "K"],
    vent: ["km/h", "m/s"]
};
let unitesChoisies = { temp: 0, vent: 0 };

function convertirValeur(type, valeur) {
    if (type === "temp") {
        if (unitesChoisies.temp === 1) return (valeur * 9 / 5 + 32).toFixed(1) + " °F"; // Conversion en Fahrenheit
        if (unitesChoisies.temp === 2) return (valeur + 273.15).toFixed(2) + " K"; // Conversion en Kelvin
        return valeur.toFixed(1) + " °C"; // Par défaut en Celsius
    }
    if (type === "vent") {
        if (unitesChoisies.vent === 1) return (valeur / 3.6).toFixed(2) + " m/s"; // Conversion en m/s
        return valeur.toFixed(1) + " km/h"; // Par défaut en km/h
    }
    return valeur.toFixed(1);
}

// 🏆 Fonction pour capitaliser la première lettre
function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

// 🌅 Récupérer les heures de lever et coucher du soleil
async function getSunriseSunset(lat, lon, langCode) {
    try {
        const response = await fetch(`https://api.sunrisesunset.io/json?lat=${lat}&lng=${lon}`);
        const data = await response.json();

        if (!response.ok) throw new Error(`Erreur API : ${data.message}`);

        // Convertir les heures de lever et coucher du soleil en objets Date
        const sunriseTime = convertTimeToDate(data.results.sunrise);
        const sunsetTime = convertTimeToDate(data.results.sunset);

        // Mise à jour des heures de lever et coucher du soleil
        document.getElementById("sunrise").textContent = sunriseTime.toLocaleTimeString(langCode);
        document.getElementById("sunset").textContent = sunsetTime.toLocaleTimeString(langCode);

    } catch (error) {
        console.error("⚠️ Erreur lors de la récupération des heures de lever et coucher du soleil :", error);
    }
}

// Fonction pour convertir le format HH:MM:SS AM/PM en objet Date
function convertTimeToDate(timeString) {
    const [time, modifier] = timeString.split(" ");
    let [hours, minutes, seconds] = time.split(":");

    if (modifier === "PM" && hours !== "12") {
        hours = parseInt(hours, 10) + 12;
    }
    if (modifier === "AM" && hours === "12") {
        hours = "00";
    }

    const date = new Date();
    date.setHours(hours);
    date.setMinutes(minutes);
    date.setSeconds(seconds);

    return date;
}

// 🗺️ Initialiser la carte OpenLayers
function initMap(lat, lon, iconUrl) {
    const map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([lon, lat]),
            zoom: 10
        })
    });

    const iconLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [
                new ol.Feature({
                    geometry: new ol.geom.Point(ol.proj.fromLonLat([lon, lat])),
                    icon: iconUrl
                })
            ]
        })
    });

    map.addLayer(iconLayer);
}

// 🏁 Initialisation au chargement
document.addEventListener("DOMContentLoaded", function () {
    const savedLang = localStorage.getItem("selectedLanguage") || "Français";
    const savedCity = localStorage.getItem("selectedCity") || "Angers"; // Ville par défaut
    ville = savedCity; // Met à jour la ville avec la valeur sauvegardée

    translatePage(savedLang);
    litDonnees(); // Appel de la fonction litDonnees() pour récupérer les données météo
    document.getElementById("selectedLang").textContent = translations[savedLang]["selectedLang"] + " " + savedLang;
    showPage('home'); // Affiche la page d'accueil par défaut
});

// 🔄 Mise à jour météo toutes les 10 minutes
setInterval(litDonnees, 600000);

// Fonction pour mettre à jour la ville
function updateCity() {
    const cityInput = document.getElementById("cityInput").value.trim();
    if (cityInput) {
        ville = cityInput; // Met à jour la ville
        localStorage.setItem("selectedCity", ville); // Sauvegarde en localStorage
        document.getElementById("cityDisplay").textContent = "Météo de : " + ville;
        litDonnees(); // Recharge la météo pour la nouvelle ville
    }
}