import type { Tool } from '../sim/cutlery';

/**
 * A schematic silhouette of a piece of cutlery, drawn from the same numbers the
 * mesh and the colliders use. That matters: the drawer's whole challenge is
 * telling a dessert fork from a dinner fork, and the card has to be honest about
 * the difference or the puzzle is a lie. Everything is drawn to a shared scale,
 * so a shorter piece really does look shorter.
 */
export function toolSilhouette(tool: Tool): string {
  const SCALE = 62; // px per world unit; shared across tools so sizes compare
  const L = tool.length * SCALE;
  const hw = (tool.headW / 2) * SCALE;
  const hl = tool.headL * SCALE;
  const handleL = L - hl - 0.12 * SCALE;
  const w = 132;
  const h = 150;
  const cx = w / 2;
  const top = (h - L) / 2;

  const parts: string[] = [];
  // handle: tapered, butt at the bottom
  const bw = 0.085 * SCALE;
  const nw = 0.052 * SCALE;
  const y0 = top + hl + 0.12 * SCALE;
  parts.push(
    `<path d="M ${cx - nw} ${y0} L ${cx - bw} ${y0 + handleL * 0.55} Q ${cx - bw} ${y0 + handleL} ${cx} ${y0 + handleL} Q ${cx + bw} ${y0 + handleL} ${cx + bw} ${y0 + handleL * 0.55} L ${cx + nw} ${y0} Z"/>`,
  );

  if (tool.kind === 'knife') {
    const round = tool.id === 'butter_knife' || tool.id === 'spreader';
    parts.push(
      round
        ? `<path d="M ${cx - nw} ${y0} L ${cx - hw} ${top + hl * 0.45} Q ${cx - hw} ${top} ${cx} ${top} Q ${cx + hw} ${top} ${cx + hw} ${top + hl * 0.45} L ${cx + nw} ${y0} Z"/>`
        : `<path d="M ${cx - nw} ${y0} L ${cx - hw} ${top + hl * 0.45} L ${cx - hw * 0.5} ${top + hl * 0.07} Q ${cx} ${top - 2} ${cx + hw * 0.7} ${top + hl * 0.14} L ${cx + hw} ${top + hl * 0.45} L ${cx + nw} ${y0} Z"/>`,
    );
  } else if (tool.kind === 'fork') {
    const shoulderY = top + hl * 0.66;
    parts.push(
      `<path d="M ${cx - nw} ${y0} L ${cx - hw} ${shoulderY} L ${cx + hw} ${shoulderY} L ${cx + nw} ${y0} Z"/>`,
    );
    const tw = (hw * 2) / 7;
    for (let i = 0; i < 4; i++) {
      const x = cx + (i - 1.5) * ((hw * 2) / 4);
      parts.push(`<rect x="${x - tw / 2}" y="${top}" width="${tw}" height="${shoulderY - top}" rx="${tw / 2}"/>`);
    }
  } else {
    parts.push(`<ellipse cx="${cx}" cy="${top + hl * 0.42}" rx="${hw}" ry="${hl * 0.46}"/>`);
    parts.push(
      `<path d="M ${cx - nw} ${y0} L ${cx - nw * 1.2} ${top + hl * 0.7} L ${cx + nw * 1.2} ${top + hl * 0.7} L ${cx + nw} ${y0} Z"/>`,
    );
  }

  return `<svg class="sil" viewBox="0 0 ${w} ${h}" width="${w}" height="${h}" aria-hidden="true"><g fill="currentColor">${parts.join('')}</g></svg>`;
}
