/* cl-parallel.jsx — the parallel example for the Circuit Lab. Battery with two
   resistors straight across it. The whole point: each branch carries its OWN
   current (I = V/R per branch), the trunk carries the SUM, so the charges move
   at three different speeds — fast in the trunk, faster in the smaller resistor.
   Same shared flow engine + symbols as the series views. Names clp*.
   Exports ClSchematicParallel, ClBreadboardParallel. */

/* schematic segment: a wire WITH voltage-coloured stroke + yellow charges */
function clpWire(pts, Isig, vs, ve, vref, key, mul, stroke) {
  return <window.ClWire key={key} pts={pts} current={Isig} flowMul={mul} gap={28} width={2.8} vStart={vs} vEnd={ve} vref={vref} stroke={stroke} />;
}
/* breadboard segment: yellow charges only (rails keep red/blue) */
function clpDots(pts, Isig, vs, ve, vref, key, mul) {
  return <window.ClFlow key={key} path={window.clPath(pts)} current={Isig} speedMul={mul} gap={28} />;
}
/* a vertical resistor coloured by voltage (vTop→vBot) with straight leads */
function clpVResistor(x, yTop, yBot, vTop, vBot, vref, key) {
  const a = yTop + 42, b = yBot - 42;
  return (
    <g key={key}>
      <window.ClWire pts={[{ x, y: yTop }, { x, y: a }]} current={0} dots={false} vStart={vTop} vEnd={vTop} vref={vref} width={2.6} />
      <window.ClWire pts={[{ x, y: b }, { x, y: yBot }]} current={0} dots={false} vStart={vBot} vEnd={vBot} vref={vref} width={2.6} />
      <window.ClResistorV x0={x} y0={a} x1={x} y1={b} vStart={vTop} vEnd={vBot} vref={vref} width={3} />
    </g>
  );
}

function ClSchematicParallel({ V, R1, R2, sim, kids, flowMul = 1 }) {
  const I1 = sim.current ? (sim.current[1] || 0) : 0;   // signed, + = top→bottom through R1
  const I2 = sim.current ? (sim.current[2] || 0) : 0;
  const Itot = I1 + I2;
  const aI1 = Math.abs(I1), aI2 = Math.abs(I2), aItot = Math.abs(Itot);
  const vref = Math.abs(V) || 9;
  const topY = 96, botY = 322, batX = 120, r1X = 286, r2X = 410;
  const wireCol = "var(--ink-soft)";
  const railTop = [{ x: batX, y: topY }, { x: r2X, y: topY }];
  const railBot = [{ x: batX, y: botY }, { x: r2X, y: botY }];

  return (
    <div style={{ background: "#0b0d11", "--ink": "#f2efe8", "--ink-soft": "#aab2ba", "--ink-faint": "#7c858e", border: "1px solid #2a2f37", borderRadius: 12, padding: "8px 8px 4px" }}>
      <svg viewBox="-26 0 560 404" width="100%" style={{ display: "block" }}>
        {/* rails are drawn by the coloured wires below */}

        {/* battery on the left trunk */}
        {(() => { const my = 209; return (
          <g>
            <line x1={batX} y1={topY} x2={batX} y2={my - 18} stroke={wireCol} strokeWidth="2.6" />
            <line x1={batX} y1={my + 18} x2={batX} y2={botY} stroke={wireCol} strokeWidth="2.6" />
            <line x1={batX - 17} y1={my - 18} x2={batX + 17} y2={my - 18} stroke="var(--ink)" strokeWidth="3.4" />
            <line x1={batX - 9} y1={my - 7} x2={batX + 9} y2={my - 7} stroke="var(--ink)" strokeWidth="2.2" />
            <line x1={batX - 17} y1={my + 4} x2={batX + 17} y2={my + 4} stroke="var(--ink)" strokeWidth="3.4" />
            <line x1={batX - 9} y1={my + 15} x2={batX + 9} y2={my + 15} stroke="var(--ink)" strokeWidth="2.2" />
            <text x={batX - 26} y={my - 12} textAnchor="end" fontFamily="IBM Plex Mono, monospace" fontSize="15" fill="var(--current)">+</text>
            <text x={batX - 26} y={my + 24} textAnchor="end" fontFamily="IBM Plex Mono, monospace" fontSize="15" fill="var(--ink-soft)">−</text>
            <text x={batX - 40} y={my + 6} textAnchor="end" fontFamily="IBM Plex Mono, monospace" fontSize="16" fill="var(--ink)" fontWeight="600">{window.fmtV(V)}</text>
          </g>
        ); })()}

        {/* the two resistor branches — voltage-coloured (V at top → 0 at bottom) */}
        {clpVResistor(r1X, topY, botY, V, 0, vref, "r1")}
        {clpVResistor(r2X, topY, botY, V, 0, vref, "r2")}
        <text x={r1X - 18} y={(topY + botY) / 2 - 6} textAnchor="end" fontFamily="IBM Plex Mono, monospace" fontSize="16" fill="var(--ink)" fontWeight="600">R1 · {window.fmtOhm(R1)}</text>
        <text x={r1X - 18} y={(topY + botY) / 2 + 13} textAnchor="end" fontFamily="IBM Plex Mono, monospace" fontSize="14" fill="var(--current)" fontWeight="600">I₁ {window.fmtI(aI1)}</text>
        <text x={r2X + 18} y={(topY + botY) / 2 - 6} fontFamily="IBM Plex Mono, monospace" fontSize="16" fill="var(--ink)" fontWeight="600">R2 · {window.fmtOhm(R2)}</text>
        <text x={r2X + 18} y={(topY + botY) / 2 + 13} fontFamily="IBM Plex Mono, monospace" fontSize="14" fill="var(--current)" fontWeight="600">I₂ {window.fmtI(aI2)}</text>

        {/* node dots at the taps */}
        {[[r1X, topY], [r2X, topY], [r1X, botY], [r2X, botY]].map((p, i) => <circle key={i} cx={p[0]} cy={p[1]} r="4" fill="var(--ink)" />)}

        {/* trunk current callout */}
        <text x={(batX + r1X) / 2} y={topY - 12} textAnchor="middle" fontFamily="IBM Plex Mono, monospace" fontSize="14" fill="var(--ink)" fontWeight="600">trunk {window.fmtI(aItot)}</text>
        <text x={(batX + r1X) / 2} y={botY + 22} textAnchor="middle" fontFamily="IBM Plex Mono, monospace" fontSize="13" fill="var(--ink-faint)">= I₁ + I₂</text>

        {/* charges — voltage-coloured (top rail = V, branches drop V→0, bottom rail = 0) */}
        {clpWire([{ x: batX, y: botY }, { x: batX, y: topY }], Itot, 0, V, vref, "bat", flowMul)}
        {clpWire([{ x: batX, y: topY }, { x: r1X, y: topY }], Itot, V, V, vref, "s1", flowMul)}
        {clpWire([{ x: r1X, y: topY }, { x: r2X, y: topY }], I2, V, V, vref, "s2", flowMul)}
        {clpWire([{ x: r1X, y: topY }, { x: r1X, y: botY }], I1, V, 0, vref, "b1", flowMul, "none")}
        {clpWire([{ x: r2X, y: topY }, { x: r2X, y: botY }], I2, V, 0, vref, "b2", flowMul, "none")}
        {clpWire([{ x: r2X, y: botY }, { x: r1X, y: botY }], I2, 0, 0, vref, "s3", flowMul)}
        {clpWire([{ x: r1X, y: botY }, { x: batX, y: botY }], Itot, 0, 0, vref, "s4", flowMul)}
      </svg>
      <div style={{ fontSize: 12.5, color: "var(--ink-faint)", padding: "2px 10px 8px", lineHeight: 1.5 }}>
        {kids
          ? "Two paths! The charges split up — more go through the easy resistor, fewer through the hard one, so one branch runs faster. The big pipe back to the battery carries them all."
          : "Parallel: each branch sees the full 9 V, so each carries its own I = V/R. Watch the charges move faster in the smaller resistor, and fastest of all in the trunk — which carries I₁ + I₂."}
      </div>
    </div>
  );
}

function ClBreadboardParallel({ V, R1, R2, sim, kids, flowMul = 1 }) {
  const I1 = sim.current ? (sim.current[1] || 0) : 0;
  const I2 = sim.current ? (sim.current[2] || 0) : 0;
  const Itot = I1 + I2;
  const aI1 = Math.abs(I1), aI2 = Math.abs(I2), aItot = Math.abs(Itot);
  const vref = Math.abs(V) || 9;

  const railTopY = 100, railBotY = 312, batX = 64, r1x = 250, r2x = 372;
  const boardFill = "#e8e0cf";
  const holeRow = (y, x0, x1, n, pre) => { const o = []; for (let i = 0; i < n; i++) o.push(<circle key={pre + i} cx={x0 + (x1 - x0) * i / (n - 1)} cy={y} r="3" fill="#3a3327" opacity="0.5" />); return o; };
  const resBody = (x, yTop, yBot, key) => {
    const by = yTop + 14, bh = (yBot - yTop) - 28, 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={x - 11} y={by} width="22" height={bh} rx="7" fill="#d8c6a0" stroke="#b9a279" strokeWidth="1" />
        {bands.map((c, i) => <rect key={i} x={x - 11} y={by + 9 + i * 9} width="22" 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 560 404" width="100%" style={{ display: "block" }}>
        <rect x="40" y="64" width="452" height="284" rx="12" fill={boardFill} stroke="#c9bda3" strokeWidth="1.5" />
        <line x1="72" y1={railTopY} x2="460" y2={railTopY} stroke="#c0392b" strokeWidth="2.5" opacity="0.8" />
        <line x1="72" y1={railBotY} x2="460" y2={railBotY} stroke="#2f6db0" strokeWidth="2.5" opacity="0.8" />
        {holeRow(railTopY, 84, 448, 13, "rt")}
        {holeRow(railBotY, 84, 448, 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>
        {[150, 168, 186, 226, 244, 262].map((y, r) => holeRow(y, 84, 448, 13, "t" + r))}

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

        {/* two resistors, each bridging + rail to − rail — fixed-shape bodies */}
        {window.clResBody(r1x, railTopY, railBotY, "r1")}
        {window.clResBody(r2x, railTopY, railBotY, "r2")}
        <text x={r1x - 16} y={(railTopY + railBotY) / 2 - 4} textAnchor="end" fontFamily="IBM Plex Mono, monospace" fontSize="14" fill="var(--ink)" fontWeight="600">R1 {window.fmtOhm(R1)}</text>
        <text x={r1x - 16} y={(railTopY + railBotY) / 2 + 13} textAnchor="end" fontFamily="IBM Plex Mono, monospace" fontSize="13" fill="var(--current)" fontWeight="600">{window.fmtI(aI1)}</text>
        <text x={r2x + 16} y={(railTopY + railBotY) / 2 - 4} fontFamily="IBM Plex Mono, monospace" fontSize="14" fill="var(--ink)" fontWeight="600">R2 {window.fmtOhm(R2)}</text>
        <text x={r2x + 16} y={(railTopY + railBotY) / 2 + 13} fontFamily="IBM Plex Mono, monospace" fontSize="13" fill="var(--current)" fontWeight="600">{window.fmtI(aI2)}</text>

        {/* trunk label */}
        <text x={(batX + r1x) / 2} y={railTopY - 8} textAnchor="middle" fontFamily="IBM Plex Mono, monospace" fontSize="13.5" fill="var(--ink)" fontWeight="600">trunk {window.fmtI(aItot)}</text>

        {/* charges per segment, voltage-coloured (+ rail = V, branches V→0, − rail = 0) */}
        {clpDots([{ x: batX, y: railBotY }, { x: batX, y: railTopY }], Itot, 0, V, vref, "bat", flowMul)}
        {clpDots([{ x: batX, y: railTopY }, { x: r1x, y: railTopY }], Itot, V, V, vref, "s1", flowMul)}
        {clpDots([{ x: r1x, y: railTopY }, { x: r2x, y: railTopY }], I2, V, V, vref, "s2", flowMul)}
        {clpDots([{ x: r1x, y: railTopY }, { x: r1x, y: railBotY }], I1, V, 0, vref, "b1", flowMul)}
        {clpDots([{ x: r2x, y: railTopY }, { x: r2x, y: railBotY }], I2, V, 0, vref, "b2", flowMul)}
        {clpDots([{ x: r2x, y: railBotY }, { x: r1x, y: railBotY }], I2, 0, 0, vref, "s3", flowMul)}
        {clpDots([{ x: r1x, y: railBotY }, { x: batX, y: railBotY }], Itot, 0, 0, vref, "s4", flowMul)}
      </svg>
      <div style={{ fontSize: 12.5, color: "var(--ink-faint)", padding: "2px 10px 8px", lineHeight: 1.5 }}>
        {kids
          ? "Both resistors reach straight across the two rails — two separate paths for the charge. The same two speeds as the diagram beside it."
          : "Breadboard parallel: each resistor bridges the + rail to the − rail, so each is its own branch across the full battery. The rails are the shared trunk carrying the combined current."}
      </div>
    </div>
  );
}

Object.assign(window, { ClSchematicParallel, ClBreadboardParallel });