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

function DemoPage() {
  const db = useKataDB();
  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())));

  const parseCount = (s) => {
    if (typeof s === 'number') return s;
    s = String(s || '').trim().toLowerCase();
    const n = parseFloat(s);
    if (isNaN(n)) return 0;
    if (s.includes('m')) return n * 1e6;
    if (s.includes('k')) return n * 1e3;
    return n;
  };
  const recency = (s) => {
    s = String(s || '');
    if (/今天|刚刚/.test(s)) return 0;
    if (/昨天/.test(s)) return 1;
    let m;
    if ((m = s.match(/(\d+)\s*天/))) return +m[1];
    if (/本周/.test(s)) return 3;
    if ((m = s.match(/(\d+)\s*周/))) return +m[1] * 7;
    if ((m = s.match(/(\d+)\s*个?月/))) return +m[1] * 30;
    if ((m = s.match(/(\d+)\s*年/))) return +m[1] * 365;
    return 9999;
  };
  const shown = [...list].sort((a, b) => {
    if (sort === '最新') return recency(a.updated) - recency(b.updated);
    if (sort === '趋势') return parseCount(b.runs) - parseCount(a.runs);
    if (sort === '本周精选') return (b.trend ? 1 : 0) - (a.trend ? 1 : 0) || parseCount(b.likes) - parseCount(a.likes);
    return parseCount(b.likes) - parseCount(a.likes); // 热门
  });

  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">体验与交流</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">
          {shown.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"><WorkIcon type={it.type} size={16} stroke={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">{it.task || '通用'}</span><span className="wc-met">{it.updated || '可体验'}</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.__KATA_PAGES = window.__KATA_PAGES || {}).demo = { Comp: DemoPage, active: 'demo' };
if (!window.__KATA_SPA) {
  ReactDOM.createRoot(document.getElementById('root')).render(
    <KataPage active="demo"><DemoPage /></KataPage>
  );
}