// Mobile app shell — top bar, slide-in drawer nav, and page router.
// Renders inside the iOS device frame; every desktop page has a mobile screen.
const M_NAV = [
  { id: "dashboard", label: "Dashboard",     icon: "layout-dashboard" },
  { id: "suppliers", label: "Suppliers",      icon: "building-2" },
  { id: "hotels",    label: "Hotel Contacts", icon: "bed-double" },
  { id: "air",       label: "Air",            icon: "plane" },
  { id: "events",    label: "Events",         icon: "calendar-days" },
  { id: "resources", label: "Resources",      icon: "folder" },
  { id: "information", label: "Fees & Info",   icon: "info" },
  { id: "forms",     label: "Commission Research", icon: "clipboard-list" },
  { id: "vendor",    label: "New Vendor Request", icon: "store" },
  { id: "feedback",  label: "Anonymous Feedback", icon: "message-square" },
  { id: "contact",   label: "Contact",        icon: "life-buoy" },
  { id: "deals",     label: "Partner Deals",  icon: "lock", soon: true },
];

function MobileApp({ user, onSignOut }) {
  const [open, setOpen] = React.useState(false);
  const [active, setActive] = React.useState("dashboard");

  function go(id) { setActive(id); setOpen(false); }

  let content;
  switch (active) {
    case "suppliers": content = <MobileSuppliers />; break;
    case "hotels":    content = <MobileHotels />; break;
    case "air":       content = <AirPage compact />; break;
    case "events":    content = <EventsPage compact />; break;
    case "resources": content = <ResourcesPage compact />; break;
    case "information": content = <MobileInformation user={user} />; break;
    case "forms":     content = <MobileForms />; break;
    case "vendor":    content = <VendorRequestPage compact />; break;
    case "feedback":  content = <FeedbackPage compact />; break;
    case "deals":     content = <MobileLocked />; break;
    case "contact":   content = <MobileContact />; break;
    default:          content = <MobileDashboard user={user} onNav={go} />;
  }

  return (
    <div style={{ position: "relative", height: "100%", overflow: "hidden", background: "var(--ink-1)", display: "flex", flexDirection: "column" }}>
      {/* Top app bar */}
      <div style={{ paddingTop: 54, flexShrink: 0, background: "var(--ink-0)", borderBottom: "1px solid var(--ink-3)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 14, padding: "12px 18px 14px" }}>
          <div onClick={() => setOpen(true)} style={{ cursor: "pointer", display: "flex", padding: 2 }}>
            <Icon name="menu" size={22} color="var(--fg-1)" />
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <img src={(window.__resources && window.__resources.monogramGold) || "assets/rdb-monogram-gold.png"} alt="RDB" style={{ height: 26, width: "auto" }} />
            <div style={{ width: 1, height: 18, background: "var(--rdb-gold)", opacity: 0.6 }} />
            <span style={{ fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 11, letterSpacing: "0.28em", color: "var(--rdb-gold)", textTransform: "uppercase" }}>Backstage</span>
          </div>
        </div>
      </div>

      {/* Scrollable content (re-scrolls to top on nav via key) */}
      <div key={active} style={{ flex: 1, overflowY: "auto" }}>
        {content}
      </div>

      {/* Scrim */}
      <div
        onClick={() => setOpen(false)}
        style={{
          position: "absolute", inset: 0, zIndex: 30,
          background: "rgba(0,0,0,0.55)", backdropFilter: "blur(2px)",
          opacity: open ? 1 : 0, pointerEvents: open ? "auto" : "none",
          transition: "opacity 240ms cubic-bezier(.22,1,.36,1)",
        }}
      />

      {/* Drawer */}
      <MDrawer open={open} active={active} onNav={go} onClose={() => setOpen(false)} onSignOut={onSignOut} />
    </div>
  );
}

function MDrawer({ open, active, onNav, onClose, onSignOut }) {
  return (
    <aside style={{
      position: "absolute", top: 0, bottom: 0, left: 0, width: 268, zIndex: 40,
      background: "var(--ink-0)", borderRight: "1px solid var(--ink-3)",
      transform: open ? "translateX(0)" : "translateX(-100%)",
      transition: "transform 280ms cubic-bezier(.22,1,.36,1)",
      display: "flex", flexDirection: "column",
      boxShadow: open ? "var(--shadow-modal)" : "none",
    }}>
      <div style={{ paddingTop: 56, borderBottom: "1px solid var(--ink-3)" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "8px 18px 18px" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 11 }}>
            <img src={(window.__resources && window.__resources.monogramGold) || "assets/rdb-monogram-gold.png"} alt="RDB" style={{ height: 34, width: "auto" }} />
            <div style={{ width: 1, height: 24, background: "var(--rdb-gold)", opacity: 0.6 }} />
            <span style={{ fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 12, letterSpacing: "0.28em", color: "var(--rdb-gold)", textTransform: "uppercase" }}>Backstage</span>
          </div>
          <div onClick={onClose} style={{ cursor: "pointer", padding: 2 }}>
            <Icon name="x" size={20} color="var(--ink-6)" />
          </div>
        </div>
      </div>

      <nav style={{ flex: 1, overflowY: "auto", padding: "16px 0" }}>
        {M_NAV.map(item => {
          const isActive = item.id === active;
          return (
            <a key={item.id} onClick={() => onNav(item.id)} style={{
              display: "flex", alignItems: "center", gap: 13, padding: "13px 22px",
              fontFamily: "var(--font-body)", fontSize: 14,
              fontWeight: isActive ? 600 : 500,
              color: item.soon ? "var(--ink-6)" : isActive ? "var(--fg-1)" : "var(--fg-2)",
              borderLeft: isActive ? "2px solid var(--rdb-gold)" : "2px solid transparent",
              background: isActive ? "rgba(201,168,76,0.07)" : "transparent",
              textDecoration: "none", cursor: "pointer",
            }}>
              <Icon name={item.icon} size={18} color={isActive ? "var(--rdb-gold)" : "var(--ink-6)"} />
              <span>{item.label}</span>
              {item.soon && (
                <span style={{ marginLeft: "auto", fontFamily: "var(--font-mono)", fontSize: 8, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--rdb-gold)", border: "1px solid var(--rdb-gold-soft)", padding: "3px 7px", lineHeight: 1 }}>Soon</span>
              )}
            </a>
          );
        })}
      </nav>

      <div style={{ borderTop: "1px solid var(--ink-3)", padding: "16px 22px 24px" }}>
        <a onClick={onSignOut} style={{ display: "flex", alignItems: "center", gap: 10, color: "var(--ink-6)", cursor: "pointer", textDecoration: "none" }}>
          <Icon name="user-circle" size={16} color="var(--ink-6)" />
          <span style={{ fontFamily: "var(--font-body)", fontSize: 13 }}>My Account</span>
        </a>
      </div>
    </aside>
  );
}

Object.assign(window, { MobileApp });