// pages/List.jsx
const ListPage = ({ setRoute, openLineModal, initialCat, initialSearch, videoMode }) => {
  const [cat, setCat] = React.useState(initialCat || 'all');
  const [query, setQuery] = React.useState('');
  const [sort, setSort] = React.useState('new');
  const searchRef = React.useRef(null);

  React.useEffect(() => { setCat(initialCat || 'all'); }, [initialCat]);
  React.useEffect(() => { if (initialSearch) searchRef.current?.focus(); }, [initialSearch]);

  const filtered = ARTICLES
    .filter(a => cat === 'all' || a.cat === cat)
    .filter(a => !query || (a.title + a.desc).toLowerCase().includes(query.toLowerCase()))
    .sort((a, b) => sort === 'new' ? b.id - a.id : (b.hot ? 1 : 0) - (a.hot ? 1 : 0));

  const title = cat === 'all' ? (videoMode ? '動画一覧' : '全記事') : CATEGORIES.find(c => c.id === cat)?.label;
  const catObj = CATEGORIES.find(c => c.id === cat);

  return (
    <div className="page-enter">
      {/* Header bar */}
      <section className="bg-grid" style={{ borderBottom: '2.5px solid var(--line)' }}>
        <div className="container" style={{ padding: '50px 24px 30px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, fontFamily: 'IBM Plex Mono, monospace', marginBottom: 14, opacity: .7 }}>
            <button onClick={() => setRoute({ page: 'home' })} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'inherit', padding: 0, fontFamily: 'inherit' }}>HOME</button>
            <span>/</span>
            <span>ARTICLES</span>
            {cat !== 'all' && <><span>/</span><span style={{ color: 'var(--ink)' }}>{title}</span></>}
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 20, flexWrap: 'wrap' }}>
            {catObj && <div style={{ fontSize: 54 }}>{catObj.emoji}</div>}
            <div>
              <h1 style={{ fontSize: 36, fontWeight: 900, margin: 0, lineHeight: 1.1 }}>{title}</h1>
              <p style={{ margin: '8px 0 0', fontSize: 14, opacity: .75 }}>
                {catObj ? catObj.desc : '全カテゴリの記事を一覧で見るで〜'}
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Controls */}
      <section className="container" style={{ padding: '28px 24px 0' }}>
        {/* Search */}
        <div className="chunky" style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 16px', marginBottom: 20 }}>
          <Icon name="search" size={18} />
          <input
            ref={searchRef}
            value={query}
            onChange={e => setQuery(e.target.value)}
            placeholder="記事を検索…（例: ChatGPT、議事録、サムネ）"
            style={{
              border: 'none', outline: 'none', flex: 1,
              fontSize: 15, fontFamily: 'inherit', fontWeight: 600,
              background: 'transparent', color: 'var(--ink)',
            }}
          />
          {query && (
            <button className="btn btn-ghost" onClick={() => setQuery('')} style={{ padding: 6 }}>
              <Icon name="close" size={14} />
            </button>
          )}
        </div>

        {/* Category chips */}
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 12 }}>
          <button
            onClick={() => setCat('all')}
            className="btn"
            style={{
              background: cat === 'all' ? 'var(--ink)' : '#fff',
              color: cat === 'all' ? '#fff' : 'var(--ink)',
              fontSize: 13,
            }}
          >すべて</button>
          {CATEGORIES.map(c => (
            <button
              key={c.id}
              onClick={() => setCat(c.id)}
              className="btn"
              style={{
                background: cat === c.id ? c.color : '#fff',
                color: cat === c.id && c.id !== 'site' ? '#fff' : 'var(--ink)',
                fontSize: 13,
              }}
            >
              {c.emoji} {c.label}
            </button>
          ))}
        </div>

        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 4px', borderBottom: '2px dashed var(--line)' }}>
          <div style={{ fontSize: 13, fontWeight: 700 }}>
            <span style={{ fontFamily: 'IBM Plex Mono, monospace', fontSize: 14 }}>{filtered.length}</span> 件の記事
          </div>
          <div style={{ display: 'flex', gap: 6 }}>
            <button
              className="btn btn-ghost"
              onClick={() => setSort('new')}
              style={{ fontSize: 12, padding: '6px 12px', background: sort === 'new' ? 'var(--sub)' : 'transparent' }}
            >新着順</button>
            <button
              className="btn btn-ghost"
              onClick={() => setSort('hot')}
              style={{ fontSize: 12, padding: '6px 12px', background: sort === 'hot' ? 'var(--sub)' : 'transparent' }}
            >人気順</button>
          </div>
        </div>
      </section>

      {/* Grid */}
      <section className="container" style={{ padding: '28px 24px 40px' }}>
        {filtered.length === 0 ? (
          <div className="chunky" style={{ padding: 60, textAlign: 'center' }}>
            <Harin size="md" />
            <h3 style={{ fontSize: 20, fontWeight: 900, margin: '16px 0 6px' }}>記事が見つからんで〜</h3>
            <p style={{ fontSize: 13, opacity: .7 }}>別のキーワードで試してみてや</p>
          </div>
        ) : (
          <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))' }}>
            {filtered.map(a => <ArticleCard key={a.id} article={a} setRoute={setRoute} />)}
          </div>
        )}
      </section>

      {/* CTA */}
      <section className="container" style={{ padding: '20px 24px 60px' }}>
        <LineCTABanner openLineModal={openLineModal} compact />
      </section>
    </div>
  );
};

Object.assign(window, { ListPage });