/* === PHYSL 210 — Flashcards (deck stacks) === */
const { useState: useSF, useEffect: useEF } = React;

/* FLASHCARDS already merges, at load: hand-authored + textbook (data-textbook.jsx) + verified
   coverage cards (data-exams-extra.jsx) + the imported Quizlet/class set (data-class.jsx, tagged
   src:'quizlet'/'class'). The deck source toggle filters that single merged deck by tag. */
function isQuizletCard(c) { return c && (c.src === 'quizlet' || c.src === 'class'); }
function deckFor(id, src) {
  const all = FLASHCARDS[id] || [];
  if (src === 'all') return all;
  if (src === 'quizlet') return all.filter(isQuizletCard);
  return all.filter(c => !isQuizletCard(c)); // curated = hand-authored + textbook + coverage
}
const FC_SRC_LABEL = { curated:'Curated', quizlet:'Quizlet', all:'All' };

/* deck mastery for the deck-grid ring — strict: only top-level (Mastered) cards
   count, and only cards in the active source-filtered deck. Delegates to the
   shared cardBreakdown so the grid, the detail panel and Progress all agree. */
function cMastery(id, src) {
  return cardBreakdown(id, deckFor(id, src || 'curated'));
}

/* deck detail — shown when a deck is opened (before the flipper): the deck's
   mastery stats, every card with its current level, and Learn / Cram entry. */
function DeckDetail({ mod, src, setSrc, hasClass, onBack, onStudy }) {
  const [open, setOpen] = useSF(null);          // expanded card index (definition reveal)
  const c = modColor(mod.hue);
  const cards = deckFor(mod.id, src);
  const bd = cardBreakdown(mod.id, cards);

  return (
    <div className="page fade">
      <button className="crumb" onClick={onBack}>← All decks</button>

      <div className="dd-head">
        <div className="mod-emblem" style={{ width:54, height:54, borderRadius:15, background:c.bg, color:c.ink }}>
          <ModuleGlyph m={mod} size={29} color={c.ink} />
        </div>
        <div style={{ flex:1, minWidth:0 }}>
          <div className="page-eyebrow" style={{ color:c.ink }}>Flashcard deck</div>
          <h1 className="dd-title">{mod.name}</h1>
          <div className="dd-sub">{cards.length} cards · {FC_SRC_LABEL[src]}</div>
        </div>
      </div>

      {hasClass && (
        <div className="seg" style={{ margin:'2px 0 18px' }} title="Curated decks, the imported Quizlet/class set, or both">
          {['curated','quizlet','all'].map(s => (
            <button key={s} className={src===s ? 'on' : ''} onClick={() => { setSrc(s); setOpen(null); }}>{FC_SRC_LABEL[s]}</button>
          ))}
        </div>
      )}

      <div className="dd-top">
        <div className="panel dd-stats">
          <div className="dd-ring">
            <MiniRing pct={bd.pct} color={c.ink} size={78} />
            <div>
              <div className="dd-ring-num" style={{ color:c.ink }}>{bd.mastered}<span>/{bd.total}</span></div>
              <div className="dd-ring-lbl">mastered</div>
            </div>
          </div>
          <div className="dd-levels">
            {CARD_LEVEL_LABELS.map((lbl, i) => (
              <div key={i} className="dd-lvl-row">
                <span className={`lvl-dot lvl-${i}`} />
                <span className="dd-lvl-name">{lbl}</span>
                <span className="dd-lvl-ct">{bd.levels[i]}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="dd-actions">
          <button className="dd-cta dd-cta-learn" onClick={() => onStudy('learn')} disabled={!cards.length}>
            <div className="dd-cta-title">Learn →</div>
            <div className="dd-cta-sub">Rate each card. Mastery and progress are tracked.</div>
          </button>
          <button className="dd-cta dd-cta-cram" onClick={() => onStudy('cram')} disabled={!cards.length}>
            <div className="dd-cta-title">Cram →</div>
            <div className="dd-cta-sub">Practice freely — nothing affects your progress.</div>
          </button>
        </div>
      </div>

      <div className="dd-list-head">All cards <span>{cards.length}</span></div>
      {cards.length
        ? <div className="dd-list">
            {cards.map((card, i) => {
              const lvl = cardLevel(mod.id, card.t);
              const isOpen = open === i;
              return (
                <div key={i} className={`dd-card${isOpen ? ' open' : ''}`}
                  onClick={() => setOpen(isOpen ? null : i)} role="button" tabIndex={0}
                  onKeyDown={(e)=>{ if(e.key==='Enter'||e.key===' '){ e.preventDefault(); setOpen(isOpen ? null : i); } }}>
                  <div className="dd-card-top">
                    <span className={`lvl-dot lvl-${lvl}`} title={CARD_LEVEL_LABELS[lvl]} />
                    <span className="dd-card-term">{card.t}</span>
                    {card.cite && <span className="dd-card-cite" title={card.cite}>📖</span>}
                    <span className="dd-card-chev">{isOpen ? '–' : '+'}</span>
                  </div>
                  {isOpen && (
                    <div className="dd-card-def">
                      {card.d}
                      <div className="dd-card-meta">{CARD_LEVEL_LABELS[lvl]}{card.cite ? ` · 📖 ${card.cite}` : ''}</div>
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        : <div className="panel" style={{ textAlign:'center', color:'var(--muted)', padding:24 }}>No {FC_SRC_LABEL[src]} cards for this deck.</div>}
    </div>
  );
}

function FlashcardsPage({ focus, go }) {
  const [sel, setSel] = useSF(focus ? MOD_BY_ID[focus] : null);
  const [src, setSrc] = useSF('curated'); // 'curated' | 'quizlet' | 'all'
  const [study, setStudy] = useSF(null);   // null = deck detail | 'learn' | 'cram'
  useEF(() => { if (focus) { setSel(MOD_BY_ID[focus]); setStudy(null); } }, [focus]);

  const hasClass = (typeof CLASS_FLASHCARDS !== 'undefined');

  if (sel) {
    const c = modColor(sel.hue);
    const cards = deckFor(sel.id, src);

    if (study) {
      return (
        <div className="page fade">
          <div style={{ maxWidth:620, margin:'0 auto 4px' }}>
            <div className="page-eyebrow" style={{ color:c.ink, textAlign:'center' }}>
              {sel.name} · {study === 'cram' ? 'Cram' : 'Learn'} · {cards.length} cards · {FC_SRC_LABEL[src]}
            </div>
          </div>
          {cards.length
            ? <FlashDeck cards={tagModule(cards, sel.id)} accent={c.ink} title={sel.name} moduleId={sel.id} mode={study} onExit={() => setStudy(null)} />
            : <div className="panel" style={{ maxWidth:620, margin:'10px auto', padding:24, textAlign:'center', color:'var(--muted)' }}>
                No {FC_SRC_LABEL[src]} cards for this module. <button className="btn btn-sm btn-ghost" onClick={() => setStudy(null)}>← Back</button>
              </div>}
        </div>
      );
    }

    return <DeckDetail mod={sel} src={src} setSrc={setSrc} hasClass={hasClass}
      onBack={() => setSel(null)} onStudy={(m) => setStudy(m)} />;
  }

  const open = (m) => { setSel(m); setStudy(null); };

  return (
    <div className="page fade">
      <div className="page-head">
        <div className="page-eyebrow">Flashcards</div>
        <h1 className="page-title">Recall decks</h1>
        <p className="page-sub">A deck per module. Open one to see every card and its mastery, then Learn to build mastery or Cram for a no-stakes run.</p>
      </div>

      {hasClass && (
        <div className="seg" style={{ margin:'0 0 16px' }} title="Curated decks, the imported Quizlet/class set, or both">
          {['curated','quizlet','all'].map(s => (
            <button key={s} className={src===s ? 'on' : ''} onClick={() => setSrc(s)}>{FC_SRC_LABEL[s]}</button>
          ))}
        </div>
      )}

      <div className="deck-grid">
        {MODULES.map((m, idx) => {
          const c = modColor(m.hue);
          const count = deckFor(m.id, src).length;
          const ms = cMastery(m.id, src);
          return (
            <div key={m.id} className="deck fade" style={{ animationDelay:`${idx*40}ms` }}
              onClick={() => open(m)} role="button" tabIndex={0}
              onKeyDown={(e)=>{ if(e.key==='Enter'||e.key===' '){ e.preventDefault(); open(m); } }}>
              <div className="deck-face">
                <div className="deck-band" style={{ background:c.ink }} />
                <div className="deck-top">
                  <div className="mod-emblem" style={{ width:42, height:42, background:c.bg, color:c.ink }}><ModuleGlyph m={m} size={23} color={c.ink} /></div>
                  {ms.attempted
                    ? <MiniRing pct={ms.pct} color={c.ink} size={36} />
                    : (m.current ? <span className="tag" style={{ background:'var(--coral)', color:'#fff' }}>This week</span> : null)}
                </div>
                <div className="deck-name">{m.name}</div>
                <div className="deck-count">{count} cards{ms.attempted && m.current ? ' · this week' : ''}</div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}
window.FlashcardsPage = FlashcardsPage;