/* MStheory website — Header / navigation bar */
const { Button, LanguageSwitcher, Badge } = window.MStheoryDesignSystem_61eb29;

function MenuItem({ onClick, children }) {
  return (
    <button onClick={onClick} style={{ display: "block", width: "100%", textAlign: "start", padding: "9px 10px", background: "transparent", border: "none", borderRadius: "var(--radius-sm)", color: "var(--text-primary)", fontSize: "var(--text-sm)", fontWeight: "var(--fw-medium)", cursor: "pointer" }}
      onMouseEnter={(e) => e.currentTarget.style.background = "var(--accent-soft)"}
      onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}>{children}</button>
  );
}

function Header({ t, lang, setLang, onCheckout, user, onLogin, onProfile, onAdmin, onSignOut }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menu, setMenu] = React.useState(false);
  const mref = React.useRef(null);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  React.useEffect(() => {
    const close = (e) => { if (mref.current && !mref.current.contains(e.target)) setMenu(false); };
    document.addEventListener("mousedown", close);
    return () => document.removeEventListener("mousedown", close);
  }, []);
  const isAdmin = user && window.MSStore.isAdmin(user);

  const navLink = {
    color: "var(--text-secondary)", fontSize: "var(--text-sm)", fontWeight: "var(--fw-semibold)",
    padding: "8px 4px", cursor: "pointer", transition: "color var(--dur-fast)",
  };

  return (
    <header
      style={{
        position: "fixed", top: 0, left: 0, right: 0, zIndex: 100,
        height: "var(--header-height)",
        background: scrolled ? "color-mix(in oklab, var(--ink-950) 82%, transparent)" : "transparent",
        backdropFilter: scrolled ? "blur(14px) saturate(140%)" : "none",
        borderBottom: scrolled ? "1px solid var(--border-subtle)" : "1px solid transparent",
        transition: "all var(--dur-base) var(--ease-out)",
      }}
    >
      <div className="ms-container" style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "space-between", gap: "20px" }}>
        <a href="#top" style={{ display: "flex", alignItems: "center" }}>
          <img src="../../assets/logo-wordmark.svg" alt="MStheory" height="34" style={{ display: "block" }} />
        </a>

        <nav style={{ display: "flex", alignItems: "center", gap: "28px" }} className="ms-desktop-nav">
          <a style={navLink} href="#topics" onMouseEnter={(e)=>e.target.style.color="var(--text-primary)"} onMouseLeave={(e)=>e.target.style.color="var(--text-secondary)"}>{t.nav.topics}</a>
          <a style={navLink} href="#how" onMouseEnter={(e)=>e.target.style.color="var(--text-primary)"} onMouseLeave={(e)=>e.target.style.color="var(--text-secondary)"}>{t.nav.how}</a>
          <a style={navLink} href="#pricing" onMouseEnter={(e)=>e.target.style.color="var(--text-primary)"} onMouseLeave={(e)=>e.target.style.color="var(--text-secondary)"}>{t.nav.pricing}</a>
        </nav>

        <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
          <LanguageSwitcher value={lang} onChange={setLang} compact />
          {!user ? (
            <React.Fragment>
              <a style={{ ...navLink, cursor: "pointer" }} className="ms-desktop-nav" onClick={onLogin}>{t.nav.login}</a>
              <Button variant="primary" size="sm" onClick={onCheckout}>{t.nav.pricing} · €30</Button>
            </React.Fragment>
          ) : (
            <div ref={mref} style={{ position: "relative" }}>
              <button onClick={() => setMenu((m) => !m)} style={{ display: "inline-flex", alignItems: "center", gap: "8px", padding: "6px 10px 6px 6px", background: "var(--surface-raised)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-pill)", color: "var(--text-primary)", cursor: "pointer" }}>
                <span style={{ width: "28px", height: "28px", borderRadius: "50%", background: "var(--grad-gold)", color: "var(--text-on-gold)", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "var(--fw-bold)", fontSize: "13px" }}>{(user.name || user.email)[0].toUpperCase()}</span>
                <span style={{ fontSize: "var(--text-sm)", fontWeight: "var(--fw-semibold)", maxWidth: "110px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{user.name || user.email}</span>
                <span style={{ color: "var(--text-gold)" }}>▾</span>
              </button>
              {menu && (
                <div style={{ position: "absolute", top: "calc(100% + 8px)", insetInlineEnd: 0, minWidth: "190px", padding: "6px", background: "var(--surface-card)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-lg)", zIndex: 60 }}>
                  <div style={{ padding: "8px 10px", borderBottom: "1px solid var(--border-subtle)", marginBottom: "4px" }}>
                    <div style={{ fontSize: "var(--text-xs)", color: "var(--text-muted)", overflow: "hidden", textOverflow: "ellipsis" }}>{user.email}</div>
                    <div style={{ marginTop: "6px" }}>{isAdmin ? <Badge variant="solid">Admin</Badge> : (user.paid ? <Badge variant="success">Toegang</Badge> : <Badge variant="neutral">Geen toegang</Badge>)}</div>
                  </div>
                  <MenuItem onClick={onProfile}>Profiel</MenuItem>
                  {isAdmin && <MenuItem onClick={onAdmin}>Admin dashboard</MenuItem>}
                  <MenuItem onClick={onSignOut}>Uitloggen</MenuItem>
                </div>
              )}
            </div>
          )}
        </div>
      </div>
    </header>
  );
}
window.Header = Header;