const canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const ctx = canvas.getContext('2d');
const input = document.getElementById('input');
let rectangles = JSON.parse(localStorage.getItem('rectangles')) || [];
let currentRectangle = null;
let dragging = false;

const createRectangle = (x, y, width, height, text) => ({ x, y, width, height, text });
const isPointInsideRectangle = (point, rectangle) => (
    point.x >= rectangle.x &&
    point.x <= rectangle.x + rectangle.width &&
    point.y >= rectangle.y &&
    point.y <= rectangle.y + rectangle.height
);

const handleMouseDown = (e) => {
    currentRectangle = createRectangle(e.clientX, e.clientY, 0, 0, '');
    dragging = true;
};

const handleMouseMove = (e) => {
    if (dragging && currentRectangle) {
        currentRectangle.width = e.clientX - currentRectangle.x;
        currentRectangle.height = e.clientY - currentRectangle.y;
        render();
    }
};

const handleMouseUp = (e) => {
    if (dragging && currentRectangle) {
        rectangles.push(currentRectangle);
        localStorage.setItem('rectangles', JSON.stringify(rectangles));
        currentRectangle = null;
        dragging = false;
    }
};

const handleDoubleClick = (e) => {
    const rectangle = rectangles.find((r) => isPointInsideRectangle({ x: e.clientX, y: e.clientY }, r));
    if (rectangle) {
        input.style.left = `${rectangle.x}px`;
        input.style.top = `${rectangle.y}px`;
        input.value = rectangle.text;
        input.focus();
        currentRectangle = rectangle;
    }
};

const handleContextMenu = (e) => {
    e.preventDefault();
    const rectangle = rectangles.find((r) => isPointInsideRectangle({ x: e.clientX, y: e.clientY }, r));
    if (rectangle) {
        if (confirm('Are you sure you want to remove this rectangle?')) {
            rectangles = rectangles.filter((r) => r !== rectangle);
            localStorage.setItem('rectangles', JSON.stringify(rectangles));
            render();
        }
    }
};

const handleInputBlur = (e) => {
    if (currentRectangle) {
        currentRectangle.text = input.value;
        localStorage.setItem('rectangles', JSON.stringify(rectangles));
        input.value = '';
        render();
    }
};

const handleClick = (e) => {
    rectangles.forEach((r) => (r.focus = false));
    const rectangle = rectangles.find((r) => isPointInsideRectangle({ x: e.clientX, y: e.clientY }, r));
    if (rectangle) {
        rectangle.focus = true;
        render();
    }
};

canvas.addEventListener('mousedown', handleMouseDown);
canvas.addEventListener('mousemove', handleMouseMove);
canvas.addEventListener('mouseup', handleMouseUp);
canvas.addEventListener('dblclick', handleDoubleClick);
canvas.addEventListener('contextmenu', handleContextMenu);
input.addEventListener('blur', handleInputBlur);
canvas.addEventListener('click', handleClick);

const render = () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    rectangles.forEach((r) => {
        ctx.fillStyle = 'white';
        ctx.fillRect(r.x, r.y, r.width, r.height);
        ctx.lineWidth = r.focus ? 3 : 1;
        ctx.strokeRect(r.x, r.y, r.width, r.height);
        ctx.fillStyle = 'black';
        ctx.fillText(r.text, r.x, r.y + r.height);
    });
    if (currentRectangle) {
        ctx.fillStyle = 'white';
        ctx.fillRect(currentRectangle.x, currentRectangle.y, currentRectangle.width, currentRectangle.height);
        ctx.lineWidth = 1;
        ctx.strokeRect(currentRectangle.x, currentRectangle.y, currentRectangle.width, currentRectangle.height);
    }
    ctx.lineWidth = 1;
};

render();