// ============================================================
// Página: Anúncios (Meta Ads + Google Ads)
// ============================================================
function PageAds({ period, setPeriod }) {
  const a = DX.ads;
  const [plat, setPlat] = useState("todas"); // todas | meta | google
  const [openCamp, setOpenCamp] = useState(null);

  const days = period==="7d"?7 : period==="30d"?30 : period==="90d"?30 : 30;
  const gastoSerie = a.serieGasto.slice(-days).map((v,i,arr)=>({ v, label:i===0?"":i===arr.length-1?"hoje":"d-"+(arr.length-1-i) }));
  const roasSerie  = a.serieRoas.slice(-days).map((v,i,arr)=>({ v, label:i===0?"":i===arr.length-1?"hoje":"d-"+(arr.length-1-i) }));

  const camps = a.campanhas.filter(c => plat==="todas" || c.plat.toLowerCase()===plat);
  const crit  = a.criativos.filter(c => plat==="todas" || c.plat.toLowerCase()===plat);

  const totalGasto = camps.reduce((s,c)=>s+c.gasto,0);
  const totalMatr = camps.reduce((s,c)=>s+(c.matr||0),0);
  const cpaMedio = totalMatr>0 ? Math.round(totalGasto/totalMatr) : 0;

  return (
    <div className="flex-col gap-4">
      {/* Connection header */}
      <div className="grid g-3">
        <PlatformCard nome="Meta Ads" cor="#1877F2" conectada={a.contas.meta.conectada} sub={a.contas.meta.id} active={plat==="meta"} onClick={()=>setPlat(plat==="meta"?"todas":"meta")}/>
        <PlatformCard nome="Google Ads" cor="#4285F4" conectada={a.contas.google.conectada} sub={a.contas.google.id} active={plat==="google"} onClick={()=>setPlat(plat==="google"?"todas":"google")}/>
        <PlatformCard nome="TikTok Ads" cor="#000" conectada={false} sub="Conectar conta" active={false} onClick={()=>{}}/>
      </div>

      {/* KPIs */}
      <div className="grid g-4">
        <StatCard label="Gasto · mês"    value={fmtBRL(a.kpis.gastoMes.value)} delta={a.kpis.gastoMes.delta} spark={a.serieGasto.slice(-12)} accent="var(--brand-accent)"/>
        <StatCard label="ROAS"           value={a.kpis.roas.value} unit="x" delta={a.kpis.roas.delta} spark={a.serieRoas.slice(-12)} accent="var(--success)"/>
        <StatCard label="CPA médio"      value={fmtBRL(a.kpis.cpa.value)} delta={a.kpis.cpa.delta} spark={[180,172,168,160,158,152,148,144,142]} accent="var(--purple)"/>
        <StatCard label="Matrículas via Ads" value={a.kpis.matriculas.value} delta={a.kpis.matriculas.delta} spark={[18,22,24,26,28,30,32,33,34]} accent="var(--teal)"/>
      </div>

      {/* Spend + ROAS charts */}
      <div className="grid g-2">
        <div className="card">
          <div className="card-h">
            <div><div className="card-title">Investimento diário</div><div className="card-sub">{fmtBRL(totalGasto)} no período</div></div>
            <PeriodFilter value={period} onChange={setPeriod}/>
          </div>
          <LineChart data={gastoSerie} height={200} color="var(--brand-accent)" gradientId="ads-spend"/>
        </div>
        <div className="card">
          <div className="card-h">
            <div><div className="card-title">ROAS · retorno sobre investimento</div><div className="card-sub">Receita / gasto · alvo ≥ 4x</div></div>
            <span className="tag success"><span className="dot"></span>Acima da meta</span>
          </div>
          <LineChart data={roasSerie} height={200} color="var(--success)" gradientId="ads-roas"/>
        </div>
      </div>

      {/* Funil de Ads */}
      <div className="card">
        <div className="card-h">
          <div><div className="card-title">Funil de anúncios</div><div className="card-sub">Da impressão à matrícula</div></div>
        </div>
        <div className="row gap-2" style={{ alignItems:"stretch" }}>
          {a.funil.map((f,i)=>{
            const ratio = f.v / a.funil[0].v;
            const taxa = i===0 ? null : ((f.v / a.funil[i-1].v) * 100).toFixed(1);
            return (
              <React.Fragment key={i}>
                <div style={{ flex:1, padding:"16px 14px", border:"1px solid var(--border)", borderRadius:10, background:"var(--surface)", position:"relative", overflow:"hidden" }}>
                  <div style={{ position:"absolute", left:0, top:0, bottom:0, width: Math.max(ratio*100, 4)+"%", background:"var(--brand)", opacity: 0.1 }}/>
                  <div style={{ position:"relative" }}>
                    <div className="text-3" style={{ fontSize:11, textTransform:"uppercase", letterSpacing:"0.04em", fontWeight:600 }}>{f.etapa}</div>
                    <div className="stat-value mt-2" style={{ fontSize: i===0?24:22 }}>{f.v.toLocaleString("pt-BR")}</div>
                    {taxa && <div className="num text-3" style={{ fontSize:11 }}>{taxa}% do anterior</div>}
                  </div>
                </div>
                {i < a.funil.length-1 && <div style={{ display:"grid", placeItems:"center", color:"var(--text-3)" }}><I.chev size={16}/></div>}
              </React.Fragment>
            );
          })}
        </div>
      </div>

      {/* Campanhas table */}
      <div className="card">
        <div className="card-h">
          <div><div className="card-title">Campanhas</div><div className="card-sub">{camps.length} campanhas · {camps.filter(c=>c.status==="Ativa").length} ativas</div></div>
          <div className="row gap-2">
            <div className="pill-group">
              {[["todas","Todas"],["meta","Meta"],["google","Google"]].map(([k,l])=>(
                <button key={k} className={"pill " + (plat===k?"active":"")} onClick={()=>setPlat(k)}>{l}</button>
              ))}
            </div>
            <button className="btn btn-primary"><I.plus size={14}/> Nova campanha</button>
          </div>
        </div>
        <table className="dt">
          <thead><tr>
            <th>Campanha</th><th>Plat.</th><th>Status</th>
            <th className="num" style={{ textAlign:"right" }}>Gasto</th>
            <th className="num" style={{ textAlign:"right" }}>Impressões</th>
            <th className="num" style={{ textAlign:"right" }}>CTR</th>
            <th className="num" style={{ textAlign:"right" }}>CPA</th>
            <th className="num" style={{ textAlign:"right" }}>ROAS</th>
            <th className="num" style={{ textAlign:"right" }}>Matr.</th>
          </tr></thead>
          <tbody>
            {camps.map(c=>(
              <tr key={c.id} className="clickable" onClick={()=>setOpenCamp(c)}>
                <td style={{ fontWeight:500, maxWidth:280 }}>
                  <div style={{ whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis" }}>{c.nome}</div>
                  <div className="text-3" style={{ fontSize:11 }}>{c.obj}</div>
                </td>
                <td><PlatformBadge plat={c.plat}/></td>
                <td><span className={"tag " + (c.status==="Ativa"?"success":"warn")}><span className="dot"></span>{c.status}</span></td>
                <td className="num" style={{ textAlign:"right" }}>{fmtBRL(c.gasto)}</td>
                <td className="num" style={{ textAlign:"right" }}>{fmtCompact(c.impr)}</td>
                <td className="num" style={{ textAlign:"right", color: c.ctr>2.5?"var(--success)":"inherit" }}>{c.ctr}%</td>
                <td className="num" style={{ textAlign:"right" }}>{fmtBRL(c.cpa)}</td>
                <td className="num" style={{ textAlign:"right", color: c.roas>=4?"var(--success)": c.roas<2.5?"var(--danger)":"inherit", fontWeight: c.roas>=5?600:500 }}>{c.roas}x</td>
                <td className="num" style={{ textAlign:"right" }}>{c.matr || c.microConv || "—"}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Criativos + Públicos */}
      <div className="grid g-2-1">
        <div className="card">
          <div className="card-h">
            <div><div className="card-title">Criativos em rotação</div><div className="card-sub">Por performance · CPA × CTR</div></div>
            <button className="btn btn-ghost btn-sm">Galeria <I.arrow size={12}/></button>
          </div>
          <div className="grid g-2 gap-3">
            {crit.map(k=>(
              <div key={k.id} style={{ border:"1px solid var(--border)", borderRadius:10, overflow:"hidden" }}>
                <div style={{ height:90, background:"linear-gradient(135deg, var(--surface-2), var(--surface-3))", display:"grid", placeItems:"center", color:"var(--text-3)", fontSize:11, position:"relative" }}>
                  <div className="row gap-2"><I.play size={18}/> {k.tipo}</div>
                  <span style={{ position:"absolute", top:8, right:8 }}><PlatformBadge plat={k.plat} small/></span>
                  {k.status === "Top" && <span style={{ position:"absolute", top:8, left:8, fontSize:10, background:"var(--success)", color:"white", padding:"2px 6px", borderRadius:4, fontWeight:600 }}>TOP</span>}
                  {k.status === "Fraca" && <span style={{ position:"absolute", top:8, left:8, fontSize:10, background:"var(--danger)", color:"white", padding:"2px 6px", borderRadius:4, fontWeight:600 }}>REVISAR</span>}
                </div>
                <div style={{ padding:"10px 12px" }}>
                  <div style={{ fontSize:12.5, fontWeight:500, lineHeight:1.3, marginBottom:6, whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis" }}>{k.titulo}</div>
                  <div className="row gap-3 text-3" style={{ fontSize:11 }}>
                    <span>{fmtCompact(k.impr)} impr</span>
                    <span>CTR <span style={{ color:"var(--text-2)" }}>{k.ctr}%</span></span>
                    <span>CPA <span style={{ color:"var(--text-2)" }}>{fmtBRL(k.cpa)}</span></span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="card">
          <div className="card-h">
            <div><div className="card-title">Públicos</div><div className="card-sub">Performance por audiência</div></div>
          </div>
          <div className="flex-col gap-2">
            {a.publicos.map((p,i)=>(
              <div key={i} style={{ padding:"10px 12px", border:"1px solid var(--border)", borderRadius:8 }}>
                <div style={{ fontWeight:600, fontSize:12.5 }}>{p.nome}</div>
                <div className="row gap-3 mt-2" style={{ fontSize:11.5, color:"var(--text-3)" }}>
                  <span>Tam. <span style={{ color:"var(--text)" }}>{p.tam}</span></span>
                  <span>CPA <span style={{ color:"var(--text)" }}>{fmtBRL(p.cpa)}</span></span>
                  <span>ROAS <span style={{ color: p.roas>=5?"var(--success)":"var(--text)", fontWeight:500 }}>{p.roas}x</span></span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {openCamp && <Modal title={openCamp.nome} sub={openCamp.obj + " · " + openCamp.plat} onClose={()=>setOpenCamp(null)} wide
        footer={<>
          <button className="btn btn-ghost" onClick={()=>setOpenCamp(null)}>Fechar</button>
          <button className="btn">{openCamp.status==="Ativa"?"Pausar":"Reativar"}</button>
          <button className="btn btn-primary">Abrir no Gerenciador <I.ext size={12}/></button>
        </>}>
        <div className="grid g-4 mb-4">
          <div><div className="stat-label">Gasto</div><div className="stat-value">{fmtBRL(openCamp.gasto)}</div></div>
          <div><div className="stat-label">CPA</div><div className="stat-value">{fmtBRL(openCamp.cpa)}</div></div>
          <div><div className="stat-label">ROAS</div><div className="stat-value" style={{ color: openCamp.roas>=4?"var(--success)":"inherit" }}>{openCamp.roas}<span style={{ fontSize:18 }}>x</span></div></div>
          <div><div className="stat-label">Conversões</div><div className="stat-value">{openCamp.matr || openCamp.microConv || 0}</div></div>
        </div>
        <div className="grid g-3 mb-3">
          <div><div className="stat-label">Impressões</div><div className="num" style={{ fontWeight:500 }}>{openCamp.impr.toLocaleString("pt-BR")}</div></div>
          <div><div className="stat-label">Cliques</div><div className="num" style={{ fontWeight:500 }}>{openCamp.cliques.toLocaleString("pt-BR")}</div></div>
          <div><div className="stat-label">CTR</div><div className="num" style={{ fontWeight:500 }}>{openCamp.ctr}%</div></div>
        </div>
        <div className="text-2" style={{ fontSize:13.5, lineHeight:1.6, padding:"12px 14px", background:"var(--brand-soft)", borderRadius:8, color:"var(--brand)" }}>
          <strong>Recomendação Iuvenis · </strong>{openCamp.roas>=5 ? "Performance excelente. Escalar orçamento em +30% mantendo segmentação." : openCamp.roas>=4 ? "Performance saudável. Testar 2 criativos novos sem mexer no público." : "ROAS abaixo da meta. Trocar criativo e reavaliar segmentação antes de pausar."}
        </div>
      </Modal>}
    </div>
  );
}

function PlatformCard({ nome, cor, conectada, sub, active, onClick }) {
  return (
    <div className="card" style={{ padding:"14px 18px", cursor: conectada?"pointer":"default", borderColor: active?"var(--brand)":"var(--border)", background: active?"var(--brand-soft)":"var(--surface)" }} onClick={conectada?onClick:undefined}>
      <div className="row gap-3" style={{ justifyContent:"space-between" }}>
        <div className="row gap-3">
          <span style={{ width:32, height:32, borderRadius:8, background:cor, display:"grid", placeItems:"center", color:"white", fontWeight:700, fontSize:14 }}>{nome[0]}</span>
          <div>
            <div style={{ fontSize:13.5, fontWeight:600 }}>{nome}</div>
            <div className="text-3 mono" style={{ fontSize:11 }}>{sub}</div>
          </div>
        </div>
        {conectada
          ? <span className="tag success"><span className="dot"></span>Conectada</span>
          : <button className="btn btn-sm">Conectar</button>}
      </div>
    </div>
  );
}

function PlatformBadge({ plat, small }) {
  const cor = plat==="Meta"?"#1877F2": plat==="Google"?"#4285F4":"#000";
  return <span style={{ display:"inline-flex", alignItems:"center", gap:5, padding: small?"1px 6px":"2px 8px", borderRadius:99, background: "color-mix(in srgb, " + cor + " 14%, transparent)", color: cor, fontSize: small?10:11, fontWeight:600 }}>
    <span style={{ width:5, height:5, borderRadius:50, background:cor }}></span>{plat}
  </span>;
}

window.PageAds = PageAds;