// Workspace · Feed tab — Facebook-style company feed
function FeedTab() {
  const { useState, useEffect } = React;
  const [posts, setPosts] = useState(D.feed);
  const [draft, setDraft] = useState("");

  useEffect(() => { D.feed = posts; }, [posts]);

  const me = D.user.name;

  const publish = () => {
    const v = draft.trim();
    if (!v) { notify(T("feed.errWriteSomething")); return; }
    setPosts((ps) => [{ id: "P-09", who: me, role: D.user.role, time: "Just now", text: v, likes: [], comments: [] }, ...ps]);
    setDraft("");
    notify(T("feed.posted"));
  };

  const toggleLike = (id) => {
    setPosts((ps) => ps.map((p) => p.id === id
      ? { ...p, likes: p.likes.includes(me) ? p.likes.filter((l) => l !== me) : [...p.likes, me] }
      : p));
  };

  const addComment = (id, text) => {
    setPosts((ps) => ps.map((p) => p.id === id
      ? { ...p, comments: [...p.comments, { who: me, time: "Just now", text }] }
      : p));
  };

  return (
    <div className="feed">
      {/* composer */}
      <section className="card feed-composer">
        <div className="feed-comp-top">
          <Avatar name={me} size={38} />
          <textarea className="input area" rows="2" placeholder={T("feed.composerPlaceholder")}
            value={draft} onChange={(e) => setDraft(e.target.value)}
            onKeyDown={(e) => { if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) publish(); }}></textarea>
        </div>
        <div className="feed-comp-foot">
          <span className="dim" style={{ fontSize: 12 }}>{T("feed.visibleToEveryone", { company: T("app.brand") })}</span>
          <Btn variant="primary" icon="send" onClick={publish}>{T("feed.post")}</Btn>
        </div>
      </section>

      {posts.map((p) => <FeedPost key={p.id} post={p} me={me} onLike={() => toggleLike(p.id)} onComment={(t) => addComment(p.id, t)} />)}
    </div>
  );
}

function FeedPost({ post, me, onLike, onComment }) {
  const { useState } = React;
  const [showComments, setShowComments] = useState(post.comments.length > 0);
  const [draft, setDraft] = useState("");
  const liked = post.likes.includes(me);

  const submit = () => {
    const v = draft.trim();
    if (!v) return;
    onComment(v);
    setDraft("");
    setShowComments(true);
  };

  return (
    <article className="card feed-post">
      <header className="feed-head">
        <Avatar name={post.who} size={40} />
        <div className="feed-id">
          <b>{post.who}</b>
          <small>{TV(post.role)} · {TV(post.time)}</small>
        </div>
      </header>
      <p className="feed-text">{post.text}</p>

      {(post.likes.length > 0 || post.comments.length > 0) ? (
        <div className="feed-counts">
          {post.likes.length > 0 ? (
            <span title={post.likes.join(", ")}><i className="feed-heart">♥</i> {post.likes.length}</span>
          ) : <span></span>}
          {post.comments.length > 0 ? (
            <button className="feed-ccount" onClick={() => setShowComments((s) => !s)}>{TP("feed.commentCount", post.comments.length)}</button>
          ) : null}
        </div>
      ) : null}

      <div className="feed-actions">
        <button className={"feed-act" + (liked ? " on" : "")} onClick={onLike}>
          <span className="feed-heart">{liked ? "♥" : "♡"}</span> {liked ? T("feed.liked") : T("feed.like")}
        </button>
        <button className="feed-act" onClick={() => setShowComments((s) => !s)}>
          <Icon name="send" size={14} /> {T("feed.comment")}
        </button>
      </div>

      {showComments ? (
        <div className="feed-comments">
          {post.comments.map((c, i) => (
            <div key={i} className="feed-comment">
              <Avatar name={c.who} size={28} />
              <div className="feed-cbubble">
                <b>{c.who}</b>
                <span>{c.text}</span>
                <small>{TV(c.time)}</small>
              </div>
            </div>
          ))}
          <div className="feed-comment">
            <Avatar name={me} size={28} />
            <input className="input feed-cinput" placeholder={T("feed.writeComment")} value={draft}
              onChange={(e) => setDraft(e.target.value)}
              onKeyDown={(e) => { if (e.key === "Enter") submit(); }} />
          </div>
        </div>
      ) : null}
    </article>
  );
}
window.FeedTab = FeedTab;