// AdminShell.jsx — SideNav + TopBar for the Ascend Admin (operator console).
//
// Mirrors the OZ admin's grouped nav structure (CREDIT FACILITIES / LIQUIDITY /
// RISK & LIQUIDATIONS / IDENTITY & CLAIMS) but on the resolved Ascend DS tokens.
//
// Renée C-1: NO "Internal Use Only" pill over content, NO floating mock banner.
// (User chose to remove internal/mock chrome entirely.)

const AdminNavItem = ({ icon, label, active, badge, badgeTone, onClick }) => (
  <button onClick={onClick} style={{
    all: "unset", cursor: "pointer", display: "grid",
    gridTemplateColumns: "3px 16px 1fr auto", alignItems: "center",
    gap: 10, padding: "8px 16px 8px 0",
    color: active ? "var(--accent)" : "var(--fg-muted)",
    font: '500 13px/18px "Inter", sans-serif',
    background: active ? "var(--blue-10)" : "transparent",
    borderRadius: active ? "0 6px 6px 0" : 0,
    transition: "color var(--motion-fast), background var(--motion-fast)",
  }}
  onMouseEnter={(e) => { if (!active) e.currentTarget.style.color = "var(--fg)"; }}
  onMouseLeave={(e) => { if (!active) e.currentTarget.style.color = "var(--fg-muted)"; }}>
    <span style={{
      width: 3, height: 20,
      background: active ? "var(--accent)" : "transparent",
      borderRadius: "0 2px 2px 0",
      transition: "background var(--motion-fast)",
    }} />
    <Icon name={icon} size={15} />
    <span style={{ color: active ? "var(--accent)" : undefined }}>{label}</span>
    {badge !== undefined && badge !== null && (
      <span className="tnum" style={{
        font: '500 11px/14px "Inter", sans-serif',
        color: badgeTone === "danger" ? "var(--danger)" : badgeTone === "warning" ? "var(--gold-70)" : "var(--fg-subtle)",
        paddingRight: 16,
      }}>{badge}</span>
    )}
  </button>
);

const AdminNavGroup = ({ title, children }) => (
  <div style={{ display: "flex", flexDirection: "column", gap: 2, padding: "10px 0" }}>
    {title && (
      <div style={{
        font: '500 10px/14px "Inter", sans-serif', letterSpacing: "0.08em",
        textTransform: "uppercase", color: "var(--fg-subtle)",
        padding: "0 16px 8px 19px",
      }}>{title}</div>
    )}
    {children}
  </div>
);

const AdminSideNav = ({ activeRoute, onNavigate, counts = {}, mobileOpen, onClose }) => {
  const go = (r) => { onNavigate && onNavigate(r); onClose && onClose(); };
  return (
    <React.Fragment>
      <div className={`nav-scrim ${mobileOpen ? "open" : ""}`} onClick={onClose} aria-hidden="true" />
      <aside className={`app-sidenav ${mobileOpen ? "open" : ""}`} style={{
        width: 240, borderRight: "1px solid var(--border)",
        background: "var(--bg-inset, #F7F7F5)",
        display: "flex", flexDirection: "column", flex: "0 0 240px",
      }}>
        <div style={{
          display: "flex", alignItems: "center", gap: 10,
          padding: "18px 19px", borderBottom: "1px solid var(--border)",
          height: 56, boxSizing: "border-box",
        }}>
          <Mark size={18} />
          <div style={{ font: '700 16px/20px "Figtree", sans-serif', letterSpacing: "-0.005em", color: "var(--fg)" }}>
            Ascend
          </div>
          <span style={{
            font: '500 12px/16px "JetBrains Mono", monospace', color: "var(--fg-subtle)",
          }}>{"{ Admin }"}</span>
        </div>

        <div style={{ flex: 1, overflow: "auto", paddingTop: 8 }}>
          <AdminNavGroup>
            <AdminNavItem icon="grid" label="Dashboard" active={activeRoute === "dashboard"} onClick={() => go("dashboard")} />
          </AdminNavGroup>
          <AdminNavGroup title="Credit facilities">
            <AdminNavItem icon="facility" label="Credit facilities" badge={counts.facilities} active={activeRoute === "facilities"} onClick={() => go("facilities")} />
            <AdminNavItem icon="accounts" label="Margin accounts" badge={counts.accounts} active={activeRoute === "accounts"} onClick={() => go("accounts")} />
          </AdminNavGroup>
          <AdminNavGroup title="Liquidity">
            <AdminNavItem icon="bank" label="Stablecoin pools" badge={counts.pools} active={activeRoute === "pools"} onClick={() => go("pools")} />
          </AdminNavGroup>
          <AdminNavGroup title="Risk & liquidations">
            <AdminNavItem icon="gavel" label="Liquidation monitor" badge={counts.liquidations} badgeTone={counts.liquidations ? "danger" : undefined} active={activeRoute === "liquidations"} onClick={() => go("liquidations")} />
            <AdminNavItem icon="shieldCheck" label="Compliance controls" active={activeRoute === "compliance"} onClick={() => go("compliance")} />
            <AdminNavItem icon="docs" label="Audit log" active={activeRoute === "audit"} onClick={() => go("audit")} />
          </AdminNavGroup>
          <AdminNavGroup title="Identity & claims">
            <AdminNavItem icon="clipboard" label="Claims" badge={counts.claimsPending} badgeTone={counts.claimsPending ? "warning" : undefined} active={activeRoute === "claims"} onClick={() => go("claims")} />
          </AdminNavGroup>
        </div>

        <div style={{ padding: "12px 16px", borderTop: "1px solid var(--border)", display: "flex", flexDirection: "column", gap: 10 }}>
          <button className="btn btn--secondary" type="button" style={{ width: "100%", justifyContent: "center" }}>
            <Icon name="copy" size={14} stroke={1.5} /> Connect wallet
          </button>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <div style={{
              width: 28, height: 28, borderRadius: "50%", background: "var(--fg)",
              color: "var(--bg)", display: "grid", placeItems: "center",
              font: '500 11px/1 "Inter", sans-serif',
            }}>AD</div>
            <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.2, flex: 1, minWidth: 0 }}>
              <span style={{ font: '500 12px "Inter", sans-serif', color: "var(--fg)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>admin@ascend.io</span>
              <span style={{ font: '400 11px "Inter", sans-serif', color: "var(--fg-subtle)" }}>Administrator</span>
            </div>
            <Icon name="logout" size={15} style={{ color: "var(--fg-subtle)", cursor: "pointer" }} />
          </div>
        </div>
      </aside>
    </React.Fragment>
  );
};

const AdminTopBar = ({ title, theme, onThemeToggle, onMenu }) => (
  <header className="app-topbar" style={{
    height: 56, flex: "0 0 56px", display: "flex", alignItems: "center",
    borderBottom: "1px solid var(--border)", background: "var(--bg)",
    padding: "0 24px", gap: 16,
  }}>
    <button className="nav-burger" onClick={onMenu} aria-label="Open menu" style={{
      all: "unset", cursor: "pointer", color: "var(--fg-muted)",
      width: 32, height: 32, display: "none", placeItems: "center", borderRadius: 6, flexShrink: 0,
    }}>
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
    </button>
    <div style={{ flex: 1, minWidth: 0, font: '500 13px/18px "Inter", sans-serif', color: "var(--fg-subtle)" }}>
      {title}
    </div>

    <div className="topbar-search" style={{
      display: "flex", alignItems: "center", gap: 8, padding: "0 10px",
      height: 30, borderRadius: 6, background: "var(--bg-alt)",
      color: "var(--fg-subtle)", font: '400 12px "Inter", sans-serif', width: 240,
    }}>
      <Icon name="search" size={13} />
      <span>Search accounts, facilities, claims…</span>
      <span style={{ marginLeft: "auto", font: '500 10px "JetBrains Mono", monospace', border: "1px solid var(--border-strong)", borderRadius: 3, padding: "1px 4px" }}>⌘K</span>
    </div>

    <div className="topbar-env" style={{
      display: "flex", alignItems: "center", gap: 6, height: 30, padding: "0 10px",
      borderRadius: 999, border: "1px solid var(--border-strong)",
      font: '500 12px "Inter", sans-serif', color: "var(--fg)",
    }}>
      <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--gold-60)" }} />
      Ethereum mainnet
    </div>

    <button onClick={onThemeToggle} title="Toggle theme" style={{
      all: "unset", cursor: "pointer", color: "var(--fg-muted)",
      width: 32, height: 32, display: "grid", placeItems: "center", borderRadius: 6,
    }}>
      <Icon name={theme === "dark" ? "sun" : "moon"} size={15} />
    </button>
    <button title="Notifications" style={{
      all: "unset", cursor: "pointer", color: "var(--fg-muted)",
      width: 32, height: 32, display: "grid", placeItems: "center", borderRadius: 6, position: "relative",
    }}>
      <Icon name="bell" size={15} />
      <span style={{ position: "absolute", top: 6, right: 7, width: 6, height: 6, borderRadius: 3, background: "var(--danger)", border: "1.5px solid var(--bg)" }} />
    </button>
  </header>
);

Object.assign(window, { AdminSideNav, AdminTopBar, AdminNavItem });