script.js

const canvas = document.getElementById('robotCanvas');
const ctx = canvas.getContext('2d');
const themeToggleBtn = document.getElementById('themeToggle');

// Elementos de la interfaz
const controls = [
    { range: document.getElementById('joint1'), num: document.getElementById('num1'), val: document.getElementById('val1') },
    { range: document.getElementById('joint2'), num: document.getElementById('num2'), val: document.getElementById('val2') },
    { range: document.getElementById('joint3'), num: document.getElementById('num3'), val: document.getElementById('val3') }
];

const posDisplay = {
    x: document.getElementById('posX'),
    y: document.getElementById('posY')
};

// Estado del brazo
let basePos = { x: canvas.width / 2, y: canvas.height * 0.85 };
let scaleFactor = 1; 
const defaultLengths = [150, 120, 100];
let angles = [0, 0, 0]; // Ángulos iniciales

// --- Lógica del Tema ---
let isDarkTheme = true;

themeToggleBtn.addEventListener('click', () => {
    isDarkTheme = !isDarkTheme;
    // Cambiar atributo data-theme en body
    if (isDarkTheme) {
        document.body.removeAttribute('data-theme');
        themeToggleBtn.textContent = '☀️';
    } else {
        document.body.setAttribute('data-theme', 'light');
        themeToggleBtn.textContent = '🌙';
    }
    draw(); // Redibujar canvas con colores nuevos
});

// Función auxiliar para obtener colores de variables CSS
function getCSSVar(name) {
    return getComputedStyle(document.body).getPropertyValue(name).trim();
}

// --- Lógica de Dimensionado ---
function resizeCanvas() {
    const container = canvas.parentElement;
    canvas.width = container.clientWidth;
    canvas.height = container.clientHeight;

    basePos = { x: canvas.width / 2, y: canvas.height * 0.85 };
    
    // Escala responsiva
    scaleFactor = Math.min(canvas.width, canvas.height) / 800;
    if (scaleFactor < 0.5) scaleFactor = 0.5;
    if (scaleFactor > 1.2) scaleFactor = 1.2;

    draw();
}

window.addEventListener('resize', resizeCanvas);

// --- Sincronización de Inputs ---
function syncInputs(index, value) {
    const angle = parseInt(value);
    angles[index] = angle;
    controls[index].range.value = angle;
    controls[index].num.value = angle;
    controls[index].val.textContent = angle;
    draw();
}

controls.forEach((ctrl, index) => {
    ctrl.range.addEventListener('input', (e) => syncInputs(index, e.target.value));
    ctrl.num.addEventListener('input', (e) => syncInputs(index, e.target.value));
});

function toRad(deg) {
    return deg * Math.PI / 180;
}

// --- Dibujado ---
function drawArm() {
    // Limpiar canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height); 

    // Obtener colores actuales del tema
    const groundColor = getCSSVar('--ground-color');
    const gridColor = getCSSVar('--grid-color');
    const jointFillColor = getCSSVar('--joint-color');
    
    // Dibujar Suelo
    ctx.beginPath();
    ctx.moveTo(0, basePos.y);
    ctx.lineTo(canvas.width, basePos.y);
    ctx.strokeStyle = groundColor;
    ctx.lineWidth = 4;
    ctx.stroke();

    drawGrid(gridColor);

    let currentX = basePos.x;
    let currentY = basePos.y;
    let absoluteAngle = 0; 

    // --- BASE ---
    ctx.fillStyle = '#0f3460'; // Mantener color base o usar var si se desea
    ctx.beginPath();
    ctx.rect(currentX - 30 * scaleFactor, currentY, 60 * scaleFactor, 20); 
    ctx.fill();

    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';

    // Iterar Eslabones
    for (let i = 0; i < 3; i++) {
        const angleRad = toRad(angles[i]);
        const length = defaultLengths[i] * scaleFactor;

        if (i === 0) {
            absoluteAngle = toRad(-90) + angleRad; 
        } else {
            absoluteAngle += angleRad;
        }

        const nextX = currentX + Math.cos(absoluteAngle) * length;
        const nextY = currentY + Math.sin(absoluteAngle) * length;

        // Sombras
        ctx.shadowBlur = 15;
        const linkColor = i === 0 ? '#3498db' : (i === 1 ? '#e67e22' : '#2ecc71');
        ctx.shadowColor = linkColor;

        // Dibujar Eslabón
        ctx.beginPath();
        ctx.moveTo(currentX, currentY);
        ctx.lineTo(nextX, nextY);
        ctx.lineWidth = (20 - (i * 4)) * scaleFactor; 
        ctx.strokeStyle = linkColor;
        ctx.stroke();

        ctx.shadowBlur = 0; 

        // Dibujar Articulación
        ctx.beginPath();
        ctx.arc(currentX, currentY, 6 * scaleFactor, 0, Math.PI * 2);
        ctx.fillStyle = jointFillColor; // Color dinámico según tema
        ctx.fill();
        ctx.strokeStyle = '#333';
        ctx.lineWidth = 1;
        ctx.stroke();

        currentX = nextX;
        currentY = nextY;
    }

    // Efector Final
    ctx.shadowBlur = 20;
    ctx.shadowColor = '#e74c3c';
    ctx.beginPath();
    ctx.arc(currentX, currentY, 8 * scaleFactor, 0, Math.PI * 2);
    ctx.fillStyle = '#e74c3c';
    ctx.fill();
    ctx.shadowBlur = 0;

    // UI Info
    const cartesianX = (currentX - basePos.x) / scaleFactor;
    const cartesianY = -(currentY - basePos.y) / scaleFactor;
    
    posDisplay.x.textContent = cartesianX.toFixed(1);
    posDisplay.y.textContent = cartesianY.toFixed(1);
}

function drawGrid(color) {
    ctx.strokeStyle = color;
    ctx.lineWidth = 1;
    const step = 50 * scaleFactor;
    
    // Verticales
    for (let x = basePos.x; x < canvas.width; x += step) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, canvas.height); ctx.stroke(); }
    for (let x = basePos.x; x > 0; x -= step) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, canvas.height); ctx.stroke(); }
    
    // Horizontales
    for (let y = basePos.y; y < canvas.height; y += step) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(canvas.width, y); ctx.stroke(); }
    for (let y = basePos.y; y > 0; y -= step) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(canvas.width, y); ctx.stroke(); }
}

function draw() {
    drawArm();
}

window.onload = resizeCanvas;