// SessionScreen.jsx — live study session with InkCanvas + WebSocket.
// Ports the submit/score/frame-capture flow from the legacy SPA.

function SessionScreen({ course, onBack, onScored }) {
  const [items, setItems] = React.useState([]);
  const [idx, setIdx] = React.useState(0);
  const [status, setStatus] = React.useState("connecting…");
  const [wsReady, setWsReady] = React.useState(false);

  const sessionIdRef = React.useRef(null);
  const wsRef = React.useRef(null);
  const frameIntervalRef = React.useRef(null);
  const canvasRef = React.useRef(null);
  const itemsRef = React.useRef([]);
  const idxRef = React.useRef(0);

  React.useEffect(() => { itemsRef.current = items; }, [items]);
  React.useEffect(() => { idxRef.current = idx; }, [idx]);

  React.useEffect(() => {
    let cancelled = false;

    (async () => {
      const study = await window.API.getStudyNext();
      if (cancelled) return;
      setItems(study.items || []);
      setIdx(0);

      const s = await window.API.getSession();
      if (cancelled) return;
      sessionIdRef.current = s.session_id;

      const proto = location.protocol === "https:" ? "wss:" : "ws:";
      const ws = new WebSocket(`${proto}//${location.host}/ws/${s.session_id}`);
      wsRef.current = ws;

      ws.onopen = () => { setWsReady(true); setStatus("ready"); };
      ws.onclose = () => { setWsReady(false); };
      ws.onerror = () => setStatus("connection error");

      ws.onmessage = (e) => {
        const msg = JSON.parse(e.data);
        if (msg.type === "ack") {
          setStatus(`${msg.frame} frames captured`);
        } else if (msg.type === "score") {
          setStatus("");
          const curItem = itemsRef.current[idxRef.current] || {};
          onScored && onScored({
            session_id: sessionIdRef.current,
            item_id: msg.item_id || curItem.id || "",
            item_type: msg.item_type || curItem.type || "derivation",
            auto_score: msg.score ?? 0,
            feedback: msg.feedback || "",
            gaps: msg.gaps || [],
            duration_s: msg.duration_s || 0,
            title: curItem.title || "",
          });
        }
      };

      frameIntervalRef.current = setInterval(() => {
        const c = canvasRef.current;
        if (!c || !c.hasDrawn()) return;
        if (!ws || ws.readyState !== WebSocket.OPEN) return;
        ws.send(JSON.stringify({
          type: "frame",
          image: c.toDataURL("image/png"),
          question_idx: idxRef.current,
          timestamp: new Date().toISOString(),
        }));
      }, 15000);
    })();

    return () => {
      cancelled = true;
      if (frameIntervalRef.current) clearInterval(frameIntervalRef.current);
      if (wsRef.current) wsRef.current.close();
    };
  }, []);

  const handleSubmit = () => {
    const ws = wsRef.current;
    const c = canvasRef.current;
    if (!ws || ws.readyState !== WebSocket.OPEN || !c) return;
    const cur = itemsRef.current[idxRef.current] || {};
    setStatus("scoring…");
    ws.send(JSON.stringify({
      type: "submit",
      defer_record: true,
      image: c.toDataURL("image/png"),
      question_idx: idxRef.current,
      edge_id: cur.id || "",
      item_type: cur.type || "derivation",
      question: { title: cur.title, q: cur.derivation || cur.statement || "" },
    }));
  };

  const cur = items[idx] || {};
  const subjectLabel = (cur.subject || "").replace(/_/g, " ");

  return (
    <section className="session">
      <div className="session-topbar">
        <button className="back-btn" onClick={onBack}>
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M15 6l-6 6 6 6"/></svg>
          {course?.title || "Study"}
        </button>
        <div className="session-progress">
          <span className="d-meta">Item {Math.min(idx + 1, items.length || 1)} of {items.length || "…"}</span>
          <div className="mini-bar"><div style={{width: `${items.length ? ((idx+1)/items.length)*100 : 0}%`}}/></div>
        </div>
      </div>

      <div className="session-question">
        <div className="question-eyebrow">
          {cur.domain ? `${cur.domain} · ${subjectLabel}` : "Loading…"}
        </div>
        <div className="question-serif">{cur.title || " "}</div>
        <div className="question-body">{cur.derivation || cur.statement || ""}</div>
      </div>

      <div className="canvas">
        <div className="canvas-grid"/>
        <InkCanvas canvasRef={canvasRef} />
      </div>

      <div className="session-actions">
        <button className="btn-ghost" onClick={() => canvasRef.current?.undo()}>Undo</button>
        <button className="btn-ghost" onClick={() => canvasRef.current?.clear()}>Clear</button>
        <button className="btn-primary" onClick={handleSubmit} disabled={!wsReady}>Done</button>
      </div>
      {status && <div className="session-status">{status}</div>}
    </section>
  );
}

Object.assign(window, { SessionScreen });