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 => {
        document.getElementById('decision').textContent = `Decision: ${data.decision} (Confidence: ${data.confidence})`;
        drawPitch(data.actual_path, data.projected_path, data.pitching, data.impact);
    });
});

function drawPitch(actualPath, projectedPath, pitching, impact) {
    const canvas = document.getElementById('pitchCanvas');
    const ctx = canvas.getContext('2d');
    
    // Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // Draw pitch (22 yards scaled to 600px height, 10 feet scaled to 400px width)
    ctx.fillStyle = '#90EE90'; // Light green for pitch
    ctx.fillRect(50, 50, 300, 500);
    
    // Draw stumps (at y=1, scaled to canvas)
    ctx.fillStyle = '#FFF';
    ctx.fillRect(190, 50, 20, 10); // Top stumps
    
    // Draw creases
    ctx.strokeStyle = '#000';
    ctx.beginPath();
    ctx.moveTo(50, 150); ctx.lineTo(350, 150); // Popping crease
    ctx.moveTo(200, 50); ctx.lineTo(200, 150); // Middle stump line
    ctx.stroke();
    
    // Scale coordinates (x: 0-1 to 50-350, y: 0-1 to 550-50)
    function scalePoint(point) {
        return {
            x: 50 + point.x * 300,
            y: 550 - point.y * 500
        };
    }
    
    // Draw actual path (red arc)
    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();
    
    // Draw projected path (blue line)
    ctx.strokeStyle = 'blue';
    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();
    
    // Draw pitching point
    const pitchPt = scalePoint(pitching);
    ctx.fillStyle = 'black';
    ctx.beginPath();
    ctx.arc(pitchPt.x, pitchPt.y, 5, 0, 2 * Math.PI);
    ctx.fill();
    
    // Draw impact point
    const impactPt = scalePoint(impact);
    ctx.fillStyle = 'orange';
    ctx.beginPath();
    ctx.arc(impactPt.x, impactPt.y, 5, 0, 2 * Math.PI);
    ctx.fill();
}