/* Browse — 学習トピック一覧モード */
function Browse({ questions, domains }) {
  const [openId, setOpenId] = React.useState(null);

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

  // Group by domain
  const grouped = {};
  questions.forEach(q => {
    if (!grouped[q.domain]) grouped[q.domain] = [];
    grouped[q.domain].push(q);
  });

  const sortedDomains = Object.keys(grouped).map(Number).sort((a, b) => a - b);

  return (
    <div className="browse-list">
      {sortedDomains.map(did => {
        const domain = domains.find(d => d.id === did);
        const items = grouped[did];
        return (
          <div key={did} className="browse-section">
            <h3 className="browse-section-title">
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: domain?.color, display: 'inline-block' }} />
              Domain {did} · {domain?.name}
              <span style={{ marginLeft: 'auto', color: 'var(--ink-3)', fontSize: 11, fontWeight: 500 }}>
                {items.length}問
              </span>
            </h3>
            {items.map(q => {
              const isOpen = openId === q.id;
              return (
                <div
                  key={q.id}
                  className="browse-q"
                  onClick={() => setOpenId(isOpen ? null : q.id)}
                >
                  <div className="browse-q-head">
                    <div className="browse-q-text">
                      {isOpen ? '▾' : '▸'} {q.q}
                    </div>
                    <div className="browse-q-topic">{q.topic}</div>
                  </div>
                  {isOpen && (
                    <div className="browse-q-detail">
                      <div className="ans">
                        正解: {String.fromCharCode(65 + q.answer)}. {q.choices[q.answer]}
                      </div>
                      <div className="lbl">⚠ 誤答の落とし穴</div>
                      <div>{q.pitfall}</div>
                      <div className="lbl">★ 判別の決め手</div>
                      <div>{q.key}</div>
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        );
      })}
    </div>
  );
}

window.Browse = Browse;