// ============================================
// LÓGICA PRINCIPAL DO JOGO
// ============================================

// Game State
let gameState = {
    playerName: '',
    firstName: '',
    currentQuestion: 0,
    sliderValue: 50,
    answers: {},
    rankingItems: [],
    scores: {
        flexivel: 0, estavel: 0, independente: 0, interdependente: 0,
        aprendizado: 0, prazer: 0, proposito: 0, acolhimento: 0,
        ordem: 0, seguranca: 0, autoridade: 0, resultado: 0
    }
};

// Helper Functions
function updateScores(newScores) {
    Object.keys(newScores).forEach(key => {
        gameState.scores[key] = (gameState.scores[key] || 0) + newScores[key];
    });
}

function showScreen(screenId) {
    document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
    document.getElementById(screenId).classList.add('active');
}

function renderProgressDots() {
    const dotsContainer = document.getElementById('progress-dots');
    dotsContainer.innerHTML = '';
    GAME_QUESTIONS.forEach((_, idx) => {
        const dot = document.createElement('div');
        dot.className = 'progress-dot';
        if (idx === gameState.currentQuestion) {
            dot.classList.add('current');
        } else if (idx < gameState.currentQuestion) {
            dot.classList.add('completed');
        } else {
            dot.classList.add('upcoming');
        }
        dotsContainer.appendChild(dot);
    });
}



function renderQuestion() {
    const q = GAME_QUESTIONS[gameState.currentQuestion];


    document.getElementById('question-image').src = q.image;
    document.getElementById('stage-badge').textContent = q.stage;
    document.getElementById('question-title').textContent = q.title;
    document.getElementById('scenario').textContent = q.scenario;
    document.getElementById('question').textContent = q.question;

    const backBtn = document.getElementById('back-btn');
    backBtn.style.display = gameState.currentQuestion > 0 ? 'flex' : 'none';

    const contentContainer = document.getElementById('question-content');
    contentContainer.innerHTML = '';

    if (q.type === 'multiple') {
        renderMultipleChoice(q, contentContainer);
    } else if (q.type === 'slider') {
        renderSlider(q, contentContainer);
    } else if (q.type === 'ranking') {
        renderRanking(q, contentContainer);
    }

    renderProgressDots();
}

function renderMultipleChoice(q, container) {
    const optionsDiv = document.createElement('div');
    optionsDiv.className = 'options';

    q.options.forEach((option, idx) => {
        const btn = document.createElement('button');
        btn.className = 'option-btn';
        btn.textContent = option.text;

        const savedAnswer = gameState.answers[gameState.currentQuestion];
        if (savedAnswer && savedAnswer.type === 'multiple' && savedAnswer.index === idx) {
            btn.classList.add('selected');
            btn.textContent = '✓ ' + option.text;
        }

        btn.onclick = () => handleMultipleChoice(option, idx);
        optionsDiv.appendChild(btn);
    });

    container.appendChild(optionsDiv);
}

function renderSlider(q, container) {
    const sliderContainer = document.createElement('div');
    sliderContainer.className = 'slider-container';

    const savedAnswer = gameState.answers[gameState.currentQuestion];
    if (savedAnswer && savedAnswer.type === 'slider') {
        gameState.sliderValue = savedAnswer.value;
    } else {
        gameState.sliderValue = 50;
    }

    sliderContainer.innerHTML = `
        <div class="slider-labels">
            <span>${q.leftLabel}</span>
            <span>${q.rightLabel}</span>
        </div>
        <div class="slider-wrapper">
            <input type="range" min="0" max="100" value="${gameState.sliderValue}" class="slider" id="slider-input">
        </div>
    `;

    container.appendChild(sliderContainer);

    const slider = document.getElementById('slider-input');
    updateSliderBackground(slider);

    slider.addEventListener('input', (e) => {
        gameState.sliderValue = parseInt(e.target.value);
        updateSliderBackground(slider);
    });

    const submitBtn = document.createElement('button');
    submitBtn.className = 'btn';
    submitBtn.innerHTML = `
        Confirmar escolha
        <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
        </svg>
    `;
    submitBtn.onclick = handleSliderSubmit;
    container.appendChild(submitBtn);
}

function updateSliderBackground(slider) {
    const value = slider.value;
    slider.style.background = `linear-gradient(to right, rgb(59, 130, 246) 0%, rgb(156, 163, 175) ${value}%, rgb(168, 85, 247) 100%)`;
}

function renderRanking(q, container) {
    const savedAnswer = gameState.answers[gameState.currentQuestion];
    if (savedAnswer && savedAnswer.type === 'ranking') {
        gameState.rankingItems = [...savedAnswer.order];
    } else {
        gameState.rankingItems = [];
    }

    const rankingContainer = document.createElement('div');
    rankingContainer.className = 'ranking-container';

    rankingContainer.innerHTML = `
        <p class="ranking-instructions">
            🎯 <strong>Clique</strong> nos itens para adicioná-los ao ranking.
            Você precisa selecionar <strong>${q.rankCount} itens</strong> em ordem de importância.
        </p>
        <div id="ranking-selected"></div>
        <div class="available-items">
            <h4>Opções disponíveis:</h4>
            <div id="ranking-available"></div>
        </div>
    `;

    container.appendChild(rankingContainer);
    updateRankingDisplay(q);

    const submitBtn = document.createElement('button');
    submitBtn.className = 'btn';
    submitBtn.id = 'ranking-submit';
    submitBtn.disabled = gameState.rankingItems.length < q.rankCount;
    submitBtn.innerHTML = `
        Confirmar ranking (${gameState.rankingItems.length}/${q.rankCount})
        <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
        </svg>
    `;
    submitBtn.onclick = handleRankingSubmit;
    container.appendChild(submitBtn);
}

function updateRankingDisplay(q) {
    const selectedContainer = document.getElementById('ranking-selected');
    const availableContainer = document.getElementById('ranking-available');

    if (gameState.rankingItems.length > 0) {
        selectedContainer.innerHTML = `
            <div class="ranking-list">
                <h4>Seu Ranking:</h4>
                <div class="ranking-items" id="ranking-items"></div>
            </div>
        `;

        const itemsContainer = document.getElementById('ranking-items');
        gameState.rankingItems.forEach((item, index) => {
            const itemDiv = document.createElement('div');
            itemDiv.className = 'ranking-item';
            if (index < q.rankCount) {
                itemDiv.classList.add('ranked');
            }
            itemDiv.draggable = true;

            itemDiv.innerHTML = `
                <div class="ranking-item-content">
                    <div class="ranking-item-left">
                        <div class="ranking-number ${index < q.rankCount ? 'active' : 'inactive'}">
                            ${index + 1}º
                        </div>
                        <span>${item.text}</span>
                    </div>
                    <div class="ranking-controls">
                        <button class="ranking-btn" onclick="moveRankingItem(${index}, -1)" ${index === 0 ? 'disabled' : ''}>
                            ▲
                        </button>
                        <button class="ranking-btn" onclick="moveRankingItem(${index}, 1)" ${index === gameState.rankingItems.length - 1 ? 'disabled' : ''}>
                            ▼
                        </button>
                        <button class="ranking-btn remove" onclick="removeRankingItem(${index})">
                            ✕
                        </button>
                    </div>
                </div>
            `;

            itemDiv.addEventListener('dragstart', () => {
                itemDiv.classList.add('dragging');
            });

            itemDiv.addEventListener('dragend', () => {
                itemDiv.classList.remove('dragging');
            });

            itemsContainer.appendChild(itemDiv);
        });

        itemsContainer.addEventListener('dragover', (e) => {
            e.preventDefault();
            const afterElement = getDragAfterElement(itemsContainer, e.clientY);
            const dragging = document.querySelector('.dragging');
            if (afterElement == null) {
                itemsContainer.appendChild(dragging);
            } else {
                itemsContainer.insertBefore(dragging, afterElement);
            }
        });

        itemsContainer.addEventListener('drop', () => {
            const newOrder = [];
            itemsContainer.querySelectorAll('.ranking-item').forEach(item => {
                const text = item.querySelector('span').textContent;
                const foundItem = q.items.find(i => i.text === text) || gameState.rankingItems.find(i => i.text === text);
                if (foundItem) newOrder.push(foundItem);
            });
            gameState.rankingItems = newOrder;
            updateRankingDisplay(q);
        });
    } else {
        selectedContainer.innerHTML = '';
    }

    availableContainer.innerHTML = '';
    q.items.forEach(item => {
        if (!gameState.rankingItems.find(ri => ri.text === item.text)) {
            const btn = document.createElement('button');
            btn.className = 'available-item';
            btn.textContent = item.text;
            btn.onclick = () => addToRanking(item, q);
            availableContainer.appendChild(btn);
        }
    });

    const submitBtn = document.getElementById('ranking-submit');
    if (submitBtn) {
        submitBtn.disabled = gameState.rankingItems.length < q.rankCount;
        submitBtn.innerHTML = `
            Confirmar ranking (${gameState.rankingItems.length}/${q.rankCount})
            <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
            </svg>
        `;
    }
}

function getDragAfterElement(container, y) {
    const draggableElements = [...container.querySelectorAll('.ranking-item:not(.dragging)')];

    return draggableElements.reduce((closest, child) => {
        const box = child.getBoundingClientRect();
        const offset = y - box.top - box.height / 2;

        if (offset < 0 && offset > closest.offset) {
            return { offset: offset, element: child };
        } else {
            return closest;
        }
    }, { offset: Number.NEGATIVE_INFINITY }).element;
}

function addToRanking(item, q) {
    gameState.rankingItems.push(item);
    updateRankingDisplay(q);
}

function removeRankingItem(index) {
    const q = GAME_QUESTIONS[gameState.currentQuestion];
    gameState.rankingItems.splice(index, 1);
    updateRankingDisplay(q);
}

function moveRankingItem(index, direction) {
    const q = GAME_QUESTIONS[gameState.currentQuestion];
    const newIndex = index + direction;
    if (newIndex < 0 || newIndex >= gameState.rankingItems.length) return;

    const temp = gameState.rankingItems[index];
    gameState.rankingItems[index] = gameState.rankingItems[newIndex];
    gameState.rankingItems[newIndex] = temp;

    updateRankingDisplay(q);
}

// Event Handlers
function handleMultipleChoice(option, optionIndex) {
    gameState.answers[gameState.currentQuestion] = { type: 'multiple', index: optionIndex };
    updateScores(option.scores);
    moveToNextQuestion();
}

function handleSliderSubmit() {
    const q = GAME_QUESTIONS[gameState.currentQuestion];
    const normalizedValue = (gameState.sliderValue - 50) / 50;
    const calculatedScores = {};

    Object.keys(q.leftScores).forEach(key => {
        const leftIntensity = Math.max(0, -normalizedValue);
        const leftContribution = q.leftScores[key] * leftIntensity;
        calculatedScores[key] = (calculatedScores[key] || 0) + leftContribution;
    });

    Object.keys(q.rightScores).forEach(key => {
        const rightIntensity = Math.max(0, normalizedValue);
        const rightContribution = q.rightScores[key] * rightIntensity;
        calculatedScores[key] = (calculatedScores[key] || 0) + rightContribution;
    });

    gameState.answers[gameState.currentQuestion] = { type: 'slider', value: gameState.sliderValue };
    updateScores(calculatedScores);
    moveToNextQuestion();
}

function handleRankingSubmit() {
    const q = GAME_QUESTIONS[gameState.currentQuestion];

    if (gameState.rankingItems.length < q.rankCount) {
        alert(`Por favor, selecione pelo menos ${q.rankCount} itens para rankear.`);
        return;
    }

    const calculatedScores = {};

    gameState.rankingItems.forEach((item, index) => {
        if (index < q.rankCount) {
            const multiplier = q.rankCount - index;
            Object.keys(item.scores).forEach(key => {
                calculatedScores[key] = (calculatedScores[key] || 0) + (item.scores[key] * multiplier);
            });
        }
    });

    gameState.answers[gameState.currentQuestion] = { type: 'ranking', order: [...gameState.rankingItems] };
    updateScores(calculatedScores);
    gameState.rankingItems = [];
    moveToNextQuestion();
}

function moveToNextQuestion() {
    setTimeout(() => {
        if (gameState.currentQuestion < GAME_QUESTIONS.length - 1) {
            gameState.currentQuestion++;
            renderQuestion();
        } else {
            showResult();
        }
    }, 300);
}

function moveToPreviousQuestion() {
    if (gameState.currentQuestion > 0) {
        setTimeout(() => {
            gameState.currentQuestion--;
            renderQuestion();
        }, 300);
    }
}

function calculateResult() {
    const scores = gameState.scores;
    const flexStable = scores.flexivel - scores.estavel;
    const indepInter = scores.independente - scores.interdependente;

    let quadrant = '', primaryStyle = '', secondaryStyle = '';

    if (flexStable > 0 && indepInter > 0) {
        quadrant = 'Superior Esquerdo';
        primaryStyle = scores.aprendizado >= scores.prazer ? 'Aprendizado' : 'Prazer';
        secondaryStyle = scores.aprendizado >= scores.prazer ? 'Prazer' : 'Aprendizado';
    } else if (flexStable > 0 && indepInter <= 0) {
        quadrant = 'Superior Direito';
        primaryStyle = scores.proposito >= scores.acolhimento ? 'Propósito' : 'Acolhimento';
        secondaryStyle = scores.proposito >= scores.acolhimento ? 'Acolhimento' : 'Propósito';
    } else if (flexStable <= 0 && indepInter <= 0) {
        quadrant = 'Inferior Direito';
        primaryStyle = scores.ordem >= scores.seguranca ? 'Ordem' : 'Segurança';
        secondaryStyle = scores.ordem >= scores.seguranca ? 'Segurança' : 'Ordem';
    } else {
        quadrant = 'Inferior Esquerdo';
        primaryStyle = scores.autoridade >= scores.resultado ? 'Autoridade' : 'Resultado';
        secondaryStyle = scores.autoridade >= scores.resultado ? 'Resultado' : 'Autoridade';
    }

    const descriptions = {
        'Aprendizado': 'Você é movido pela curiosidade e pelo desenvolvimento contínuo.',
        'Prazer': 'Você busca leveza e espontaneidade no que faz.',
        'Propósito': 'Você é guiado por ideais e pela contribuição para uma causa maior.',
        'Acolhimento': 'Você valoriza confiança, apoio mútuo e pertencimento.',
        'Ordem': 'Você preza disciplina, tradição e eficiência.',
        'Segurança': 'Você é cauteloso e planejador.',
        'Autoridade': 'Você valoriza comando claro e decisões assertivas.',
        'Resultado': 'Você é orientado por metas e excelência.'
    };

    // Cálculo FECA Original
    const totalFlex = scores.flexivel + scores.estavel;
    const totalIndep = scores.independente + scores.interdependente;

    const F_orig = totalFlex > 0 ? Math.round((scores.flexivel / totalFlex) * 100) : 50;
    const E_orig = 100 - F_orig;
    const C_orig = totalIndep > 0 ? Math.round((scores.interdependente / totalIndep) * 100) : 50;
    const A_orig = 100 - C_orig;

    // Sweetpoints dos estilos
    const sweetpoints = {
        'Prazer': { F: 92, E: 8, C: 30, A: 70 },
        'Proposito': { F: 92, E: 8, C: 70, A: 30 },
        'Aprendizado': { F: 70, E: 30, C: 8, A: 92 },
        'Acolhimento': { F: 70, E: 30, C: 92, A: 8 },
        'Autoridade': { F: 8, E: 92, C: 30, A: 70 },
        'Seguranca': { F: 8, E: 92, C: 70, A: 30 },
        'Resultado': { F: 30, E: 70, C: 8, A: 92 },
        'Ordem': { F: 30, E: 70, C: 92, A: 8 }
    };

    const SP = sweetpoints[primaryStyle];

    // Fator de equilíbrio
    const e = 0.3;

    // FECA Final com compensação
    const F_final = Math.round(((SP.F * e) + F_orig) / (1 + e));
    const E_final = 100 - F_final;
    const C_final = Math.round(((SP.C * e) + C_orig) / (1 + e));
    const A_final = 100 - C_final;

    return {
        quadrant,
        primaryStyle,
        secondaryStyle,
        description: descriptions[primaryStyle],
        feca: {
            original: { F: F_orig, E: E_orig, C: C_orig, A: A_orig },
            sweetpoint: SP,
            final: { F: F_final, E: E_final, C: C_final, A: A_final }
        }
    };
}

function showResult() {
    const result = calculateResult();

    showScreen('result-screen');

    document.getElementById('result-player-name').textContent = gameState.playerName;

    const iconContainer = document.getElementById('result-icon');
    const resultBox = document.getElementById('result-box');

    const quadrantInfo = {
        'Superior Esquerdo': {
            icon: `<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color: #f97316;">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>`,
            color: 'orange',
            essence: 'Inovação, Autonomia e Curiosidade'
        },
        'Superior Direito': {
            icon: `<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color: #ec4899;">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
            </svg>`,
            color: 'pink',
            essence: 'Altruísmo, Empatia e Causa Coletiva'
        },
        'Inferior Direito': {
            icon: `<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color: #3b82f6;">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
            </svg>`,
            color: 'blue',
            essence: 'Estrutura, Planejamento e Conformidade'
        },
        'Inferior Esquerdo': {
            icon: `<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color: #ef4444;">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>`,
            color: 'red',
            essence: 'Controle, Performance e Resultado'
        }
    };

    const info = quadrantInfo[result.quadrant];
    iconContainer.innerHTML = info.icon;
    resultBox.className = `result-box ${info.color}`;

    document.getElementById('feca-display').innerHTML = `
        <div class="feca-row">
            <span style="font-weight: 600;">FECA Original:</span> ${result.feca.original.F},${result.feca.original.E},${result.feca.original.C},${result.feca.original.A}
        </div>
        <div class="feca-row">
            <span style="font-weight: 600;">FECA Sweetpoint (${result.primaryStyle}):</span> ${result.feca.sweetpoint.F},${result.feca.sweetpoint.E},${result.feca.sweetpoint.C},${result.feca.sweetpoint.A}
        </div>
        <div class="feca-final">
            <span style="font-weight: 700;">FECA Final:</span> ${result.feca.final.F},${result.feca.final.E},${result.feca.final.C},${result.feca.final.A}
        </div>
    `;

    document.getElementById('quadrant-name').textContent = result.quadrant;
    document.getElementById('essence').textContent = info.essence;
    document.getElementById('primary-style').textContent = result.primaryStyle;
    document.getElementById('primary-description').textContent = result.description;
    document.getElementById('secondary-style').textContent = result.secondaryStyle;

    const reportLink = document.getElementById('report-link');
    const url = `https://www.qore.me/doc-result?cdnd=pG-${result.feca.final.F},${result.feca.final.E},${result.feca.final.C},${result.feca.final.A}%3E${result.feca.sweetpoint.F},${result.feca.sweetpoint.E},${result.feca.sweetpoint.C},${result.feca.sweetpoint.A}&n=${encodeURIComponent(gameState.playerName)}&em=Qore&e=${encodeURIComponent(result.primaryStyle)}&eix=${result.feca.original.F - result.feca.original.E},${result.feca.original.F + result.feca.original.E - 100},${result.feca.original.C - result.feca.original.A - 100},${result.feca.original.A - result.feca.original.C}`;
    reportLink.href = url;
}

function resetGame() {
    gameState = {
        playerName: '',
        firstName: '',
        currentQuestion: 0,
        sliderValue: 50,
        answers: {},
        rankingItems: [],
        scores: {
            flexivel: 0, estavel: 0, independente: 0, interdependente: 0,
            aprendizado: 0, prazer: 0, proposito: 0, acolhimento: 0,
            ordem: 0, seguranca: 0, autoridade: 0, resultado: 0
        }
    };

    document.getElementById('player-name').value = '';
    showScreen('intro-screen');
}

// Event Listeners - Initialize on DOM load
document.addEventListener('DOMContentLoaded', function() {
    // Player name input
    document.getElementById('player-name').addEventListener('input', (e) => {
        const fullName = e.target.value;
        gameState.playerName = fullName;
        gameState.firstName = fullName.trim().split(' ')[0];

        const startBtn = document.getElementById('start-btn');
        startBtn.disabled = fullName.trim() === '';
    });

    // Start button
    document.getElementById('start-btn').addEventListener('click', () => {
        document.getElementById('player-name-display').textContent = gameState.playerName;
        showScreen('game-screen');
        renderQuestion();
    });

    // Back button
    document.getElementById('back-btn').addEventListener('click', moveToPreviousQuestion);

    // Restart button
    document.getElementById('restart-btn').addEventListener('click', resetGame);

    // Initialize
    showScreen('intro-screen');
});