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

function Sidebar({ active = "dashboard", onNav, alertCount = 4 }) {
  const items = [
    { 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: "Alertas",           icon: Icon.bell, badge: alertCount }
    ]},
    { group: "Catálogos", links: [
      { id: "catalog", label: "Insumos",     icon: Icon.catalog },
      { id: "vendors", label: "Proveedores", icon: Icon.vendors },
      { id: "history", label: "Historial",   icon: Icon.history }
    ]},
    { group: "Sistema", links: [
      { id: "settings", label: "Configuración", icon: Icon.settings }
    ]}
  ];
  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">{ROCA_USER.initials}</div>
        <div className="rg-user-info">
          <span className="n">{ROCA_USER.name}</span>
          <span className="r">{ROCA_USER.role}</span>
        </div>
      </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 });