// App shell — login → persistent-sidebar portal, with a desktop/mobile toggle.
function BackstageApp() {
  const [user, setUser] = React.useState(null);
  const [authReady, setAuthReady] = React.useState(false);
  const [activeNav, setActiveNav] = React.useState("dashboard");
  const [device, setDevice] = React.useState("desktop");

  // CLIENT-SIDE AUTH GATE (security-critical).
  // This SPA uses hash routes (#/suppliers …) which MemberSpace's path-based
  // protection cannot see, so login state — not the URL — must gate the whole
  // app. We wait for the MemberSpace widget to report READY, then ask it who the
  // member is. Protected content (`user` set) renders ONLY after an authoritative
  // { isLoggedIn: true } from MemberSpace.getMemberInfo(). Until the check
  // completes we show a loading screen and never flash protected content.
  React.useEffect(() => {
    let alive = true;
    let settled = false;
    const liveHost = !!(window.msIsLiveHost && window.msIsLiveHost());

    const setMember = m => setUser({
      name: m.name,
      email: m.email,
      initials: (m.name || "M").split(" ").slice(0, 2).map(s => s[0]).join("").toUpperCase(),
      role: m.plan || "Member",
    });

    // Authoritative check: getMemberInfo() → { isLoggedIn, member }.
    const check = () => {
      if (!window.msGetAuth) return;
      window.msGetAuth().then(res => {
        if (!alive || !res.ready) return;          // widget not active yet — ignore
        settled = true;
        if (res.isLoggedIn && res.member) setMember(res.member);
        else { setUser(null); setActiveNav("dashboard"); }
        setAuthReady(true);
      });
    };

    // Documented SPA pattern: run the check the moment MemberSpace is ready.
    const offReady = window.msOnReady ? window.msOnReady(check) : null;

    // Keep auth state live: login/signup, member-info updates, and logout — on
    // logout we drop straight back to the LoginScreen with no refresh needed.
    const offAuth = window.msOnAuth ? window.msOnAuth({
      onLogin: check,
      onInfo: check,
      onLogout: () => { if (alive) { setUser(null); setActiveNav("dashboard"); setAuthReady(true); } },
    }) : null;

    // Fallback if MemberSpace never initialises:
    //  • live host  → stay LOCKED (LoginScreen w/ MemberSpace popup) — never leak.
    //  • preview/non-prod → unlock the walkable demo (LoginScreen demo session).
    // Either way `user` stays null, so no protected content renders without auth.
    const t = setTimeout(() => {
      if (alive && !settled) { setUser(null); setAuthReady(true); }
    }, liveHost ? 7000 : 1800);

    return () => { alive = false; clearTimeout(t); if (offReady) offReady(); if (offAuth) offAuth(); };
  }, []);

  // Per-section URLs. MemberSpace gates by URL, so each section is its own route.
  // Prototype: hash routes (#/suppliers). Production: real paths (/suppliers) —
  // see MS_SECTION_PATHS in MemberSpaceIntegration.jsx.
  const VALID = ["dashboard","suppliers","hotels","air","events","resources","information","forms","vendor","feedback","deals","contact"];
  React.useEffect(() => {
    const fromHash = () => {
      const slug = (location.hash || "").replace(/^#\/?/, "").split(/[/?]/)[0];
      if (slug && VALID.indexOf(slug) !== -1) setActiveNav(slug);
      else if (!slug) setActiveNav("dashboard");
    };
    fromHash();
    window.addEventListener("hashchange", fromHash);
    return () => window.removeEventListener("hashchange", fromHash);
  }, []);

  function handleSelect(id) {
    if (id === "__account") {
      // Production: "My Account" is a MemberSpace Member Link (anchor) — the widget
      // opens the account modal; logout lives there / on the Member Button. In the
      // preview there's no widget, so we reset the demo session to show the entry.
      if (!(window.msIsLiveHost && window.msIsLiveHost())) { setUser(null); setActiveNav("dashboard"); if (history.replaceState) history.replaceState(null, "", location.pathname + location.search); else location.hash = ""; }
      return;
    }
    setActiveNav(id);
    if (location.hash !== "#/" + id) location.hash = "#/" + id;
    window.scrollTo(0, 0);
  }

  // Hold protected content until MemberSpace has reported login state.
  if (!authReady) return <AuthLoading />;

  if (!user) {
    return <LoginScreen onSignIn={({ email }) => {
      // Demo session is for the preview/non-prod walkthrough only — never grant a
      // fabricated session on the live host, where MemberSpace is the sole gate.
      if (window.msIsLiveHost && window.msIsLiveHost()) return;
      const name = email && email.includes("@")
        ? email.split("@")[0].replace(/[._]/g, " ").replace(/\b\w/g, c => c.toUpperCase())
        : "Amelia Cortes";
      const initials = name.split(" ").slice(0, 2).map(s => s[0]).join("").toUpperCase();
      setUser({ name, email, initials, role: "Lead Ops · Miami" });
      setActiveNav("dashboard");
    }} />;
  }

  function renderPage() {
    switch (activeNav) {
      case "dashboard": return <DashboardPage user={user} onSelect={handleSelect} />;
      case "suppliers": return <SuppliersPage />;
      case "hotels":    return <HotelContactsPage />;
      case "air":       return <AirPage />;
      case "events":    return <EventsPage />;
      case "resources": return <ResourcesPage />;
      case "information": return <InformationPage user={user} />;
      case "forms":     return <FormsPage />;
      case "vendor":    return <VendorRequestPage />;
      case "feedback":  return <FeedbackPage />;
      case "deals":     return <PartnerDealsPage />;
      case "contact":   return <ContactPage />;
      default:          return <StaticPage page={activeNav} />;
    }
  }

  return (
    <>
      <DeviceToggle device={device} onChange={setDevice} />

      {device === "desktop" ? (
        <div style={{ display: "flex", alignItems: "flex-start", minHeight: "100vh", background: "var(--ink-0)" }}>
          <Sidebar activeId={activeNav} onSelect={handleSelect} user={user} />
          <main style={{ flex: 1, minWidth: 0, background: "var(--ink-1)", minHeight: "100vh" }}>
            {renderPage()}
          </main>
        </div>
      ) : (
        <div style={{ minHeight: "100vh", background: "var(--ink-0)", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "56px 24px 40px", gap: 22 }}>
          <div style={{ fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 10, letterSpacing: "0.32em", color: "var(--ink-6)", textTransform: "uppercase" }}>
            Mobile · Contractor Portal
          </div>
          <IOSDevice dark width={392} height={812}>
            <MobileApp user={user} onSignOut={() => { if (!(window.msIsLiveHost && window.msIsLiveHost())) { setUser(null); setActiveNav("dashboard"); } }} />
          </IOSDevice>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-6)", maxWidth: 360, textAlign: "center", lineHeight: 1.5 }}>
            Tap the menu icon to open the slide-in navigation. Every page adapts to mobile.
          </div>
        </div>
      )}
    </>
  );
}

// Shown while the MemberSpace auth check is in flight — a neutral branded screen
// that deliberately reveals NO protected content until login state is known.
function AuthLoading() {
  return (
    <div style={{
      minHeight: "100vh", width: "100%",
      background: "linear-gradient(180deg, #0D0D0D 0%, #1A1A1A 100%)",
      display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 24,
    }}>
      <Logo size={120} />
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--rdb-gold)", display: "inline-block", animation: "rdbpulse 1s ease-in-out infinite" }} />
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--fg-2)", letterSpacing: "0.04em" }}>Verifying access…</span>
      </div>
    </div>
  );
}

function DeviceToggle({ device, onChange }) {
  const opt = (id, icon, label) => {
    const active = device === id;
    return (
      <button
        onClick={() => onChange(id)}
        style={{
          display: "flex", alignItems: "center", gap: 7,
          padding: "8px 14px",
          background: active ? "var(--rdb-gold)" : "transparent",
          color: active ? "#0D0D0D" : "var(--fg-2)",
          border: "none", cursor: "pointer",
          fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 10,
          letterSpacing: "0.16em", textTransform: "uppercase",
          transition: "all 160ms cubic-bezier(.22,1,.36,1)",
        }}
      >
        <Icon name={icon} size={14} color={active ? "#0D0D0D" : "var(--ink-6)"} />
        {label}
      </button>
    );
  };
  return (
    <div style={{
      position: "fixed", top: 18, right: 22, zIndex: 200,
      display: "flex", border: "1px solid var(--ink-3)",
      background: "rgba(13,13,13,0.85)", backdropFilter: "blur(12px)",
    }}>
      {opt("desktop", "monitor", "Desktop")}
      {opt("mobile", "smartphone", "Mobile")}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<BackstageApp />);