/* page-demo.jsx — Demo 广场 (Hugging Face 式) */

function DemoPage() {
  const db = useKadaDB();
  const D = KSITE.demo, M = KSITE.pageMeta.demo;
  const allItems = db.works();
  const [tab, setTab] = React.useState('全部');
  const [sort, setSort] = React.useState('热门');
  const [qy, setQy] = React.useState('');

  const list = allItems.filter((it) =>
    (tab === '全部' || tab.startsWith(it.type)) &&
    (qy === '' || (it.name + it.author + it.task).toLowerCase().includes(qy.toLowerCase())));

  return (
    <React.Fragment>
      <div className="ka-stage">
        <Backdrop particles={6} />
        <div className="kc">
          <header className="pb">
            <span className="eyebrow"><span className="pulse" /> {M.kicker}</span>
            <h1>体验、调试并交流 <span className="ac">AI 技术</span></h1>
            <p>{M.desc}</p>
            <div className="ka-search nm-sink" style={{ marginTop: 30 }}>
              <IcSearch /><input placeholder="搜索模型、工具、Skill 或 Agent…" value={qy} onChange={(e) => setQy(e.target.value)} />
            </div>
          </header>
        </div>
      </div>

      <div className="kc">
        <div className="list-head">
          <div className="flt">
            {D.tabs.map((tp) => <button key={tp} className={'fchip nm-rise-sm' + (tab === tp ? ' on' : '')} onClick={() => setTab(tp)}>{tp}</button>)}
          </div>
          <div className="flt">
            <span className="lbl">排序</span>
            {D.sorts.map((s) => <button key={s} className={'fchip nm-rise-sm' + (sort === s ? ' on' : '')} onClick={() => setSort(s)}>{s}</button>)}
          </div>
        </div>

        <div className="demo-grid">
          {list.map((it, i) => (
            <Reveal key={it.id || it.name} delay={i * 60}>
              <a className="work-card nm-rise nm-press" href={'#demo_item/' + allItems.indexOf(it)} style={{ '--wc-hue': it.hue }}>
                <div className="wc-top">
                  <span className="wc-cat"><span className="wc-ico"><Glyph type="demo" size={15} stroke={2.2} /></span>{it.type}</span>
                  {it.trend && <span className="wc-trend"><IcUp style={{ width: 12, height: 12 }} />本周热门</span>}
                </div>
                <h3>{it.name}</h3>
                <p className="wc-blurb">{it.blurb}</p>
                <div className="wc-foot">
                  <span className="wc-author"><Avatar name={it.org} hue={it.hue} size={30} /><span className="wc-who"><b>{it.org}</b><small>@{it.author}</small></span></span>
                  <span className="wc-metrics"><span className="wc-met"><IcHeart />{it.likes}</span><span className="wc-met"><IcEye />{it.runs}</span></span>
                </div>
              </a>
            </Reveal>
          ))}
        </div>
        {list.length === 0 && <div className="nm-sink" style={{ borderRadius: 20, padding: 40, textAlign: 'center', color: 'var(--ink-faint)', marginTop: 8 }}>没有匹配的 Demo，换个关键词试试～</div>}

        <Reveal className="nm-rise" tag="div" style={{ borderRadius: 26, padding: '40px 44px', marginTop: 40, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
          <div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 24, margin: '0 0 8px', color: 'var(--ink)' }}>有自己的模型、Skill 或 Agent？</h3>
            <p className="muted" style={{ margin: 0, fontSize: 14.5 }}>上传你的作品，让社区一键体验、点赞与交流。</p>
          </div>
          <a href="#upload_work" className="btn btn-accent">上传作品 <Arrow /></a>
        </Reveal>
      </div>
    </React.Fragment>
  );
}

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