/* Sidebar shells for Admin (Backoffice) and Portal Cliente */

const ADMIN_NAV = [
  { kind: 'section', label: 'Visão geral' },
  { id: 'admin', label: 'Dashboard', icon: 'layoutDashboard' },
  { id: 'admin/orquestrador', label: 'Orquestrador', icon: 'route', badge: 'Core' },

  { kind: 'section', label: 'Clientes & Adquirentes' },
  { id: 'admin/clientes', label: 'Academias', icon: 'building' },
  { id: 'admin/adquirentes', label: 'Adquirentes', icon: 'network' },

  { kind: 'section', label: 'Taxas' },
  { id: 'admin/taxas/adquirentes', label: 'Taxas adquirentes', icon: 'scale' },
  { id: 'admin/taxas/clientes', label: 'Planos & Spread', icon: 'tag' },

  { kind: 'section', label: 'Operações' },
  { id: 'admin/acoes/transacoes', label: 'Transações', icon: 'list' },
  { id: 'admin/antecipacoes/aprovacoes', label: 'Antecipações', icon: 'zap' },
  { id: 'admin/conciliacao', label: 'Conciliação', icon: 'gitMerge' },
  { id: 'admin/acoes/cancelamento', label: 'Cancelamentos', icon: 'rotate' },
  { id: 'admin/acoes/baixa', label: 'Baixa manual', icon: 'banknote' },

  { kind: 'section', label: 'Risco' },
  { id: 'admin/chargeback/disputas', label: 'Chargeback', icon: 'shield' },
  { id: 'admin/antifraude', label: 'Antifraude', icon: 'shieldCheck' },

  { kind: 'section', label: 'Apoio' },
  { id: 'admin/relatorios', label: 'Relatórios', icon: 'fileText' },
  { id: 'admin/config/usuarios', label: 'Usuários', icon: 'users' },
  { id: 'admin/config/auditoria', label: 'Auditoria', icon: 'archive' },
];

const PORTAL_NAV = [
  { kind: 'section', label: 'Geral' },
  { id: 'portal', label: 'Dashboard', icon: 'layoutDashboard' },

  { kind: 'section', label: 'Vendas' },
  { id: 'portal/vendas/simulador', label: 'Simulador de venda', icon: 'sparkles' },
  { id: 'portal/vendas', label: 'Todas as vendas', icon: 'receipt' },
  { id: 'portal/vendas/carencia', label: 'Em carência (D+X)', icon: 'clock' },

  { kind: 'section', label: 'Recebimentos' },
  { id: 'portal/agenda/previsao', label: 'Previsão (calendário)', icon: 'calendar' },
  { id: 'portal/agenda/realizados', label: 'Depósitos realizados', icon: 'banknote' },
  { id: 'portal/antecipacoes/solicitar', label: 'Solicitar antecipação', icon: 'zap' },
  { id: 'portal/antecipacoes/consulta', label: 'Histórico antecipações', icon: 'list' },

  { kind: 'section', label: 'Assinaturas' },
  { id: 'portal/assinaturas/planos', label: 'Planos', icon: 'package' },
  { id: 'portal/assinaturas/venda', label: 'Vender assinatura', icon: 'user' },

  { kind: 'section', label: 'Conciliação & Relatórios' },
  { id: 'portal/conciliacao/vendas', label: 'Conciliação vendas', icon: 'gitBranch' },
  { id: 'portal/conciliacao/pagamentos', label: 'Conciliação pagamentos', icon: 'gitMerge' },
  { id: 'portal/relatorios', label: 'Relatórios', icon: 'fileText' },

  { kind: 'section', label: 'Configuração' },
  { id: 'portal/config', label: 'Cadastro & Usuários', icon: 'settings' },
  { id: 'portal/integracao', label: 'API & Webhooks', icon: 'plug' },
];

function NavLink({ item, current, onClick, collapsed }) {
  const active = current === item.id || (item.id !== 'admin' && item.id !== 'portal' && current.startsWith(item.id));
  return (
    <button onClick={() => onClick(item.id)}
      className={`nav-item w-full flex items-center gap-2.5 ${collapsed ? 'justify-center px-0' : 'px-2.5'} h-8 rounded-md text-[13px] font-medium transition group ${
        active ? 'bg-violet-50 text-violet-700 active' : 'text-ink-600 hover:bg-paper-200 hover:text-ink-900'
      }`}>
      <Icon name={item.icon} className={active ? 'text-violet-600' : 'text-ink-400 group-hover:text-ink-600'} />
      {!collapsed && (
        <>
          <span className="flex-1 text-left truncate">{item.label}</span>
          {item.badge && <Badge tone="info" className="text-[10px]">{item.badge}</Badge>}
        </>
      )}
    </button>
  );
}

function SidebarSection({ label, collapsed }) {
  if (collapsed) return <div className="my-2 mx-3 h-px bg-line-100" />;
  return <div className="text-[10.5px] uppercase tracking-wider text-ink-400 font-semibold mt-4 mb-1.5 px-2.5">{label}</div>;
}

function Sidebar({ nav, current, onNavigate, collapsed, onToggleCollapse, footer }) {
  return (
    <aside className={`${collapsed ? 'w-[64px]' : 'w-[244px]'} shrink-0 bg-white border-r border-line-200 flex flex-col h-screen sticky top-0 transition-all`}>
      <div className={`flex items-center ${collapsed ? 'justify-center' : 'justify-between'} px-3 h-14 border-b border-line-100`}>
        {collapsed ? <PactoLogo compact /> : <PactoLogo />}
        {!collapsed && (
          <button onClick={onToggleCollapse} className="text-ink-400 hover:text-ink-700 h-7 w-7 rounded-md flex items-center justify-center hover:bg-paper-200" title="Recolher">
            <Icon name="chevronsLeft" />
          </button>
        )}
      </div>
      <nav className="flex-1 overflow-y-auto px-2 py-2">
        {nav.map((it, idx) => it.kind === 'section'
          ? <SidebarSection key={'s'+idx} label={it.label} collapsed={collapsed} />
          : <NavLink key={it.id} item={it} current={current} onClick={onNavigate} collapsed={collapsed} />)}
      </nav>
      {footer && <div className="border-t border-line-100 p-3">{footer}</div>}
    </aside>
  );
}

/* -------- Admin header -------- */
function AdminHeader({ onSearch, onNavigate, current }) {
  const [q, setQ] = useState('');
  const [notifsOpen, setNotifsOpen] = useState(false);
  const [profileOpen, setProfileOpen] = useState(false);
  return (
    <header className="h-14 bg-white border-b border-line-200 sticky top-0 z-30 flex items-center gap-4 px-5">
      <div className="flex-1 max-w-2xl">
        <SearchBar value={q} onChange={setQ} placeholder="Buscar academias, transações, NSU, CNPJ…" />
      </div>
      <div className="flex items-center gap-1">
        <button className="h-9 px-2.5 text-[12.5px] font-medium text-ink-500 hover:text-ink-900 hover:bg-paper-100 rounded-md inline-flex items-center gap-1.5">
          <Icon name="helpCircle" /> Ajuda
        </button>
        <div className="relative">
          <IconBtn icon="bell" label="Notificações" onClick={() => setNotifsOpen(o => !o)} />
          <span className="absolute top-1 right-1 h-1.5 w-1.5 rounded-full bg-err-500" />
          {notifsOpen && (
            <div className="absolute right-0 top-10 w-[360px] bg-white rounded-xl2 shadow-pop border border-line-200 overflow-hidden">
              <div className="px-4 py-3 border-b border-line-100 flex items-center justify-between">
                <div className="text-[13px] font-semibold">Notificações</div>
                <button className="text-[11.5px] text-violet-600 font-semibold">Marcar como lidas</button>
              </div>
              <div className="divide-y divide-line-100 max-h-[360px] overflow-y-auto">
                {[
                  { icon: 'shield', tone:'err', t: 'Novo chargeback aberto', s: 'Smart Fit Pinheiros · R$ 287,90 · 4837 Fraud', when: '12 min' },
                  { icon: 'zap', tone:'info', t: '4 novas solicitações de antecipação', s: 'Total R$ 218.430,00', when: '38 min' },
                  { icon: 'alertTriangle', tone:'warn', t: 'Rede: aprovação caiu para 88%', s: 'Failover ativo para Cielo nos últimos 8 min', when: '1h' },
                  { icon: 'check', tone:'ok', t: 'Conciliação D-1 concluída', s: '0 divergências encontradas', when: '3h' },
                ].map((n, i) => (
                  <div key={i} className="px-4 py-3 flex items-start gap-3 hover:bg-paper-100 cursor-pointer">
                    <div className={`h-8 w-8 rounded-lg flex items-center justify-center shrink-0 ${
                      n.tone==='err'?'bg-err-50 text-err-500':n.tone==='warn'?'bg-warn-50 text-warn-500':n.tone==='ok'?'bg-ok-50 text-ok-500':'bg-violet-50 text-violet-600'
                    }`}>
                      <Icon name={n.icon} />
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="text-[13px] font-semibold text-ink-900">{n.t}</div>
                      <div className="text-[12px] text-ink-500 truncate">{n.s}</div>
                    </div>
                    <div className="text-[11px] text-ink-400 shrink-0">{n.when}</div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
        <div className="h-6 w-px bg-line-200 mx-1" />
        <button onClick={() => setProfileOpen(o => !o)} className="relative flex items-center gap-2 pl-1 pr-2 h-9 rounded-md hover:bg-paper-100">
          <div className="h-7 w-7 rounded-full bg-violet-500 text-white text-[12px] font-bold flex items-center justify-center">RC</div>
          <div className="text-left leading-none">
            <div className="text-[12.5px] font-semibold text-ink-900">Renato Cardoso</div>
            <div className="text-[10.5px] text-ink-400 mt-0.5">Admin · Pacto</div>
          </div>
          <Icon name="chevronDown" className="text-ink-400" />
          {profileOpen && (
            <div className="absolute right-0 top-10 w-56 bg-white rounded-xl2 shadow-pop border border-line-200 overflow-hidden" onClick={e => e.stopPropagation()}>
              <button onClick={() => onNavigate('admin/config/usuarios')} className="w-full text-left px-3 py-2 text-[13px] hover:bg-paper-100 flex items-center gap-2"><Icon name="user"/>Meu perfil</button>
              <button onClick={() => onNavigate('admin/config/auditoria')} className="w-full text-left px-3 py-2 text-[13px] hover:bg-paper-100 flex items-center gap-2"><Icon name="archive"/>Auditoria</button>
              <div className="border-t border-line-100" />
              <button onClick={() => onNavigate('login')} className="w-full text-left px-3 py-2 text-[13px] hover:bg-paper-100 flex items-center gap-2 text-err-600"><Icon name="logOut"/>Sair</button>
            </div>
          )}
        </button>
      </div>
    </header>
  );
}

/* -------- Portal header with scope switcher -------- */
function ScopeSwitcher({ scope, setScope }) {
  const [open, setOpen] = useState(false);
  const allRedes = MOCK.REDES;
  const label = useMemo(() => {
    if (scope.kind === 'rede') {
      const r = allRedes.find(r => r.id === scope.id);
      return { title: r?.nome || 'Rede', sub: 'Visão consolidada da rede' };
    }
    if (scope.kind === 'filial') {
      const f = MOCK.FILIAIS.find(f => f.id === scope.id);
      return { title: f?.nome || 'Filial', sub: f ? `${f.unidades} unidades` : '' };
    }
    const u = MOCK.UNIDADES.find(u => u.id === scope.id);
    return { title: u?.nome || 'Unidade', sub: u ? `${u.cidade}/${u.uf}` : '' };
  }, [scope]);

  return (
    <div className="relative">
      <button onClick={() => setOpen(o => !o)}
        className="flex items-center gap-2.5 h-9 px-2.5 rounded-md border border-line-200 bg-white hover:bg-paper-100">
        <div className="h-6 w-6 rounded-md flex items-center justify-center text-white text-[11px] font-bold"
             style={{background: 'linear-gradient(135deg, var(--accent-500), var(--accent-600))'}}>
          {label.title.slice(0,2).toUpperCase()}
        </div>
        <div className="text-left">
          <div className="text-[12.5px] font-semibold text-ink-900 leading-tight max-w-[180px] truncate">{label.title}</div>
          <div className="text-[10.5px] text-ink-400 leading-tight">{label.sub}</div>
        </div>
        <Icon name="chevronDown" className="text-ink-400" />
      </button>
      {open && (
        <>
          <div className="fixed inset-0 z-30" onClick={() => setOpen(false)} />
          <div className="absolute left-0 top-11 z-40 w-[380px] bg-white rounded-xl2 shadow-pop border border-line-200 overflow-hidden">
            <div className="px-3 py-2.5 border-b border-line-100 text-[11.5px] uppercase tracking-wider font-semibold text-ink-400">Trocar escopo</div>
            <div className="max-h-[420px] overflow-y-auto">
              {allRedes.map(r => {
                const fs = MOCK.FILIAIS.filter(f => f.rede === r.id);
                return (
                  <div key={r.id} className="border-b border-line-100 last:border-b-0">
                    <button onClick={() => { setScope({ kind:'rede', id:r.id }); setOpen(false); }}
                      className="w-full flex items-center gap-2 px-3 py-2.5 hover:bg-paper-100 text-left">
                      <Icon name="network" className="text-violet-600" />
                      <div className="flex-1">
                        <div className="text-[13px] font-semibold text-ink-900">{r.nome}</div>
                        <div className="text-[11px] text-ink-400">{fs.length} filiais · {MOCK.UNIDADES.filter(u => u.rede===r.id).length} unidades</div>
                      </div>
                      {scope.kind==='rede'&&scope.id===r.id && <Icon name="check" className="text-violet-600"/>}
                    </button>
                    <div className="pl-3 pr-2 pb-2">
                      {fs.map(f => {
                        const us = MOCK.UNIDADES.filter(u => u.filial === f.id);
                        return (
                          <div key={f.id} className="ml-3">
                            <button onClick={() => { setScope({ kind:'filial', id:f.id }); setOpen(false); }}
                              className="w-full flex items-center gap-2 px-2 py-1.5 hover:bg-paper-100 text-left rounded-md">
                              <Icon name="building" className="text-ink-400" />
                              <div className="flex-1 text-[12.5px] text-ink-700 truncate">{f.nome}</div>
                              <span className="text-[10.5px] text-ink-400">{us.length}u</span>
                              {scope.kind==='filial'&&scope.id===f.id && <Icon name="check" className="text-violet-600"/>}
                            </button>
                            <div className="ml-5 border-l border-line-100">
                              {us.map(u => (
                                <button key={u.id} onClick={() => { setScope({ kind:'unidade', id:u.id }); setOpen(false); }}
                                  className="w-full flex items-center gap-2 px-2 py-1.5 hover:bg-paper-100 text-left rounded-md">
                                  <span className="h-1 w-1 rounded-full bg-ink-300"></span>
                                  <div className="flex-1 text-[12px] text-ink-600 truncate">{u.nome}</div>
                                  <span className="text-[10.5px] text-ink-400">{u.cidade}</span>
                                  {scope.kind==='unidade'&&scope.id===u.id && <Icon name="check" className="text-violet-600"/>}
                                </button>
                              ))}
                            </div>
                          </div>
                        );
                      })}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </>
      )}
    </div>
  );
}

function PortalHeader({ scope, setScope, onNavigate, current }) {
  return (
    <header className="h-14 bg-white border-b border-line-200 sticky top-0 z-30 flex items-center gap-4 px-5">
      <ScopeSwitcher scope={scope} setScope={setScope} />
      <div className="flex-1" />
      <div className="flex items-center gap-1">
        <Badge tone="info" dot>Sandbox</Badge>
        <IconBtn icon="bell" label="Notificações" />
        <div className="h-6 w-px bg-line-200 mx-1" />
        <button onClick={() => onNavigate('login')} className="flex items-center gap-2 pl-1 pr-2 h-9 rounded-md hover:bg-paper-100">
          <div className="h-7 w-7 rounded-full bg-violet-500 text-white text-[12px] font-bold flex items-center justify-center">AM</div>
          <div className="text-left leading-none">
            <div className="text-[12.5px] font-semibold text-ink-900">Ana Maciel</div>
            <div className="text-[10.5px] text-ink-400 mt-0.5">Operação · Smart Fit</div>
          </div>
          <Icon name="chevronDown" className="text-ink-400" />
        </button>
      </div>
    </header>
  );
}

/* -------- Floating role switch ("aid de demo") -------- */
function DemoSwitcher({ role, onSwitch }) {
  return (
    <div className="fixed bottom-4 right-4 z-[100] no-print">
      <div className="bg-ink-900 text-white rounded-xl2 shadow-pop overflow-hidden border border-ink-700">
        <div className="px-3 py-1.5 text-[10.5px] uppercase tracking-wider font-semibold text-violet-300 border-b border-white/10 flex items-center gap-1.5">
          <span className="h-1.5 w-1.5 rounded-full bg-violet-400 pulse-dot" />
          Demo · trocar produto
        </div>
        <div className="flex">
          <button onClick={() => onSwitch('admin')}
                  className={`px-3 py-2 text-[12.5px] font-medium flex items-center gap-1.5 ${role==='admin'?'bg-violet-500 text-white':'text-ink-100 hover:bg-white/10'}`}>
            <Icon name="layoutDashboard"/> Backoffice
          </button>
          <button onClick={() => onSwitch('portal')}
                  className={`px-3 py-2 text-[12.5px] font-medium flex items-center gap-1.5 ${role==='portal'?'bg-violet-500 text-white':'text-ink-100 hover:bg-white/10'}`}>
            <Icon name="building"/> Portal cliente
          </button>
        </div>
      </div>
    </div>
  );
}

/* -------- Shells -------- */
function AdminShell({ children, current, onNavigate }) {
  const [collapsed, setCollapsed] = useState(false);
  return (
    <div className="flex min-h-screen">
      <Sidebar nav={ADMIN_NAV} current={current} onNavigate={onNavigate}
               collapsed={collapsed} onToggleCollapse={() => setCollapsed(c => !c)}
               footer={!collapsed && (
                 <div className="text-[11px] text-ink-400">
                   <div className="font-mono">v0.18 · sandbox</div>
                   <div>Orquestração para academias</div>
                 </div>
               )} />
      <div className="flex-1 min-w-0 flex flex-col">
        <AdminHeader onNavigate={onNavigate} current={current} />
        <main className="flex-1 p-6 max-w-[1480px] w-full mx-auto">{children}</main>
      </div>
    </div>
  );
}

function PortalShell({ children, current, onNavigate, scope, setScope }) {
  const [collapsed, setCollapsed] = useState(false);
  return (
    <div className="flex min-h-screen">
      <Sidebar nav={PORTAL_NAV} current={current} onNavigate={onNavigate}
               collapsed={collapsed} onToggleCollapse={() => setCollapsed(c => !c)}
               footer={!collapsed && (
                 <div className="text-[11px] text-ink-400">
                   <div className="font-medium text-ink-600">Precisa de ajuda?</div>
                   <div>suporte@pactopay.com.br</div>
                 </div>
               )} />
      <div className="flex-1 min-w-0 flex flex-col">
        <PortalHeader scope={scope} setScope={setScope} onNavigate={onNavigate} current={current} />
        <main className="flex-1 p-6 max-w-[1380px] w-full mx-auto">{children}</main>
      </div>
    </div>
  );
}

Object.assign(window, { AdminShell, PortalShell, DemoSwitcher, ScopeSwitcher });