/* eslint-disable */
// Mode 1: Flashcard — flip to reveal definition, then grade SM-2

const FlashcardMode = ({ word, onGrade, onGradeReadyChange, onStar, starred, fontSize = 1 }) => {
  const [flipped, setFlipped] = useState(false);

  // Reset flip on word change
  useEffect(() => { setFlipped(false); }, [word.id]);

  useEffect(() => {
    onGradeReadyChange?.(flipped);
  }, [flipped, onGradeReadyChange]);

  // Auto-pronounce when card appears
  useEffect(() => {
    const t = setTimeout(() => window.speak(word.word), 250);
    return () => clearTimeout(t);
  }, [word.id]);

  useEffect(() => {
    const onKey = (e) => {
      if (e.key !== ' ' || window.OxfordKeyboard.isEditableTarget(e.target)) return;
      e.preventDefault();
      setFlipped(f => !f);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const grade = (g) => { onGrade(g); };

  return (
    <div style={{ width:'100%', maxWidth: 640, margin:'0 auto' }}>
      {/* Card */}
      <div
        onClick={() => setFlipped(f => !f)}
        style={{
          position:'relative', cursor:'pointer',
          perspective: 2000,
        }}>
        <div style={{
          position:'relative',
          transition: 'transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1)',
          transformStyle: 'preserve-3d',
          transform: flipped ? 'rotateY(180deg)' : 'rotateY(0deg)',
          minHeight: 400,
        }}>
          {/* Front */}
          <PaperCard
            rotate={-0.4}
            style={{
              position:'absolute', inset:0,
              backfaceVisibility:'hidden',
              padding: '52px 48px 44px',
              display:'flex', flexDirection:'column',
            }}>
            {/* Top bar */}
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', position:'relative', zIndex:2 }}>
              <CEFRChip level={word.cefr} />
              <div style={{ display:'flex', gap:4 }}>
                <SpeakerBtn text={word.word} size={20}/>
                <StarBtn active={starred} onClick={onStar}/>
              </div>
            </div>

            {/* Word */}
            <div style={{ flex:1, display:'flex', flexDirection:'column', justifyContent:'center', alignItems:'center', textAlign:'center', position:'relative', zIndex:2 }}>
              <div className="serif" style={{
                fontSize: `${72 * fontSize}px`,
                fontWeight: 500,
                color:'var(--ink)',
                lineHeight: 1,
                letterSpacing: '-0.01em',
              }}>{word.word}</div>
              <div style={{ marginTop: 14, color:'var(--ink-faded)', fontSize: 13, fontFamily:'var(--font-mono)', letterSpacing:'0.1em', textTransform:'uppercase' }}>
                {word.pos}
              </div>
              <div className="phon" style={{ marginTop: 10, fontSize: 22 }}>{word.phonetic}</div>
            </div>

            {/* Hint to flip */}
            <div style={{ textAlign:'center', color:'var(--ink-ghost)', fontSize:12, fontFamily:'var(--font-mono)', letterSpacing:'0.15em', textTransform:'uppercase', position:'relative', zIndex:2 }}>
              Tap to reveal · Space
            </div>

            {/* Marginalia */}
            <div className="marginalia" style={{ position:'absolute', top:18, right:60, transform:'rotate(8deg)', opacity:0.45, fontSize:18 }}>
              {word.cefr}
            </div>
          </PaperCard>

          {/* Back */}
          <PaperCard
            rotate={0.4}
            style={{
              position:'absolute', inset:0,
              backfaceVisibility:'hidden',
              transform: 'rotateY(180deg)',
              padding: '40px 44px 36px',
              display:'flex', flexDirection:'column',
              gap: 18,
            }}>
            {/* Header */}
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', position:'relative', zIndex:2 }}>
              <div style={{ display:'flex', alignItems:'baseline', gap:14, flexWrap:'wrap' }}>
                <span className="serif" style={{ fontSize: 38, fontWeight:500, lineHeight:1 }}>{word.word}</span>
                <span style={{ color:'var(--ink-faded)', fontSize:12, fontFamily:'var(--font-mono)', textTransform:'uppercase', letterSpacing:'0.1em' }}>{word.pos}</span>
                <span className="phon" style={{ fontSize: 16 }}>{word.phonetic}</span>
              </div>
              <SpeakerBtn text={word.word}/>
            </div>

            <hr className="rule-double" style={{ margin:0, position:'relative', zIndex:2 }}/>

            {/* English definition */}
            <div style={{ position:'relative', zIndex:2 }}>
              <div style={{ fontSize:10, fontFamily:'var(--font-mono)', textTransform:'uppercase', letterSpacing:'0.18em', color:'var(--ink-faded)', marginBottom:6 }}>Definition</div>
              <div className="serif" style={{ fontSize: 19, lineHeight: 1.45, color:'var(--ink)' }}>{word.en}</div>
            </div>

            {/* Chinese definition */}
            <div style={{ position:'relative', zIndex:2 }}>
              <div style={{ fontSize:10, fontFamily:'var(--font-mono)', textTransform:'uppercase', letterSpacing:'0.18em', color:'var(--ink-faded)', marginBottom:6 }}>释义</div>
              <div style={{ fontSize: 18, lineHeight: 1.4, color:'var(--ink-soft)' }}>{word.zh}</div>
            </div>

            {/* Example */}
            <div style={{ position:'relative', zIndex:2, paddingLeft: 14, borderLeft:'2px solid var(--rule)' }}>
              <div className="serif" style={{ fontStyle:'italic', fontSize: 17, color:'var(--ink-soft)', lineHeight:1.4 }}>
                "{word.example.replace(new RegExp(word.word + '\\w*', 'i'), m => `›${m}‹`).split('').map((ch,i) => ch==='›' || ch==='‹' ? '' : ch).join('')}"
              </div>
              <div style={{ fontSize: 14, color:'var(--ink-faded)', marginTop:4 }}>{word.exampleZh}</div>
            </div>

            {/* Marginalia */}
            <div className="marginalia" style={{ position:'absolute', top:14, right:60, fontSize: 16 }}>
              ✓ studied
            </div>
          </PaperCard>
        </div>
      </div>

      {/* Grade buttons */}
      <div style={{
        display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 10,
        marginTop: 24,
        opacity: flipped ? 1 : 0.35,
        pointerEvents: flipped ? 'auto' : 'none',
        transition: 'opacity 0.3s 0.2s',
      }}>
        <GradeBtn label="Again" sub="< 1 min" hand="忘了" color="var(--red-stamp)" onClick={() => grade('again')} k="1"/>
        <GradeBtn label="Hard"  sub="6 min"   hand="模糊" color="var(--gold)"      onClick={() => grade('hard')}  k="2"/>
        <GradeBtn label="Good"  sub="1 day"   hand="记得" color="var(--blue-mark)" onClick={() => grade('good')}  k="3"/>
        <GradeBtn label="Easy"  sub="4 days"  hand="轻松" color="var(--green-ok)"  onClick={() => grade('easy')}  k="4"/>
      </div>
    </div>
  );
};

const GradeBtn = ({ label, sub, hand, color, onClick, k }) => (
  <button
    onClick={onClick}
    style={{
      position:'relative',
      background:'var(--paper-1)',
      border:`1.5px solid ${color}`,
      color: color,
      borderRadius: 3,
      padding:'14px 8px 12px',
      cursor:'pointer',
      textAlign:'center',
      fontFamily:'var(--font-sans)',
      transition:'transform 0.08s ease, background 0.1s',
    }}
    onMouseOver={e => e.currentTarget.style.background = 'rgba(0,0,0,0.03)'}
    onMouseOut={e => e.currentTarget.style.background = 'var(--paper-1)'}
  >
    <div style={{ fontWeight:600, fontSize:15, letterSpacing:'0.02em' }}>{label}</div>
    <div style={{ fontSize:11, fontFamily:'var(--font-mono)', color:'var(--ink-faded)', marginTop:2 }}>{sub}</div>
    <div className="hand" style={{ position:'absolute', top:6, right:8, fontSize:14, color:color, opacity:0.7 }}>{hand}</div>
    <div style={{ position:'absolute', bottom:4, left:6, fontSize:9, fontFamily:'var(--font-mono)', color:'var(--ink-ghost)' }}>[{k}]</div>
  </button>
);

window.FlashcardMode = FlashcardMode;