import { CommonCanvas } from '../modules/canvas_utils.js';

const V_SIZE = 600; // 논리적 고정 크기
const CELL_SIZE = V_SIZE / 9;

function drawSudoku(ctx, boardData, state) {
    ctx.clearRect(0, 0, V_SIZE, V_SIZE);

    // 1. 그리드 그리기
    for (let i = 0; i <= 9; i++) {
        ctx.lineWidth = (i % 3 === 0) ? 4 : 1;
        ctx.beginPath();
        ctx.moveTo(i * CELL_SIZE, 0); ctx.lineTo(i * CELL_SIZE, V_SIZE);
        ctx.moveTo(0, i * CELL_SIZE); ctx.lineTo(V_SIZE, i * CELL_SIZE);
        ctx.stroke();
    }

    // 2. 숫자 및 하이라이트 그리기
    boardData.forEach((val, i) => {
        const r = Math.floor(i / 9);
        const c = i % 9;
        const x = c * CELL_SIZE;
        const y = r * CELL_SIZE;

        // 선택된 셀 하이라이트
        if (state.focusedIndex === i) {
            ctx.fillStyle = 'rgba(0, 123, 255, 0.2)';
            ctx.fillRect(x, y, CELL_SIZE, CELL_SIZE);
        }

        // 숫자 렌더링
        if (val !== 0) {
            ctx.fillStyle = state.isEditable[i] ? '#007bff' : '#000';
            ctx.font = `bold ${CELL_SIZE * 0.6}px Arial`;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText(val, x + CELL_SIZE/2, y + CELL_SIZE/2);
        }
    });
}