/* Vocab books list/detail */

function VocabBooksPage({ bookId, navigate, onBack }) {
  if (bookId) {
    const book = SEED_VOCAB_BOOKS.find((b) => b.id === bookId);
    const items = SEED_VOCAB[bookId] || [];
    return (
      <div className="zen-page">
        <PageHeader title={book ? book.name : "單字本"} onBack={() => navigate("/vocab-books")} />
        <div className="zen-content">
          <div className="content-wrapper">
            <ZenCard>
              {items.map((v) => (
                <div key={v.term} className="vocab-row">
                  <div>
                    <div className="vocab-term">{v.term}</div>
                    <div className="vocab-reading">{v.reading}</div>
                  </div>
                  <div>
                    <div className="vocab-meaning">{v.meaning}</div>
                    <div style={{ textAlign: "right", marginTop: 4 }}>
                      <span className="jlpt-badge">{v.jlpt}</span>
                    </div>
                  </div>
                </div>
              ))}
            </ZenCard>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="zen-page">
      <PageHeader title="單字本" onBack={onBack || (() => navigate("/library"))} />
      <div className="zen-content">
        <div className="content-wrapper">
          {SEED_VOCAB_BOOKS.map((b) => (
            <div key={b.id} className="book-card" onClick={() => navigate(`/vocab-books/${b.id}`)}>
              <div>
                <div className="book-name">{b.name}</div>
                <div className="book-meta">{b.count} 字</div>
              </div>
              <Icon name="chevronRight" size={18} />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { VocabBooksPage });