/* ============================================================
   COMMONS — Profile view
   ============================================================ */

const ME = {
  name: "You",
  handle: "@you",
  loc: "Worldwide",
  bio: "Runner, occasional potter, and chronic over-RSVP-er. I host the first-Wednesday coffee and write about the small machinery of living somewhere.",
  joined: "Joined March 2023",
  stats: { hosted: 6, followers: "1.2k", following: 318 },
  badges: ["Top host", "Early member", "100 events attended"],
};

const PROFILE_TABS = [
  { id: "hosting", label: "Hosting" },
  { id: "posts", label: "Posts" },
  { id: "writing", label: "Writing" },
  { id: "saved", label: "Saved" },
];

function Profile({ sub, go, favs, toggleFav, posts }) {
  const tab = sub || "hosting";
  const hosted = EVENTS.filter(e => ["e5", "e1", "e7"].includes(e.id));
  const saved = EVENTS.filter(e => favs.has(e.id));
  const mine = (posts || POSTS).filter(p => p.author === "you");
  const myPosts = [...mine, ...POSTS.slice(0, 3)];
  const myWriting = ARTICLES.filter(a => ["a2", "a5"].includes(a.id));

  return (
    <div className="view profile">
      <div className="pf-banner">
        <Cover seed="you-banner" aspect="auto" radius="0" className="pf-cover" />
      </div>
      <div className="shell">
        <div className="pf-head">
          <div className="pf-ava"><Avatar seed="you" label="You" size={120} ring={false} /></div>
          <div className="pf-actions">
            <button className="btn btn-soft"><Icon name="share" size={16} /> Share</button>
            <button className="btn btn-ghost" onClick={() => go("settings")}><Icon name="edit" size={16} /> Edit profile</button>
          </div>
          <div className="pf-id">
            <h1 className="serif">{ME.name}</h1>
            <span className="pf-handle">{ME.handle} · {ME.loc}</span>
          </div>
          <p className="pf-bio">{ME.bio}</p>
          <div className="pf-meta">
            <span><b>{ME.stats.hosted}</b> hosted</span>
            <button className="pf-stat"><b>{ME.stats.followers}</b> followers</button>
            <button className="pf-stat"><b>{ME.stats.following}</b> following</button>
            <span className="pf-joined"><Icon name="calendar" size={14} /> {ME.joined}</span>
          </div>
          <div className="pf-badges">
            {ME.badges.map(b => <span key={b} className="pf-badge"><Icon name="star" size={13} /> {b}</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(tb.id === "hosting" ? "profile" : "profile/" + tb.id)}>
              {tb.label}
              <span className="pf-tab-n">{
                tb.id === "hosting" ? hosted.length :
                tb.id === "posts" ? myPosts.length :
                tb.id === "writing" ? myWriting.length : saved.length
              }</span>
            </button>
          ))}
        </div>

        <div className="pf-body" key={tab}>
          {tab === "hosting" && (
            <div className="ev-grid">
              {hosted.map((e, i) => <EventCard key={e.id} ev={e} i={i} onOpen={(id) => go("discover/" + id)} fav={favs.has(e.id)} toggleFav={toggleFav} />)}
            </div>
          )}
          {tab === "posts" && (
            <div className="post-list pf-posts">
              {myPosts.map((p, i) => <PostRow key={p.id} post={p} i={i} onOpen={(id) => go("community/" + id)} />)}
            </div>
          )}
          {tab === "writing" && (
            <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} · Published {a.date}</span>
                    <h3 className="art-title serif">{a.title}</h3>
                    <p className="art-dek">{a.dek}</p>
                  </div>
                </article>
              ))}
              <button className="pf-draft" onClick={() => go("read")}>
                <Icon name="plus" size={22} /><b className="serif">Start a new draft</b><span>Your editor is one click away.</span>
              </button>
            </div>
          )}
          {tab === "saved" && (
            saved.length ? (
              <div className="ev-grid">
                {saved.map((e, i) => <EventCard key={e.id} ev={e} i={i} onOpen={(id) => go("discover/" + id)} fav={favs.has(e.id)} toggleFav={toggleFav} />)}
              </div>
            ) : (
              <div className="pf-empty">
                <Icon name="bookmark" size={28} />
                <b className="serif">Nothing saved yet</b>
                <p>Tap the heart on any event to keep it here for later.</p>
                <button className="btn btn-primary" onClick={() => go("discover")}>Browse events</button>
              </div>
            )
          )}
        </div>
      </div>
    </div>
  );
}

window.Profile = Profile;