/* Admin dashboard chrome: Sidebar + Topbar */
const ADMIN_NAV = [
  { id:'dashboard',      label:'Dashboard',      icon:'layout-dashboard', group:'Overview' },
  { id:'students',       label:'Students',       icon:'users',            group:'Manage' },
  { id:'academics',      label:'Gradebook',      icon:'graduation-cap',   group:'Manage' },
  { id:'transportation', label:'Transportation', icon:'bus',              group:'Manage' },
  { id:'pickup',         label:'Pickup Manager', icon:'car-front',        group:'Manage' },
  { id:'messaging',      label:'Messaging',      icon:'message-square',   group:'Manage' },
  { id:'marketplace',    label:'Marketplace',    icon:'store',            group:'Manage' },
  { id:'payments',       label:'Payments',       icon:'credit-card',      group:'Manage' },
  { id:'reports',        label:'Reports',        icon:'bar-chart-3',      group:'Insights' },
  { id:'settings',       label:'Settings',       icon:'settings',         group:'Insights' },
];

function NavItem({ n, on, onNav }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button onClick={()=>onNav(n.id)} onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)} style={{
      width:'100%', display:'flex', alignItems:'center', gap:12,
      padding:'10px 13px', marginBottom:2, borderRadius:10, border:0, cursor:'pointer',
      fontFamily:'var(--font-sans)', fontSize:14, fontWeight:600, textAlign:'left',
      position:'relative', transition:'background .14s ease, color .14s ease',
      background: on ? 'var(--blue-600)' : (hover ? 'rgba(255,255,255,.07)' : 'transparent'),
      color: on ? '#fff' : (hover ? '#fff' : 'var(--on-navy-soft)'),
      boxShadow: on ? '0 6px 16px rgba(25,53,180,.35)' : 'none',
    }}>
      {on && <span style={{ position:'absolute', left:-16, top:'50%', transform:'translateY(-50%)', width:3, height:20, borderRadius:'0 3px 3px 0', background:'var(--gold-400)' }} />}
      <Icon name={n.icon} size={19} color="currentColor" stroke={on?2.1:1.9} />
      {n.label}
    </button>
  );
}

function Sidebar({ active, onNav }) {
  let lastGroup = null;
  return (
    <div style={{
      width:236, flex:'0 0 236px',
      display:'flex', flexDirection:'column', height:'100%',
      backgroundImage:'linear-gradient(180deg, #06183A 0%, #001533 100%)',
    }}>
      <div style={{ padding:'22px 22px 16px', display:'flex', alignItems:'center', gap:10 }}>
        <img src={window.JL_LOGO_TRANS || 'assets/logo-onnavy-trans.png'} alt="JewelLink EDU" style={{ height:34, display:'block' }} />
      </div>
      <div style={{ padding:'6px 16px', flex:1, overflowY:'auto' }}>
        {ADMIN_NAV.map(n => {
          const header = n.group !== lastGroup ? n.group : null;
          lastGroup = n.group;
          return (
            <React.Fragment key={n.id}>
              {header && <div style={{ fontSize:10, fontWeight:800, letterSpacing:'.12em', textTransform:'uppercase', color:'rgba(255,255,255,.32)', padding:'14px 13px 7px' }}>{header}</div>}
              <NavItem n={n} on={active===n.id} onNav={onNav} />
            </React.Fragment>
          );
        })}
      </div>
      <div style={{ padding:'14px', borderTop:'1px solid rgba(255,255,255,.08)', display:'flex', alignItems:'center', gap:11 }}>
        <Avatar initials="DR" color="gold" size={36} />
        <div style={{ flex:1, minWidth:0 }}>
          <div style={{ fontSize:13, fontWeight:700, color:'#fff' }}>District Office</div>
          <div style={{ fontSize:11.5, color:'var(--on-navy-soft)' }}>Super Admin</div>
        </div>
        <button onClick={()=>jlToast('Signed out', { icon:'log-out' })} style={{ border:0, background:'transparent', cursor:'pointer', display:'flex', padding:4 }}><Icon name="log-out" size={17} color="var(--on-navy-soft)" /></button>
      </div>
    </div>
  );
}

function Topbar({ title, subtitle }) {
  return (
    <div style={{
      display:'flex', alignItems:'center', gap:16, padding:'16px 28px',
      borderBottom:'1px solid var(--gray-200)', background:'#fff',
    }}>
      <div style={{ flex:1 }}>
        <div style={{ fontSize:20, fontWeight:800, color:'var(--ink)', letterSpacing:'-.01em' }}>{title}</div>
        {subtitle && <div style={{ fontSize:13, color:'var(--gray-500)', marginTop:1 }}>{subtitle}</div>}
      </div>
      <div style={{ display:'flex', alignItems:'center', gap:10, background:'var(--gray-100)', border:'1px solid var(--gray-200)', borderRadius:'999px', padding:'9px 15px', width:260 }}>
        <Icon name="search" size={17} color="var(--gray-500)" />
        <input placeholder="Search students, buses…" style={{ flex:1, border:0, background:'transparent', outline:'none', fontSize:13.5, fontFamily:'var(--font-sans)', color:'var(--ink)' }} />
      </div>
      <button onClick={()=>jlToast('3 new alerts', { icon:'bell' })} style={{ position:'relative', width:42, height:42, borderRadius:'999px', border:'1px solid var(--gray-200)', background:'#fff', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer' }}>
        <Icon name="bell" size={19} color="var(--navy-600)" />
        <span style={{ position:'absolute', top:9, right:10, width:8, height:8, borderRadius:'999px', background:'var(--danger-500)', border:'1.5px solid #fff' }} />
      </button>
    </div>
  );
}

Object.assign(window, { Sidebar, Topbar, ADMIN_NAV });