/**
 * Ročníková práce: Interaktivní průvodce vesmírem
 * Předmět: Webové technologie (2. ročník)
 * Modul: Kompletní interaktivita (Vanilla JS ES6+)
 */

document.addEventListener('DOMContentLoaded', () => {

    // ==========================================
    // 1. SEKCE: VESMÍRNÁ KALKULAČKA
    // ==========================================
    const weightInput = document.getElementById('weight-input');
    const calcButton  = document.getElementById('calc-btn');
    const calcResult  = document.getElementById('calc-result');

    const spaceGravity = {
        merkur: { name: 'Merkur',  factor: 0.38,  icon: '🪐' },
        venuse: { name: 'Venuše',  factor: 0.91,  icon: '🌍' },
        mars:   { name: 'Mars',    factor: 0.38,  icon: '🔴' },
        jupiter:{ name: 'Jupiter', factor: 2.34,  icon: '🟤' },
        saturn: { name: 'Saturn',  factor: 1.06,  icon: '🪐' },
        uran:   { name: 'Uran',    factor: 0.92,  icon: '🔵' },
        neptun: { name: 'Neptun',  factor: 1.19,  icon: '🔵' },
        mesic:  { name: 'Měsíc',   factor: 0.166, icon: '⚪' }
    };

    const calculateSpaceWeight = () => {
        const earthWeight = parseFloat(weightInput.value);

        if (isNaN(earthWeight) || earthWeight <= 0) {
            calcResult.innerHTML = `
                <p style="color:#ef4444;font-weight:bold;" role="alert">
                    ⚠️ Prosím, zadej platnou kladnou váhu v kilogramech.
                </p>`;
            return;
        }

        let resultHTML = `
            <h3 style="margin-bottom:15px;color:#fff;">Tvoje váha ve vesmíru:</h3>
            <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:15px;">`;

        Object.keys(spaceGravity).forEach(key => {
            const planet      = spaceGravity[key];
            const planetWeight = (earthWeight * planet.factor).toFixed(1);
            resultHTML += `
                <div style="background:rgba(255,255,255,0.03);padding:12px;border-radius:8px;text-align:center;border:1px solid rgba(255,255,255,0.05);">
                    <span style="font-size:1.5rem;display:block;margin-bottom:5px;">${planet.icon}</span>
                    <strong style="display:block;color:#fff;">${planet.name}</strong>
                    <span style="font-size:1.1rem;color:#06b6d4;font-weight:bold;">${planetWeight} kg</span>
                </div>`;
        });

        resultHTML += `</div>`;
        calcResult.innerHTML = resultHTML;
    };

    if (calcButton)  calcButton.addEventListener('click', calculateSpaceWeight);
    if (weightInput) weightInput.addEventListener('keypress', e => {
        if (e.key === 'Enter') calculateSpaceWeight();
    });


    // ==========================================
    // 2. SEKCE: DETAIL PLANETY – modální dialog
    // ==========================================

    const planetDetails = {

        mars: {
            title:      'Mars',
            subtitle:   'Rudá planeta',
            color:      '#c1440e',
            colorLight: 'rgba(193,68,14,0.15)',
            orbStyle:   'radial-gradient(circle at 35% 35%, #e8855a, #c1440e 55%, #6b2000)',
            stats: [
                { label: 'Vzdálenost od Slunce', value: '227,9 mil. km' },
                { label: 'Průměr',                value: '6 779 km'      },
                { label: 'Délka dne',             value: '24 h 37 min'   },
                { label: 'Délka roku',            value: '687 poz. dní'  },
                { label: 'Gravitace',             value: '3,72 m/s²'     },
                { label: 'Měsíce',                value: 'Phobos, Deimos'},
            ],
            facts: [
                { icon: '🏔️', text: 'Olympus Mons – nejvyšší hora sluneční soustavy (22 km)' },
                { icon: '🌋', text: 'Valles Marineris – kaňon dlouhý přes 4 000 km' },
                { icon: '🤖', text: 'Rover Perseverance zkoumá povrch od roku 2021' },
                { icon: '💧', text: 'Stopy dávného kapalného vody v geologických vrstvách' },
                { icon: '🌡️', text: 'Teploty od −125 °C v zimě až po +20 °C v létě' },
                { icon: '🌬️', text: 'Atmosféra tvoří z 95 % oxid uhličitý' },
            ],
            description: 'Mars je čtvrtá planeta sluneční soustavy. Svůj načervenalý vzhled získal díky oxidu železitému na povrchu. Je cílem intenzivního vědeckého výzkumu zaměřeného na možnost minulého nebo současného života.'
        },

        venuse: {
            title:      'Venuše',
            subtitle:   'Žhavá sestra Země',
            color:      '#e8a020',
            colorLight: 'rgba(232,160,32,0.14)',
            orbStyle:   'radial-gradient(circle at 35% 35%, #f5d08a, #e8a020 55%, #7a4a00)',
            stats: [
                { label: 'Vzdálenost od Slunce', value: '108,2 mil. km' },
                { label: 'Průměr',                value: '12 104 km'    },
                { label: 'Délka dne',             value: '243 poz. dní' },
                { label: 'Délka roku',            value: '225 poz. dní' },
                { label: 'Gravitace',             value: '8,87 m/s²'    },
                { label: 'Měsíce',                value: 'Žádné'        },
            ],
            facts: [
                { icon: '🌡️', text: 'Povrchová teplota dosahuje až 465 °C – nejteplejší planeta' },
                { icon: '🔄', text: 'Rotuje pozpátku – Slunce na Venuši vychází na západě' },
                { icon: '☁️', text: 'Hustá atmosféra z CO₂ způsobuje skleníkový efekt' },
                { icon: '🌩️', text: 'Mraky jsou tvořeny kyselinou sírovou' },
                { icon: '🚀', text: 'Sovětský Venera 7 byl první sondou na povrchu (1970)' },
                { icon: '⏱️', text: 'Den na Venuši je delší než její rok' },
            ],
            description: 'Venuše je druhá planeta od Slunce a nejbližší soused Země. Přes podobnou velikost je její povrch zcela nehostinný – extrémní teploty, drtivý tlak atmosféry a kyselinové mraky.'
        },

        mesic: {
            title:      'Měsíc',
            subtitle:   'Přirozený satelit Země',
            color:      '#a0a8b8',
            colorLight: 'rgba(160,168,184,0.13)',
            orbStyle:   'radial-gradient(circle at 35% 35%, #d8dce8, #a0a8b8 55%, #444860)',
            stats: [
                { label: 'Vzdálenost od Země', value: '384 400 km'   },
                { label: 'Průměr',              value: '3 474 km'     },
                { label: 'Délka dne',           value: '27,3 poz. dní'},
                { label: 'Oběžná doba',         value: '27,3 dní'     },
                { label: 'Gravitace',           value: '1,62 m/s²'    },
                { label: 'Atmosféra',           value: 'Prakticky žádná'},
            ],
            facts: [
                { icon: '👨‍🚀', text: 'Apollo 11 (1969) – první lidé na jiném světě' },
                { icon: '🌊', text: 'Gravitace Měsíce způsobuje příliv a odliv na Zemi' },
                { icon: '🌑', text: 'Vždy vidíme jen jednu stranu – synchronní rotace' },
                { icon: '💧', text: 'Vědci potvrdili přítomnost ledu v polárních kráterech' },
                { icon: '🛸', text: 'Plánovaný návrat lidí programem Artemis NASA' },
                { icon: '🌕', text: 'Vznikl srážkou Země s tělesem velikosti Marsu' },
            ],
            description: 'Měsíc je jediný přirozený satelit Země a páté největší těleso sluneční soustavy. Je to jediné mimozemské těleso, které navštívil člověk. Jeho gravitace stabilizuje sklon zemské osy.'
        },

        uran: {
            title:      'Uran',
            subtitle:   'Ledový obr na boku',
            color:      '#4fc4cf',
            colorLight: 'rgba(79,196,207,0.13)',
            orbStyle:   'radial-gradient(circle at 35% 35%, #a8e8f0, #4fc4cf 55%, #1a5a70)',
            stats: [
                { label: 'Vzdálenost od Slunce', value: '2,87 mld. km'  },
                { label: 'Průměr',                value: '51 118 km'     },
                { label: 'Délka dne',             value: '17 h 14 min'   },
                { label: 'Délka roku',            value: '84 poz. let'   },
                { label: 'Gravitace',             value: '8,69 m/s²'     },
                { label: 'Měsíce',                value: '28 (Miranda…)' },
            ],
            facts: [
                { icon: '↔️', text: 'Rotuje téměř "na boku" – osa náklonu je 98°' },
                { icon: '🥶', text: 'Nejchladnější atmosféra v soustavě (−224 °C)' },
                { icon: '💎', text: 'Uvnitř se možná nacházejí oceány diamantů' },
                { icon: '💨', text: 'Atmosféra obsahuje methan, který dává modrý nádech' },
                { icon: '🪐', text: 'Má 13 prstenců – mnohem slabších než Saturn' },
                { icon: '🔭', text: 'Objeven Williamem Herschelem v roce 1781' },
            ],
            description: 'Uran je sedmá planeta sluneční soustavy a první objevená dalekohledem. Patří mezi ledové obry – jeho vnitřek tvoří led z vody, amoniaku a metanu. Díky metanu v atmosféře má charakteristický tyrkysový vzhled.'
        },

        jupiter: {
            title:      'Jupiter',
            subtitle:   'Král planet',
            color:      '#c88040',
            colorLight: 'rgba(200,128,64,0.14)',
            orbStyle:   'radial-gradient(circle at 35% 35%, #f0c080, #c88040 50%, #7a4010)',
            stats: [
                { label: 'Vzdálenost od Slunce', value: '778,5 mil. km' },
                { label: 'Průměr',                value: '142 984 km'    },
                { label: 'Délka dne',             value: '9 h 56 min'    },
                { label: 'Délka roku',            value: '11,9 poz. let' },
                { label: 'Gravitace',             value: '24,79 m/s²'    },
                { label: 'Měsíce',                value: '95 (Europa…)'  },
            ],
            facts: [
                { icon: '🌀', text: 'Velká rudá skvrna – bouře trvající přes 350 let' },
                { icon: '🏆', text: 'Největší planeta – pojme 1 300 Zemí' },
                { icon: '🛡️', text: 'Gravitací chrání vnitřní planety před asteroidy' },
                { icon: '🌊', text: 'Europa – měsíc s oceánem pod ledem, možný život' },
                { icon: '⚡', text: 'Nejsilnější magnetické pole ze všech planet' },
                { icon: '🚀', text: 'Sondy Voyager, Galileo a Juno zkoumaly Jupiter' },
            ],
            description: 'Jupiter je pátá a zároveň největší planeta sluneční soustavy – více než dvojnásobek hmotnosti všech ostatních planet dohromady. Je to plynný obr bez pevného povrchu, složený převážně z vodíku a helia.'
        },

        neptun: {
            title:      'Neptun',
            subtitle:   'Větrný obr hlubokého vesmíru',
            color:      '#3060c8',
            colorLight: 'rgba(48,96,200,0.14)',
            orbStyle:   'radial-gradient(circle at 35% 35%, #80a8f8, #3060c8 55%, #0a1a60)',
            stats: [
                { label: 'Vzdálenost od Slunce', value: '4,49 mld. km'  },
                { label: 'Průměr',                value: '49 528 km'     },
                { label: 'Délka dne',             value: '16 h 6 min'    },
                { label: 'Délka roku',            value: '164,8 poz. let'},
                { label: 'Gravitace',             value: '11,15 m/s²'    },
                { label: 'Měsíce',                value: '16 (Triton…)'  },
            ],
            facts: [
                { icon: '💨', text: 'Nejsilnější větry v soustavě – přes 2 100 km/h' },
                { icon: '🔭', text: 'Jediná planeta předpovězená matematicky před objevem (1846)' },
                { icon: '🌀', text: 'Velká tmavá skvrna – obří bouře podobná Jupiterově' },
                { icon: '🛸', text: 'Triton – jediný velký měsíc obíhající pozpátku' },
                { icon: '❄️', text: 'Uvnitř možná existuje oceán velmi horkého vody pod tlakem' },
                { icon: '🚀', text: 'Jediná návštěva sondou: Voyager 2 v roce 1989' },
            ],
            description: 'Neptun je osmá a nejvzdálenější planeta sluneční soustavy. Je to ledový obr s nejdivočejším počasím v celé soustavě. Od Slunce je tak vzdálený, že jeden rok trvá přes 164 pozemských let.'
        }
    };

    // Vytvoříme modální dialog a přidáme ho do dokumentu
    const modal = document.createElement('dialog');
    modal.id = 'planet-modal';
    modal.setAttribute('aria-modal', 'true');
    modal.setAttribute('aria-labelledby', 'modal-title');
    modal.innerHTML = `<div class="modal-inner" id="modal-content"></div>`;
    document.body.appendChild(modal);

    modal.addEventListener('click', e => {
        if (e.target === modal) closeModal();
    });
    modal.addEventListener('cancel', e => {
        e.preventDefault();
        closeModal();
    });

    function closeModal() {
        modal.classList.remove('modal-open');
        setTimeout(() => modal.close(), 280);
    }

    function openModal(planetKey) {
        const data = planetDetails[planetKey];
        if (!data) return;

        const statsHTML = data.stats.map(s => `
            <div class="modal-stat">
                <span class="modal-stat-label">${s.label}</span>
                <span class="modal-stat-value">${s.value}</span>
            </div>`).join('');

        const factsHTML = data.facts.map(f => `
            <div class="modal-fact">
                <span class="modal-fact-icon">${f.icon}</span>
                <span>${f.text}</span>
            </div>`).join('');

        document.getElementById('modal-content').innerHTML = `
            <div class="modal-header" style="--planet-color:${data.color};--planet-color-light:${data.colorLight};">
                <div class="modal-planet-visual">
                    <div class="modal-planet-orb" style="background:${data.orbStyle};"></div>
                    <div class="modal-planet-ring"></div>
                </div>
                <div class="modal-header-text">
                    <p class="modal-subtitle">${data.subtitle}</p>
                    <h2 id="modal-title">${data.title}</h2>
                    <p class="modal-description">${data.description}</p>
                </div>
                <button class="modal-close" aria-label="Zavřít detail planety"
                    onclick="document.getElementById('planet-modal').dispatchEvent(new Event('cancel'))">✕</button>
            </div>
            <div class="modal-body">
                <section class="modal-section">
                    <h3 class="modal-section-title">Základní údaje</h3>
                    <div class="modal-stats-grid">${statsHTML}</div>
                </section>
                <section class="modal-section">
                    <h3 class="modal-section-title">Zajímavosti</h3>
                    <div class="modal-facts-list">${factsHTML}</div>
                </section>
            </div>`;

        modal.showModal();
        requestAnimationFrame(() => requestAnimationFrame(() => modal.classList.add('modal-open')));
    }

    const detailButtons = document.querySelectorAll('button[data-planet]');
    detailButtons.forEach(button => {
        button.addEventListener('click', () => openModal(button.getAttribute('data-planet')));
    });

});