/* page-post.jsx — 社区发帖页 (anyone can be a poster) */

function PostCard({ p }) {
  const db = useKadaDB();
  const liked = db.isPostLiked(p.id);
  const toggle = (e) => { e.preventDefault(); db.toggleLikePost(p.id); };
  return (
    <a className="post nm-rise nm-press" href={'#post_item/' + p.id}>
      <div className="phead">
        <Avatar name={p.author} hue={p.hue} />
        <span className="meta"><div className="n">{p.author}</div><div className="h">{p.handle} · {p.time}</div></span>
        <span className="kind nm-sink-sm">{p.kind}</span>
      </div>
      <h3>{p.title}</h3>
      <div className="body">{p.body}</div>
      <div className="ptags">{p.tags.map((t) => <span className="ptag" key={t}>{t}</span>)}</div>
      <div className="pfoot">
        <span className="met" onClick={toggle} style={{ color: liked ? 'var(--accent)' : undefined }}><IcHeart style={{ fill: liked ? 'var(--accent)' : 'none' }} />{p.likes}</span>
        <span className="met"><IcChat />{p.comments.length}</span>
        <span className="met share">分享</span>
      </div>
    </a>
  );
}

function PostPage() {
  const db = useKadaDB();
  const D = KSITE.posts, M = KSITE.pageMeta.post;
  const me = db.currentUser();
  const [kind, setKind] = React.useState('全部');
  const kinds = ['全部', '讨论', '提问', '作品', '分享'];
  const feed = db.posts().filter((p) => kind === '全部' || p.kind === kind);

  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 und">社区主理人</span></h1>
            <p>{M.desc}</p>
          </header>
        </div>
      </div>

      <div className="kc">
        <div className="ka-cols">
          <div>
            <a href="#new_post" className="composer nm-rise" style={{ display: 'block' }}>
              <div className="crow">
                <Avatar name={me ? me.name : '你'} hue={me ? me.hue : 205} />
                <div className="field">
                  <div className="fake-input nm-sink-sm">{me ? me.name + '，分享你的想法、作品或问题…' : '分享你的想法、作品或问题…'}</div>
                  <div className="ctools">
                    <span className="t nm-sink-sm"># 话题</span>
                    <span className="t nm-sink-sm">📎 附件</span>
                    <span className="t nm-sink-sm">🔗 Demo</span>
                    <span className="spacer" />
                    <span className="btn btn-accent" style={{ padding: '11px 22px', fontSize: 14 }}>发布</span>
                  </div>
                </div>
              </div>
            </a>

            <div className="flt" style={{ marginBottom: 22 }}>
              {kinds.map((k) => <button key={k} className={'fchip nm-rise-sm' + (kind === k ? ' on' : '')} onClick={() => setKind(k)}>{k}</button>)}
            </div>

            <div className="feed">
              {feed.map((p, i) => <Reveal key={p.id} delay={i * 60}><PostCard p={p} /></Reveal>)}
              {feed.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>热门话题</h4>
              {D.topics.map((tp) => (
                <a key={tp.tag} className="topic" href="#">
                  <span className="t">{tp.tag}</span>
                  <span className="c">{tp.count} 帖</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' }}>无论想法、作品还是疑问，社区都在认真听。</p>
              <a href="#new_post" className="btn btn-accent" style={{ width: '100%', justifyContent: 'center' }}>立即发帖 <Arrow /></a>
            </div>
          </aside>
        </div>
      </div>
    </React.Fragment>
  );
}

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