// Shell — sidebar + topbar + page outlet

function Sidebar({ route, setRoute, user, onLogout, collapsed, setCollapsed }) {
  const items = [
    { id: "vendas",      icon: "sales",   label: "Vendas",      section: "MÓDULOS" },
    { id: "clientes",    icon: "users",   label: "Clientes",    section: null },
    { id: "vendedores",  icon: "user",    label: "Vendedores",  section: null },
    { id: "producao",    icon: "factory", label: "Produção",    section: null, soon: true },
    { id: "relatorios",  icon: "chart",   label: "Relatórios",  section: null, soon: true },
  ];
  return (
    <aside className="sidebar">
      <div className="sidebar__brand">
        <div className="sidebar__logo">
          <svg viewBox="0 0 100 100" fill="none">
            <path d="M12 86L40 14L50 36L60 14L88 86H72L60 56L50 78L40 56L28 86Z" fill="#0d0d0d" stroke="#0d0d0d" strokeWidth="2" strokeLinejoin="round"/>
            <circle cx="50" cy="40" r="6" fill="#0d0d0d" />
          </svg>
        </div>
        <div className="sidebar__brand-text">
          <b>Metal Padrão</b>
          <small>Sistema interno</small>
        </div>
      </div>

      <div className="sidebar__section-label">Módulos</div>
      <nav className="sidebar__nav">
        {items.map(it => (
          <div
            key={it.id}
            className={`sidebar__item ${route === it.id ? "sidebar__item--active" : ""} ${it.soon ? "sidebar__item--soon" : ""}`}
            onClick={() => !it.soon && setRoute(it.id)}
            title={it.label}
          >
            <Icon name={it.icon} size={17} />
            <span className="sidebar__item-label">{it.label}</span>
            {it.soon && <span className="sidebar__item-soon">em breve</span>}
          </div>
        ))}
      </nav>

      <div className="sidebar__footer">
        <span className="avatar" style={{ width: 32, height: 32, background: "var(--mp-yellow)", fontSize: 12 }}>
          {(user?.nome || "U").split(" ").slice(0,2).map(x => x[0]).join("")}
        </span>
        <div className="sidebar__user">
          <b>{user?.nome}</b>
          <small>{user?.perfil}</small>
        </div>
        <button className="icon-btn" onClick={onLogout} title="Sair">
          <Icon name="logout" size={16} />
        </button>
      </div>
    </aside>
  );
}

function Topbar({ title, crumb, actions, onToggleMobile }) {
  const [q, setQ] = React.useState("");
  return (
    <header className="topbar">
      <button className="icon-btn menu-toggle" onClick={onToggleMobile} aria-label="Menu">
        <Icon name="menu" size={18} />
      </button>
      <div>
        {crumb && <div className="topbar__crumb">{crumb}</div>}
        <h1 className="topbar__title">{title}</h1>
      </div>
      <div className="topbar__search">
        <Icon name="search" size={15} />
        <input value={q} onChange={e => setQ(e.target.value)} placeholder="Buscar por OP, cliente, vendedor..." />
      </div>
      <div className="topbar__actions">
        <button className="icon-btn" title="Notificações"><Icon name="bell" size={17} /></button>
        <button className="icon-btn" title="Configurações"><Icon name="settings" size={17} /></button>
        {actions}
      </div>
    </header>
  );
}

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