const TILE_BG = '#FFFFF0';
const TILE_BORDER = '#444';
const PIP_COLOR = '#1a1a1a';
const DOUBLE_ACCENT = '#e8e0c8';

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, glow = false, ghost = false, invalid = false, highlight = false } = options;

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

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

  if (glow || highlight) {
    ctx.shadowColor = invalid ? 'rgba(239,68,68,0.6)' : 'rgba(16,185,129,0.6)';
    ctx.shadowBlur = 12;
  }

  ctx.beginPath();
  ctx.roundRect(-hw, -hh, w, h, r);
  ctx.fillStyle = ghost ? (invalid ? 'rgba(239,68,68,0.2)' : 'rgba(16,185,129,0.2)') : TILE_BG;
  ctx.fill();
  ctx.strokeStyle = ghost ? (invalid ? '#ef4444' : '#10b981') : TILE_BORDER;
  ctx.lineWidth = ghost ? 2 : 1.5;
  ctx.stroke();

  ctx.shadowColor = 'transparent';
  ctx.shadowBlur = 0;

  if (!ghost) {
    const isDouble = tile.left === tile.right;
    const isHorizontal = w > h;

    if (isHorizontal) {
      ctx.beginPath();
      ctx.moveTo(0, -hh + 3);
      ctx.lineTo(0, hh - 3);
      ctx.strokeStyle = '#aaa';
      ctx.lineWidth = 1;
      ctx.stroke();

      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.5;
        ctx.beginPath();
        ctx.roundRect(-hw, -hh, w, h, r);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(0, -hh + 3);
        ctx.lineTo(0, hh - 3);
        ctx.strokeStyle = '#999';
        ctx.lineWidth = 1;
        ctx.stroke();
      }

      const spread = Math.min(hw * 0.35, 7);
      const pipR = Math.min(hw * 0.08, 2.8);
      drawPips(ctx, -hw / 2, 0, spread, pipR, tile.left);
      drawPips(ctx, hw / 2, 0, spread, pipR, tile.right);
    } else {
      ctx.beginPath();
      ctx.moveTo(-hw + 3, 0);
      ctx.lineTo(hw - 3, 0);
      ctx.strokeStyle = '#aaa';
      ctx.lineWidth = 1;
      ctx.stroke();

      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.5;
        ctx.beginPath();
        ctx.roundRect(-hw, -hh, w, h, r);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(-hw + 3, 0);
        ctx.lineTo(hw - 3, 0);
        ctx.strokeStyle = '#999';
        ctx.lineWidth = 1;
        ctx.stroke();
      }

      const spread = Math.min(hh * 0.35, 7);
      const pipR = Math.min(hh * 0.08, 2.8);
      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(16,185,129,0.5)' : 'rgba(239,68,68,0.4)';
  const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius);
  gradient.addColorStop(0, color);
  gradient.addColorStop(0.6, valid ? 'rgba(16,185,129,0.15)' : 'rgba(239,68,68,0.1)');
  gradient.addColorStop(1, 'transparent');

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

  ctx.beginPath();
  ctx.arc(x, y, 8, 0, Math.PI * 2);
  ctx.fillStyle = valid ? '#10b981' : '#ef4444';
  ctx.globalAlpha = 0.7;
  ctx.fill();
  ctx.globalAlpha = 1;
}
