/* page-community.jsx — 社区活动集合页 (all AI communities' events) */

function CommunityPage() {
  const db = useKadaDB();
  const D = KSITE.community, M = KSITE.pageMeta.community;
  const allEvents = db.events('c');
  const [city, setCity] = React.useState('全部');
  const [type, setType] = React.useState('全部');
  const [qy, setQy] = React.useState('');

  const list = allEvents.filter((e) =>
    (city === '全部' || e.city === city) &&
    (type === '全部' || e.tag === type) &&
    (qy === '' || (e.title + e.org).toLowerCase().includes(qy.toLowerCase())));

  return (
    <React.Fragment>
      <div className="ka-stage">
        <Backdrop particles={5} />
        <div className="kc">
          <header className="pb">
            <span className="eyebrow"><span className="pulse" /> {M.kicker}</span>
            <h1>汇聚行业里的<span className="ac">每一个</span> AI 社区</h1>
            <p>{M.desc}</p>
            <div className="ka-search nm-sink" style={{ marginTop: 30 }}>
              <IcSearch /><input placeholder="搜索活动、社区或主题…" value={qy} onChange={(e) => setQy(e.target.value)} />
            </div>
          </header>
        </div>
      </div>

      <div className="kc">
        <div className="list-head">
          <div className="flt">
            <span className="lbl">城市</span>
            {D.cities.map((c) => <button key={c} className={'fchip nm-rise-sm' + (city === c ? ' on' : '')} onClick={() => setCity(c)}>{c}</button>)}
          </div>
        </div>
        <div className="flt" style={{ marginBottom: 30 }}>
          <span className="lbl">形式</span>
          {D.types.map((tp) => <button key={tp} className={'fchip nm-rise-sm' + (type === tp ? ' on' : '')} onClick={() => setType(tp)}>{tp}</button>)}
        </div>

        <div className="ka-cols">
          <div>
            <div className="list-head" style={{ marginTop: 0 }}>
              <h2 className="sec-title" style={{ fontSize: 22 }}>全部活动</h2>
              <span className="count">{list.length} 场 · 实时更新</span>
            </div>
            <div className="elist">
              {list.map((e, i) => (
                <Reveal key={e.id || e.title} delay={i * 60}>
                  <a className="erow nm-rise nm-press" href={'#event/c' + allEvents.indexOf(e)}>
                    <span className="d">{e.date}<span>{e.day} · {e.time}</span></span>
                    <div className="mid">
                      <h3>{e.title}{e.hot && <span className="hot-dot"><span className="pulse" />热门</span>}</h3>
                      <div className="sub">
                        <span className="tbadge nm-sink-sm">{e.tag}</span>
                        <span>{e.org}</span>
                        <span className="mono">{e.mode === '线上' ? '线上' : e.city}</span>
                      </div>
                    </div>
                    <div className="end">
                      <span className="join-link">报名 <Arrow size={13} /></span>
                    </div>
                  </a>
                </Reveal>
              ))}
              {list.length === 0 && <div className="nm-sink" style={{ borderRadius: 20, padding: 40, textAlign: 'center', color: 'var(--ink-faint)' }}>没有符合条件的活动，换个筛选试试～</div>}
            </div>
          </div>

          <aside className="ka-side">
            <div className="side-card nm-rise">
              <h4>热门社区 <span className="count">{D.orgs.length}</span></h4>
              {D.orgs.map((o) => (
                <a key={o.name} className="org" href="#">
                  <span className="ava nm-sink-sm">{o.en.charAt(0)}</span>
                  <span className="meta"><div className="n">{o.name}</div><div className="s">{o.members} 成员 · {o.focus}</div></span>
                  <span className="arrow-dot"><Arrow /></span>
                </a>
              ))}
            </div>
            <div className="side-card nm-rise" style={{ textAlign: 'center' }}>
              <h4 style={{ justifyContent: 'center' }}>你也有活动？</h4>
              <p className="muted" style={{ fontSize: 13.5, lineHeight: 1.6, margin: '0 0 18px' }}>把你的社区活动提交到咔嗒Lab，让全行业看到。</p>
              <a href="#submit_event" className="btn btn-accent" style={{ width: '100%', justifyContent: 'center' }}>提交活动 <Arrow /></a>
            </div>
          </aside>
        </div>
      </div>
    </React.Fragment>
  );
}

(window.__KADA_PAGES = window.__KADA_PAGES || {}).community = { Comp: CommunityPage, active: 'community' };
if (!window.__KADA_SPA) {
  ReactDOM.createRoot(document.getElementById('root')).render(
    <KadaPage active="community"><CommunityPage /></KadaPage>
  );
}