/* Sentosa Marketplace - SDC Admin module: sidebar + topbar (S/No. 49 Administrative control panel) */

const ADMIN_NAV = [
  ["dashboard", "Dashboard", "layout-dashboard", null],
  ["onboarding", "Partner onboarding", "user-plus", 3],
  ["approvals", "Product approvals", "clipboard-check", 3],
  ["payments", "Payment verification", "banknote", 3],
  ["promotions", "Promotions", "tag", 1],
  ["loyalty", "Commission & rebate", "percent", null],
  ["accounts", "Accounts & campaigns", "users", null],
  ["mice", "MICE & events", "calendar-days", 1],
  ["reports", "Reports", "bar-chart-3", null],
];

function AdminSidebar({ active, onNav }) {
  return (
    <aside style={{ width: 258, background: "var(--black)", color: "#fff", display: "flex", flexDirection: "column",
      height: "100%", flex: "none" }}>
      <div style={{ padding: "20px 20px 16px", borderBottom: "1px solid #2a2a2a", display: "flex", alignItems: "center", gap: 10 }}>
        <Logo height={22} />
        <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: ".04em", color: "var(--orange-300)",
          border: "1px solid #3a3a3a", borderRadius: "var(--radius-sm)", padding: "2px 6px" }}>SDC ADMIN</span>
      </div>
      <nav style={{ padding: 12, display: "flex", flexDirection: "column", gap: 2, flex: 1, overflowY: "auto" }}>
        {ADMIN_NAV.map(([k, label, ic, count]) => {
          const on = active === k;
          return (
            <button key={k} onClick={() => onNav(k)}
              style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 12px", borderRadius: "var(--radius-md)",
                border: 0, cursor: "pointer", background: on ? "var(--action)" : "transparent", color: on ? "#fff" : "#C9C9C9",
                fontFamily: "var(--font-sans)", fontSize: 14, fontWeight: on ? 600 : 500, textAlign: "left" }}>
              <Icon name={ic} size={18} />
              <span style={{ flex: 1 }}>{label}</span>
              {count != null && (
                <span style={{ fontSize: 11, fontWeight: 700, minWidth: 20, height: 20, borderRadius: 999,
                  display: "inline-flex", alignItems: "center", justifyContent: "center", padding: "0 6px",
                  background: on ? "rgba(255,255,255,.25)" : "var(--action)", color: "#fff" }}>{count}</span>
              )}
            </button>
          );
        })}
      </nav>
      <div style={{ padding: 16, borderTop: "1px solid #2a2a2a" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <div style={{ width: 36, height: 36, borderRadius: 999, background: "var(--action)", color: "#fff",
            display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, fontSize: 13 }}>AL</div>
          <div style={{ lineHeight: 1.3, minWidth: 0 }}>
            <div style={{ fontSize: 13, fontWeight: 600 }}>Agnes Lim</div>
            <div style={{ fontSize: 12, color: "#9A9A9A" }}>Marketplace Operations</div>
          </div>
        </div>
      
        <a href="../../index.html" style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 14,
          fontSize: 12.5, color: "#9A9A9A", textDecoration: "none", fontWeight: 500 }}>
          <Icon name="arrow-left" size={14} />Back to marketplace home
        </a>
      </div>
    </aside>
  );
}

function AdminTopBar({ title, subtitle, action }) {
  return (
    <div style={{ position: "sticky", top: 0, zIndex: 10, background: "var(--surface)", borderBottom: "1px solid var(--border)" }}>
      <div style={{ padding: "0 32px", minHeight: 68, display: "flex", alignItems: "center", gap: 16 }}>
        <div>
          <h1 style={{ fontSize: "1.35rem", margin: 0 }}>{title}</h1>
          {subtitle && <div style={{ fontSize: 13, color: "var(--fg2)", marginTop: 2 }}>{subtitle}</div>}
        </div>
        <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 12 }}>
          <NotificationsButton items={ADMIN_NOTIFICATIONS} />
          {action}
        </div>
      </div>
    </div>
  );
}

const ADMIN_NOTIFICATIONS = [
  { icon: "user-plus", title: "New partner application", body: "Sentosa Sky Adventures Pte Ltd submitted KYC documents for review.", when: "2 days ago" },
  { icon: "clipboard-check", title: "Cross-partner bundle submitted", body: "Heritage + Luge Combo spans Fort Siloso and Skyline Luge - awaiting commercial review.", when: "Yesterday" },
  { icon: "calendar-days", title: "MICE enquiry unassigned", body: "ENQ-10462 · Wanderlust Travel · 760 pax gala dinner, 12 Dec 2026.", when: "Just now" },
  { icon: "alert-triangle", title: "Allotment warning", body: "Sky Dining Experience clears remaining stock in about 11 days at the current run rate.", when: "Today, 08:00" },
];

Object.assign(window, { AdminSidebar, AdminTopBar, ADMIN_NAV, ADMIN_NOTIFICATIONS });