/* project-schem.jsx — compact circuit schematics, one per Beacon stage.
   Built from primitive symbols (rails, resistor rects, LED/diode triangles,
   cap plates, coil bumps, transistor, 555 box) in the site's schematic style.
   The part a stage ADDS is drawn in the accent colour. Names PJS_/pjs prefixed. */

const PJS_INK = "var(--ink-soft)";
const PJS_HOT = "var(--current)";
const PJS = { TY: 30, BY: 82, LX: 36, RX: 264 };

const pjsLn = (x1, y1, x2, y2, c, w, k) =>
  <line key={k} x1={x1} y1={y1} x2={x2} y2={y2} stroke={c || PJS_INK} strokeWidth={w || 1.7} strokeLinecap="round" />;
const pjsTxt = (x, y, s, c, k) =>
  <text key={k} x={x} y={y} textAnchor="middle" fontFamily="IBM Plex Mono, monospace" fontSize="9" fill={c || PJS_INK}>{s}</text>;

/* two-terminal symbols centred at (cx,y) */
const pjsRes = (cx, y, c, k) => (
  <rect key={k || "r" + cx} x={cx - 15} y={y - 6} width="30" height="12" rx="1.5"
        fill="var(--bg-card)" stroke={c || PJS_INK} strokeWidth="1.7" />
);
const pjsLed = (cx, y, c, k) => (
  <g key={k || "led" + cx}>
    <rect x={cx - 16} y={y - 1.2} width="32" height="2.4" fill="var(--bg-card)" stroke="none" />
    <path d={`M${cx - 7} ${y - 8} L${cx + 7} ${y} L${cx - 7} ${y + 8} Z`} fill="var(--bg-card)" stroke={c || PJS_INK} strokeWidth="1.7" />
    <line x1={cx + 7} y1={y - 8} x2={cx + 7} y2={y + 8} stroke={c || PJS_INK} strokeWidth="1.7" />
    <path d={`M${cx + 3} ${y - 11} l5 -4`} fill="none" stroke={c || PJS_INK} strokeWidth="1.1" />
    <path d={`M${cx + 8} ${y - 16} l4 1 -1 4`} fill="none" stroke={c || PJS_INK} strokeWidth="1.1" />
  </g>
);
const pjsDio = (cx, y, c, k) => (
  <g key={k || "d" + cx}>
    <rect x={cx - 15} y={y - 1.2} width="30" height="2.4" fill="var(--bg-card)" stroke="none" />
    <path d={`M${cx - 7} ${y - 7} L${cx + 7} ${y} L${cx - 7} ${y + 7} Z`} fill="var(--bg-card)" stroke={c || PJS_INK} strokeWidth="1.7" />
    <line x1={cx + 7} y1={y - 7} x2={cx + 7} y2={y + 7} stroke={c || PJS_INK} strokeWidth="1.7" />
  </g>
);
const pjsLamp = (cx, y, c, k) => (
  <g key={k || "l" + cx}>
    <circle cx={cx} cy={y} r="10" fill="var(--bg-card)" stroke={c || PJS_INK} strokeWidth="1.7" />
    <path d={`M${cx - 7} ${y - 7} l14 14 M${cx + 7} ${y - 7} l-14 14`} stroke={c || PJS_INK} strokeWidth="1.2" />
  </g>
);
/* capacitor on a vertical branch at x, plates around yc */
const pjsCapV = (x, yc, c, k) => (
  <g key={k || "c" + x}>
    <line x1={x - 9} y1={yc} x2={x + 9} y2={yc} stroke={c || PJS_INK} strokeWidth="2" />
    <line x1={x - 9} y1={yc + 7} x2={x + 9} y2={yc + 7} stroke={c || PJS_INK} strokeWidth="2" />
  </g>
);
const pjsSw = (cx, y, c, k) => (
  <g key={k || "s" + cx}>
    <circle cx={cx - 10} cy={y} r="2.4" fill={c || PJS_INK} />
    <circle cx={cx + 10} cy={y} r="2.4" fill={c || PJS_INK} />
    <line x1={cx - 10} y1={y} x2={cx + 8} y2={y - 9} stroke={c || PJS_INK} strokeWidth="1.7" />
  </g>
);
const pjsCoil = (x1, y, c, k) => (
  <path key={k || "k" + x1} d={`M${x1} ${y} q4 -9 8 0 q4 -9 8 0 q4 -9 8 0 q4 -9 8 0`}
        fill="none" stroke={c || PJS_INK} strokeWidth="1.8" />
);
const pjsNpn = (cx, cy, c, k) => (
  <g key={k || "q" + cx}>
    <circle cx={cx} cy={cy} r="12" fill="var(--bg-card)" stroke={c || PJS_INK} strokeWidth="1.7" />
    <line x1={cx - 5} y1={cy - 8} x2={cx - 5} y2={cy + 8} stroke={c || PJS_INK} strokeWidth="2.6" />
    <line x1={cx - 5} y1={cy - 4} x2={cx + 8} y2={cy - 10} stroke={c || PJS_INK} strokeWidth="1.7" />
    <line x1={cx - 5} y1={cy + 4} x2={cx + 8} y2={cy + 10} stroke={c || PJS_INK} strokeWidth="1.7" />
    <path d={`M${cx + 3} ${cy + 6} l5 4 -5 1`} fill={c || PJS_INK} stroke="none" />
  </g>
);

/* left-hand source: battery or AC */
const pjsSource = (kind) => {
  const x = PJS.LX;
  const els = [
    pjsLn(x, PJS.TY, x, 44, PJS_INK, 1.7, "lt"),
    pjsLn(x, 62, x, PJS.BY, PJS_INK, 1.7, "lb"),
  ];
  if (kind === "ac") {
    els.push(
      <circle key="acc" cx={x} cy={53} r="11" fill="var(--bg-card)" stroke={PJS_INK} strokeWidth="1.7" />,
      <path key="acs" d={`M${x - 6} 53 q3 -5 6 0 t6 0`} fill="none" stroke={PJS_INK} strokeWidth="1.4" />,
      pjsTxt(x, 24, "AC", PJS_INK, "act"),
    );
  } else {
    els.push(
      pjsLn(x - 8, 46, x + 8, 46, PJS_INK, 2.6, "b1"),
      pjsLn(x - 5, 51, x + 5, 51, PJS_INK, 2.4, "b2"),
      pjsLn(x - 8, 56, x + 8, 56, PJS_INK, 2.6, "b3"),
      pjsLn(x - 5, 61, x + 5, 61, PJS_INK, 2.4, "b4"),
      pjsTxt(x, 22, "9V", PJS_INK, "v9"),
    );
  }
  return els;
};

/* the outer loop frame (top rail, right side, bottom rail) */
const pjsFrame = () => [
  pjsLn(PJS.LX, PJS.TY, PJS.RX, PJS.TY, PJS_INK, 1.7, "tr"),
  pjsLn(PJS.RX, PJS.TY, PJS.RX, PJS.BY, PJS_INK, 1.7, "rr"),
  pjsLn(PJS.LX, PJS.BY, PJS.RX, PJS.BY, PJS_INK, 1.7, "br"),
];

/* per-stage element lists. `picks` (the stage's current selections) lets a few
   stages redraw to match what you chose — e.g. series vs parallel. */
function pjsStage(id, picks) {
  const T = PJS.TY, B = PJS.BY;
  const p = picks || {};
  const base = [...pjsFrame(), ...pjsSource(id === "smooth" ? "ac" : "bat")];

  // vertical branch holding a resistor + LED, between the top & bottom rails
  const pjsBranch = (x, k) => [
    pjsLn(x, T, x, 39, PJS_INK, 1.7, k + "w1"),
    <rect key={k + "r"} x={x - 6} y={39} width="12" height="13" rx="1.5"
          fill="var(--bg-card)" stroke={PJS_HOT} strokeWidth="1.7" />,
    pjsLn(x, 52, x, 57, PJS_INK, 1.7, k + "w2"),
    <path key={k + "led"} d={`M${x - 6} 57 L${x + 6} 57 L${x} 69 Z`}
          fill="var(--bg-card)" stroke={PJS_INK} strokeWidth="1.7" />,
    pjsLn(x - 6, 69, x + 6, 69, PJS_INK, 1.7, k + "bar"),
    pjsLn(x, 69, x, B, PJS_INK, 1.7, k + "w3"),
  ];
  // vertical switch on a branch between the rails
  const pjsBranchSw = (x, label, k) => [
    pjsLn(x, T, x, 44, PJS_INK, 1.7, k + "w1"),
    <circle key={k + "a"} cx={x} cy={46} r="2.2" fill={PJS_HOT} />,
    pjsLn(x, 46, x + 9, 56, PJS_HOT, 1.7, k + "arm"),
    <circle key={k + "b"} cx={x} cy={60} r="2.2" fill={PJS_HOT} />,
    pjsLn(x, 60, x, B, PJS_INK, 1.7, k + "w2"),
    pjsTxt(x, 24, label, PJS_HOT, k + "t"),
  ];

  switch (id) {
    case "light":
      return [...base, pjsRes(120, T, PJS_HOT, "R"), pjsLed(200, T, PJS_INK, "L"),
        pjsTxt(120, T - 12, "R", PJS_HOT, "rl")];
    case "array":
      if (p.mode === "parallel") {
        return [...pjsSource("bat"),
          pjsLn(PJS.LX, T, 232, T, PJS_INK, 1.7, "ptr"),
          pjsLn(PJS.LX, B, 232, B, PJS_INK, 1.7, "pbr"),
          ...pjsBranch(120, "pb1"), ...pjsBranch(176, "pb2"), ...pjsBranch(232, "pb3"),
          pjsTxt(176, 95, "parallel · 3 branches, one R each", PJS_HOT, "pl")];
      }
      return [...base, pjsRes(95, T, PJS_HOT, "R"),
        pjsLed(150, T, PJS_INK), pjsLed(190, T, PJS_INK, "l2"), pjsLed(230, T, PJS_INK, "l3"),
        pjsTxt(150, T - 12, "R", PJS_HOT, "rl"),
        pjsTxt(190, 95, p.mode === "series" ? "series · one string of 3" : "×3", PJS_HOT, "x3")];
    case "power":
      return [...base, pjsRes(120, T, PJS_HOT, "R"), pjsLed(205, T, PJS_INK, "L"),
        <path key="h1" d="M112 18 q3 -4 6 0 t6 0" fill="none" stroke={PJS_HOT} strokeWidth="1.3" />,
        <path key="h2" d="M120 14 q3 -4 6 0 t6 0" fill="none" stroke={PJS_HOT} strokeWidth="1.3" />,
        pjsTxt(150, T - 11, "P=I²R", PJS_HOT, "p")];
    case "soft":
      return [...base, pjsRes(100, T, PJS_INK, "R"),
        pjsLn(165, T, 165, 52, PJS_INK, 1.7, "cb"), pjsCapV(165, 52, PJS_HOT),
        pjsLn(165, 66, 165, B, PJS_INK, 1.7, "cb2"),
        pjsLed(225, T, PJS_INK, "L"), pjsTxt(165, T - 8, "C", PJS_HOT, "cl")];
    case "arm":
      if (p.wire === "parallel") {
        return [...pjsSource("bat"),
          pjsLn(PJS.LX, T, 232, T, PJS_INK, 1.7, "atr"),
          pjsLn(PJS.LX, B, 232, B, PJS_INK, 1.7, "abr"),
          ...pjsBranchSw(120, "KEY", "as1"), ...pjsBranchSw(176, "ARM", "as2"),
          pjsLed(232, 52, PJS_INK, "L"),
          pjsLn(232, T, 232, 44, PJS_INK, 1.7, "alw"), pjsLn(232, 60, 232, B, PJS_INK, 1.7, "alw2"),
          pjsTxt(148, 95, "parallel → OR (either fires it)", PJS_HOT, "al")];
      }
      return [...base, pjsSw(110, T, PJS_HOT), pjsSw(170, T, PJS_HOT, "s2"), pjsLed(232, T, PJS_INK, "L"),
        pjsTxt(110, T - 12, "KEY", PJS_HOT, "k1"), pjsTxt(170, T - 12, "ARM", PJS_HOT, "k2"),
        pjsTxt(140, 95, p.wire === "series" ? "series → AND (both required)" : "two switches", PJS_HOT, "al")];
    case "drive":
      return [...base, pjsLamp(176, T, PJS_INK, "lamp"),
        pjsLn(176, T + 10, 176, 44, PJS_INK, 1.7, "cl"),
        pjsNpn(176, 56, PJS_INK, "q"),
        pjsLn(176, 68, 176, B, PJS_INK, 1.7, "el"),
        pjsRes(110, 56, PJS_HOT, "Rb"), pjsLn(125, 56, 171, 56, PJS_INK, 1.7, "bl"),
        pjsLn(70, 56, 95, 56, PJS_INK, 1.7, "ctl"), pjsTxt(70, 52, "in", PJS_INK, "in"),
        pjsTxt(110, 44, "Rb", PJS_HOT, "rbl")];
    case "protect":
      return [...base, pjsDio(86, T, PJS_HOT, "D"), pjsRes(150, T, PJS_INK, "R"), pjsLed(215, T, PJS_INK, "L"),
        pjsTxt(86, T - 11, "protect", PJS_HOT, "dl")];
    case "smooth":
      return [...base, pjsDio(96, T, PJS_INK, "D"),
        pjsLn(155, T, 155, 52, PJS_INK, 1.7, "cb"), pjsCapV(155, 52, PJS_HOT),
        pjsLn(155, 66, 155, B, PJS_INK, 1.7, "cb2"),
        pjsLamp(218, T, PJS_INK, "lamp"), pjsTxt(155, T - 8, "C", PJS_HOT, "cl"),
        pjsTxt(96, T - 11, "rectify", PJS_INK, "dl")];
    case "kick":
      return [...base, pjsCoil(150, T, PJS_INK, "coil"),
        pjsLn(186, T, 186, 44, PJS_INK, 1.7, "cl"), pjsNpn(186, 56, PJS_INK, "q"),
        pjsLn(186, 68, 186, B, PJS_INK, 1.7, "el"),
        pjsLn(150, T, 150, 44, PJS_INK, 1.7, "fl"),
        pjsDio(150, 56, PJS_HOT, "fb"), pjsLn(150, 63, 150, B, PJS_INK, 1.7, "fl2"),
        pjsRes(108, 56, PJS_INK, "Rb"), pjsLn(123, 56, 181, 56, PJS_INK, 1.7, "bl"),
        pjsLn(78, 56, 93, 56, PJS_INK, 1.7, "ctl"),
        pjsTxt(150, T - 9, "flyback", PJS_HOT, "fbl"), pjsTxt(168, 22, "coil", PJS_INK, "cll")];
    case "blink":
      return [...pjsFrame(), ...pjsSource("bat"),
        <rect key="ic" x={108} y={40} width="56" height="34" rx="3" fill="var(--bg-card)" stroke={PJS_HOT} strokeWidth="1.8" />,
        pjsTxt(136, 61, "555", PJS_HOT, "ict"),
        pjsRes(136, T, PJS_INK, "R1"), pjsLn(136, T + 6, 136, 40, PJS_INK, 1.7, "r1l"),
        pjsLn(164, 50, 200, 50, PJS_INK, 1.7, "out"),
        pjsLn(200, 50, 200, T, PJS_INK, 1.7, "outu"), pjsLed(225, T, PJS_INK, "L"),
        pjsLn(225, T, 225, 50, PJS_INK, 1.7, "ll"), pjsLn(200, 50, 225, 50, PJS_INK, 1.7, "ol"),
        pjsLn(120, 74, 120, B, PJS_INK, 1.7, "gl"),
        pjsTxt(136, T - 9, "R,C", PJS_HOT, "rc"), pjsTxt(182, 46, "OUT", PJS_INK, "ot")];
    default:
      return base;
  }
}

function PjSchematic({ id, picks }) {
  return (
    <svg className="pj-schem" viewBox="0 0 300 100" width="100%" height="100%"
         preserveAspectRatio="xMidYMid meet" aria-hidden="true">
      {pjsStage(id, picks)}
    </svg>
  );
}

Object.assign(window, { PjSchematic });