/* eslint-disable */
// Mode 3: Listening — hear the word, pick which one it was

const ListenMode = ({ word, pool, onGrade, onGradeReadyChange, onStar, starred }) => {
  const [picked, setPicked] = useState(null);
  const [choices, setChoices] = useState([]);
  const [played, setPlayed] = useState(0);

  useEffect(() => {
    const distractors = pool.filter(w => w.id !== word.id && w.cefr === word.cefr).sort(()=>Math.random()-0.5).slice(0,3);
    setChoices([...distractors, word].sort(()=>Math.random()-0.5));
    setPicked(null);
    onGradeReadyChange?.(false);
    setPlayed(0);
    const t = setTimeout(() => { window.speak(word.word); setPlayed(1); }, 350);
    return () => clearTimeout(t);
  }, [word.id]);

  useEffect(() => {
    onGradeReadyChange?.(picked !== null);
  }, [picked, onGradeReadyChange]);

  const isCorrect = picked === word.id;

  return (
    <div style={{ width:'100%', maxWidth:640, margin:'0 auto' }}>
      <PaperCard rotate={0.3} style={{ padding:'36px 40px', minHeight: 360 }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', position:'relative', zIndex:2 }}>
          <CEFRChip level={word.cefr}/>
          <StarBtn active={starred} onClick={onStar}/>
        </div>

        {/* Audio prompt */}
        <div style={{ textAlign:'center', padding:'30px 0 24px', position:'relative', zIndex:2 }}>
          <div style={{ fontSize:11, fontFamily:'var(--font-mono)', textTransform:'uppercase', letterSpacing:'0.2em', color:'var(--ink-faded)', marginBottom:18 }}>
            听音辨词
          </div>
          <button
            onClick={() => { window.speak(word.word); setPlayed(p=>p+1); }}
            style={{
              width: 96, height: 96, borderRadius:'50%',
              background:'var(--paper-1)',
              border:'1.5px solid var(--ink)',
              cursor:'pointer',
              display:'inline-flex', alignItems:'center', justifyContent:'center',
              boxShadow:'3px 3px 0 var(--ink)',
              transition: 'transform 0.08s, box-shadow 0.08s',
            }}
            onMouseDown={e => { e.currentTarget.style.transform='translate(2px,2px)'; e.currentTarget.style.boxShadow='1px 1px 0 var(--ink)'; }}
            onMouseUp={e => { e.currentTarget.style.transform=''; e.currentTarget.style.boxShadow='3px 3px 0 var(--ink)'; }}
          >
            <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="var(--ink)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
              <path d="M11 5L6 9H3a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h3l5 4V5z"/>
              <path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>
              <path d="M19.07 4.93a10 10 0 0 1 0 14.14"/>
            </svg>
          </button>
          <div style={{ marginTop:14, fontSize:12, fontFamily:'var(--font-mono)', color:'var(--ink-faded)', letterSpacing:'0.1em' }}>
            点击重听 · played × {played}
          </div>
        </div>

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

        {/* Word choices (no definitions) */}
        <div style={{ display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:10, position:'relative', zIndex:2 }}>
          {choices.map((c, i) => {
            const isPicked = picked === c.id;
            const isThisCorrect = c.id === word.id;
            const showState = picked !== null;
            let border = 'var(--rule)';
            let bg = 'var(--paper-1)';
            if (showState) {
              if (isThisCorrect) { border = 'var(--green-ok)'; bg = 'rgba(90,115,57,0.08)'; }
              else if (isPicked) { border = 'var(--red-stamp)'; bg = 'rgba(168,52,31,0.08)'; }
            }
            return (
              <button key={c.id}
                disabled={showState}
                onClick={() => setPicked(c.id)}
                style={{
                  padding: '14px 16px',
                  border: `1px solid ${border}`,
                  background: bg,
                  borderRadius: 3,
                  cursor: showState ? 'default' : 'pointer',
                  textAlign:'center',
                  display:'flex', flexDirection:'column', gap:4, alignItems:'center',
                }}
              >
                <div className="serif" style={{ fontSize:22, fontWeight:500 }}>{c.word}</div>
                {showState && <div className="phon" style={{ fontSize:13 }}>{c.phonetic}</div>}
              </button>
            );
          })}
        </div>

        {/* Reveal */}
        {picked !== null && (
          <div style={{ marginTop:18, padding:14, background:'var(--paper-2)', border:'1px dashed var(--rule)', borderRadius:3, position:'relative', zIndex:2 }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:6 }}>
              <span className="serif" style={{ fontSize:18, fontWeight:500 }}>{word.word}</span>
              <span className="phon" style={{ fontSize:13 }}>{word.phonetic}</span>
            </div>
            <div className="serif" style={{ fontSize:14, color:'var(--ink-soft)', lineHeight:1.4 }}>{word.en}</div>
            <div style={{ fontSize:13, color:'var(--ink-faded)', marginTop:2 }}>{word.zh}</div>
          </div>
        )}
      </PaperCard>

      {picked !== null && (
        <div style={{ display:'flex', justifyContent:'center', gap:10, marginTop:20 }}>
          <button className="btn ghost" onClick={() => onGrade('again')}>Again</button>
          {isCorrect ? (
            <>
              <button className="btn" onClick={() => onGrade('hard')}>Hard</button>
              <button className="btn primary" onClick={() => onGrade('good')}>Good</button>
              <button className="btn" onClick={() => onGrade('easy')}>Easy</button>
            </>
          ) : (
            <button className="btn primary" onClick={() => onGrade('again')}>Continue</button>
          )}
        </div>
      )}
    </div>
  );
};

window.ListenMode = ListenMode;