// Persistent left sidebar — RDB Backstage
// Logo at top · flat nav · subtle member chip + logout at bottom.
function Sidebar({ activeId, onSelect, user }) {
  const groups = [
    { items: [
      { id: "dashboard", label: "Dashboard",      icon: "layout-dashboard" },
    ] },
    { title: "Directory", items: [
      { id: "suppliers", label: "Suppliers",       icon: "building-2" },
      { id: "hotels",    label: "Hotel Contacts",  icon: "bed-double" },
    ] },
    { title: "Travel", items: [
      { id: "air",       label: "Air",             icon: "plane" },
      { id: "events",    label: "Events",          icon: "calendar-days" },
    ] },
    { title: "Resources", items: [
      { id: "resources", label: "Resources",       icon: "folder" },
      { id: "information", label: "Fees & Info",    icon: "info" },
    ] },
    { title: "Forms", items: [
      { id: "forms",     label: "Commission Research", icon: "clipboard-list" },
      { id: "vendor",    label: "New Vendor Request", icon: "store" },
      { id: "feedback",  label: "Anonymous Feedback", icon: "message-square" },
    ] },
    { title: "Members", items: [
      { id: "contact",   label: "Contact",         icon: "life-buoy" },
      { id: "deals",     label: "Partner Deals",   icon: "lock", soon: true },
    ] },
  ];

  return (
    <aside style={{
      width: 248,
      background: "var(--ink-0)",
      borderRight: "1px solid var(--ink-3)",
      display: "flex",
      flexDirection: "column",
      flexShrink: 0,
      position: "sticky",
      top: 0,
      height: "100vh",
    }}>
      {/* ---------- Logo ---------- */}
      <div
        onClick={() => onSelect && onSelect("dashboard")}
        style={{
          display: "flex", alignItems: "center", gap: 14,
          padding: "26px 24px 24px",
          cursor: "pointer",
          borderBottom: "1px solid var(--ink-3)",
        }}
      >
        <img src={(window.__resources && window.__resources.monogramGold) || "assets/rdb-monogram-gold.png"} alt="RDB" style={{ height: 42, width: "auto", display: "block" }} />
        <div style={{ width: 1, height: 30, background: "var(--rdb-gold)", opacity: 0.6 }} />
        <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
          <span style={{
            fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 13,
            letterSpacing: "0.30em", color: "var(--rdb-gold)", textTransform: "uppercase", lineHeight: 1
          }}>Backstage</span>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 9, color: "var(--ink-6)", letterSpacing: "0.04em" }}>Contractor Portal</span>
        </div>
      </div>

      {/* ---------- Nav ---------- */}
      <nav style={{ padding: "18px 0", display: "flex", flexDirection: "column", gap: 2, overflowY: "auto", flex: 1 }}>
        {groups.map((g, gi) => (
          <div key={gi} style={{ marginBottom: gi < groups.length - 1 ? 12 : 0 }}>
            <div style={{
              fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 10,
              letterSpacing: "0.32em", color: "var(--ink-6)",
              textTransform: "uppercase", padding: gi === 0 ? "0 24px 8px" : "0 24px 8px",
              opacity: g.title ? 1 : 0, height: g.title ? "auto" : 0, overflow: "hidden",
            }}>{g.title || ""}</div>
            {g.items.map(item => (
              <NavLink key={item.id} item={item} active={item.id === activeId} onSelect={onSelect} />
            ))}
          </div>
        ))}
      </nav>

      {/* ---------- Member chip + account ---------- */}
      <div style={{ borderTop: "1px solid var(--ink-3)", padding: "16px 16px 18px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "4px 8px 14px" }}>
          <Avatar initials={user ? user.initials : "AC"} size={32} />
          <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.3, minWidth: 0 }}>
            <span style={{ fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 13, color: "var(--fg-1)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
              <span data-ms-member-info="firstName">{user ? user.name : "Amelia Cortes"}</span>
            </span>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-6)" }}>{user ? user.role : "Lead Ops · Miami"}</span>
          </div>
        </div>
        <AccountLink onSelect={onSelect} />
      </div>
    </aside>
  );
}

function NavLink({ item, active, onSelect }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a
      onClick={() => onSelect && onSelect(item.id)}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "flex", alignItems: "center", gap: 13,
        padding: "11px 24px",
        fontFamily: "var(--font-body)",
        fontSize: 13,
        fontWeight: active ? 600 : 500,
        color: item.soon ? "var(--ink-6)" : active ? "var(--fg-1)" : hover ? "var(--fg-1)" : "var(--fg-2)",
        borderLeft: active ? "2px solid var(--rdb-gold)" : "2px solid transparent",
        background: active ? "rgba(201,168,76,0.07)" : hover ? "var(--ink-1)" : "transparent",
        cursor: "pointer", textDecoration: "none",
        transition: "all 160ms cubic-bezier(.22,1,.36,1)",
        letterSpacing: "0.01em",
      }}
    >
      <Icon name={item.icon} size={17} color={active ? "var(--rdb-gold)" : hover ? "var(--fg-1)" : "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>
  );
}

// "My Account" — a MemberSpace Member Link. In production this anchor's href is
// the dashboard-provided account link (the widget opens the account modal, where
// logout lives); in preview it resets the demo session. We never hardcode logout.
function AccountLink({ onSelect }) {
  const [hover, setHover] = React.useState(false);
  const live = !!(window.msIsLiveHost && window.msIsLiveHost());
  const href = (window.MS_ACCOUNT_HREF || "?msopen=/member/account");
  return (
    <a
      href={live ? href : undefined}
      onClick={live ? undefined : (e) => { e.preventDefault(); onSelect && onSelect("__account"); }}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "flex", alignItems: "center", gap: 10,
        padding: "9px 8px",
        fontFamily: "var(--font-body)", fontSize: 12, fontWeight: 500,
        letterSpacing: "0.04em",
        color: hover ? "var(--rdb-gold)" : "var(--ink-6)",
        cursor: "pointer", textDecoration: "none",
        transition: "color 160ms cubic-bezier(.22,1,.36,1)",
      }}
    >
      <Icon name="user-circle" size={15} color={hover ? "var(--rdb-gold)" : "var(--ink-6)"} />
      <span>My Account</span>
    </a>
  );
}

Object.assign(window, { Sidebar });