/* global React */
/* =====================================================
   Aba Anúncios (Ads) — IA Vendus. Provider-agnóstica.
   ML ativo; Shopee/TikTok plugáveis (chips "em breve").
   Princípios: linguagem de gente, rascunho-e-aprova, honestidade (gated → passo a passo manual).
===================================================== */
const { I, Chip, Btn, Card, Eyebrow, SectionTitle, EmptyState, brl } = window.VendusAtoms;
const { useState, useEffect } = React;

const ADS_CHIPS = [
  { id: "mercado_livre", label: "Mercado Livre" },
  { id: "shopee", label: "Shopee" },
  { id: "tiktok", label: "TikTok Shop" },
];
const SAUDE_COR = { verde: "#4ADE80", amarelo: "#FB923C", cinza: "var(--fg-3)" };
const fmtPct = (v) => (v == null ? "—" : Math.round(v * 10) / 10 + "%");

// Leitura em linguagem de gente do ACOS. A referência de lucro é a MARGEM (você lucra enquanto
// ACOS < margem). ACOS acima da meta de 25% não é problema se a margem é alta.
function acosRead(acos, meta, margem) {
  if (acos == null) return "Ainda sem gasto/venda suficiente para calcular o ACOS.";
  const base = `Você gasta R$ ${acos.toFixed(2).replace(".", ",")} de anúncio para cada R$ 100 vendidos.`;
  if (margem != null && margem > 0) {
    const m = Math.round(margem);
    if (acos <= margem) return base + ` Como sua margem é ~${m}%, cada venda por anúncio ainda dá lucro — dá pra escalar.`;
    return base + ` Sua margem é ~${m}%: o ACOS passou da margem, o anúncio está comendo o lucro — baixe o lance (ROAS Objetivo no ML) ou pause o que não converte.`;
  }
  if (meta == null) return base + " Cadastre o custo dos produtos para comparar com sua margem real.";
  if (acos <= meta) return base + ` Sua meta é ${meta}% — está dentro, dá pra escalar.`;
  return base + ` Sua meta é ${meta}% — acima da meta; cadastre o custo dos produtos para saber se ainda compensa pela sua margem.`;
}
const TIPO_LABEL = { ajustar_orcamento: "Ajustar orçamento", ajustar_acos: "Ajustar ACOS-alvo", pausar_campanha: "Pausar campanha", reativar_campanha: "Reativar campanha" };

function AdsPage({ store }) {
  const connected = !!(store && store.connected);
  const [mk, setMk] = useState("mercado_livre");
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [analyzing, setAnalyzing] = useState(false);
  const [acao, setAcao] = useState(null);

  function load() {
    setLoading(true);
    window.VendusCopilot.getAds(mk).then((d) => { setData(d); setLoading(false); });
  }
  useEffect(() => { if (connected) load(); else setLoading(false); }, [connected, mk]);

  async function analisar() {
    setAnalyzing(true);
    window.vendusToast && window.vendusToast("Analisando seus anúncios…", { icon: "sparkles" });
    const r = await window.VendusCopilot.analisarAds();
    setAnalyzing(false);
    if (r.ok) { window.vendusToast && window.vendusToast("Recomendações de anúncios atualizadas!", { icon: "check-check", tone: "success" }); load(); }
    else window.vendusToast && window.vendusToast(r.error || "Não consegui analisar agora.", { icon: "alert-triangle", tone: "danger" });
  }

  const consolidado = !!(store && store.consolidado);
  const header = (
    <div className="page-header">
      <div>
        <Eyebrow>IA Vendus · Anúncios</Eyebrow>
        <h1 className="page-title">Anúncios (Ads)</h1>
        <div className="page-sub">{consolidado ? "Anúncios são por loja — cada marketplace tem a própria conta de Ads. Escolha uma loja no seletor pra ver e agir." : "Quanto seus anúncios gastam, o que rende e o que escalar ou pausar."}</div>
      </div>
      {connected && mk === "mercado_livre" && data && data.disponivel !== false && (
        <Btn variant="primary" onClick={analisar} disabled={analyzing}><I name={analyzing ? "loader" : "sparkles"} size={14} /> {analyzing ? "Analisando…" : "Analisar anúncios"}</Btn>
      )}
    </div>
  );

  if (!connected) {
    return (
      <div className="page fade-in">{header}
        <EmptyState icon="megaphone" title="Conecte sua loja para ver os anúncios" desc="Os dados de Product Ads (gasto, ACOS, ROAS e campanhas) aparecem aqui assim que você conectar o Mercado Livre." />
      </div>
    );
  }

  return (
    <div className="page fade-in">
      {header}

      {/* Seletor de marketplace (ML ativo; Shopee/TikTok em breve) */}
      <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 16 }}>
        {ADS_CHIPS.map((c) => {
          const ativo = c.id === "mercado_livre";
          const sel = mk === c.id;
          return (
            <button key={c.id} disabled={!ativo} onClick={() => ativo && setMk(c.id)}
              style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "8px 14px", borderRadius: 10, fontSize: 12.5, fontWeight: 600, cursor: ativo ? "pointer" : "default",
                border: "1px solid " + (sel ? "var(--primary)" : "var(--border)"), background: sel ? "rgba(249,115,22,.12)" : "var(--bg-elev)", color: sel ? "var(--primary)" : ativo ? "var(--fg-1)" : "var(--fg-3)", opacity: ativo ? 1 : 0.6 }}>
              {c.label}{!ativo && <Chip tone="default">em breve</Chip>}
            </button>
          );
        })}
      </div>

      {mk !== "mercado_livre" ? (
        <Card padding={24}><div className="text-muted" style={{ fontSize: 13.5 }}>Integração de Ads do {ADS_CHIPS.find((c) => c.id === mk).label} chega em breve. O Mercado Livre já está ativo.</div></Card>
      ) : loading ? (
        <Card padding={24}><div className="text-muted">Carregando seus anúncios…</div></Card>
      ) : !data || data.disponivel === false ? (
        <Card padding={24}><div className="text-muted" style={{ fontSize: 13.5 }}>Anúncios indisponíveis para esta conta no momento.</div></Card>
      ) : data.sem_campanhas || !data.resumo ? (
        <Card padding={24}>
          <div style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
            <I name="info" size={18} className="text-orange" />
            <div>
              <div style={{ fontWeight: 700, fontSize: 14 }}>Sem campanhas de Ads ativas</div>
              <div className="text-muted" style={{ fontSize: 13, marginTop: 4, lineHeight: 1.5 }}>{data.motivo || "Não encontrei campanhas de Product Ads. Crie uma no painel do Mercado Livre para começar a anunciar."}</div>
            </div>
          </div>
        </Card>
      ) : (
        <>
          <AdsResumo r={data.resumo} moeda={data.moeda} periodo={data.periodo} />
          <AdsRecomendacoes recs={data.recomendacoes} em={data.recomendacoes_em} onAnalisar={analisar} analyzing={analyzing} />
          <AdsCampanhas campanhas={data.campanhas} podeEscrever={data.pode_escrever} onAcao={setAcao} />
          {data.pode_escrever && !data.pode_escrever.ok && <GatedBanner motivo={data.pode_escrever.motivo} />}
          <div className="text-faint" style={{ fontSize: 11.5, marginTop: 18, display: "flex", alignItems: "center", gap: 6 }}>
            <I name="info" size={12} /> ACOS = quanto você gasta de anúncio para cada R$ 100 vendidos. ROAS = quantos reais cada R$ 1 de anúncio gerou.
          </div>
        </>
      )}

      {acao && <AdsAcaoModal acao={acao} podeEscrever={data.pode_escrever} onClose={() => setAcao(null)} onDone={() => { setAcao(null); load(); }} />}
    </div>
  );
}

/* ---- 4.1 Resumo em reais ---- */
function AdsResumo({ r, moeda, periodo }) {
  const meta = r.acos_meta;
  const acosOk = r.acos != null && meta != null && r.acos <= meta;
  const kpis = [
    { rotulo: "Gastou em anúncios", valor: brl(r.gasto) },
    { rotulo: "Retorno (vendas geradas)", valor: brl(r.retorno) },
    { rotulo: "ACOS", valor: fmtPct(r.acos), cor: r.acos == null ? "var(--fg-1)" : acosOk ? "#4ADE80" : "#FB923C", extra: meta != null ? `meta ${meta}%` : "sem meta" },
    { rotulo: "ROAS", valor: r.roas != null ? r.roas.toFixed(2).replace(".", ",") + "×" : "—" },
  ];
  return (
    <Card padding={18} style={{ marginBottom: 16 }}>
      <SectionTitle title="Resumo dos anúncios" sub={`Product Ads · ${periodo}`} />
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginTop: 12 }}>
        {kpis.map((k) => (
          <div key={k.rotulo} style={{ background: "var(--bg-elev)", borderRadius: 12, padding: "12px 14px" }}>
            <div className="text-faint" style={{ fontSize: 11 }}>{k.rotulo}</div>
            <div className="font-display mono-numeric" style={{ fontSize: 22, fontWeight: 800, color: k.cor || "var(--fg-1)", marginTop: 2 }}>{k.valor}</div>
            {k.extra && <div className="text-faint" style={{ fontSize: 10.5 }}>{k.extra}</div>}
          </div>
        ))}
      </div>
      <div className="text-muted" style={{ fontSize: 12.5, lineHeight: 1.5, marginTop: 12, display: "flex", gap: 7 }}>
        <span className="text-orange" style={{ fontWeight: 800 }}>i</span>
        <span>{acosRead(r.acos, meta, r.margem_media)}</span>
      </div>
    </Card>
  );
}

/* ---- 4.3 Recomendações priorizadas ---- */
const SEV_TONE = { critico: "danger", atencao: "warning", monitorar: "violet", ok: "success", sem_dado: "default" };
function AdsRecomendacoes({ recs, em, onAnalisar, analyzing }) {
  const top = (recs || []).slice(0, 3);
  return (
    <Card padding={18} style={{ marginBottom: 16 }}>
      <SectionTitle title="Recomendações de anúncios" sub={em ? "Da última análise · " + new Date(em).toLocaleString("pt-BR", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" }) : "O que escalar, pausar e corrigir"} />
      {top.length === 0 ? (
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, marginTop: 8, flexWrap: "wrap" }}>
          <span className="text-muted" style={{ fontSize: 13 }}>Ainda não há recomendações de Ads. Rode uma análise para a IA dizer o que escalar e o que ajustar.</span>
          <Btn variant="secondary" size="sm" onClick={onAnalisar} disabled={analyzing}><I name="sparkles" size={13} /> Analisar anúncios</Btn>
        </div>
      ) : (
        <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 10 }}>
          {top.map((f, i) => (
            <div key={i} style={{ display: "flex", gap: 10, background: "var(--bg-elev)", borderRadius: 10, padding: 12 }}>
              <div style={{ width: 6, alignSelf: "stretch", borderRadius: 999, background: SAUDE_COR[(f.severidade === "critico" || f.severidade === "atencao") ? "amarelo" : "verde"] || "var(--fg-3)", flexShrink: 0 }} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
                  <Chip tone={SEV_TONE[f.severidade] || "default"}>{f.severidade || "—"}</Chip>
                  <span style={{ fontWeight: 700, fontSize: 13.5 }}>{f.titulo}</span>
                </div>
                <p className="text-muted" style={{ fontSize: 12.5, lineHeight: 1.5, margin: "4px 0 0" }}>{f.traducao || f.o_que_significa}</p>
                {f.o_que_fazer && <div style={{ fontSize: 12.5, fontWeight: 600, marginTop: 4 }}>→ {f.o_que_fazer}</div>}
                {f.impacto && <div className="text-faint" style={{ fontSize: 11.5, marginTop: 3 }}>Impacto: {f.impacto}</div>}
              </div>
            </div>
          ))}
        </div>
      )}
    </Card>
  );
}

/* ---- 4.2 Lista de campanhas ---- */
function AdsCampanhas({ campanhas, podeEscrever, onAcao }) {
  if (!campanhas || campanhas.length === 0) return null;
  return (
    <Card padding={18} style={{ marginBottom: 16 }}>
      <SectionTitle title="Suas campanhas" sub="Saúde, orçamento e o que dá pra ajustar" />
      <div style={{ display: "flex", flexDirection: "column", gap: 12, marginTop: 12 }}>
        {campanhas.map((c) => <CampanhaCard key={c.id} c={c} onAcao={onAcao} />)}
      </div>
    </Card>
  );
}
function CampanhaCard({ c, onAcao }) {
  const cor = SAUDE_COR[c.saude.cor] || "var(--fg-3)";
  const ativa = c.status === "active";
  const sugereOrcamento = c.saude.cor === "verde" ? Math.round((c.orcamento_diario || 0) * 1.2) : Math.round((c.orcamento_diario || 0) * 0.9);
  const sugereAcos = c.acos_alvo != null ? (c.saude.cor === "amarelo" ? Math.max(5, c.acos_alvo - 5) : c.acos_alvo) : null;
  return (
    <div style={{ border: "1px solid var(--border)", borderRadius: 12, padding: 14 }}>
      <div style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
        <div style={{ width: 8, alignSelf: "stretch", borderRadius: 999, background: cor, flexShrink: 0 }} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
            <span style={{ fontWeight: 700, fontSize: 14 }}>{c.nome}</span>
            <Chip tone={ativa ? "success" : "default"}>{ativa ? "Ativa" : "Pausada"}</Chip>
            <span style={{ fontSize: 11.5, fontWeight: 600, color: cor }}>{c.saude.rotulo}</span>
          </div>
          <div className="text-muted" style={{ fontSize: 12, marginTop: 4, lineHeight: 1.5 }}>{c.saude.motivo}</div>
          <div style={{ display: "flex", gap: 16, flexWrap: "wrap", marginTop: 8 }}>
            {[["Orçamento/dia", brl(c.orcamento_diario)], ["ACOS", fmtPct(c.acos) + (c.acos_alvo != null ? ` / meta ${c.acos_alvo}%` : "")], ["ROAS", c.roas != null ? c.roas.toFixed(2).replace(".", ",") + "×" : "—"], ["Gasto", brl(c.gasto)], ["Vendas", brl(c.vendas)]].map(([l, v]) => (
              <div key={l}><div className="text-faint" style={{ fontSize: 10.5 }}>{l}</div><div className="mono-numeric" style={{ fontSize: 13, fontWeight: 700 }}>{v}</div></div>
            ))}
          </div>
          <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginTop: 12 }}>
            <Btn variant="secondary" size="sm" onClick={() => onAcao({ campanha: c, tipo: "ajustar_orcamento", de: c.orcamento_diario, para: sugereOrcamento })}>Orçamento</Btn>
            {c.acos_alvo != null && <Btn variant="secondary" size="sm" onClick={() => onAcao({ campanha: c, tipo: "ajustar_acos", de: c.acos_alvo, para: sugereAcos })}>ACOS-alvo</Btn>}
            {ativa
              ? <Btn variant="ghost" size="sm" onClick={() => onAcao({ campanha: c, tipo: "pausar_campanha" })}>Pausar</Btn>
              : <Btn variant="ghost" size="sm" onClick={() => onAcao({ campanha: c, tipo: "reativar_campanha" })}>Reativar</Btn>}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---- 4.4 Aviso de gated ---- */
function GatedBanner({ motivo }) {
  return (
    <Card padding={16} style={{ marginBottom: 4, borderColor: "rgba(251,146,60,.4)" }}>
      <div style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
        <I name="hand" size={18} className="text-orange" />
        <div>
          <div style={{ fontWeight: 700, fontSize: 13.5 }}>Aplicar pelo Vendus ainda não está liberado nesta conta</div>
          <div className="text-muted" style={{ fontSize: 12.5, marginTop: 4, lineHeight: 1.5 }}>{motivo}</div>
        </div>
      </div>
    </Card>
  );
}

/* ---- Modal de ação: aplica (quando liberado) ou mostra o passo a passo manual (gated) ---- */
const PASSOS = {
  ajustar_orcamento: (c, v) => ["Abra o app/site do Mercado Livre → Publicidade → Product Ads.", `Selecione a campanha “${c.nome}”.`, `Em Orçamento diário, troque para R$ ${v}.`, "Salve. Pronto — o anúncio passa a poder rodar o dia todo."],
  ajustar_acos: (c, v) => {
    const roas = v ? (100 / v).toFixed(2).replace(".", ",") : "—";
    return [
      "Abra o Mercado Livre → Publicidade → Product Ads.",
      `Selecione a campanha “${c.nome}” e clique em Modificar campanha.`,
      `O Mercado Livre não tem campo de ACOS — ele usa o ROAS Objetivo (o inverso: ROAS = 100 ÷ ACOS). Para um ACOS de ${v}%, coloque ROAS Objetivo = ${roas}×.`,
      "Salve. ROAS Objetivo mais alto = ACOS menor (lance mais econômico, menos exposição); mais baixo = mais exposição e mais gasto.",
    ];
  },
  pausar_campanha: (c) => ["Abra Mercado Livre → Publicidade → Product Ads.", `Selecione a campanha “${c.nome}”.`, "Clique em Pausar.", "Você pode reativar quando quiser — o histórico é mantido."],
  reativar_campanha: (c) => ["Abra Mercado Livre → Publicidade → Product Ads.", `Selecione a campanha “${c.nome}”.`, "Clique em Reativar.", "A campanha volta a aparecer nas buscas."],
};
function AdsAcaoModal({ acao, podeEscrever, onClose, onDone }) {
  const { campanha, tipo } = acao;
  const temPara = tipo === "ajustar_orcamento" || tipo === "ajustar_acos";
  const unidade = tipo === "ajustar_acos" ? "%" : "R$";
  const [para, setPara] = useState(acao.para != null ? acao.para : "");
  const [busy, setBusy] = useState(false);
  const [erro, setErro] = useState(null);
  const liberado = podeEscrever && podeEscrever.ok;
  const sensivel = tipo === "pausar_campanha";

  async function aplicar() {
    setBusy(true); setErro(null);
    const r = await window.VendusCopilot.aplicarAds({ tipo, alvo: campanha.id, de: acao.de, para: temPara && para !== "" ? Number(para) : undefined, confirmar: sensivel });
    setBusy(false);
    if (r.gated) { window.vendusToast && window.vendusToast("Aplicar pelo Vendus ainda não liberado — siga o passo a passo.", { icon: "info" }); return; }
    if (!r.ok) { setErro(r.error); return; }
    window.vendusToast && window.vendusToast("Aplicado no Mercado Livre ✓ — dá pra desfazer no histórico do Piloto.", { icon: "check-check", tone: "success" });
    onDone();
  }

  const passos = (PASSOS[tipo] || (() => []))(campanha, temPara ? (para || acao.para) : null);

  return (
    <div className="report-backdrop" onClick={onClose}>
      <div className="modal-sheet" style={{ maxWidth: 460 }} onClick={(e) => e.stopPropagation()}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }}>
          <h3 style={{ fontSize: 16, fontWeight: 800 }}>{TIPO_LABEL[tipo]}</h3>
          <Btn variant="ghost" size="sm" onClick={onClose}>✕</Btn>
        </div>
        <div style={{ fontSize: 13, fontWeight: 600 }}>{campanha.nome}</div>

        {temPara && (
          <div style={{ marginTop: 12 }}>
            <label className="text-faint" style={{ fontSize: 11.5 }}>Novo valor ({unidade}){acao.de != null ? ` — atual: ${unidade === "R$" ? "R$ " : ""}${acao.de}${unidade === "%" ? "%" : ""}` : ""}</label>
            <input className="input" type="number" value={para} onChange={(e) => setPara(e.target.value)} style={{ width: "100%", marginTop: 4 }} />
            <div className="text-faint" style={{ fontSize: 11, marginTop: 4 }}>Sugestão do Vendus já preenchida — ajuste se quiser.</div>
            {tipo === "ajustar_acos" && para !== "" && Number(para) > 0 && (
              <div className="text-muted" style={{ fontSize: 11.5, marginTop: 6, lineHeight: 1.4 }}>No Mercado Livre este ajuste é o campo <b>ROAS Objetivo</b> (lá não existe ACOS). ACOS {para}% = ROAS <b>{(100 / Number(para)).toFixed(2).replace(".", ",")}×</b>.</div>
            )}
          </div>
        )}

        {liberado ? (
          <>
            {erro && <div className="text-danger" style={{ fontSize: 12.5, marginTop: 10 }}>{erro}</div>}
            <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 16 }}>
              <Btn variant="ghost" size="sm" onClick={onClose} disabled={busy}>Cancelar</Btn>
              <Btn variant="primary" size="sm" onClick={aplicar} disabled={busy}>{busy ? "Aplicando…" : "⚡ Aplicar agora"}</Btn>
            </div>
          </>
        ) : (
          <>
            <div style={{ marginTop: 14, background: "var(--bg-elev)", borderRadius: 10, padding: 12 }}>
              <div style={{ fontSize: 11.5, fontWeight: 700, marginBottom: 6, color: "var(--orange-500, #FB923C)" }}>Como fazer no Mercado Livre (passo a passo)</div>
              <ol style={{ margin: 0, paddingLeft: 18, display: "flex", flexDirection: "column", gap: 6 }}>
                {passos.map((p, i) => <li key={i} style={{ fontSize: 12.5, lineHeight: 1.45 }}>{p}</li>)}
              </ol>
            </div>
            <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 16 }}>
              <Btn variant="primary" size="sm" onClick={onClose}>Entendi</Btn>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

window.VendusAds = { AdsPage };