/* Quiz component — 一問一答モード */
const { useState, useEffect, useMemo, useCallback, useRef } = React;

function Quiz({ questions, domains, progress, updateProgress }) {
  const [order, setOrder] = useState(() => questions.map((_, i) => i));
  const [idx, setIdx] = useState(0);
  const [picked, setPicked] = useState(null);
  const [showAll, setShowAll] = useState(false);

  // Reset when filtered questions list changes
  useEffect(() => {
    setOrder(questions.map((_, i) => i));
    setIdx(0);
    setPicked(null);
  }, [questions]);

  if (questions.length === 0) {
    return (
      <div className="empty">
        <div className="empty-title">問題がありません</div>
        <div className="empty-sub">ドメインフィルターを変更してください。</div>
      </div>
    );
  }

  const realIdx = order[idx] ?? 0;
  const q = questions[realIdx];
  if (!q) return null;

  const domain = domains.find(d => d.id === q.domain);
  const isCorrect = picked === q.answer;
  const progressPct = ((idx + 1) / questions.length) * 100;

  const pick = (i) => {
    if (picked !== null) return;
    setPicked(i);
    updateProgress(q.id, { lastSeen: Date.now(), correct: i === q.answer });
  };

  const next = () => {
    if (idx < questions.length - 1) {
      setIdx(idx + 1);
      setPicked(null);
    } else {
      // Finished — restart from beginning
      setIdx(0);
      setPicked(null);
    }
  };

  const prev = () => {
    if (idx > 0) {
      setIdx(idx - 1);
      setPicked(null);
    }
  };

  const shuffle = () => {
    const newOrder = [...order];
    for (let i = newOrder.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [newOrder[i], newOrder[j]] = [newOrder[j], newOrder[i]];
    }
    setOrder(newOrder);
    setIdx(0);
    setPicked(null);
  };

  const reveal = () => {
    setPicked(-1); // marker for "show without picking"
  };

  const showResult = picked !== null;
  const showCorrect = picked === -1 || picked === q.answer;
  const stats = progress[q.id] || {};

  return (
    <div className="q-shell">
      <div className="q-meta">
        <div className="q-progress">
          <span><strong>{idx + 1}</strong> / {questions.length}</span>
          <div className="q-progress-bar">
            <div className="q-progress-fill" style={{ width: `${progressPct}%` }} />
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          {stats.correct === true && <span className="q-domain-tag" style={{ background: 'var(--success-bg)', color: 'var(--success)' }}>✓ 正解済</span>}
          {stats.correct === false && <span className="q-domain-tag" style={{ background: 'var(--danger-bg)', color: 'var(--danger)' }}>要復習</span>}
          <span className="q-domain-tag">
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: domain?.color, display: 'inline-block' }} />
            Domain {q.domain}
          </span>
        </div>
      </div>

      <div className="q-topic">{q.topic}</div>
      <p className="q-text">{q.q}</p>

      <div className="q-choices">
        {q.choices.map((c, i) => {
          let cls = 'q-choice';
          if (showResult) {
            if (i === q.answer) cls += ' correct';
            else if (i === picked) cls += ' wrong';
            else cls += ' dim';
          }
          return (
            <button
              key={i}
              className={cls}
              onClick={() => pick(i)}
              disabled={showResult}
            >
              <span className="q-choice-letter">{String.fromCharCode(65 + i)}</span>
              <span>{c}</span>
            </button>
          );
        })}
      </div>

      {showResult && (
        <div className="q-result-block">
          <div className={`q-result-head ${isCorrect ? 'ok' : 'ng'}`}>
            {picked === -1 ? '正解はこちら' : isCorrect ? '✓ 正解' : '✗ 不正解'}
            <span style={{ color: 'var(--ink-3)', fontWeight: 500, marginLeft: 6 }}>
              — 正解: {String.fromCharCode(65 + q.answer)}
            </span>
          </div>

          <div className="q-explain">
            <div className="q-explain-label">⚠ 誤答の落とし穴</div>
            <div className="q-explain-body">{q.pitfall}</div>
          </div>

          <div className="q-explain key">
            <div className="q-explain-label">★ 判別の決め手</div>
            <div className="q-explain-body">{q.key}</div>
          </div>

          <div className="q-actions">
            <div className="q-action-group">
              <button className="btn subtle" onClick={prev} disabled={idx === 0}>← 前へ</button>
              <button className="btn subtle" onClick={shuffle}>シャッフル</button>
            </div>
            <button className="btn primary" onClick={next}>
              {idx < questions.length - 1 ? '次の問題 →' : '最初に戻る →'}
            </button>
          </div>
        </div>
      )}

      {!showResult && (
        <div className="q-actions">
          <div className="q-action-group">
            <button className="btn subtle" onClick={prev} disabled={idx === 0}>← 前へ</button>
            <button className="btn subtle" onClick={shuffle}>シャッフル</button>
          </div>
          <button className="btn" onClick={reveal}>答えを見る</button>
        </div>
      )}
    </div>
  );
}

window.Quiz = Quiz;