// ============================================================
// IUVENIS · App root
// ============================================================
function App() {
  const [page, setPage] = useState(() => localStorage.getItem("iuv-page") || "home");
  const [theme, setTheme] = useState(() => localStorage.getItem("iuv-theme") || "light");
  const [period, setPeriod] = useState("30d");
  const [cmdOpen, setCmdOpen] = useState(false);
  const [claudeOpen, setClaudeOpen] = useState(true);
  const [alunos, setAlunos] = useState(DATA.alunos);
  const [tarefas, setTarefas] = useState(DATA.tarefas);
  const [leads, setLeads] = useState([]);
  const [openAlunoId, setOpenAlunoId] = useState(null);

  useEffect(()=>{ document.documentElement.setAttribute("data-theme", theme); localStorage.setItem("iuv-theme", theme); }, [theme]);
  useEffect(()=>{ localStorage.setItem("iuv-page", page); }, [page]);

  // Global hotkeys
  useEffect(()=>{
    const h = e => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") { e.preventDefault(); setCmdOpen(true); }
      if (e.key === "Escape") setCmdOpen(false);
    };
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  },[]);

  // Listen for custom events
  useEffect(()=>{
    const open = ()=>setClaudeOpen(true);
    const openAl = (e)=>setOpenAlunoId(e.detail);
    window.addEventListener("iuvenis:openClaude", open);
    window.addEventListener("iuvenis:openAluno", openAl);
    return ()=>{
      window.removeEventListener("iuvenis:openClaude", open);
      window.removeEventListener("iuvenis:openAluno", openAl);
    };
  },[]);

  const pageTitles = {
    home:      { h: <>Briefing <span className="accent">do dia</span></>, sub: "Visão consolidada da Iuvenis · " + DATA.meta.today },
    social:    { h: <>Redes <span className="accent">sociais</span></>, sub: "Visão consolidada de todas as plataformas · Iuvenis" },
    anuncios:  { h: <>Tráfego <span className="accent">pago</span></>, sub: "Meta Ads + Google Ads · campanhas, ROAS e criativos" },
    site:      { h: <>Site & <span className="accent">SEO</span></>, sub: "iuvenisoficial.com · tráfego, conversão e ranking orgânico" },
    financeiro:{ h: <>Saúde <span className="accent">financeira</span></>, sub: "Receita, despesas e fluxo de caixa em tempo real" },
    alunos:    { h: <>Base de <span className="accent">alunos</span></>, sub: alunos.length + " alunos cadastrados · " + alunos.filter(a=>a.status==="Ativo").length + " ativos" },
    pipeline:  { h: <>Pipeline de <span className="accent">vendas</span></>, sub: "Leads, qualificação e conversão em matrículas" },
    "leads-quiz":    { h: <>Leads do <span className="accent">Quiz</span></>, sub: leads.length + " leads do quiz · " + leads.filter(l=>l.email_enviado).length + " email enviado" },
    candidaturas:    { h: <>Candidaturas à <span className="accent">Mentoria</span></>, sub: "Formulários preenchidos via iuvenisoficial.com/candidatura" },
    iunews:    { h: <>IuNews <span className="accent">newsletter</span></>, sub: "Edições, métricas e crescimento da base" },
    calendario:{ h: <>Calendário <span className="accent">editorial</span></>, sub: "Posts, IuNews e conteúdo da plataforma num só lugar" },
    inbox:     { h: <>Caixa de <span className="accent">entrada</span></>, sub: "Mensagens de todas as redes, WhatsApp e email" },
    conteudo:  { h: <>Conteúdo & <span className="accent">aulas</span></>, sub: "Módulos da plataforma e calendário editorial" },
    tarefas:   { h: <>Demandas e <span className="accent">tarefas</span></>, sub: "Kanban operacional da semana" },
    agentes:   { h: <>Agentes <span className="accent">IA</span></>, sub: "Cérebros especializados conectados aos seus dados" },
    garimpo:   { h: <>Garimpo de <span className="accent">concorrentes</span></>, sub: "Banco de ideias, padrões e oportunidades extraídos de 11 perfis" },
    intel:     { h: <>Inteligência <span className="accent">estratégica</span></>, sub: "Padrões vencedores · Copy pronta · Roteiros · Pilares · O que inovar — compilado de 11 perfis" },
  };
  const pt = pageTitles[page];

  return (
    <div className={"app " + (claudeOpen ? "with-claude" : "")}>
      <Sidebar active={page} onNav={setPage} taskCount={tarefas.filter(t=>t.col!=="done").length} inboxCount={DX.inbox.filter(m=>m.naoLida).length}/>

      <div className="main">
        <Topbar page={page} theme={theme} onToggleTheme={()=>setTheme(t=>t==="dark"?"light":"dark")} onOpenSearch={()=>setCmdOpen(true)} onToggleClaude={()=>setClaudeOpen(v=>!v)} claudeOpen={claudeOpen}/>

        <div className="main-scroll">
          <div className="page-head">
            <div>
              <h1 className="page-title">{pt.h}</h1>
              <div className="page-sub">{pt.sub}</div>
            </div>
            <div className="row gap-3">
              <span className="text-3 mono" style={{ fontSize:12 }}>{DATA.meta.today}</span>
              <button className="btn"><I.filter size={12}/> Filtros</button>
              <button className="btn btn-primary"><I.plus size={14}/> Novo</button>
            </div>
          </div>

          {page==="home"       && <PageHome alunos={alunos} tarefas={tarefas} onNav={setPage}/>}
          {page==="social"     && <PageSocial period={period} setPeriod={setPeriod}/>}
          {page==="anuncios"   && <PageAds period={period} setPeriod={setPeriod}/>}
          {page==="site"       && <PageSite period={period} setPeriod={setPeriod}/>}
          {page==="financeiro" && <PageFinanceiro period={period} setPeriod={setPeriod}/>}
          {page==="alunos"     && <PageAlunos alunos={alunos} setAlunos={setAlunos} openAlunoId={openAlunoId} setOpenAlunoId={setOpenAlunoId}/>}
          {page==="pipeline"   && <PagePipeline/>}
          {page==="leads-quiz"    && <PageLeadsQuiz/>}
          {page==="candidaturas"  && <PageCandidaturas/>}
          {page==="iunews"     && <PageIuNews/>}
          {page==="calendario" && <PageCalendario/>}
          {page==="inbox"      && <PageInbox/>}
          {page==="conteudo"   && <PageConteudo/>}
          {page==="tarefas"    && <PageTarefas tarefas={tarefas} setTarefas={setTarefas}/>}
          {page==="agentes"    && <PageAgentes/>}
          {page==="garimpo"    && <PageGarimpo/>}
          {page==="intel"      && <PageIntelEstrategica/>}
        </div>
      </div>

      {claudeOpen && <ClaudePanel onClose={()=>setClaudeOpen(false)} currentPage={page} alunos={alunos} tarefas={tarefas}/>}

      {cmdOpen && <CmdPalette onClose={()=>setCmdOpen(false)} onNav={setPage} alunos={alunos}/>}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);