function submitForm() {
    const x = document.getElementById('x').value;
    const y = document.getElementById('y').value.trim();
    const rElements = document.getElementsByName('r');
    let r;
    for (let i = 0; i < rElements.length; i++) {
        if (rElements[i].checked) {
            r = rElements[i].value;
            break;
        }
    }

    // Validate input
    if (!validateInput(x, y, r)) {
        alert("Некорректные данные");
        return;
    }

    // Prepare data for POST request
    const data = new URLSearchParams();
    data.append('x', x);
    data.append('y', y);
    data.append('r', r);

    // Send POST request using Fetch API
    fetch('/fcgi-bin/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
        },
        body: data.toString(),
    })
        .then(response => response.json())
        .then(result => {
            if (result.error) {
                alert("Ошибка сервера: " + result.error);
            } else {
                updateResults({
                    x: x,
                    y: y,
                    r: r,
                    hit: result.result,
                    timestamp: new Date().toLocaleString(),
                    executionTime: result.executionTime + ' ms' // Use executionTime from backend
                });
                drawPoint(x, y, r);
            }
        })
        .catch(error => {
            alert("Ошибка запроса: " + error);
        });
}

function validateInput(x, y, r) {
    const xValue = parseFloat(x);
    const yValue = parseFloat(y.replace(',', '.'));
    const rValue = parseFloat(r);

    if (isNaN(xValue) || isNaN(yValue) || isNaN(rValue)) return false;
    if (xValue < -5 || xValue > 3) return false;
    if (yValue < -5 || yValue > 3) return false; // Ensure correct range for y
    return [1, 1.5, 2, 2.5, 3].includes(rValue);
}

function updateResults(result) {
    const table = document.getElementById('results');
    const row = table.insertRow(1);
    row.insertCell(0).innerText = result.x;
    row.insertCell(1).innerText = result.y;
    row.insertCell(2).innerText = result.r;
    row.insertCell(3).innerText = result.hit ? 'Попадание' : 'Промах';
    row.insertCell(4).innerText = result.timestamp;
    row.insertCell(5).innerText = result.executionTime;
}

function drawPoint(x, y, r) {
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const width = canvas.width;
    const height = canvas.height;
    const centerX = width / 2;
    const centerY = height / 2;
    const scale = (width / 2 - 40) / r;

    const canvasX = centerX + x * scale;
    const canvasY = centerY - y * scale;

    ctx.beginPath();
    ctx.arc(canvasX, canvasY, 3, 0, 2 * Math.PI);
    ctx.fillStyle = 'red';
    ctx.fill();
}

function drawGraph(r = 1) {
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure the canvas is properly initialized
    if (!canvas || !ctx) {
        console.error('Canvas or context not found.');
        return;
    }

    const width = canvas.width;
    const height = canvas.height;
    const centerX = width / 2;
    const centerY = height / 2;
    const scale = (width / 2 - 40) / r;  // Ensure scale isn't too small

    // Clear the canvas before drawing
    ctx.clearRect(0, 0, width, height);

    // Draw the axes
    ctx.beginPath();
    ctx.moveTo(0, centerY);
    ctx.lineTo(width, centerY); // Horizontal axis
    ctx.moveTo(centerX, 0);
    ctx.lineTo(centerX, height); // Vertical axis
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    ctx.stroke();

    // Draw R labels on axes
    ctx.fillStyle = 'black';
    ctx.font = '12px Arial';

    // X-axis labels
    ctx.fillText('R', centerX + r * scale, centerY - 5);           // R
    ctx.fillText('R/2', centerX + (r / 2) * scale, centerY - 5);   // R/2
    ctx.fillText('-R/2', centerX - (r / 2) * scale, centerY - 5);  // -R/2
    ctx.fillText('-R', centerX - r * scale, centerY - 5);          // -R

    // Y-axis labels
    ctx.fillText('R', centerX + 5, centerY - r * scale);           // R
    ctx.fillText('R/2', centerX + 5, centerY - (r / 2) * scale);   // R/2
    ctx.fillText('-R/2', centerX + 5, centerY + (r / 2) * scale);  // -R/2
    ctx.fillText('-R', centerX + 5, centerY + r * scale);          // -R

    // Draw shapes based on R
    ctx.fillStyle = 'rgba(0, 0, 255, 0.3)';

    // Draw the rectangle (Top-left quadrant)
    ctx.fillRect(centerX - (r / 2) * scale, centerY - r * scale, (r / 2) * scale, r * scale);  // Rectangle from -R/2 to 0 on X and 0 to R on Y

    // Draw the triangle (Bottom-left quadrant)
    ctx.beginPath();
    ctx.moveTo(centerX, centerY);                // Center
    ctx.lineTo(centerX - r * scale, centerY);    // Left
    ctx.lineTo(centerX, centerY + r * scale / 2);// Bottom
    ctx.closePath();
    ctx.fill();

    // Correct Quarter Circle (Top-right quadrant)
    ctx.beginPath();
    ctx.moveTo(centerX, centerY);  // Start from center
    ctx.arc(centerX, centerY, r * scale, - Math.PI / 2, 0);// Quarter circle from 0 to R on both axes (top-right)
    ctx.closePath();
    ctx.fill();

    console.log('Graph drawn with R =', r);
}

// Trigger drawGraph on page load or when R is changed
const rElements = document.getElementsByName('r');
rElements.forEach(radio => {
    radio.addEventListener('change', () => {
        const rValue = parseFloat(radio.value);
        drawGraph(rValue);
    });
});

window.onload = function() {
    drawGraph(); // Default R = 1
};