/* cl-breadboard.jsx — breadboard view for the Circuit Lab. Same series circuit
   as the schematic, same live current driving the SAME calm charge animation, so
   the two panels move in lockstep. Components sit on a recognizable board; the
   jumper, resistors and battery carry their live values. Names clb*.
   Exports ClBreadboard. */

function clbHole(x, y, key, fill = "#3a3327") {
  return <circle key={key} cx={x} cy={y} r="3" fill={fill} opacity="0.55" />;
}

function ClBreadboard({ V, R1, R2, sim, kids, flowMul = 1, divider }) {
  const Isig = sim.current ? (sim.current[1] || 0) : 0;          // signed (+ = out of battery +)
  const getI = () => (sim.current ? (sim.current[1] || 0) : 0);
  const I = Math.abs(Isig);
  const I2 = sim.current ? Math.abs(sim.current[2] || 0) : 0;
  const dcol = window.clDirColor(Isig);
  const vM = sim.probe ? sim.probe("mid") : 0;
  const vref = Math.abs(V) || 9;

  // key points (follow the copper): battery+ → +rail → R1 → colA → jumper →
  // colB → R2 → −rail → battery−
  const railTopY = 96, railBotY = 314;
  const batX = 64, r1x = 196, r2x = 332;
  const jumper = window.clArc({ x: r1x, y: 206 }, { x: (r1x + r2x) / 2, y: 188 }, { x: r2x, y: 206 }, 12);
  // voltage-coloured charge segments (dots only; rails/resistors drawn separately)
  const F = (pts, vs, ve, key) => <window.ClFlow key={key} path={window.clPath(pts)} current={Isig} speedMul={flowMul} gap={30} vStart={vs} vEnd={ve} vref={vref} />;

  const boardFill = "#e8e0cf", holeRow = (y, x0, x1, n, pre) => {
    const out = []; for (let i = 0; i < n; i++) out.push(clbHole(x0 + (x1 - x0) * i / (n - 1), y, pre + i));
    return out;
  };

  // vertical resistor body between yTop and yBot at x
  const resBody = (x, yTop, yBot, key) => {
    const bx = x - 11, bw = 22, by = yTop + 10, bh = (yBot - yTop) - 20;
    const bands = ["#8a5a2b", "#111", "#b8731f", "#caa64a"];
    return (
      <g key={key}>
        <line x1={x} y1={yTop} x2={x} y2={by} stroke="var(--ink-soft)" strokeWidth="2.4" />
        <line x1={x} y1={by + bh} x2={x} y2={yBot} stroke="var(--ink-soft)" strokeWidth="2.4" />
        <rect x={bx} y={by} width={bw} height={bh} rx="7" fill="#d8c6a0" stroke="#b9a279" strokeWidth="1" />
        {bands.map((c, i) => <rect key={i} x={bx} y={by + 10 + i * 9} width={bw} height="4.5" fill={c} />)}
      </g>
    );
  };

  return (
    <div style={{ background: "var(--bg-card)", border: "1px solid var(--rule)", borderRadius: 12, padding: "8px 8px 4px" }}>
      <svg viewBox="-26 0 554 404" width="100%" style={{ display: "block" }}>
        {/* board */}
        <rect x="40" y="60" width="448" height="290" rx="12" fill={boardFill} stroke="#c9bda3" strokeWidth="1.5" />

        {/* + rail (red) and − rail (blue) */}
        <line x1="72" y1={railTopY} x2="456" y2={railTopY} stroke="#c0392b" strokeWidth="2.5" opacity="0.8" />
        <line x1="72" y1={railBotY} x2="456" y2={railBotY} stroke="#2f6db0" strokeWidth="2.5" opacity="0.8" />
        {holeRow(railTopY, 84, 444, 13, "rt")}
        {holeRow(railBotY, 84, 444, 13, "rb")}
        <text x="60" y={railTopY + 5} textAnchor="end" fontFamily="IBM Plex Mono, monospace" fontSize="15" fill="#c0392b">+</text>
        <text x="60" y={railBotY + 5} textAnchor="end" fontFamily="IBM Plex Mono, monospace" fontSize="15" fill="#2f6db0">−</text>

        {/* terminal-strip holes (decorative) */}
        {[150, 168, 186, 224, 242, 260].map((y, r) => holeRow(y, 84, 444, 13, "t" + r))}

        {/* battery cell on the left edge */}
        {window.clBatteryCell(batX, railTopY, railBotY, V, "batcell")}

        {/* R1 (rail → column A), R2 (column B → rail) — fixed-shape bodies.
            Values sit LEFT of each body, clear of the jumper/tap annotations. */}
        {window.clResBody(r1x, railTopY, 206, "r1")}
        {window.clResBody(r2x, 206, railBotY, "r2")}
        <text x={r1x - 18} y="150" textAnchor="end" fontFamily="IBM Plex Mono, monospace" fontSize="15" fill="var(--ink)" fontWeight="600">R1 · {window.fmtOhm(R1)}</text>
        <text x={r2x - 18} y="265" textAnchor="end" fontFamily="IBM Plex Mono, monospace" fontSize="15" fill="var(--ink)" fontWeight="600">R2 · {window.fmtOhm(R2)}</text>

        {/* jumper wire (node M), black; charges carry the voltage colour.
            No current tag here — series current is identical everywhere, and the
            two rail tags already say so without crowding the node. */}
        <path d={`M ${r1x} 206 Q ${(r1x + r2x) / 2} 188 ${r2x} 206`} fill="none" stroke="var(--ink)" strokeWidth="3.6" strokeLinecap="round" />
        <circle cx={r1x} cy="206" r="3.4" fill="var(--ink)" />
        <circle cx={r2x} cy="206" r="3.4" fill="var(--ink)" />

        {divider && (
          <g>
            {/* the tap — a probe lead clipped onto the middle node */}
            <line x1={r2x} y1="206" x2={r2x + 62} y2="152" stroke="#e0a32e" strokeWidth="2.6" strokeLinecap="round" />
            <circle cx={r2x + 68} cy="147" r="5" fill="none" stroke="#e0a32e" strokeWidth="2.4" />
            <text x={r2x + 80} y="142" textAnchor="start" fontFamily="IBM Plex Mono, monospace" fontSize="13.5" fill="#e0a32e" fontWeight="600">{kids ? "tap" : "V_out"} {window.fmtV(vM)}</text>
          </g>
        )}

        {/* mA at each point — on the + rail before R1, and the − rail after R2 */}
        {window.clCurrentTag((batX + r1x) / 2, railTopY - 8, I, "i_pre", "middle")}
        {window.clCurrentTag(r2x + 4, railBotY + 16, I2, "i_post", "middle")}

        {/* charges, coloured by the voltage at each point (V → vM → 0) */}
        {F([{ x: batX, y: railTopY }, { x: r1x, y: railTopY }], V, V, "f_pre")}
        {F([{ x: r1x, y: railTopY }, { x: r1x, y: 206 }], V, vM, "f_r1")}
        {F(jumper, vM, vM, "f_jmp")}
        {F([{ x: r2x, y: 206 }, { x: r2x, y: railBotY }], vM, 0, "f_r2")}
        {F([{ x: r2x, y: railBotY }, { x: batX, y: railBotY }], 0, 0, "f_post")}
        {F([{ x: batX, y: railBotY }, { x: batX, y: railTopY }], 0, V, "f_bat")}
      </svg>
      <div style={{ fontSize: 12.5, color: "var(--ink-faint)", padding: "2px 10px 8px", lineHeight: 1.5 }}>
        {divider
          ? (kids
            ? "The orange clip is a probe wire on the jumper between the resistors — that's where the divider's slice of voltage lives on a real board."
            : "On the board, the divider's tap is just a probe wire on the jumper between the two resistors — the exact same node as the schematic's V_out.")
          : (kids
          ? "The very same circuit on a breadboard. Charges are coloured by their voltage — bright at ＋, fading as they drop through each resistor to −."
          : "Breadboard view of the identical circuit. The rails keep their real red/blue marks; the charges are coloured by voltage (high out of ＋, dropping across each resistor) so it matches the schematic.")}
      </div>
    </div>
  );
}

Object.assign(window, { ClBreadboard });