// Janaushadhi SUPER ADMIN (platform) — shared chrome + the Feature Control Center

const SAfont = { fontFamily: 'Inter, -apple-system, system-ui, sans-serif', color: C.ink900 };
// Distinct super-admin accent (indigo/violet) layered over the blue brand
const SA = { ink: '#0A0E1F', panel: '#0E1430', accent: '#6D5BFF', accentSoft: '#1A1F44' };

// ── Super-admin sidebar (darker, platform-level) ─────────────
function SuperSidebar({ active = 'overview' }) {
  const groups = [
    { h: null, items: [{ id: 'overview', l: 'Platform overview', Icon: IconHome }] },
    { h: 'CONTROL', items: [
      { id: 'features', l: 'Feature control', Icon: IconFilter, badge: '6 off' },
      { id: 'stores', l: 'Stores & tenants', Icon: IconLoc, badge: '142' },
      { id: 'rollouts', l: 'Rollouts & flags', Icon: IconScan },
    ]},
    { h: 'GOVERNANCE', items: [
      { id: 'plans', l: 'Plans & billing', Icon: IconCard },
      { id: 'roles', l: 'Roles & access', Icon: IconShield },
      { id: 'audit', l: 'Audit log', Icon: IconClock },
    ]},
    { h: 'PLATFORM', items: [
      { id: 'analytics', l: 'Network analytics', Icon: IconStar },
      { id: 'system', l: 'System health', Icon: IconBell, badge: 'OK', ok: true },
    ]},
  ];
  return (
    <div style={{ ...SAfont, width: 248, background: SA.ink, color: 'white', height: '100%', display: 'flex', flexDirection: 'column', flexShrink: 0, overflow: 'auto' }}>
      {/* Brand */}
      <div style={{ padding: '18px 18px 14px', borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 34, height: 34, borderRadius: 9, background: `linear-gradient(160deg, ${SA.accent}, #3B2FA8)`, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700 }}>J</div>
          <div>
            <div style={{ fontSize: 14, fontWeight: 700, letterSpacing: -0.01 }}>Janaushadhi</div>
            <div style={{ fontSize: 9, color: SA.accent, letterSpacing: 0.8, fontWeight: 700 }}>SUPER ADMIN · PLATFORM</div>
          </div>
        </div>
      </div>

      {/* Env switcher */}
      <div style={{ padding: '12px 14px 0' }}>
        <div style={{ padding: '8px 10px', borderRadius: 10, background: 'rgba(109,91,255,0.14)', border: '1px solid rgba(109,91,255,0.3)', display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ width: 8, height: 8, borderRadius: 4, background: C.mint500 }}/>
          <div style={{ flex: 1, fontSize: 12, fontWeight: 600 }}>Production</div>
          <IconChevD size={14} style={{ color: 'rgba(255,255,255,0.5)' }}/>
        </div>
      </div>

      <div style={{ padding: '14px 12px', flex: 1 }}>
        {groups.map((g, gi) => (
          <div key={gi} style={{ marginBottom: 14 }}>
            {g.h && <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.35)', fontWeight: 700, letterSpacing: 1, padding: '0 10px 8px' }}>{g.h}</div>}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
              {g.items.map(it => {
                const on = it.id === active;
                return (
                  <div key={it.id} style={{ padding: '9px 10px', borderRadius: 9, display: 'flex', alignItems: 'center', gap: 10, background: on ? SA.accent : 'transparent', color: on ? 'white' : 'rgba(255,255,255,0.7)', fontSize: 13, fontWeight: on ? 600 : 500 }}>
                    <it.Icon size={18}/>
                    <span style={{ flex: 1 }}>{it.l}</span>
                    {it.badge && <span className="mono" style={{ fontSize: 9, fontWeight: 700, padding: '1px 6px', borderRadius: 6, background: it.ok ? 'rgba(34,194,154,0.25)' : (on ? 'rgba(255,255,255,0.25)' : 'rgba(255,255,255,0.12)'), color: it.ok ? '#5BE3BE' : 'white' }}>{it.badge}</span>}
                  </div>
                );
              })}
            </div>
          </div>
        ))}
      </div>

      <div style={{ padding: 12, borderTop: '1px solid rgba(255,255,255,0.08)' }}>
        <div style={{ padding: '8px 10px', borderRadius: 10, background: 'rgba(255,255,255,0.06)', display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 30, height: 30, borderRadius: 15, background: SA.accent, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 12 }}>RA</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 12, fontWeight: 600 }}>Riya Anand</div>
            <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.5)' }}>Platform owner</div>
          </div>
          <IconChevR size={14} style={{ color: 'rgba(255,255,255,0.5)' }}/>
        </div>
      </div>
    </div>
  );
}

function SuperTopBar({ title, sub, actions }) {
  return (
    <div style={{ ...SAfont, padding: '16px 28px', borderBottom: `1px solid ${C.ink100}`, background: 'white', display: 'flex', alignItems: 'center', gap: 20 }}>
      <div style={{ flex: 1 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: -0.02 }}>{title}</div>
          <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: 0.5, padding: '3px 8px', borderRadius: 6, background: SA.accentSoft, color: SA.accent }}>PLATFORM</span>
        </div>
        {sub && <div style={{ fontSize: 12, color: C.ink500, marginTop: 2 }}>{sub}</div>}
      </div>
      <div style={{ width: 260, display: 'flex', alignItems: 'center', gap: 8, padding: '9px 12px', borderRadius: 10, background: C.ink50, border: `1px solid ${C.ink100}` }}>
        <IconSearch size={16} style={{ color: C.ink400 }}/>
        <span style={{ flex: 1, fontSize: 13, color: C.ink400 }}>Search stores, features, flags</span>
      </div>
      {actions}
    </div>
  );
}

function SuperShell({ active, title, sub, actions, children }) {
  return (
    <div className="screen" style={{ ...SAfont, height: '100%', display: 'flex', background: C.ink50, overflow: 'hidden' }}>
      <SuperSidebar active={active} />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0, overflow: 'hidden' }}>
        <SuperTopBar title={title} sub={sub} actions={actions} />
        <div style={{ flex: 1, overflow: 'auto', padding: 28 }}>{children}</div>
      </div>
    </div>
  );
}

// Big toggle used across super admin
function BigToggle({ on, accent = SA.accent }) {
  return (
    <div style={{ width: 46, height: 26, borderRadius: 13, background: on ? accent : C.ink200, position: 'relative', flexShrink: 0, transition: 'all .2s' }}>
      <div style={{ position: 'absolute', top: 2, left: on ? 22 : 2, width: 22, height: 22, borderRadius: 11, background: 'white', boxShadow: '0 1px 3px rgba(0,0,0,0.2)', transition: 'all .2s' }}/>
    </div>
  );
}

Object.assign(window, { SA, SuperSidebar, SuperTopBar, SuperShell, BigToggle });