const PROFILE_TABS = [
  { id: "posts", label: "Posts" },
  { id: "writing", label: "Stories" },
];

function Profile({ sub, go, posts }) {
  const me = (typeof window !== "undefined" && window.__USER__) || null;
  const people = (typeof window !== "undefined" && window.__DATA__ && window.__DATA__.people) || [];
  let person = null, isMe = false, tab = "posts";
  if (sub && sub[0] === "u" && /^u\d+$/.test(sub)) {
    const pid = Number(sub.slice(1));
    person = people.find(p => String(p.id) === String(pid)) || null;
    isMe = !!(me && person && String(me.id) === String(person.id));
  } else {
    tab = sub || "posts";
    isMe = true;
    if (me) {
      const found = people.find(p => String(p.id) === String(me.id));
      person = found || { id: me.id, name: me.name || "You", handle: "@" + String(me.email || "you").split("@")[0], joined: "", posts: 0, articles: 0 };
    }
  }
  if (!person) {
    return (
      <div className="view profile">
        <div className="shell">
          <div className="pf-empty" style={{ marginTop: 80 }}>
            <Icon name="users" size={28} />
            <b className="serif">{me ? "Member not found" : "Sign in to view profiles"}</b>
            <p>{me ? "This member may no longer be here." : "Log in to see your posts and stories."}</p>
            <button className="btn btn-primary" onClick={() => go("community")}>Back to community</button>
          </div>
        </div>
      </div>
    );
  }
  const allPosts = (posts || POSTS);
  const myThreads = allPosts.filter(p => (person.id && String(p.authorId) === String(person.id)) || p.author === person.name);
  const myWriting = ARTICLES.filter(a => a.author === person.name);
  return (
    <div className="view profile">
      <div className="pf-banner">
        <Cover seed={person.handle + "-banner"} aspect="auto" radius="0" className="pf-cover" />
      </div>
      <div className="shell">
        <div className="pf-head">
          <div className="pf-ava"><Avatar seed={person.handle} label={person.name} size={120} ring={false} /></div>
          <div className="pf-actions">
            {isMe
              ? <button className="btn btn-ghost" onClick={() => go("settings")}><Icon name="edit" size={16} /> Edit profile</button>
              : <React.Fragment><FollowButton id={person.id} /><button className="btn btn-soft" onClick={() => go("inbox/u" + person.id)}><Icon name="chat" size={16} /> Message</button><button className="btn btn-soft" onClick={() => go("people")}><Icon name="arrowLeft" size={16} /> All members</button></React.Fragment>}
          </div>
          <div className="pf-id">
            <h1 className="serif">{person.name}{vTick(person.name)}</h1>
            <span className="pf-handle">{person.handle}</span>
          </div>
          <div className="pf-meta">
            <span><b>{myThreads.length}</b> posts</span>
            <span><b>{myWriting.length}</b> stories</span><span><b>{person.followers || 0}</b> followers</span>
            {person.joined && <span className="pf-joined"><Icon name="calendar" size={14} /> Joined {person.joined}</span>}
          </div>
        </div>
        <div className="pf-tabs">
          {PROFILE_TABS.map(tb => (
            <button key={tb.id} className="pf-tab" data-on={tab === tb.id}
              onClick={() => go((sub && sub[0] === "u") ? ("profile/" + sub) : (tb.id === "posts" ? "profile" : "profile/" + tb.id))}>
              {tb.label}
              <span className="pf-tab-n">{tb.id === "posts" ? myThreads.length : myWriting.length}</span>
            </button>
          ))}
        </div>
        <div className="pf-body" key={tab}>
          {tab === "writing" ? (
            myWriting.length ? (
              <div className="art-grid">
                {myWriting.map((a, i) => (
                  <article key={a.id} className="art-card" style={{ "--i": i }} onClick={() => go("read/" + a.id)}>
                    <Cover seed={a.id} aspect="16 / 10" radius="12px" className="art-cover" />
                    <div className="art-body">
                      <span className="kicker">{a.kicker} {a.date}</span>
                      <h3 className="art-title serif">{a.title}</h3>
                      <p className="art-dek">{a.dek}</p>
                    </div>
                  </article>
                ))}
              </div>
            ) : (
              <div className="pf-empty">
                <Icon name="book" size={28} />
                <b className="serif">No stories yet</b>
                <p>{isMe ? "Share your first story with the diaspora." : person.name + " has not published a story yet."}</p>
                {isMe && <button className="btn btn-primary" onClick={() => go("read")}>Write a story</button>}
              </div>
            )
          ) : (
            myThreads.length ? (
              <div className="post-list pf-posts">
                {myThreads.map((p, i) => <PostRow key={p.id} post={p} i={i} onOpen={(id) => go("community/" + id)} />)}
              </div>
            ) : (
              <div className="pf-empty">
                <Icon name="chat" size={28} />
                <b className="serif">No posts yet</b>
                <p>{isMe ? "Start a thread and get the conversation going." : person.name + " has not posted yet."}</p>
                {isMe && <button className="btn btn-primary" onClick={() => go("compose")}>New post</button>}
              </div>
            )
          )}
        </div>
      </div>
    </div>
  );
}
window.Profile = Profile;