/* ============================================================
   Autoprinter — Explainer scenes · shared utilities
   The two variants (storybook + architecture) import these.
   ============================================================ */

const PALETTE = {
  paper:   "#F8F4E8",
  paper2:  "#F2EDDD",
  paper3:  "#EBE5D2",
  paper4:  "#DED7C2",
  rule:    "#E5DFCB",
  ink:     "#1A1712",
  ink2:    "#2A251D",
  ink3:    "#524A3D",
  ink4:    "#7A7160",
  ink5:    "#A39A87",
  honey:   "#E2A23A",
  honeyLn: "#C68A28",
  honeyDk: "#8A5C16",
  honeySf: "#F4E2B7",
  ok:      "#4A8F5C",
  okSoft:  "#D9E8DC",
  err:     "#A8412B",
};

// Tag default letterSpacing was 0.08em; bumped to 0.14em to match the canonical step-label
// styling used in scene 5 (raw-text labels). This propagates through every Tag usage in the
// file. If a specific Tag needs the old tighter spacing, pass letterSpacing="0.08em" explicitly.
const Tag = ({ x, y, text, anchor = "start", color = PALETTE.ink3, size = 11, weight = 500, letterSpacing = "0.14em" }) => (
  <text x={x} y={y} fontFamily="Geist Mono, ui-monospace, monospace"
        fontSize={size} fill={color} textAnchor={anchor}
        letterSpacing={letterSpacing} fontWeight={weight}
        style={{ textTransform: "uppercase" }}>
    {text}
  </text>
);

const Pointer = ({ from, to, color = PALETTE.ink4, dashed = true }) => (
  <g>
    <line x1={from.x} y1={from.y} x2={to.x} y2={to.y}
          stroke={color} strokeWidth="1"
          strokeDasharray={dashed ? "3 3" : "0"}/>
    <circle cx={to.x} cy={to.y} r="2" fill={color}/>
  </g>
);

// Annotation styling unified with scene 5's canonical step-label look:
//   - Title: Tag at size=11 weight=700 letterSpacing=0.14em (Tag handles letterSpacing)
//   - Body:  Geist sans-serif at fontSize=11 fill=ink4 default-weight
// Was previously: title size=10 (smaller), body fontSize=13 (bigger), fill=ink2 (darker),
// fontWeight=500 — which made scene 2's labels look heavier and bigger than scene 5's.
const Annotation = ({ x, y, label, body, anchor = "left" }) => {
  const align = anchor === "right" ? "end" : "start";
  const lines = Array.isArray(body) ? body : [body];
  return (
    <g>
      <Tag x={x} y={y} text={label} anchor={align} color={PALETTE.honeyDk} size={11} weight={700}/>
      <text x={x} y={y + 16} fontFamily="Geist, system-ui, sans-serif"
            fontSize="11" fill={PALETTE.ink4} textAnchor={align}>
        {lines.map((line, i) => (
          <tspan key={i} x={x} dy={i === 0 ? 0 : 13}>{line}</tspan>
        ))}
      </text>
    </g>
  );
};

/* Friendly face — used by Storybook variant only */
const Face = ({ cx = 0, cy = 0, r = 6, scale = 1, expression = "smile" }) => (
  <g transform={`translate(${cx}, ${cy}) scale(${scale})`}>
    <circle cx="0" cy="0" r={r} fill={PALETTE.honeySf} stroke={PALETTE.honeyLn} strokeWidth="0.8"/>
    <circle cx={-r * 0.27} cy={-r * 0.1} r={r * 0.12} fill={PALETTE.ink}/>
    <circle cx={r * 0.27} cy={-r * 0.1} r={r * 0.12} fill={PALETTE.ink}/>
    {expression === "smile" && (
      <path d={`M ${-r * 0.3} ${r * 0.23} Q 0 ${r * 0.43} ${r * 0.3} ${r * 0.23}`}
            fill="none" stroke={PALETTE.ink} strokeWidth={r * 0.12} strokeLinecap="round"/>
    )}
    {expression === "wink" && (
      <>
        <line x1={-r * 0.4} y1={-r * 0.1} x2={-r * 0.15} y2={-r * 0.1}
              stroke={PALETTE.ink} strokeWidth={r * 0.13} strokeLinecap="round"/>
        <path d={`M ${-r * 0.3} ${r * 0.23} Q 0 ${r * 0.43} ${r * 0.3} ${r * 0.23}`}
              fill="none" stroke={PALETTE.ink} strokeWidth={r * 0.12} strokeLinecap="round"/>
      </>
    )}
  </g>
);

Object.assign(window, { PALETTE, Tag, Pointer, Annotation, Face });