// ROCA GOLF — Sidebar + Topbar (golf dark theme only)

// ── Permisos ──────────────────────────────────────────────────────────────────
// v9.0: ya no hay un mapa fijo aquí — el backend calcula qué módulos puede ver
// cada usuario (rol + excepciones individuales, configurables en Configuración
// → Permisos, ver api/permisos.php) y lo manda en user.modulos al hacer login
// o restaurar sesión (api/auth.php, api/session.php). Este archivo solo LEE esa
// lista; la fuente de verdad real está en api/config.php (userCan/modulosDeUsuario).
// Fallback a [] (nada) si por algo faltara — fail-closed, no fail-open.
function canAccess(user, viewId) {
  const modulos = user && Array.isArray(user.modulos) ? user.modulos : [];
  return modulos.includes(viewId);
}

const ROL_LABELS = {
  administrador:     'Administrador',
  contralor:         'Contralor',
  auxiliarcontable:  'Auxiliar Contable',
  directorproyectos: 'Director de Proyectos',
  tesorero:          'Tesorero',
  supervisor:        'Supervisor',
  proyectos:         'Proyectos',
};

const IcoUsuarios = (s = 15) => (
  <svg width={s} height={s} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round">
    <circle cx="6" cy="5" r="2.2"/>
    <path d="M2 14c0-2.5 1.8-4 4-4s4 1.5 4 4"/>
    <path d="M11 7.5a2 2 0 1 1 0-4M14 14c0-2-1.2-3.5-3-3.8"/>
  </svg>
);

function Sidebar({ active = "dashboard", onNav, alertCount = 4, user, onLogout }) {
  const rol = user?.rol || '';
  const allItems = [
    { group: "Operación", links: [
      { id: "dashboard", label: "Dashboard",         icon: Icon.dashboard },
      { id: "reports",   label: "Reportes",          icon: Icon.reports },
      { id: "oc",        label: "Órdenes de compra", icon: Icon.oc },
      { id: "alerts",    label: "Presupuestos",       icon: Icon.budget, badge: alertCount },
      { id: "reporte_ia", label: "Reporte IA",        icon: Icon.reporteia }
    ]},
    { group: "Catálogos", links: [
      { id: "catalog",    label: "Insumos",      icon: Icon.catalog },
      { id: "admin_proy", label: "Admin. de Proyecto", icon: Icon.budget },
      { id: "import_presupuesto", label: "Importar Presupuesto (IA)", icon: Icon.excel },
      { id: "import_oc",  label: "Importar OCs", icon: Icon.excel },
      { id: "vendors",    label: "Proveedores",  icon: Icon.vendors },
      { id: "history",    label: "Historial",    icon: Icon.history }
    ]},
    { group: "Sistema", links: [
      { id: "usuarios",         label: "Usuarios",          icon: IcoUsuarios },
      { id: "reestructuracion", label: "Reestructuración",  icon: Icon.edit },
      { id: "settings",         label: "Configuración",     icon: Icon.settings }
    ]}
  ];

  // Filtrar ítems según los módulos efectivos del usuario; omitir grupos vacíos
  const items = allItems
    .map(g => ({ ...g, links: g.links.filter(l => canAccess(user, l.id)) }))
    .filter(g => g.links.length > 0);

  const rolLabel = ROL_LABELS[rol] || rol;

  return (
    <aside className="rg-sidebar">
      <div className="rg-brand">
        <img src="assets/roca-golf-logo.png" alt="ROCA GOLF"/>
        <div className="rg-brand-text">
          <span className="name">ROCA GOLF</span>
          <span className="sub">Compras &amp; Presupuesto</span>
        </div>
      </div>
      <nav className="rg-nav">
        {items.map((g, gi) => (
          <React.Fragment key={gi}>
            <div className="rg-nav-section">{g.group}</div>
            {g.links.map(l => (
              <button key={l.id}
                className={"rg-nav-item" + (active === l.id ? " active" : "")}
                onClick={() => onNav && onNav(l.id)}>
                {l.icon(15)}
                <span>{l.label}</span>
                {l.badge ? <span className="badge">{l.badge}</span> : null}
              </button>
            ))}
          </React.Fragment>
        ))}
      </nav>
      <div className="rg-sidebar-footer">
        <div className="rg-avatar">
          {user ? user.nombre.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase() : ROCA_USER.initials}
        </div>
        <div className="rg-user-info">
          <span className="n">{user ? user.nombre : ROCA_USER.name}</span>
          <span className="r">{rolLabel}</span>
        </div>
        {onLogout && (
          <button
            title="Cerrar sesión"
            onClick={onLogout}
            style={{ background:'none', border:'none', cursor:'pointer', color:'rgba(216,211,200,0.45)', padding:'4px', borderRadius:4, marginLeft:'auto', display:'flex', alignItems:'center', transition:'color .12s' }}
            onMouseEnter={e => e.currentTarget.style.color='rgba(216,211,200,0.9)'}
            onMouseLeave={e => e.currentTarget.style.color='rgba(216,211,200,0.45)'}
          >
            <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
              <path d="M9 2H12a1 1 0 011 1v9a1 1 0 01-1 1H9M6 10.5l3-3-3-3M9 7.5H2" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
        )}
      </div>
    </aside>
  );
}

function Topbar({ crumbs = "Compras / Dashboard", title = "Panel general", periodLabel = "Q2 2026 · Abril", actions, onSearch }) {
  return (
    <div className="rg-topbar">
      <div>
        <div className="crumbs">{crumbs}</div>
        <h1>{title}</h1>
      </div>
      <div className="rg-topbar-right">
        <div className="rg-search">
          {Icon.search()}
          <input placeholder="Buscar OC, proveedor, insumo…" onChange={e => onSearch && onSearch(e.target.value)}/>
        </div>
        <button className="rg-btn">{Icon.filter()} <span>{periodLabel}</span></button>
        {actions || <button className="rg-btn primary">{Icon.plus(13)} Nueva OC</button>}
      </div>
    </div>
  );
}

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