/* P.E.S.T Web App — public/guest board (no login). Shows the Core's most-favored projects. */
function Guest({ onExit }) {
  // Public board data: most-pinned projects + most-watched tokens across all members.
  // Fetched from the no-auth publicBoard endpoint (the store is empty when not logged in).
  const [board, setBoard] = useState({ projects: [], tokens: [], loaded: false });
  const [qa, setQa] = useState(null);

  useEffect(() => {
    let alive = true;
    window.PEST_APP.api.publicBoard()
      .then((r) => { if (alive) setBoard({ projects: r.projects || [], tokens: r.tokens || [], loaded: true }); })
      .catch(() => { if (alive) setBoard({ projects: [], tokens: [], loaded: true }); });
    return () => { alive = false; };
  }, []);

  const ranked = board.projects.slice(0, 8);
  const pos = window.orbitPositions(ranked.length);

  return (
    <div>
      <div className="app-bg"></div>
      <div className="app-grid"></div>

      <header className="guest-top">
        <div className="tb-brand">
          <img src="assets/pest-emblem.png" alt="P.E.S.T" />
          <span className="wm grad-text">P.E.S.T</span>
        </div>
        <button className="btn btn-sm btn-primary" onClick={onExit}><window.AIcon.key /> Member login</button>
      </header>

      <div className="guest-wrap">
        <div className="dash-greet">
          <div>
            <div className="eyebrow">Public board</div>
            <h1>The Core's <span className="grad-text">favorites</span></h1>
          </div>
          <div className="dash-clock"><b>{ranked.length}</b>most-favored projects</div>
        </div>

        <div className="orbit-stage">
          <div className="orbit">
            <div className="orbit-ring"></div>
            <div className="orbit-ring r2"></div>

            <div className="orbit-core">
              <div className="glow"></div>
              <div className="ring"></div>
              <div className="pfp" style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
                <img className="show" src="assets/pest-emblem.png" alt="P.E.S.T" style={{ objectFit: "contain", padding: "22%" }} />
              </div>
              <span className="uname">The Hive</span>
            </div>

            {ranked.map((p, i) => (
              <div key={p.id} className="orbit-node" style={{ left: pos[i].x + "%", top: pos[i].y + "%" }} onClick={() => setQa(p)}>
                <LogoTile project={p} className="nlogo" />
                <span className="nlabel">{p.name}</span>
              </div>
            ))}
          </div>
        </div>

        <window.GuestTokenStrip tokens={board.tokens} />

        <div className="card guest-cta cut" style={{ position: "relative" }}>
          <span className="guest-badge">Locked</span>
          <h2>Want your own dashboard?</h2>
          <p>This is a glimpse of the hive. Build your personal node, pin your projects and share referrals — <b style={{ color: "var(--tx)" }}>earn your rank among the Core Members</b>.</p>
          <div style={{ display: "flex", gap: 10, justifyContent: "center", flexWrap: "wrap" }}>
            <a className="btn btn-primary" href="https://discord.gg/pestdao" target="_blank" rel="noreferrer"><window.AIcon.discord /> Join the hive</a>
            <button className="btn" onClick={onExit}><window.AIcon.key /> I have access</button>
          </div>
        </div>
      </div>

      {qa && <window.QuickAccessGuest project={qa} onClose={() => setQa(null)} />}
    </div>
  );
}

/* read-only quick access for guests (no pin/unpin) */
function QuickAccessGuest({ project, onClose }) {
  useEffect(() => {
    const k = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", k);
    return () => window.removeEventListener("keydown", k);
  }, []);
  const links = Object.keys(project.links || {}).filter((k) => project.links[k]);
  return (
    <div className="modal-back" onClick={onClose}>
      <div className="modal" style={{ width: "min(420px,100%)" }} onClick={(e) => e.stopPropagation()}>
        <div className="modal-body">
          <div className="qa-pop">
            <div className="qa-head">
              <LogoTile project={project} />
              <div><h3>{project.name}</h3><div className="p-cats">{((project.categories && project.categories.length) ? project.categories : (project.category ? [project.category] : [])).map((c) => <span key={c} className={"tag cat-" + c.replace(/[^A-Za-z0-9]/g, "")}>{c}</span>)}</div></div>
            </div>
            <div className="qa-links">
              {links.map((k) => { const meta = window.A_SOCIAL[k]; const I = meta.icon; return <a className="pill" key={k} href={project.links[k]} target="_blank" rel="noreferrer"><I /> {meta.label}</a>; })}
            </div>
            {project.links.website && <a className="btn btn-primary btn-block" href={project.links.website} target="_blank" rel="noreferrer" style={{ marginTop: 14 }}><window.AIcon.external /> Open</a>}
          </div>
        </div>
      </div>
    </div>
  );
}

window.Guest = Guest;
window.QuickAccessGuest = QuickAccessGuest;