<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Seguimiento de la ISS</title>
    <!-- Agrega la referencia a Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        #map {
            height: 100%;
            z-index: 0;
        }

        .overlay {
            position: absolute;
            bottom: 18px;
            left: 10px;
            z-index: 1;
            color: #ffffff; /* Texto blanco */
            font-size: 12px;
            background-color: rgba(0, 0, 0, 0.8); /* Fondo negro transparente al 60% */
            padding: 10px;
            max-width: 250px;
            border-radius: 11px;
        }

        .container {
            margin-top: -10px;
        }

        .container h1 {
            margin-top: 6px;
            margin-bottom: 5px;
            font-size: 16px;
            color: #ffffff;
        }

        .clock {
            margin-top: 5px;
            margin-bottom: 4px;
            font-size: 10px;
        }

        /* Estilo para el popup */
        .leaflet-popup-content-wrapper {
            background-color: rgba(0, 0, 0, 0.8); /* Fondo oscuro */
            color: #ffffff; /* Texto blanco */
        }

        .leaflet-popup-content {
            margin-block: 2px;
            margin-left: 2px;
            margin-right: 2px;
            padding: 8px;
            font-size: 10px;
        }

        .leaflet-popup-tip-container {
            display: none; /* Oculta la punta del popup */
        }

        /* Estilo para el botón flotante */
        .share-button {
            position: fixed;
            top: 10px;
            right: 10px;
            background-color: rgba(0, 0, 0, 0.8);
            border: none;
            cursor: pointer;
            z-index: 2;
            display: flex;
            align-items: center;
            border-radius: 7px;
        }

        .share-button img {
            width: 25px;
            height: auto;
            margin-right: 5px;
            margin-left: 5px;
            margin-top: 2px;
            margin-bottom: 2px;
        }
        
        .share-button p {
            margin-top: 2px;
            margin-bottom: 2px;
            margin-left: 2px;
            color: #fff;
            font-size: 10px;
        }

        /* Estilos para el menú desplegable */
        .dropdown {
            position: fixed;
            top: 80px;
            left: 10px;
            z-index: 2;
        }

        .dropdown button {
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 10px;
            font-size: 10px;
            border: none;
            cursor: pointer;
            border-radius: 7px;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: rgba(0, 0, 0, 0.8);
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 3;
            border-radius: 7px;
        }

        .dropdown-content a {
            color: white;
            font-size: 10px;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown-content a:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        /* Estilos para las ventanas modales */
        .modal {
            display: none;
            position: fixed;
            z-index: 4;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: #1a1a1a;
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background-color: #000;
            margin: 15% auto;
            color: #fff;
            padding: 20px;
            border: none;
            width: 80%;
            max-width: 600px;
            border-radius: 10px;
        }
        
        .modal-content h2 {
            font-size: 18px;
            color: #fff;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
        }

        /* Estilos para el video de YouTube */
        .youtube-video-container {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 56.25%; /* Proporción 16:9 para un video responsivo */
            overflow: hidden;
        }
        .youtube-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        /* Estilos para la lista de personas en el espacio */
        #people-list {
            margin-top: 20px;
            font-size: 14px;
        }

        #people-list h3 {
            font-size: 16px;
            margin-bottom: 5px;
        }

        #people-list ul {
            list-style-type: disc;
            margin-left: 20px;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <div class="overlay">
        <div class="container">
            <h1>Seguimiento de la ISS</h1>
            <div class="clock">
                <div id="utc-clock"></div>
                <div id="local-clock"></div>
            </div>
        </div>
    </div>
    <div class="dropdown">
        <button>☰ Menú</button>
        <div class="dropdown-content">
            <a href="#" onclick="openModal('iss-live-cam-modal')">Ver cámara en vivo de la ISS</a>
            <a href="#" onclick="openModal('info-modal')">Información sobre la ISS</a>
            <a href="#" onclick="openModal('about-modal')">Acerca de</a>
            <!-- Nuevo elemento de menú para mostrar las personas en el espacio -->
            <a href="#" onclick="openModal('people-in-space-modal'); fetchPeopleInSpace();">Personas en el espacio</a>
        </div>
    </div>
    <button class="share-button" onclick="shareOnTwitter()">
        <p>Compartir en</p> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/X_logo_2023_%28white%29.png/900px-X_logo_2023_%28white%29.png" alt="X">
    </button>

    <!-- Modal para la cámara en vivo de la ISS -->
    <div id="iss-live-cam-modal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal('iss-live-cam-modal')">×</span>
            <h2>Cámara en vivo de la ISS</h2>
            <!-- Contenedor para el video de YouTube -->
            <div class="youtube-video-container">
                <iframe width="100%" height="315" class="youtube-video" src="https://www.youtube.com/embed/O9mYwRlucZY?si=cMRxoOVV-_tUFRTq?autoplay=1&controls=0&modestbranding=1&showinfo=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
            </div>
        </div>
    </div>

    <!-- Modal para la información sobre la ISS -->
    <div id="info-modal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal('info-modal')">×</span>
            <h2>Información sobre la ISS</h2>
            <p>La Estación Espacial Internacional (ISS) es una estación espacial modular en la órbita baja terrestre.</p>
        </div>
    </div>

    <!-- Modal para la sección "Acerca de" -->
    <div id="about-modal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal('about-modal')">×</span>
            <h2>Acerca de</h2>
            <p>Esta sección sobre la Estación Espacial Internacional ha sido desarrollado por Astrodemia</p>
        </div>
    </div>

    <!-- Modal para mostrar las personas en el espacio -->
    <div id="people-in-space-modal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal('people-in-space-modal')">×</span>
            <h2>Personas en el espacio</h2>
            <div id="people-list">
                <!-- Aquí se insertará la lista de personas en el espacio -->
            </div>
        </div>
    </div>

    <!-- Agrega la referencia a Leaflet JS -->
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <!-- Agrega el script de la aplicación -->
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const utcClock = document.getElementById('utc-clock');
            const localClock = document.getElementById('local-clock');
            let issMarker;
            let mymap;
            let issPath = []; // Historial de posiciones
            let dayMapUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
            let nightMapUrl = 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png';
            let issPathPolyline; // Línea del historial de posiciones

            // Función para inicializar el mapa
            const initializeMap = () => {
                // Crea el mapa utilizando Leaflet
                mymap = L.map('map').setView([0, 0], 3);

                // Agrega el mapa base de OpenStreetMap
                L.tileLayer(dayMapUrl, {
                    attribution: '© OpenStreetMap contributors'
                }).addTo(mymap);
            };

            // Llamada inicial para configurar el mapa
            initializeMap();

            // Función para obtener datos de la posición de la ISS y actualizar el mapa
            const getISSPosition = async () => {
                try {
                    const response = await fetch('https://api.wheretheiss.at/v1/satellites/25544');
                    const data = await response.json();

                    const { latitude, longitude, altitude} = data;

                    // Agrega la posición actual al historial
                    issPath.push([latitude, longitude]);

                    // Elimina el marcador anterior (si existe) y agrega uno nuevo con un icono personalizado
                    if (issMarker) {
                        mymap.removeLayer(issMarker);
                    }

                    // Elimina la línea anterior (si existe)
                    if (issPath.length > 1) {
                        if (mymap.hasLayer(issPathPolyline)) {
                            mymap.removeLayer(issPathPolyline);
                        }
                    }

                    const issIcon = L.icon({
                        iconUrl: 'https://cdn-icons-png.flaticon.com/512/1086/1086098.png',
                        iconSize: [45, 45],
                        iconAnchor: [25, 25],
                        popupAnchor: [0, -20]
                    });

                    issMarker = L.marker([latitude, longitude], { icon: issIcon })
                        .addTo(mymap)
                        .bindPopup(`<b>Estación Espacial Internacional  </b><br>Latitud: ${latitude.toFixed(2)}<br>Longitud: ${longitude.toFixed(2)}<br>Altitud: ${altitude.toFixed(2)} km<br>Ubicación: ${await getISSLocation(latitude, longitude)}`, { className: 'custom-popup' })
                        .openPopup();

                    // Dibuja la línea con el historial de posiciones
                    issPathPolyline = L.polyline(issPath, { color: '#0000FF' }).addTo(mymap);

                    // Centra el mapa en la nueva ubicación de la ISS
                    mymap.setView([latitude, longitude], mymap.getZoom());

                    // Obtiene el nombre del país en función de la latitud y longitud
                    const country = await getCountryName(latitude, longitude);

                    // Actualiza el título
                    updateTitle(country ? `La ISS está pasando por ${country}` : 'Seguimiento de la ISS');
                } catch (error) {
                    console.error('Error al obtener datos de la ISS:', error);
                }
            };

            // Obtener el nombre del país basado en la latitud y longitud
            const getCountryName = async (latitude, longitude) => {
                try {
                    const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${latitude}&lon=${longitude}`);
                    const data = await response.json();

                    return data.address ? data.address.country : null;
                } catch (error) {
                    console.error('Error al obtener el nombre del país:', error);
                    return null;
                }
            };
            
            // Obtener la ubicación de la ISS basada en la latitud y longitud
            const getISSLocation = async (latitude, longitude) => {
                try {
                    const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${latitude}&lon=${longitude}`);
                    const data = await response.json();

                    if (data.address) {
                        const country = data.address.country;
                        return country ? country : 'Ubicación desconocida';
                    }

                    return 'Ubicación desconocida';
                } catch (error) {
                    console.error('Error al obtener la ubicación:', error);
                    return 'Ubicación desconocida';
                }
            };

            // Función para centrar el mapa en la posición actual de la ISS
            window.centerMap = () => {
                if (issMarker) {
                    mymap.setView(issMarker.getLatLng(), mymap.getZoom());
                }
            };

            // Actualizar la información y el mapa cada 8 segundos
            setInterval(getISSPosition, 8000);

            // Obtener la información y mostrar el mapa por primera vez al cargar la página
            getISSPosition();

            // Actualizar relojes cada segundo
            setInterval(() => {
                const now = new Date();

                // Reloj en hora UTC
                const utcTimeString = now.toISOString().split('T')[1].split('.')[0];
                utcClock.textContent = `Hora UTC: ${utcTimeString}`;

                // Reloj en hora local del usuario
                const localTimeString = now.toLocaleTimeString();
                localClock.textContent = `Mi hora: ${localTimeString}`;
            }, 1000);

            // Función para actualizar el título
            const updateTitle = (text) => {
                const title = document.querySelector('.container h1');
                title.textContent = text;
            };

            // Función para actualizar el mapa basado en la hora del día
            const updateMapBasedOnDayTime = async () => {
                try {
                    const response = await fetch('https://api.wheretheiss.at/v1/satellites/25544');
                    const data = await response.json();

                    const { latitude, longitude } = data;

                    const response2 = await fetch(`https://api.sunrise-sunset.org/json?lat=${latitude}&lng=${longitude}&formatted=0`);
                    const data2 = await response2.json();

                    const sunrise = new Date(data2.results.sunrise);
                    const sunset = new Date(data2.results.sunset);
                    const currentTime = new Date();

                    if (currentTime > sunset || currentTime < sunrise) {
                        // Noche
                        mymap.eachLayer(function (layer) {
                            if (layer instanceof L.TileLayer) {
                                layer.setUrl(nightMapUrl);
                            }
                        });
                    } else {
                        // Día
                        mymap.eachLayer(function (layer) {
                            if (layer instanceof L.TileLayer) {
                                layer.setUrl(dayMapUrl);
                            }
                        });
                    }
                } catch (error) {
                    console.error('Error al actualizar el mapa:', error);
                }
            };

            // Actualizar el mapa basado en la hora del día cada 2 segundos
            setInterval(updateMapBasedOnDayTime, 2000); // Cada 2 segundos

            // Actualizar el mapa basado en la hora del día al cargar la página
            updateMapBasedOnDayTime();
            
            // Función para compartir en Twitter
            window.shareOnTwitter = async () => {
                if (issMarker) {
                    const latitude = issMarker.getLatLng().lat;
                    const longitude = issMarker.getLatLng().lng;
                    const location = await getISSLocation(latitude, longitude);
                    const locationForTweet = location === 'Ubicación desconocida' ? 'sobre el Océano' : `sobre ${location}`;
                    const tweetText = `🛰️ La Estación Espacial Internacional se encuentra actualmente ${locationForTweet}. 📱¡Sigue su rastro en tiempo real! #ISS #Astrodemia`;

                    // Abre una nueva ventana con la URL de Twitter prellenada
                    window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent(tweetText)}`, '_blank');
                } else {
                    console.error('No se pudo compartir la ubicación en Twitter porque la ubicación de la ISS no está disponible.');
                }
            };

            // Funciones para abrir y cerrar las ventanas modales
            window.openModal = (modalId) => {
                document.getElementById(modalId).style.display = 'flex';
            };

            window.closeModal = (modalId) => {
                document.getElementById(modalId).style.display = 'none';
            };

            // Función para obtener la lista de personas en el espacio y mostrarla en el modal
            async function fetchPeopleInSpace() {
                try {
                    const response = await fetch('https://corquaid.github.io/international-space-station-APIs/JSON/people-in-space.json');
                    const data = await response.json();
                    const people = data.people;

                    // Agrupar las personas por nave espacial
                    const spacecrafts = {};
                    people.forEach(person => {
                        const craft = person.craft;
                        if (!spacecrafts[craft]) {
                            spacecrafts[craft] = [];
                        }
                        spacecrafts[craft].push(person.name);
                    });

                    // Construir el contenido HTML
                    let htmlContent = '';
                    for (const [craft, names] of Object.entries(spacecrafts)) {
                        htmlContent += `<h3>${craft}</h3><ul>`;
                        names.forEach(name => {
                            htmlContent += `<li>${name}</li>`;
                        });
                        htmlContent += `</ul>`;
                    }

                    // Insertar el contenido en el modal
                    document.getElementById('people-list').innerHTML = htmlContent;

                } catch (error) {
                    console.error('Error al obtener la lista de personas en el espacio:', error);
                    document.getElementById('people-list').innerHTML = '<p>Error al cargar los datos.</p>';
                }
            }

        });
    </script>
</body>
</html>