// ============================================================
// Página: Redes Sociais (HOME)
// ============================================================
function PageSocial({ period, setPeriod }) {
  const s = DATA.social;
  const [openPost, setOpenPost] = useState(null);
  const [rede, setRede] = useState("todas"); // todas | instagram | tiktok | youtube | linkedin

  const days = period==="7d"?7 : period==="30d"?30 : period==="90d"?30 : 30;

  // Per-network derived metrics
  const conta = s.contas.find(c=>c.rede===rede);
  const totalAlcance = s.contas.reduce((sum,c)=>sum+c.alcance,0);
  const share = conta ? conta.alcance/totalAlcance : 1;

  // Scale the global alcance series by the network's share when filtered
  const raw = s.serieAlcance.slice(-days).map(v => Math.round(v * share));
  const series = raw.map((v,i)=>({
    v,
    label: i===0 ? "" : (i===raw.length-1 ? "hoje" : "d-"+(raw.length-1-i))
  }));

  // KPIs computed by network
  const kpis = rede==="todas" ? [
    { label:"Seguidores totais", value: s.kpis.seguidores.value, delta: s.kpis.seguidores.delta, spark:[42000,42600,43400,44100,44900,45800,46900,47600,48230], accent:"var(--brand-accent)" },
    { label:"Alcance · 30d",     value: fmtCompact(s.kpis.alcance30d.value), delta: s.kpis.alcance30d.delta, spark: s.serieAlcance.slice(-12), accent:"var(--teal)" },
    { label:"Engajamento médio", value: s.kpis.engaj30d.value, unit:"%", delta: s.kpis.engaj30d.delta, spark:[3.8,4.0,4.2,4.1,4.4,4.6,4.5,4.7,4.8], accent:"var(--success)" },
    { label:"Novos seguidores",  value: s.kpis.novos30d.value, delta: s.kpis.novos30d.delta, spark:[110,140,180,160,200,230,210,260,240,280,300,290], accent:"var(--purple)" },
  ] : [
    { label:"Seguidores",       value: conta.seguidores, delta: conta.delta, spark: Array.from({length:12},(_,i)=>Math.round(conta.seguidores*(0.86+i*0.012))), accent:"var(--brand-accent)" },
    { label:"Alcance · 30d",     value: fmtCompact(conta.alcance), delta: conta.delta+1.2, spark: raw.slice(-12), accent:"var(--teal)" },
    { label:"Engajamento médio", value: conta.engaj, unit:"%", delta: 0.4, spark:[conta.engaj-0.5,conta.engaj-0.3,conta.engaj-0.4,conta.engaj-0.2,conta.engaj-0.1,conta.engaj,conta.engaj+0.1,conta.engaj+0.2,conta.engaj], accent:"var(--success)" },
    { label:"Posts · 30d",       value: s.posts.filter(p=>p.rede===rede).length + 12, delta: 3.8, spark:[2,3,2,4,3,5,4,6,5,4,5,6], accent:"var(--purple)" },
  ];

  const redes = [
    { id:"todas",     label:"Todas",     count: s.contas.length },
    { id:"instagram", label:"Instagram", rede:"instagram" },
    { id:"tiktok",    label:"TikTok",    rede:"tiktok"    },
    { id:"youtube",   label:"YouTube",   rede:"youtube"   },
    { id:"linkedin",  label:"LinkedIn",  rede:"linkedin"  },
  ];
  const filteredPosts  = rede==="todas" ? s.posts  : s.posts.filter(p=>p.rede===rede);
  const filteredAgenda = rede==="todas" ? s.agenda : s.agenda.filter(a=>a.rede===rede);

  return (
    <div className="flex-col gap-4">
      {/* Network filter */}
      <div className="row gap-2" style={{ flexWrap:"wrap" }}>
        {redes.map(r => (
          <button key={r.id}
            className={"btn " + (rede===r.id?"btn-primary":"")}
            onClick={()=>setRede(r.id)}
            style={{ padding:"6px 12px" }}>
            {r.rede && <SocialIcon rede={r.rede} size={18}/>}
            {r.label}
          </button>
        ))}
      </div>

      {/* KPIs */}
      <div className="grid g-4">
        {kpis.map((k,i)=><StatCard key={i} {...k}/>)}
      </div>

      {/* Alcance chart + Contas */}
      <div className="grid g-2-1">
        <div className="card">
          <div className="card-h">
            <div>
              <div className="card-title">Alcance · {rede==="todas" ? "todas as redes" : (conta && conta.handle)}</div>
              <div className="card-sub">{rede==="todas" ? "Soma de visualizações únicas no período" : "Visualizações únicas no período"}</div>
            </div>
            <div className="row gap-3">
              <div className="row gap-2" style={{ fontSize:11, color:"var(--text-3)" }}>
                <span style={{ width:8, height:8, borderRadius:2, background:"var(--brand-accent)" }}></span> Alcance
              </div>
              <PeriodFilter value={period} onChange={setPeriod}/>
            </div>
          </div>
          <LineChart data={series} height={240} color="var(--brand-accent)"/>
        </div>

        <div className="card">
          <div className="card-h">
            <div className="card-title">Contas conectadas</div>
            <button className="btn btn-ghost btn-sm"><I.plus size={12}/> Conectar</button>
          </div>
          <div className="flex-col gap-3">
            {s.contas.map(c=>(
              <div key={c.rede}
                onClick={()=>setRede(rede===c.rede?"todas":c.rede)}
                style={{ padding:"10px 12px", border:"1px solid " + (rede===c.rede?"var(--brand)":"var(--border)"), borderRadius:8, background: rede===c.rede?"var(--brand-soft)":"transparent", cursor:"pointer", transition:"border-color 0.12s, background 0.12s" }}>
                <div className="row gap-3" style={{ justifyContent:"space-between" }}>
                  <div className="row gap-2">
                    <SocialIcon rede={c.rede}/>
                    <div>
                      <div style={{ fontSize:12.5, fontWeight:600, lineHeight:1.2 }}>{c.handle}</div>
                      <div className="num" style={{ fontSize:11, color:"var(--text-3)" }}>{c.seguidores.toLocaleString("pt-BR")} seg.</div>
                    </div>
                  </div>
                  <Delta value={c.delta}/>
                </div>
                <div className="row gap-3 mt-2" style={{ fontSize:11, color:"var(--text-3)" }}>
                  <span>Alcance <span className="num" style={{ color:"var(--text)" }}>{fmtCompact(c.alcance)}</span></span>
                  <span>Eng. <span className="num" style={{ color:"var(--text)" }}>{c.engaj}%</span></span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Top posts + Agenda */}
      <div className="grid g-2-1">
        <div className="card">
          <div className="card-h">
            <div className="card-title">Top posts {rede!=="todas" && "· " + rede}</div>
            <button className="btn btn-ghost btn-sm">Ver todos <I.arrow size={12}/></button>
          </div>
          {filteredPosts.length === 0 ? (
            <div style={{ padding:"24px", textAlign:"center", color:"var(--text-3)", fontSize:13 }}>Nenhum post desta rede no período.</div>
          ) : (
          <table className="dt">
            <thead><tr>
              <th style={{ width:32 }}></th><th>Conteúdo</th><th>Tipo</th><th>Data</th>
              <th className="num" style={{ textAlign:"right" }}>Alcance</th>
              <th className="num" style={{ textAlign:"right" }}>Engaj.</th>
              <th className="num" style={{ textAlign:"right" }}>Saves</th>
            </tr></thead>
            <tbody>
              {filteredPosts.map(p=>(
                <tr key={p.id} className="clickable" onClick={()=>setOpenPost(p)}>
                  <td><SocialIcon rede={p.rede} size={20}/></td>
                  <td style={{ fontWeight:500, maxWidth:340 }}>{p.titulo}</td>
                  <td><span className="tag">{p.tipo}</span></td>
                  <td className="mono text-3" style={{ fontSize:12 }}>{p.data}</td>
                  <td className="num" style={{ textAlign:"right" }}>{fmtCompact(p.alcance)}</td>
                  <td className="num" style={{ textAlign:"right", color: p.engaj>7?"var(--success)":"inherit" }}>{p.engaj}%</td>
                  <td className="num" style={{ textAlign:"right" }}>{p.saves.toLocaleString("pt-BR")}</td>
                </tr>
              ))}
            </tbody>
          </table>
          )}
        </div>

        <div className="card">
          <div className="card-h">
            <div className="card-title">Próximos posts</div>
            <button className="btn btn-ghost btn-sm"><I.plus size={12}/></button>
          </div>
          <div className="flex-col gap-3">
            {filteredAgenda.length === 0 ? (
              <div style={{ padding:"24px", textAlign:"center", color:"var(--text-3)", fontSize:13 }}>Nenhum post agendado nesta rede.</div>
            ) : filteredAgenda.map((a,i)=>(
              <div key={i} style={{ padding:"10px 12px", border:"1px solid var(--border)", borderRadius:8 }}>
                <div className="row gap-2" style={{ justifyContent:"space-between" }}>
                  <div className="mono text-3" style={{ fontSize:11 }}>{a.data}</div>
                  <span className={"tag " + (a.status==="Agendado"?"brand": a.status==="Em produção"?"warn": a.status==="Em edição"?"purple":"")}>
                    <span className="dot"></span>{a.status}
                  </span>
                </div>
                <div className="row gap-2 mt-2">
                  <SocialIcon rede={a.rede} size={20}/>
                  <div style={{ fontSize:13, fontWeight:500 }}>{a.titulo}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {openPost && (
        <Modal title={openPost.titulo} sub={<div className="row gap-2"><SocialIcon rede={openPost.rede} size={18}/>{openPost.tipo} · {openPost.data}</div>} onClose={()=>setOpenPost(null)}
          footer={<>
            <button className="btn btn-ghost" onClick={()=>setOpenPost(null)}>Fechar</button>
            <button className="btn btn-primary">Abrir no {openPost.rede} <I.ext size={12}/></button>
          </>}>
          <div className="grid g-3 mb-4">
            <div><div className="stat-label">Alcance</div><div className="stat-value">{openPost.alcance.toLocaleString("pt-BR")}</div></div>
            <div><div className="stat-label">Engajamento</div><div className="stat-value">{openPost.engaj}<span style={{ fontSize:18 }}>%</span></div></div>
            <div><div className="stat-label">Salvamentos</div><div className="stat-value">{openPost.saves.toLocaleString("pt-BR")}</div></div>
          </div>
          <div className="text-2" style={{ fontSize:13.5, lineHeight:1.6 }}>
            Performance acima da média da conta. Conteúdo gerou <strong>{Math.round(openPost.alcance*openPost.engaj/100/10).toLocaleString("pt-BR")}</strong> interações e
            <strong> {openPost.saves.toLocaleString("pt-BR")}</strong> salvamentos — sinal forte de intenção. Cogitar reaproveitar o tema em outra rede.
          </div>
        </Modal>
      )}
    </div>
  );
}

// ============================================================
// Página: Financeiro
// ============================================================
function PageFinanceiro({ period, setPeriod }) {
  const [f, setF] = useState(DATA.finance);

  useEffect(() => {
    fetch('/api/financeiro')
      .then(r => r.ok ? r.json() : null)
      .then(d => {
        if (!d || !d.receitaMensal || d.receitaMensal.length === 0) return;
        setF(prev => ({
          ...prev,
          receitaMensal: d.receitaMensal,
          transacoes: d.transacoes && d.transacoes.length > 0 ? d.transacoes : prev.transacoes,
          despesasCategoria: d.despesasCategoria && d.despesasCategoria.length > 0 ? d.despesasCategoria : prev.despesasCategoria,
        }));
      })
      .catch(() => {});
  }, []);

  const cut = period==="7d" ? 2 : period==="30d" ? 4 : period==="90d" ? 6 : 12;
  const serie = f.receitaMensal.slice(-cut);
  const mtdRec = serie[serie.length-1].receita;
  const mtdDes = serie[serie.length-1].despesa;
  const totalRec = serie.reduce((s,x)=>s+x.receita,0);
  const totalDes = serie.reduce((s,x)=>s+x.despesa,0);
  const prevRec = f.receitaMensal[f.receitaMensal.length-2].receita;
  const delta = ((mtdRec - prevRec) / prevRec) * 100;
  const margem = ((mtdRec - mtdDes) / mtdRec) * 100;

  const palette = ["#1B4DD8","#6A47C7","#137DA0","#0F9D58","#B7791F","#D63384"];
  const segs = f.despesasCategoria.map((c,i)=>({ value:c.v, color: palette[i%palette.length], label:c.cat }));

  return (
    <div className="flex-col gap-4">
      <div className="grid g-4">
        <StatCard label="Receita · mês"   value={fmtBRL(mtdRec)}    delta={+delta.toFixed(1)} spark={f.receitaMensal.map(x=>x.receita)} accent="var(--brand-accent)"/>
        <StatCard label="Despesa · mês"   value={fmtBRL(mtdDes)}    delta={3.2}  spark={f.receitaMensal.map(x=>x.despesa)} accent="var(--danger)"/>
        <StatCard label="Lucro · mês"     value={fmtBRL(mtdRec-mtdDes)} delta={+((delta-3.2)).toFixed(1)} spark={f.receitaMensal.map(x=>x.receita-x.despesa)} accent="var(--success)"/>
        <StatCard label="Margem"          value={margem.toFixed(0)} unit="%" delta={1.4} spark={f.receitaMensal.map(x=>((x.receita-x.despesa)/x.receita)*100)} accent="var(--purple)"/>
      </div>

      <div className="card">
        <div className="card-h">
          <div>
            <div className="card-title">Fluxo de caixa</div>
            <div className="card-sub">Receita, despesa e lucro líquido por mês</div>
          </div>
          <div className="row gap-4">
            <div className="row gap-3" style={{ fontSize:11 }}>
              <span className="row gap-2"><span style={{ width:10, height:10, borderRadius:2, background:"linear-gradient(to bottom, var(--brand), var(--brand-2))" }}></span><span className="text-3">Receita</span></span>
              <span className="row gap-2"><span style={{ width:10, height:10, borderRadius:2, background:"var(--surface-3)" }}></span><span className="text-3">Despesa</span></span>
              <span className="row gap-2"><span style={{ width:10, height:2, background:"var(--success)" }}></span><span className="text-3">Lucro</span></span>
            </div>
            <PeriodFilter value={period} onChange={setPeriod}/>
          </div>
        </div>
        <ComboChart data={serie} height={260}/>
      </div>

      <div className="grid g-2-1">
        <div className="card">
          <div className="card-h">
            <div className="card-title">Transações recentes</div>
            <button className="btn btn-ghost btn-sm">Ver tudo <I.arrow size={12}/></button>
          </div>
          <table className="dt">
            <thead><tr><th>Data</th><th>Descrição</th><th>Categoria</th><th className="num" style={{ textAlign:"right" }}>Valor</th></tr></thead>
            <tbody>
              {f.transacoes.map((t,i)=>(
                <tr key={i}>
                  <td className="mono text-3" style={{ fontSize:12, width:60 }}>{t.data}</td>
                  <td>{t.desc}</td>
                  <td><span className="tag">{t.cat}</span></td>
                  <td className="num" style={{ textAlign:"right", color: t.v>0?"var(--success)":"var(--text)", fontWeight: t.v>0?500:400 }}>
                    {t.v>0?"+":""}{fmtBRL(t.v)}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="card">
          <div className="card-h">
            <div className="card-title">Despesas · mês</div>
            <div className="card-sub">{fmtBRL(totalDes/serie.length)} médio</div>
          </div>
          <div className="row gap-4" style={{ alignItems:"center" }}>
            <Donut segments={segs} centerLabel={fmtBRL(mtdDes)} centerSub="total"/>
            <div className="flex-col gap-2" style={{ flex:1, minWidth:0 }}>
              {f.despesasCategoria.map((c,i)=>(
                <div key={i} className="row gap-2" style={{ fontSize:12.5, justifyContent:"space-between" }}>
                  <div className="row gap-2" style={{ minWidth:0 }}>
                    <span style={{ width:8, height:8, borderRadius:2, background: palette[i%palette.length], flexShrink:0 }}></span>
                    <span style={{ whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis" }}>{c.cat}</span>
                  </div>
                  <span className="num text-3">{fmtBRL(c.v)}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* CAC por canal + Forecast */}
      <div className="grid g-2-1">
        <div className="card">
          <div className="card-h">
            <div><div className="card-title">CAC por canal</div><div className="card-sub">Custo de aquisição × receita gerada</div></div>
          </div>
          <table className="dt">
            <thead><tr><th>Canal</th><th className="num" style={{ textAlign:"right" }}>CAC</th><th className="num" style={{ textAlign:"right" }}>Matrículas</th><th className="num" style={{ textAlign:"right" }}>Receita</th><th className="num" style={{ textAlign:"right" }}>LTV/CAC</th></tr></thead>
            <tbody>
              {DX.cacCanal.map((c,i)=>{
                const ltv = c.matriculas>0 ? c.receita/c.matriculas*8 : 0; // estimativa LTV = 8 meses
                const ratio = c.cac>0 ? (ltv/c.cac).toFixed(1) : "∞";
                return <tr key={i}>
                  <td style={{ fontWeight:500 }}>{c.canal}</td>
                  <td className="num" style={{ textAlign:"right" }}>{c.cac===0?"—":fmtBRL(c.cac)}</td>
                  <td className="num" style={{ textAlign:"right" }}>{c.matriculas}</td>
                  <td className="num" style={{ textAlign:"right" }}>{fmtBRL(c.receita)}</td>
                  <td className="num" style={{ textAlign:"right", color: c.cac===0?"var(--success)":(ltv/c.cac>=5?"var(--success)":(ltv/c.cac>=3?"var(--brand)":"var(--warn)")), fontWeight:600 }}>{ratio}{c.cac>0?"x":""}</td>
                </tr>;
              })}
            </tbody>
          </table>
        </div>

        <div className="card">
          <div className="card-h">
            <div><div className="card-title">Previsão · 90 dias</div><div className="card-sub">Cenários conservador / base / otimista</div></div>
          </div>
          <div className="flex-col gap-3">
            {DX.forecast.map((f,i)=>(
              <div key={i} style={{ padding:"12px 14px", border:"1px solid var(--border)", borderRadius:8 }}>
                <div className="row gap-2" style={{ justifyContent:"space-between", marginBottom:8 }}>
                  <span style={{ fontWeight:600, fontSize:13 }}>{f.mes}</span>
                  <span className="num" style={{ fontSize:15, fontWeight:600 }}>{fmtBRL(f.receita)}</span>
                </div>
                <div style={{ position:"relative", height:6, background:"var(--surface-3)", borderRadius:99, overflow:"hidden" }}>
                  <div style={{ position:"absolute", left:((f.conservador-15000)/(35000-15000))*100+"%", right:(1-(f.otimista-15000)/(35000-15000))*100+"%", top:0, bottom:0, background:"var(--brand-soft-2)", borderRadius:99 }}></div>
                  <div style={{ position:"absolute", left:((f.receita-15000)/(35000-15000))*100+"%", top:-3, width:3, height:12, background:"var(--brand)", borderRadius:2 }}></div>
                </div>
                <div className="row gap-2 mt-2 num text-3" style={{ fontSize:11, justifyContent:"space-between" }}>
                  <span>{fmtBRL(f.conservador)}</span>
                  <span>{fmtBRL(f.otimista)}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PageSocial, PageFinanceiro });