uiManager.js

// ECLIPSE RISING - UI Manager & Screen Transitions

import { saveManager } from "./saveManager.js";
import { bossManager, BossList } from "./bossManager.js";
import { combatManager } from "./combatManager.js";
import { inputManager } from "./inputManager.js";
import { audio } from "./audioManager.js";
import { Spells, renderSpellGuide } from "./spells.js";
import { characterRenderer } from "./characterRenderer.js";

// Safe querySelector helper — never throws on missing element
function qs(id) { return document.getElementById(id); }
function on(id, event, fn) {
    const el = qs(id);
    if (el) el.addEventListener(event, fn);
}

class UIManager {
    constructor() {
        this.currentScreen = "screen-loading";
        this.selectedCharacter = null;
        this.selectedBossId = null;
        this.onStartGameCallback = null;
        this.onSettingsChangeCallback = null;
        this.onCharacterSelectChangeCallback = null;
        this.introTimeout = null;
    }

    init(callbacks) {
        this.onStartGameCallback = callbacks.onStartGame;
        this.onSettingsChangeCallback = callbacks.onSettingsChange;
        this.onCharacterSelectChangeCallback = callbacks.onCharacterSelectChange;

        this._setupListeners();
        this._loadSaveToUI();
        this._runLoadingScreen();
    }

    // ── SCREEN TRANSITIONS ──────────────────────────────
    showScreen(screenId) {
        // Destroy previews if leaving character select screen
        if (this.currentScreen === "screen-char-select" && screenId !== "screen-char-select") {
            characterRenderer.destroyPreviews();
        }

        // Initialize previews if entering character select screen
        if (screenId === "screen-char-select") {
            characterRenderer.initPreviews("canvas-knight-preview", "canvas-sorceress-preview");
        }

        // Music
        if (screenId === "screen-menu") audio.playMusic("menu");
        if (screenId === "screen-battle") audio.playMusic("battle");
        if (screenId === "screen-victory") audio.playMusic("victory");
        if (screenId === "screen-defeat") audio.playMusic("defeat");

        document.querySelectorAll(".screen").forEach(s => s.classList.remove("active"));
        const target = qs(screenId);
        if (target) { target.classList.add("active"); this.currentScreen = screenId; }
    }

    // ── LOADING SCREEN ───────────────────────────────────
    _runLoadingScreen() {
        const bar = qs("loading-progress");
        const status = qs("loading-status");
        const msgs = [
            "Summoning eclipse lords...",
            "Calibrating runic posture rings...",
            "Synthesizing dark wave...",
            "Forging boss armour plates...",
            "Channelling the solar corona...",
            "Ascending to reality...",
        ];
        let pct = 0;

        const tick = setInterval(() => {
            pct += Math.random() * 9 + 5;
            if (pct >= 100) {
                pct = 100;
                if (bar) bar.style.width = "100%";
                clearInterval(tick);
                setTimeout(() => this.showScreen("screen-menu"), 500);
            } else {
                if (bar) bar.style.width = `${pct}%`;
                const idx = Math.min(Math.floor((pct / 100) * msgs.length), msgs.length - 1);
                if (status) status.innerText = msgs[idx];
            }
        }, 110);
    }

    // ── EVENT LISTENERS ──────────────────────────────────
    _setupListeners() {
        // Hover / click sounds on interactive elements
        document.querySelectorAll("button, .char-card, .boss-card").forEach(el => {
            el.addEventListener("mouseenter", () => audio.playUIRuneHover());
            el.addEventListener("click", () => audio.playUIRuneClick());
        });

        // ── MAIN MENU ──
        on("btn-play", "click", () => this.showScreen("screen-char-select"));
        on("btn-instructions", "click", () => this.showScreen("screen-instructions"));
        on("btn-settings", "click", () => this.showScreen("screen-settings"));
        on("btn-credits", "click", () => this.showScreen("screen-credits"));
        // btn-exit removed from HTML — no crash

        // ── SUB-SCREENS BACK ──
        on("btn-instructions-back", "click", () => this.showScreen("screen-menu"));
        on("btn-credits-back", "click", () => this.showScreen("screen-menu"));

        // ── SETTINGS ──
        const sMaster = qs("slider-master");
        const sMusic = qs("slider-music");
        const sSFX = qs("slider-sfx");
        if (sMaster) sMaster.addEventListener("input", e => { qs("val-master").innerText = `${e.target.value}%`; audio.setMasterVolume(e.target.value); });
        if (sMusic) sMusic.addEventListener("input", e => { qs("val-music").innerText = `${e.target.value}%`; audio.setMusicVolume(e.target.value); });
        if (sSFX) sSFX.addEventListener("input", e => { qs("val-sfx").innerText = `${e.target.value}%`; audio.setSFXVolume(e.target.value); });

        const chkWS = qs("chk-websocket");
        const wsRow = document.querySelector(".ws-ip-row");
        if (chkWS && wsRow) {
            chkWS.addEventListener("change", e => {
                wsRow.classList.toggle("hidden", !e.target.checked);
            });
        }

        const chkDiag = qs("chk-diagnostics");
        if (chkDiag) {
            const savedDiag = localStorage.getItem('eclipse_diagnostics') === 'true';
            chkDiag.checked = savedDiag;
            characterRenderer.setDiagnosticsEnabled(savedDiag);
            chkDiag.addEventListener("change", e => {
                characterRenderer.setDiagnosticsEnabled(e.target.checked);
                localStorage.setItem('eclipse_diagnostics', e.target.checked ? 'true' : 'false');
            });
        }
        on("btn-settings-back", "click", () => {
            const wsUrl = qs("txt-websocket-url");
            if (chkWS) inputManager.toggleWebSocket(chkWS.checked, wsUrl ? wsUrl.value : "");
            this.showScreen("screen-menu");
        });
        on("btn-reset-save", "click", () => {
            if (confirm("Reset all progress? This cannot be undone.")) {
                saveManager.reset();
                this._loadSaveToUI();
                alert("Progress reset.");
            }
        });

        // ── CHARACTER SELECT ──
        const knightCard = qs("char-knight");
        const sorceressCard = qs("char-sorceress");
        const btnCharConfirm = qs("btn-char-confirm");

        if (knightCard) {
            knightCard.addEventListener("click", () => {
                knightCard.classList.add("selected");
                if (sorceressCard) sorceressCard.classList.remove("selected");
                this.selectedCharacter = "knight";
                if (btnCharConfirm) { btnCharConfirm.classList.remove("disabled"); btnCharConfirm.removeAttribute("disabled"); }
                if (this.onCharacterSelectChangeCallback) this.onCharacterSelectChangeCallback("knight");
            });
        }
        if (sorceressCard) {
            sorceressCard.addEventListener("click", () => {
                sorceressCard.classList.add("selected");
                if (knightCard) knightCard.classList.remove("selected");
                this.selectedCharacter = "sorceress";
                if (btnCharConfirm) { btnCharConfirm.classList.remove("disabled"); btnCharConfirm.removeAttribute("disabled"); }
                if (this.onCharacterSelectChangeCallback) this.onCharacterSelectChangeCallback("sorceress");
            });
        }
        on("btn-char-back", "click", () => this.showScreen("screen-menu"));
        on("btn-char-confirm", "click", () => {
            if (!this.selectedCharacter) return;
            saveManager.setCharacter(this.selectedCharacter);
            this._refreshBossGrid();
            this.showScreen("screen-boss-select");
        });

        // ── BOSS SELECT ──
        on("btn-boss-back", "click", () => this.showScreen("screen-char-select"));
        on("btn-boss-fight", "click", () => {
            if (this.selectedBossId) this._startCinematic(this.selectedBossId);
        });

        // ── BATTLE INTRO — skip ──
        const introScreen = qs("screen-battle-intro");
        if (introScreen) introScreen.addEventListener("click", () => this._beginDuel());
        window.addEventListener("keydown", e => {
            if (this.currentScreen === "screen-battle-intro" && e.code === "Space") {
                e.preventDefault();
                this._beginDuel();
            }
        });

        // ── VICTORY ──
        on("btn-victory-menu", "click", () => this.showScreen("screen-menu"));
        on("btn-victory-next", "click", () => {
            this._refreshBossGrid();
            this.showScreen("screen-boss-select");
        });

        // ── DEFEAT ──
        on("btn-defeat-retry", "click", () => {
            if (this.selectedBossId) this._startCinematic(this.selectedBossId);
        });
        on("btn-defeat-menu", "click", () => this.showScreen("screen-menu"));

        // ── ENDING ──
        on("btn-ending-restart", "click", () => this.showScreen("screen-menu"));
    }

    // ── SAVE DATA → UI ───────────────────────────────────
    _loadSaveToUI() {
        const data = saveManager.currentData;
        if (data.character) {
            this.selectedCharacter = data.character;
            const card = qs(`char-${data.character}`);
            if (card) card.classList.add("selected");
            const btn = qs("btn-char-confirm");
            if (btn) { btn.classList.remove("disabled"); btn.removeAttribute("disabled"); }
        }
    }

    // ── BOSS GRID UNLOCK STATUS ───────────────────────────
    _refreshBossGrid() {
        const data = saveManager.currentData;
        const btnDuel = qs("btn-boss-fight");
        if (btnDuel) { btnDuel.classList.add("disabled"); btnDuel.setAttribute("disabled", "true"); }
        this.selectedBossId = null;

        for (let id = 1; id <= 4; id++) {
            const card = qs(`boss-card-${id}`);
            if (!card) continue;
            card.className = "boss-card";
            const unlocked = data.unlockedBosses.includes(id);
            if (unlocked) {
                card.classList.remove("locked");
                card.onclick = () => {
                    document.querySelectorAll(".boss-card").forEach(c => c.classList.remove("selected"));
                    card.classList.add("selected");
                    this.selectedBossId = id;
                    if (btnDuel) { btnDuel.classList.remove("disabled"); btnDuel.removeAttribute("disabled"); }
                };
            } else {
                card.classList.add("locked");
                card.onclick = null;
            }
        }
    }

    // ── BATTLE INTRO CINEMATIC ────────────────────────────
    _startCinematic(bossId) {
        const cfg = BossList[bossId];
        if (!cfg) return;

        const playerName = this.selectedCharacter === "sorceress" ? "ECLIPSE SORCERESS" : "ECLIPSE KNIGHT";
        const pEl = qs("intro-player-name"); if (pEl) pEl.innerText = playerName;
        const bEl = qs("intro-boss-name"); if (bEl) bEl.innerText = cfg.name.toUpperCase();
        const tEl = qs("intro-boss-title"); if (tEl) tEl.innerText = cfg.title;
        const dEl = qs("intro-boss-desc"); if (dEl) dEl.innerText = cfg.lore;

        this.showScreen("screen-battle-intro");
        this.introTimeout = setTimeout(() => this._beginDuel(), 5500);
    }

    _beginDuel() {
        if (this.introTimeout) { clearTimeout(this.introTimeout); this.introTimeout = null; }
        if (this.onStartGameCallback && this.selectedBossId) {
            this.onStartGameCallback(this.selectedBossId, this.selectedCharacter);
        }
    }

    // ── BATTLE HUD UPDATE ─────────────────────────────────
    updateBattleHUD() {
        const data = saveManager.currentData;
        const boss = bossManager.currentBoss;
        if (!boss) return;

        // Player
        const lvlEl = qs("player-hud-level"); if (lvlEl) lvlEl.innerText = combatManager.playerLevel;
        const nmEl = qs("player-hud-name"); if (nmEl) nmEl.innerText = data.character === "knight" ? "Eclipse Knight" : "Eclipse Sorceress";

        const hpPct = (combatManager.playerHp / combatManager.playerMaxHp) * 100;
        _setW("player-hp-fill", hpPct);
        _setText("player-hp-current", Math.round(combatManager.playerHp));
        _setText("player-hp-max", combatManager.playerMaxHp);

        const manaPct = (combatManager.playerMana / combatManager.playerMaxMana) * 100;
        _setW("player-mana-fill", manaPct);
        _setText("player-mana-current", Math.round(combatManager.playerMana));
        _setText("player-mana-max", combatManager.playerMaxMana);

        const xpPct = (combatManager.playerXp / combatManager.playerXpNeeded) * 100;
        _setW("player-xp-fill", xpPct);
        _setText("player-xp-current", combatManager.playerXp);
        _setText("player-xp-next", combatManager.playerXpNeeded);

        const pp = qs("player-hud-portrait");
        if (pp) pp.className = `hud-portrait ${data.character}`;

        // Boss
        _setText("boss-hud-name", boss.name);
        const bp = qs("boss-hud-portrait");
        if (bp) bp.className = `hud-portrait ${boss.portraitClass}`;

        const bossHpPct = Math.max(0, (bossManager.hp / boss.maxHp) * 100);
        _setW("boss-hp-fill", bossHpPct);
        _setText("boss-hp-current", Math.round(bossHpPct));

        const armorPct = Math.max(0, (bossManager.armor / boss.maxArmor) * 100);
        _setW("boss-armor-fill", armorPct);
        _setText("boss-armor-current", Math.round(armorPct));

        const ragePct = Math.max(0, bossManager.rage);
        _setW("boss-rage-fill", ragePct);
        _setText("boss-rage-current", Math.round(bossManager.rage));

        // Current spell prompt
        const spellName = combatManager.currentRequestedSpell;
        if (spellName && Spells[spellName]) {
            const sp = Spells[spellName];
            const snEl = qs("current-spell-name");
            if (snEl) { snEl.innerText = sp.name.toUpperCase(); snEl.style.color = sp.color; }
            _setText("spell-exercise-type", sp.exercise);
            _setText("spell-timer-seconds", sp.holdSeconds);
            _setText("spell-key-hint", sp.key);
        }

        _setText("session-count-current", combatManager.spellsCompleted);
        _setText("session-count-target", combatManager.targetSpells);
        _setText("battle-combo", combatManager.combo);
        _setText("battle-streak", combatManager.streak);

        // Rune ring activation
        const allowed = boss.spellsAllowed.map(s => Spells[s] ? Spells[s].key : null).filter(Boolean);
        for (let k = 0; k <= 9; k++) {
            const r = qs(`rune-${k}`);
            if (!r) continue;
            if (allowed.includes(String(k))) r.classList.add("active");
            else { r.classList.remove("active"); r.classList.remove("pulsing"); }
        }

        // Update debug failsafe panel
        let debugPanel = qs("debug-failsafe-panel");
        if (!debugPanel) {
            debugPanel = document.createElement("div");
            debugPanel.id = "debug-failsafe-panel";
            debugPanel.style.position = "absolute";
            debugPanel.style.top = "12px";
            debugPanel.style.left = "50%";
            debugPanel.style.transform = "translateX(-50%)";
            debugPanel.style.background = "rgba(0, 0, 0, 0.85)";
            debugPanel.style.color = "#00ff00";
            debugPanel.style.fontFamily = "monospace";
            debugPanel.style.padding = "8px 16px";
            debugPanel.style.border = "1px solid #00ff00";
            debugPanel.style.borderRadius = "4px";
            debugPanel.style.zIndex = "9999";
            debugPanel.style.fontSize = "13px";
            debugPanel.style.textAlign = "center";
            debugPanel.style.pointerEvents = "none";
            debugPanel.style.display = "flex";
            debugPanel.style.gap = "15px";
            debugPanel.style.justifyContent = "center";

            debugPanel.innerHTML = `
        <div>Boss HP: <span id="debug-boss-hp">-</span></div>
        <div>Last Damage: <span id="debug-last-hit">-</span></div>
        <div>Armor: <span id="debug-armor">-</span></div>
        <div>State: <span id="debug-boss-state">-</span></div>
      `;
            const battleScreen = qs("screen-battle");
            if (battleScreen) {
                battleScreen.appendChild(debugPanel);
            }
        }

        _setText("debug-boss-hp", Math.round(bossManager.hp));
        _setText("debug-last-hit", bossManager.lastDamageDealt !== undefined ? Math.round(bossManager.lastDamageDealt) : 0);
        _setText("debug-armor", Math.round(bossManager.armor));
        _setText("debug-boss-state", bossManager.state.toUpperCase());
    }

    // ── SPELL GUIDE TICK ─────────────────────────────────
    tickSpellGuide(timestamp) {
        if (this.currentScreen !== "screen-battle") return;
        const spellName = combatManager.currentRequestedSpell;
        if (spellName) renderSpellGuide("spell-guide-canvas", spellName, timestamp / 1000);
    }

    // ── FLASH FX ─────────────────────────────────────────
    flashScreenHit() {
        const o = qs("canvas-overlay-damage");
        if (!o) return;
        o.className = "damage-overlay flash-hit";
        setTimeout(() => { o.className = "damage-overlay"; }, 200);
    }
    flashScreenHeal() {
        const o = qs("canvas-overlay-damage");
        if (!o) return;
        o.className = "damage-overlay flash-heal";
        setTimeout(() => { o.className = "damage-overlay"; }, 200);
    }

    // ── VICTORY SCREEN ────────────────────────────────────
    showVictory(bossId) {
        const metrics = combatManager.getVictoryStats(bossId);
        const boss = BossList[bossId];
        _setText("victory-boss-defeated", `${boss.name} Has Been Slain`);
        _setText("v-xp", `+${metrics.xpGained}`);
        _setText("v-accuracy", `${metrics.accuracy}%`);
        _setText("v-count", metrics.spellsCompleted);
        _setText("v-damage", metrics.damageTaken);
        _setText("v-streak", metrics.highestStreak);
        _setText("v-calories", `${metrics.calories} kcal`);
        _setText("v-rank", metrics.rank);

        const badge = qs("v-rank");
        if (badge) {
            badge.className = "rank-badge";
            badge.style.color = (metrics.rank === "SS" || metrics.rank === "S") ? "var(--gold-bright)" : "var(--text-light)";
        }
        this.showScreen("screen-victory");
    }

    showDefeat() { this.showScreen("screen-defeat"); }

    showEnding() {
        const data = saveManager.currentData;
        _setText("ending-char-class", data.character === "knight" ? "Eclipse Knight" : "Eclipse Sorceress");
        _setText("ending-calories", data.stats ? data.stats.totalCalories : 0);
        _setText("ending-total-exercises", data.stats ? data.stats.totalExercises : 0);
        this.showScreen("screen-ending");
    }
}

// ── DOM HELPERS ─────────────────────────────────────────
function _setText(id, val) { const el = qs(id); if (el) el.innerText = val; }
function _setW(id, pct) { const el = qs(id); if (el) el.style.width = `${Math.max(0, Math.min(100, pct))}%`; }

export const uiManager = new UIManager();
export default uiManager;