/* hub-feed.jsx — bảng tin (ActivityCard + ActivityFeed nhóm theo ngày) + social thật */
(function () {
  const { useState, useEffect } = React;
  const Icon = window.HubIcon;

  function ActivityCard({ a, social }) {
    const t = TYPE[a.type] || TYPE.other;
    const Ico = Icon[t.ic] || Icon.dots;
    const me = window.__hubUser || "Bạn";
    const avOf = (nm) => (window.__hubAvatars || {})[nm] || null;
    // ưu tiên hồ sơ SỐNG theo actor_id (đồng bộ khi đổi tên/ảnh); fallback tên cứng đã ghi
    const live = (a.actorId && (window.__hubMembersById || {})[a.actorId]) || null;
    const actorName = (live && live.name) || a.actor;
    const actorAv = (live && live.avatar_url) || avOf(a.actor);
    const [liked, setLiked] = useState(!!(social && social.liked) || a.liked);
    const [hearts, setHearts] = useState(social && social.count != null ? social.count : a.reactions.heart);
    const [open, setOpen] = useState(false);
    const [comments, setComments] = useState(social && social.comments && social.comments.length ? social.comments : a.comments);
    const [draft, setDraft] = useState("");

    useEffect(() => {
      if (social) { setLiked(!!social.liked); setHearts(social.count || 0); if (social.comments) setComments(social.comments); }
    }, [social]);

    const toggleLike = async () => {
      const want = !liked;
      setLiked(want); setHearts(n => want ? n + 1 : Math.max(0, n - 1));
      if (window.cdeHub) { try { const c = await window.cdeHub.toggleReaction(a.id, want); setHearts(c); } catch (e) {} }
    };
    const addComment = async () => {
      const txt = draft.trim(); if (!txt) return;
      setComments(c => [...c, { who: me, text: txt }]); setDraft("");
      if (window.cdeHub) { try { await window.cdeHub.addComment(a.id, txt, me); } catch (e) {} }
    };

    return (
      <div className="acard fu">
        <Avatar name={actorName} size={40} url={actorAv} />
        <div className="acard-main">
          <div className="acard-top">
            <span className="actor">{actorName}</span>
            <span className="tbadge" style={{ background: tint(t.c), color: t.c }}><Ico size={13} /> {t.label}</span>
            <span className="atime">{a.time}</span>
          </div>
          <div className="averb">
            {a.verb} {a.target && <span className="chip-obj"><Icon.doc size={12} /> {a.target}</span>}{" "}
            <span className="chip-proj"><span className="d" style={{ background: a.projectDot || "var(--ink-3)" }} />{a.project}</span>
          </div>
          <div className="acard-acts">
            <button className={"react " + (liked ? "on" : "")} onClick={toggleLike}>
              <span className="hx">{liked ? "❤" : "♡"}</span> {hearts > 0 && <span className="tnum">{hearts}</span>}
            </button>
            <button className="react" onClick={() => setOpen(o => !o)}>💬 {comments.length > 0 && <span className="tnum">{comments.length}</span>}</button>
          </div>
          {(open || comments.length > 0) && (
            <div className="comments">
              {comments.map((c, i) => (
                <div className="cmt" key={i}>
                  <Avatar name={c.who} size={28} url={avOf(c.who)} />
                  <div className="cmt-body"><div className="cmt-who">{c.who}</div><div className="cmt-txt">{c.text}</div></div>
                </div>
              ))}
              {open && (
                <div className="cmt-input">
                  <Avatar name={me} size={28} url={avOf(me)} />
                  <input className="cmt-field" placeholder="Viết bình luận…" value={draft}
                    onChange={(e) => setDraft(e.target.value)} onKeyDown={(e) => e.key === "Enter" && addComment()} />
                  <button className="cmt-send" onClick={addComment}><Icon.send size={15} /></button>
                </div>
              )}
            </div>
          )}
        </div>
      </div>
    );
  }

  function ActivityFeed({ items, me }) {
    const [filter, setFilter] = useState("all");
    const [social, setSocial] = useState({});
    useEffect(() => {
      const keys = (items || []).map(a => a.id);
      if (window.cdeHub && keys.length) window.cdeHub.socialFor(keys).then(m => setSocial(m || {})).catch(() => {});
    }, [items]);
    const days = ["today", "yesterday", "earlier"];
    const list = (items || []).filter(a =>
      filter === "all" ||
      (filter === "mine" && a.actor === me) ||
      (filter === "mentions" && a.comments.some(c => c.who === me)));
    return (
      <div>
        <div className="feed-bar">
          <div className="feed-title">Bảng tin công việc</div>
          <div className="feed-tabs">
            {[["all", "Tất cả"], ["mine", "Của tôi"], ["mentions", "Nhắc đến"]].map(([k, l]) => (
              <button key={k} className={filter === k ? "active" : ""} onClick={() => setFilter(k)}>{l}</button>
            ))}
          </div>
        </div>
        {days.map(d => {
          const dl = list.filter(a => a.day === d);
          if (!dl.length) return null;
          return (
            <div key={d}>
              <div className="day-head"><span className="t">{DAY_LABEL[d]}</span><span className="ln" /></div>
              {dl.map(a => <ActivityCard key={a.id} a={a} social={social[a.id]} />)}
            </div>
          );
        })}
        {list.length === 0 && (
          <div className="feed-empty2"><Icon.checkCircle size={30} /><div>Không có hoạt động phù hợp</div></div>
        )}
      </div>
    );
  }

  window.ActivityCard = ActivityCard;
  window.ActivityFeed = ActivityFeed;
})();