/* ============================================================
   Flashcard / SRS review — used by the "Smart Review" tile.
   Front: Cyrillic + audio. Flip to reveal the full stacked gloss,
   then rate recall (Again / Good / Easy) to schedule the next visit.
   ============================================================ */
(function () {
  const { useState } = React;
  const speak = window.speakRU;

  function FlashcardDeck({ deck, onExit, onFinish }) {
    const [idx, setIdx] = useState(0);
    const [flipped, setFlipped] = useState(false);
    const [stats, setStats] = useState({ again:0, good:0, easy:0 });
    const card = deck[idx];

    const rate = (k) => {
      setStats(s => ({ ...s, [k]: s[k] + 1 }));
      if (idx + 1 >= deck.length) onFinish({ ...stats, [k]: stats[k] + 1 });
      else { setIdx(i => i + 1); setFlipped(false); }
    };

    const SCHED = { again:'< 1 min', good:'10 min', easy:'4 days' };
    const RATE = [
      { k:'again', label:'Again', c:'oklch(0.58 0.17 25)' },
      { k:'good',  label:'Good',  c:'oklch(0.60 0.13 150)' },
      { k:'easy',  label:'Easy',  c:'var(--primary)' },
    ];

    return (
      <div style={{ display:'flex', flexDirection:'column', height:'100%', background:'var(--bg)' }}>
        {/* header */}
        <div style={{ display:'flex', alignItems:'center', gap:12, padding:'52px 18px 10px' }}>
          <div style={{ flex:1 }}><Bar value={(idx) / deck.length} /></div>
          <span style={{ fontFamily:'"JetBrains Mono",monospace', fontWeight:600, fontSize:13, color:'var(--muted)' }}>
            {idx + 1}/{deck.length}
          </span>
          <IconBtn kind="close" onClick={onExit} />
        </div>

        {/* card */}
        <div style={{ flex:1, overflowY:'auto', padding:'10px 18px 18px', display:'flex', flexDirection:'column' }}>
          <div style={{ fontFamily:'"JetBrains Mono",monospace', fontSize:11, fontWeight:600,
            letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--primary-deep)',
            textAlign:'center', padding:'4px 0 14px' }}>Smart Review</div>

          {!flipped ? (
            <button onClick={() => { setFlipped(true); speak(card.ru); }}
              style={{ appearance:'none', cursor:'pointer', flex:1, minHeight:300,
                background:'var(--surface)', border:'1px solid var(--line)', borderRadius:24,
                boxShadow:'0 10px 30px -18px rgba(40,20,10,0.3)',
                display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:22, padding:24 }}>
              <span style={{ fontFamily:'"Golos Text",system-ui', fontWeight:600, fontSize:52,
                color:'var(--ink)', letterSpacing:'-0.01em' }}>{card.ru}</span>
              <span onClick={(e)=>{ e.stopPropagation(); speak(card.ru); }}
                style={{ display:'flex', alignItems:'center', gap:8, color:'var(--primary-deep)',
                  background:'var(--primary-wash)', borderRadius:999, padding:'9px 16px',
                  fontFamily:'"Hanken Grotesk",system-ui', fontWeight:700, fontSize:13.5 }}>
                <Speaker size={17} color="var(--primary-deep)" /> Listen
              </span>
              <span style={{ fontFamily:'"Hanken Grotesk",system-ui', fontWeight:600, fontSize:13.5,
                color:'var(--muted)' }}>Tap to reveal</span>
            </button>
          ) : (
            <div style={{ flex:1, display:'flex', flexDirection:'column', justifyContent:'center' }}>
              <StackedGloss item={card} />
            </div>
          )}
        </div>

        {/* rating */}
        {flipped && (
          <div style={{ padding:'10px 18px calc(16px + env(safe-area-inset-bottom))', borderTop:'1px solid var(--line)' }}>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:10 }}>
              {RATE.map(r => (
                <button key={r.k} onClick={() => rate(r.k)}
                  style={{ appearance:'none', border:'none', cursor:'pointer', borderRadius:15,
                    padding:'12px 6px 10px', background:'var(--surface)',
                    boxShadow:`inset 0 0 0 1.5px ${r.c}`, color:r.c,
                    display:'flex', flexDirection:'column', alignItems:'center', gap:2 }}>
                  <span style={{ fontFamily:'"Hanken Grotesk",system-ui', fontWeight:800, fontSize:15.5 }}>{r.label}</span>
                  <span style={{ fontFamily:'"JetBrains Mono",monospace', fontWeight:500, fontSize:10, opacity:0.8 }}>{SCHED[r.k]}</span>
                </button>
              ))}
            </div>
          </div>
        )}
      </div>
    );
  }

  window.FlashcardDeck = FlashcardDeck;
})();