// database.jsx
function dbGetSeries(c) {
  if (c.series) {
    const L = { starter: 'スターター', promo: 'プロモーション', v1: '第1弾', v2: '第2弾', v3: '第3弾' };
    return { key: c.series, label: L[c.series] || c.series };
  }
  const n = parseInt(c.no, 10);
  if (c.no === '002') return { key: 'promo', label: 'プロモーション' };
  if (n >= 1 && n <= 13) return { key: 'starter', label: 'スターター' };
  if (n >= 14 && n <= 44) return { key: 'v1', label: '第1弾' };
  if (n >= 45 && n <= 96) return { key: 'v2', label: '第2弾' };
  if (n >= 97 && n <= 200) return { key: 'v3', label: '第3弾' };
  return null;
}

function CardDatabase() {
  const PER_PAGE = 30;
  const [filter, setFilter] = React.useState('all');
  const [side, setSide] = React.useState('all');
  const [series, setSeries] = React.useState('all');
  const [query, setQuery] = React.useState('');
  const [sort, setSort] = React.useState('no-asc');
  const [page, setPage] = React.useState(1);

  const filters = [
    { id: 'all', label: 'すべて' },
    { id: 'bird', label: '鳥類' },
    { id: 'mammal', label: '哺乳類' },
    { id: 'marine_mammal', label: '海洋哺乳類' },
    { id: 'amphibian', label: '両生類' },
    { id: 'reptile', label: '爬虫類' },
    { id: 'insect', label: '昆虫類' },
    { id: 'spider', label: 'クモ類' },
    { id: 'fish', label: '魚類' },
    { id: 'shellfish', label: '貝類' },
    { id: 'plant', label: '植物' },
    { id: 'algae', label: '藻類' },
    { id: 'echinoderm', label: '棘皮動物' },
    { id: 'fungus', label: '菌類' },
    { id: 'annelid', label: '環形動物' },
    { id: 'flatworm', label: '扁形動物' },
    { id: 'boost', label: 'ブースト' },
  ];

  const seriesFilters = [
    { id: 'all', label: '弾すべて' },
    { id: 'starter', label: 'スターター' },
    { id: 'promo', label: 'プロモーション' },
    { id: 'v1', label: '第1弾' },
    { id: 'v2', label: '第2弾' },
    { id: 'v3', label: '第3弾' },
  ];

  const sideFilters = [
    { id: 'all', label: 'すべて' },
    { id: 'conserve', label: '保全側' },
    { id: 'destroy', label: '破壊側' },
  ];

  const all = window.CREATURES || [];
  let shown = filter === 'all' ? all : all.filter(c => c.class === filter);
  if (side !== 'all') {
    shown = shown.filter(c => c.side === side);
  }
  if (series !== 'all') {
    shown = shown.filter(c => {
      const s = dbGetSeries(c);
      return s && s.key === series;
    });
  }
  if (query.trim()) {
    const q = query.trim().toLowerCase();
    shown = shown.filter(c =>
      (c.name || '').toLowerCase().includes(q) ||
      (c.kanji || '').toLowerCase().includes(q) ||
      (c.no || '').includes(q) ||
      (c.region || '').toLowerCase().includes(q)
    );
  }
  shown = [...shown].sort((a, b) => {
    if (sort === 'no-asc') return parseInt(a.no, 10) - parseInt(b.no, 10);
    if (sort === 'no-desc') return parseInt(b.no, 10) - parseInt(a.no, 10);
    if (sort === 'name') return (a.name || '').localeCompare(b.name || '', 'ja');
    return 0;
  });

  const totalPages = Math.max(1, Math.ceil(shown.length / PER_PAGE));
  const safePage = Math.min(page, totalPages);
  const start = (safePage - 1) * PER_PAGE;
  const pageItems = shown.slice(start, start + PER_PAGE);

  React.useEffect(() => { setPage(1); }, [filter, side, series, query, sort]);
  React.useEffect(() => {
    if (safePage !== page) setPage(safePage);
  }, [safePage]);

  const goPage = (p) => {
    setPage(p);
    window.scrollTo({ top: document.querySelector('.db-toolbar').offsetTop - 8, behavior: 'smooth' });
  };

  const pageButtons = () => {
    const out = [];
    const range = (from, to) => { for (let i = from; i <= to; i++) out.push(i); };
    if (totalPages <= 7) { range(1, totalPages); }
    else if (safePage <= 4) { range(1, 5); out.push('…', totalPages); }
    else if (safePage >= totalPages - 3) { out.push(1, '…'); range(totalPages - 4, totalPages); }
    else { out.push(1, '…'); range(safePage - 1, safePage + 1); out.push('…', totalPages); }
    return out;
  };

  return (
    <React.Fragment>
      {/* Hero header */}
      <section className="db-hero">
        <div className="container">
          <div>
            <a className="db-back-link" href="index.html">← トップへ戻る</a>
          </div>
          <div className="db-hero-inner">
            <h1 className="db-title">
              <small>◤ CARD DATABASE</small>
              全カード図鑑
            </h1>
            <div className="db-stats">
              現在 <b>{all.length}</b> 種を収録中
            </div>
          </div>
        </div>
      </section>

      {/* Sticky toolbar */}
      <div className="db-toolbar">
        <div className="container db-toolbar-inner">
          <div className="db-search">
            <span className="db-search-icon">⌕</span>
            <input
              type="text"
              placeholder="名前・No.・地域でさがす"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
            />
          </div>
          <div className="db-sort">
            <button className={sort === 'no-asc' ? 'active' : ''} onClick={() => setSort('no-asc')}>No. 昇順</button>
            <button className={sort === 'no-desc' ? 'active' : ''} onClick={() => setSort('no-desc')}>No. 降順</button>
            <button className={sort === 'name' ? 'active' : ''} onClick={() => setSort('name')}>名前順</button>
          </div>
        </div>
      </div>

      {/* Class filter */}
      <div className="container" style={{ paddingTop: 28 }}>
        <div className="gallery-filter">
          {filters.map(f => (
            <button key={f.id} className={filter === f.id ? 'active' : ''} onClick={() => setFilter(f.id)}>{f.label}</button>
          ))}
        </div>
        <div className="gallery-filter gallery-filter-side" style={{ marginTop: 10 }}>
          {sideFilters.map(f => (
            <button
              key={f.id}
              className={`side-pill-${f.id} ${side === f.id ? 'active' : ''}`}
              onClick={() => setSide(f.id)}
            >{f.label}</button>
          ))}
        </div>
        <div className="gallery-filter gallery-filter-series" style={{ marginTop: 10 }}>
          {seriesFilters.map(f => (
            <button
              key={f.id}
              className={`series-pill series-pill-${f.id} ${series === f.id ? 'active' : ''}`}
              onClick={() => setSeries(f.id)}
            >{f.label}</button>
          ))}
        </div>
      </div>

      {/* Grid */}
      <section className="db-section">
        <div className="container">
          {pageItems.length === 0 ? (
            <div className="db-empty">該当するカードはありません。</div>
          ) : (
            <div className="db-grid">
              {pageItems.map(c => (
                <div key={c.id} className="db-cell"><FlipCard c={c} /></div>
              ))}
            </div>
          )}

          {/* Pagination */}
          {totalPages > 1 && (
            <React.Fragment>
              <div className="db-pagination">
                <button onClick={() => goPage(Math.max(1, safePage - 1))} disabled={safePage === 1}>← 前へ</button>
                {pageButtons().map((b, i) =>
                  b === '…'
                    ? <span key={`e${i}`} className="ellipsis">…</span>
                    : <button key={b} className={b === safePage ? 'active' : ''} onClick={() => goPage(b)}>{b}</button>
                )}
                <button onClick={() => goPage(Math.min(totalPages, safePage + 1))} disabled={safePage === totalPages}>次へ →</button>
              </div>
              <div className="db-page-info">
                {start + 1} – {Math.min(start + PER_PAGE, shown.length)} / 全 {shown.length} 件
              </div>
            </React.Fragment>
          )}
        </div>
      </section>

      <Footer />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<CardDatabase />);