/* global React */
// Sidebar + Topbar components

function Sidebar({ modules, activeId, onNavigate }) {
  const I = window.Icons;
  return (
    <aside className="sidebar app__sidebar">
      <div className="sidebar__section-label">Navegación</div>
      <nav className="sidebar__nav scroll-hide">
        {modules.map(m => (
          <button
            key={m.id}
            type="button"
            className={`nav-item${activeId === m.id ? ' is-active' : ''}`}
            onClick={() => onNavigate(m.id)}
          >
            <span className="nav-item__icon">{React.createElement(I[m.icon], { size: 17 })}</span>
            <span>{m.nav}</span>
            {m.badge && (
              <span className={`nav-item__badge${m.badge.tone === 'info' ? ' is-info' : ''}`}>
                {m.badge.count}
              </span>
            )}
          </button>
        ))}
      </nav>

      <div className="sidebar__footer">
        <I.AlertCircle size={14} />
        <span>v0.1 · Sinapsis × CGR · BID</span>
      </div>
    </aside>
  );
}

function Topbar({ user, activeModule }) {
  const I = window.Icons;
  return (
    <header className="topbar app__topbar">
      <div className="topbar__brand">
        <img src="assets/cgr-logo.png" alt="Contraloría General de la República · Paraguay" />
      </div>
      <div className="topbar__breadcrumb">
        <span>Compromisos Internacionales</span>
        <span className="sep"><I.ChevronRight size={12} /></span>
        <strong>{activeModule}</strong>
      </div>

      <div className="topbar__search">
        <span className="topbar__search-icon"><I.Search size={15} /></span>
        <input type="text" placeholder="Buscar por ID interno, recomendación, institución…" />
        <kbd>⌘ K</kbd>
      </div>

      <button type="button" className="topbar__icon-btn" aria-label="Alertas">
        <I.Bell size={17} />
        <span className="dot"></span>
      </button>
      <button type="button" className="topbar__icon-btn" aria-label="Mensajes">
        <I.MessageSquare size={17} />
      </button>

      <button type="button" className="topbar__user">
        <div className="topbar__user-info">
          <strong>{user.name}</strong>
          <small>{user.role}</small>
        </div>
        <div className="topbar__user-avatar">{user.initials}</div>
      </button>
    </header>
  );
}

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