/* eslint-disable */
// Mode 4: Cloze — sentence with blank, type or pick the missing word

const ClozeMode = ({ word, pool, onGrade, onGradeReadyChange, onStar, starred }) => {
  const [input, setInput] = useState('');
  const [submitted, setSubmitted] = useState(false);
  const inputRef = useRef(null);

  const sentence = window.OXFORD_CLOZE[word.id] || word.example.replace(new RegExp(`\\b${word.word}\\w*\\b`, 'i'), '___');
  const parts = window.OxfordCloze.splitSentence(sentence);
  const blankCount = window.OxfordCloze.blankCount(sentence);

  useEffect(() => {
    setInput('');
    setSubmitted(false);
    onGradeReadyChange?.(false);
    setTimeout(() => inputRef.current?.focus(), 100);
  }, [word.id]);

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

  const isCorrect = window.OxfordCloze.isCorrectAnswer(input, word);

  const submit = () => {
    if (!input.trim()) return;
    setSubmitted(true);
  };

  const handleKey = (e) => {
    if (e.key === 'Enter' && !submitted) submit();
  };

  // Highlight sentence parts
  const renderSentence = () => {
    return (
      <span>
        {parts.map((part, i) => (
          <React.Fragment key={i}>
            {part}
            {i < blankCount && (
              <span style={{
                display:'inline-block',
                minWidth: 100,
                padding:'2px 10px',
                borderBottom: `2px solid ${submitted ? (isCorrect ? 'var(--green-ok)' : 'var(--red-stamp)') : 'var(--ink)'}`,
                fontFamily: 'var(--font-serif)',
                fontStyle: 'italic',
                color: submitted ? (isCorrect ? 'var(--green-ok)' : 'var(--red-stamp)') : 'var(--ink)',
                fontWeight: submitted ? 600 : 500,
                marginInline: 4,
              }}>
                {submitted
                  ? window.OxfordCloze.answerForBlank(word, i)
                  : (window.OxfordCloze.inputForBlank(input, i, blankCount) || '\u00A0\u00A0')}
              </span>
            )}
          </React.Fragment>
        ))}
      </span>
    );
  };

  return (
    <div style={{ width:'100%', maxWidth:640, margin:'0 auto' }}>
      <PaperCard rotate={-0.2} 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>

        <div style={{ padding: '24px 0 12px', position:'relative', zIndex:2 }}>
          <div style={{ fontSize:11, fontFamily:'var(--font-mono)', textTransform:'uppercase', letterSpacing:'0.2em', color:'var(--ink-faded)', marginBottom:16 }}>
            Fill in the blank · 填入正确单词
          </div>

          {/* Hint */}
          <div style={{ display:'flex', gap:12, alignItems:'center', marginBottom:18, flexWrap:'wrap' }}>
            <span style={{ fontFamily:'var(--font-mono)', fontSize:11, textTransform:'uppercase', letterSpacing:'0.1em', color:'var(--ink-faded)' }}>Hint:</span>
            <span className="tape" style={{ fontSize:14 }}>{word.zh}</span>
            <span style={{ fontFamily:'var(--font-mono)', fontSize:11, color:'var(--ink-faded)' }}>·</span>
            <span style={{ fontSize:13, color:'var(--ink-soft)', fontFamily:'var(--font-mono)' }}>{word.pos}</span>
            <span style={{ fontFamily:'var(--font-mono)', fontSize:11, color:'var(--ink-faded)' }}>·</span>
            <span style={{ fontSize:13, color:'var(--ink-soft)', fontFamily:'var(--font-mono)' }}>{window.OxfordCloze.lengthHint(word)}</span>
          </div>

          {/* Sentence */}
          <div className="serif" style={{ fontSize: 24, lineHeight:1.6, color:'var(--ink)', padding:'18px 0', textAlign:'center', borderTop:'1px solid var(--rule-soft)', borderBottom:'1px solid var(--rule-soft)' }}>
            {renderSentence()}
          </div>
        </div>

        {/* Input */}
        {!submitted && (
          <div style={{ marginTop:18, position:'relative', zIndex:2 }}>
            <input
              ref={inputRef}
              type="text"
              value={input}
              onChange={(e) => setInput(e.target.value)}
              onKeyDown={handleKey}
              placeholder="type your answer..."
              style={{
                width:'100%',
                padding:'12px 16px',
                fontFamily:'var(--font-serif)',
                fontSize: 22,
                background:'transparent',
                border:'none',
                borderBottom: '1.5px solid var(--ink)',
                outline:'none',
                textAlign:'center',
                color:'var(--ink)',
              }}
              autoCapitalize="off"
              autoCorrect="off"
              autoComplete="off"
              spellCheck={false}
            />
            <div style={{ display:'flex', justifyContent:'center', marginTop:18 }}>
              <button className="btn primary" onClick={submit} disabled={!input.trim()}>
                Check ↵
              </button>
            </div>
          </div>
        )}

        {/* Result */}
        {submitted && (
          <div style={{ position:'relative', zIndex:2, marginTop: 18 }}>
            <div style={{ display:'flex', justifyContent:'center', marginBottom:12 }}>
              <span className="stamp" style={{ color: isCorrect ? 'var(--green-ok)' : 'var(--red-stamp)' }}>
                {isCorrect ? '✓ Correct' : '✗ Was: ' + word.word}
              </span>
            </div>
            <div style={{ padding:14, background:'var(--paper-2)', border:'1px dashed var(--rule)', borderRadius:3 }}>
              <div className="serif" style={{ fontSize:15, color:'var(--ink-soft)', lineHeight:1.4 }}>{word.en}</div>
              <div style={{ fontSize:13, color:'var(--ink-faded)', marginTop:4, fontStyle:'italic' }}>{word.exampleZh}</div>
            </div>
          </div>
        )}
      </PaperCard>

      {submitted && (
        <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.ClozeMode = ClozeMode;