const TILE_BG = '#FFFDF5';
const TILE_BG_END = '#F2ECE0';
const TILE_BORDER = '#9B8360';
const PIP_COLOR = '#1a1a1a';
const DOUBLE_ACCENT = '#F5EFE0';

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, flipPips = 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.5;

  // Shadow
  if (!ghost) {
    ctx.shadowColor = 'rgba(0,0,0,0.45)';
    ctx.shadowBlur = 4;
    ctx.shadowOffsetY = 2;
    ctx.shadowOffsetX = 1;
  }

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

  // Tile body with gradient
  ctx.beginPath();
  ctx.roundRect(-hw, -hh, w, h, r);
  if (ghost) {
    ctx.fillStyle = invalid ? 'rgba(239,68,68,0.15)' : 'rgba(228,172,56,0.2)';
  } else {
    const grad = ctx.createLinearGradient(-hw, -hh, hw, hh);
    grad.addColorStop(0, TILE_BG);
    grad.addColorStop(1, TILE_BG_END);
    ctx.fillStyle = grad;
  }
  ctx.fill();

  // Reset shadow before stroke
  ctx.shadowColor = 'transparent';
  ctx.shadowBlur = 0;
  ctx.shadowOffsetY = 0;
  ctx.shadowOffsetX = 0;

  // Border
  ctx.strokeStyle = ghost ? (invalid ? '#ef4444' : '#E4AC38') : TILE_BORDER;
  ctx.lineWidth = ghost ? 1.5 : 1.2;
  ctx.stroke();

  // Inner highlight (top edge shine)
  if (!ghost) {
    ctx.beginPath();
    ctx.moveTo(-hw + r + 1, -hh + 1.2);
    ctx.lineTo(hw - r - 1, -hh + 1.2);
    ctx.strokeStyle = 'rgba(255,255,255,0.6)';
    ctx.lineWidth = 0.8;
    ctx.stroke();
  }

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

    // Determine which value goes in which half
    // When flipPips is true (chain goes LEFT or UP), the "left" value
    // is on the right/bottom side of the tile on screen
    const firstVal = flipPips ? tile.right : tile.left;
    const secondVal = flipPips ? tile.left : tile.right;

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

    if (isLandscape) {
      // Divider: vertical line at center
      ctx.beginPath();
      ctx.moveTo(0, -hh + 3);
      ctx.lineTo(0, hh - 3);
      ctx.strokeStyle = 'rgba(155,131,96,0.5)';
      ctx.lineWidth = 0.8;
      ctx.stroke();

      const spread = Math.min(hh * 0.55, 6);
      const pipR = Math.min(2.5, hh * 0.14);
      drawPips(ctx, -hw / 2, 0, spread, pipR, firstVal);
      drawPips(ctx, hw / 2, 0, spread, pipR, secondVal);
    } else {
      // Divider: horizontal line at center
      ctx.beginPath();
      ctx.moveTo(-hw + 3, 0);
      ctx.lineTo(hw - 3, 0);
      ctx.strokeStyle = 'rgba(155,131,96,0.5)';
      ctx.lineWidth = 0.8;
      ctx.stroke();

      const spread = Math.min(hw * 0.55, 6);
      const pipR = Math.min(2.5, hw * 0.14);
      drawPips(ctx, 0, -hh / 2, spread, pipR, firstVal);
      drawPips(ctx, 0, hh / 2, spread, pipR, secondVal);
    }
  }

  ctx.restore();
}

function drawPips(ctx, cx, cy, spread, radius, value) {
  const positions = PIP_POSITIONS[value] || [];
  for (const [px, py] of positions) {
    const x = cx + px * spread;
    const y = cy + py * spread;

    // Pip with subtle 3D effect
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2);
    ctx.fillStyle = PIP_COLOR;
    ctx.fill();

    // Specular highlight
    ctx.beginPath();
    ctx.arc(x - radius * 0.25, y - radius * 0.25, radius * 0.35, 0, Math.PI * 2);
    ctx.fillStyle = 'rgba(255,255,255,0.18)';
    ctx.fill();
  }
}

export function drawEndpointGlow(ctx, x, y, radius, valid) {
  const color = valid ? 'rgba(228,172,56,0.4)' : 'rgba(239,68,68,0.35)';
  const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius);
  gradient.addColorStop(0, color);
  gradient.addColorStop(0.4, 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.8;
  ctx.fill();
  ctx.globalAlpha = 1;

  // Animated-feel dashed ring
  ctx.beginPath();
  ctx.arc(x, y, radius * 0.5, 0, Math.PI * 2);
  ctx.strokeStyle = valid ? 'rgba(228,172,56,0.3)' : 'rgba(239,68,68,0.25)';
  ctx.lineWidth = 1.5;
  ctx.setLineDash([5, 5]);
  ctx.stroke();
  ctx.setLineDash([]);
}
