// ============================================================
// Sidebar + Topbar
// ============================================================
function Sidebar({ active, onNav, taskCount, inboxCount }) {
  const items = [
    { id:"home",       label:"Home",          icon:I.home,   badge:null },
    { id:"social",     label:"Redes Sociais", icon:I.social, badge:null },
    { id:"anuncios",   label:"Anúncios",      icon:I.sparkle,badge:null },
    { id:"site",       label:"Site & SEO",    icon:I.search, badge:null },
    { id:"financeiro", label:"Financeiro",    icon:I.money,  badge:null },
    { id:"alunos",     label:"Alunos",        icon:I.users,  badge:"16" },
    { id:"pipeline",   label:"Pipeline",      icon:I.pipe,   badge:"71" },
    { id:"leads-quiz",    label:"Leads do Quiz",    icon:I.users,  badge:null },
    { id:"candidaturas",  label:"Candidaturas",     icon:I.pipe,   badge:null },
    { id:"iunews",     label:"IuNews",        icon:I.mail,   badge:null },
    { id:"calendario", label:"Calendário",    icon:I.cal,    badge:null },
    { id:"inbox",      label:"Caixa de entrada", icon:I.bell, badge: inboxCount ? String(inboxCount) : null },
    { id:"conteudo",   label:"Conteúdo",      icon:I.book,   badge:null },
    { id:"tarefas",    label:"Tarefas",       icon:I.check,  badge: taskCount?String(taskCount):null },
    { id:"agentes",    label:"Agentes IA",    icon:I.sparkle,badge:"5" },
    { id:"garimpo",    label:"Garimpo",       icon:I.search, badge:null },
    { id:"intel",      label:"Inteligência",  icon:I.sparkle,badge:"novo" },
  ];
  return (
    <aside className="sidebar">
      <div className="sb-brand">
        <div className="sb-logo">I</div>
        <div>
          <div className="sb-brand-name">Iuvenis</div>
          <div className="sb-brand-sub">Mentoria · Intercâmbio</div>
        </div>
      </div>

      <div className="sb-section">Operação</div>
      {items.slice(0,1).map(it => (
        <button key={it.id} className={"sb-item " + (active===it.id?"active":"")} onClick={()=>onNav(it.id)}>
          <it.icon/>
          <span>{it.label}</span>
        </button>
      ))}
      <div className="sb-section">Crescimento</div>
      {items.slice(1,5).map(it => (
        <button key={it.id} className={"sb-item " + (active===it.id?"active":"")} onClick={()=>onNav(it.id)}>
          <it.icon/>
          <span>{it.label}</span>
          {it.badge && <span className="badge">{it.badge}</span>}
        </button>
      ))}
      <div className="sb-section">Pessoas & vendas</div>
      {items.slice(5,7).map(it => (
        <button key={it.id} className={"sb-item " + (active===it.id?"active":"")} onClick={()=>onNav(it.id)}>
          <it.icon/>
          <span>{it.label}</span>
          {it.badge && <span className="badge">{it.badge}</span>}
        </button>
      ))}
      <div className="sb-section">Conteúdo & comunicação</div>
      {items.slice(7,11).map(it => (
        <button key={it.id} className={"sb-item " + (active===it.id?"active":"")} onClick={()=>onNav(it.id)}>
          <it.icon/>
          <span>{it.label}</span>
          {it.badge && <span className="badge">{it.badge}</span>}
        </button>
      ))}
      <div className="sb-section">Inteligência</div>
      <button className={"sb-item " + (active==="garimpo"?"active":"")} onClick={()=>onNav("garimpo")}>
        <I.search/><span>Garimpo</span>
      </button>
      <button className={"sb-item " + (active==="intel"?"active":"")} onClick={()=>onNav("intel")}>
        <I.sparkle/><span>Inteligência</span><span className="badge" style={{background:"#0ea5e9"}}>novo</span>
      </button>
      <div className="sb-section">Operacional</div>
      {items.slice(11,13).map(it => (
        <button key={it.id} className={"sb-item " + (active===it.id?"active":"")} onClick={()=>onNav(it.id)}>
          <it.icon/>
          <span>{it.label}</span>
          {it.badge && <span className="badge">{it.badge}</span>}
        </button>
      ))}

      <div className="sb-section">Sistema</div>
      <button className="sb-item"><I.ext/><span>Integrações</span></button>

      <div className="sb-foot">
        <div className="sb-avatar">{DATA.meta.user.initials}</div>
        <div style={{ minWidth:0 }}>
          <div className="sb-user-name" style={{ whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis" }}>{DATA.meta.user.name}</div>
          <div className="sb-user-role">{DATA.meta.user.role}</div>
        </div>
      </div>
    </aside>
  );
}

function Topbar({ page, theme, onToggleTheme, onOpenSearch, onToggleClaude, claudeOpen }) {
  const titles = {
    home:"Home", social:"Redes Sociais", anuncios:"Anúncios", site:"Site & SEO",
    financeiro:"Financeiro", alunos:"Alunos", pipeline:"Pipeline", iunews:"IuNews",
    calendario:"Calendário", inbox:"Caixa de entrada", conteudo:"Conteúdo", tarefas:"Tarefas",
    agentes:"Agentes IA",
  };
  return (
    <header className="topbar">
      <div className="crumbs">
        <span>Iuvenis</span>
        <I.chev size={12}/>
        <span className="now">{titles[page]}</span>
      </div>

      <button className="search-trigger" onClick={onOpenSearch}>
        <I.search size={14}/>
        <span>Buscar alunos, tarefas, edições…</span>
        <span className="kbd">⌘K</span>
      </button>

      <button className="icon-btn" onClick={onToggleTheme} title="Alternar tema">
        {theme==="dark" ? <I.sun size={16}/> : <I.moon size={16}/>}
      </button>
      <button className="icon-btn has-dot" title="Notificações"><I.bell size={16}/></button>
      <button className={"icon-btn"} onClick={onToggleClaude} title="Assistente Iuvenis"
              style={{ background: claudeOpen ? "var(--brand-soft)" : undefined, color: claudeOpen ? "var(--brand)" : undefined }}>
        <I.sparkle size={16}/>
      </button>
    </header>
  );
}

// CMD+K palette
function CmdPalette({ onClose, onNav, alunos }) {
  const [q, setQ] = useState("");
  const [idx, setIdx] = useState(0);
  const ref = useRef();
  useEffect(()=>{ ref.current?.focus(); },[]);
  const ql = q.toLowerCase();

  const pages = [
    { id:"home",       label:"Ir para Home",            hint:"Página", icon:I.home,    action:()=>onNav("home") },
    { id:"social",     label:"Ir para Redes Sociais",   hint:"Página", icon:I.social,  action:()=>onNav("social") },
    { id:"anuncios",   label:"Ir para Anúncios",        hint:"Página", icon:I.sparkle, action:()=>onNav("anuncios") },
    { id:"site",       label:"Ir para Site & SEO",      hint:"Página", icon:I.search,  action:()=>onNav("site") },
    { id:"financeiro", label:"Ir para Financeiro",      hint:"Página", icon:I.money,   action:()=>onNav("financeiro") },
    { id:"alunos",     label:"Ir para Alunos",          hint:"Página", icon:I.users,   action:()=>onNav("alunos") },
    { id:"pipeline",   label:"Ir para Pipeline",        hint:"Página", icon:I.pipe,    action:()=>onNav("pipeline") },
    { id:"iunews",     label:"Ir para IuNews",          hint:"Página", icon:I.mail,    action:()=>onNav("iunews") },
    { id:"calendario", label:"Ir para Calendário",      hint:"Página", icon:I.cal,     action:()=>onNav("calendario") },
    { id:"inbox",      label:"Ir para Caixa de entrada",hint:"Página", icon:I.bell,    action:()=>onNav("inbox") },
    { id:"conteudo",   label:"Ir para Conteúdo",        hint:"Página", icon:I.book,    action:()=>onNav("conteudo") },
    { id:"tarefas",    label:"Ir para Tarefas",         hint:"Página", icon:I.check,   action:()=>onNav("tarefas") },
    { id:"agentes",    label:"Ir para Agentes IA",      hint:"Página", icon:I.sparkle, action:()=>onNav("agentes") },
  ].filter(p => p.label.toLowerCase().includes(ql));

  const actions = [
    { id:"a1", label:"Nova tarefa",       hint:"Ação", icon:I.plus,    action:()=>{ onNav("tarefas"); setTimeout(()=>window.dispatchEvent(new Event("iuvenis:newTask")),50); } },
    { id:"a2", label:"Novo aluno",        hint:"Ação", icon:I.plus,    action:()=>{ onNav("alunos");  setTimeout(()=>window.dispatchEvent(new Event("iuvenis:newAluno")),50); } },
    { id:"a3", label:"Nova edição IuNews",hint:"Ação", icon:I.plus,    action:()=>{ onNav("iunews"); } },
    { id:"a4", label:"Abrir assistente Iuvenis", hint:"Ação", icon:I.sparkle, action:()=>window.dispatchEvent(new Event("iuvenis:openClaude")) },
  ].filter(p => p.label.toLowerCase().includes(ql));

  const alus = alunos.filter(a => a.nome.toLowerCase().includes(ql) || a.email.toLowerCase().includes(ql)).slice(0,5);

  const flat = [...pages, ...actions, ...alus.map(a=>({ id:"al-"+a.id, label:a.nome, hint:a.pais+" · "+a.programa, icon:I.users, action:()=>{ onNav("alunos"); setTimeout(()=>window.dispatchEvent(new CustomEvent("iuvenis:openAluno",{detail:a.id})),50); } }))];

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

  const onKey = e => {
    if (e.key === "ArrowDown") { e.preventDefault(); setIdx(i => Math.min(i+1, flat.length-1)); }
    else if (e.key === "ArrowUp") { e.preventDefault(); setIdx(i => Math.max(i-1, 0)); }
    else if (e.key === "Enter") { e.preventDefault(); flat[idx]?.action(); onClose(); }
  };

  return (
    <div className="cmdk-back" onClick={onClose}>
      <div className="cmdk slide-up" onClick={e=>e.stopPropagation()}>
        <input ref={ref} className="cmdk-input" placeholder="Pesquisar páginas, alunos, ações…" value={q} onChange={e=>setQ(e.target.value)} onKeyDown={onKey}/>
        <div className="cmdk-list">
          {pages.length>0 && <>
            <div className="cmdk-group-h">Navegação</div>
            {pages.map((p,i)=>(
              <div key={p.id} className={"cmdk-item "+(flat.indexOf(p)===idx?"active":"")} onMouseEnter={()=>setIdx(flat.indexOf(p))} onClick={()=>{ p.action(); onClose(); }}>
                <p.icon size={16}/><span>{p.label}</span><span className="sub">{p.hint}</span>
              </div>
            ))}
          </>}
          {actions.length>0 && <>
            <div className="cmdk-group-h">Ações rápidas</div>
            {actions.map(p=>(
              <div key={p.id} className={"cmdk-item "+(flat.indexOf(p)===idx?"active":"")} onMouseEnter={()=>setIdx(flat.indexOf(p))} onClick={()=>{ p.action(); onClose(); }}>
                <p.icon size={16}/><span>{p.label}</span><span className="sub">{p.hint}</span>
              </div>
            ))}
          </>}
          {alus.length>0 && <>
            <div className="cmdk-group-h">Alunos</div>
            {alus.map(a=>{
              const p = flat.find(f=>f.id==="al-"+a.id);
              return <div key={a.id} className={"cmdk-item "+(flat.indexOf(p)===idx?"active":"")} onMouseEnter={()=>setIdx(flat.indexOf(p))} onClick={()=>{ p.action(); onClose(); }}>
                <Avatar name={a.nome}/><span style={{ marginLeft:2 }}>{a.nome}</span><span className="sub">{a.pais}</span>
              </div>;
            })}
          </>}
          {flat.length===0 && <div style={{ padding:"32px 12px", textAlign:"center", color:"var(--text-3)", fontSize:13 }}>Nada encontrado para "{q}"</div>}
        </div>
      </div>
    </div>
  );
}

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