// Janaushadhi Admin — shared chrome (sidebar + topbar) for the back-office panel
// Desktop 1280×900 inside browser frame.

const Afont = { fontFamily: 'Inter, -apple-system, system-ui, sans-serif', color: C.ink900 };

// ── Sidebar ───────────────────────────────────────────────────
function AdminSidebar({ active = 'dashboard' }) {
  const groups = [
    { h: null, items: [
      { id: 'dashboard', l: 'Dashboard', Icon: IconHome },
    ]},
    { h: 'OPERATIONS', items: [
      { id: 'orders', l: 'Orders', Icon: IconBox, badge: '38' },
      { id: 'rx', l: 'Rx verification', Icon: IconRx, badge: '12', urgent: true },
      { id: 'delivery', l: 'Delivery', Icon: IconTruck },
    ]},
    { h: 'CATALOG', items: [
      { id: 'catalog', l: 'Products', Icon: IconPill },
      { id: 'inventory', l: 'Inventory', Icon: IconScan, badge: '7', urgent: true },
      { id: 'promos', l: 'Promotions', Icon: IconStar },
    ]},
    { h: 'PEOPLE', items: [
      { id: 'customers', l: 'Customers', Icon: IconUser },
      { id: 'doctors', l: 'Doctors & labs', Icon: IconShield },
      { id: 'staff', l: 'Pharmacists', Icon: IconHeart },
    ]},
    { h: 'INSIGHTS', items: [
      { id: 'analytics', l: 'Analytics', Icon: IconStar },
      { id: 'settings', l: 'Settings', Icon: IconFilter },
    ]},
  ];
  return (
    <div style={{
      ...Afont, width: 244, background: C.navy900, color: 'white', height: '100%',
      display: 'flex', flexDirection: 'column', flexShrink: 0, overflow: 'auto',
    }}>
      {/* Brand */}
      <div style={{ padding: '18px 18px 14px', display: 'flex', alignItems: 'center', gap: 10, borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
        <div style={{ width: 34, height: 34, borderRadius: 9, background: `linear-gradient(160deg, ${C.blue400}, ${C.blue600})`, 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: 'rgba(255,255,255,0.5)', letterSpacing: 0.6, fontWeight: 600 }}>ADMIN CONSOLE</div>
        </div>
      </div>

      {/* Store switcher */}
      <div style={{ padding: '12px 14px 0' }}>
        <div style={{ padding: '8px 10px', borderRadius: 10, background: 'rgba(255,255,255,0.08)', display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ width: 26, height: 26, borderRadius: 7, background: C.mint500, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IconLoc size={14}/></div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 12, fontWeight: 600 }}>Indiranagar store</div>
            <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.5)' }}>DL-560038</div>
          </div>
          <IconChevD size={14} style={{ color: 'rgba(255,255,255,0.5)' }}/>
        </div>
      </div>

      {/* Nav */}
      <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.4)', 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 ? C.blue600 : '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: 10, fontWeight: 700, padding: '1px 6px', borderRadius: 6,
                        background: it.urgent ? C.rose500 : (on ? 'rgba(255,255,255,0.25)' : 'rgba(255,255,255,0.12)'),
                        color: 'white',
                      }}>{it.badge}</span>
                    )}
                  </div>
                );
              })}
            </div>
          </div>
        ))}
      </div>

      {/* User */}
      <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: C.blue400, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 12 }}>SV</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 12, fontWeight: 600 }}>Suresh Verma</div>
            <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.5)' }}>Store admin</div>
          </div>
          <IconChevR size={14} style={{ color: 'rgba(255,255,255,0.5)' }}/>
        </div>
      </div>
    </div>
  );
}

// ── Top bar ───────────────────────────────────────────────────
function AdminTopBar({ title, sub, actions }) {
  return (
    <div style={{
      ...Afont, padding: '16px 28px', borderBottom: `1px solid ${C.ink100}`, background: 'white',
      display: 'flex', alignItems: 'center', gap: 20,
    }}>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: -0.02 }}>{title}</div>
        {sub && <div style={{ fontSize: 12, color: C.ink500, marginTop: 2 }}>{sub}</div>}
      </div>
      {/* Search */}
      <div style={{ width: 280, 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 orders, products, customers</span>
        <span className="mono" style={{ fontSize: 10, padding: '2px 6px', borderRadius: 5, background: 'white', border: `1px solid ${C.ink200}`, color: C.ink500, fontWeight: 600 }}>/</span>
      </div>
      <div style={{ width: 38, height: 38, borderRadius: 10, background: C.ink50, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', color: C.ink700 }}>
        <IconBell size={18}/>
        <div style={{ position: 'absolute', top: 8, right: 9, width: 8, height: 8, borderRadius: 4, background: C.rose500, border: '2px solid white' }}/>
      </div>
      {actions}
    </div>
  );
}

// ── Status pill helper ────────────────────────────────────────
function AdminStatus({ label, tone }) {
  const tones = {
    blue: { bg: C.blue50, fg: C.blue600 },
    mint: { bg: C.mint100, fg: '#0F5A48' },
    amber: { bg: C.amber100, fg: '#7A4500' },
    rose: { bg: C.rose100, fg: '#7A1C1F' },
    gray: { bg: C.ink100, fg: C.ink600 || C.ink500 },
  };
  const t = tones[tone] || tones.gray;
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '3px 9px', borderRadius: 999, background: t.bg, color: t.fg, fontSize: 11, fontWeight: 600 }}>
      <span style={{ width: 6, height: 6, borderRadius: 3, background: t.fg }}/>{label}
    </span>
  );
}

// ── Admin shell wrapper ───────────────────────────────────────
function AdminShell({ active, title, sub, actions, children }) {
  return (
    <div className="screen" style={{ ...Afont, height: '100%', display: 'flex', background: C.ink50, overflow: 'hidden' }}>
      <AdminSidebar active={active} />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0, overflow: 'hidden' }}>
        <AdminTopBar title={title} sub={sub} actions={actions} />
        <div style={{ flex: 1, overflow: 'auto', padding: 28 }}>
          {children}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AdminSidebar, AdminTopBar, AdminStatus, AdminShell });