// shaiAcademy — Shell (sidebar, topbar)

const NAV_ITEMS = {
  admin: [
    { section: 'Academia', items: [
      { id: 'dash-academia', label: 'Panel',        icon: 'home' },
      { id: 'alumnos',       label: 'Alumnos',      icon: 'users',     count: 108 },
      { id: 'profesores',    label: 'Profesores',   icon: 'whistle',   count: 6 },
      { id: 'grupos',        label: 'Grupos',       icon: 'clipboard', count: 6 },
    ]},
    { section: 'Operación', items: [
      { id: 'asistencia',    label: 'Asistencia',    icon: 'check' },
      { id: 'pagos',         label: 'Pagos',         icon: 'money' },
      { id: 'planes',        label: 'Planes',        icon: 'chart' },
      { id: 'evaluaciones',  label: 'Evaluaciones',  icon: 'star' },
      { id: 'nutricion',     label: 'Nutrición',     icon: 'apple' },
    ]},
    { section: 'Perfiles', items: [
      { id: 'alumno-detalle',label: 'Ficha Alumno',  icon: 'user' },
      { id: 'cv',            label: 'CV Deportivo',  icon: 'file' },
    ]},
    { section: 'Formularios', items: [
      { id: 'form-inscripcion', label: 'Inscripción',     icon: 'plus' },
      { id: 'form-pago',        label: 'Pago',             icon: 'money' },
      { id: 'form-grupo',       label: 'Grupo / clase',    icon: 'clipboard' },
      { id: 'form-profesor',    label: 'Alta profesor',    icon: 'whistle' },
      { id: 'form-evaluacion',  label: 'Evaluación',       icon: 'star' },
      { id: 'form-settings',    label: 'Configuración',    icon: 'settings' },
    ]},
    { section: 'Acceso', items: [
      { id: 'login',         label: 'Login',         icon: 'user' },
      { id: 'recuperar',     label: 'Recuperar',     icon: 'lock' },
      { id: 'registro',      label: 'Registro',      icon: 'mail' },
    ]},
  ],
  coach: [
    { section: 'Entrenador', items: [
      { id: 'dash-coach',    label: 'Panel',         icon: 'home' },
      { id: 'asistencia-mobile', label: 'Pasar lista', icon: 'check' },
    ]},
    { section: 'Formularios', items: [
      { id: 'form-asistencia', label: 'Asistencia manual', icon: 'check' },
      { id: 'form-incidente',  label: 'Reporte lesión',    icon: 'bell' },
      { id: 'form-agendar',    label: 'Agendar reunión',   icon: 'calendar' },
    ]},
  ],
  alumno: [
    { section: 'Atleta', items: [
      { id: 'dash-alumno',   label: 'Mi panel',      icon: 'home' },
      { id: 'cv',            label: 'Mi CV',         icon: 'file' },
    ]},
    { section: 'Formularios', items: [
      { id: 'form-nutricion',    label: 'Registrar comida',  icon: 'apple' },
      { id: 'form-justificacion',label: 'Justificar falta',  icon: 'mail' },
    ]},
  ],
  super_admin: [
    { section: 'Plataforma', items: [
      { id: 'dash-admin',        label: 'Panel',           icon: 'home' },
      { id: 'academias-list',    label: 'Academias',       icon: 'clipboard', count: 47 },
      { id: 'usuarios-globales', label: 'Usuarios',        icon: 'users',     count: '3.8k' },
      { id: 'billing-plataforma',label: 'Billing',         icon: 'money' },
      { id: 'logs-actividad',    label: 'Logs',            icon: 'file' },
    ]},
    { section: 'Academia activa', items: [
      { id: 'academia-detalle',  label: 'Academia Gutiérrez', icon: 'user' },
    ]},
    { section: 'Operaciones', items: [
      { id: 'form-academia',     label: 'Crear academia',  icon: 'plus' },
    ]},
  ],
};

const Sidebar = ({ current, setCurrent, role, open, onClose }) => {
  const sections = NAV_ITEMS[role] || NAV_ITEMS.admin;
  const isSA = role === 'super_admin';
  return (
    <aside className={`sidebar ${open ? 'open' : ''} ${isSA ? 'sidebar-sa' : ''}`}>
      <div className="brand">
        <span className="brand-mark">s</span>
        <span style={{minWidth: 0, overflow: 'hidden'}}>
          <div className="brand-name" style={{whiteSpace: 'nowrap'}}>shai<em style={{fontStyle:'italic'}}>Academy</em></div>
          <div className="eyebrow" style={{fontSize: 9, marginTop: 2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}>
            {isSA ? 'Plataforma · Super admin' : 'Academia Gutiérrez'}
          </div>
        </span>
      </div>
      {sections.map((s, i) => (
        <div key={i} className="nav-section">
          <div className="nav-section-title">{s.section}</div>
          <div className="stack-s">
            {s.items.map(it => (
              <div key={it.id} className={`nav-item ${current === it.id ? 'active' : ''}`} onClick={() => { setCurrent(it.id); onClose && onClose(); }}>
                <Icon name={it.icon} size={14}/>
                <span className="nav-label">{it.label}</span>
                {it.count != null && <span className="nav-count num">{it.count}</span>}
              </div>
            ))}
          </div>
        </div>
      ))}
      <div className="role-switcher">
        <div className="eyebrow" style={{marginBottom: 8, padding: '0 10px'}}>Ver como</div>
        <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4, padding: '0 6px'}}>
          {[
            ['super_admin','Super'],
            ['admin','Admin'],
            ['coach','Profesor'],
            ['alumno','Alumno'],
          ].map(([r, label]) => (
            <button key={r} className={`chip ${role === r ? 'active' : ''}`} style={{justifyContent: 'center', fontSize: 11, padding: '5px 6px'}} onClick={() => window.__setRole(r)}>
              {label}
            </button>
          ))}
        </div>
      </div>
    </aside>
  );
};

const Topbar = ({ title, subtitle, onMenu, role }) => {
  const sa = role === 'super_admin';
  return (
  <div className="topbar">
    <button className="menu-btn" onClick={onMenu} aria-label="Menú"><Icon name="menu" size={16}/></button>
    <div className="topbar-title">
      <div className="eyebrow">{subtitle || (sa ? 'Plataforma shaiAcademy' : 'Academia · Lima, Perú')}</div>
      <div className="topbar-h1">{title}</div>
    </div>
    <div className="row" style={{flex: 'none', gap: 8}}>
      <button className="btn btn-ghost btn-sm"><Icon name="search" size={14}/><span className="btn-ghost-label"> Buscar</span></button>
      <button className="btn btn-ghost btn-sm"><Icon name="bell" size={14}/></button>
      <div className="row topbar-user" style={{gap: 10, paddingLeft: 12, borderLeft: '1px solid var(--rule)', flex: 'none'}}>
        <Avatar name={sa ? 'Shai Plataforma' : 'Shaira Gutiérrez'} variant={sa ? 'avatar-a' : 'avatar-c'}/>
        <div style={{lineHeight: 1.25, whiteSpace: 'nowrap'}}>
          <div style={{fontSize: 12, fontWeight: 500}}>{sa ? 'Andrés Yataco' : 'Shaira Gutiérrez'}</div>
          <div className="tiny muted">{sa ? 'Staff · Super admin' : 'Owner · Admin'}</div>
        </div>
      </div>
    </div>
  </div>
  );
};

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