const TILE_BG = '#F5F0E8';
const TILE_BORDER = '#8B7355';
const PIP_COLOR = '#1a1a1a';
const DOUBLE_ACCENT = '#EDE5D4';

const PIP_POSITIONS = {
  0: [],
  1: [[0, 0]],
  2: [[-1, -1], [1, 1]],
  3: [[-1, -1], [0, 0], [1, 1]],
  4: [[-1, -1], [1, -1], [-1, 1], [1, 1]],
  5: [[-1, -1], [1, -1], [0, 0], [-1, 1], [1, 1]],
  6: [[-1, -1], [1, -1], [-1, 0], [1, 0], [-1, 1], [1, 1]]
};

export function drawTile(ctx, x, y, w, h, tile, options = {}) {
  const { rotation = 0, alpha = 1, ghost = false, invalid = false, highlight = false } = options;

  ctx.save();
  ctx.translate(x, y);
  if (rotation) ctx.rotate((rotation * Math.PI) / 180);
  ctx.globalAlpha = ghost ? 0.35 : alpha;

  const hw = w / 2;
  const hh = h / 2;
  const r = 3;

  // Shadow
  if (!ghost) {
    ctx.shadowColor = 'rgba(0,0,0,0.4)';
    ctx.shadowBlur = 3;
    ctx.shadowOffsetY = 1;
  }

  if (highlight) {
    ctx.shadowColor = invalid ? 'rgba(239,68,68,0.7)' : 'rgba(228,172,56,0.7)';
    ctx.shadowBlur = 12;
  }

  // Tile body
  ctx.beginPath();
  ctx.roundRect(-hw, -hh, w, h, r);
  ctx.fillStyle = ghost ? (invalid ? 'rgba(239,68,68,0.15)' : 'rgba(228,172,56,0.2)') : TILE_BG;
  ctx.fill();
  ctx.shadowColor = 'transparent';
  ctx.shadowBlur = 0;
  ctx.shadowOffsetY = 0;
  ctx.strokeStyle = ghost ? (invalid ? '#ef4444' : '#E4AC38') : TILE_BORDER;
  ctx.lineWidth = ghost ? 1.5 : 1;
  ctx.stroke();

  if (!ghost) {
    const isDouble = tile.left === tile.right;
    const isLandscape = w > h; // wider than tall = landscape orientation

    if (isDouble) {
      ctx.fillStyle = DOUBLE_ACCENT;
      ctx.beginPath();
      ctx.roundRect(-hw + 1, -hh + 1, w - 2, h - 2, r - 1);
      ctx.fill();
      ctx.strokeStyle = TILE_BORDER;
      ctx.lineWidth = 1;
      ctx.beginPath();
      ctx.roundRect(-hw, -hh, w, h, r);
      ctx.stroke();
    }

    if (isLandscape) {
      // Tile is wider than tall → left half = tile.left, right half = tile.right
      // Divider: vertical line at center
      ctx.beginPath();
      ctx.moveTo(0, -hh + 2);
      ctx.lineTo(0, hh - 2);
      ctx.strokeStyle = '#B8A88A';
      ctx.lineWidth = 0.8;
      ctx.stroke();

      const spread = Math.min(hh * 0.6, 5.5);
      const pipR = Math.min(2.2, hh * 0.12);
      drawPips(ctx, -hw / 2, 0, spread, pipR, tile.left);
      drawPips(ctx, hw / 2, 0, spread, pipR, tile.right);
    } else {
      // Tile is taller than wide → top half = tile.left, bottom half = tile.right
      // Divider: horizontal line at center
      ctx.beginPath();
      ctx.moveTo(-hw + 2, 0);
      ctx.lineTo(hw - 2, 0);
      ctx.strokeStyle = '#B8A88A';
      ctx.lineWidth = 0.8;
      ctx.stroke();

      const spread = Math.min(hw * 0.6, 5.5);
      const pipR = Math.min(2.2, hw * 0.12);
      drawPips(ctx, 0, -hh / 2, spread, pipR, tile.left);
      drawPips(ctx, 0, hh / 2, spread, pipR, tile.right);
    }
  }

  ctx.restore();
}

function drawPips(ctx, cx, cy, spread, radius, value) {
  const positions = PIP_POSITIONS[value] || [];
  ctx.fillStyle = PIP_COLOR;
  for (const [px, py] of positions) {
    ctx.beginPath();
    ctx.arc(cx + px * spread, cy + py * spread, radius, 0, Math.PI * 2);
    ctx.fill();
  }
}

export function drawEndpointGlow(ctx, x, y, radius, valid) {
  const color = valid ? 'rgba(228,172,56,0.45)' : 'rgba(239,68,68,0.4)';
  const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius);
  gradient.addColorStop(0, color);
  gradient.addColorStop(0.5, valid ? 'rgba(228,172,56,0.12)' : 'rgba(239,68,68,0.08)');
  gradient.addColorStop(1, 'transparent');

  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI * 2);
  ctx.fillStyle = gradient;
  ctx.fill();

  // Center dot
  ctx.beginPath();
  ctx.arc(x, y, 5, 0, Math.PI * 2);
  ctx.fillStyle = valid ? '#E4AC38' : '#ef4444';
  ctx.globalAlpha = 0.85;
  ctx.fill();
  ctx.globalAlpha = 1;

  // Dashed ring
  ctx.beginPath();
  ctx.arc(x, y, radius * 0.55, 0, Math.PI * 2);
  ctx.strokeStyle = valid ? 'rgba(228,172,56,0.35)' : 'rgba(239,68,68,0.3)';
  ctx.lineWidth = 1.5;
  ctx.setLineDash([4, 4]);
  ctx.stroke();
  ctx.setLineDash([]);
}
