/* =========================================================================
   TAXR — Flashcards (flip-card study mode)
   ========================================================================= */
function Flashcards({ nav, params, account, recordReview }) {
  const D = window.TAXR;
  const moduleId = params.moduleId || "m1";
  const mod = D.modules[moduleId] || D.modules.m1;
  const moduleNum = (D.moduleMeta[moduleId] || {}).n || 1;
  const base = mod.flashcards;
  const firstLesson = mod.lessons[0].id;
  const [order, setOrder] = useState(base.map((_, i) => i));
  const [pos, setPos] = useState(0);
  const [flipped, setFlipped] = useState(false);
  const [known, setKnown] = useState({});
  const owned = account.paid;

  useEffect(() => {
    const h = (e) => {
      if (e.code === "Space") { e.preventDefault(); setFlipped((f) => !f); }
      else if (e.key === "ArrowRight") step(1);
      else if (e.key === "ArrowLeft") step(-1);
    };
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  });

  if (!owned) {
    return <div className="wrap col center" style={{ padding: "80px 32px", minHeight: "70vh" }}>{window.UnlockCard({ nav, moduleId, account })}</div>;
  }

  const card = base[order[pos]];
  const knownCount = Object.values(known).filter(Boolean).length;

  function step(d) {
    setFlipped(false);
    setTimeout(() => setPos((p) => Math.max(0, Math.min(order.length - 1, p + d))), 80);
  }
  function mark(v) {
    const cardIdx = order[pos];
    setKnown((k) => ({ ...k, [cardIdx]: v }));
    // "review again" enrolls the card in spaced repetition; "got it" graduates it
    if (recordReview) {
      const c = base[cardIdx];
      recordReview({ id: moduleId + "-c" + cardIdx, type: "card", correct: v, payload: { f: c.f, b: c.b, moduleId, moduleNum } });
    }
    if (pos < order.length - 1) step(1);
  }
  function shuffle() {
    const o = order.slice();
    for (let i = o.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [o[i], o[j]] = [o[j], o[i]]; }
    setOrder(o); setPos(0); setFlipped(false);
  }
  function restart() { setOrder(base.map((_, i) => i)); setPos(0); setFlipped(false); setKnown({}); }

  const atEnd = pos === order.length - 1 && (known[order[pos]] !== undefined);

  return (
    <div className="wrap col" style={{ padding: "30px 32px 70px", maxWidth: 720, margin: "0 auto", alignItems: "stretch" }}>
      {/* top */}
      <div className="row spread" style={{ marginBottom: 22 }}>
        <button className="row gap-8 fs-14 t-dim" onClick={() => nav("lesson", { lessonId: firstLesson, moduleId })}><Icon name="back" size={16} /> Back to module</button>
        <div className="row gap-12">
          <Badge kind="green">{knownCount} known</Badge>
          <button className="row gap-8 fs-14 t-muted" onClick={shuffle}><Icon name="spark" size={15} /> Shuffle</button>
        </div>
      </div>

      <div className="col center" style={{ textAlign: "center", marginBottom: 18 }}>
        <Eyebrow style={{ justifyContent: "center", marginBottom: 10 }}>Module {moduleNum} · Flashcards</Eyebrow>
        <span className="mono fs-13 t-dim">{pos + 1} of {order.length}</span>
      </div>
      <Progress value={((pos + 1) / order.length) * 100} thin />

      {/* card */}
      <div style={{ perspective: 1600, margin: "26px 0" }}>
        <button onClick={() => setFlipped((f) => !f)} style={{ width: "100%", height: 320, position: "relative", transformStyle: "preserve-3d",
          transition: "transform .5s cubic-bezier(.2,.7,.3,1)", transform: flipped ? "rotateY(180deg)" : "none" }}>
          {/* front */}
          <div className="card grid-lines" style={{ position: "absolute", inset: 0, backfaceVisibility: "hidden", display: "grid", placeItems: "center", padding: 40 }}>
            <div className="col center">
              <span className="mono fs-13 t-blue upper" style={{ marginBottom: 18 }}>Term</span>
              <span className="display" style={{ fontSize: 36, textAlign: "center", lineHeight: 1.1 }}>{card.f}</span>
              <span className="mono fs-13 t-dim" style={{ marginTop: 26 }}>tap or press space to flip</span>
            </div>
          </div>
          {/* back */}
          <div className="card" style={{ position: "absolute", inset: 0, backfaceVisibility: "hidden", transform: "rotateY(180deg)", display: "grid", placeItems: "center", padding: 40, background: "var(--surface-2)" }}>
            <div className="col center">
              <span className="mono fs-13 t-green upper" style={{ marginBottom: 16 }}>Definition</span>
              <span className="fs-19 lh-rel" style={{ textAlign: "center", color: "var(--ink)" }}>{card.b}</span>
            </div>
          </div>
        </button>
      </div>

      {/* controls */}
      {atEnd ? (
        <div className="card card-pad center col" style={{ textAlign: "center", gap: 14 }}>
          <span style={{ fontSize: 40 }}>🐧</span>
          <h3 className="serif" style={{ fontSize: 24 }}>Deck complete — {knownCount}/{order.length} known</h3>
          <div className="row center gap-12" style={{ marginTop: 4 }}>
            <Button variant="ghost" onClick={restart}>Restart deck</Button>
            <Button arrow onClick={() => nav("quiz", { moduleId })}>Take the module test</Button>
          </div>
        </div>
      ) : (
        <div className="row spread" style={{ alignItems: "center" }}>
          <Button variant="ghost" back disabled={pos === 0} onClick={() => step(-1)}>Prev</Button>
          <div className="row gap-12">
            <Button variant="ghost" onClick={() => mark(false)}><Icon name="back" size={15} /> Review again</Button>
            <Button variant="green" onClick={() => mark(true)}><Icon name="check" size={16} /> Got it</Button>
          </div>
          <Button variant="ghost" onClick={() => step(1)} disabled={pos === order.length - 1}>Skip <Icon name="arrow" size={15} /></Button>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Flashcards });