/* global React, VendusAtoms, VendusData */
const { I, Chip, Btn, Card, Eyebrow, SectionTitle, AreaChart, Bars, Donut, Sparkline, EmptyState, brl, brlShort, pct } = window.VendusAtoms;
const { STORES, REVENUE_MONTH, COSTS_MONTH, TOP_PRODUCTS, GOALS } = window.VendusData;
const { useState, useMemo, useEffect } = React;

/* ============================= MODO ESTRATÉGICO ============================= */
const OBJETIVOS = [
  ["crescer_receita", "Crescer receita", "trending-up"],
  ["aumentar_margem", "Aumentar margem", "percent"],
  ["reduzir_ruptura", "Reduzir ruptura", "package"],
  ["melhorar_reputacao", "Melhorar reputação", "star"],
  ["vender_fora", "Vender fora do marketplace", "store"],
  ["organizar_financeiro", "Organizar financeiro", "wallet"],
];
const CONF_TXT = { alta: "Confiança alta", media: "Confiança média", baixa: "Confiança baixa" };
const CENARIO_META = { pessimista: { label: "Pessimista", cor: "#FF6A6A" }, realista: { label: "Realista", cor: "var(--primary)" }, otimista: { label: "Otimista", cor: "#4ADE80" } };
const MES_CURTO = ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"];

function StrategicPage({ store }) {
  const connected = !!(store && store.connected);
  const [data, setData] = useState(null);
  const [objetivo, setObjetivo] = useState("crescer_receita");
  const [cenario, setCenario] = useState("realista");
  const [plano, setPlano] = useState(null);
  const [gerando, setGerando] = useState(false);
  const [sim, setSim] = useState(null); // { ads, ticket, margem, conv }

  useEffect(() => {
    if (!connected) return;
    window.VendusCopilot.getStrategic().then((d) => {
      setData(d);
      if (d && d.base) setSim({ ads: Math.round(d.base.ads_custo_mes || 0), ticket: Math.round(d.base.ticket_medio || 0), margem: Math.round(d.base.margem_media_pct || 30), conv: 0 });
      // Ads vêm em 2º plano (a página já abriu); mescla quando chegarem
      if (d && d.conectado && !d.ads) {
        window.VendusCopilot.getStrategicAds().then((a) => {
          if (a && a.ads) {
            setData((prev) => prev ? { ...prev, ads: a.ads, base: { ...prev.base, ads_custo_mes: a.ads_custo_mes } } : prev);
            setSim((s) => (s && (!s.ads) ? { ...s, ads: Math.round(a.ads_custo_mes || 0) } : s));
          }
        });
      }
    });
  }, [connected]);

  async function gerarPlano() {
    setGerando(true);
    const r = await window.VendusCopilot.generatePlan(objetivo);
    setGerando(false);
    if (r.ok) { setPlano(r.plano); window.vendusToast && window.vendusToast("Plano de ação gerado!", { icon: "check-check", tone: "success" }); }
    else window.vendusToast && window.vendusToast(r.error || "Não consegui gerar o plano.", { icon: "alert-triangle", tone: "danger" });
  }

  if (!connected) {
    return (
      <div className="page fade-in">
        <div className="page-header"><div><Eyebrow>Planejamento · IA</Eyebrow><h1 className="page-title">Modo Estratégico</h1></div></div>
        <EmptyState icon="activity" title="Conecte sua loja para planejar" desc="Cenários, simulador e plano de 30/60/90 dias ficam disponíveis assim que houver dados reais de vendas, custos e estoque." />
      </div>
    );
  }
  if (!data || !data.base) {
    return (
      <div className="page fade-in">
        <div className="page-header"><div><Eyebrow>Planejamento · IA</Eyebrow><h1 className="page-title">Modo Estratégico</h1></div></div>
        <Card padding={24}><div className="text-muted">Montando o cenário da sua loja…</div></Card>
      </div>
    );
  }

  const b = data.base;
  const conf = data.confianca || "media";
  const confCor = conf === "alta" ? "#4ADE80" : conf === "media" ? "var(--primary)" : "#FF6A6A";

  // ---- Simulador (cálculo client-side, interativo) ----
  // Sanity-check: só aceita um número finito dentro da faixa plausível; fora disso → null
  // (a UI mostra aviso honesto em vez de um número impossível). Princípio: não inventar.
  const plausivel = (n, min, max) => (Number.isFinite(n) && n >= min && n <= max ? n : null);

  const s = sim || { ads: 0, ticket: 0, margem: 0, conv: 0 };
  const fator = 1 + (s.conv || 0) / 100;
  const pedidosMesSim = (b.pedidos_mes || 0) * fator;
  const receitaMesSim = pedidosMesSim * (s.ticket || 0);
  const receita90Sim = receitaMesSim * 3;
  // Margem líquida = margem do produto − taxas (marketplace + imposto), na MESMA base (% da receita).
  const taxaPct = b.taxa_media_pct || 0;
  const margemSlider = plausivel(s.margem, 0, 100) || 0;       // margem nunca passa de 0–100%
  const margemLiqPct = margemSlider - taxaPct;                  // pode ser negativa (taxas > margem)
  const lucroOperMes = receitaMesSim * margemLiqPct / 100;      // lucro da operação (antes de Ads)
  const lucroMesSim = lucroOperMes - (s.ads || 0);
  const lucro90Sim = lucroMesSim * 3;
  // Lucro negativo com margem boa NÃO é contradição — é Ads/taxas comendo o resultado. Explica o porquê.
  let lucroExplica = null;
  if (lucro90Sim < 0) {
    if (margemLiqPct <= 0) lucroExplica = `As taxas (${taxaPct.toFixed(0)}%) estão acima da margem (${margemSlider.toFixed(0)}%): cada venda sai no negativo.`;
    else if (lucroOperMes > 0 && (s.ads || 0) > lucroOperMes) lucroExplica = `O investimento em Ads (${brl(s.ads)}/mês) é maior que o lucro da operação (${brl(lucroOperMes)}/mês).`;
  }
  // Cobertura de estoque = estoque ÷ unidades vendidas/mês. Plausível só em 0–24 meses; acima disso
  // (venda quase zero / estoque parado) não exibe número — diz que falta venda pra estimar.
  const unidadesMesSim = (b.unidades_mes || 0) * fator;
  const coberturaMeses = unidadesMesSim > 0 ? plausivel(b.estoque_unidades / unidadesMesSim, 0, 24) : null;
  const coberturaTexto = coberturaMeses == null
    ? "Sem venda suficiente p/ estimar"
    : coberturaMeses < 1 ? "Acaba em " + Math.round(coberturaMeses * 30) + " dias" : coberturaMeses.toFixed(1) + " meses";

  // ---- Gráfico: série real + projeção do cenário ----
  const serie = data.serie_mensal || [];
  const cen = (data.cenarios || {})[cenario] || {};
  const histVals = serie.map((x) => x.receita / 1000);
  const ultimoHist = histVals.length ? histVals[histVals.length - 1] : (b.receita_liquida_90d / 3000);
  const alvoMes = (cen.receita_90d || b.receita_liquida_90d) / 3000;
  const projVals = [1, 2, 3].map((i) => ultimoHist + (alvoMes - ultimoHist) * (i / 3));
  const chartVals = histVals.concat(projVals);
  const labels = serie.map((x) => MES_CURTO[parseInt(x.mes.split("-")[1], 10) - 1]).concat(["+30d", "+60d", "+90d"]);

  return (
    <div className="page fade-in">
      <div className="page-header">
        <div>
          <Eyebrow>Planejamento · IA</Eyebrow>
          <h1 className="page-title">Modo Estratégico</h1>
          <div className="page-sub">Para onde sua loja vai e o plano dos próximos 90 dias</div>
        </div>
        <Btn variant="primary" onClick={gerarPlano} disabled={gerando}><I name={gerando ? "loader" : "sparkles"} size={14} /> {gerando ? "Gerando…" : "Gerar plano de ação"}</Btn>
      </div>

      {/* Hipótese, não promessa */}
      <div className="banner" style={{ marginBottom: 18 }}>
        <I name="info" size={16} className="text-orange" />
        <div className="text-muted" style={{ fontSize: 12.5, lineHeight: 1.5 }}>
          As projeções são <b>hipóteses</b> baseadas nos seus últimos 90 dias — não promessas. <b style={{ color: confCor }}>{CONF_TXT[conf]}</b>.
          {data.dados_faltando && data.dados_faltando.length > 0 && <> Para subir a confiança: {data.dados_faltando.join(", ")}.</>}
        </div>
      </div>

      {/* Objetivo dos 90 dias */}
      <Card style={{ marginBottom: 16 }}>
        <SectionTitle title="Qual é o foco dos próximos 90 dias?" sub="A recomendação muda conforme o objetivo" />
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 10 }}>
          {OBJETIVOS.map(([k, l, ic]) => (
            <button key={k} onClick={() => setObjetivo(k)} className="chip-btn" style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "8px 12px", borderRadius: 10, border: "1px solid " + (objetivo === k ? "var(--primary)" : "var(--border)"), background: objetivo === k ? "rgba(249,115,22,.12)" : "var(--bg-elev)", color: objetivo === k ? "var(--primary)" : "var(--fg-1)", cursor: "pointer", fontSize: 12.5, fontWeight: 600 }}>
              <I name={ic} size={13} /> {l}
            </button>
          ))}
        </div>
      </Card>

      {/* Cenários + gráfico */}
      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 16, marginBottom: 16 }}>
        <Card>
          <SectionTitle title="Projeção de receita (90 dias)" sub="Receita líquida real + cenário"
            action={<div className="seg">{["pessimista", "realista", "otimista"].map((k) => <button key={k} onClick={() => setCenario(k)} className={cenario === k ? "active" : ""}>{CENARIO_META[k].label}</button>)}</div>} />
          <AreaChart height={230} color1={CENARIO_META[cenario].cor} color2="var(--violet-500)" series={[{ label: "Receita", values: chartVals }]} />
          <div style={{ display: "flex", justifyContent: "space-between", marginTop: 8 }}>
            {labels.map((m, i) => <span key={i} style={{ fontSize: 10, color: i >= serie.length ? "var(--primary)" : "var(--fg-3)", fontFamily: "Space Grotesk", fontWeight: i >= serie.length ? 700 : 400 }}>{m}</span>)}
          </div>
        </Card>

        <Card>
          <Eyebrow>Cenário {CENARIO_META[cenario].label.toLowerCase()}</Eyebrow>
          <div className="font-display" style={{ fontSize: 32, fontWeight: 800, marginTop: 4, color: CENARIO_META[cenario].cor }}>{brl(cen.receita_90d)}</div>
          <div className="text-muted" style={{ fontSize: 12 }}>Receita projetada em 90 dias</div>
          <div style={{ marginTop: 18, display: "flex", flexDirection: "column", gap: 12 }}>
            {[
              ["Lucro estimado (90d)", cen.lucro_90d != null ? brl(cen.lucro_90d) : "—"],
              ["Receita atual (90d)", brl(b.receita_liquida_90d)],
              ["Ticket médio", brl(b.ticket_medio)],
              ["Margem média", b.margem_media_pct != null ? b.margem_media_pct + "%" : "—"],
            ].map(([l, v]) => (
              <div key={l} style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span className="text-muted" style={{ fontSize: 12.5 }}>{l}</span>
                <span className="font-display mono-numeric" style={{ fontWeight: 700, fontSize: 14 }}>{v}</span>
              </div>
            ))}
          </div>
        </Card>
      </div>

      {/* Simulador interativo */}
      <Card style={{ marginBottom: 16 }}>
        <SectionTitle title="Simulador de cenário" sub="Mexa nas alavancas e veja o resultado projetado" />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, marginTop: 12 }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <Slider label="Investimento em Ads / mês" value={s.ads} min={0} max={Math.max(2000, Math.round((b.ads_custo_mes || 0) * 3))} step={50} fmt={brl} onChange={(v) => setSim({ ...s, ads: v })} />
            <Slider label="Ticket médio" value={s.ticket} min={0} max={Math.max(300, Math.round((b.ticket_medio || 0) * 2))} step={1} fmt={brl} onChange={(v) => setSim({ ...s, ticket: v })} />
            <Slider label="Margem (%)" value={s.margem} min={0} max={80} step={1} fmt={(v) => v + "%"} onChange={(v) => setSim({ ...s, margem: v })} />
            <Slider label="Variação de pedidos (conversão/tráfego)" value={s.conv} min={-50} max={100} step={5} fmt={(v) => (v > 0 ? "+" : "") + v + "%"} onChange={(v) => setSim({ ...s, conv: v })} />
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12, justifyContent: "center" }}>
            <SimResult label="Receita projetada (90d)" valor={brl(receita90Sim)} cor="var(--fg-1)" />
            <SimResult label="Lucro estimado (90d)" valor={brl(lucro90Sim)} cor={lucro90Sim >= 0 ? "#4ADE80" : "#FF6A6A"} sub={lucroExplica} />
            <SimResult label="Cobertura de estoque" valor={coberturaTexto} cor={coberturaMeses != null && coberturaMeses < 1 ? "#FF6A6A" : "var(--fg-1)"} sub={coberturaMeses == null ? "Vende pouco no período — não dá pra estimar quanto tempo o estoque dura." : null} />
          </div>
        </div>
        <div className="text-faint" style={{ fontSize: 11, marginTop: 12 }}>Estimativa simplificada (receita = pedidos × ticket; lucro = margem − taxas − Ads). Serve para comparar alavancas, não como previsão exata.</div>
      </Card>

      {/* Dependência de produto */}
      {data.top_produtos && data.top_produtos.length > 0 && (
        <Card style={{ marginBottom: 16 }}>
          <SectionTitle title="Dependência de produto" sub="Quanto do faturamento vem de cada campeão (risco se concentrar demais)" />
          <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 10 }}>
            {data.top_produtos.map((p, i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <span style={{ flex: 1, minWidth: 0, fontSize: 12.5, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{p.titulo}</span>
                <div className="score-track" style={{ width: 120 }}><div className="score-fill" style={{ width: p.pct + "%", background: p.pct >= 40 ? "#FF6A6A" : "var(--primary)" }} /></div>
                <span className="mono-numeric" style={{ fontSize: 12, fontWeight: 700, width: 36, textAlign: "right" }}>{p.pct}%</span>
              </div>
            ))}
          </div>
        </Card>
      )}

      {/* Plano 30/60/90 (IA) */}
      {plano ? (
        <Card>
          <SectionTitle title="Plano de ação" sub={`Foco: ${(OBJETIVOS.find((o) => o[0] === objetivo) || [])[1] || objetivo}`} />
          {plano.resumo && <p className="text-muted" style={{ fontSize: 13, lineHeight: 1.6, margin: "8px 0 16px" }}>{plano.resumo}</p>}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 14 }}>
            {[["d30", "Próximos 30 dias", "#FF6A6A"], ["d60", "Até 60 dias", "var(--primary)"], ["d90", "Até 90 dias", "#4ADE80"]].map(([k, l, cor]) => (
              <div key={k}>
                <div style={{ fontWeight: 700, fontSize: 13, marginBottom: 8, color: cor }}>{l}</div>
                <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                  {((plano.plano || {})[k] || []).map((a, i) => (
                    <div key={i} style={{ display: "flex", gap: 7, alignItems: "flex-start", fontSize: 12.5, lineHeight: 1.45 }}>
                      <I name="check-circle-2" size={13} style={{ color: cor, flexShrink: 0, marginTop: 1 }} /> <span>{a}</span>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginTop: 18 }}>
            {plano.oportunidades && plano.oportunidades.length > 0 && (
              <div>
                <div style={{ fontWeight: 700, fontSize: 12.5, marginBottom: 6, display: "flex", alignItems: "center", gap: 6 }}><I name="trending-up" size={14} className="text-success" /> Oportunidades</div>
                {plano.oportunidades.map((o, i) => <div key={i} className="text-muted" style={{ fontSize: 12.5, padding: "3px 0" }}>• {o}</div>)}
              </div>
            )}
            {plano.riscos && plano.riscos.length > 0 && (
              <div>
                <div style={{ fontWeight: 700, fontSize: 12.5, marginBottom: 6, display: "flex", alignItems: "center", gap: 6 }}><I name="alert-triangle" size={14} className="text-danger" /> Riscos</div>
                {plano.riscos.map((o, i) => <div key={i} className="text-muted" style={{ fontSize: 12.5, padding: "3px 0" }}>• {o}</div>)}
              </div>
            )}
          </div>
        </Card>
      ) : (
        <Card padding={24}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
            <I name="sparkles" size={20} className="text-orange" />
            <span className="text-muted" style={{ fontSize: 13.5, flex: 1 }}>Escolha o objetivo acima e clique em <b>Gerar plano de ação</b> — a IA monta um plano de 30, 60 e 90 dias com base nos seus dados.</span>
            <Btn variant="primary" onClick={gerarPlano} disabled={gerando}><I name={gerando ? "loader" : "sparkles"} size={14} /> {gerando ? "Gerando…" : "Gerar plano"}</Btn>
          </div>
        </Card>
      )}
    </div>
  );
}

function Slider({ label, value, min, max, step, fmt, onChange }) {
  return (
    <div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 4 }}>
        <span className="text-muted" style={{ fontSize: 12.5 }}>{label}</span>
        <span className="font-display mono-numeric" style={{ fontWeight: 700, fontSize: 13 }}>{fmt ? fmt(value) : value}</span>
      </div>
      <input type="range" min={min} max={max} step={step} value={value} onChange={(e) => onChange(Number(e.target.value))} style={{ width: "100%", accentColor: "var(--primary)" }} />
    </div>
  );
}
function SimResult({ label, valor, cor, sub }) {
  return (
    <div style={{ background: "var(--bg-elev)", borderRadius: 12, padding: "12px 14px" }}>
      <div className="text-faint" style={{ fontSize: 11 }}>{label}</div>
      <div className="font-display mono-numeric" style={{ fontSize: 19, fontWeight: 800, color: cor, marginTop: 2 }}>{valor}</div>
      {sub && <div className="text-muted" style={{ fontSize: 11, lineHeight: 1.4, marginTop: 4 }}>{sub}</div>}
    </div>
  );
}

/* ============================= LOJAS ============================= */
function StoresPage({ navigate }) {
  return (
    <div className="page fade-in">
      <div className="page-header">
        <div>
          <Eyebrow>Lojas conectadas</Eyebrow>
          <h1 className="page-title">Minhas lojas</h1>
          <div className="page-sub">{STORES.length} canais ativos · Sincronização automática</div>
        </div>
        <Btn variant="primary"><I name="plus" size={14}/> Conectar nova loja</Btn>
      </div>

      <div style={{ display:"grid", gridTemplateColumns: "repeat(auto-fill, minmax(320px,1fr))", gap: 16, marginBottom: 20 }}>
        {STORES.map(s => (
          <Card key={s.id} className="card-hover" padding={20}>
            <div style={{ display:"flex", alignItems:"center", gap: 14, marginBottom: 16 }}>
              <div style={{ width: 56, height: 56, borderRadius: 14, background: s.color, display:"grid", placeItems:"center", color:"white", fontFamily:"Space Grotesk", fontWeight: 800, fontSize: 18, boxShadow: "0 6px 18px " + s.color + "55" }}>
                {s.initials}
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 700, fontSize: 15 }}>{s.channel}</div>
                <div className="text-muted" style={{ fontSize: 12.5 }}>{s.name.split(" — ")[1]}</div>
              </div>
              <Chip tone="success" dot="on">Online</Chip>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 10, padding: "14px 0", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
              <div>
                <div className="text-faint" style={{ fontSize: 10.5, fontFamily:"Space Grotesk", letterSpacing:".06em" }}>RECEITA</div>
                <div className="font-display mono-numeric" style={{ fontWeight: 700, fontSize: 15 }}>{brlShort([98_400,72_300,41_200,34_900][STORES.indexOf(s)])}</div>
              </div>
              <div>
                <div className="text-faint" style={{ fontSize: 10.5, fontFamily:"Space Grotesk", letterSpacing:".06em" }}>PEDIDOS</div>
                <div className="font-display mono-numeric" style={{ fontWeight: 700, fontSize: 15 }}>{[1142,824,412,469][STORES.indexOf(s)]}</div>
              </div>
              <div>
                <div className="text-faint" style={{ fontSize: 10.5, fontFamily:"Space Grotesk", letterSpacing:".06em" }}>MARGEM</div>
                <div className="font-display mono-numeric text-success" style={{ fontWeight: 700, fontSize: 15 }}>{[32.4, 38.6, 41.2, 44.8][STORES.indexOf(s)]}%</div>
              </div>
            </div>
            <div style={{ display:"flex", justifyContent: "space-between", marginTop: 14, gap: 8 }}>
              <Btn variant="outline" size="sm"><I name="settings" size={12}/> Configurar</Btn>
              <Btn variant="ghost" size="sm" onClick={()=>navigate("comparatives")}>Comparar lojas →</Btn>
            </div>
          </Card>
        ))}

        <Card padding={20} style={{ border: "1px dashed var(--border-strong)", display:"grid", placeItems:"center", textAlign:"center", color: "var(--fg-3)", cursor:"pointer" }}>
          <div>
            <div style={{ width: 56, height: 56, borderRadius: 14, background: "var(--bg-elev)", display:"grid", placeItems:"center", margin:"0 auto 12px" }}>
              <I name="plus" size={22}/>
            </div>
            <div style={{ fontWeight: 600, color: "var(--fg-1)", marginBottom: 4 }}>Conectar nova loja</div>
            <div style={{ fontSize: 12.5 }}>Shopee, ML, TikTok, Magalu, Amazon e mais</div>
          </div>
        </Card>
      </div>

    </div>
  );
}

/* ============================= COMPARATIVOS ============================= */
function ComparativesPage() {
  const data = STORES.map((s, i) => ({
    ...s,
    revenue: [98_400, 72_300, 41_200, 34_900][i],
    orders:  [1142, 824, 412, 469][i],
    margin:  [32.4, 38.6, 41.2, 44.8][i],
    ticket:  [86.20, 87.70, 99.99, 74.40][i],
    conv:    [3.8, 4.2, 5.1, 6.4][i],
    refund:  [2.1, 1.8, 3.4, 0.9][i],
    growth:  [12.4, 8.6, 22.1, -3.2][i],
  }));

  return (
    <div className="page fade-in">
      <div className="page-header">
        <div>
          <Eyebrow>Análise multicanal</Eyebrow>
          <h1 className="page-title">Comparativo entre lojas</h1>
          <div className="page-sub">Qual canal está realmente performando melhor</div>
        </div>
        <div style={{ display:"flex", gap: 10 }}>
          <Btn variant="outline"><I name="calendar" size={14}/> Maio/26</Btn>
          <Btn variant="primary"><I name="download" size={14}/> Exportar relatório</Btn>
        </div>
      </div>

      <Card style={{ marginBottom: 20 }}>
        <SectionTitle title="Receita por canal" sub="Maio/26"/>
        <Bars
          height={200}
          data={data.map(d => ({ label: d.channel.split(" ")[0], value: d.revenue/1000, short: brlShort(d.revenue) }))}
        />
      </Card>

      <Card padding={0} style={{ marginBottom: 20 }}>
        <table className="tbl">
          <thead>
            <tr>
              <th>Canal</th><th className="num">Receita</th><th className="num">Pedidos</th><th className="num">Ticket</th><th className="num">Margem</th><th className="num">Conversão</th><th className="num">Devoluções</th><th className="num">Crescimento</th>
            </tr>
          </thead>
          <tbody>
            {data.map(d => (
              <tr key={d.id}>
                <td>
                  <div style={{ display:"flex", alignItems:"center", gap: 10 }}>
                    <div style={{ width: 30, height: 30, borderRadius: 8, background: d.color, color:"white", display:"grid", placeItems:"center", fontFamily:"Space Grotesk", fontWeight: 700, fontSize: 11 }}>{d.initials}</div>
                    <div>
                      <div style={{ fontWeight: 600 }}>{d.channel}</div>
                      <div className="text-faint" style={{ fontSize: 11 }}>{d.name.split(" — ")[1]}</div>
                    </div>
                  </div>
                </td>
                <td className="num mono-numeric font-display" style={{ fontWeight: 700 }}>{brl(d.revenue)}</td>
                <td className="num mono-numeric">{d.orders.toLocaleString("pt-BR")}</td>
                <td className="num mono-numeric">{brl(d.ticket)}</td>
                <td className="num">
                  <Chip tone={d.margin >= 40 ? "success" : d.margin >= 35 ? "warning" : "danger"}>
                    {d.margin.toFixed(1).replace(".",",")}%
                  </Chip>
                </td>
                <td className="num mono-numeric">{d.conv.toFixed(1).replace(".",",")}%</td>
                <td className="num mono-numeric">{d.refund.toFixed(1).replace(".",",")}%</td>
                <td className="num"><span className={d.growth >= 0 ? "text-success" : "text-danger"} style={{ fontWeight: 700 }}>{pct(d.growth)}</span></td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
        <Card>
          <SectionTitle title="Melhor margem" sub="Por canal — Maio/26"/>
          {[...data].sort((a,b) => b.margin - a.margin).map((d,i) => (
            <div key={d.id} style={{ display: "flex", alignItems:"center", gap: 12, padding: "10px 0", borderBottom: i < data.length-1 ? "1px solid var(--border)" : "none" }}>
              <span className="font-display" style={{ width: 18, color: "var(--fg-3)", fontWeight: 700, fontSize: 12 }}>0{i+1}</span>
              <div style={{ width: 28, height: 28, borderRadius: 8, background: d.color, color:"white", display:"grid", placeItems:"center", fontFamily:"Space Grotesk", fontWeight: 700, fontSize: 10 }}>{d.initials}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 600, fontSize: 13 }}>{d.channel}</div>
                <div className="bar-track" style={{ marginTop: 4 }}>
                  <div className="bar-fill" style={{ width: (d.margin/50*100)+"%", background: d.color }}></div>
                </div>
              </div>
              <span className="font-display mono-numeric text-success" style={{ fontWeight: 700 }}>{d.margin.toFixed(1).replace(".",",")}%</span>
            </div>
          ))}
        </Card>

        <Card>
          <SectionTitle title="Crescimento por canal" sub="vs mês anterior"/>
          {[...data].sort((a,b) => b.growth - a.growth).map((d,i) => (
            <div key={d.id} style={{ display: "flex", alignItems:"center", gap: 12, padding: "10px 0", borderBottom: i < data.length-1 ? "1px solid var(--border)" : "none" }}>
              <span className="font-display" style={{ width: 18, color: "var(--fg-3)", fontWeight: 700, fontSize: 12 }}>0{i+1}</span>
              <div style={{ width: 28, height: 28, borderRadius: 8, background: d.color, color:"white", display:"grid", placeItems:"center", fontFamily:"Space Grotesk", fontWeight: 700, fontSize: 10 }}>{d.initials}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 600, fontSize: 13 }}>{d.channel}</div>
                <div className="text-faint" style={{ fontSize: 11.5 }}>{brl(d.revenue)} no mês</div>
              </div>
              <span className={"font-display mono-numeric " + (d.growth >= 0 ? "text-success" : "text-danger")} style={{ fontWeight: 700 }}>{pct(d.growth)}</span>
            </div>
          ))}
        </Card>
      </div>
    </div>
  );
}

/* ============================= RELATÓRIOS ============================= */
function ReportsPage() {
  const reports = [
    { t:"DRE gerencial mensal",      desc:"Receita, custos, despesas e resultado", icon:"file-text", tone:"orange", date:"Atualizado hoje" },
    { t:"Curva ABC de produtos",     desc:"Classificação por relevância e giro",   icon:"bar-chart-3", tone:"violet", date:"Atualizado há 1h" },
    { t:"Performance por canal",     desc:"Comparativo entre marketplaces",        icon:"share-2",  tone:"info",   date:"Atualizado hoje" },
    { t:"Margem por produto",        desc:"Lucratividade SKU a SKU",              icon:"percent",  tone:"success",date:"Atualizado hoje" },
    { t:"Fornecedores · 360°",       desc:"Volume, prazos e qualidade",            icon:"users",    tone:"orange", date:"Atualizado ontem" },
    { t:"Análise de devoluções",     desc:"Motivos, produtos e canais",            icon:"rotate-ccw",tone:"danger", date:"Atualizado hoje" },
    { t:"Inventário valorizado",     desc:"Estoque atual ao custo de aquisição",  icon:"layers",   tone:"violet", date:"Atualizado hoje" },
    { t:"Custos fixos × variáveis",  desc:"Estrutura de custos detalhada",         icon:"pie-chart",tone:"info",   date:"Atualizado ontem" },
  ];
  return (
    <div className="page fade-in">
      <div className="page-header">
        <div>
          <Eyebrow>Análises</Eyebrow>
          <h1 className="page-title">Relatórios</h1>
          <div className="page-sub">Visões prontas para tomar decisão rápida</div>
        </div>
        <div style={{ display:"flex", gap: 10 }}>
          <Btn variant="outline"><I name="calendar" size={14}/> Maio/26</Btn>
          <Btn variant="primary"><I name="plus" size={14}/> Relatório customizado</Btn>
        </div>
      </div>

      <div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fill, minmax(280px,1fr))", gap: 16 }}>
        {reports.map(r => (
          <Card key={r.t} className="card-hover" padding={18}>
            <div style={{
              width: 44, height: 44, borderRadius: 10,
              background: r.tone==="orange"?"rgba(249,115,22,.15)":r.tone==="violet"?"rgba(139,92,246,.15)":r.tone==="success"?"rgba(34,197,94,.15)":r.tone==="danger"?"rgba(239,68,68,.15)":"rgba(120,155,255,.15)",
              color:      r.tone==="orange"?"var(--primary)":r.tone==="violet"?"var(--violet-400)":r.tone==="success"?"#4ADE80":r.tone==="danger"?"#FCA5A5":"#93B4FF",
              display:"grid", placeItems:"center", marginBottom: 14
            }}>
              <I name={r.icon} size={20}/>
            </div>
            <div style={{ fontWeight: 700, fontSize: 14, marginBottom: 4 }}>{r.t}</div>
            <div className="text-muted" style={{ fontSize: 12.5, lineHeight: 1.5, minHeight: 38 }}>{r.desc}</div>
            <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginTop: 14, paddingTop: 14, borderTop:"1px solid var(--border)" }}>
              <span className="text-faint" style={{ fontSize: 11 }}>{r.date}</span>
              <Btn variant="ghost" size="sm">Abrir <I name="arrow-right" size={12}/></Btn>
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}

/* ============================= METAS ============================= */
const META_TIPOS = [
  { key: "receita", nome: "Receita (bruta)", icon: "banknote", money: true, tone: "orange", cor: "var(--primary)" },
  { key: "lucro", nome: "Receita líquida", icon: "wallet", money: true, tone: "success", cor: "#4ADE80" },
  { key: "pedidos", nome: "Pedidos", icon: "shopping-cart", money: false, tone: "violet", cor: "var(--violet-400)" },
];
const MES_NOME = ["janeiro", "fevereiro", "março", "abril", "maio", "junho", "julho", "agosto", "setembro", "outubro", "novembro", "dezembro"];

function GoalsPage({ store }) {
  const [metas, setMetas] = useState(null);
  const [sales, setSales] = useState(null);
  const [edit, setEdit] = useState(false);
  const [draft, setDraft] = useState({ receita: "", lucro: "", pedidos: "" });

  useEffect(() => {
    window.VendusAuth && window.VendusAuth.getMetas().then((m) => { setMetas(m); setDraft({ receita: m.receita || "", lucro: m.lucro || "", pedidos: m.pedidos || "" }); });
    window.VendusCopilot.getSales().then(setSales);
  }, []);

  const now = new Date();
  const inicioMes = new Date(now.getFullYear(), now.getMonth(), 1);
  const diasNoMes = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();
  const diaAtual = now.getDate();
  const diasRestantes = diasNoMes - diaAtual;
  const orders = ((sales && sales.orders) || []).filter((o) => o.data && new Date(o.data) >= inicioMes);
  const atual = {
    receita: orders.reduce((s, o) => s + (Number(o.receita_bruta) || 0), 0),
    lucro: orders.reduce((s, o) => s + (Number(o.receita_liquida) || 0), 0),
    pedidos: orders.length,
  };

  async function salvar() {
    const num = (v) => Number(String(v).replace(/\./g, "").replace(",", ".")) || 0;
    const m = { receita: num(draft.receita), lucro: num(draft.lucro), pedidos: num(draft.pedidos) };
    const r = await window.VendusAuth.setMetas(m);
    if (r.ok) { setMetas(m); setEdit(false); window.vendusToast && window.vendusToast("Metas salvas.", { icon: "check-check", tone: "success" }); }
    else window.vendusToast && window.vendusToast(r.error || "Erro ao salvar.", { icon: "alert-triangle", tone: "danger" });
  }

  const fmt = (t, v) => t.money ? brl(v) : Math.round(v).toLocaleString("pt-BR");
  const definidas = META_TIPOS.filter((t) => metas && Number(metas[t.key]) > 0);
  const carregando = metas === null || sales === null;

  return (
    <div className="page fade-in">
      <div className="page-header">
        <div>
          <Eyebrow>Planejamento</Eyebrow>
          <h1 className="page-title">Metas</h1>
          <div className="page-sub">Defina metas para {MES_NOME[now.getMonth()]} e acompanhe o progresso real</div>
        </div>
        <Btn variant={edit ? "ghost" : "secondary"} onClick={() => setEdit((v) => !v)}><I name={edit ? "x" : "pencil"} size={14} /> {edit ? "Cancelar" : "Editar metas"}</Btn>
      </div>

      {(edit || (!carregando && definidas.length === 0)) && (
        <Card style={{ marginBottom: 16 }}>
          <SectionTitle title="Suas metas do mês" sub="Deixe em branco (ou 0) o que não quiser acompanhar" />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 14, marginTop: 12 }}>
            {META_TIPOS.map((t) => (
              <div key={t.key}>
                <label className="text-muted" style={{ fontSize: 12.5, fontWeight: 600 }}>{t.nome}{t.money ? " (R$)" : ""}</label>
                <input className="input" inputMode="decimal" placeholder="0" value={draft[t.key]} onChange={(e) => setDraft({ ...draft, [t.key]: e.target.value })} style={{ marginTop: 6, width: "100%" }} />
              </div>
            ))}
          </div>
          <div style={{ marginTop: 14 }}><Btn variant="primary" onClick={salvar}><I name="check" size={14} /> Salvar metas</Btn></div>
        </Card>
      )}

      {carregando ? (
        <Card padding={24}><div className="text-muted">Carregando suas metas…</div></Card>
      ) : definidas.length === 0 ? (
        <EmptyState icon="target" title="Defina sua primeira meta" desc="Estabeleça uma meta de receita, lucro ou pedidos para o mês e acompanhe em tempo real se está no caminho." />
      ) : (
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(320px,1fr))", gap: 16 }}>
          {definidas.map((t) => {
            const meta = Number(metas[t.key]);
            const feito = atual[t.key];
            const ratio = meta ? feito / meta : 0;
            const ritmoDia = diaAtual ? feito / diaAtual : 0;
            const projFim = ritmoDia * diasNoMes;
            const ratioProj = meta ? projFim / meta : 0;
            const status = ratioProj >= 1 ? { l: "No caminho", tone: "success", cor: "#4ADE80" } : ratioProj >= 0.8 ? { l: "Quase lá", tone: "warning", cor: "#FACC15" } : { l: "Atrás do ritmo", tone: "danger", cor: "#FF6A6A" };
            return (
              <Card key={t.key} padding={20}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                    <div style={{ width: 40, height: 40, borderRadius: 10, background: "var(--bg-elev)", color: t.cor, display: "grid", placeItems: "center" }}><I name={t.icon} size={18} /></div>
                    <div><div style={{ fontWeight: 600, fontSize: 14 }}>{t.nome}</div><div className="text-faint" style={{ fontSize: 11.5 }}>Meta de {MES_NOME[now.getMonth()]}</div></div>
                  </div>
                  <Chip tone={status.tone}>{Math.round(ratio * 100)}%</Chip>
                </div>
                <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 12 }}>
                  <span className="font-display" style={{ fontSize: 26, fontWeight: 800 }}>{fmt(t, feito)}</span>
                  <span className="text-faint">/ {fmt(t, meta)}</span>
                </div>
                <div className="score-track"><div className="score-fill" style={{ width: Math.min(100, ratio * 100) + "%", background: status.cor }} /></div>
                <div className="text-muted" style={{ fontSize: 12, marginTop: 10, lineHeight: 1.5 }}>
                  No ritmo atual você fecha o mês em <b className="font-display mono-numeric" style={{ color: status.cor }}>{fmt(t, projFim)}</b> ({Math.round(ratioProj * 100)}% da meta) · <b>{status.l}</b>
                  <span className="text-faint"> · faltam {diasRestantes} dias</span>
                </div>
              </Card>
            );
          })}
        </div>
      )}
    </div>
  );
}

/* ============================= PREVISÕES ============================= */
function ForecastsPage() {
  return (
    <div className="page fade-in">
      <div className="page-header">
        <div>
          <Eyebrow>IA Forecasting</Eyebrow>
          <h1 className="page-title">Previsões e projeções</h1>
          <div className="page-sub">Modelos baseados em sazonalidade, tendência e canal</div>
        </div>
        <Btn variant="primary"><I name="zap" size={14}/> Recalcular modelo</Btn>
      </div>

      <Card style={{ marginBottom: 20 }}>
        <SectionTitle title="Receita projetada (próximos 6 meses)"
          action={<Chip tone="violet" leading={<I name="sparkles" size={11}/>}>Confiança 87%</Chip>}/>
        <AreaChart
          height={260}
          color1="var(--primary)"
          color2="var(--violet-500)"
          series={[
            { label:"Real", values: REVENUE_MONTH },
            { label:"Projeção", values: REVENUE_MONTH.concat([305, 328, 342, 356, 374, 398]) },
          ]}
        />
        <div style={{ display:"flex", justifyContent:"space-between", marginTop: 8 }}>
          {["Jun/25","Jul","Ago","Set","Out","Nov","Dez","Jan/26","Fev","Mar","Abr","Mai","Jun*","Jul*","Ago*","Set*","Out*","Nov*"].map((m,i) => (
            <span key={m} style={{ fontSize: 9.5, color: i>=12 ? "var(--primary)":"var(--fg-3)", fontFamily:"Space Grotesk", fontWeight: i>=12?700:400 }}>{m}</span>
          ))}
        </div>
      </Card>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16, marginBottom: 20 }}>
        {[
          { l:"Receita projetada (Nov/26)", v: brl(398_000), sub: pct(39.6) + " vs hoje", tone:"orange", icon:"trending-up" },
          { l:"Pedidos esperados (mês)",    v: "4.120",      sub: pct(44.7) + " vs mês",  tone:"info",   icon:"shopping-cart" },
          { l:"Margem esperada",            v: "37,8%",      sub: pct(3.2)  + " p.p.",    tone:"success",icon:"percent" },
        ].map(k => (
          <Card key={k.l} className={`kpi kpi-${k.tone}`} padding={18}>
            <div className="kpi-icon"><I name={k.icon} size={18}/></div>
            <div className="kpi-label">{k.l}</div>
            <div className="kpi-value">{k.v}</div>
            <div className="kpi-delta up">{k.sub}</div>
          </Card>
        ))}
      </div>

      <Card>
        <SectionTitle title="Sazonalidade detectada" sub="O modelo identificou padrões fortes em 3 momentos"/>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 14 }}>
          {[
            { t:"Black Friday — Novembro",  v:"+212%", desc:"Pico anual histórico. Recomenda-se estoque 3x.", tone:"orange" },
            { t:"Volta às aulas — Fev",     v:"+48%",  desc:"Acessórios e eletrônicos puxam o mês.",        tone:"violet" },
            { t:"Dia das Mães — Maio",      v:"+34%",  desc:"Beauty e moda lideram conversão.",             tone:"info" },
          ].map(s => (
            <div key={s.t} style={{ padding: 14, background: "var(--bg-elev)", borderRadius: 12, border:"1px solid var(--border)" }}>
              <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom: 6 }}>
                <span className="font-display" style={{ fontWeight: 700, fontSize: 13 }}>{s.t}</span>
                <Chip tone={s.tone}>{s.v}</Chip>
              </div>
              <div className="text-muted" style={{ fontSize: 12.5 }}>{s.desc}</div>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
}

/* ============================= SETTINGS ============================= */
const SETTINGS_TABS = [
  { id:"profile",       label:"Perfil",         icon:"user" },
  { id:"organization",  label:"Organização",    icon:"building" },
  { id:"team",          label:"Equipe",         icon:"users" },
  { id:"billing",       label:"Cobrança",       icon:"credit-card" },
  { id:"appearance",    label:"Aparência",      icon:"palette" },
  { id:"integrations",  label:"Integrações",    icon:"plug" },
  { id:"notifications", label:"Notificações",   icon:"bell" },
  { id:"permissions",   label:"Permissões",     icon:"shield" },
  { id:"api",           label:"API",            icon:"key" },
];

// Canais/integrações. Apenas o Mercado Livre está disponível na Fase 1;
// os demais entram nas próximas fases (marcados "Em breve").
const INTEGRATIONS = [
  { n: "Mercado Livre",  c: "#FFD93D", ready: true },
  { n: "Shopee",         c: "#FB923C" },
  { n: "TikTok Shop",    c: "#EC4899" },
  { n: "Amazon BR",      c: "#FB923C" },
  { n: "Magalu",         c: "#60A5FA" },
  { n: "Shopify",        c: "#4ADE80" },
  { n: "Nuvemshop",      c: "#A78BFA" },
  { n: "WooCommerce",    c: "#94A3B8" },
  { n: "Instagram Shop", c: "#F472B6" },
  { n: "WhatsApp",       c: "#22C55E" },
  { n: "iFood Shop",     c: "#EF4444" },
  { n: "Bling ERP",      c: "#FBBF24" },
];

function SettingsPage({ tweaks, setTweak, tab = "profile", setTab }) {
  // Standalone fallback when invoked without prop-driven tab state.
  const [localTab, setLocalTab] = useState(tab);
  const activeTab  = setTab ? tab : localTab;
  const selectTab  = setTab ? setTab : setLocalTab;
  const [mlStatus, setMlStatus] = useState(null);
  const [syncing, setSyncing] = useState(false);
  useEffect(() => { window.VendusCopilot && window.VendusCopilot.getStatus().then(setMlStatus); }, []);
  async function syncMl() {
    setSyncing(true);
    const r = await window.VendusCopilot.syncNow();
    setSyncing(false);
    if (r.ok) window.vendusToast && window.vendusToast(`Sincronizado: ${r.products || 0} produtos e ${r.orders || 0} pedidos.`, { icon: "package", tone: "success" });
    else window.vendusToast && window.vendusToast(r.error || "Não consegui sincronizar.", { icon: "alert-triangle", tone: "danger" });
  }
  const [imposto, setImposto] = useState("");
  const [savingImp, setSavingImp] = useState(false);
  useEffect(() => { window.VendusAuth && window.VendusAuth.getImpostoPct().then((p) => setImposto(p ? String(p).replace(".", ",") : "")); }, []);
  async function salvarImposto() {
    setSavingImp(true);
    const r = await window.VendusAuth.setImpostoPct(imposto);
    setSavingImp(false);
    if (r.ok) window.vendusToast && window.vendusToast("Alíquota salva. Suas vendas já consideram esse imposto.", { icon: "check-check", tone: "success" });
    else window.vendusToast && window.vendusToast(r.error || "Não consegui salvar.", { icon: "alert-triangle", tone: "danger" });
  }
  const [auto, setAuto] = useState({ enabled: false, categorias: ["estoque", "caracteristica"], cap_diario: 30 });
  useEffect(() => { window.VendusAuth && window.VendusAuth.getAutoResponder().then(setAuto); }, []);
  async function salvarAuto(next) {
    const cfg = next || auto; setAuto(cfg);
    const r = await window.VendusAuth.setAutoResponder(cfg);
    if (r.ok) window.vendusToast && window.vendusToast("Resposta automática atualizada.", { icon: "check-check", tone: "success" });
    else window.vendusToast && window.vendusToast(r.error || "Erro ao salvar.", { icon: "alert-triangle", tone: "danger" });
  }
  function toggleCat(cat) {
    const cats = auto.categorias || []; const has = cats.includes(cat);
    salvarAuto({ ...auto, categorias: has ? cats.filter((c) => c !== cat) : [...cats, cat] });
  }

  const ThemesPage = window.VendusThemes?.ThemesPage;
  const current = SETTINGS_TABS.find(t => t.id === activeTab) || SETTINGS_TABS[0];

  return (
    <div className="page fade-in">
      <div className="page-header">
        <div>
          <Eyebrow>Conta</Eyebrow>
          <h1 className="page-title">Configurações</h1>
          <div className="page-sub">Preferências da sua organização, equipe e integrações</div>
        </div>
      </div>
      <div style={{ display:"grid", gridTemplateColumns: "240px 1fr", gap: 16, alignItems:"start" }}>
        <Card padding={12}>
          {SETTINGS_TABS.map(t => (
            <button key={t.id}
              onClick={() => selectTab(t.id)}
              className={"navbtn " + (t.id === activeTab ? "active" : "")}>
              <I name={t.icon} size={16} className="icon"/> {t.label}
            </button>
          ))}
        </Card>

        {activeTab === "appearance" && ThemesPage ? (
          <Card padding={24}>
            <ThemesPage tweaks={tweaks} setTweak={setTweak} embedded/>
          </Card>
        ) : activeTab === "profile" ? (
          <Card>
            <SectionTitle title="Perfil do usuário"/>
            <div style={{ display:"flex", alignItems:"center", gap: 16, marginBottom: 20 }}>
              <div className="av" style={{ width: 64, height: 64, fontSize: 22 }}>RM</div>
              <div>
                <div style={{ fontWeight: 700, fontSize: 16 }}>Rafael Mendes</div>
                <div className="text-muted">rafael@minhalojaonline.com.br</div>
                <Chip tone="orange" leading={<I name="crown" size={11}/>}>Plano Pro</Chip>
              </div>
              <div style={{ marginLeft:"auto" }}>
                <Btn variant="outline"><I name="upload" size={13}/> Trocar foto</Btn>
              </div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
              <Inp label="Nome" value="Rafael Mendes"/>
              <Inp label="E-mail" value="rafael@minhalojaonline.com.br"/>
              <Inp label="WhatsApp" value="+55 11 98765-4321"/>
              <Inp label="CNPJ" value="12.345.678/0001-90"/>
            </div>
            <div style={{ marginTop: 20, display:"flex", gap: 10, justifyContent:"flex-end" }}>
              <Btn variant="outline">Cancelar</Btn>
              <Btn variant="primary">Salvar alterações</Btn>
            </div>
          </Card>
        ) : activeTab === "integrations" ? (
          <Card>
            <SectionTitle title="Integrações disponíveis" sub="Conecte mais canais e centralize tudo aqui"/>

            {mlStatus && mlStatus.connected && (
              <div className="banner" style={{ margin: "12px 0 4px", alignItems: "center" }}>
                <div style={{ width: 36, height: 36, borderRadius: 9, background: "rgba(34,197,94,.15)", color: "#4ADE80", display: "grid", placeItems: "center", flexShrink: 0 }}>
                  <I name="check-circle-2" size={18} />
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: 700, fontSize: 13.5 }}>{mlStatus.nickname} · Mercado Livre conectado</div>
                  <div className="text-muted" style={{ fontSize: 12 }}>Seus produtos e pedidos são sincronizados automaticamente.</div>
                </div>
                <Btn variant="secondary" size="sm" onClick={syncMl} disabled={syncing}>
                  <I name={syncing ? "loader" : "refresh-cw"} size={13} /> {syncing ? "Sincronizando…" : "Sincronizar agora"}
                </Btn>
              </div>
            )}

            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginTop: 8 }}>
              {INTEGRATIONS.map(it => {
                const conectado = it.ready && mlStatus && mlStatus.connected;
                return (
                <div key={it.n}
                  className={"card " + (it.ready && !conectado ? "card-hover" : "")}
                  onClick={(it.ready && !conectado) ? async () => {
                    try {
                      const tk = window.VendusAuth && await window.VendusAuth.getToken();
                      const r = await fetch("/api/ml/connect", { headers: tk ? { authorization: "Bearer " + tk } : {} });
                      const d = await r.json().catch(() => ({}));
                      if (r.ok && d.url) { window.location.assign(d.url); }
                      else { window.vendusToast && window.vendusToast(d.error || "Conexão com o Mercado Livre indisponível.", { icon: "alert-triangle", tone: "warning" }); }
                    } catch (e) { window.vendusToast && window.vendusToast("Erro: " + (e.message || e), { icon: "alert-triangle", tone: "danger" }); }
                  } : undefined}
                  style={{ padding: 14, textAlign:"center", cursor: (it.ready && !conectado) ? "pointer" : "default", opacity: it.ready ? 1 : 0.55, borderColor: conectado ? "rgba(34,197,94,.4)" : undefined }}>
                  <div style={{ width: 36, height: 36, borderRadius: 10, background: it.c, margin: "0 auto 8px", display:"grid", placeItems:"center", color:"white", fontWeight: 800, fontFamily:"Space Grotesk", fontSize: 13 }}>
                    {it.n.slice(0,2).toUpperCase()}
                  </div>
                  <div style={{ fontSize: 12, fontWeight: 600 }}>{it.n}</div>
                  {conectado
                    ? <div className="text-success" style={{ fontSize: 10.5, marginTop: 4, fontWeight: 700, display:"flex", alignItems:"center", justifyContent:"center", gap:3 }}><I name="check" size={11}/> Conectado</div>
                    : it.ready
                    ? <div className="text-orange" style={{ fontSize: 10.5, marginTop: 4, fontWeight: 700 }}>Conectar →</div>
                    : <div style={{ marginTop: 6 }}><Chip tone="default">Em breve</Chip></div>}
                </div>
              );})}
            </div>
          </Card>
        ) : activeTab === "organization" ? (
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <Card>
            <SectionTitle title="Configuração fiscal" sub="Informe o imposto que você paga sobre as vendas — aplicado automaticamente em todas elas"/>
            <div style={{ maxWidth: 440 }}>
              <label className="text-muted" style={{ fontSize: 12.5, fontWeight: 600 }}>Imposto sobre vendas (%)</label>
              <div style={{ display: "flex", gap: 10, marginTop: 6 }}>
                <input className="input" inputMode="decimal" placeholder="Ex.: 6" value={imposto} onChange={(e) => setImposto(e.target.value)} style={{ maxWidth: 160, textAlign: "right" }} />
                <Btn variant="primary" onClick={salvarImposto} disabled={savingImp}><I name="check" size={14} /> {savingImp ? "Salvando…" : "Salvar"}</Btn>
              </div>
              <div className="banner" style={{ marginTop: 16 }}>
                <I name="info" size={16} className="text-orange" />
                <div className="text-muted" style={{ fontSize: 12.5, lineHeight: 1.55 }}>
                  Esse percentual entra no cálculo da <b>receita líquida real</b> e da <b>margem</b> em todas as vendas e no Copiloto. Ex.: no Simples Nacional costuma ficar entre <b>4% e 12%</b>. Deixe em branco para não considerar imposto.
                </div>
              </div>
            </div>
          </Card>

          <Card>
            <SectionTitle title="Resposta automática ao cliente" sub="A IA responde sozinha — só perguntas simples e factuais, com salvaguardas"/>
            <div className="banner" style={{ margin: "4px 0 16px" }}>
              <I name="shield-alert" size={17} className="text-orange" />
              <div className="text-muted" style={{ fontSize: 12.5, lineHeight: 1.55 }}>
                <b>Use com cuidado.</b> O Mercado Livre penaliza respostas automáticas/repetidas. Aqui a IA <b>só responde sozinha quando tem certeza do fato</b> (estoque, atributo, descrição do anúncio); qualquer dúvida vira <b>rascunho</b> para você aprovar. Toda resposta automática fica registrada. Vale só para <b>perguntas de pré-venda</b>.
              </div>
            </div>

            <label style={{ display: "flex", alignItems: "center", gap: 10, cursor: "pointer", marginBottom: 6 }}>
              <input type="checkbox" checked={!!auto.enabled} onChange={(e) => salvarAuto({ ...auto, enabled: e.target.checked })} style={{ width: 18, height: 18 }} />
              <span style={{ fontWeight: 600, fontSize: 13.5 }}>Ativar resposta automática para perguntas simples</span>
            </label>

            {auto.enabled && (
              <div style={{ marginTop: 12, paddingLeft: 4 }}>
                <div className="text-muted" style={{ fontSize: 12.5, fontWeight: 600, marginBottom: 8 }}>Quais tipos de pergunta a IA pode responder sozinha:</div>
                <div style={{ display: "flex", flexDirection: "column", gap: 8, marginBottom: 16 }}>
                  {[["estoque", "Disponibilidade / estoque", "Ex.: \"tem disponível?\", \"quantos restam?\""], ["caracteristica", "Características do produto", "Ex.: \"é sem sal?\", \"qual a cor/voltagem?\" — só se estiver na ficha/descrição"], ["uso", "Uso simples / o que acompanha", "Ex.: \"acompanha carregador?\" — só se documentado"]].map(([key, lbl, ex]) => (
                    <label key={key} style={{ display: "flex", gap: 10, cursor: "pointer", alignItems: "flex-start" }}>
                      <input type="checkbox" checked={(auto.categorias || []).includes(key)} onChange={() => toggleCat(key)} style={{ width: 16, height: 16, marginTop: 2 }} />
                      <span>
                        <span style={{ fontWeight: 600, fontSize: 12.5 }}>{lbl}</span>
                        <span className="text-faint" style={{ fontSize: 11.5, display: "block" }}>{ex}</span>
                      </span>
                    </label>
                  ))}
                </div>
                <label className="text-muted" style={{ fontSize: 12.5, fontWeight: 600 }}>Limite por dia (segurança anti-moderação)</label>
                <div style={{ display: "flex", gap: 10, marginTop: 6, alignItems: "center" }}>
                  <input className="input" inputMode="numeric" value={auto.cap_diario ?? 30} onChange={(e) => setAuto({ ...auto, cap_diario: e.target.value })} onBlur={() => salvarAuto({ ...auto, cap_diario: Number(auto.cap_diario) || 30 })} style={{ maxWidth: 100, textAlign: "right" }} />
                  <span className="text-faint" style={{ fontSize: 12 }}>respostas automáticas/dia</span>
                </div>
              </div>
            )}
          </Card>
          </div>
        ) : (
          <Card padding={32}>
            <div style={{ display:"flex", flexDirection:"column", alignItems:"center", gap: 12, textAlign:"center", padding:"40px 20px" }}>
              <div style={{ width: 56, height: 56, borderRadius: 14, background:"var(--bg-elev)", display:"grid", placeItems:"center", color:"var(--fg-2)" }}>
                <I name={current.icon} size={26}/>
              </div>
              <div className="font-display" style={{ fontSize: 18, fontWeight: 700 }}>{current.label}</div>
              <div className="text-muted" style={{ fontSize: 13, maxWidth: 320, lineHeight: 1.5 }}>
                Esta seção está em construção. Conteúdo será disponibilizado em breve.
              </div>
            </div>
          </Card>
        )}
      </div>
    </div>
  );
}

function Inp({ label, value }) {
  return (
    <label>
      <div style={{ fontSize: 12, color: "var(--fg-2)", fontWeight: 600, marginBottom: 6 }}>{label}</div>
      <input className="input" defaultValue={value}/>
    </label>
  );
}

window.VendusPagesC = { StrategicPage, StoresPage, ComparativesPage, ReportsPage, GoalsPage, ForecastsPage, SettingsPage };