document.getElementById('lbw-form').addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    fetch('/analyze', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.error) {
            document.getElementById('decision').textContent = `Error: ${data.error}`;
        } else {
            document.getElementById('decision').textContent = `Decision: ${data.decision} (Confidence: ${data.confidence})`;
            document.getElementById('details').innerHTML = `
                Pitching: ${data.pitching.status}<br>
                Impact: ${data.impact.status}<br>
                Wickets: ${data.wicket}
            `;
            drawPitch(data.actual_path, data.projected_path, data.pitching, data.impact);
        }
    })
    .catch(error => {
        document.getElementById('decision').textContent = `Error: ${error.message}`;
    });
});

function drawPitch(actualPath, projectedPath, pitching, impact) {
    const canvas = document.getElementById('pitchCanvas');
    const ctx = canvas.getContext('2d');
    
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    ctx.fillStyle = '#90EE90';
    ctx.fillRect(50, 50, 300, 500);
    
    ctx.fillStyle = '#FFF';
    ctx.fillRect(190, 50, 20, 10);
    
    ctx.strokeStyle = '#000';
    ctx.beginPath();
    ctx.moveTo(50, 150); ctx.lineTo(350, 150);
    ctx.moveTo(200, 50); ctx.lineTo(200, 150);
    ctx.stroke();
    
    function scalePoint(point) {
        return {
            x: 50 + point.x * 300,
            y: 550 - point.y * 500
        };
    }
    
    if (actualPath.length > 0) {
        ctx.strokeStyle = 'red';
        ctx.lineWidth = 2;
        ctx.beginPath();
        const actualScaled = actualPath.map(scalePoint);
        ctx.moveTo(actualScaled[0].x, actualScaled[0].y);
        for (let i = 1; i < actualScaled.length; i++) {
            ctx.lineTo(actualScaled[i].x, actualScaled[i].y);
        }
        ctx.stroke();
    }
    
    if (projectedPath.length > 0) {
        ctx.strokeStyle = 'blue';
        ctx.lineWidth = 2;
        ctx.beginPath();
        const projectedScaled = projectedPath.map(scalePoint);
        ctx.moveTo(projectedScaled[0].x, projectedScaled[0].y);
        ctx.lineTo(projectedScaled[1].x, projectedScaled[1].y);
        ctx.stroke();
    }
    
    const pitchPt = scalePoint(pitching);
    ctx.fillStyle = 'black';
    ctx.beginPath();
    ctx.arc(pitchPt.x, pitchPt.y, 5, 0, 2 * Math.PI);
    ctx.fill();
    
    const impactPt = scalePoint(impact);
    ctx.fillStyle = 'orange';
    ctx.beginPath();
    ctx.arc(impactPt.x, impactPt.y, 5, 0, 2 * Math.PI);
    ctx.fill();
}