/* shell.jsx — signed-in top bar with url chip + account menu. */
const { useState: useStateShell } = React;

function AppHeader({ account, nav, onSignOut, crumb, lang, setLang }) {
  const [open, setOpen] = useStateShell(false);
  return (
    <header className="topbar">
      <div className="wrap topbar-inner">
        <div className="brand" onClick={() => nav("#/")}><Logo /> Scoby</div>
        {crumb && <span className="crumb-pill">{crumb}</span>}
        <span className="spacer"></span>
        {setLang && <LangToggle lang={lang} onChange={setLang} />}
        <div style={{ position: "relative" }}>
          <button className="iconbtn" style={{ width: 38, height: 38, borderRadius: 999, padding: 0, border: "none" }} onClick={() => setOpen((o) => !o)} aria-label="Account">
            <Avatar name={account.displayName} />
          </button>
          {open && (
            <React.Fragment>
              <div style={{ position: "fixed", inset: 0, zIndex: 50 }} onClick={() => setOpen(false)}></div>
              <div className="card" style={{ position: "absolute", right: 0, top: 46, width: 220, padding: 8, zIndex: 51, boxShadow: "var(--sh-lg)" }}>
                <div style={{ padding: "8px 10px 10px", borderBottom: "1px solid var(--line)", marginBottom: 6 }}>
                  <div style={{ fontWeight: 700, fontSize: 14 }}>{account.displayName}</div>
                  <div className="faint" style={{ fontSize: 12.5 }}>{account.email}</div>
                </div>
        <MenuItem icon="grid" label={t("nav.mygames")} onClick={() => { setOpen(false); window.location.hash = "#/"; }} />
                <MenuItem icon="sparkle" label={t("nav.stats")} onClick={() => { setOpen(false); window.location.hash = "#/stats"; }} />
                <MenuItem icon="trophy" label={t("nav.billing")} onClick={() => { setOpen(false); Store.openCustomerPortal().catch((e) => alert(e.message || "Billing-Portal nicht erreichbar.")); }} />
                <MenuItem icon="x" label={t("nav.signout")} onClick={() => { setOpen(false); onSignOut(); }} />
              </div>
            </React.Fragment>
          )}
        </div>
      </div>
    </header>
  );
}

function MenuItem({ icon, label, onClick }) {
  return (
    <button onClick={onClick} style={{ display: "flex", alignItems: "center", gap: 10, width: "100%", border: "none", background: "transparent", padding: "9px 10px", borderRadius: 8, cursor: "pointer", color: "var(--ink-2)", fontSize: 14, fontWeight: 600 }}
      onMouseEnter={(e) => (e.currentTarget.style.background = "var(--surface-2)")}
      onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}>
      <Icon name={icon} size={16} />{label}
    </button>
  );
}

Object.assign(window, { AppHeader, MenuItem });