// ==========================================
// 1. ASSETS LADEN
// ==========================================
async function loadAssets() {
    const pPromise = new Promise(resolve => {
        playerSprite.src = "assets/player.png";
        playerSprite.onload = resolve;
        playerSprite.onerror = () => { resolve(); };
    });

    const bgPromises = gameConfig.backgrounds.map((bgFile, index) => {
        return new Promise((resolve) => {
            const img = new Image();
            img.src = "assets/" + bgFile;
            img.onload = () => { bgSprites[index] = img; resolve(); };
            img.onerror = () => { resolve(); };
        });
    });

    const obsPromises = gameConfig.obstacles.map(def => {
        return new Promise((resolve) => {
            if (!def.image) { resolve(); return; }
            const img = new Image();
            img.src = "assets/" + def.image;
            img.onload = () => { sprites[def.id] = img; resolve(); };
            img.onerror = () => { resolve(); };
        });
    });

    await Promise.all([pPromise, ...bgPromises, ...obsPromises]);
}


window.startGameClick = async function() {
    if (!isLoaded) return;

    startScreen.style.display = 'none';
    document.body.classList.add('game-active');

    // Score Reset visuell
    score = 0;
    const scoreEl = document.getElementById('score');
    if (scoreEl) scoreEl.innerText = "0";

    // WebSocket Start
    startMusic();
    connectGame();
    resize();
};


window.gameOver = function(reason) {
    if (isGameOver) return;
    isGameOver = true;
    console.log("Game Over:", reason);

    const finalScore = Math.floor(score / 10);
    const currentHighscore = localStorage.getItem('escape_highscore') || 0;

    if (finalScore > currentHighscore) {
        localStorage.setItem('escape_highscore', finalScore);
    }

    if (gameOverScreen) {
        gameOverScreen.style.display = 'flex';
        document.getElementById('finalScore').innerText = finalScore;


        document.getElementById('inputSection').style.display = 'flex';
        document.getElementById('submitBtn').disabled = false;


        loadLeaderboard();
    }
};


window.submitScore = async function() {
    const nameInput = document.getElementById('playerNameInput');
    const name = nameInput.value.trim();
    const btn = document.getElementById('submitBtn');

    if (!name) return alert("Bitte Namen eingeben!");
    btn.disabled = true;

    try {
        const res = await fetch('/api/submit-name', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ sessionId: sessionID, name: name })
        });

        if (!res.ok) throw new Error("Fehler beim Senden");

        const data = await res.json();


        let myClaims = JSON.parse(localStorage.getItem('escape_claims') || '[]');
        myClaims.push({
            name: name,
            score: Math.floor(score / 10),
            code: data.claimCode,
            date: new Date().toLocaleString('de-DE'),
            sessionId: sessionID
        });
        localStorage.setItem('escape_claims', JSON.stringify(myClaims));


        document.getElementById('inputSection').style.display = 'none';
        loadLeaderboard();
        alert(`Gespeichert! Dein Code: ${data.claimCode}`);

    } catch (e) {
        console.error(e);
        alert("Fehler beim Speichern: " + e.message);
        btn.disabled = false;
    }
};


async function loadLeaderboard() {
    try {

        const res = await fetch(`/api/leaderboard?sessionId=${sessionID}`);
        const entries = await res.json();

        let html = "<h3 style='margin-bottom:5px; color:#ffcc00;'>BESTENLISTE</h3>";

        if(entries.length === 0) html += "<div>Noch keine Einträge.</div>";

        entries.forEach(e => {
            const color = e.isMe ? "cyan" : "white"; // Eigener Name in Cyan
            const bgStyle = e.isMe ? "background:rgba(0,255,255,0.1);" : "";

            html += `
            <div style="border-bottom:1px dotted #444; padding:5px; ${bgStyle} display:flex; justify-content:space-between; color:${color}; font-size:12px;">
                <span>#${e.rank} ${e.name}</span>
                <span>${Math.floor(e.score/10)}</span>
            </div>`;
        });

        document.getElementById('leaderboard').innerHTML = html;
    } catch(e) {
        console.error("Leaderboard Error:", e);
    }
}


function gameLoop(timestamp) {
    requestAnimationFrame(gameLoop);

    if (!isLoaded) return;

    if (isGameRunning && !isGameOver) {
        if (!lastTime) lastTime = timestamp;
        const deltaTime = timestamp - lastTime;
        lastTime = timestamp;

        if (deltaTime > 1000) { accumulator = 0; return; }

        accumulator += deltaTime;

        while (accumulator >= MS_PER_TICK) {
            updateGameLogic();
            currentTick++;
            score++;
            accumulator -= MS_PER_TICK;
        }

        const alpha = accumulator / MS_PER_TICK;

        // Score im HUD
        const scoreEl = document.getElementById('score');
        if (scoreEl) scoreEl.innerText = Math.floor(score / 10);
    }

    drawGame(isGameRunning ? accumulator / MS_PER_TICK : 1.0);
}


async function initGame() {
    try {
        const cRes = await fetch('/api/config');
        gameConfig = await cRes.json();

        await loadAssets();
        await loadStartScreenLeaderboard();

        if (typeof getMuteState === 'function') {
            updateMuteIcon(getMuteState());
        }

        isLoaded = true;
        if(loadingText) loadingText.style.display = 'none';
        if(startBtn) startBtn.style.display = 'inline-block';

        const savedHighscore = localStorage.getItem('escape_highscore') || 0;
        const hsEl = document.getElementById('localHighscore');
        if(hsEl) hsEl.innerText = savedHighscore;

        requestAnimationFrame(gameLoop);
        drawGame();

    } catch(e) {
        console.error(e);
        if(loadingText) loadingText.innerText = "Ladefehler (siehe Konsole)";
    }
}


async function loadStartScreenLeaderboard() {
    try {
        const listEl = document.getElementById('startLeaderboardList');
        if (!listEl) return;
        const res = await fetch('/api/leaderboard');
        const entries = await res.json();

        if (entries.length === 0) { listEl.innerHTML = "<div style='padding:20px'>Keine Scores.</div>"; return; }

        let html = "";
        entries.forEach(e => {
            let icon = "#" + e.rank;
            if (e.rank === 1) icon = "🥇"; if (e.rank === 2) icon = "🥈"; if (e.rank === 3) icon = "🥉";
            html += `<div class="hof-entry"><span><span class="hof-rank">${icon}</span> ${e.name}</span><span class="hof-score">${Math.floor(e.score / 10)}</span></div>`;
        });
        listEl.innerHTML = html;
    } catch (e) {}
}


window.toggleAudioClick = function() {
    const muted = toggleMute();

    updateMuteIcon(muted);


    document.getElementById('mute-btn').blur();
};

function updateMuteIcon(isMuted) {
    const btn = document.getElementById('mute-btn');
    if (btn) {
        btn.innerText = isMuted ? "🔇" : "🔊";
        btn.style.color = isMuted ? "#ff4444" : "white";
        btn.style.borderColor = isMuted ? "#ff4444" : "#555";
    }
}


window.showMyCodes = function() {

    openModal('codes');

    const listEl = document.getElementById('codesList');
    if(!listEl) return;


    const rawClaims = JSON.parse(localStorage.getItem('escape_claims') || '[]');

    if (rawClaims.length === 0) {
        listEl.innerHTML = "<div style='padding:20px; text-align:center; color:#666;'>Keine Codes gespeichert.</div>";
        return;
    }


    const sortedClaims = rawClaims
        .map((item, index) => ({ ...item, originalIndex: index }))
        .sort((a, b) => b.score - a.score);

    let html = "";

    sortedClaims.forEach(c => {

        let rankIcon = "📄";
        if (c.score >= 5000) rankIcon = "⭐";
        if (c.score >= 10000) rankIcon = "🔥";
        if (c.score >= 20000) rankIcon = "👑";

        html += `
        <div style="border-bottom:1px solid #444; padding:10px 0; display:flex; justify-content:space-between; align-items:center;">
            <div style="text-align:left;">
                <span style="color:#00e5ff; font-weight:bold; font-size:14px;">${rankIcon} ${c.code}</span> 
                <span style="color:#ffcc00; font-weight:bold;">(${c.score} Pkt)</span><br>
                <span style="color:#aaa; font-size:10px;">${c.name} • ${c.date}</span>
            </div>
            <button onclick="deleteClaim('${c.sessionId}', '${c.code}')" 
                    style="background:transparent; border:1px solid #ff4444; color:#ff4444; padding:5px 10px; font-size:10px; cursor:pointer;">
                LÖSCHEN
            </button>
        </div>`;
    });

    listEl.innerHTML = html;
};


window.deleteClaim = async function(sid, code) {
    if(!confirm("Eintrag wirklich löschen?")) return;


    try {
        await fetch('/api/claim/delete', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ sessionId: sid, claimCode: code })
        });
    } catch(e) {
        console.warn("Server Delete fehlgeschlagen (vielleicht schon weg), lösche lokal...");
    }


    let claims = JSON.parse(localStorage.getItem('escape_claims') || '[]');

    claims = claims.filter(c => c.code !== code);

    localStorage.setItem('escape_claims', JSON.stringify(claims));


    window.showMyCodes();


    if(document.getElementById('startLeaderboardList')) {
        loadStartScreenLeaderboard();
    }
};


window.openModal = function(id) {
    const el = document.getElementById('modal-' + id);
    if(el) el.style.display = 'flex';
}

window.closeModal = function() {
    const modals = document.querySelectorAll('.modal-overlay');
    modals.forEach(el => el.style.display = 'none');
}


window.onclick = function(event) {
    if (event.target.classList.contains('modal-overlay')) {
        closeModal();
    }
}

initGame();