// Shell — Sidebar + Topbar

const { useState: useStateShell } = React;

const NAV_TREE = [
  { type: "item", id: "dashboard", label: "Dashboard", icon: "home" },
  { type: "group", label: "Live" },
  { type: "item", id: "live-planejamento", label: "Planejamento", icon: "cake", badge: { text: "3", kind: "muted" } },
  { type: "item", id: "live-apresentar", label: "Apresentar", icon: "live", badge: { text: "AO VIVO", kind: "accent" } },
  { type: "item", id: "live-pedidos", label: "Pedidos", icon: "list", badge: { text: "47" } },
  { type: "item", id: "live-bag", label: "Bag", icon: "bag", badge: { text: "4", kind: "muted" } },
  { type: "item", id: "live-sortear", label: "Sortear", icon: "gift" },
  { type: "group", label: "Loja" },
  { type: "item", id: "loja-pdv", label: "Caixa (PDV)", icon: "store" },
  { type: "item", id: "loja-crediario", label: "Crediário", icon: "dollar", badge: { text: "6", kind: "muted" } },
  { type: "item", id: "loja-financeiro", label: "Financeiro", icon: "chart" },
  { type: "group", label: "Site" },
  { type: "item", id: "site-pedidos", label: "Pedidos e-com", icon: "site", badge: { text: "12", kind: "muted" } },
  { type: "item", id: "site-carrinhos", label: "Carrinhos", icon: "cart", badge: { text: "4" } },
  { type: "group", label: "Catálogo & CRM" },
  { type: "item", id: "produtos", label: "Produtos", icon: "package" },
  { type: "item", id: "clientes", label: "Clientes", icon: "users" },
  { type: "group", label: "Inteligência" },
  { type: "item", id: "disparo", label: "Disparo em massa", icon: "send", badge: { text: "novo", kind: "accent" } },
  { type: "item", id: "marketing", label: "Marketing", icon: "megaphone" },
  { type: "item", id: "relatorios", label: "Relatórios", icon: "layers" },
  { type: "group", label: "Sistema" },
  { type: "item", id: "config", label: "Configurações", icon: "settings" },
];

const CRUMBS = {
  "dashboard": ["Dashboard"],
  "live-planejamento": ["Live", "Planejamento"],
  "live-apresentar": ["Live", "Apresentar"],
  "live-pedidos": ["Live", "Pedidos"],
  "live-bag": ["Live", "Bag"],
  "live-sortear": ["Live", "Sortear"],
  "loja-pdv": ["Loja", "Caixa (PDV)"],
  "loja-crediario": ["Loja", "Crediário"],
  "loja-financeiro": ["Loja", "Financeiro"],
  "site-pedidos": ["Site", "Pedidos da loja virtual"],
  "site-carrinhos": ["Site", "Carrinhos abandonados"],
  "produtos": ["Produtos"],
  "clientes": ["Clientes"],
  "disparo": ["Inteligência", "Disparo em massa"],
  "marketing": ["Marketing"],
  "relatorios": ["Relatórios"],
  "config": ["Configurações"],
};

const Sidebar = ({ route, setRoute }) => (
  <aside className="sidebar">
    <div className="sidebar-head">
      <div className="brand-mark">
        <span className="brand-dot"/>
        <div>
          Venda na Live
          <small>v.2.0</small>
        </div>
      </div>
      <button className="icon-btn" title="Recolher" style={{width:28, height:28}}>
        <Ic name="list" size={14}/>
      </button>
    </div>

    <div className="store-pill" title="Trocar loja">
      <div className="store-avatar">EA</div>
      <div className="store-info">
        <div className="nm">Estúdio Aurora</div>
        <div className="sub">Goiânia · 1 loja</div>
      </div>
      <Ic name="chevronDown" size={12} className="t-3"/>
    </div>

    <nav className="nav-scroll">
      {NAV_TREE.map((n, i) => {
        if (n.type === "group") return <div key={i} className="nav-group">{n.label}</div>;
        const active = route === n.id;
        return (
          <button key={n.id} className={"nav-item" + (active ? " active" : "")} onClick={() => setRoute(n.id)}>
            <span className="icon"><Ic name={n.icon} size={15}/></span>
            <span className="label">{n.label}</span>
            {n.badge && <span className={"badge " + (n.badge.kind || "")}>{n.badge.text}</span>}
          </button>
        );
      })}
    </nav>

    <div className="sidebar-foot">
      <div className="user-avatar">MC</div>
      <div className="user-info">
        <div className="nm">Marcela Coutinho</div>
        <div className="role">Administradora</div>
      </div>
      <Ic name="chevronDown" size={12} className="t-3"/>
    </div>
  </aside>
);

const Topbar = ({ route }) => {
  const crumbs = CRUMBS[route] || ["—"];
  return (
    <div className="topbar">
      <div className="crumb">
        <Ic name="home" size={12}/>
        {crumbs.map((c, i) => (
          <React.Fragment key={i}>
            {i > 0 && <span className="sep">/</span>}
            <span className={i === crumbs.length - 1 ? "here" : ""}>{c}</span>
          </React.Fragment>
        ))}
      </div>

      <button className="go-live-btn">
        Live #48 ao vivo · 38m
      </button>

      <a href="loja.html" target="_blank" className="btn ghost sm" style={{textDecoration:'none', gap:6}}>
        <Ic name="site" size={12}/> Ver loja virtual
        <Ic name="arrowRight" size={10} style={{opacity:0.6}}/>
      </a>

      <div className="search-global">
        <Ic name="search" size={14}/>
        <input placeholder="Buscar cliente, produto, pedido…" readOnly/>
        <span className="kbd">⌘K</span>
      </div>

      <button className="icon-btn" title="Notificações">
        <Ic name="bell" size={14}/>
        <span className="dot"/>
      </button>
    </div>
  );
};

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