/* cl-schematic.jsx — Falstad-style schematic view for the Circuit Lab.
   Draws the series loop (battery · R1 · R2) with a value beside every component,
   live current in mA at each point, and wires COLOURED BY DIRECTION (warm =
   positive→negative, cool = reversed, grey = still). Names cls*. Exports ClSchematic. */

function ClSchematic({ V, R1, R2, sim, kids, flowMul = 1, divider }) {
  // rectangle loop corners
  const A = { x: 96, y: 72 };    // top-left  (battery +, node P)
  const B = { x: 432, y: 72 };   // top-right (node M, between R1 & R2)
  const C = { x: 432, y: 332 };  // bottom-right (node G)
  const D = { x: 96, y: 332 };   // bottom-left  (battery −, node G)

  // SIGNED series current, +ve = flows P→M = along A→B→C→D (out of battery +)
  const Isig = sim.current ? (sim.current[1] || 0) : 0;
  const getI = () => (sim.current ? (sim.current[1] || 0) : 0);
  const I = Math.abs(Isig), I2 = sim.current ? Math.abs(sim.current[2] || 0) : 0;
  const dcol = window.clDirColor(Isig);
  const vM = sim.probe ? sim.probe("mid") : 0;                     // node between R's
  const dropR1 = Math.abs(V - vM), dropR2 = Math.abs(vM);

  const r1a = { x: 196, y: 72 }, r1b = { x: 332, y: 72 };
  const r2a = { x: 432, y: 150 }, r2b = { x: 432, y: 254 };
  const vref = Math.abs(V) || 9;
  const W = (pts, vs, ve, key, stroke) => <window.ClWire key={key} pts={pts} current={Isig} flowMul={flowMul} gap={30} width={2.8} vStart={vs} vEnd={ve} vref={vref} stroke={stroke} />;

  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 554 404" width="100%" style={{ display: "block" }}>
        {/* loop in voltage-coloured segments: const along wires; resistor spans carry dots only (the zigzag shows the colour) */}
        {W([A, r1a], V, V, "s_a")}
        {W([r1a, r1b], V, vM, "s_r1", "none")}
        {W([r1b, B, r2a], vM, vM, "s_m")}
        {W([r2a, r2b], vM, 0, "s_r2", "none")}
        {W([r2b, C, D], 0, 0, "s_g")}

        {/* battery on the left edge — leads carry charges, ramp 0→V across the cell */}
        {(() => {
          const my = 202;
          return (
            <g>
              {W([D, { x: D.x, y: my + 18 }], 0, 0, "s_bn")}
              {W([{ x: A.x, y: my - 18 }, A], V, V, "s_bp")}
              <line x1={A.x - 17} y1={my - 18} x2={A.x + 17} y2={my - 18} stroke="var(--ink)" strokeWidth="3.4" />
              <line x1={A.x - 9} y1={my - 7} x2={A.x + 9} y2={my - 7} stroke="var(--ink)" strokeWidth="2.2" />
              <line x1={A.x - 17} y1={my + 4} x2={A.x + 17} y2={my + 4} stroke="var(--ink)" strokeWidth="3.4" />
              <line x1={A.x - 9} y1={my + 15} x2={A.x + 9} y2={my + 15} stroke="var(--ink)" strokeWidth="2.2" />
              <text x={A.x - 26} y={my - 12} textAnchor="end" fontFamily="IBM Plex Mono, monospace" fontSize="15" fill="var(--current)">+</text>
              <text x={A.x - 26} y={my + 24} textAnchor="end" fontFamily="IBM Plex Mono, monospace" fontSize="15" fill="var(--ink-soft)">−</text>
              <text x={A.x - 40} y={my + 6} textAnchor="end" fontFamily="IBM Plex Mono, monospace" fontSize="16" fill="var(--ink)" fontWeight="600">{window.fmtV(V)}</text>
            </g>
          );
        })()}

        {/* R1 on top edge — voltage-coloured */}
        <window.ClResistorV x0={r1a.x} y0={r1a.y} x1={r1b.x} y1={r1b.y} vStart={V} vEnd={vM} vref={vref} width={3} />
        <text x={(r1a.x + r1b.x) / 2} y={r1a.y - 24} textAnchor="middle" fontFamily="IBM Plex Mono, monospace" fontSize="16" fill="var(--ink)" fontWeight="600">R1 · {window.fmtOhm(R1)}</text>
        <text x={(r1a.x + r1b.x) / 2} y={r1a.y + 28} textAnchor="middle" fontFamily="IBM Plex Mono, monospace" fontSize="14" fill="var(--ink)" fontWeight="500">{window.fmtV(dropR1)} across</text>

        {/* R2 on right edge — voltage-coloured */}
        <window.ClResistorV x0={r2a.x} y0={r2a.y} x1={r2b.x} y1={r2b.y} vStart={vM} vEnd={0} vref={vref} width={3} />
        <text x={r2a.x - 26} y={(r2a.y + r2b.y) / 2 - 6} textAnchor="end" fontFamily="IBM Plex Mono, monospace" fontSize="16" fill="var(--ink)" fontWeight="600">R2 · {window.fmtOhm(R2)}</text>
        <text x={r2a.x - 26} y={(r2a.y + r2b.y) / 2 + 14} textAnchor="end" fontFamily="IBM Plex Mono, monospace" fontSize="14" fill="var(--ink)" fontWeight="500">{window.fmtV(dropR2)} across</text>

        {/* node dot + its voltage */}
        <circle cx={B.x} cy={B.y} r="4.5" fill="var(--ink)" />
        {divider ? (
          <g>
            {/* the tap — a probe wire off the middle node */}
            <line x1={B.x} y1={B.y} x2={B.x + 34} y2={B.y - 34} stroke="#e0a32e" strokeWidth="2.6" strokeLinecap="round" />
            <circle cx={B.x + 40} cy={B.y - 40} r="5" fill="none" stroke="#e0a32e" strokeWidth="2.4" />
            <text x={B.x + 40} y={B.y - 54} textAnchor="end" fontFamily="IBM Plex Mono, monospace" fontSize="14.5" fill="#e0a32e" fontWeight="600">{kids ? "tap" : "V_out"} {window.fmtV(vM)}</text>
          </g>
        ) : (
          <text x={B.x - 10} y={B.y - 12} textAnchor="end" fontFamily="IBM Plex Mono, monospace" fontSize="14" fill="var(--ink-soft)" fontWeight="500">{window.fmtV(vM)}</text>
        )}

        {/* mA shown at each point — before R1, between R1 & R2, after R2 (all equal in series) */}
        {window.clCurrentTag((A.x + r1a.x) / 2, A.y - 12, I, "i_before", "middle")}
        {window.clCurrentTag(B.x - 10, (r2a.y + B.y) / 2, I, "i_between", "end")}
        {window.clCurrentTag(C.x - 10, (r2b.y + C.y) / 2, I2, "i_after", "end")}
      </svg>
      <div style={{ fontSize: 12.5, color: "var(--ink-faint)", padding: "2px 10px 8px", lineHeight: 1.5 }}>
        {divider
          ? (kids
            ? "This is a voltage divider — the tap between the two resistors grabs a slice of the battery's push. Make R2 bigger and the slice grows."
            : "A voltage divider: V_out = V·R2/(R1+R2), read at the tap between the resistors. Slide R1 and R2 and watch the tap voltage move — nothing else about the circuit changed.")
          : (kids
          ? "Each dot is charge (always yellow). The wire and resistor colour shows the voltage there — bright green at full ＋, fading to grey at 0 V. Flip the battery and it turns red."
          : "Schematic view. The pathway and each resistor are coloured by voltage: bright green = full +V, grey = 0 V, red = below zero. Charges stay yellow; their motion shows current.")}
      </div>
    </div>
  );
}

Object.assign(window, { ClSchematic });