/* page-post-detail.jsx — 三级页：帖子详情 + 评论 thread */

function PostDetailPage({ routeParam }) {
  const db = useKadaDB();
  const p = db.getPost(routeParam) || db.posts().find((x, i) => String(i) === String(routeParam));
  const [draft, setDraft] = React.useState('');
  if (!p) {
    return <div className="kc dview"><a className="back" href="#post"><Arrow size={14} />返回</a><div className="panel nm-rise"><p>没有找到这条帖子。</p></div></div>;
  }
  const liked = db.isPostLiked(p.id);
  const cmts = p.comments;
  const toggleLike = () => db.toggleLikePost(p.id);
  const following = db.isFollowing(p.handle);
  const send = (e) => { e.preventDefault(); const v = draft.trim(); if (!v) return; db.addComment(p.id, v); setDraft(''); };

  return (
    <div className="kc dview">
      <a className="back" href="#post"><Arrow size={14} />返回社区发帖</a>
      <div className="dcols">
        <div className="dmain">
          <article className="panel thread-post nm-rise">
            <div className="phead">
              <Avatar name={p.author} hue={p.hue} />
              <span style={{ flex: 1, minWidth: 0 }}><div className="n">{p.author}</div><div className="h">{p.handle} · {p.time}</div></span>
              <span className="kind">{p.kind}</span>
            </div>
            <h1>{p.title}</h1>
            <div className="body">{p.body}</div>
            <div className="body" style={{ marginTop: -8 }}>欢迎在评论区分享你的方案与经验，我们会持续更新这条帖子的进展。如果觉得有用，点个赞让更多人看到 👇</div>
            <div className="taglist">{p.tags.map((t) => <span className="ptag" key={t}>{t}</span>)}</div>
            <div className="pfoot">
              <span className="met" onClick={toggleLike} style={{ color: liked ? 'var(--accent)' : undefined }}><IcHeart style={{ fill: liked ? 'var(--accent)' : 'none' }} />{p.likes}</span>
              <span className="met"><IcChat />{cmts.length}</span>
              <span className="met share">分享</span>
            </div>
          </article>

          <div className="panel comments nm-rise">
            <h2>{cmts.length} 条评论</h2>
            <form className="reply" onSubmit={send} style={{ marginBottom: 8 }}>
              <Avatar name="你" hue={205} size={40} />
              <div className="field">
                <input className="input" placeholder="友善地回复…" value={draft} onChange={(e) => setDraft(e.target.value)} />
                <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 12 }}>
                  <button className="btn btn-accent" type="submit" style={{ padding: '10px 22px', fontSize: 14 }}>发布评论</button>
                </div>
              </div>
            </form>
            <div style={{ marginTop: 10 }}>
              {cmts.map((c, i) => (
                <div className="cmt" key={i}>
                  <Avatar name={c.name} hue={c.hue} size={40} />
                  <div className="cbody">
                    <div className="chead"><span className="n">{c.name}</span><span className="t">{c.t}</span></div>
                    <div className="ctext">{c.text}</div>
                    <span className="clike"><IcHeart />赞</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <aside className="dside">
          <div className="panel nm-rise">
            <div style={{ display: 'flex', alignItems: 'center', gap: 13, marginBottom: 16 }}>
              <Avatar name={p.author} hue={p.hue} size={46} />
              <div><div style={{ fontSize: 15, fontWeight: 600, color: 'var(--ink)' }}>{p.author}</div><div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink-faint)' }}>{p.handle}</div></div>
            </div>
            <p className="muted" style={{ fontSize: 13.5, lineHeight: 1.6, margin: '0 0 18px' }}>社区主理人 · 乐于分享 {p.tags[0] || '#AI'} 相关的实践与思考。</p>
            <button className="btn btn-accent btn-full" onClick={() => db.toggleFollow(p.handle)} style={following ? { background: 'var(--bg-sink)', color: 'var(--ink)' } : undefined}>{following ? '已关注' : '关注 TA'}</button>
          </div>
          <div className="panel nm-rise">
            <h2 style={{ fontSize: 16 }}>相关话题</h2>
            <div className="taglist">{KSITE.posts.topics.slice(0, 5).map((t) => <span className="ptag" key={t.tag}>{t.tag}</span>)}</div>
          </div>
        </aside>
      </div>
    </div>
  );
}

(window.__KADA_PAGES = window.__KADA_PAGES || {}).post_item = { Comp: PostDetailPage, active: 'post' };