/* ============================================================
   PCP — Navigation: Sidebar, Topbar, Command palette
   ============================================================ */

const NAV = [
  { group: "Operação", items: [
    { id: "dashboard", label: "Dashboard", icon: "grid" },
    { id: "pcp", label: "PCP · Produção", icon: "factory" },
    { id: "estoque", label: "Estoque", icon: "box" },
    { id: "movimentacoes", label: "Movimentações", icon: "refresh" },
    { id: "compras", label: "Compras", icon: "cart" },
  ]},
  { group: "Pedidos", items: [
    { id: "pedidos", label: "Resumo dos pedidos", icon: "fileText" },
    { id: "pedidos_ml", label: "Mercado Livre", icon: "tag" },
    { id: "pedidos_shopee", label: "Shopee", icon: "cart" },
  ]},
  { group: "Cadastros", items: [
    { id: "produtos", label: "Produtos", icon: "package" },
    { id: "clientes", label: "Clientes", icon: "users" },
  ]},
  { group: "Gestão", items: [
    { id: "financeiro", label: "Financeiro", icon: "wallet" },
    { id: "notas", label: "Notas Fiscais", icon: "receipt" },
    { id: "relatorios", label: "Relatórios", icon: "chart" },
    { id: "auditoria", label: "Auditoria", icon: "list" },
  ]},
];

// Calcula contadores dinâmicos a partir do estado da app
function navCounts(app) {
  if (!app) return {};
  const mkt = window.MKT_ORDERS || {};
  const novosML = (mkt.ml || []).filter((o) => o.status === "novo" || o.status === "a_enviar").length;
  const novosSH = (mkt.shopee || []).filter((o) => o.status === "novo" || o.status === "a_enviar").length;
  const opsAbertas = (app.ops || []).filter((o) => o.status !== "finalizado").length;
  const estoqueCrit = (app.estoque || []).filter((e) => e.status !== "ok").length;
  const comprasPend = (app.compras || []).filter((c) => c.status === "sugerida" || c.status === "solicitada").length;
  const pedidosAbertos = (app.pedidos || []).filter((p) => p.status === "aberto" || p.status === "andamento").length;
  return {
    pcp: { count: opsAbertas },
    estoque: { alert: estoqueCrit },
    compras: { count: comprasPend },
    pedidos: { count: pedidosAbertos },
    pedidos_ml: { count: novosML },
    pedidos_shopee: { count: novosSH },
  };
}

function Sidebar({ route, setRoute, collapsed, onSearch, workspaces, ws, onSwitchWs, openModal, onUser, app }) {
  const childIsActive = (it) => it.children && it.children.some((c) => c.id === route);
  const [open, setOpen] = useState({});
  const [wsOpen, setWsOpen] = useState(false);
  const counts = navCounts(app);
  return (
    <aside className="sidebar">
      <div className="sb-top">
        <span className="menu-wrap" style={{ display: "block" }}>
          <button className="workspace" onClick={() => setWsOpen((o) => !o)}>
            <span className="ws-logo">{ws.logo}</span>
            <span className="ws-meta">
              <div className="ws-name">{ws.name}</div>
              <div className="ws-sub">{ws.sub}</div>
            </span>
            <Icon name="chevronsUpDown" size={15} className="ws-caret" />
          </button>
          {wsOpen && (
            <>
              <div className="menu-scrim" onClick={() => setWsOpen(false)} />
              <div className="menu" style={{ left: 0, right: "auto", width: "calc(100% - 0px)", minWidth: 0 }}>
                <div className="nav-group" style={{ padding: "4px 8px 6px" }}>Empresas</div>
                {(workspaces || []).map((w) => (
                  <div key={w.id} className="menu-item" onClick={() => { setWsOpen(false); onSwitchWs(w.id); }}>
                    <span className="ws-logo" style={{ width: 26, height: 26, fontSize: 10, flex: "none" }}>{w.logo}</span>
                    <span style={{ flex: 1, minWidth: 0 }}>
                      <div className="ws-name" style={{ fontSize: 12.5 }}>{w.name}</div>
                      <div className="ws-sub" style={{ fontSize: 11 }}>{w.sub}</div>
                    </span>
                    {w.current && <Icon name="check" size={15} style={{ color: "var(--accent)", flex: "none" }} />}
                  </div>
                ))}
                <div className="menu-sep" />
                <div className="menu-item" onClick={() => { setWsOpen(false); openModal && openModal("novaEmpresa"); }}><Icon name="plus" size={15} />Adicionar empresa</div>
              </div>
            </>
          )}
        </span>
      </div>

      <button className="sb-search" onClick={onSearch}>
        <Icon name="search" size={15} />
        <span className="lbl">Buscar…</span>
        <span className="kbd">⌘K</span>
      </button>

      <nav className="nav">
        {NAV.map((g) => (
          <div key={g.group}>
            <div className="nav-group">{g.group}</div>
            {g.items.map((it) => {
              if (it.children) {
                const expanded = open[it.id] !== undefined ? open[it.id] : childIsActive(it);
                return (
                  <div key={it.id} className="nav-parent">
                    <div className={"nav-item" + (childIsActive(it) ? " parent-active" : "")} onClick={() => setOpen((o) => ({ ...o, [it.id]: !expanded }))}>
                      <Icon name={it.icon} size={17} />
                      <span className="lbl">{it.label}</span>
                      <Icon name="chevronDown" size={14} className={"nav-caret" + (expanded ? " open" : "")} />
                    </div>
                    {expanded && (
                      <div className="nav-sub">
                        {it.children.map((c) => {
                          const cn = counts[c.id] || {};
                          return (
                            <div key={c.id} className={"nav-item sub" + (route === c.id ? " active" : "")} onClick={() => setRoute(c.id)}>
                              <Icon name={c.icon} size={15} />
                              <span className="lbl">{c.label}</span>
                              {cn.alert ? <span className="count alert">{cn.alert}</span> : cn.count ? <span className="count">{cn.count}</span> : null}
                            </div>
                          );
                        })}
                      </div>
                    )}
                  </div>
                );
              }
              const cn = counts[it.id] || {};
              return (
                <div key={it.id} className={"nav-item" + (route === it.id ? " active" : "")} onClick={() => setRoute(it.id)}>
                  <Icon name={it.icon} size={17} />
                  <span className="lbl">{it.label}</span>
                  {cn.alert ? <span className="count alert">{cn.alert}</span> : cn.count ? <span className="count">{cn.count}</span> : null}
                </div>
              );
            })}
          </div>
        ))}
      </nav>

      <div className="sb-foot">
        <div className="sb-user" onClick={onUser} style={route === "configuracoes" ? { background: "var(--accent-tint)" } : undefined}>
          <span className="avatar">{((app && app.user && (app.user.name || app.user.email)) || "?").trim().split(/\s+/).map((p) => p[0]).slice(0, 2).join("").toUpperCase()}</span>
          <span className="ws-meta sb-foot-meta">
            <div className="ws-name">{(app && app.user && (app.user.name || app.user.email)) || "Usuário"}</div>
            <div className="ws-sub">Configurações</div>
          </span>
          <Icon name="settings" size={15} className="ws-caret sb-foot-meta" />
        </div>
      </div>
    </aside>
  );
}

const ROUTE_META = {
  dashboard: { crumb: "Operação", title: "Dashboard", sub: "Visão geral" },
  pedidos: { crumb: "Pedidos", title: "Resumo dos pedidos", sub: "Vendas, ordens de serviço e canais" },
  pedidos_ml: { crumb: "Pedidos", title: "Mercado Livre", sub: "Pedidos integrados do Mercado Livre" },
  pedidos_shopee: { crumb: "Pedidos", title: "Shopee", sub: "Pedidos integrados da Shopee" },
  pcp: { crumb: "Operação", title: "PCP · Ordens de Produção", sub: "Planejamento e chão de fábrica" },
  estoque: { crumb: "Operação", title: "Estoque", sub: "Matérias-primas e consumíveis" },
  movimentacoes: { crumb: "Operação", title: "Movimentações", sub: "Entradas, saídas e nível de estoque" },
  compras: { crumb: "Operação", title: "Compras", sub: "Insumos e fornecedores" },
  produtos: { crumb: "Cadastros", title: "Produtos", sub: "Produtos acabados e BOM" },
  clientes: { crumb: "Cadastros", title: "Clientes", sub: "Carteira de clientes" },
  financeiro: { crumb: "Gestão", title: "Financeiro", sub: "Fluxo de caixa e DRE" },
  notas: { crumb: "Gestão", title: "Notas Fiscais", sub: "Documentos e anexos" },
  relatorios: { crumb: "Gestão", title: "Relatórios", sub: "Indicadores consolidados" },
  auditoria: { crumb: "Gestão", title: "Auditoria", sub: "Histórico de ações" },
  configuracoes: { crumb: "Sistema", title: "Configurações", sub: "Perfil, aparência e empresas" },
  integracoes: { crumb: "Sistema", title: "Integrações", sub: "Canais de venda e vínculo de anúncios" },
};

function Topbar({ route, onToggleNav, conn, queue, onToggleConn, onSync, onSearch, onTheme, theme, onGoRoute, app }) {
  const m = ROUTE_META[route] || { crumb: "", title: "", sub: "" };
  const connState = conn === "syncing" ? "syncing" : conn === "offline" ? "offline" : "online";
  return (
    <header className="topbar">
      <div className="tb-crumb">
        <IconBtn icon="panelLeft" onClick={onToggleNav} title="Recolher menu" />
        <div>
          <div className="tb-title">{m.title}</div>
        </div>
      </div>
      <div className="tb-spacer" />
      <div className="tb-actions">
        <button className="sb-search" style={{ margin: 0, width: 200 }} onClick={onSearch}>
          <Icon name="search" size={15} />
          <span className="lbl">Buscar…</span>
          <span className="kbd">⌘K</span>
        </button>
        <NotificationsBtn onGo={onGoRoute} app={app} />
      </div>
    </header>
  );
}

// ---------------- Command palette ----------------
function CommandPalette({ open, onClose, setRoute, toast, openModal, app }) {
  const [q, setQ] = useState("");
  const [active, setActive] = useState(0);
  const inputRef = useRef(null);
  useEffect(() => { if (open) { setQ(""); setActive(0); setTimeout(() => inputRef.current && inputRef.current.focus(), 30); } }, [open]);

  const commands = useMemo(() => {
    const nav = NAV.flatMap((g) => g.items).flatMap((it) => it.children || [it]).map((it) => ({ type: "Ir para", title: it.label, icon: it.icon, sub: "", run: () => setRoute(it.id) }));
    const actions = [
      { type: "Ação", title: "Novo pedido de venda", icon: "plus", run: () => openModal("novoPedido") },
      { type: "Ação", title: "Dar baixa em estoque", icon: "arrowDown", run: () => { setRoute("estoque"); toast("Modo baixa rápida", "info"); } },
      { type: "Ação", title: "Nova ordem de produção", icon: "factory", run: () => openModal("novaOP") },
      { type: "Ação", title: "Receber compra", icon: "truck", run: () => openModal("receberCompra") },
      { type: "Ação", title: "Lançamento financeiro", icon: "dollar", run: () => openModal("lancamento") },
      { type: "Ação", title: "Cadastrar cliente", icon: "users", run: () => openModal("novoCliente") },
    ];
    const records = [
      ...((app && app.pedidos) || []).slice(0, 4).map((p) => ({ type: "Pedido", title: "OS " + p.os, icon: "fileText", sub: p.cliente, run: () => setRoute("pedidos") })),
      ...((app && app.estoque) || []).slice(0, 4).map((e) => ({ type: "Estoque", title: e.nome, icon: "box", sub: e.sku, run: () => setRoute("estoque") })),
      ...((app && app.ops) || []).slice(0, 3).map((o) => ({ type: "OP", title: o.op, icon: "factory", sub: o.produto, run: () => setRoute("pcp") })),
    ];
    return [...actions, ...nav, ...records];
  }, [app && app.pedidos, app && app.estoque, app && app.ops]);

  const filtered = useMemo(() => {
    const t = q.trim().toLowerCase();
    if (!t) return commands.slice(0, 9);
    return commands.filter((c) => (c.title + " " + c.sub + " " + c.type).toLowerCase().includes(t)).slice(0, 12);
  }, [q, commands]);

  useEffect(() => { setActive(0); }, [q]);

  if (!open) return null;
  const choose = (c) => { if (!c) return; onClose(); c.run(); };

  // group by type for headers
  let lastType = null;
  return (
    <div className="cmdk-scrim" onClick={onClose}>
      <div className="cmdk" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true"
        onKeyDown={(e) => {
          if (e.key === "ArrowDown") { e.preventDefault(); setActive((a) => Math.min(a + 1, filtered.length - 1)); }
          if (e.key === "ArrowUp") { e.preventDefault(); setActive((a) => Math.max(a - 1, 0)); }
          if (e.key === "Enter") { e.preventDefault(); choose(filtered[active]); }
        }}>
        <div className="cmdk-in">
          <Icon name="search" size={18} style={{ color: "var(--muted)" }} />
          <input ref={inputRef} value={q} onChange={(e) => setQ(e.target.value)} placeholder="Buscar pedido, item, OP ou ação…" />
          <span className="kbd">ESC</span>
        </div>
        <div className="cmdk-list">
          {filtered.length === 0 && <div className="empty" style={{ padding: 30 }}><p style={{ margin: 0 }}>Nada encontrado para “{q}”.</p></div>}
          {filtered.map((c, i) => {
            const header = c.type !== lastType ? <div className="cmdk-sec" key={"h" + i}>{c.type}</div> : null;
            lastType = c.type;
            return (
              <React.Fragment key={i}>
                {header}
                <div className={"cmdk-item" + (i === active ? " active" : "")} onMouseEnter={() => setActive(i)} onClick={() => choose(c)}>
                  <Icon name={c.icon} size={16} />
                  <span className="t">{c.title}{c.sub && <span className="sub">{c.sub}</span>}</span>
                  <Icon name="chevronRight" size={14} style={{ color: "var(--faint)" }} />
                </div>
              </React.Fragment>
            );
          })}
        </div>
        <div className="cmdk-foot">
          <span className="k"><span className="kbd">↑</span><span className="kbd">↓</span> navegar</span>
          <span className="k"><span className="kbd">↵</span> abrir</span>
          <span className="k"><span className="kbd">esc</span> fechar</span>
        </div>
      </div>
    </div>
  );
}

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