import { useRef } from 'react';
import { sudoku } from './SudokuGenerator';

export function useBoard() {
  const containerRef = useRef<HTMLDivElement | null>(null);
  const boardRef = useRef<string>('');
  const initialBoardRef = useRef<string>('');

  function generateBoard(difficulty: string = 'easy') {
    const newBoard = sudoku.generate(difficulty);
    boardRef.current = newBoard;
    initialBoardRef.current = newBoard;
  }

  function renderBoard() {
    const container = containerRef.current;
    if (!container) return;

    const board = boardRef.current;

    container.innerHTML = '';
    
    const sudokuDiv = document.createElement('div');
    sudokuDiv.id = 'sudoku';

    const grid = document.createElement('div');
    grid.className = 'sudoku-grid';

    for (let i = 0; i < 81; i++) {
      const r = Math.floor(i / 9);
      const c = i % 9;
      const cell = document.createElement('div');
      cell.className = 'sudoku-cell';
      cell.dataset.r = String(r);
      cell.dataset.c = String(c);
      
      const value = board[i];
      if (value && value !== '.') {
        cell.textContent = value;
      } else {
        cell.textContent = '';
      }
      
      grid.appendChild(cell);
    }

    sudokuDiv.appendChild(grid);
    container.appendChild(sudokuDiv);
  }

  return {
    containerRef,
    boardRef,
    initialBoardRef,
    generateBoard,
    renderBoard,
  };
}