// ==========================================
// INIT & ASSETS
// ==========================================
async function loadAssets() {
    playerSprite.src = "assets/player.png";

    // Hintergründe laden
    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 = () => {
                console.warn("BG fehlt:", bgFile);
                bgSprites[index] = null;
                resolve();
            };
        });
    });

    // Hindernisse laden
    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(); };
        });
    });

    // Player laden (kleiner Promise Wrapper)
    const pPromise = new Promise(r => {
        playerSprite.onload = r;
        playerSprite.onerror = r;
    });

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

// ==========================================
// START LOGIK
// ==========================================
window.startGameClick = async function() {
    if (!isLoaded) return;
    startScreen.style.display = 'none';
    document.body.classList.add('game-active');
    try {
        const sRes = await fetch('/api/start', {method:'POST'});
        const sData = await sRes.json();
        sessionID = sData.sessionId;
        rng = new PseudoRNG(sData.seed);
        isGameRunning = true;
        maxRawBgIndex = 0;
        lastTime = performance.now();
        resize();
    } catch(e) {
        alert("Start Fehler: " + e.message);
        location.reload();
    }
};

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

    if (!name) return alert("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("Server Error");
        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! Code: ${data.claimCode}`);
    } catch (e) {
        alert("Fehler: " + e.message);
        btn.disabled = false;
    }
};

// ==========================================
// MEINE CODES & LÖSCHEN
// ==========================================
window.showMyCodes = function() {
    if(window.openModal) window.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:10px; 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 => {
        const canDelete = c.sessionId ? true : false;
        const btnStyle = canDelete ? "cursor:pointer; color:#ff4444; border-color:#ff4444;" : "cursor:not-allowed; color:gray; border-color:gray;";
        const btnAttr = canDelete ? `onclick="deleteClaim(${c.originalIndex}, '${c.sessionId}', '${c.code}')"` : "disabled";

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

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

    listEl.innerHTML = html;
};

window.deleteClaim = async function(index, sid, code) {
    if(!confirm("Wirklich löschen?")) return;
    try {
        const res = await fetch('/api/claim/delete', {
            method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ sessionId: sid, claimCode: code })
        });
        if (!res.ok) {
            if(!confirm("Server Fehler (evtl. schon weg). Lokal löschen?")) return;
        }
        let claims = JSON.parse(localStorage.getItem('escape_claims') || '[]');
        claims.splice(index, 1);
        localStorage.setItem('escape_claims', JSON.stringify(claims));
        window.showMyCodes();
        loadLeaderboard();
    } catch(e) { alert("Verbindungsfehler!"); }
};

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

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

        entries.forEach(e => {
            const color = e.isMe ? "yellow" : "white";
            const bgStyle = e.isMe ? "background:rgba(255,255,0,0.1);" : "";

            const betterThanMe = e.rank - 1;
            let infoText = "";

            if (e.isMe && betterThanMe > 0) {
                infoText = `<div style='font-size:8px; color:#aaa;'>(${betterThanMe} waren besser)</div>`;
            } else if (e.isMe && betterThanMe === 0) {
                infoText = `<div style='font-size:8px; color:#ffcc00;'>👑 NIEMAND ist besser!</div>`;
            }

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

            if(e.rank === 3 && entries.length > 3 && !entries[3].isMe) {
                html += "<div style='text-align:center; color:gray; font-size:8px;'>...</div>";
            }
        });

        document.getElementById('leaderboard').innerHTML = html;
    } catch(e) { console.error(e); }
}

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'>Noch 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) {}
}

function gameOver(reason) {
    if (isGameOver) return;
    isGameOver = true;
    const finalScoreVal = Math.floor(score / 10);
    const currentHighscore = localStorage.getItem('escape_highscore') || 0;
    if (finalScoreVal > currentHighscore) localStorage.setItem('escape_highscore', finalScoreVal);
    gameOverScreen.style.display = 'flex';
    document.getElementById('finalScore').innerText = finalScoreVal;
    loadLeaderboard();
    drawGame();
}

// ==========================================
// DER FIXIERTE GAME LOOP
// ==========================================
function gameLoop(timestamp) {
    requestAnimationFrame(gameLoop);

    // 1. Wenn Assets noch nicht da sind, machen wir gar nichts
    if (!isLoaded) return;

    // 2. PHYSIK-LOGIK (Nur wenn Spiel läuft und nicht Game Over)
    // Das hier sorgt dafür, dass der Dino stehen bleibt, wenn wir im Menü sind
    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++;
            if (currentTick - lastSentTick >= CHUNK_SIZE) sendChunk();
            accumulator -= MS_PER_TICK;
        }

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

    // 3. RENDERING (IMMER!)
    // Das hier war das Problem. Früher stand hier "return" wenn !isGameRunning.
    // Jetzt malen wir immer. Wenn isGameRunning false ist, malt er einfach den Start-Zustand.
    drawGame();
}

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

        // Erst alles laden
        await loadAssets();
        await loadStartScreenLeaderboard();

        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;

        // Loop starten (mit dummy timestamp start)
        requestAnimationFrame(gameLoop);

        // Initiales Zeichnen erzwingen (damit Hintergrund sofort da ist)
        drawGame();

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

initGame();