/* maydays — Qbank only (flashcards removed) */
const { useState: _useState } = React;

function Qbank({ qbank }) {
  const [sel, setSel] = _useState(null);
  const [submit, setSubmit] = _useState(false);

  const correctLetter = qbank.options.find(o => o.correct).letter;

  return (
    <div className="section qbank">
      <h3><span className="num">Q</span> Qbank check</h3>
      <div className="stem" dangerouslySetInnerHTML={{ __html: qbank.stem }} />
      <div>
        {qbank.options.map(o => {
          let cls = 'qopt';
          if (submit) {
            if (o.letter === correctLetter) cls += ' correct';
            else if (o.letter === sel) cls += ' wrong sel';
            else cls += ' wrong';
          } else if (sel === o.letter) cls += ' sel';
          return (
            <div key={o.letter} className={cls} onClick={() => !submit && setSel(o.letter)}>
              <div className="letter">{o.letter}</div>
              <div className="body">{o.text}</div>
            </div>
          );
        })}
      </div>
      <div className="row" style={{ marginTop: 16, justifyContent: 'space-between' }}>
        <span className="muted mono">Question 1 of 12 · Mayday Qbank</span>
        {!submit
          ? <button className="btn sm" disabled={!sel} onClick={() => setSubmit(true)} style={!sel ? { opacity: 0.5, cursor: 'not-allowed' } : null}>Submit answer</button>
          : <button className="btn ghost sm" onClick={() => { setSel(null); setSubmit(false); }}>Try again</button>
        }
      </div>
      {submit && (
        <div className="qexplain">
          <h4>{sel === correctLetter ? '✓ Correct. ' : '✗ Not quite. '} The answer is <b>{correctLetter}</b>.</h4>
          {qbank.options.map(o => (
            <div key={o.letter} style={{ marginTop: 8 }}>
              <b style={{ color: o.correct ? 'var(--sage-2)' : 'var(--ink)' }}>{o.letter}. {o.text}</b>
              <div className="muted" style={{ fontSize: 13.5, marginTop: 2 }}>{o.why}</div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Qbank });