/* Trainer — animated squeeze/release timer with orb visual */
(function () {
  const { useState, useEffect, useRef, useMemo } = React;
  const { compilePattern, patternDuration, patternReps } = window.PulseFloor;

  function Trainer({ pattern, onSessionComplete, pace, hapticsOn }) {
    const Icon = window.Icon;
    const phases = useMemo(() => compilePattern(pattern), [pattern]);
    const total = useMemo(() => patternDuration(pattern), [pattern]);

    const [running, setRunning] = useState(false);
    const [idx, setIdx] = useState(0); // current phase index
    const [phaseElapsed, setPhaseElapsed] = useState(0); // in this phase
    const [totalElapsed, setTotalElapsed] = useState(0);
    const [done, setDone] = useState(false);

    const tickRef = useRef(null);
    const lastTickRef = useRef(null);

    // reset when pattern changes
    useEffect(() => {
      setRunning(false); setIdx(0); setPhaseElapsed(0); setTotalElapsed(0); setDone(false);
    }, [pattern]);

    // timer
    useEffect(() => {
      if (!running) {
        if (tickRef.current) cancelAnimationFrame(tickRef.current);
        lastTickRef.current = null;
        return;
      }
      const loop = (t) => {
        if (!lastTickRef.current) lastTickRef.current = t;
        const dt = (t - lastTickRef.current) / 1000 * pace;
        lastTickRef.current = t;

        setPhaseElapsed((pe) => {
          const cur = phases[idx];
          if (!cur) return pe;
          const next = pe + dt;
          if (next >= cur.dur) {
            // advance
            const nextIdx = idx + 1;
            if (nextIdx >= phases.length) {
              setRunning(false);
              setDone(true);
              setIdx(phases.length);
              return cur.dur;
            }
            setIdx(nextIdx);
            setTotalElapsed((te) => te + cur.dur - pe + (next - cur.dur));
            // haptic flash on phase boundary
            if (hapticsOn && navigator.vibrate) navigator.vibrate(40);
            return next - cur.dur;
          } else {
            setTotalElapsed((te) => te + dt);
            return next;
          }
        });
        tickRef.current = requestAnimationFrame(loop);
      };
      tickRef.current = requestAnimationFrame(loop);
      return () => { if (tickRef.current) cancelAnimationFrame(tickRef.current); lastTickRef.current = null; };
    }, [running, idx, phases, pace, hapticsOn]);

    // session complete
    useEffect(() => {
      if (done) onSessionComplete?.(pattern, total);
    }, [done]);

    const cur = phases[idx];
    const phaseKind = cur?.kind ?? "idle";
    const phaseLeft = cur ? Math.max(0, cur.dur - phaseElapsed) : 0;
    const ringDeg = cur ? (phaseElapsed / cur.dur) * 360 : 0;

    const start = () => { if (done) reset(); setRunning(true); };
    const pause = () => setRunning(false);
    const reset = () => {
      setRunning(false); setIdx(0); setPhaseElapsed(0); setTotalElapsed(0); setDone(false);
    };
    const skip = () => {
      if (idx + 1 >= phases.length) {
        setDone(true); setRunning(false); setIdx(phases.length); setPhaseElapsed(0);
      } else {
        setTotalElapsed((te) => te + (cur?.dur - phaseElapsed) || 0);
        setIdx(idx + 1); setPhaseElapsed(0);
      }
    };

    const orbCls = done ? "" : (phaseKind === "squeeze" ? "squeeze" : phaseKind === "rest" ? "release" : "");
    const ringCls = done ? "idle" : (phaseKind === "rest" ? "rest" : "");

    const fmtTime = (s) => {
      s = Math.max(0, Math.round(s));
      const m = Math.floor(s / 60), r = s % 60;
      return `${m}:${r.toString().padStart(2, "0")}`;
    };

    return (
      <div className="trainer-card elev fade-in">
        <div className="pattern-label">
          <span>Pattern</span>
          <span className="mono">{patternReps(pattern)} reps · {fmtTime(total)}</span>
        </div>
        <div className="pattern-name">{pattern.name}</div>
        <div className="pattern-desc">{pattern.desc}</div>

        <div className="orb-wrap">
          <div className={`orb-ring ${ringCls}`} style={{ "--ring-deg": `${ringDeg}deg` }}></div>
          <div className={`orb ${orbCls}`}>
            <div className="orb-inner">
              {done ? (
                <>
                  <div className="orb-phase">Complete</div>
                  <div className="orb-count mono">✓</div>
                  <div className="orb-sub">Nice work</div>
                </>
              ) : !running && phaseElapsed === 0 && idx === 0 ? (
                <>
                  <div className="orb-phase">Ready</div>
                  <div className="orb-count mono">{patternReps(pattern)}</div>
                  <div className="orb-sub">reps queued</div>
                </>
              ) : (
                <>
                  <div className="orb-phase">{phaseKind === "squeeze" ? "Squeeze" : "Release"}</div>
                  <div className="orb-count mono">{Math.ceil(phaseLeft)}</div>
                  <div className="orb-sub">{idx + 1} / {phases.length}</div>
                </>
              )}
            </div>
          </div>
        </div>

        {/* Phase strip — upcoming timeline */}
        <div className="phase-strip" title="Session timeline">
          {phases.map((p, i) => (
            <div
              key={i}
              className={`seg ${p.kind === "squeeze" ? "squeeze" : "rest"} ${i < idx ? "done" : ""} ${i === idx && running ? "active" : ""}`}
              style={{ flex: p.dur }}
            />
          ))}
        </div>

        <div className="trainer-controls">
          {!running ? (
            <button className="btn primary" onClick={start}>
              <span className="row" style={{ justifyContent: "center", gap: 8 }}><Icon.Play /> {done ? "Restart" : idx === 0 && phaseElapsed === 0 ? "Start session" : "Resume"}</span>
            </button>
          ) : (
            <button className="btn primary" onClick={pause}>
              <span className="row" style={{ justifyContent: "center", gap: 8 }}><Icon.Pause /> Pause</span>
            </button>
          )}
          <button className="btn ghost" onClick={skip} title="Skip phase"><Icon.Skip /></button>
          <button className="btn ghost" onClick={reset} title="Reset"><Icon.Stop /></button>
        </div>

        <div className="trainer-stats" style={{ marginTop: 14 }}>
          <div className="stat">
            <div className="v mono">{fmtTime(totalElapsed)}</div>
            <div className="l">Elapsed</div>
          </div>
          <div className="stat">
            <div className="v mono">{fmtTime(total - totalElapsed)}</div>
            <div className="l">Left</div>
          </div>
          <div className="stat">
            <div className="v mono">{Math.min(phases.filter(p=>p.kind==='squeeze').length, phases.slice(0, idx + (done?1:0)).filter(p=>p.kind==='squeeze').length)}</div>
            <div className="l">Reps done</div>
          </div>
        </div>
      </div>
    );
  }

  window.Trainer = Trainer;
})();