/* global React, MISSION_DETAIL, SUBJ_BY_ID, I, Topbar */

const { useState: fcUseState, useEffect: fcUseEffect, useMemo: fcUseMemo, useRef: fcUseRef } = React;

/**
 * FlashcardsPage — dedicated full-screen study mode.
 *
 * Reachable from a mission view only (no sidebar entry).
 * Payload: { missionId, volumeId? } — if volumeId is set, studies that volume's
 * deck only; otherwise the union of every volume's flashcards.
 */
function FlashcardsPage({ missionId, volumeId, goto }) {
  // Single-mission demo data — in a real app, fetch by missionId.
  const mission = MISSION_DETAIL;
  const subject = SUBJ_BY_ID[mission.subject];

  const sourceVolume = volumeId ? mission.volumes.find(v => v.id === volumeId) : null;
  const baseDeck = fcUseMemo(() => {
    if (sourceVolume) {
      return (sourceVolume.flashcards || []).map((c, i) => ({ ...c, _vid: sourceVolume.id, _vt: sourceVolume.title, _idx: i }));
    }
    return mission.volumes.flatMap(v => (v.flashcards || []).map((c, i) => ({ ...c, _vid: v.id, _vt: v.title, _idx: i })));
  }, [sourceVolume, mission]);

  const [shuffled, setShuffled] = fcUseState(false);
  const deck = fcUseMemo(() => {
    if (!shuffled) return baseDeck;
    const arr = [...baseDeck];
    for (let i = arr.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [arr[i], arr[j]] = [arr[j], arr[i]];
    }
    return arr;
  }, [baseDeck, shuffled]);

  const [i, setI] = fcUseState(0);
  const [flipped, setFlipped] = fcUseState(false);
  const [known, setKnown] = fcUseState({});   // {key: 'known' | 'review'}
  const [done, setDone] = fcUseState(false);

  const total = deck.length;
  const card = deck[i];
  const cardKey = card ? `${card._vid}-${card._idx}` : null;

  // Reset state when source changes
  fcUseEffect(() => {
    setI(0); setFlipped(false); setKnown({}); setDone(false);
  }, [volumeId, missionId, shuffled]);

  // Keyboard nav: ←/→ navigate, space/↑↓ flip, k/r mark, esc back
  fcUseEffect(() => {
    const onKey = (e) => {
      if (done) return;
      if (e.key === 'ArrowRight') { e.preventDefault(); next(); }
      else if (e.key === 'ArrowLeft') { e.preventDefault(); prev(); }
      else if (e.key === ' ' || e.key === 'ArrowUp' || e.key === 'ArrowDown') { e.preventDefault(); setFlipped(f => !f); }
      else if (e.key.toLowerCase() === 'k') { e.preventDefault(); mark('known'); }
      else if (e.key.toLowerCase() === 'r') { e.preventDefault(); mark('review'); }
      else if (e.key === 'Escape') { goto('mission', { id: missionId || mission.id }); }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  });

  const next = () => {
    if (i < total - 1) { setI(i + 1); setFlipped(false); }
    else setDone(true);
  };
  const prev = () => { if (i > 0) { setI(i - 1); setFlipped(false); } };
  const mark = (status) => {
    if (!cardKey) return;
    setKnown(k => ({ ...k, [cardKey]: status }));
    next();
  };

  const restart = () => { setI(0); setFlipped(false); setKnown({}); setDone(false); };
  const restartReviewOnly = () => {
    // Restart only with cards marked 'review' or unmarked
    const remaining = deck.filter(c => known[`${c._vid}-${c._idx}`] !== 'known');
    if (remaining.length === 0) { restart(); return; }
    // Hack: stash remaining in baseDeck via shuffled toggle isn't right.
    // Simpler: just clear 'known' marks for those + reset; user re-studies all.
    // For demo, just restart.
    restart();
  };

  const knownCount = Object.values(known).filter(v => v === 'known').length;
  const reviewCount = Object.values(known).filter(v => v === 'review').length;
  const progress = total === 0 ? 0 : (i + (done ? 1 : 0)) / total;

  if (total === 0) {
    return (
      <>
        <Topbar
          crumbs={[
            <span key="b" style={{ cursor: 'pointer' }} onClick={() => goto('mission', { id: mission.id })}>{mission.title}</span>,
            'Flashcards',
          ]}
        />
        <div className="content">
          <div className="empty" style={{ padding: '120px 40px', textAlign: 'center' }}>
            <div style={{ fontSize: 14, color: 'var(--fg)', marginBottom: 4 }}>No flashcards yet.</div>
            <div className="dim">Lynxe generates flashcards from each volume — read a volume to populate this deck.</div>
          </div>
        </div>
      </>
    );
  }

  return (
    <>
      <div className="fc-stage">
        {/* ── Top bar: minimal, just exit + progress + actions ── */}
        <div className="fc-top">
          <button className="btn ghost" onClick={() => goto('mission', { id: mission.id })}>
            <I.ArrowLeft size={11} /> Back to mission
          </button>

          <div className="fc-top-mid">
            <div className="fc-progress-track">
              <div className="fc-progress-fill" style={{ width: `${progress * 100}%`, background: subject.hex }} />
            </div>
            <div className="dim tnum" style={{ fontSize: 11.5, minWidth: 56, textAlign: 'center' }}>
              {done ? `${total} / ${total}` : `${i + 1} / ${total}`}
            </div>
          </div>

          <div className="hstack" style={{ gap: 6 }}>
            <button
              className={`btn ghost ${shuffled ? 'is-on' : ''}`}
              onClick={() => setShuffled(s => !s)}
              title="Shuffle deck"
            >
              <I.Refresh size={11} /> Shuffle
            </button>
            <button className="btn ghost" onClick={restart} title="Restart">
              <I.Refresh size={11} /> Restart
            </button>
          </div>
        </div>

        {/* ── Center stage: the big card OR completion summary ── */}
        <div className="fc-center">
          {!done ? (
            <>
              <div className="fc-meta">
                <span className="fc-pip" style={{ background: subject.hex }} />
                <span className="dim" style={{ fontSize: 11.5 }}>{subject.short || subject.name}</span>
                <span className="dim" style={{ fontSize: 11.5 }}>·</span>
                <span className="dim" style={{ fontSize: 11.5 }}>{card._vt}</span>
                {known[cardKey] === 'known' && (
                  <span className="hstack" style={{ marginLeft: 8, fontSize: 11, color: 'var(--ok)', gap: 3 }}>
                    <I.Check size={10} strokeWidth={2.6} /> Marked known
                  </span>
                )}
                {known[cardKey] === 'review' && (
                  <span className="hstack" style={{ marginLeft: 8, fontSize: 11, color: 'var(--warn)', gap: 3 }}>
                    <I.Clock size={10} /> Needs review
                  </span>
                )}
              </div>

              <div
                className={`fc-card ${flipped ? 'is-flipped' : ''}`}
                onClick={() => setFlipped(f => !f)}
                role="button"
                tabIndex={0}
              >
                <div className="fc-card-inner">
                  <div className="fc-face fc-front">
                    <div className="fc-face-tag">Question</div>
                    <div className="fc-face-text">{card.q}</div>
                    <div className="fc-face-hint dim">Click or press space to flip</div>
                  </div>
                  <div className="fc-face fc-back">
                    <div className="fc-face-tag">Answer</div>
                    <div className="fc-face-text">{card.a}</div>
                    <div className="fc-face-hint dim">Click to flip back</div>
                  </div>
                </div>
              </div>

              <div className="fc-controls">
                <button className="btn ghost fc-nav" onClick={prev} disabled={i === 0} title="Previous (←)">
                  <I.ArrowLeft size={12} />
                </button>
                <button className="btn fc-mark fc-mark-review" onClick={() => mark('review')} title="Needs review (R)">
                  <I.Clock size={12} /> Needs review
                </button>
                <button className="btn fc-mark fc-mark-known" onClick={() => mark('known')} title="I knew it (K)">
                  <I.Check size={12} strokeWidth={2.6} /> I knew it
                </button>
                <button className="btn ghost fc-nav" onClick={next} title="Skip (→)">
                  <I.ArrowRight size={12} />
                </button>
              </div>

              <div className="fc-hint dim">
                <kbd>Space</kbd> flip · <kbd>←</kbd>/<kbd>→</kbd> nav · <kbd>K</kbd> known · <kbd>R</kbd> review · <kbd>Esc</kbd> exit
              </div>
            </>
          ) : (
            <div className="fc-done">
              <div className="fc-done-mark" style={{ borderColor: subject.hex }}>
                <I.Check size={28} strokeWidth={2.4} />
              </div>
              <div className="fc-done-title">Deck complete</div>
              <div className="fc-done-sub dim">
                You went through all {total} card{total === 1 ? '' : 's'}.
              </div>
              <div className="fc-stats">
                <div className="fc-stat">
                  <div className="fc-stat-num" style={{ color: 'var(--ok)' }}>{knownCount}</div>
                  <div className="fc-stat-lbl dim">Known</div>
                </div>
                <div className="fc-stat">
                  <div className="fc-stat-num" style={{ color: 'var(--warn)' }}>{reviewCount}</div>
                  <div className="fc-stat-lbl dim">Review</div>
                </div>
                <div className="fc-stat">
                  <div className="fc-stat-num dim">{total - knownCount - reviewCount}</div>
                  <div className="fc-stat-lbl dim">Unmarked</div>
                </div>
              </div>
              <div className="hstack" style={{ gap: 8, marginTop: 24 }}>
                <button className="btn ghost" onClick={() => goto('mission', { id: mission.id })}>
                  <I.ArrowLeft size={11} /> Back to mission
                </button>
                <button className="btn primary" onClick={restart}>
                  <I.Refresh size={11} /> Study again
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    </>
  );
}

window.FlashcardsPage = FlashcardsPage;