import { shapeToEmoji } from "./emoji.js";
import { DEBUG } from "./config.js";
import { getTileFeedback } from "./tile.js";
import { getGridPositions } from "./logic.js";

export function createCanvas() {
  const canvas = document.createElement("canvas");
  canvas.id = "game-canvas";
  canvas.width = 600;
  canvas.height = 600;
  return canvas;
}

export function renderTiles(tiles, selectedIndices, changedIndices, showFeedback, gridSize) {
  if (DEBUG) console.log("🔄 renderTiles called", {
    tiles,
    selectedIndices,
    changedIndices,
    showFeedback,
    gridSize
  });
  const gameArea = document.getElementById("game-area");
  gameArea.innerHTML = "";

  const grid = document.createElement("div");
  grid.className = "grid";
  grid.style.gridTemplateColumns = `repeat(${gridSize}, 1fr)`;

  const validPositions = getGridPositions(gridSize).map(pos => pos.toString());

  tiles.forEach((tile, idx) => {
    if (!tile.position || tile.position.length !== 2 || !validPositions.includes(tile.position.toString())) {
      if (DEBUG) console.warn("❗ Ungültige tile.position", tile);
      return;
    }
    const [row, col] = tile.position;
    const div = document.createElement("div");
    div.className = "tile";
    div.style.gridRowStart = row + 1;
    div.style.gridColumnStart = col + 1;

    let feedbackIcon = "";
    if (showFeedback) {
      const fb = getTileFeedback(idx, selectedIndices, changedIndices);
      if (fb === "correct") feedbackIcon = "✅";
      if (fb === "wrong") feedbackIcon = "❌";
      if (fb === "missed") feedbackIcon = "⚠️";
    }

    div.innerHTML = `
      <div class="emoji">${shapeToEmoji(tile.shape)}</div>
      <div>${tile.number}</div>
      ${feedbackIcon}
    `;

    if (!showFeedback) {
      div.onclick = () => {
        if (selectedIndices.includes(idx)) {
          selectedIndices.splice(selectedIndices.indexOf(idx), 1);
        } else {
          selectedIndices.push(idx);
        }
        renderTiles(tiles, selectedIndices, changedIndices, false, gridSize);
      };
    }

    grid.appendChild(div);
  });

  gameArea.appendChild(grid);
}