// ============================================================
// Páginas: Calendário, Inbox, Agentes
// ============================================================

// ---------- Calendário editorial unificado ----------
function PageCalendario() {
  const [mes, setMes] = useState({ year: 2026, month: 4 }); // 0-indexed (4 = maio)
  const [filtro, setFiltro] = useState("todos"); // todos | post | news | aula
  const [openItem, setOpenItem] = useState(null);

  const items = DX.calendario.filter(c => filtro==="todos" || c.tipo===filtro);
  const meses = ["Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro"];
  const semanas = ["Dom","Seg","Ter","Qua","Qui","Sex","Sáb"];

  const first = new Date(mes.year, mes.month, 1);
  const startWeekday = first.getDay();
  const daysInMonth = new Date(mes.year, mes.month+1, 0).getDate();
  const cells = [];
  for (let i = 0; i < startWeekday; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) cells.push(d);
  while (cells.length % 7 !== 0) cells.push(null);

  const itemsByDay = {};
  items.forEach(it => {
    const [y,m,d] = it.data.split("-").map(Number);
    if (y === mes.year && m-1 === mes.month) {
      itemsByDay[d] = itemsByDay[d] || [];
      itemsByDay[d].push(it);
    }
  });

  const navMonth = (delta) => {
    let m = mes.month + delta, y = mes.year;
    if (m < 0) { m = 11; y--; } if (m > 11) { m = 0; y++; }
    setMes({ year: y, month: m });
  };

  const today = { y: 2026, m: 4, d: 26 };
  const tipos = [
    { id:"todos", label:"Todos" },
    { id:"post",  label:"Redes sociais" },
    { id:"news",  label:"IuNews" },
    { id:"aula",  label:"Conteúdo / Aulas" },
  ];

  return (
    <div className="flex-col gap-4">
      <div className="card">
        <div className="card-h">
          <div className="row gap-3">
            <button className="icon-btn" onClick={()=>navMonth(-1)} style={{ background:"var(--surface-2)" }}><I.chev size={14} style={{ transform:"rotate(180deg)" }}/></button>
            <div style={{ fontSize:18, fontWeight:600, minWidth:160 }}>{meses[mes.month]} <span className="text-3 num" style={{ fontWeight:400 }}>{mes.year}</span></div>
            <button className="icon-btn" onClick={()=>navMonth(1)} style={{ background:"var(--surface-2)" }}><I.chev size={14}/></button>
            <button className="btn btn-ghost btn-sm" onClick={()=>setMes({year:2026, month:4})}>Hoje</button>
          </div>
          <div className="row gap-3">
            <div className="pill-group">
              {tipos.map(t=><button key={t.id} className={"pill " + (filtro===t.id?"active":"")} onClick={()=>setFiltro(t.id)}>{t.label}</button>)}
            </div>
            <button className="btn btn-primary"><I.plus size={14}/> Agendar</button>
          </div>
        </div>

        {/* Calendar grid */}
        <div style={{ display:"grid", gridTemplateColumns:"repeat(7, 1fr)", gap:1, background:"var(--border)", border:"1px solid var(--border)", borderRadius:8, overflow:"hidden" }}>
          {semanas.map(s => <div key={s} style={{ padding:"8px 10px", background:"var(--surface-2)", fontSize:11, fontWeight:600, color:"var(--text-3)", textTransform:"uppercase", letterSpacing:"0.04em" }}>{s}</div>)}
          {cells.map((d,i)=>{
            const isToday = d===today.d && mes.year===today.y && mes.month===today.m;
            const dayItems = d ? (itemsByDay[d] || []) : [];
            return (
              <div key={i} style={{ minHeight:108, padding:8, background:"var(--surface)", display:"flex", flexDirection:"column", gap:4, opacity: d?1:0.4 }}>
                {d && <div className="row gap-2" style={{ justifyContent:"space-between", alignItems:"center", marginBottom:2 }}>
                  <span className="num" style={{ fontSize:12, fontWeight: isToday?700:500, color: isToday?"white":"var(--text-2)", background: isToday?"var(--brand)":"transparent", width:isToday?20:"auto", height:isToday?20:"auto", borderRadius:50, display:"grid", placeItems:"center" }}>{d}</span>
                  {dayItems.length > 0 && <span className="num text-3" style={{ fontSize:10 }}>{dayItems.length}</span>}
                </div>}
                {dayItems.slice(0,3).map((it,j)=>(
                  <div key={j} onClick={()=>setOpenItem(it)} style={{ padding:"3px 6px", borderRadius:5, fontSize:11, cursor:"pointer", background: typeColor(it.tipo).bg, color: typeColor(it.tipo).fg, fontWeight:500, whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis", lineHeight:1.3 }}>
                    {it.tipo==="post" && <SocialIcon rede={it.rede} size={11}/>}
                    {" "}{it.titulo}
                  </div>
                ))}
                {dayItems.length > 3 && <div className="text-3" style={{ fontSize:10, paddingLeft:6 }}>+{dayItems.length-3} mais</div>}
              </div>
            );
          })}
        </div>

        {/* Legenda */}
        <div className="row gap-4 mt-4" style={{ fontSize:11.5, color:"var(--text-3)" }}>
          <span className="row gap-2"><span style={{ width:10, height:10, borderRadius:3, background: typeColor("post").bg }}></span>Posts</span>
          <span className="row gap-2"><span style={{ width:10, height:10, borderRadius:3, background: typeColor("news").bg }}></span>IuNews</span>
          <span className="row gap-2"><span style={{ width:10, height:10, borderRadius:3, background: typeColor("aula").bg }}></span>Conteúdo / aulas</span>
        </div>
      </div>

      {openItem && <Modal title={openItem.titulo} sub={fmtDateBR(openItem.data) + " · " + openItem.tipo} onClose={()=>setOpenItem(null)}
        footer={<>
          <button className="btn btn-ghost" onClick={()=>setOpenItem(null)}>Fechar</button>
          <button className="btn btn-primary">Abrir conteúdo</button>
        </>}>
        <div className="row gap-3 mb-3">
          <CalTypeIcon item={openItem} size={32}/>
          <div>
            <div style={{ fontWeight:600, fontSize:15 }}>{openItem.titulo}</div>
            <div className="text-3" style={{ fontSize:12, marginTop:2 }}>{openItem.tipo==="post" && "Rede: "+openItem.rede+" · "}Status: {openItem.status}</div>
          </div>
        </div>
        <div className="text-2" style={{ fontSize:13.5 }}>Detalhes do item, briefing, copy e arquivos relacionados ficarão aqui.</div>
      </Modal>}
    </div>
  );
}

function typeColor(tipo) {
  if (tipo==="post") return { bg:"color-mix(in srgb, var(--brand-accent) 18%, transparent)", fg:"var(--brand-accent)" };
  if (tipo==="news") return { bg:"color-mix(in srgb, var(--warn) 18%, transparent)", fg:"var(--warn)" };
  if (tipo==="aula") return { bg:"color-mix(in srgb, var(--purple) 18%, transparent)", fg:"var(--purple)" };
  return { bg:"var(--surface-2)", fg:"var(--text-3)" };
}

// ---------- Inbox unificada ----------
function PageInbox() {
  const [canal, setCanal] = useState("todos");
  const [openMsg, setOpenMsg] = useState(null);
  const msgs = DX.inbox.filter(m => canal==="todos" || m.canal===canal);

  const canais = [
    { id:"todos",     label:"Tudo",      count: DX.inbox.length },
    { id:"whatsapp",  label:"WhatsApp",  count: DX.inbox.filter(m=>m.canal==="whatsapp").length },
    { id:"instagram", label:"Instagram", count: DX.inbox.filter(m=>m.canal==="instagram").length },
    { id:"email",     label:"Email",     count: DX.inbox.filter(m=>m.canal==="email").length },
    { id:"tiktok",    label:"TikTok",    count: DX.inbox.filter(m=>m.canal==="tiktok").length },
    { id:"youtube",   label:"YouTube",   count: DX.inbox.filter(m=>m.canal==="youtube").length },
  ];

  return (
    <div className="flex-col gap-4">
      <div className="grid g-4">
        <StatCard label="Não lidas"      value={DX.inbox.filter(m=>m.naoLida).length} accent="var(--brand-accent)"/>
        <StatCard label="Alta prioridade" value={DX.inbox.filter(m=>m.prio==="alta").length} accent="var(--danger)"/>
        <StatCard label="Tempo médio resp." value="14m" delta={-22.4} accent="var(--success)"/>
        <StatCard label="Triadas por IA"  value="68" delta={42.0} accent="var(--purple)"/>
      </div>

      <div className="card" style={{ padding:0 }}>
        <div style={{ padding:"16px 20px", borderBottom:"1px solid var(--border)", display:"flex", alignItems:"center", justifyContent:"space-between", gap:12, flexWrap:"wrap" }}>
          <div className="pill-group">
            {canais.map(c => (
              <button key={c.id} className={"pill " + (canal===c.id?"active":"")} onClick={()=>setCanal(c.id)}>
                {c.label} <span style={{ marginLeft:4, opacity:0.6 }}>{c.count}</span>
              </button>
            ))}
          </div>
          <div className="row gap-2">
            <button className="btn btn-ghost btn-sm"><I.sparkle size={12}/> Triar com IA</button>
            <button className="btn btn-ghost btn-sm">Marcar todas como lidas</button>
          </div>
        </div>

        <div className="flex-col">
          {msgs.map(m => (
            <div key={m.id} onClick={()=>setOpenMsg(m)} className="row gap-3 clickable" style={{ padding:"14px 20px", borderBottom:"1px solid var(--border)", cursor:"pointer", background: m.naoLida?"var(--surface)":"var(--surface-2)" }}>
              <ChannelIcon canal={m.canal} size={32}/>
              <div style={{ flex:1, minWidth:0 }}>
                <div className="row gap-2" style={{ justifyContent:"space-between" }}>
                  <div className="row gap-2">
                    <span style={{ fontWeight: m.naoLida?700:500, fontSize:13.5 }}>{m.de}</span>
                    <span className="tag" style={{ fontSize:10 }}>{m.tipo}</span>
                    {m.prio==="alta" && <span className="tag danger" style={{ fontSize:10 }}>Alta</span>}
                  </div>
                  <span className="mono text-3" style={{ fontSize:11 }}>{m.quando}</span>
                </div>
                <div className={m.naoLida?"":"text-3"} style={{ fontSize:13, marginTop:3, whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis" }}>{m.pre}</div>
              </div>
              {m.naoLida && <span style={{ width:8, height:8, borderRadius:50, background:"var(--brand)" }}></span>}
            </div>
          ))}
        </div>
      </div>

      {openMsg && <Modal title={openMsg.de} sub={openMsg.canal + " · " + openMsg.quando + " atrás"} onClose={()=>setOpenMsg(null)}
        footer={<>
          <button className="btn btn-ghost" onClick={()=>setOpenMsg(null)}>Fechar</button>
          <button className="btn"><I.sparkle size={12}/> Sugerir resposta</button>
          <button className="btn btn-primary">Responder</button>
        </>}>
        <div className="row gap-2 mb-3">
          <ChannelIcon canal={openMsg.canal} size={28}/>
          <span className="tag">{openMsg.tipo}</span>
          {openMsg.prio==="alta" && <span className="tag danger">Prioridade alta</span>}
        </div>
        <div style={{ padding:"14px 16px", background:"var(--surface-2)", borderRadius:8, fontSize:14, lineHeight:1.5 }}>{openMsg.pre}</div>
        <textarea className="textarea mt-4" placeholder="Escreva sua resposta…"/>
      </Modal>}
    </div>
  );
}

// ---------- Agentes IA ----------
function PageAgentes() {
  const [open, setOpen] = useState(null);
  return (
    <div className="flex-col gap-4">
      <div className="grid g-4">
        <StatCard label="Agentes ativos"     value={DX.agentes.filter(a=>a.ativo).length}/>
        <StatCard label="Ações no mês"       value="412" delta={28.4} accent="var(--brand-accent)"/>
        <StatCard label="Tempo economizado"  value="~38h" delta={42.0} accent="var(--success)"/>
        <StatCard label="Aprovações pendentes" value={3} accent="var(--warn)"/>
      </div>

      <div className="grid g-2 gap-4">
        {DX.agentes.map(a => (
          <div key={a.id} className="card" style={{ padding:0, overflow:"hidden", cursor:"pointer" }} onClick={()=>setOpen(a)}>
            <div style={{ padding:"20px 22px", background:"linear-gradient(135deg, color-mix(in srgb, " + a.cor + " 12%, transparent) 0%, transparent 100%)", borderBottom:"1px solid var(--border)" }}>
              <div className="row gap-3" style={{ justifyContent:"space-between", alignItems:"flex-start" }}>
                <div className="row gap-3">
                  <div style={{ width:42, height:42, borderRadius:10, background: a.cor, color:"white", display:"grid", placeItems:"center", fontSize:22, flexShrink:0 }}>{a.emoji}</div>
                  <div>
                    <div style={{ fontSize:15, fontWeight:600 }}>{a.nome}</div>
                    <div className="text-3" style={{ fontSize:11.5, marginTop:1 }}>{a.desc}</div>
                  </div>
                </div>
                <span className={"tag " + (a.status==="Online"?"success":"warn")}><span className="dot"></span>{a.status}</span>
              </div>
            </div>
            <div style={{ padding:"16px 22px" }}>
              <div className="row gap-4" style={{ marginBottom:14 }}>
                {a.stats.map((s,i)=>(
                  <div key={i} style={{ flex:1 }}>
                    <div className="text-3" style={{ fontSize:10.5, textTransform:"uppercase", letterSpacing:"0.04em", fontWeight:500 }}>{s.l}</div>
                    <div className="num" style={{ fontSize:18, fontWeight:600, marginTop:2 }}>{s.v}</div>
                  </div>
                ))}
              </div>
              <div className="text-3" style={{ fontSize:11, textTransform:"uppercase", letterSpacing:"0.04em", fontWeight:500, marginBottom:6 }}>Tarefas agora</div>
              <div className="flex-col gap-1">
                {a.tarefas.map((t,i)=>(
                  <div key={i} className="row gap-2" style={{ fontSize:12.5, padding:"4px 0" }}>
                    <span style={{ width:5, height:5, borderRadius:50, background:a.cor }}></span>
                    <span>{t}</span>
                  </div>
                ))}
              </div>
              <div className="row gap-2 mt-3">
                <button className="btn btn-ghost btn-sm" style={{ flex:1, justifyContent:"center" }}>Pausar</button>
                <button className="btn btn-sm" style={{ flex:1, justifyContent:"center" }}>Configurar</button>
                <button className="btn btn-primary btn-sm" style={{ flex:1, justifyContent:"center" }}>Conversar <I.arrow size={12}/></button>
              </div>
            </div>
          </div>
        ))}
      </div>

      {open && <Modal title={open.emoji + "  " + open.nome} sub={open.desc} onClose={()=>setOpen(null)} wide
        footer={<>
          <button className="btn btn-ghost" onClick={()=>setOpen(null)}>Fechar</button>
          <button className="btn">Configurar</button>
          <button className="btn btn-primary"><I.sparkle size={12}/> Iniciar conversa</button>
        </>}>
        <div className="grid g-3 mb-4">
          {open.stats.map((s,i)=>(
            <div key={i}><div className="stat-label">{s.l}</div><div className="stat-value">{s.v}</div></div>
          ))}
        </div>
        <div className="stat-label">Capacidades</div>
        <ul style={{ paddingLeft:18, fontSize:13.5, lineHeight:1.7, margin:"6px 0 16px", color:"var(--text-2)" }}>
          {open.id==="ag-conteudo" && <>
            <li>Lê IuNews recentes e identifica temas que engajaram</li>
            <li>Rascunha posts adaptando para cada rede (IG, TT, YT, LI)</li>
            <li>Sugere ganchos baseados em conteúdo viral do setor</li>
          </>}
          {open.id==="ag-vendas" && <>
            <li>Lê DMs do Instagram e WhatsApp e qualifica intenção</li>
            <li>Move leads no pipeline com base na conversa</li>
            <li>Agenda diagnóstico no seu calendário automaticamente</li>
          </>}
          {open.id==="ag-aluno" && <>
            <li>Acesso ao conteúdo da plataforma e checklists</li>
            <li>Responde dúvidas de visto, documentação, custos</li>
            <li>Escala pra você só o que precisa de toque humano</li>
          </>}
          {open.id==="ag-news" && <>
            <li>Coleta notícias do setor de intercâmbio</li>
            <li>Cruza com performance histórica da IuNews</li>
            <li>Rascunha edição + sugere 3 assuntos pra A/B test</li>
          </>}
          {open.id==="ag-financeiro" && <>
            <li>Categoriza receitas e despesas automaticamente</li>
            <li>Alerta inadimplência antes do atraso</li>
            <li>Projeta fluxo de caixa 30/60/90 dias</li>
          </>}
        </ul>
        <div className="text-2" style={{ fontSize:13, padding:"12px 14px", background:"var(--surface-2)", borderRadius:8 }}>
          <strong>Conectado a:</strong> {open.id==="ag-conteudo"?"IuNews, Instagram, TikTok, Plataforma":open.id==="ag-vendas"?"Instagram DM, WhatsApp Business, Pipeline":open.id==="ag-aluno"?"Plataforma de aulas, WhatsApp, Base de alunos":open.id==="ag-news"?"Beehiiv, RSS de notícias, Plataforma":"Banco, Stripe, Categorias contábeis"}
        </div>
      </Modal>}
    </div>
  );
}

Object.assign(window, { PageCalendario, PageInbox, PageAgentes });