/* triglab.jsx — TrigTutor: the right-triangle trig bench. Built on window.BenchKit
   (harness) + window.BenchFields (shared field math), so this file is just the FIGURE.
   compute = window.BenchFields.trig — the SAME function server/benches/trig.js calls, so
   client and server fields are identical by construction. Mirrors gaslawslab.jsx: sliders
   → BenchFields.fn(state) → report + meters. */
(function () {
  const { useState, useMemo, useEffect } = React;
  const K = window.BenchKit, C = K.C, SVG_BG = K.SVG_BG, fmt = K.fmt;
  const TaskStrip = K.TaskStrip, StatMeter = K.StatMeter;
  const compute = (s) => window.BenchFields.trig(s);

  function Slider({ label, value, set, min, max, step, unit, color, onUp }) {
    return (
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 9 }}>
        <span style={{ fontSize: 12, color: C.mute, width: 116 }}>{label}</span>
        <input type="range" min={min} max={max} step={step} value={value} onChange={(e) => set(parseFloat(e.target.value))} onPointerUp={onUp} style={{ flex: 1 }} />
        <span style={{ color: color || C.amber, width: 64, textAlign: "right" }}>{value}{unit ? ` ${unit}` : ""}</span>
      </div>
    );
  }

  function TrigFig({ task, setTask, tasks, report, event, done }) {
    const [angleDeg, setAngleDeg] = useState(30);
    const [hypotenuse, setHypotenuse] = useState(10);
    const fld = useMemo(() => compute({ angleDeg, hypotenuse }), [angleDeg, hypotenuse]);
    useEffect(() => { report(fld); }, [angleDeg, hypotenuse]); // eslint-disable-line

    // triangle: right angle at bottom-right vertex B; angle θ at bottom-left vertex A.
    // A=(Ax,By) origin of the angle, B=(Bx,By) right-angle corner, T=(Bx, Ty) top vertex.
    // legs scale by side length (opp/adjacent) relative to the longest = 20, fit to the box.
    const Ax = 90, By = 250, scale = 230 / 20; // 20 = max hypotenuse → adjacent up to 20
    const adjLen = fld.adjacent, oppLen = fld.opposite;
    const Bx = Ax + adjLen * scale;
    const Ty = By - oppLen * scale;
    const th = (angleDeg * Math.PI) / 180;
    // arc at A marking θ
    const r = 34;
    const arcX = Ax + r * Math.cos(-th), arcY = By + r * Math.sin(-th);
    const arc = `M ${Ax + r} ${By} A ${r} ${r} 0 0 0 ${arcX} ${arcY}`;
    const t = tasks.find((x) => x.id === task) || tasks[0];

    return (
      <>
        <TaskStrip tasks={tasks} cur={task} setCur={setTask} done={done} goal={t && t.goal} />
        <svg viewBox="0 0 600 300" style={{ width: "100%", background: SVG_BG, border: `1px solid ${C.line}`, borderRadius: 8 }}>
          {/* triangle fill + edges */}
          <polygon points={`${Ax},${By} ${Bx},${By} ${Bx},${Ty}`} fill={C.teal} opacity={0.07} />
          <line x1={Ax} y1={By} x2={Bx} y2={By} stroke={C.gold} strokeWidth="3" />{/* adjacent */}
          <line x1={Bx} y1={By} x2={Bx} y2={Ty} stroke={C.blue} strokeWidth="3" />{/* opposite */}
          <line x1={Ax} y1={By} x2={Bx} y2={Ty} stroke={C.crimson} strokeWidth="3" />{/* hypotenuse */}
          {/* right-angle square at B */}
          <rect x={Bx - 14} y={By - 14} width={14} height={14} fill="none" stroke={C.faint} strokeWidth="1.5" />
          {/* angle θ arc at A */}
          <path d={arc} fill="none" stroke={C.ink} strokeWidth="1.5" />
          <text x={Ax + r + 6} y={By - 10} fill={C.ink} fontSize="12" fontFamily="monospace">θ = {Math.round(angleDeg)}°</text>
          {/* labels */}
          <text x={(Ax + Bx) / 2} y={By + 18} textAnchor="middle" fill={C.gold} fontSize="12" fontFamily="monospace">adj = {fmt(adjLen)}</text>
          <text x={Bx + 8} y={(By + Ty) / 2} fill={C.blue} fontSize="12" fontFamily="monospace">opp = {fmt(oppLen)}</text>
          <text x={(Ax + Bx) / 2 - 12} y={(By + Ty) / 2 - 8} textAnchor="end" fill={C.crimson} fontSize="12" fontFamily="monospace">hyp = {fmt(hypotenuse)}</text>
        </svg>
        <div style={{ marginTop: 10, padding: "8px 12px", borderRadius: 6, background: C.panel, border: `1px solid ${C.line}`, color: C.mute, fontSize: 12.5 }}>
          SOH-CAH-TOA · sinθ = {fmt(fld.sinT)}, cosθ = {fmt(fld.cosT)}, tanθ = {fmt(fld.tanT)}. Drag θ or the hypotenuse to move the legs.
        </div>
        <Slider label="angle θ" value={angleDeg} set={setAngleDeg} min={1} max={89} step={1} unit="°" color={C.crimson} onUp={() => event("adjusted", `Set θ = ${Math.round(angleDeg)}°`, { response: `sinθ ${fmt(fld.sinT)}` }, C.crimson)} />
        <Slider label="hypotenuse" value={hypotenuse} set={setHypotenuse} min={1} max={20} step={0.5} unit="" color={C.gold} onUp={() => event("adjusted", `Set hyp = ${fmt(hypotenuse)}`, { response: `opp ${fmt(fld.opposite)}` }, C.gold)} />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 8, marginTop: 12 }}>
          <StatMeter label="sinθ" v={fld.sinT} d={3} color={C.teal} />
          <StatMeter label="cosθ" v={fld.cosT} d={3} color={C.blue} />
          <StatMeter label="tanθ" v={fld.tanT} d={3} color={C.amber} />
          <StatMeter label="opposite" v={fld.opposite} d={2} color={C.crimson} />
        </div>
      </>
    );
  }

  window.TrigTutor = K.makeTutor(TrigFig, { moduleLabel: "Right-triangle trig bench", benchId: "trig" });
})();