import { RECIPES } from './recipes';
import { COUNTER_TOP, GUEST_BOTTOM, SLOT_X, type Game } from './game';
import { meta, type AssetMap } from './assets';
import type { Guest } from './types';
import type { Particles } from './particles';

const W = 390;
const H = 844;
const GUEST_COLORS = ['#3a6ea5', '#9b59b6', '#d4843e', '#4f8a4f'];

export function drawScene(
  ctx: CanvasRenderingContext2D,
  assets: AssetMap,
  game: Game,
  particles: Particles,
  t: number,
): void {
  drawBackground(ctx, assets, t);
  for (const g of game.guests) drawGuest(ctx, assets, g, t);
  drawCounter(ctx, assets);
  for (const f of game.flying) drawFlyingDish(ctx, assets, f.asset, f.emoji, f.x, f.y);
  particles.draw(ctx);
}

function drawBackground(ctx: CanvasRenderingContext2D, assets: AssetMap, t: number): void {
  const bg = assets['bg'];
  if (bg) {
    ctx.drawImage(bg, 0, 0, W, H);
    return;
  }
  // placeholder interior: wall, windows, menu board, back counter, floor
  const sky = ctx.createLinearGradient(0, 0, 0, 480);
  sky.addColorStop(0, '#f7e3c2');
  sky.addColorStop(1, '#e8c79a');
  ctx.fillStyle = sky;
  ctx.fillRect(0, 0, W, 480);
  ctx.fillStyle = '#8fd2e8';
  ctx.strokeStyle = '#5a3a22';
  ctx.lineWidth = 5;
  for (const wx of [30, 250]) {
    ctx.fillRect(wx, 80, 110, 130);
    ctx.strokeRect(wx, 80, 110, 130);
  }
  ctx.fillStyle = '#3a2418';
  ctx.fillRect(115, 14, 160, 52);
  ctx.fillStyle = '#ffe9c7';
  ctx.font = '900 17px ui-rounded, system-ui';
  ctx.textAlign = 'center';
  ctx.fillText('SHORT STACK', 195, 46);
  // back counter
  ctx.fillStyle = '#b9763a';
  ctx.fillRect(0, 240, W, 30);
  ctx.fillStyle = '#9c5f2c';
  ctx.fillRect(0, 270, W, 60);
  // coffee machine
  ctx.fillStyle = '#777f8a';
  ctx.fillRect(310, 190, 52, 52);
  // floor
  ctx.fillStyle = '#c9b18e';
  ctx.fillRect(0, 480, W, H - 480);
  ctx.fillStyle = '#b59a73';
  for (let y = 480; y < H; y += 40) {
    for (let x = (y / 40) % 2 === 0 ? 0 : 40; x < W; x += 80) {
      ctx.fillRect(x, y, 40, 40);
    }
  }
  void t;
}

function drawCounter(ctx: CanvasRenderingContext2D, assets: AssetMap): void {
  const counter = assets['counter'];
  if (counter) {
    // landscape plate scaled to full width, anchored so its measured visible
    // top edge lands exactly on COUNTER_TOP
    const h = (counter.height / counter.width) * W;
    ctx.drawImage(counter, 0, COUNTER_TOP - h * meta.counterEdge, W, h);
    return;
  }
  ctx.fillStyle = '#d8a05a';
  ctx.fillRect(0, COUNTER_TOP, W, 26);
  ctx.fillStyle = '#b03028';
  ctx.fillRect(0, COUNTER_TOP + 26, W, 120);
  ctx.fillStyle = '#8c2420';
  ctx.fillRect(0, COUNTER_TOP + 146, W, 10);
  // stools
  for (const x of SLOT_X) {
    ctx.fillStyle = '#e8e8e8';
    ctx.fillRect(x - 6, COUNTER_TOP + 190, 12, 80);
    ctx.fillStyle = '#e03a3e';
    ctx.beginPath();
    ctx.ellipse(x, COUNTER_TOP + 185, 38, 16, 0, 0, Math.PI * 2);
    ctx.fill();
    ctx.strokeStyle = '#8c2420';
    ctx.lineWidth = 3;
    ctx.stroke();
  }
}

function drawGuest(ctx: CanvasRenderingContext2D, assets: AssetMap, g: Guest, t: number): void {
  const bob = g.state === 'waiting' ? Math.sin(g.bob * 2.4) * 3 : 0;
  const img = assets[`guest${g.spriteIdx}`];
  const size = 205;
  const y = GUEST_BOTTOM - size + bob;
  if (img) {
    ctx.drawImage(img, g.x - size / 2, y, size, size);
  } else {
    // placeholder: rounded torso + head
    ctx.fillStyle = GUEST_COLORS[g.spriteIdx % GUEST_COLORS.length];
    ctx.strokeStyle = '#3a2418';
    ctx.lineWidth = 4;
    ctx.beginPath();
    ctx.roundRect(g.x - 52, y + 92, 104, 120, 26);
    ctx.fill();
    ctx.stroke();
    ctx.fillStyle = '#f4c89a';
    ctx.beginPath();
    ctx.arc(g.x, y + 56, 42, 0, Math.PI * 2);
    ctx.fill();
    ctx.stroke();
    ctx.fillStyle = '#3a2418';
    ctx.beginPath();
    ctx.arc(g.x - 14, y + 50, 4.5, 0, Math.PI * 2);
    ctx.arc(g.x + 14, y + 50, 4.5, 0, Math.PI * 2);
    ctx.fill();
    const mood = g.state === 'leaving-angry' ? -1 : g.patience / g.patienceMax > 0.4 ? 1 : 0;
    ctx.beginPath();
    if (mood === 1) ctx.arc(g.x, y + 62, 14, 0.15 * Math.PI, 0.85 * Math.PI);
    else if (mood === 0) ctx.moveTo(g.x - 12, y + 74), ctx.lineTo(g.x + 12, y + 74);
    else ctx.arc(g.x, y + 86, 14, 1.15 * Math.PI, 1.85 * Math.PI);
    ctx.lineWidth = 3.5;
    ctx.stroke();
  }
  // reaction badge while leaving
  if (g.state === 'leaving-happy' || g.state === 'leaving-angry') {
    const glyph = g.state === 'leaving-happy' ? '😋' : '💢';
    ctx.font = '30px system-ui, sans-serif';
    ctx.textAlign = 'center';
    ctx.globalAlpha = Math.max(0, 1 - g.leaveT * 0.8);
    ctx.fillText(glyph, g.x + 28, y + 14 - g.leaveT * 24);
    ctx.globalAlpha = 1;
  }
  // sweat drop when patience is low
  if (g.state === 'waiting' && g.patience / g.patienceMax < 0.3) {
    ctx.font = '22px system-ui, sans-serif';
    ctx.textAlign = 'center';
    ctx.globalAlpha = 0.6 + Math.sin(t * 7) * 0.4;
    ctx.fillText('💦', g.x + 40, y + 36);
    ctx.globalAlpha = 1;
  }
}

function drawFlyingDish(
  ctx: CanvasRenderingContext2D,
  assets: AssetMap,
  asset: string,
  emoji: string,
  x: number,
  y: number,
): void {
  const img = assets[asset];
  if (img) {
    ctx.drawImage(img, x - 42, y - 42, 84, 84);
  } else {
    ctx.fillStyle = '#fffdf8';
    ctx.strokeStyle = '#cdb89a';
    ctx.lineWidth = 3;
    ctx.beginPath();
    ctx.ellipse(x, y + 10, 38, 17, 0, 0, Math.PI * 2);
    ctx.fill();
    ctx.stroke();
    ctx.font = '40px system-ui, sans-serif';
    ctx.textAlign = 'center';
    ctx.fillText(emoji, x, y + 12);
  }
}

export function recipeEmoji(idx: number): string {
  return RECIPES[idx].emoji;
}
