/* Artist public profile. Header has 3 layout variants; works grid shared below. */

function ProfilePage({ artist, data, navigate, addToCart, cart, dark, profileLayout }) {
const [following, setFollowing] = React.useState(false);
  const inCart = (id) => cart.some((c) => c.id === id);
  if (!artist) {
    return (
      <div className="profile">
        <div className="no-results"><h3>Artist not found.</h3>
          <button className="btn-ghost" onClick={() => navigate({ name: "directory" })}>Back to artists</button>
        </div>
      </div>
    );
  }
  const related = data.artists.filter((a) => a.field === artist.field && a.id !== artist.id).slice(0, 4);

  const Stats = (
    <div className="profile-stats">
      <div className="pstat"><span className="ps-num">{artist.works.length}</span><span className="ps-lab">Works</span></div>
      <div className="pstat"><span className="ps-num">{artist.worksForSale}</span><span className="ps-lab">For sale</span></div>
      {artist.country && <div className="pstat"><span className="ps-num">{artist.flag}</span><span className="ps-lab">{artist.country}</span></div>}
    </div>
  );

  const FollowBtns = (
    <React.Fragment>
      <div className="profile-actions">
        <button className={"btn-primary" + (following ? " following" : "")} onClick={() => setFollowing((f) => !f)}>
          {following ? "Following ✓" : "Follow"}
        </button>
        <button className="btn-ghost" onClick={() => navigate({ name: "shop", artist: artist.id })}>
          Shop works
        </button>
      </div>
      <SocialLinks artist={artist} />
    </React.Fragment>
  );

  // ---- header variants ----
  let header;
  if (profileLayout === "magazine") {
    header = (
      <section className="prof-mag">
        <div className="prof-mag-top">
          <Eyebrow>{artist.field} · {artist.flag} {artist.city}, {artist.country}</Eyebrow>
          <h1 className="prof-mag-name">{artist.name}</h1>
        </div>
        <div className="prof-mag-grid">
          <div className="prof-mag-portrait">
            <Portrait artist={artist} dark={dark} style={{ aspectRatio: "4 / 5" }} />
          </div>
          <div className="prof-mag-info">
            <p className="prof-mag-tag">"{artist.tagline}"</p>
            <p className="prof-bio">{artist.bio}</p>
            {Stats}
            {FollowBtns}
          </div>
        </div>
      </section>
    );
  } else if (profileLayout === "split") {
    header = (
      <section className="prof-split">
        <div className="prof-split-side">
          <div className="prof-split-portrait">
            <Portrait artist={artist} dark={dark} style={{ aspectRatio: "1 / 1" }} round />
          </div>
          <h1 className="prof-split-name">{artist.name}</h1>
          <Eyebrow>{artist.field}</Eyebrow>
          <p className="prof-loc">{artist.flag} {artist.city}{artist.city && artist.country ? ", " : ""}{artist.country}</p>
          <p className="prof-mag-tag">"{artist.tagline}"</p>
          {Stats}
          {FollowBtns}
          <p className="prof-bio">{artist.bio}</p>
        </div>
      </section>
    );
  } else {
    // classic
    header = (
      <section className="prof-classic">
        <div className="prof-classic-portrait">
          <Portrait artist={artist} dark={dark} style={{ aspectRatio: "4 / 5" }} />
        </div>
        <div className="prof-classic-info">
          <Eyebrow>{artist.field} · {artist.style}</Eyebrow>
          <h1 className="prof-classic-name">{artist.name}</h1>
          <p className="prof-loc">{artist.flag} {artist.city}{artist.city && artist.country ? ", " : ""}{artist.country}</p>
          <p className="prof-mag-tag">"{artist.tagline}"</p>
          <p className="prof-bio">{artist.bio}</p>
          {Stats}
          {FollowBtns}
        </div>
      </section>
    );
  }

  return (
    <div className={"profile profile-" + (profileLayout || "classic")}>
      <button className="back-link" onClick={() => navigate({ name: "directory" })}>
        <ArrowIcon dir="left" /> All artists
      </button>

      {header}

      <section className="prof-works">
        <div className="section-head">
          <h2 className="section-title">Selected <span className="title-num">works</span></h2>
          <span className="section-link static">{artist.works.length} pieces</span>
        </div>
        <div className="work-grid">
          {artist.works.map((w) => (
            <WorkCard
              key={w.id}
              work={Object.assign({ artist }, w)}
              navigate={navigate}
              addToCart={addToCart}
              inCart={inCart(w.id)}
              dark={dark}
              showArtist={false}
            />
          ))}
        </div>
      </section>

      {related.length > 0 && (
        <section className="prof-related alt-band">
          <div className="section-head">
            <h2 className="section-title">More in <span className="title-num">{artist.field}</span></h2>
            <button className="section-link" onClick={() => navigate({ name: "directory", field: artist.field })}>
              See all <ArrowIcon />
            </button>
          </div>
          <div className="artist-grid">
            {related.map((a) => (
              <ArtistCard key={a.id} artist={a} navigate={navigate} dark={dark} />
            ))}
          </div>
        </section>
      )}
    </div>
  );
}

Object.assign(window, { ProfilePage });