function Profile({ sub, go, posts }) {
  const me = (typeof window !== "undefined" && window.__USER__) || null;
  const people = (typeof window !== "undefined" && window.__DATA__ && window.__DATA__.people) || [];
  const myComms = (typeof window !== "undefined" && window.__DATA__ && window.__DATA__.myComms) || [];
  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 (!me && sub && sub[0] === "u") person = null;
  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 see members"}</b>
            <p>{me ? "This member may no longer be here." : "Profiles and members are only visible once you log in. Stories and community posts stay open to everyone."}</p>
            {me
              ? <button className="btn btn-primary" onClick={() => go("community")}>Back to community</button>
              : <button className="btn btn-primary" onClick={() => document.dispatchEvent(new CustomEvent("ipanjab:auth"))}>Log in</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);
  const myCommObjs = (typeof COMMUNITIES !== "undefined" ? COMMUNITIES : []).filter(c => myComms.indexOf(c.name) >= 0);
  const tabs = [{ id: "posts", label: "Posts", n: myThreads.length }, { id: "writing", label: "Stories", n: myWriting.length }];
  if (isMe) tabs.push({ id: "communities", label: "Communities", n: myCommObjs.length });
  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></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">
          {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.n}</span>
            </button>
          ))}
        </div>
        <div className="pf-body" key={tab}>
          {tab === "communities" ? (
            myCommObjs.length ? (
              <div className="people-grid">
                {myCommObjs.map((c, i) => (
                  <button key={c.id} className="person-card" style={{ "--i": i }} onClick={() => go("c/" + c.name)}>
                    <span className="comm-badge" style={{ background: c.color }}>{c.name[0]}</span>
                    <div className="person-main">
                      <b>{c.name}</b>
                      <span className="person-handle">{c.members} {Number(c.members) === 1 ? "member" : "members"}</span>
                      <span className="person-meta">{c.desc}</span>
                    </div>
                    <Icon name="arrowRight" size={16} className="person-go" />
                  </button>
                ))}
              </div>
            ) : (
              <div className="pf-empty">
                <Icon name="users" size={28} />
                <b className="serif">No communities yet</b>
                <p>Join a community and it will show up here.</p>
                <button className="btn btn-primary" onClick={() => go("community")}>Browse communities</button>
              </div>
            )
          ) : 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("write")}>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;