/* ============================================================
   AfricaMart Admin — navigation shell (sidebar + topbar)
   Matches the Modern Tiles sidebar visual spec exactly:
   slate #1E3A4A bg, white text, nav item paddings + badges.
   ============================================================ */
const NAV = [
  { id: "overview", label: "Overview", icon: "layout-dashboard", section: null },
  { id: "buyers", label: "Buyers", icon: "users", section: "Accounts", badge: 2, badgeType: "warn" },
  { id: "suppliers", label: "Suppliers", icon: "building", section: "Accounts", badge: 1, badgeType: "warn" },
  { id: "verification", label: "Verification", icon: "user-check", section: "Accounts", badge: 3 },
  { id: "listings", label: "Listings", icon: "package", section: "Marketplace", badge: 2, badgeType: "warn" },
  { id: "rfqs", label: "RFQs", icon: "file-text", section: "Marketplace" },
  { id: "orders", label: "Orders", icon: "shopping-cart", section: "Marketplace" },
  { id: "disputes", label: "Disputes", icon: "scale", section: "Trust & safety", badge: 2, badgeType: "warn" },
  { id: "analytics", label: "Analytics", icon: "bar-chart", section: "Insights" },
  { id: "activity", label: "Activity log", icon: "activity", section: "System" },
  { id: "team", label: "Admins & roles", icon: "shield-check", section: "System" },
  { id: "settings", label: "Settings", icon: "settings", section: "System" },
];

const NAV_LABELS = Object.fromEntries(NAV.map(n => [n.id, n.label]));

function AdmNavItem({ item, active, onChange }) {
  const [hover, setHover] = aUseState(false);
  const bg = active ? "rgba(255,255,255,.14)" : hover ? "rgba(255,255,255,.07)" : "transparent";
  const color = active ? "#fff" : "rgba(255,255,255,.65)";
  return React.createElement("div", {
    onClick: () => onChange(item.id),
    onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false),
    style: { display: "flex", alignItems: "center", gap: 9, margin: "1px 8px", padding: "8px 10px", borderRadius: 7, cursor: "pointer", background: bg, color, fontFamily: "'Figtree',sans-serif", fontSize: 13, fontWeight: active ? 600 : 500, transition: "background .12s,color .12s" },
  },
    React.createElement(AdmIcon, { name: item.icon, size: 16, strokeWidth: 1.8, style: { opacity: active ? 1 : 0.78 } }),
    React.createElement("span", { style: { flex: 1 } }, item.label),
    item.badge && React.createElement("span", { style: { background: item.badgeType === "warn" ? "#D48A18" : "#C5622C", color: "#fff", fontSize: 10, fontWeight: 700, padding: "1px 6px", borderRadius: 100, minWidth: 18, textAlign: "center" } }, item.badge));
}

function AdminSidebar({ active, onChange }) {
  let lastSection = "__start__";
  return React.createElement("div", { style: { width: 240, background: "#1E3A4A", display: "flex", flexDirection: "column", flexShrink: 0, height: "100%", overflowY: "auto" } },
    // Brand
    React.createElement("div", { style: { padding: "18px 16px 14px", borderBottom: "1px solid rgba(255,255,255,.1)", display: "flex", alignItems: "center", gap: 10 } },
      React.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 2.5, width: 22, flexShrink: 0 } },
        React.createElement("div", { style: { width: 9, height: 9, borderRadius: 2, background: "#C5622C" } }),
        React.createElement("div", { style: { width: 9, height: 9, borderRadius: 2, background: "rgba(255,255,255,.9)" } }),
        React.createElement("div", { style: { width: 9, height: 9, borderRadius: 2, background: "rgba(255,255,255,.45)" } }),
        React.createElement("div", { style: { width: 9, height: 9, borderRadius: 2, background: "#C5622C", opacity: .6 } })),
      React.createElement("div", null,
        React.createElement("div", { style: { fontFamily: "'Outfit',sans-serif", fontSize: 14, fontWeight: 700, color: "#fff", letterSpacing: "-.01em", lineHeight: 1 } }, "AfricaMart"),
        React.createElement("div", { style: { fontSize: 10, color: "rgba(255,255,255,.5)", marginTop: 2, letterSpacing: ".08em", textTransform: "uppercase", fontWeight: 600 } }, "Admin console"))),
    // Nav
    React.createElement("div", { style: { padding: "8px 0", flex: 1 } },
      NAV.map(item => {
        const showSection = item.section && item.section !== lastSection;
        if (item.section) lastSection = item.section;
        return React.createElement(React.Fragment, { key: item.id },
          showSection && React.createElement("div", { style: { fontSize: 10, fontWeight: 700, color: "rgba(255,255,255,.38)", letterSpacing: ".1em", textTransform: "uppercase", padding: "14px 18px 6px" } }, item.section),
          React.createElement(AdmNavItem, { item, active: active === item.id, onChange }));
      })),
    // Footer — back to marketplace
    React.createElement("a", { href: "../../", style: { margin: "8px 8px 14px", padding: "9px 10px", borderRadius: 7, display: "flex", alignItems: "center", gap: 9, color: "rgba(255,255,255,.6)", fontSize: 12.5, fontWeight: 500, textDecoration: "none", borderTop: "1px solid rgba(255,255,255,.08)" } },
      React.createElement(AdmIcon, { name: "external-link", size: 15, strokeWidth: 1.8 }),
      "View marketplace"));
}

function AdminTopBar({ module, search, setSearch, onCommand, adminProfile, onSignOut }) {
  const { SearchInput } = window.ModernTilesDesignSystem_50dd07;
  const name = (adminProfile && adminProfile.name) || "Admin";
  const roleLabel = (adminProfile && ROLE_LABELS[adminProfile.role]) || "Admin";
  return React.createElement("div", { style: { height: 56, background: "#fff", borderBottom: "1px solid #F0EBE5", display: "flex", alignItems: "center", padding: "0 24px", gap: 14, flexShrink: 0, position: "sticky", top: 0, zIndex: 40 } },
    React.createElement("div", { style: { flex: 1, fontSize: 12, color: "#A09288", display: "flex", alignItems: "center", gap: 6 } },
      "Admin",
      React.createElement(AdmIcon, { name: "chevron-right", size: 12, color: "#BCADA4" }),
      React.createElement("span", { style: { color: "#1A1614", fontWeight: 600 } }, NAV_LABELS[module] || module)),
    React.createElement(SearchInput, { value: search, onChange: setSearch, placeholder: "Search accounts, orders, RFQs…" }),
    React.createElement("button", { onClick: () => onCommand("notifications"), style: { width: 32, height: 32, borderRadius: 7, background: "#F7F4F0", border: "none", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", position: "relative" } },
      React.createElement(AdmIcon, { name: "bell", size: 15, color: "#6B6158" }),
      React.createElement("span", { style: { width: 7, height: 7, background: "#E03131", borderRadius: "50%", position: "absolute", top: 5, right: 5, border: "1.5px solid #fff" } })),
    React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8, paddingLeft: 6, borderLeft: "1px solid #F0EBE5", flexShrink: 0 } },
      React.createElement(Avatar, { name, size: 32 }),
      React.createElement("div", { style: { lineHeight: 1.25, whiteSpace: "nowrap" } },
        React.createElement("div", { style: { fontSize: 12.5, fontWeight: 600, color: "#1A1614" } }, name),
        React.createElement("div", { style: { fontSize: 10.5, color: "#A09288" } }, roleLabel)),
      React.createElement("button", { onClick: onSignOut, title: "Sign out", style: { width: 30, height: 30, borderRadius: 7, background: "none", border: "none", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", color: "#A09288" } },
        React.createElement(AdmIcon, { name: "log-out", size: 15 }))));
}

Object.assign(window, { AdminSidebar, AdminTopBar, NAV, NAV_LABELS });