/* global React */
/* =====================================================
   VendusPricing — UI compartilhada de precificação (Fase B)
   -----------------------------------------------------
   Usada pela página Calculadora E pelo modal de cadastro de produto-mestre.
   Toda a MATEMÁTICA vem de window.VendusPrecificacao (fonte única) — aqui é só UI.
   Mostra: preço por margem / margem por preço, taxa efetiva + quebra, escada de
   preços com alertas, comparar marketplaces e "minha taxa" (editar faixas).
===================================================== */
const { useState, useEffect, useMemo, useRef } = React;
const PA = window.VendusAtoms;
const MKS = [
  { id: "principal", nome: "Minha taxa (padrão)" },
  { id: "mercado_livre", nome: "Mercado Livre" },
  { id: "shopee", nome: "Shopee" },
  { id: "tiktok", nome: "TikTok Shop" },
];
const MODO_TIP = {
  margem: "Você diz quanto quer ganhar, e eu acho o preço.",
  preco: "Você diz o preço, e eu mostro quanto sobra.",
  comparar: "Mesmo preço em cada loja → quanto sobra em cada uma.",
  espelho: "Digita o preço de uma loja → o preço equivalente nas outras com o mesmo lucro.",
  minhaTaxa: "Use suas próprias taxas em vez das padrão.",
};

function PField({ label, value, onChange, prefix, suffix, step = "0.01", width, tip }) {
  return (
    <label style={{ display: "block", width }}>
      <div title={tip} style={{ fontSize: 11.5, color: "var(--fg-2)", fontWeight: 600, marginBottom: 5, cursor: tip ? "help" : "default", textDecoration: tip ? "underline dotted var(--fg-3)" : "none", textUnderlineOffset: 3 }}>{label}</div>
      <div style={{ position: "relative" }}>
        {prefix && <span style={{ position: "absolute", left: 10, top: "50%", transform: "translateY(-50%)", color: "var(--fg-3)", fontSize: 12.5 }}>{prefix}</span>}
        <input type="number" step={step} className="input mono-numeric" value={value}
          onChange={(e) => onChange(e.target.value === "" ? "" : +e.target.value)}
          style={{ width: "100%", paddingLeft: prefix ? 32 : 10, paddingRight: suffix ? 30 : 10, height: 34, fontSize: 13 }} />
        {suffix && <span style={{ position: "absolute", right: 10, top: "50%", transform: "translateY(-50%)", color: "var(--fg-3)", fontSize: 12.5 }}>{suffix}</span>}
      </div>
    </label>
  );
}

const corMargem = (m) => m == null ? "var(--fg-3)" : m <= 0 ? "#FF6A6A" : m < 10 ? "#FB923C" : m < 20 ? "#FACC15" : "#4ADE80";
const fmtPct = (n) => n == null ? "—" : `${(Math.round(n * 10) / 10).toLocaleString("pt-BR")}%`;
const brlFixo = (n) => "R$ " + (Math.round(Number(n) * 100) / 100).toLocaleString("pt-BR", { minimumFractionDigits: 2, maximumFractionDigits: 2 });

// Cabeçalho do canal (§2.1): resumo da taxa do marketplace, derivado da config (nada inventado).
// Ex.: "Taxas Mercado Livre: 14% de comissão + R$ 6,00 por item abaixo de R$ 79".
function resumoTaxaCanal(cfg, nome) {
  const f = (cfg && cfg.faixas) || [];
  if (!f.length) {
    const c = cfg && cfg.comissao_pct;
    return c != null && c !== "" ? `Taxas ${nome}: ${fmtPct(+c)} de comissão` : `Taxas ${nome}: configure em "Minha taxa"`;
  }
  const comis = [...new Set(f.map((x) => Number(x.comissao_pct)).filter((x) => !Number.isNaN(x)))];
  const comisStr = comis.length === 1 ? fmtPct(comis[0]) : `${fmtPct(Math.min(...comis))}–${fmtPct(Math.max(...comis))}`;
  const comFixa = f.find((x) => Number(x.taxa_fixa) > 0);
  let fixaStr = "";
  if (comFixa) {
    fixaStr = ` + ${brlFixo(comFixa.taxa_fixa)} por item`;
    if (comFixa.preco_max != null && comFixa.preco_max !== "") fixaStr += ` abaixo de ${brlFixo(comFixa.preco_max)}`;
  }
  return `Taxas ${nome}: ${comisStr} de comissão${fixaStr}`;
}

// Cor de cada fatia do donut/legenda (por tipo de componente vindo da lib).
const COR_TIPO = {
  custo: "#60A5FA", embalagem: "#A78BFA", comissao: "#FB923C", taxa_fixa: "#FBBF24",
  imposto: "#F472B6", ads: "#34D399", frete: "#22D3EE", cupom: "#F87171", lucro: "#4ADE80",
};

// Detalhamento linha a linha (R$) de UM resultado de margemPorPreco: custos+taxas → total → lucro líquido.
// `m` é a saída de Pre.margemPorPreco (tem componentes/total_custos/lucro_reais/margem_liquida_pct).
function DetalhamentoTaxas({ m }) {
  const { brl } = PA;
  const semCusto = m.margem_liquida_pct == null;
  const linhas = (m.componentes || []).filter((c) => c.tipo !== "lucro");
  if (!linhas.length) return null;
  return (
    <div>
      {linhas.map((c, i) => (
        <div key={i} style={{ display: "flex", justifyContent: "space-between", fontSize: 12, padding: "2px 0" }}>
          <span className="text-muted">{c.rotulo}{c.pct != null ? ` (${fmtPct(c.pct)})` : ""}</span>
          <span className="mono-numeric">{brl(c.valor_rs)}</span>
        </div>
      ))}
      <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, padding: "5px 0 2px", borderTop: "1px solid var(--border)", marginTop: 4, fontWeight: 700 }}>
        <span>Total de custos + taxas</span><span className="mono-numeric">{semCusto ? "—" : brl(m.total_custos)}</span>
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12.5, padding: "2px 0", fontWeight: 800 }}>
        <span>Lucro líquido</span>
        <span className="mono-numeric" style={{ color: corMargem(m.margem_liquida_pct) }}>{m.lucro_reais != null ? `${brl(m.lucro_reais)} · ${fmtPct(m.margem_liquida_pct)}` : "—"}</span>
      </div>
      {semCusto && <div className="text-faint" style={{ fontSize: 10.5, marginTop: 4 }}>Cadastre o custo pra fechar a conta.</div>}
    </div>
  );
}

// Donut "pra onde vai o dinheiro": uma fatia por componente (taxas, custo) + a fatia do lucro líquido.
function DistribuicaoDonut({ m, size = 128 }) {
  const { brl, Donut } = PA;
  const slices = (m.componentes || [])
    .filter((c) => c.valor_rs > 0)        // só fatias positivas (lucro negativo não vira fatia)
    .map((c) => ({ value: c.valor_rs, color: COR_TIPO[c.tipo] || "#888", rotulo: c.rotulo }));
  if (slices.length < 2) return null;      // 1 fatia só não comunica distribuição
  return (
    <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
      <Donut slices={slices} size={size} stroke={18} />
      <div style={{ display: "flex", flexDirection: "column", gap: 3, minWidth: 150, flex: 1 }}>
        {slices.map((s, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 11 }}>
            <span style={{ width: 9, height: 9, borderRadius: 2, background: s.color, flexShrink: 0 }} />
            <span className="text-muted">{s.rotulo}</span>
            <span className="mono-numeric" style={{ marginLeft: "auto" }}>{brl(s.value)}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// "Ver a conta" expansível: detalhamento + donut de UM marketplace (usado no Comparar e no Espelhar).
function ContaExpandivel({ m, label = "Ver a conta" }) {
  const [open, setOpen] = useState(false);
  if (!m || !m.componentes || !m.componentes.length) return null;
  return (
    <div style={{ marginTop: 6 }}>
      <button onClick={() => setOpen((o) => !o)} style={{ background: "none", border: "none", color: "var(--primary)", cursor: "pointer", fontSize: 11, padding: 0, fontWeight: 600 }}>
        {open ? "Ocultar conta ▲" : `${label} ▼`}
      </button>
      {open && (
        <div style={{ marginTop: 6, borderTop: "1px solid var(--border)", paddingTop: 8, textAlign: "left" }}>
          <DetalhamentoTaxas m={m} />
          <div style={{ marginTop: 10 }}><DistribuicaoDonut m={m} size={110} /></div>
        </div>
      )}
    </div>
  );
}

// Editor das faixas de taxa do marketplace selecionado ("minha taxa").
function TaxasEditor({ cfg, onSalvar, salvando }) {
  const [comissao, setComissao] = useState(cfg.comissao_pct ?? "");
  const [imposto, setImposto] = useState(cfg.imposto_pct ?? "");
  const [ads, setAds] = useState(cfg.ads_pct ?? "");
  const [frete, setFrete] = useState(cfg.frete ?? "");
  const [embalagem, setEmbalagem] = useState(cfg.embalagem ?? "");
  const [faixas, setFaixas] = useState((cfg.faixas || []).map((f) => ({ ...f })));
  useEffect(() => {
    setComissao(cfg.comissao_pct ?? ""); setImposto(cfg.imposto_pct ?? ""); setAds(cfg.ads_pct ?? "");
    setFrete(cfg.frete ?? ""); setEmbalagem(cfg.embalagem ?? ""); setFaixas((cfg.faixas || []).map((f) => ({ ...f })));
  }, [cfg.marketplace]);
  const set = (i, k, v) => setFaixas((fs) => fs.map((f, j) => j === i ? { ...f, [k]: v === "" ? "" : +v } : f));
  return (
    <div style={{ border: "1px solid var(--border)", borderRadius: 10, padding: 12, marginTop: 10 }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 10, marginBottom: 10 }}>
        <PField label="Comissão padrão" value={comissao} onChange={setComissao} suffix="%" />
        <PField label="Imposto" value={imposto} onChange={setImposto} suffix="%" />
        <PField label="Anúncios" value={ads} onChange={setAds} suffix="%" />
        <PField label="Frete" value={frete} onChange={setFrete} prefix="R$" />
        <PField label="Embalagem" value={embalagem} onChange={setEmbalagem} prefix="R$" />
      </div>
      <div style={{ fontSize: 11.5, fontWeight: 700, color: "var(--fg-2)", margin: "6px 0" }}>Faixas de preço (comissão e taxa fixa mudam por faixa)</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
        {faixas.map((f, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr 24px", gap: 6, alignItems: "center" }}>
            <PField label={i === 0 ? "De (R$)" : ""} value={f.preco_min ?? ""} onChange={(v) => set(i, "preco_min", v)} prefix="R$" />
            <PField label={i === 0 ? "Até (R$, vazio=∞)" : ""} value={f.preco_max ?? ""} onChange={(v) => set(i, "preco_max", v)} prefix="R$" />
            <PField label={i === 0 ? "Comissão" : ""} value={f.comissao_pct ?? ""} onChange={(v) => set(i, "comissao_pct", v)} suffix="%" />
            <PField label={i === 0 ? "Taxa fixa" : ""} value={f.taxa_fixa ?? ""} onChange={(v) => set(i, "taxa_fixa", v)} prefix="R$" />
            <button title="Remover faixa" onClick={() => setFaixas((fs) => fs.filter((_, j) => j !== i))} style={{ background: "transparent", border: "none", color: "var(--fg-3)", cursor: "pointer", fontSize: 16, marginTop: i === 0 ? 18 : 0 }}>✕</button>
          </div>
        ))}
      </div>
      <div style={{ display: "flex", gap: 8, marginTop: 10 }}>
        <PA.Btn size="sm" variant="ghost" onClick={() => setFaixas((fs) => [...fs, { preco_min: 0, preco_max: null, comissao_pct: comissao || 0, taxa_fixa: 0 }])}>+ Faixa</PA.Btn>
        <PA.Btn size="sm" variant="primary" disabled={salvando} onClick={() => onSalvar({ marketplace: cfg.marketplace, comissao_pct: comissao, imposto_pct: imposto, ads_pct: ads, frete, embalagem, usa_faixas: faixas.length > 0, faixas })}>
          {salvando ? "Salvando…" : "Salvar minha taxa"}
        </PA.Btn>
      </div>
    </div>
  );
}

// Painel principal. onChange(result) reporta { preco_cheio, custo, niveis, margem } pro modal salvar.
function PricingPanel({ custoInicial = "", precoInicial = "", niveisInicial = null, onChange, compact = false }) {
  const { brl, Btn, Chip, Card, I } = PA;
  const Pre = window.VendusPrecificacao;
  const [configs, setConfigs] = useState(null);
  const [aviso, setAviso] = useState(null);
  const [mk, setMk] = useState("mercado_livre");
  const [modo, setModo] = useState("margem"); // margem | preco | comparar | minhaTaxa
  const [salvando, setSalvando] = useState(false);

  const [custo, setCusto] = useState(custoInicial);
  const [frete, setFrete] = useState("");
  const [embalagem, setEmbalagem] = useState("");
  const [imposto, setImposto] = useState("");
  const [ads, setAds] = useState("");
  const [margem, setMargem] = useState(30);
  const [preco, setPreco] = useState(precoInicial);
  const [descPct, setDescPct] = useState(niveisInicial?.desc_pct ?? 10);
  const [relPct, setRelPct] = useState(niveisInicial?.relampago_pct ?? 15);
  const [spikePct, setSpikePct] = useState(niveisInicial?.spike_pct ?? 20);
  // Fase 2 — competitividade / projeção / estratégia de promoção
  const [maisOpcoes, setMaisOpcoes] = useState(false);
  const [precoMercado, setPrecoMercado] = useState("");
  const [vendasMes, setVendasMes] = useState("");
  const [descAparente, setDescAparente] = useState(20); // desconto "off" que o cliente vê na promoção
  const [cupom, setCupom] = useState("");               // cupom de desconto % (custo que sai do preço)
  const [campanhaOn, setCampanhaOn] = useState(false);   // "Campanha de destaque" liga uma taxa extra
  const [campanhaPct, setCampanhaPct] = useState("");    // % da campanha (o lojista informa — confira a sua)

  function carregar() {
    window.VendusCopilot.getConfigTaxas().then((d) => { setConfigs(d.configs || []); setAviso(d.aviso || null); });
  }
  useEffect(() => { carregar(); }, []);

  const cfg = useMemo(() => (configs || []).find((c) => c.marketplace === mk) || { marketplace: mk, faixas: [] }, [configs, mk]);
  // ao trocar de marketplace, puxa imposto/ads/frete/embalagem daquele config (editável depois)
  const lastMk = useRef(null);
  useEffect(() => {
    if (!configs) return;
    if (lastMk.current !== mk) {
      lastMk.current = mk;
      setImposto(cfg.imposto_pct ?? ""); setAds(cfg.ads_pct ?? "");
      setFrete(cfg.frete ?? ""); setEmbalagem(cfg.embalagem ?? "");
    }
  }, [mk, configs]);

  const custos = { custo: custo === "" ? null : custo, frete, embalagem, imposto_pct: imposto, ads_pct: ads, cupom_pct: cupom, campanha_pct: campanhaOn ? campanhaPct : 0, faixas: cfg.faixas, comissaoPadrao: cfg.comissao_pct };
  const cupomDep = campanhaOn ? campanhaPct : 0; // muda quando a campanha liga/desliga ou o % muda
  const porMargem = useMemo(() => Pre.precoPorMargem({ ...custos, margem_pct: margem }), [custo, frete, embalagem, imposto, ads, cupom, cupomDep, margem, cfg]);
  const precoBase = modo === "preco" ? (+preco || 0) : porMargem.preco;
  const noPreco = useMemo(() => Pre.margemPorPreco({ ...custos, preco: precoBase }), [precoBase, custo, frete, embalagem, imposto, ads, cupom, cupomDep, cfg]);
  const escada = useMemo(() => Pre.escadaPrecos({ ...custos, preco_cheio: precoBase, desc_pct: descPct, relampago_pct: relPct, spike_pct: spikePct }), [precoBase, descPct, relPct, spikePct, custo, frete, embalagem, imposto, ads, cupom, cupomDep, cfg]);

  // reporta pro modal (preço cheio + níveis) sempre que muda
  useEffect(() => {
    if (onChange) onChange({ preco_cheio: precoBase, custo: custo === "" ? null : +custo, margem: noPreco.margem_liquida_pct, niveis: { desc_pct: descPct, relampago_pct: relPct, spike_pct: spikePct } });
  }, [precoBase, custo, descPct, relPct, spikePct, noPreco.margem_liquida_pct]);

  async function salvarTaxa(payload) {
    setSalvando(true);
    const r = await window.VendusCopilot.saveConfigTaxas(payload);
    setSalvando(false);
    if (r.ok) { window.vendusToast && window.vendusToast("Sua taxa salva ✓", { icon: "check-check", tone: "success" }); carregar(); }
    else window.vendusToast && window.vendusToast(r.error || "Falha ao salvar.", { icon: "alert-triangle", tone: "danger" });
  }

  if (!configs) return <Card padding={20}><div className="text-muted">Carregando taxas…</div></Card>;

  const Wrap = compact ? "div" : Card;
  const wrapProps = compact ? {} : { padding: 16 };

  const nomeMk = (MKS.find((m) => m.id === mk) || {}).nome;
  const ehResultadoUnico = modo === "margem" || modo === "preco";

  return (
    <div>
      {/* Cabeçalho do canal — taxa de referência do marketplace (§2.1) */}
      {!compact && ehResultadoUnico && (
        <div className="calc-channel">
          <span className="calc-channel__tag"><I name="receipt" size={13} /> {resumoTaxaCanal(cfg, nomeMk)}</span>
        </div>
      )}

      {/* Marketplace + modo (§2.2) */}
      <div style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center", marginBottom: 12 }}>
        <span style={{ fontSize: 12, color: "var(--fg-2)", fontWeight: 600 }}>Calcular para:</span>
        <select className="input" value={mk} onChange={(e) => setMk(e.target.value)} style={{ width: 180 }}>
          {MKS.map((m) => <option key={m.id} value={m.id}>{m.nome}</option>)}
        </select>
        <span title="Cada marketplace cobra diferente. Escolha um pra ver a conta certa daquela loja." style={{ color: "var(--fg-3)", cursor: "help", display: "inline-flex" }}><I name="help-circle" size={15} /></span>
        <div className="seg calc-modes" style={{ flex: 1, minWidth: 240 }}>
          <button title={MODO_TIP.margem} onClick={() => setModo("margem")} className={modo === "margem" ? "active" : ""}>Pela margem</button>
          <button title={MODO_TIP.preco} onClick={() => setModo("preco")} className={modo === "preco" ? "active" : ""}>Pelo preço</button>
          <button title={MODO_TIP.comparar} onClick={() => setModo("comparar")} className={modo === "comparar" ? "active" : ""}>Comparar</button>
          <button title={MODO_TIP.espelho} onClick={() => setModo("espelho")} className={modo === "espelho" ? "active" : ""}>Espelhar preço</button>
          <button title={MODO_TIP.minhaTaxa} onClick={() => setModo("minhaTaxa")} className={modo === "minhaTaxa" ? "active" : ""}>Minha taxa</button>
        </div>
      </div>

      {aviso && <div className="text-faint" style={{ fontSize: 11.5, marginBottom: 10, display: "flex", gap: 6, alignItems: "center" }}><I name="info" size={13} /> {aviso}</div>}

      {modo === "minhaTaxa" ? (
        <TaxasEditor cfg={cfg} onSalvar={salvarTaxa} salvando={salvando} />
      ) : modo === "comparar" ? (
        <CompararMarketplaces configs={configs} custos={{ custo: custo === "" ? null : custo, frete, embalagem, imposto, ads }} margem={margem} custo={custo} setCusto={setCusto} margemState={[margem, setMargem]} />
      ) : modo === "espelho" ? (
        <EspelharPreco configs={configs} custo={custo} setCusto={setCusto} />
      ) : (
        <div className="calc-main" style={compact ? { gridTemplateColumns: "1fr" } : undefined}>
          {/* Formulário em seções (§2.3) */}
          <div>
            {/* Obrigatórios */}
            <div className="calc-section">
              <div className="calc-seclabel">O essencial</div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
                <PField label="Custo do produto" tip="Quanto você paga ao fornecedor por unidade." value={custo} onChange={setCusto} prefix="R$" />
                <PField label="Embalagem" tip="Caixa, plástico, etiqueta… o que embala cada venda." value={embalagem} onChange={setEmbalagem} prefix="R$" />
                {modo === "margem"
                  ? <PField label="Margem desejada" tip="Quanto você quer que sobre, em % do preço." value={margem} onChange={setMargem} suffix="%" />
                  : <PField label="Preço de venda" tip="O preço que você pratica — eu mostro quanto sobra." value={preco} onChange={setPreco} prefix="R$" />}
                {/* No modal (compact) não há bloco avançado — mantém frete/imposto/ads acessíveis aqui */}
                {compact && <PField label="Frete por venda" tip="Quanto você paga de frete por pedido (se você paga)." value={frete} onChange={setFrete} prefix="R$" />}
                {compact && <PField label="Imposto" tip="Sua alíquota (Simples etc.). 0 se não quiser considerar." value={imposto} onChange={setImposto} suffix="%" />}
                {compact && <PField label="Anúncios (ADS)" tip="Quanto gasta de anúncio, em média, por venda." value={ads} onChange={setAds} suffix="%" />}
              </div>
            </div>

            {/* Avançadas (recolhível, fechado por padrão) */}
            {!compact && (
              <div className="calc-section">
                <button onClick={() => setMaisOpcoes((o) => !o)} style={{ background: "none", border: "none", color: "var(--fg-1)", cursor: "pointer", fontSize: 12, padding: 0, fontWeight: 700, display: "flex", alignItems: "center", gap: 6, width: "100%" }}>
                  <span style={{ color: "var(--fg-3)" }}>{maisOpcoes ? "▾" : "▸"}</span> Configurações avançadas
                  <span className="text-faint" style={{ fontWeight: 400, marginLeft: "auto", fontSize: 11 }}>Mexa aqui se quiser detalhar imposto, anúncios, cupom e mais.</span>
                </button>
                {maisOpcoes && (
                  <div style={{ marginTop: 10 }}>
                    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
                      <PField label="Frete por venda" tip="Quanto você paga de frete por pedido (se você paga)." value={frete} onChange={setFrete} prefix="R$" />
                      <PField label="Imposto" tip="Sua alíquota (Simples etc.). 0 se não quiser considerar." value={imposto} onChange={setImposto} suffix="%" />
                      <PField label="Anúncios (ADS)" tip="Quanto gasta de anúncio, em média, por venda." value={ads} onChange={setAds} suffix="%" />
                      <PField label="Cupom de desconto" tip="Se você dá cupom, ele sai do seu bolso — entra na conta aqui." value={cupom} onChange={setCupom} suffix="%" />
                      <PField label="Preço de mercado" tip="O preço que os concorrentes praticam, pra comparar." value={precoMercado} onChange={setPrecoMercado} prefix="R$" />
                      <PField label="Vendas estimadas/mês" tip="Quantas unidades você espera vender por mês." value={vendasMes} onChange={setVendasMes} step="1" />
                    </div>
                    <label title="Participar de campanha do marketplace costuma cobrar uma taxa extra. Marque e informe a % — confira a sua, ela varia." style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 10, fontSize: 12, cursor: "pointer" }}>
                      <input type="checkbox" checked={campanhaOn} onChange={(e) => setCampanhaOn(e.target.checked)} />
                      <span>Campanha de destaque <span className="text-faint">(soma uma taxa extra)</span></span>
                    </label>
                    {campanhaOn && (
                      <div style={{ marginTop: 8 }}>
                        <PField label="Taxa da campanha" tip="Participar de campanha do marketplace costuma cobrar uma taxa extra. Confira a sua — ela varia por programa." value={campanhaPct} onChange={setCampanhaPct} suffix="%" width={140} />
                        {(campanhaPct === "" || +campanhaPct === 0) && <div className="text-faint" style={{ fontSize: 10.5, marginTop: 4 }}>Informe a % da campanha pra ela entrar na conta.</div>}
                      </div>
                    )}
                  </div>
                )}
              </div>
            )}

            <div className="text-faint" style={{ fontSize: 11, marginTop: 8, lineHeight: 1.5 }}>
              A comissão entra pela faixa de preço do marketplace. {cfg.faixas && cfg.faixas.length ? `${cfg.faixas.length} faixa(s) configurada(s).` : "Sem faixas — usa a comissão padrão."}
            </div>
          </div>

          {/* Resultado em DESTAQUE (§2.4) */}
          <div>
            {modo === "margem" && porMargem.impossivel ? (
              <div className="calc-hero" style={{ color: "#FCA5A5", lineHeight: 1.5 }}>
                <b>Não dá pra calcular o preço.</b> {porMargem.aviso}
              </div>
            ) : (
              <div className="calc-hero">
                <div className="text-faint" style={{ fontSize: 11 }}>{modo === "margem" ? "Preço de venda sugerido" : "Sobra pra você nesse preço"}</div>
                {modo === "margem" ? (
                  <div className="font-display" style={{ fontSize: 38, fontWeight: 800, lineHeight: 1.05, background: "var(--logo-gradient)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>{brl(precoBase)}</div>
                ) : (
                  <div className="font-display" style={{ fontSize: 38, fontWeight: 800, lineHeight: 1.05, color: corMargem(noPreco.margem_liquida_pct) }}>{fmtPct(noPreco.margem_liquida_pct)}</div>
                )}
                <div style={{ marginTop: 6, fontSize: 13 }}>
                  <span className="text-muted" title="O que sobra depois de TODAS as taxas — comissão, taxa fixa, imposto, frete, embalagem e anúncio. É o lucro de verdade, não o de fachada." style={{ cursor: "help" }}>Sobra pra você: <b style={{ color: corMargem(noPreco.margem_liquida_pct) }}>{fmtPct(noPreco.margem_liquida_pct)}{noPreco.lucro_reais != null ? ` · ${brl(noPreco.lucro_reais)} de lucro` : ""}</b></span>
                </div>
                <div style={{ marginTop: 2, fontSize: 12 }}>
                  <span className="text-muted" title="Somando comissão, taxa fixa e o resto, é a fatia que sai de cada venda. Em produto barato ela sobe, porque a taxa fixa pesa mais." style={{ cursor: "help" }}>Quanto a venda custa em taxas: <b>{fmtPct(noPreco.taxa_efetiva)}</b></span>
                </div>
                {porMargem.aviso && modo === "margem" && <div className="text-faint" style={{ fontSize: 11, marginTop: 8 }}>⚠ {porMargem.aviso}</div>}
                {noPreco.margem_liquida_pct == null && <div className="text-faint" style={{ fontSize: 11, marginTop: 8 }}>Cadastre o custo pra fechar a conta.</div>}
                {precoBase > 0 && noPreco.taxa_fixa_rs > 0 && (noPreco.taxa_fixa_rs / precoBase) >= 0.15 && (
                  <div style={{ fontSize: 11, marginTop: 8, color: "#FB923C" }}>⚠ Nesse preço, a taxa fixa sozinha já é {Math.round((noPreco.taxa_fixa_rs / precoBase) * 100)}%. Produto barato rende proporcionalmente menos aqui — às vezes vale subir o preço ou vender em kit.</div>
                )}
                {onChange && modo === "margem" && (
                  <Btn size="sm" variant="ghost" style={{ marginTop: 10 }} onClick={() => setPreco(precoBase)}>Usar este preço</Btn>
                )}
              </div>
            )}
          </div>
        </div>
      )}

      {/* Blocos abaixo do resultado, full-width e na ordem (§2.5) */}
      {ehResultadoUnico && precoBase > 0 && !(modo === "margem" && porMargem.impossivel) && (
        <>
          {/* 1. Detalhamento linha a linha */}
          <div className="calc-block calc-section">
            <div className="calc-seclabel">A conta completa, linha a linha</div>
            <DetalhamentoTaxas m={noPreco} />
          </div>
          {/* 2. Donut */}
          {noPreco.componentes && noPreco.componentes.length >= 2 && (
            <div className="calc-block calc-section">
              <div className="calc-seclabel">Pra onde vai o seu dinheiro</div>
              <DistribuicaoDonut m={noPreco} />
            </div>
          )}
        </>
      )}

      {/* 3. Escada de preços */}
      {ehResultadoUnico && precoBase > 0 && (
        <div className="calc-block">
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8, flexWrap: "wrap" }}>
            <div>
              <div style={{ fontWeight: 700, fontSize: 12.5 }}>Seus preços (cheio, desconto, relâmpago, Spike Day)</div>
              <div className="text-faint" style={{ fontSize: 11 }}>Veja quanto sobra em cada nível antes de dar o desconto.</div>
            </div>
            <div style={{ display: "flex", gap: 8, marginLeft: "auto" }}>
              <PField label="Desconto" value={descPct} onChange={setDescPct} suffix="%" width={92} />
              <PField label="Relâmpago" value={relPct} onChange={setRelPct} suffix="%" width={92} />
              <PField label="Spike" value={spikePct} onChange={setSpikePct} suffix="%" width={92} />
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            {escada.map((n, i) => (
              <div key={i} style={{ background: "var(--bg-elev)", borderRadius: 9, padding: "8px 12px" }}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10 }}>
                  <span style={{ fontSize: 12.5, fontWeight: 600 }}>{n.nivel}</span>
                  <span style={{ display: "flex", gap: 12, alignItems: "center" }}>
                    <span className="mono-numeric font-display" style={{ fontWeight: 700 }}>{brl(n.preco)}</span>
                    <span className="mono-numeric" style={{ fontSize: 12, color: corMargem(n.margem_liquida), minWidth: 130, textAlign: "right" }}>{fmtPct(n.margem_liquida)}{n.lucro_reais != null ? ` · ${brl(n.lucro_reais)}` : ""}</span>
                  </span>
                </div>
                {n.alerta && <div style={{ fontSize: 11, marginTop: 4, color: n.alerta.tom === "danger" ? "#FF6A6A" : "#FB923C" }}>⚠ {n.alerta.texto}</div>}
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Fase 2 — competitividade · promoção 7 dias · projeção · copiar (só nos modos de resultado único) */}
      {!compact && modo !== "minhaTaxa" && modo !== "comparar" && modo !== "espelho" && precoBase > 0 && (
        <div>
          <Competitividade precoAlvo={precoBase} precoMercado={precoMercado} custos={custos} />
          <PromocaoEstrategia precoAlvo={precoBase} desc={descAparente} setDesc={setDescAparente} mk={mk} cfg={cfg} />
          <ProjecaoMensal precoAlvo={precoBase} m={noPreco} vendas={vendasMes} />
          <div style={{ marginTop: 14 }}>
            <Btn size="sm" variant="ghost" onClick={() => {
              const txt = montarResumo({ mkNome: (MKS.find((x) => x.id === mk) || {}).nome, precoAlvo: precoBase, m: noPreco, escada, precoMercado, vendas: vendasMes });
              if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(txt)
                  .then(() => window.vendusToast && window.vendusToast("Resumo copiado ✓ — cole onde quiser.", { icon: "check-check", tone: "success" }))
                  .catch(() => window.vendusToast && window.vendusToast("Não consegui copiar.", { icon: "alert-triangle", tone: "danger" }));
              } else window.vendusToast && window.vendusToast("Cópia indisponível neste navegador.", { icon: "alert-triangle", tone: "danger" });
            }}>Copiar resumo completo</Btn>
          </div>
        </div>
      )}
    </div>
  );
}

// Fase 2 — Competitividade vs preço de mercado (simulação "igualar" reusa margemPorPreco).
function Competitividade({ precoAlvo, precoMercado, custos }) {
  const { brl } = PA;
  const Pre = window.VendusPrecificacao;
  const pm = Number(String(precoMercado).replace(",", ".")) || 0;
  if (pm <= 0 || !(precoAlvo > 0)) return null;
  const diff = ((precoAlvo - pm) / pm) * 100;
  const competitivo = precoAlvo <= pm * 1.05;
  const sim = Pre.margemPorPreco({ ...custos, preco: pm });
  return (
    <div style={{ marginTop: 14, borderTop: "1px solid var(--border)", paddingTop: 12 }}>
      <div style={{ fontWeight: 700, fontSize: 12.5, marginBottom: 8 }}>Você está competitivo?</div>
      <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginBottom: 8 }}>
        <div style={{ background: "var(--bg-elev)", borderRadius: 9, padding: "8px 12px", flex: 1, minWidth: 130 }}>
          <div className="text-faint" style={{ fontSize: 10.5 }}>Seu preço</div>
          <div className="font-display mono-numeric" style={{ fontSize: 18, fontWeight: 800 }}>{brl(precoAlvo)}</div>
        </div>
        <div style={{ background: "var(--bg-elev)", borderRadius: 9, padding: "8px 12px", flex: 1, minWidth: 130 }}>
          <div className="text-faint" style={{ fontSize: 10.5 }}>Mercado</div>
          <div className="font-display mono-numeric" style={{ fontSize: 18, fontWeight: 800 }}>{brl(pm)}</div>
        </div>
      </div>
      <div style={{ fontSize: 12, color: competitivo ? "#4ADE80" : "#FB923C", fontWeight: 600 }}>
        {competitivo ? "Competitivo ✓" : "Acima do mercado"} — seu preço está {fmtPct(Math.abs(diff))} {diff < 0 ? "abaixo" : "acima"} do mercado.
      </div>
      {sim.lucro_reais != null && (
        <div className="text-muted" style={{ fontSize: 11.5, marginTop: 6 }}>
          Se igualar ao mercado ({brl(pm)}), seu lucro seria <b style={{ color: corMargem(sim.margem_liquida_pct) }}>{brl(sim.lucro_reais)}</b> ({fmtPct(sim.margem_liquida_pct)} de margem).
        </div>
      )}
    </div>
  );
}

// Fase 2 — Estratégia de promoção: preço inflado = alvo / (1 − d). Regra dos 7 dias forte na Shopee.
function PromocaoEstrategia({ precoAlvo, desc, setDesc, mk, cfg }) {
  const { brl } = PA;
  const Pre = window.VendusPrecificacao;
  if (!(precoAlvo > 0)) return null;
  const d = Number(desc) || 0;
  const invalido = d >= 100 || d < 0;
  const inflado = invalido ? null : precoAlvo / (1 - d / 100);
  const fAlvo = Pre.resolverFaixa(precoAlvo, cfg.faixas, cfg.comissao_pct);
  const fInfl = inflado ? Pre.resolverFaixa(inflado, cfg.faixas, cfg.comissao_pct) : null;
  const faixaMuda = fInfl && fAlvo && fInfl.faixaIndex !== fAlvo.faixaIndex;
  const isShopee = mk === "shopee";
  return (
    <div style={{ marginTop: 14, borderTop: "1px solid var(--border)", paddingTop: 12 }}>
      <div style={{ fontWeight: 700, fontSize: 12.5, marginBottom: 4 }}>Quer criar uma promoção?</div>
      <div className="text-muted" style={{ fontSize: 11.5, marginBottom: 8 }}>Pra aparecer "em promoção" sem perder margem, cadastre mais alto e desconte depois.</div>
      <div style={{ display: "flex", gap: 12, alignItems: "flex-end", flexWrap: "wrap", marginBottom: 8 }}>
        <PField label="Desconto aparente" tip="Quanto de 'off' o cliente vê. Calculamos o preço inflado pra esse desconto voltar ao seu preço-alvo." value={desc} onChange={setDesc} suffix="%" width={130} />
        <div style={{ background: "var(--bg-elev)", borderRadius: 9, padding: "8px 12px" }}>
          <div className="text-faint" style={{ fontSize: 10.5 }}>Cadastre por</div>
          <div className="font-display mono-numeric" style={{ fontSize: 18, fontWeight: 800 }}>{invalido ? "—" : brl(inflado)}</div>
        </div>
      </div>
      {invalido ? (
        <div className="text-danger" style={{ fontSize: 11.5 }}>O desconto precisa ser menor que 100%.</div>
      ) : (
        <>
          <ol style={{ margin: "4px 0", paddingLeft: 18, fontSize: 12, lineHeight: 1.7 }}>
            <li>Cadastre por <b>{brl(inflado)}</b>.</li>
            {isShopee && <li><b>Espere 7 dias</b> (regra da Shopee).</li>}
            <li>Aplique o desconto pra <b>{brl(precoAlvo)}</b>.</li>
            <li>Aparece <b>"em promoção"</b> com <b>{fmtPct(d)} off</b> — e sua margem fica igual.</li>
          </ol>
          {faixaMuda && <div style={{ fontSize: 11, color: "#FB923C", marginTop: 4 }}>⚠ O preço inflado ({brl(inflado)}) cai numa faixa de taxa diferente. Como o desconto devolve ao preço-alvo, sua margem final é a do alvo — só fique atento ao cadastrar.</div>}
          {isShopee
            ? <div style={{ fontSize: 11, color: "#FB923C", marginTop: 6, background: "rgba(251,146,60,.10)", borderRadius: 8, padding: "6px 10px" }}>💡 A Shopee só libera desconto <b>depois de 7 dias</b> do cadastro. Esperar esse prazo evita que sua promoção seja barrada como irregular.</div>
            : <div className="text-faint" style={{ fontSize: 11, marginTop: 6 }}>Dica geral de "de / por". A regra dos 7 dias é específica da Shopee.</div>}
        </>
      )}
    </div>
  );
}

// Fase 2 — Projeção mensal a partir das vendas estimadas (usa total_custos/lucro_reais da Fase 1).
function ProjecaoMensal({ precoAlvo, m, vendas }) {
  const { brl } = PA;
  const n = Number(vendas) || 0;
  if (n <= 0 || !(precoAlvo > 0)) return null;
  const temCusto = m.lucro_reais != null;
  const receita = precoAlvo * n;
  const custosTot = temCusto ? m.total_custos * n : null;
  const lucroMes = temCusto ? m.lucro_reais * n : null;
  const margemMedia = temCusto ? (m.lucro_reais / precoAlvo) * 100 : null;
  const cell = (rot, val, cor) => (
    <div style={{ background: "var(--bg-elev)", borderRadius: 9, padding: "8px 12px", flex: 1, minWidth: 120 }}>
      <div className="text-faint" style={{ fontSize: 10.5 }}>{rot}</div>
      <div className="font-display mono-numeric" style={{ fontSize: 16, fontWeight: 800, color: cor }}>{val}</div>
    </div>
  );
  return (
    <div style={{ marginTop: 14, borderTop: "1px solid var(--border)", paddingTop: 12 }}>
      <div style={{ fontWeight: 700, fontSize: 12.5, marginBottom: 8 }}>No mês, se vender {n} <span className="text-faint" style={{ fontWeight: 400 }}>un/mês…</span></div>
      <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
        {cell("Receita bruta", brl(receita))}
        {cell("Custos totais", custosTot != null ? brl(custosTot) : "—")}
        {cell("Lucro líquido", lucroMes != null ? brl(lucroMes) : "—", lucroMes != null ? corMargem(margemMedia) : undefined)}
        {cell("Margem média", margemMedia != null ? fmtPct(margemMedia) : "—")}
      </div>
    </div>
  );
}

// Fase 2 — texto do "Copiar resumo completo" (preço, conta, escada, mercado, projeção). Só texto.
function montarResumo({ mkNome, precoAlvo, m, escada, precoMercado, vendas }) {
  const { brl } = PA;
  const L = [];
  L.push(`📊 Precificação — ${mkNome}`);
  L.push(`Preço: ${brl(precoAlvo)}`);
  if (m.lucro_reais != null) L.push(`Lucro: ${brl(m.lucro_reais)} (${fmtPct(m.margem_liquida_pct)} de margem)`);
  L.push(`Taxa efetiva: ${fmtPct(m.taxa_efetiva)}`);
  L.push("");
  L.push("A conta:");
  (m.componentes || []).filter((c) => c.tipo !== "lucro").forEach((c) => L.push(`  • ${c.rotulo}: ${brl(c.valor_rs)}`));
  if (m.total_custos != null) L.push(`  = Total custos + taxas: ${brl(m.total_custos)}`);
  if (m.lucro_reais != null) L.push(`  → Lucro líquido: ${brl(m.lucro_reais)}`);
  if (escada && escada.length) {
    L.push("");
    L.push("Escada de preços:");
    escada.forEach((n) => L.push(`  • ${n.nivel}: ${brl(n.preco)}${n.lucro_reais != null ? ` (${fmtPct(n.margem_liquida)} · ${brl(n.lucro_reais)})` : ""}`));
  }
  const pm = Number(String(precoMercado).replace(",", ".")) || 0;
  if (pm > 0) {
    const diff = ((precoAlvo - pm) / pm) * 100;
    L.push("");
    L.push(`Mercado: ${brl(pm)} — seu preço está ${fmtPct(Math.abs(diff))} ${diff < 0 ? "abaixo" : "acima"}.`);
  }
  const nv = Number(vendas) || 0;
  if (nv > 0 && m.lucro_reais != null) {
    L.push("");
    L.push(`Projeção (${nv}/mês): receita ${brl(precoAlvo * nv)} · lucro ${brl(m.lucro_reais * nv)}`);
  }
  L.push("");
  L.push("— feito no Vendus");
  return L.join("\n");
}

// Modo comparar: roda preço-por-margem para ML/Shopee/TikTok lado a lado.
function CompararMarketplaces({ configs, custos, margemState, custo, setCusto }) {
  const { brl } = PA;
  const Pre = window.VendusPrecificacao;
  const [margem, setMargem] = margemState;
  const alvos = ["mercado_livre", "shopee", "tiktok"];
  return (
    <div>
      <div style={{ display: "flex", gap: 10, marginBottom: 12, flexWrap: "wrap" }}>
        <PField label="Custo do produto" value={custo} onChange={setCusto} prefix="R$" width={150} />
        <PField label="Margem desejada" value={margem} onChange={setMargem} suffix="%" width={130} />
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(190px,1fr))", gap: 10 }}>
        {alvos.map((mk) => {
          const c = (configs || []).find((x) => x.marketplace === mk) || { faixas: [] };
          const args = { custo: custos.custo, frete: c.frete, embalagem: c.embalagem, imposto_pct: c.imposto_pct, ads_pct: c.ads_pct, faixas: c.faixas, comissaoPadrao: c.comissao_pct };
          const r = Pre.precoPorMargem({ ...args, margem_pct: margem });
          // mesmo preço resolvido → conta completa (componentes/donut) sem recalcular a mão
          const m = r.impossivel ? null : Pre.margemPorPreco({ ...args, preco: r.preco });
          const nome = (MKS.find((m2) => m2.id === mk) || {}).nome;
          return (
            <div key={mk} style={{ background: "var(--bg-elev)", borderRadius: 10, padding: 12, textAlign: "center" }}>
              <div style={{ fontSize: 12, fontWeight: 700, marginBottom: 6 }}>{nome}</div>
              {r.impossivel ? <div className="text-danger" style={{ fontSize: 12 }}>margem inviável</div> : (
                <>
                  <div className="font-display" style={{ fontSize: 22, fontWeight: 800 }}>{brl(r.preco)}</div>
                  <div className="text-faint" style={{ fontSize: 11, marginTop: 4, lineHeight: 1.5 }}>
                    {r.lucro_reais != null ? <><b style={{ color: corMargem(r.margem_liquida) }}>{brl(r.lucro_reais)} de lucro</b> · {fmtPct(r.margem_liquida)} margem<br /></> : null}
                    taxa efetiva {fmtPct(r.taxa_efetiva)}
                  </div>
                  <ContaExpandivel m={m} />
                </>
              )}
            </div>
          );
        })}
      </div>
      <div className="text-faint" style={{ fontSize: 11, marginTop: 8 }}>Mesmo custo e margem, taxas de cada marketplace — pra ver onde esse produto rende mais. Abra <b>Ver a conta</b> pra o detalhamento completo de cada loja.</div>
    </div>
  );
}

// Modo espelho: digita o preço de UMA loja → o preço equivalente nas outras com o MESMO lucro (ou margem).
function EspelharPreco({ configs, custo, setCusto }) {
  const { brl, I } = PA;
  const Pre = window.VendusPrecificacao;
  const [origem, setOrigem] = useState("shopee");
  const [preco, setPreco] = useState("");
  const [base, setBase] = useState("lucro"); // lucro (R$) | margem (%)
  const cfgDe = (configs || []).find((c) => c.marketplace === origem) || { faixas: [] };
  const custoNum = custo === "" ? null : custo;
  const pNum = Number(String(preco).replace(",", ".")) || 0;
  const orig = pNum > 0 ? Pre.margemPorPreco({ preco: pNum, custo: custoNum, frete: cfgDe.frete, embalagem: cfgDe.embalagem, imposto_pct: cfgDe.imposto_pct, ads_pct: cfgDe.ads_pct, faixas: cfgDe.faixas, comissaoPadrao: cfgDe.comissao_pct }) : null;
  const semCusto = custoNum == null;
  const alvos = MKS.filter((m) => m.id !== origem);

  return (
    <div>
      <div style={{ display: "flex", gap: 10, marginBottom: 6, flexWrap: "wrap", alignItems: "flex-end" }}>
        <label style={{ display: "block" }}>
          <div style={{ fontSize: 11.5, color: "var(--fg-2)", fontWeight: 600, marginBottom: 5 }}>Vendendo em</div>
          <select className="input" value={origem} onChange={(e) => setOrigem(e.target.value)} style={{ width: 160 }}>
            {MKS.map((m) => <option key={m.id} value={m.id}>{m.nome}</option>)}
          </select>
        </label>
        <PField label="Por este preço" value={preco} onChange={setPreco} prefix="R$" width={120} />
        <PField label="Custo do produto" value={custo} onChange={setCusto} prefix="R$" width={130} />
        <div className="seg" style={{ height: 34 }}>
          <button className={base === "lucro" ? "active" : ""} onClick={() => setBase("lucro")} title="Mesmo lucro em R$ nas outras lojas">Mesmo lucro (R$)</button>
          <button className={base === "margem" ? "active" : ""} onClick={() => setBase("margem")} title="Mesma margem % nas outras lojas">Mesma margem (%)</button>
        </div>
      </div>

      {semCusto ? (
        <div className="text-faint" style={{ fontSize: 12, marginTop: 8 }}>Cadastre o custo do produto pra calcular o preço equivalente com o mesmo lucro.</div>
      ) : pNum <= 0 ? (
        <div className="text-faint" style={{ fontSize: 12, marginTop: 8 }}>Digite o preço que você pratica nessa loja.</div>
      ) : (
        <>
          <div style={{ background: "var(--bg-elev)", borderRadius: 10, padding: 12, margin: "4px 0 12px" }}>
            <span className="text-muted" style={{ fontSize: 12.5 }}>Em <b>{(MKS.find((m) => m.id === origem) || {}).nome}</b> a {brl(pNum)} você tem </span>
            <b style={{ color: corMargem(orig.margem_liquida_pct) }}>{orig.lucro_reais != null ? brl(orig.lucro_reais) + " de lucro" : "—"}</b>
            <span className="text-muted" style={{ fontSize: 12.5 }}> ({fmtPct(orig.margem_liquida_pct)} de margem). {base === "lucro" ? "Pra ganhar o mesmo lucro nas outras:" : "Pra ter a mesma margem nas outras:"}</span>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(150px,1fr))", gap: 10 }}>
            {alvos.map((m) => {
              const c = (configs || []).find((x) => x.marketplace === m.id) || { faixas: [] };
              const args = { custo: custoNum, frete: c.frete, embalagem: c.embalagem, imposto_pct: c.imposto_pct, ads_pct: c.ads_pct, faixas: c.faixas, comissaoPadrao: c.comissao_pct };
              const r = base === "lucro"
                ? Pre.precoParaLucro({ ...args, lucro_alvo: orig.lucro_reais })
                : Pre.precoPorMargem({ ...args, margem_pct: orig.margem_liquida_pct });
              const maisBarato = !r.impossivel && r.preco < pNum;
              // mesmo preço espelhado → conta completa (componentes/donut) sem recalcular a mão
              const mDet = r.impossivel ? null : Pre.margemPorPreco({ ...args, preco: r.preco });
              return (
                <div key={m.id} style={{ background: "var(--bg-elev)", borderRadius: 10, padding: 12 }}>
                  <div style={{ fontSize: 12, fontWeight: 700, marginBottom: 4 }}>{m.nome}</div>
                  {r.impossivel ? <div className="text-danger" style={{ fontSize: 11.5 }}>{r.aviso || "taxa inviável"}</div> : (
                    <>
                      <div className="font-display" style={{ fontSize: 22, fontWeight: 800, color: maisBarato ? "#4ADE80" : "var(--fg-1)" }}>{brl(r.preco)}</div>
                      <div className="text-faint" style={{ fontSize: 11, marginTop: 3, lineHeight: 1.5 }}>
                        {brl(r.lucro_reais)} de lucro · {fmtPct(r.margem_liquida)} margem<br/>taxa efetiva {fmtPct(r.taxa_efetiva)}
                      </div>
                      {maisBarato && <div style={{ fontSize: 10.5, marginTop: 3, color: "#4ADE80" }}>dá pra vender {brl(pNum - r.preco)} mais barato</div>}
                      {r.aviso && <div className="text-faint" style={{ fontSize: 10.5, marginTop: 3 }}>⚠ {r.aviso}</div>}
                      <ContaExpandivel m={mDet} />
                    </>
                  )}
                </div>
              );
            })}
          </div>
          <div className="text-faint" style={{ fontSize: 11, marginTop: 8 }}>O <b>Comparar</b> usa o mesmo preço e mostra margens diferentes; o <b>Espelhar</b> faz o inverso — mesmo lucro, preços diferentes (a taxa de cada loja muda o preço).</div>
        </>
      )}
    </div>
  );
}

window.VendusPricing = { PricingPanel };