// ─────────────────────────────────────────────────────
// Sidebar + Topbar shell
// Filters nav by user.permisos. Footer with user/logout/chpwd menu.
// Global search routes to leads view with prefilled query.
// ─────────────────────────────────────────────────────

const initials = (name) => {
  if (!name) return '?';
  const parts = String(name).trim().split(/\s+/);
  return ((parts[0] || '')[0] || '').toUpperCase() + ((parts[1] || '')[0] || '').toUpperCase() || parts[0][0].toUpperCase();
};

const Sidebar = ({ active, onNav, counts, user, can, onLogout, onChangePassword, onMcpToken }) => {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [search, setSearch] = React.useState('');
  const menuRef = React.useRef(null);

  React.useEffect(() => {
    const onDoc = (e) => { if (menuRef.current && !menuRef.current.contains(e.target)) setMenuOpen(false); };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, []);

  const submitSearch = (e) => {
    if (e.key !== 'Enter') return;
    const q = search.trim();
    if (!q) return;
    if (can.leads) {
      window.dispatchEvent(new CustomEvent('erp:global-search', { detail: { q } }));
      onNav('leads');
    }
  };

  // Cmd/Ctrl-K focus search
  React.useEffect(() => {
    const h = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
        e.preventDefault();
        document.querySelector('.sb-search input')?.focus();
      }
    };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, []);

  const showCRM = can.leads || can.configurador || can.presupuestos;
  const showOps = can.compras || can.partes || can.tareas || can.misTareas || can.catalogo;

  return (
    <aside className="sb">
      <div className="sb-brand">
        <img src="/kurtenglass-logo.webp" alt="Kurtenglass" />
        <span className="env-pill">ERP</span>
      </div>

      <div className="sb-search">
        <Icon name="search" />
        <input
          placeholder="Buscar en todo el ERP…"
          value={search}
          onChange={(e)=>setSearch(e.target.value)}
          onKeyDown={submitSearch}
        />
        <kbd>⌘K</kbd>
      </div>

      <nav className="sb-nav">
        <button className={`sb-item ${active==='dashboard'?'active':''}`} onClick={() => onNav('dashboard')}>
          <Icon name="layout" /> Dashboard
        </button>

        {showCRM && <div className="sb-group-label">Comercial</div>}
        {can.leads && (
          <button className={`sb-item ${active==='leads'?'active':''}`} onClick={() => onNav('leads')}>
            <Icon name="leads" /> Leads
            {counts.leads > 0 && <span className="count">{counts.leads}</span>}
          </button>
        )}
        {can.presupuestos && (
          <button className={`sb-item ${active==='presupuestos'?'active':''}`} onClick={() => onNav('presupuestos')}>
            <Icon name="calc" /> Presupuestos
          </button>
        )}
        {can.catalogoProductos && (
          <button className={`sb-item ${active==='catalogo-productos'?'active':''}`} onClick={() => onNav('catalogo-productos')}>
            <Icon name="package" /> Catálogo de productos
          </button>
        )}
        {can.configurador && (
          <button className={`sb-item ${active==='configurador'?'active':''}`} onClick={() => onNav('configurador')}>
            <Icon name="settings" /> Configurador
            <span className="count" style={{marginLeft:'auto',background:'transparent',color:'var(--ink-3)',border:'1px solid var(--line)',fontSize:10,fontWeight:600}}>Pronto</span>
          </button>
        )}

        {showOps && <div className="sb-group-label">Operaciones</div>}
        {can.compras && can.expedientes && (
          <button className={`sb-item ${active==='expedientes'?'active':''}`} onClick={() => onNav('expedientes')}>
            <Icon name="package" /> Expedientes
          </button>
        )}
        {can.compras && can.ordenes && (
          <button className={`sb-item ${active==='ordenes'?'active':''}`} onClick={() => onNav('ordenes')}>
            <Icon name="boxes" /> Órdenes a proveedor
            {counts.ordenes > 0 && <span className="count">{counts.ordenes}</span>}
          </button>
        )}
        {can.compras && can.produccion && (
          <button className={`sb-item ${active==='produccion'?'active':''}`} onClick={() => onNav('produccion')}>
            <Icon name="factory" /> Producción
          </button>
        )}
        {can.catalogo && (
          <button className={`sb-item ${active==='catalogo'?'active':''}`} onClick={() => onNav('catalogo')}>
            <Icon name="package" /> Catálogo de artículos
          </button>
        )}
        {can.partes && (
          <button className={`sb-item ${active==='partes'?'active':''}`} onClick={() => onNav('partes')}>
            <Icon name="wrench" /> Partes de trabajo
            {counts.partesLive > 0 && <span className="count">{counts.partesLive}</span>}
          </button>
        )}
        {can.tareas && (
          <button className={`sb-item ${active==='tareas'?'active':''}`} onClick={() => onNav('tareas')}>
            <Icon name="list" /> Tareas
          </button>
        )}
        {can.misTareas && (
          <button className={`sb-item ${active==='mis-tareas'?'active':''}`} onClick={() => onNav('mis-tareas')}>
            <Icon name="list" /> Mis tareas
          </button>
        )}

        {can.sistema && (
          <>
            <div className="sb-group-label">Sistema</div>
            <button className={`sb-item ${active==='sistema'?'active':''}`} onClick={() => onNav('sistema')}>
              <Icon name="settings" /> Configuración
            </button>
          </>
        )}
      </nav>

      <div className="sb-foot" ref={menuRef}>
        <div className="avatar">{initials(user.username)}</div>
        <div className="who">
          <div className="n">{user.username}</div>
          <div className="r">{user.rol}</div>
        </div>
        <button className="more" onClick={()=>setMenuOpen(o=>!o)} aria-label="Menú usuario">
          <Icon name="more" size={14} />
        </button>
        {menuOpen && (
          <div className="user-menu">
            <button onClick={()=>{ setMenuOpen(false); onChangePassword(); }}>Cambiar contraseña</button>
            <button onClick={()=>{ setMenuOpen(false); onMcpToken && onMcpToken(); }}>Token MCP</button>
            <button onClick={()=>{ if (confirm('¿Cerrar sesión?')) { setMenuOpen(false); onLogout(); } }}>Cerrar sesión</button>
          </div>
        )}
      </div>
    </aside>
  );
};

const Topbar = ({ crumbs = [], actions }) => {
  const safeCrumbs = Array.isArray(crumbs) && crumbs.length ? crumbs : ['ERPkurten'];
  return (
    <div className="topbar">
      <div className="crumbs">
        {safeCrumbs.map((c, i) => (
          <React.Fragment key={i}>
            {i > 0 && <span className="sep"><Icon name="chevron_right" size={12}/></span>}
            <span className={i === safeCrumbs.length - 1 ? 'last' : ''}>{c}</span>
          </React.Fragment>
        ))}
      </div>
      <div className="spacer" />
      <div className="topbar-actions">
        {actions}
        <button className="icon-btn tip" data-tip="Ayuda"><Icon name="info" /></button>
        <button className="icon-btn has-dot tip" data-tip="Notificaciones"><Icon name="bell" /></button>
      </div>
    </div>
  );
};

window.Sidebar = Sidebar;
window.Topbar = Topbar;