document.addEventListener('DOMContentLoaded', function () {
    const statusEl = document.getElementById('status');
    const predictionDisplayEl = document.getElementById('prediction-display');
    const confidenceLabelEl = document.getElementById('confidence-label');
    const confidenceBarEl = document.getElementById('confidence-bar');
    const historyListEl = document.getElementById('history-list');

    let history = [];

    function generatePrediction() {
        const multiplier = (Math.random() * 9 + 1.1).toFixed(2);
        const confidence = Math.floor(Math.random() * 26) + 70; // 70% to 95%
        return { multiplier, confidence };
    }

    function simulateResult(prediction) {
        // 80% chance of "success" (result > prediction) for simulation purposes
        const success = Math.random() < 0.8;
        let result;
        if (success) {
            result = (parseFloat(prediction.multiplier) + Math.random() * 2).toFixed(2);
        } else {
            result = (Math.random() * (parseFloat(prediction.multiplier) - 1) + 1).toFixed(2);
        }
        return { result, success };
    }

    function updateHistory() {
        historyListEl.innerHTML = '';
        for (const item of history) {
            const li = document.createElement('li');
            const resultClass = item.result.success ? 'success' : 'failure';
            const resultText = item.result.success ? `Crashed @ ${item.result.result}x` : `Crashed @ ${item.result.result}x`;
            
            li.innerHTML = `
                <span class="history-prediction">Predicted: ${item.prediction.multiplier}x</span>
                <span class="history-result ${resultClass}">${resultText}</span>
            `;
            historyListEl.prepend(li);
        }
    }

    function runCycle() {
        // 1. Waiting phase
        statusEl.textContent = 'Waiting for next round...';
        predictionDisplayEl.textContent = '-.--x';
        confidenceLabelEl.textContent = 'Confidence';
        confidenceBarEl.style.width = '0%';

        // 2. Predicting phase
        setTimeout(() => {
            statusEl.textContent = 'Analyzing...';
        }, 4000);

        // 3. Show prediction
        setTimeout(() => {
            const prediction = generatePrediction();
            statusEl.textContent = 'Prediction for next round:';
            predictionDisplayEl.textContent = `${prediction.multiplier}x`;
            confidenceLabelEl.textContent = `Confidence: ${prediction.confidence}%`;
            confidenceBarEl.style.width = `${prediction.confidence}%`;

            // 4. Simulate result and update history
            setTimeout(() => {
                const result = simulateResult(prediction);
                history.push({ prediction, result });
                if (history.length > 10) {
                    history.shift();
                }
                updateHistory();
            }, 4000);

        }, 7000);
    }

    // Initial history for demo
    for (let i = 0; i < 5; i++) {
        const p = generatePrediction();
        const r = simulateResult(p);
        history.push({ prediction: p, result: r });
    }
    updateHistory();

    // Start the cycle
    runCycle();
    setInterval(runCycle, 15000); // 15 seconds total cycle time
});