document.getElementById('analysis-form').addEventListener('submit', function(event) {
    event.preventDefault();

    const homeTeam = document.getElementById('home-team').value;
    const awayTeam = document.getElementById('away-team').value;

    if (!homeTeam || !awayTeam) {
        alert('Por favor, digite os nomes dos dois times.');
        return;
    }

    const analysisResult = document.getElementById('analysis-result');
    analysisResult.style.display = 'block';
    analysisResult.innerHTML = `
        <div class="d-flex justify-content-center">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
    `;

    setTimeout(() => {
        const homeWinProb = (Math.random() * 50 + 25).toFixed(2);
        const awayWinProb = (Math.random() * (75 - homeWinProb)).toFixed(2);
        const drawProb = (100 - homeWinProb - awayWinProb).toFixed(2);
        
        const homeOdds = (1 / (homeWinProb / 100)).toFixed(2);
        const awayOdds = (1 / (awayWinProb / 100)).toFixed(2);
        const drawOdds = (1 / (drawProb / 100)).toFixed(2);

        analysisResult.innerHTML = `
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="card-title text-center">Análise da Partida: ${homeTeam} vs ${awayTeam}</h5>
                    <div class="row text-center my-4">
                        <div class="col-4">
                            <h6>Vitória ${homeTeam}</h6>
                            <p class="fs-4 text-primary">${homeWinProb}%</p>
                        </div>
                        <div class="col-4">
                            <h6>Empate</h6>
                            <p class="fs-4 text-secondary">${drawProb}%</p>
                        </div>
                        <div class="col-4">
                            <h6>Vitória ${awayTeam}</h6>
                            <p class="fs-4 text-primary">${awayWinProb}%</p>
                        </div>
                    </div>
                    <hr>
                    <h6 class="card-subtitle mb-2 text-muted">Odds Estimadas</h6>
                    <div class="row text-center">
                        <div class="col-4"><strong>${homeTeam}:</strong> ${homeOdds}</div>
                        <div class="col-4"><strong>Empate:</strong> ${drawOdds}</div>
                        <div class="col-4"><strong>${awayTeam}:</strong> ${awayOdds}</div>
                    </div>
                    <hr>
                    <h6 class="card-subtitle mb-2 text-muted">Recomendação da IA</h6>
                    <p>Com base na análise, a recomendação pende para uma vitória do <strong>${homeWinProb > awayWinProb ? homeTeam : awayTeam}</strong>, mas um empate também é uma possibilidade a ser considerada.</p>
                     <hr>
                    <h6 class="card-subtitle mb-2 text-muted">Casas de Apostas (Exemplo)</h6>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between">
                            <span>Bet365</span>
                            <span>${homeTeam}: ${(homeOdds * 1.05).toFixed(2)} | Empate: ${(drawOdds * 0.98).toFixed(2)} | ${awayTeam}: ${(awayOdds * 1.02).toFixed(2)}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between">
                            <span>Betano</span>
                            <span>${homeTeam}: ${(homeOdds * 0.99).toFixed(2)} | Empate: ${(drawOdds * 1.01).toFixed(2)} | ${awayTeam}: ${(awayOdds * 1.04).toFixed(2)}</span>
                        </li>
                    </ul>
                </div>
            </div>
        `;
    }, 2000);
});