const cards = document.querySelectorAll('.card');
const axo = document.getElementById('axo-layer');
const logScroll = document.getElementById('log-scroll');
const hud = document.getElementById('hud');
const counter = document.getElementById('counter');
const dataColumn = document.getElementById('data-column');
const desk = document.getElementById('desk');

// 1. LOGS
const logEntries = ["CONNECTING...", "HANDSHAKE OK", "INJECTING X3DH...", "ROTATION: OK", "ENCRYPTING...", "BYPASSING...", "DECRYPTING..."];
function updateLogs() {
    let text = "";
    for(let i=0; i<20; i++) text += " > " + logEntries[Math.floor(Math.random()*logEntries.length)] + " -- " + Math.random().toString(16).slice(2,8);
    if(logScroll) logScroll.innerText = text;
}
setInterval(updateLogs, 2000);

// 2. VIBRATION
function triggerShake() {
    if(desk) {
        desk.classList.remove('shake-effect');
        void desk.offsetWidth; 
        desk.classList.add('shake-effect');
    }
}

// 3. HUD
function updateHUD() {
    let displayStep = step;
    if (step === 6) displayStep = 5; 
    if (step >= 7) displayStep = step - 1;
    if(counter) counter.innerText = (displayStep < 10 ? "0" : "") + displayStep;
}

// 4. MISE À JOUR DU BUREAU (Logique simplifiée)
let step = 0; // Au chargement, rien n'est affiché

function updateDesk() {
    let activeCardId = "";
    
    // Si on est à l'étape 0, on ne cherche rien
    if (step > 0 && step !== 6) {
        // On ajuste l'ID pour que la slide après l'Axolotl (step 7) 
        // corresponde bien à ta 6ème ou 7ème carte selon ton HTML.
        let cardIndex = (step < 6) ? step : step - 1;
        activeCardId = "c" + cardIndex;
    }

    cards.forEach((card) => {
        card.classList.remove('active', 'background', 'off-screen');
        card.style.opacity = ""; 
        card.style.visibility = "";

        if (step === 0) {
            card.style.opacity = "0";
            card.style.visibility = "hidden";
        } else if (step === 6) {
            // Écran blanc Axolotl : on dégage toutes les cartes du bureau
            card.classList.add('off-screen');
        } else {
            if (card.id === activeCardId) {
                card.classList.add('active');
            } else {
                const cardNum = parseInt(card.id.replace('c', ''));
                const activeNum = parseInt(activeCardId.replace('c', ''));
                if (cardNum < activeNum) {
                    card.classList.add('background');
                }
            }
        }
    });
}

function next() {
    // --- VERROU ÉTAPE 0 : Affiche le titre et s'arrête ---
    if (step === 0) {
        step = 1;
        updateDesk();
        updateHUD();
        triggerShake();
        return; // Très important : on sort de la fonction ici
    }

    // 1. GESTION DES SOUS-ÉTAPES (Step-content)
    let container = (step === 6) ? axo : document.querySelector('.card.active');
    
    if (container) {
        const steps = container.querySelectorAll('.step-content');
        // On cherche le premier qui n'a pas encore la classe active
        const nextSub = Array.from(steps).find(s => !s.classList.contains('active'));
        
        if (nextSub) {
            nextSub.classList.add('active');
            triggerShake();
            return; // On reste sur la carte actuelle
        }
    }

    // 2. CHANGEMENT DE CARTE
    if (step >= 10) return; // Limite selon ton nombre total de slides
    step++;

    // Gestion de l'Axolotl (Slide blanche)
    if (step === 6) { 
        axo.classList.add('show');
        hud.classList.add('dark-mode');
    } else {
        axo.classList.remove('show');
        hud.classList.remove('dark-mode');
    }

    triggerShake();
    updateDesk();
    updateHUD();
}

// Initialisation au chargement
window.onload = () => {
    updateDesk();
    updateHUD();
};

function prev() {
    const activeCard = document.querySelector('.card.active');
    if (activeCard && step !== 6) {
        const steps = activeCard.querySelectorAll('.step-content');
        const currentIdx = Array.from(steps).findIndex(s => s.classList.contains('active'));
        if (steps.length > 0 && currentIdx > 0) {
            // On retire la classe active de la dernière étape affichée
            const visibleSteps = Array.from(steps).filter(s => s.classList.contains('active'));
            visibleSteps[visibleSteps.length - 1].classList.remove('active');
            triggerShake();
            return;
        }
    }

    if (step <= 0) return;

    if (step === 6) {
        axo.classList.remove('show');
        hud.classList.remove('dark-mode');
    } else if (step === 7) {
        axo.classList.add('show');
        hud.classList.add('dark-mode');
    }

    step--;
    triggerShake();
    updateDesk();
    updateHUD();
}

// 6. LISTENERS
window.addEventListener('keydown', e => {
    if (e.key === 'ArrowRight' || e.key === ' ') next();
    if (e.key === 'ArrowLeft') prev();
    if (e.key === 'Escape') location.reload();
});

// 7. DATA STREAM
setInterval(() => {
    let output = "";
    for (let i = 0; i < 50; i++) output += "[0x" + Math.random().toString(16).slice(2, 6).toUpperCase() + "] " + Math.random().toString(16).slice(2, 10) + "\n";
    if(dataColumn) dataColumn.innerText = output;
}, 5000);