const form = document.getElementById("predictForm");
const resultDiv = document.getElementById("result");
const btn = document.getElementById("predictBtn");

form.addEventListener("submit", async (e) => {
    e.preventDefault();

    // Visual feedback
    btn.innerText = "CALCULATING...";
    btn.style.opacity = "0.7";
    resultDiv.innerHTML = ""; // Clear previous results

    const formData = new FormData(form);
    const data = Object.fromEntries(formData.entries());

    // Convert numeric fields accurately
    const numericFields = ["runs_left", "balls_left", "wickets", "total_runs_x", "crr", "rrr"];
    numericFields.forEach(key => {
        data[key] = parseFloat(data[key]);
    });

    try {
        // We removed the local IP and Port because Hugging Face handles it for us
        const response = await fetch("/predict", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(data)
        });

        if (!response.ok) throw new Error("Server Error");

        const result = await response.json();

        // Check if we got percentages (the pro way) or just a result (the old way)
        if (result.win_percentage !== undefined) {
            resultDiv.innerHTML = `
                <div style="margin-bottom: 15px; display: flex; justify-content: space-between; font-weight: bold; font-size: 1.1rem;">
                    <span style="color: #2ecc71">${data.batting_team}: ${result.win_percentage}%</span>
                    <span style="color: #e74c3c">${data.bowling_team}: ${result.loss_percentage}%</span>
                </div>
                
                <div style="width: 100%; height: 22px; background: #0d1117; border-radius: 11px; overflow: hidden; display: flex; border: 1px solid #30363d;">
                    <div style="width: ${result.win_percentage}%; background: linear-gradient(90deg, #2ecc71, #27ae60); transition: width 1.5s ease-in-out;"></div>
                    <div style="width: ${result.loss_percentage}%; background: linear-gradient(90deg, #c0392b, #e74c3c); transition: width 1.5s ease-in-out;"></div>
                </div>

                <p style="margin-top: 15px; color: #8b949e; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px;">
                    Win Probability for ${data.batting_team}
                </p>
            `;
            resultDiv.style.background = "rgba(255, 255, 255, 0.03)";
            resultDiv.style.padding = "20px";
            resultDiv.style.border = "1px solid #30363d";
            resultDiv.style.borderRadius = "12px";
        } else {
            // Fallback for simple results
            resultDiv.innerHTML = result.result === 1 
                ? `<span style="color: #2ecc71">🏏 Prediction: ${data.batting_team} is likely to Win!</span>`
                : `<span style="color: #e74c3c">🏏 Prediction: ${data.bowling_team} is likely to Win!</span>`;
            resultDiv.style.background = "rgba(255, 255, 255, 0.05)";
        }

    } catch (err) {
        console.error(err);
        resultDiv.innerText = "⚠️ Connection Error: Is the Flask server on Port 8080?";
        resultDiv.style.color = "#f39c12";
        resultDiv.style.background = "transparent";
    } finally {
        btn.innerText = "ANALYZE PROBABILITY";
        btn.style.opacity = "1";
    }
});