/* Shared chrome: Nav, Footer, brand mark */

function BrandMark({ size = 32 }) {
  return (
    <div className="brand-mark" style={{ width: size, height: size, fontSize: size * 0.46 }}>
      M
    </div>
  );
}

function Nav({ route, go, user }) {
  const links = [
    { id: "home", label: "Home" },
    { id: "download", label: "Download" },
    { id: "howto", label: "How to" },
    { id: "upcoming", label: "Upcoming" },
    { id: "faq", label: "FAQ" },
    { id: "contact", label: "Contact" },
  ];
  return (
    <nav className="nav">
      <div className="nav-inner">
        <button className="brand" onClick={() => go("home")}>
          <BrandMark />
          <div>
            My Crafty Stash
            <small>v1.0 · windows</small>
          </div>
        </button>
        <div className="nav-right">
          <div className="nav-links">
            {links.map((l) => (
              <button
                key={l.id}
                className={"nav-link" + (route === l.id ? " active" : "")}
                onClick={() => go(l.id)}
              >
                {l.label}
              </button>
            ))}
          </div>
          <div className="nav-auth">
            {user ? (
              <>
                <button
                  className="btn"
                  style={{ padding: "9px 18px", fontSize: "0.9rem" }}
                  onClick={() => go("stash")}
                >
                  My Stash
                </button>
                <NavUserChip user={user} />
              </>
            ) : (
              <>
                <button
                  className={"nav-link" + (route === "login" ? " active" : "")}
                  onClick={() => go("login")}
                >
                  Sign in
                </button>
                <button
                  className="btn"
                  style={{ padding: "9px 18px", fontSize: "0.9rem" }}
                  onClick={() => { go("login"); setTimeout(() => window.dispatchEvent(new CustomEvent("mcs:signup")), 50); }}
                >
                  Sign up — free
                </button>
              </>
            )}
          </div>
        </div>
      </div>
    </nav>
  );
}

/* Avatar initial + sign-out flyout, shown when signed in. userDetails is the
   email for Google sign-ins; fall back to "?" for providers without one. */
function NavUserChip({ user }) {
  const [open, setOpen] = React.useState(false);
  const initial = (user.userDetails || "?").trim().charAt(0).toUpperCase();
  React.useEffect(() => {
    if (!open) return;
    const close = () => setOpen(false);
    window.addEventListener("click", close);
    return () => window.removeEventListener("click", close);
  }, [open]);
  return (
    <div style={{ position: "relative" }} onClick={(e) => e.stopPropagation()}>
      <button className="nav-user-chip" onClick={() => setOpen(!open)} aria-label="Account">
        {initial}
      </button>
      {open && (
        <div className="nav-user-flyout">
          <div style={{ fontWeight: 600, fontSize: "0.9rem", marginBottom: 2, wordBreak: "break-all" }}>
            {user.userDetails}
          </div>
          <div className="kicker" style={{ marginBottom: 12 }}>
            Signed in via {user.identityProvider === "google" ? "Google" : user.identityProvider}
          </div>
          <a href="/.auth/logout?post_logout_redirect_uri=/"
             style={{ color: "var(--accent-deep)", fontWeight: 600, fontSize: "0.9rem", textDecoration: "none" }}>
            Sign out
          </a>
        </div>
      )}
    </div>
  );
}

function Footer({ go }) {
  return (
    <footer className="footer">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 40, alignItems: "start", marginBottom: 40 }} className="footer-cols">
          <div>
            <div className="brand" style={{ marginBottom: 14 }}>
              <BrandMark size={28} />
              <div style={{ fontSize: "1rem" }}>My Crafty Stash</div>
            </div>
            <div style={{ maxWidth: 320, color: "var(--ink-2)", fontSize: "0.95rem" }}>
              A quiet little catalog for your noisy craft room. Free Windows app for paper crafters.
            </div>
          </div>
          <FooterCol title="Product" go={go} items={[
            ["Download", "download"], ["How to", "howto"], ["Upcoming", "upcoming"], ["FAQ", "faq"],
          ]} />
          <FooterCol title="Account" go={go} items={[
            ["Sign in", "login"], ["Create account", "login"],
          ]} />
          <FooterCol title="Hello" go={go} items={[
            ["Contact", "contact"],
          ]} />
        </div>
        <div className="kicker" style={{ borderTop: "1px solid var(--line-soft)", paddingTop: 20, display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
          <span>© 2026 My Crafty Stash</span>
          <span>Made by a crafter, for crafters · Free forever</span>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, items, go }) {
  return (
    <div>
      <div className="kicker" style={{ marginBottom: 14 }}>{title}</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {items.map(([label, route]) => (
          <a key={label} onClick={() => go(route)} style={{
            textDecoration: "none", color: "var(--ink)",
            fontSize: "0.95rem", cursor: "pointer",
          }}>{label}</a>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Nav, Footer, BrandMark });