// ============ ACTIVITY TAB ============
// Chronological feed of every action your agents took today, with filter chips.

function ActivityTab({ agents, activity }) {
  const feed = activity || ACTIVITY;
  const byId = Object.fromEntries(agents.map((a) => [a.id, a]));
  const [filter, setFilter] = useState("all");
  const [thumbs, setThumbs] = useState({}); // { [eventId]: "up" | "down" | null }
  const filtered = filter === "all" ? feed : feed.filter((e) => e.agent === filter);
  const setThumb = (id, kind, agentName) => {
    setThumbs((t) => {
      const next = t[id] === kind ? null : kind;
      return { ...t, [id]: next };
    });
    if (thumbs[id] !== kind) {
      window.toast(kind === "up" ? "Thanks — noted as good" : `${agentName} will adjust`, kind === "up" ? "good" : "warn");
    }
  };

  return (
    <div className="act-page">
      <div className="act-filters">
        <button className={`act-chip ${filter === "all" ? "is-on" : ""}`} onClick={() => setFilter("all")}>
          All <span className="act-chip-c">{feed.length}</span>
        </button>
        {agents.map((a) => (
          <button
            key={a.id}
            className={`act-chip ${filter === a.id ? "is-on" : ""}`}
            onClick={() => setFilter(a.id)}
            style={{ "--chip-c": a.palette.skin }}
          >
            <span className="act-chip-dot" style={{ background: a.palette.skin }} />
            {a.name}
            <span className="act-chip-c">{feed.filter(e => e.agent === a.id).length}</span>
          </button>
        ))}
      </div>

      <div className="act-feed">
        {filtered.length === 0 ? (
          <div className="kn-empty">No activity yet — your agents' actions will show up here as they work.</div>
        ) : (
          <div className="act-day">Today</div>
        )}
        {filtered.map((e) => {
          const a = byId[e.agent];
          if (!a) return null;
          return (
            <div key={e.id} className="act-row">
              <div className="act-time">{e.t}</div>
              <div className={`act-dot act-dot-${e.k}`} />
              <div className="act-agent" style={{ "--ag": a.palette.skin }}>
                <span className="act-agent-mark" style={{ background: a.palette.skin }}>{a.name[0]}</span>
                <span>{a.name}</span>
              </div>
              <div className="act-text">{e.text}</div>
              <div className="act-actions">
                <button
                  className={`act-thumb ${thumbs[e.id] === "up" ? "is-on" : ""}`}
                  title="Good"
                  onClick={() => setThumb(e.id, "up", a.name)}
                >
                  <svg width="12" height="12" viewBox="0 0 12 12"><path d="M3 6 L 3 11 L 9 11 L 10.5 6.5 L 7 6.5 L 7.5 3.5 Q 7.5 2 6.5 2 L 5 6 L 3 6 Z" stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinejoin="round"/></svg>
                </button>
                <button
                  className={`act-thumb act-thumb-down ${thumbs[e.id] === "down" ? "is-on" : ""}`}
                  title="Needs work"
                  onClick={() => setThumb(e.id, "down", a.name)}
                >
                  <svg width="12" height="12" viewBox="0 0 12 12"><path d="M3 6 L 3 1 L 9 1 L 10.5 5.5 L 7 5.5 L 7.5 8.5 Q 7.5 10 6.5 10 L 5 6 L 3 6 Z" stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinejoin="round"/></svg>
                </button>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

window.ActivityTab = ActivityTab;