/* global React, VendusAtoms, VendusCopilot */
const { I, Chip, Btn, Card, Eyebrow, SectionTitle, Donut } = window.VendusAtoms;
const { useState, useMemo, useEffect } = React;

/* =====================================================
   COPILOTO — digest priorizado + score de qualidade
   Princípios: sigla explicada na 1ª aparição, no máximo
   3 ações em destaque, nunca inventar número.
===================================================== */

/* Glossário — cada sigla explicada na 1ª vez que aparece (princípio 1) */
const GLOSSARY = {
  "ACOS": "Quanto você gasta de anúncio para cada R$ 100 vendidos. Quanto menor, melhor.",
  "ROAS": "Quantos reais você vende para cada R$ 1 gasto em anúncio. Quanto maior, melhor.",
  "CTR": "Taxa de cliques: de cada 100 pessoas que veem o anúncio, quantas clicam.",
  "CPC": "Custo por clique: quanto você paga cada vez que alguém clica no anúncio.",
  "SKU": "O código único de cada produto no seu catálogo.",
  "p.p.": "Pontos percentuais: a diferença direta entre dois percentuais (de 38% para 35% = 3 p.p.).",
  "IP67": "Selo de resistência: aguenta poeira e respingos d'água, mas não serve para nadar.",
};

function Sigla({ children, def }) {
  return (
    <span title={def} tabIndex={0} style={{ borderBottom: "1px dotted var(--fg-3)", cursor: "help" }}>
      {children}
    </span>
  );
}

function escapeRe(s) {
  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}
const GLOSSARY_RE = new RegExp(
  "(" + Object.keys(GLOSSARY).sort((a, b) => b.length - a.length).map(escapeRe).join("|") + ")",
  "g"
);
function withSiglas(text, shown, keyPrefix) {
  if (!text) return text;
  return text.split(GLOSSARY_RE).map((part, i) => {
    if (GLOSSARY[part] && !shown.has(part)) {
      shown.add(part);
      return <Sigla key={`${keyPrefix}-${i}`} def={GLOSSARY[part]}>{part}</Sigla>;
    }
    return part;
  });
}

const VEREDITO = {
  bom: { chip: "success", icon: "check-circle-2", bg: "rgba(34,197,94,.15)", fg: "#4ADE80", label: "Tudo certo" },
  atencao: { chip: "orange", icon: "alert-triangle", bg: "rgba(249,115,22,.15)", fg: "var(--primary)", label: "Atenção" },
  critico: { chip: "danger", icon: "alert-octagon", bg: "rgba(239,68,68,.15)", fg: "#FCA5A5", label: "Crítico" },
};
const AREAS = {
  ads: { label: "Anúncios", icon: "megaphone" },
  desempenho: { label: "Desempenho", icon: "trending-up" },
  margem: { label: "Margem", icon: "percent" },
  conteudo: { label: "Conteúdo", icon: "image" },
};

/* 5 níveis de severidade (item 3 da spec): vermelho/laranja/amarelo/verde/cinza */
const SEVERIDADE = {
  critico:   { chip: "danger",  icon: "alert-octagon",  fg: "#FF6A6A",      bg: "rgba(239,68,68,.14)",  label: "Crítico" },
  atencao:   { chip: "orange",  icon: "alert-triangle", fg: "var(--primary)", bg: "rgba(249,115,22,.14)", label: "Atenção" },
  monitorar: { chip: "warning", icon: "eye",            fg: "#FACC15",      bg: "rgba(250,204,21,.14)", label: "Monitorar" },
  ok:        { chip: "success", icon: "check-circle-2", fg: "#4ADE80",      bg: "rgba(34,197,94,.14)",  label: "Tudo certo" },
  sem_dado:  { chip: "default", icon: "help-circle",    fg: "var(--fg-3)",  bg: "var(--bg-elev)",       label: "Sem dados" },
};
const sevOf = (a) => SEVERIDADE[a && a.severidade] || SEVERIDADE.monitorar;
const SEV_WEIGHT = { critico: 0, atencao: 1, monitorar: 2, ok: 3, sem_dado: 4 };
const STATUS_TOAST = { resolvida: "Marcada como resolvida ✓", ignorada: "Ação ignorada.", lembrar: "Vou te lembrar amanhã.", pendente: "Ação reaberta." };
const CONF_LABEL = { alta: "Confiança alta", media: "Confiança média", baixa: "Confiança baixa" };

function scoreColor(s) {
  if (s == null) return "var(--fg-3)";
  if (s >= 75) return "#4ADE80";
  if (s >= 50) return "#FFC85A";
  return "#FF6A6A";
}

/* ============================ PÁGINA ============================ */
function CopilotPage({ store }) {
  const [periodo, setPeriodo] = useState("diario");
  const [tab, setTab] = useState("hoje"); // hoje | acoes | alertas | historico
  const [digest, setDigest] = useState(null);
  const [score, setScore] = useState(null);
  const [saude, setSaude] = useState(null);
  const [acoes, setAcoes] = useState(null);
  const [loading, setLoading] = useState(true);
  const [analyzing, setAnalyzing] = useState(false);
  const [iaUso, setIaUso] = useState(null); // { usadas, limite, restantes, bloqueado, ilimitado }
  const [reportOpen, setReportOpen] = useState(false);
  const [scheduleOpen, setScheduleOpen] = useState(false);
  const [log, setLog] = useState([]);

  function loadAcoes() { return window.VendusCopilot.getAcoes().then(setAcoes); }
  function loadLog() { return window.VendusCopilot.getActionsLog().then(setLog); }
  function reloadExec() { loadAcoes(); loadLog(); } // após aplicar/desfazer uma ação executável
  async function reload() {
    const [d, s, a, sa] = await Promise.all([
      window.VendusCopilot.getDigest(undefined, periodo),
      window.VendusCopilot.getScore(undefined, periodo),
      window.VendusCopilot.getAcoes(),
      window.VendusCopilot.getSaudeConta(),
    ]);
    setDigest(d); setScore(s); setAcoes(a); setSaude(sa);
  }
  function loadIaUso() { window.VendusCopilot.getIaUsage().then(setIaUso); }
  useEffect(() => { loadIaUso(); }, []);
  useEffect(() => {
    let alive = true;
    setLoading(true);
    Promise.all([
      window.VendusCopilot.getDigest(undefined, periodo),
      window.VendusCopilot.getScore(undefined, periodo),
      window.VendusCopilot.getAcoes(),
      window.VendusCopilot.getSaudeConta(),
    ]).then(([d, s, a, sa]) => {
      if (!alive) return;
      setDigest(d); setScore(s); setAcoes(a); setSaude(sa); setLoading(false);
    });
    return () => { alive = false; };
  }, [periodo]);
  useEffect(() => { loadLog(); }, []);

  async function analisarAgora() {
    setAnalyzing(true);
    window.vendusToast && window.vendusToast("Análise iniciada — atualizo aqui assim que ficar pronta (alguns segundos).", { icon: "sparkles" });
    const r = await window.VendusCopilot.runAnalysisNow(undefined, periodo);
    setAnalyzing(false);
    if (!r.ok) {
      window.vendusToast && window.vendusToast(r.error || "Não consegui analisar agora.", { icon: r.limite ? "gauge" : "alert-triangle", tone: r.limite ? "warning" : "danger" });
      if (r.limite) loadIaUso(); // reflete o bloqueio no contador/botão
      return;
    }
    window.vendusToast && window.vendusToast("Análise atualizada!", { icon: "check-check", tone: "success" });
    loadIaUso();
    reload();
  }
  async function mudarAcao(id, status, lembrarAte) {
    const r = await window.VendusCopilot.updateAcao(id, status, lembrarAte);
    if (r.ok) { loadAcoes(); window.vendusToast && window.vendusToast(STATUS_TOAST[status] || "Ação atualizada.", { icon: "check-check", tone: "success" }); }
    else window.vendusToast && window.vendusToast(r.error, { icon: "alert-triangle", tone: "danger" });
  }

  const shown = new Set();
  const list = acoes || [];
  const ativas = list.filter((a) => a.status === "pendente" || a.status === "lembrar");
  const urgentes = ativas.filter((a) => a.severidade === "critico" || a.severidade === "atencao");
  const resolvidas = list.filter((a) => a.status === "resolvida" || a.status === "ignorada");
  const top = [...ativas].sort((a, b) => (SEV_WEIGHT[a.severidade] - SEV_WEIGHT[b.severidade]) || ((a.prioridade || 99) - (b.prioridade || 99))).slice(0, 3);

  const TABS = [["hoje", "Hoje"], ["acoes", `Ações${ativas.length ? " · " + ativas.length : ""}`], ["alertas", `Alertas${urgentes.length ? " · " + urgentes.length : ""}`], ["historico", "Histórico"]];

  return (
    <div className="page fade-in">
      <div className="page-header">
        <div>
          <Eyebrow>IA Vendus · Piloto</Eyebrow>
          <h1 className="page-title">Piloto</h1>
          <div className="page-sub">O que está acontecendo hoje e o que fazer primeiro</div>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", justifyContent: "flex-end" }}>
          <div className="seg">
            <button onClick={() => setPeriodo("diario")} className={periodo === "diario" ? "active" : ""}>Diário</button>
            <button onClick={() => setPeriodo("semanal")} className={periodo === "semanal" ? "active" : ""}>Semanal</button>
          </div>
          <Btn variant="ghost" onClick={() => setScheduleOpen(true)} title="Quando as análises acontecem">
            <I name="calendar-clock" size={14} /> Agendar
          </Btn>
          <Btn variant="secondary" onClick={() => setReportOpen(true)} title="Ver relatório completo">
            <I name="file-text" size={14} /> Relatório
          </Btn>
          <Btn variant="primary" onClick={analisarAgora} disabled={analyzing || (iaUso && iaUso.bloqueado)}
            title={iaUso && iaUso.bloqueado ? "Limite de análises do mês atingido — reinicia no dia 1º" : "Rodar a análise agora"}>
            <I name={analyzing ? "loader" : "sparkles"} size={14} /> {analyzing ? "Analisando…" : "Analisar agora"}
          </Btn>
        </div>
      </div>

      {/* Uso de IA no mês (limite 30) — só mostra quando há teto (o dono é ilimitado) */}
      {iaUso && !iaUso.ilimitado && iaUso.limite && (
        <div className="text-faint" style={{ fontSize: 11.5, marginTop: 2, display: "flex", alignItems: "center", gap: 6, justifyContent: "flex-end" }}>
          <I name="gauge" size={13} />
          {iaUso.bloqueado
            ? <span style={{ color: "#FB923C" }}>Você usou as {iaUso.limite} análises deste mês — reinicia no dia 1º. Suas análises anteriores continuam aqui.</span>
            : <span>Você usou <b>{iaUso.usadas}</b> de {iaUso.limite} análises de IA este mês{iaUso.restantes <= 5 ? ` · faltam ${iaUso.restantes}` : ""}.</span>}
        </div>
      )}

      {analyzing && (
        <div className="banner" style={{ marginBottom: 18 }}>
          <I name="loader" size={18} className="text-orange" />
          <div className="text-muted" style={{ fontSize: 13 }}>
            A IA está relendo sua loja e reescrevendo a análise. Isso leva cerca de 1 a 2 minutos — pode continuar usando o app.
          </div>
        </div>
      )}

      <PiloStatusHeader score={score} store={store} atualizadoEm={digest && digest.atualizado_em} pendentes={ativas.length} urgentes={urgentes.length} />

      <div className="seg" style={{ margin: "16px 0 18px" }}>
        {TABS.map(([k, l]) => <button key={k} onClick={() => setTab(k)} className={tab === k ? "active" : ""}>{l}</button>)}
      </div>

      {loading ? (
        <Card padding={24}><div className="text-muted" style={{ fontSize: 14 }}>Montando seu painel…</div></Card>
      ) : tab === "hoje" ? (
        <>
          {/* Resumo curto — "consultor no WhatsApp" */}
          <div className="banner" style={{ marginBottom: 20, alignItems: "flex-start" }}>
            <div style={{ width: 40, height: 40, borderRadius: 10, background: "var(--logo-gradient)", display: "grid", placeItems: "center", color: "white", flexShrink: 0 }}>
              <I name="message-circle" size={18} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 700, fontSize: 14 }}>Resumo de hoje</div>
              <div className="text-muted" style={{ fontSize: 13.5, lineHeight: 1.6 }}>{withSiglas(digest.resumo, shown, "resumo")}</div>
            </div>
          </div>

          {/* Faça agora */}
          <SectionTitle title="Faça agora" sub={top.length ? `As ${top.length} ações de maior impacto agora` : "Nada urgente no momento"} />
          {top.length === 0 ? (
            <Card padding={22} style={{ margin: "12px 0 22px" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <I name="check-circle-2" size={20} className="text-success" />
                <span className="text-muted" style={{ fontSize: 13.5 }}>Nenhuma ação urgente agora. Sua loja está em dia. 🎉</span>
              </div>
            </Card>
          ) : (
            <div style={{ display: "flex", flexDirection: "column", gap: 12, margin: "12px 0 22px" }}>
              {top.map((a) => <AcaoCard key={a.id} acao={a} onChange={mudarAcao} onExec={reloadExec} shown={shown} destaque />)}
            </div>
          )}

          <DataQualityCard store={store} score={score} />
          <div style={{ marginTop: 22 }}><ScoreSection score={score} /></div>
          <div style={{ marginTop: 22 }}><SaudeContaSection saude={saude} /></div>

          <div className="text-faint" style={{ fontSize: 11.5, marginTop: 22, display: "flex", alignItems: "center", gap: 6 }}>
            <I name="info" size={12} />
            O Piloto só usa os dados conectados da sua loja. Quando falta uma informação, ele avisa em vez de chutar.
          </div>
        </>
      ) : tab === "acoes" ? (
        <AcoesTab acoes={list} onChange={mudarAcao} onExec={reloadExec} shown={shown} />
      ) : tab === "alertas" ? (
        urgentes.length === 0 ? (
          <Card padding={24}><div style={{ display: "flex", alignItems: "center", gap: 10 }}><I name="bell-off" size={18} className="text-muted" /><span className="text-muted" style={{ fontSize: 13.5 }}>Nenhum alerta crítico ou de atenção no momento.</span></div></Card>
        ) : (
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {urgentes.map((a) => <AcaoCard key={a.id} acao={a} onChange={mudarAcao} shown={shown} />)}
          </div>
        )
      ) : (
        <>
          <AcoesLogCard log={log} onUndo={reloadExec} />
          {resolvidas.length === 0 ? (
            <Card padding={24}><div className="text-muted" style={{ fontSize: 13.5 }}>Ainda não há ações resolvidas ou ignoradas. O histórico aparece aqui conforme você for resolvendo.</div></Card>
          ) : (
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {resolvidas.map((a) => <AcaoCard key={a.id} acao={a} onChange={mudarAcao} onExec={reloadExec} shown={shown} />)}
            </div>
          )}
        </>
      )}

      {reportOpen && <ReportOverlay digest={digest} score={score} periodo={periodo} onClose={() => setReportOpen(false)} />}
      {scheduleOpen && <ScheduleModal onClose={() => setScheduleOpen(false)} />}
    </div>
  );
}

/* ===================== STATUS DA LOJA (topo do Piloto) ===================== */
const MK_NOME = { mercado_livre: "Mercado Livre", shopee: "Shopee", tiktok: "TikTok Shop" };
function PiloStatusHeader({ score, store, atualizadoEm, pendentes, urgentes }) {
  const saude = score && score.score_geral != null ? score.score_geral : null;
  const cor = scoreColor(saude);
  const statusTxt = urgentes > 0 ? "Atenção necessária" : pendentes > 0 ? "Alguns ajustes" : "Saudável";
  const statusCor = urgentes > 0 ? "#FF6A6A" : pendentes > 0 ? "var(--primary)" : "#4ADE80";
  const fonte = store && store.connected ? (MK_NOME[store.marketplace] || "Mercado Livre") : "Sem loja conectada";
  const quando = atualizadoEm ? new Date(atualizadoEm).toLocaleString("pt-BR", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" }) : "—";
  const items = [
    { rotulo: "Saúde da loja", valor: saude == null ? "—" : `${saude}/100`, cor },
    { rotulo: "Status", valor: statusTxt, cor: statusCor },
    { rotulo: "Última análise", valor: quando },
    { rotulo: "Fonte", valor: fonte },
    { rotulo: "Ações urgentes", valor: String(urgentes), cor: urgentes > 0 ? "#FF6A6A" : "var(--fg-1)" },
  ];
  return (
    <Card padding={16}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 12 }}>
        {items.map((it) => (
          <div key={it.rotulo} style={{ minWidth: 0 }}>
            <div className="text-faint" style={{ fontSize: 10.5, textTransform: "uppercase", letterSpacing: ".03em", fontWeight: 700 }}>{it.rotulo}</div>
            <div className="font-display" style={{ fontSize: 17, fontWeight: 800, color: it.cor || "var(--fg-1)", marginTop: 2, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{it.valor}</div>
          </div>
        ))}
      </div>
    </Card>
  );
}

/* ===================== QUALIDADE DA COLETA ===================== */
function DataQualityCard({ store, score }) {
  const conectado = !!(store && store.connected);
  const dims = (score && score.dimensoes) || [];
  const avaliadas = dims.filter((d) => d.status !== "sem_dado").length;
  const conf = dims.length ? Math.round((avaliadas / dims.length) * 100) : (conectado ? 70 : 0);
  const confCor = conf >= 75 ? "#4ADE80" : conf >= 50 ? "var(--primary)" : "#FF6A6A";
  const fontes = [
    { nome: store && store.connected ? (MK_NOME[store.marketplace] || "Mercado Livre") : "Mercado Livre", ok: conectado },
    { nome: "Anúncios (Ads)", ok: conectado },
    { nome: "Estoque", ok: conectado },
    { nome: "Pedidos", ok: conectado },
  ];
  return (
    <Card padding={16} style={{ marginTop: 22 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 10, flexWrap: "wrap" }}>
        <I name="database" size={15} className="text-orange" />
        <span style={{ fontWeight: 700, fontSize: 13.5 }}>Qualidade da coleta</span>
        <span style={{ flex: 1 }} />
        <span className="text-muted" style={{ fontSize: 12 }}>Confiança do relatório: <b style={{ color: confCor }}>{conf}%</b></span>
      </div>
      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
        {fontes.map((f) => <Chip key={f.nome} tone={f.ok ? "success" : "default"} leading={<I name={f.ok ? "check" : "plug"} size={10} />}>{f.nome}</Chip>)}
      </div>
      {!conectado && <div className="text-faint" style={{ fontSize: 11.5, marginTop: 8 }}>Relatório incompleto — conecte sua loja em Configurações da IA para a análise ficar completa.</div>}
    </Card>
  );
}

/* ===================== CARD DE AÇÃO (camadas + botões) ===================== */
function AcaoCard({ acao, onChange, onExec, shown, destaque }) {
  const [det, setDet] = useState(!!destaque);
  const [ev, setEv] = useState(false);
  const [exec, setExec] = useState(false);
  const s = sevOf(acao);
  const evid = Array.isArray(acao.evidencia) ? acao.evidencia : [];
  const ativo = acao.status === "pendente" || acao.status === "lembrar";
  const execavel = acao.acao && acao.acao.tipo && acao.acao.tipo !== "manual";
  return (
    <Card padding={16} className={destaque ? "card-hover" : ""}>
      <div style={{ display: "flex", gap: 12 }}>
        <div style={{ width: 8, alignSelf: "stretch", borderRadius: 999, background: s.fg, flexShrink: 0 }} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
            <Chip tone={s.chip} leading={<I name={s.icon} size={11} />}>{s.label}</Chip>
            <span className="text-faint" style={{ fontSize: 11 }}>{(AREAS[acao.area] || {}).label}{acao.fonte ? ` · ${acao.fonte}` : ""}</span>
            {acao.status === "resolvida" && <Chip tone="success"><I name="check" size={10} /> Resolvida</Chip>}
            {acao.status === "ignorada" && <Chip tone="default">Ignorada</Chip>}
            {acao.status === "lembrar" && <Chip tone="violet"><I name="clock" size={10} /> Lembrar</Chip>}
          </div>
          <h4 style={{ fontSize: 14.5, fontWeight: 700, marginTop: 6 }}>{acao.titulo}</h4>
          <p className="text-muted" style={{ fontSize: 13, lineHeight: 1.55, marginTop: 4 }}>{withSiglas(acao.traducao || acao.o_que_significa, shown, `tr-${acao.id}`)}</p>

          {det && (
            <div style={{ marginTop: 10, borderTop: "1px solid var(--border)", paddingTop: 10, display: "flex", flexDirection: "column", gap: 8 }}>
              {acao.o_que_significa && acao.o_que_significa !== acao.traducao && (
                <div className="text-muted" style={{ fontSize: 12.5, lineHeight: 1.5 }}>{withSiglas(acao.o_que_significa, shown, `sig-${acao.id}`)}</div>
              )}
              <div style={{ display: "flex", gap: 7, alignItems: "flex-start" }}>
                <I name="arrow-right-circle" size={14} className="text-orange" style={{ flexShrink: 0, marginTop: 1 }} />
                <span style={{ fontSize: 13, fontWeight: 600, lineHeight: 1.45 }}>{withSiglas(acao.o_que_fazer, shown, `do-${acao.id}`)}</span>
              </div>
              <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
                {acao.impacto && <Chip tone="default" leading={<I name="zap" size={11} />}>{acao.impacto}</Chip>}
                {acao.confianca && <span className="text-faint" style={{ fontSize: 11 }}>{CONF_LABEL[acao.confianca] || ""}</span>}
              </div>
            </div>
          )}

          {ev && evid.length > 0 && (
            <div style={{ marginTop: 10, background: "var(--bg-elev)", borderRadius: 10, padding: 12 }}>
              <div style={{ fontSize: 11.5, fontWeight: 700, marginBottom: 6, display: "flex", alignItems: "center", gap: 6 }}><I name="search" size={12} className="text-orange" /> Evidência usada</div>
              {evid.map((e, i) => (
                <div key={i} style={{ display: "flex", justifyContent: "space-between", gap: 10, fontSize: 12, padding: "2px 0" }}>
                  <span className="text-faint">{e.rotulo}</span>
                  <span className="mono-numeric" style={{ fontWeight: 600 }}>{e.valor}</span>
                </div>
              ))}
            </div>
          )}

          <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginTop: 12, alignItems: "center" }}>
            <Btn variant="ghost" size="sm" onClick={() => setDet((v) => !v)}><I name={det ? "chevron-up" : "chevron-down"} size={13} /> {det ? "Menos" : "Ver detalhes"}</Btn>
            {evid.length > 0 && <Btn variant="ghost" size="sm" onClick={() => setEv((v) => !v)}><I name="help-circle" size={13} /> Por que a IA disse isso?</Btn>}
            <span style={{ flex: 1 }} />
            {ativo ? (
              <>
                <Btn variant="ghost" size="sm" onClick={() => onChange(acao.id, "lembrar")}><I name="clock" size={13} /> Lembrar amanhã</Btn>
                <Btn variant="ghost" size="sm" onClick={() => onChange(acao.id, "ignorada")}><I name="x" size={13} /> Ignorar</Btn>
                {execavel ? (
                  <>
                    <Btn variant="ghost" size="sm" onClick={() => onChange(acao.id, "resolvida")}><I name="check" size={13} /> Resolver</Btn>
                    <Btn variant="primary" size="sm" onClick={() => setExec(true)}><I name="zap" size={13} /> Revisar e aplicar</Btn>
                  </>
                ) : (
                  <Btn variant="primary" size="sm" onClick={() => onChange(acao.id, "resolvida")}><I name="check" size={13} /> Resolver</Btn>
                )}
              </>
            ) : (
              <Btn variant="ghost" size="sm" onClick={() => onChange(acao.id, "pendente")}><I name="rotate-ccw" size={13} /> Reabrir</Btn>
            )}
          </div>
        </div>
      </div>
      {exec && <AcaoExecModal acao={acao} onClose={() => setExec(false)} onDone={() => { setExec(false); onExec && onExec(); }} />}
    </Card>
  );
}

/* ===================== MODAL: REVISAR E APLICAR (Workstream D) ===================== */
const ACAO_UNIDADE = { ajustar_orcamento: "R$", ajustar_preco: "R$", ajustar_acos: "%", atualizar_estoque: "un" };
function AcaoExecModal({ acao, onClose, onDone }) {
  const a = acao.acao || {};
  const temPara = a.parametros && a.parametros.para != null;
  const [para, setPara] = useState(temPara ? a.parametros.para : "");
  const [confirmar, setConfirmar] = useState(false);
  const [busy, setBusy] = useState(false);
  const [erro, setErro] = useState(null);
  const sensivel = ["ajustar_preco", "pausar_campanha", "promocao"].includes(a.tipo);
  const unidade = ACAO_UNIDADE[a.tipo] || "";

  // Modal de revisão (sempre o mesmo form). Em sucesso/gated, fecha + toast — o "Desfazer"
  // fica no Histórico de ações (evita trocar a subárvore com ícones no meio do ciclo).
  async function aplicar() {
    setBusy(true); setErro(null);
    const r = await window.VendusCopilot.aplicarAcao(acao.id, temPara && para !== "" ? Number(para) : undefined, sensivel ? confirmar : false);
    setBusy(false);
    if (r.gated) {
      window.vendusToast && window.vendusToast(r.error || "Essa ação é manual — siga o passo a passo no card.", { icon: "info" });
      onDone(); return;
    }
    if (!r.ok) { setErro(r.error); return; }
    window.vendusToast && window.vendusToast("Aplicado no Mercado Livre ✓ — dá pra desfazer no Histórico.", { icon: "check-check", tone: "success" });
    onDone();
  }

  return (
    <div className="report-backdrop" onClick={onClose}>
      <div className="modal-sheet" style={{ maxWidth: 460 }} onClick={(e) => e.stopPropagation()}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
          <h3 style={{ fontSize: 16, fontWeight: 800 }}>Revisar e aplicar</h3>
          <Btn variant="ghost" size="sm" onClick={onClose}>✕</Btn>
        </div>

        <div style={{ fontSize: 13.5, fontWeight: 600, lineHeight: 1.45 }}>{a.rotulo_humano}</div>
        {a.efeito_esperado && (
          <div style={{ display: "flex", gap: 7, marginTop: 10, alignItems: "flex-start" }}>
            <span className="text-success" style={{ flexShrink: 0, marginTop: 1, fontWeight: 800 }}>↑</span>
            <span className="text-muted" style={{ fontSize: 12.5, lineHeight: 1.5 }}>{a.efeito_esperado}</span>
          </div>
        )}
        {a.risco && (
          <div style={{ display: "flex", gap: 7, marginTop: 8, alignItems: "flex-start" }}>
            <span className="text-orange" style={{ flexShrink: 0, marginTop: 1, fontWeight: 800 }}>⚠</span>
            <span className="text-muted" style={{ fontSize: 12.5, lineHeight: 1.5 }}>{a.risco}</span>
          </div>
        )}

        {temPara && (
          <div style={{ marginTop: 14 }}>
            <label className="text-faint" style={{ fontSize: 11.5 }}>Novo valor {unidade ? `(${unidade})` : ""}{a.parametros.de != null ? ` — atual: ${unidade === "R$" ? "R$ " : ""}${a.parametros.de}${unidade === "%" ? "%" : ""}` : ""}</label>
            <input className="input" type="number" value={para} onChange={(e) => setPara(e.target.value)} style={{ width: "100%", marginTop: 4 }} />
            <div className="text-faint" style={{ fontSize: 11, marginTop: 4 }}>Você pode ajustar o valor antes de aplicar.</div>
          </div>
        )}

        {sensivel && (
          <label style={{ display: "flex", gap: 8, alignItems: "flex-start", marginTop: 14, cursor: "pointer" }}>
            <input type="checkbox" checked={confirmar} onChange={(e) => setConfirmar(e.target.checked)} style={{ marginTop: 2, width: 16, height: 16 }} />
            <span className="text-danger" style={{ fontSize: 12.5, lineHeight: 1.4, fontWeight: 600 }}>Confirmo que entendo o impacto desta ação sensível.</span>
          </label>
        )}

        {erro && <div className="text-danger" style={{ fontSize: 12.5, marginTop: 10 }}>{erro}</div>}

        <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 16 }}>
          <Btn variant="ghost" size="sm" onClick={onClose} disabled={busy}>Cancelar</Btn>
          <Btn variant="primary" size="sm" onClick={aplicar} disabled={busy || (sensivel && !confirmar)}>
            {busy ? "Aplicando…" : "⚡ Aplicar agora"}
          </Btn>
        </div>
      </div>
    </div>
  );
}

/* ===================== CENTRAL DE AÇÕES (aba) ===================== */
function AcoesTab({ acoes, onChange, onExec, shown }) {
  const [filtro, setFiltro] = useState("ativas");
  const FILTROS = [["ativas", "Pendentes"], ["resolvida", "Resolvidas"], ["ignorada", "Ignoradas"], ["todas", "Todas"]];
  const list = (acoes || []).filter((a) =>
    filtro === "todas" ? true : filtro === "ativas" ? (a.status === "pendente" || a.status === "lembrar") : a.status === filtro
  );
  const sorted = [...list].sort((a, b) => (SEV_WEIGHT[a.severidade] - SEV_WEIGHT[b.severidade]) || ((a.prioridade || 99) - (b.prioridade || 99)));
  return (
    <>
      <div className="seg" style={{ marginBottom: 14 }}>
        {FILTROS.map(([k, l]) => <button key={k} onClick={() => setFiltro(k)} className={filtro === k ? "active" : ""}>{l}</button>)}
      </div>
      {sorted.length === 0 ? (
        <Card padding={24}><div className="text-muted" style={{ fontSize: 13.5 }}>Nenhuma ação nesta lista.</div></Card>
      ) : (
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {sorted.map((a) => <AcaoCard key={a.id} acao={a} onChange={onChange} onExec={onExec} shown={shown} />)}
        </div>
      )}
    </>
  );
}

/* ===================== SCORE DE QUALIDADE ===================== */
function ScoreSection({ score }) {
  if (!score) return null;
  const geral = score.score_geral;
  const cor = scoreColor(geral);
  const slices = geral == null
    ? [{ value: 1, color: "transparent" }]
    : [{ value: geral, color: cor }, { value: 100 - geral, color: "transparent" }];

  return (
    <Card padding={20} style={{ marginBottom: 4 }}>
      <SectionTitle title="Qualidade da loja" sub="O quão bem configurada sua loja está para vender" />
      <div style={{ display: "grid", gridTemplateColumns: "180px 1fr", gap: 24, alignItems: "center", marginTop: 12 }}>
        {/* Medidor */}
        <div style={{ display: "grid", placeItems: "center" }}>
          <Donut
            size={150}
            stroke={16}
            slices={slices}
            center={
              <div style={{ textAlign: "center" }}>
                <div className="font-display" style={{ fontSize: 38, fontWeight: 800, color: cor, lineHeight: 1 }}>
                  {geral == null ? "—" : geral}
                </div>
                <div className="text-faint" style={{ fontSize: 11 }}>de 100</div>
              </div>
            }
          />
          <div style={{ fontWeight: 700, fontSize: 13, marginTop: 8, color: cor }}>{score.nota_texto}</div>
        </div>

        {/* Barras por dimensão */}
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {(score.dimensoes || []).map((d) => (
            <div key={d.chave}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 4 }}>
                <span style={{ fontSize: 13, fontWeight: 600 }}>{d.nome}</span>
                {d.status === "sem_dado" ? (
                  <Chip tone="default"><I name="plug" size={10} /> Conecte o ML</Chip>
                ) : (
                  <span className="font-display mono-numeric" style={{ fontWeight: 700, fontSize: 13, color: scoreColor(d.score) }}>{d.score}</span>
                )}
              </div>
              <div className="score-track">
                <div className="score-fill" style={{ width: `${d.status === "sem_dado" ? 0 : d.score}%`, background: scoreColor(d.score) }} />
              </div>
              {d.o_que_fazer && (
                <div className="text-faint" style={{ fontSize: 11.5, marginTop: 4 }}>
                  {d.status === "sem_dado" ? d.o_que_fazer : <><b className="text-muted">O que fazer:</b> {d.o_que_fazer}</>}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </Card>
  );
}

/* ===================== HISTÓRICO DE AÇÕES (actions_log) ===================== */
const TIPO_LABEL = {
  ajustar_orcamento: "Orçamento da campanha", ajustar_acos: "ACOS-alvo", pausar_campanha: "Pausar campanha",
  reativar_campanha: "Reativar campanha", pausar_anuncio: "Pausar anúncio", reativar_anuncio: "Reativar anúncio",
  ajustar_preco: "Preço do anúncio", atualizar_estoque: "Estoque do anúncio", promocao: "Promoção",
};
const LOG_STATUS = { aplicada: { label: "Aplicada", tone: "success" }, desfeita: { label: "Desfeita", tone: "default" }, falhou: { label: "Falhou", tone: "danger" } };
function AcoesLogCard({ log, onUndo }) {
  const [busy, setBusy] = useState(null);
  if (!log || log.length === 0) return null;
  async function undo(id) {
    setBusy(id);
    const r = await window.VendusCopilot.desfazerAcao(id);
    setBusy(null);
    if (r.ok) { window.vendusToast && window.vendusToast("Desfeito — voltou ao valor anterior.", { icon: "rotate-ccw" }); onUndo && onUndo(); }
    else window.vendusToast && window.vendusToast(r.error, { icon: "alert-triangle", tone: "danger" });
  }
  return (
    <Card padding={18} style={{ marginBottom: 14 }}>
      <SectionTitle title="Ações aplicadas no Mercado Livre" sub="Tudo que o Vendus executou com sua aprovação — com opção de desfazer" />
      <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 10 }}>
        {log.map((l) => {
          const st = LOG_STATUS[l.status] || LOG_STATUS.aplicada;
          const p = l.parametros || {};
          const mudou = p.de != null && p.para != null ? `${p.de} → ${p.para}` : null;
          const quando = l.aplicada_em ? new Date(l.aplicada_em).toLocaleString("pt-BR", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" }) : "";
          return (
            <div key={l.id} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 10px", background: "var(--bg-elev)", borderRadius: 10 }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 600 }}>{TIPO_LABEL[l.tipo] || l.tipo}{mudou ? ` · ${mudou}` : ""}</div>
                <div className="text-faint" style={{ fontSize: 11 }}>{l.alvo} · {quando}</div>
              </div>
              <Chip tone={st.tone}>{st.label}</Chip>
              {l.status === "aplicada" && <Btn variant="ghost" size="sm" onClick={() => undo(l.id)} disabled={busy === l.id}><I name="rotate-ccw" size={12} /> Desfazer</Btn>}
            </div>
          );
        })}
      </div>
    </Card>
  );
}

/* ===================== SAÚDE DA CONTA (reputação) ===================== */
const TERMO_META = {
  verde_escuro: { cor: "#16A34A", label: "Saudável", icon: "shield-check" },
  verde_claro:  { cor: "#4ADE80", label: "Boa", icon: "shield-check" },
  amarelo:      { cor: "#FACC15", label: "Atenção", icon: "shield-alert" },
  laranja:      { cor: "#FB923C", label: "Risco", icon: "shield-alert" },
  vermelho:     { cor: "#FF6A6A", label: "Crítico", icon: "shield-x" },
};
const NIVEL_LABEL = { mercadolider: "MercadoLíder", mercadolider_gold: "MercadoLíder Gold", mercadolider_platinum: "MercadoLíder Platinum" };

function SaudeContaSection({ saude }) {
  if (!saude || !saude.conectado) return null;
  const rep = saude.reputacao;

  // Sem acesso à reputação: estado honesto — nunca inventa indicador.
  if (!rep) {
    return (
      <Card padding={20}>
        <SectionTitle title="Saúde da conta" sub="Sua reputação no Mercado Livre" />
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 10 }}>
          <I name="plug" size={16} className="text-faint" />
          <span className="text-muted" style={{ fontSize: 13 }}>A reputação ainda não está disponível pela API desta conta. Sem ela, esse risco fica cego.</span>
        </div>
      </Card>
    );
  }

  const meta = TERMO_META[rep.termometro] || { cor: "var(--fg-3)", label: "—", icon: "shield" };
  const nivel = NIVEL_LABEL[rep.nivel];
  const indCor = (v) => (v == null ? "var(--fg-3)" : v <= 1.5 ? "#16A34A" : v <= 4 ? "#FB923C" : "#FF6A6A");
  const fmtPct = (v) => (v == null ? "—" : (Math.round(v * 100) / 100) + "%");
  const inds = [
    { nome: "Reclamações", v: rep.pct_reclamacoes },
    { nome: "Atrasos no envio", v: rep.pct_atrasos },
    { nome: "Cancelamentos", v: rep.pct_cancelamentos },
  ];

  return (
    <Card padding={20}>
      <SectionTitle title="Saúde da conta" sub="Sua reputação no Mercado Livre — o risco mais silencioso da loja" />
      <div style={{ display: "grid", gridTemplateColumns: "180px 1fr", gap: 24, alignItems: "center", marginTop: 12 }}>
        {/* Termômetro (o ícone herda a cor via currentColor) */}
        <div style={{ display: "grid", placeItems: "center", textAlign: "center" }}>
          <div style={{ width: 110, height: 110, borderRadius: "50%", display: "grid", placeItems: "center", color: meta.cor, background: meta.cor + "1f", border: "3px solid " + meta.cor }}>
            <I name={meta.icon} size={42} />
          </div>
          <div style={{ fontWeight: 800, fontSize: 15, marginTop: 10, color: meta.cor }}>{meta.label}</div>
          {nivel && <div style={{ marginTop: 6 }}><Chip tone="violet"><I name="award" size={10} /> {nivel}</Chip></div>}
        </div>

        {/* 3 indicadores (janela 60d) */}
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          {inds.map((d) => (
            <div key={d.nome}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 4 }}>
                <span style={{ fontSize: 13, fontWeight: 600 }}>{d.nome}</span>
                <span className="font-display mono-numeric" style={{ fontWeight: 700, fontSize: 13, color: indCor(d.v) }}>{fmtPct(d.v)}</span>
              </div>
              <div className="score-track">
                <div className="score-fill" style={{ width: `${d.v == null ? 0 : Math.min(100, (d.v / 5) * 100)}%`, background: indCor(d.v) }} />
              </div>
            </div>
          ))}
          <div className="text-faint" style={{ fontSize: 11.5, marginTop: 2, display: "flex", alignItems: "center", gap: 6 }}>
            <I name="info" size={12} /> Últimos {rep.janela_dias} dias (padrão Mercado Livre). Quanto menor cada número, melhor. O que fazer aparece nas suas ações.
          </div>
        </div>
      </div>
    </Card>
  );
}

/* ===================== RELATÓRIO + PDF ===================== */
function ReportOverlay({ digest, score, periodo, onClose }) {
  const hoje = new Date().toLocaleDateString("pt-BR", { day: "2-digit", month: "long", year: "numeric" });
  const ordered = digest ? [...digest.findings].sort((a, b) => a.prioridade - b.prioridade) : [];

  return (
    <div className="report-backdrop" onClick={onClose}>
      <div className="report-sheet" onClick={(e) => e.stopPropagation()}>
        <div className="report-toolbar">
          <span style={{ fontWeight: 700 }}>Relatório completo</span>
          <div style={{ display: "flex", gap: 8 }}>
            <Btn variant="primary" onClick={() => window.print()}><I name="printer" size={14} /> Exportar PDF</Btn>
            <Btn variant="ghost" onClick={onClose}><I name="x" size={14} /> Fechar</Btn>
          </div>
        </div>

        <div id="vendus-report" className="report-body">
          <div className="report-head">
            <div>
              <div className="font-display" style={{ fontWeight: 800, fontSize: 22 }}>Relatório do Copiloto</div>
              <div className="text-muted" style={{ fontSize: 13 }}>
                Minha Loja Online · Período {periodo === "semanal" ? "semanal" : "diário"} · {hoje}
              </div>
            </div>
          </div>

          {/* Score */}
          {score && (
            <div className="report-section">
              <h3 className="report-h3">Qualidade da loja</h3>
              <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
                <span className="font-display" style={{ fontSize: 30, fontWeight: 800, color: scoreColor(score.score_geral) }}>
                  {score.score_geral == null ? "—" : score.score_geral}
                </span>
                <span className="text-muted">de 100 · {score.nota_texto}</span>
              </div>
              <div style={{ marginTop: 10, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
                {(score.dimensoes || []).map((d) => (
                  <div key={d.chave} style={{ display: "flex", justifyContent: "space-between", fontSize: 13, padding: "3px 0" }}>
                    <span>{d.nome}</span>
                    <span style={{ fontWeight: 700, color: scoreColor(d.score) }}>{d.status === "sem_dado" ? "—" : d.score}</span>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Resumo */}
          {digest && (
            <div className="report-section">
              <h3 className="report-h3">Resumo</h3>
              <p style={{ fontSize: 13.5, lineHeight: 1.6 }}>{digest.resumo}</p>
            </div>
          )}

          {/* Findings */}
          <div className="report-section">
            <h3 className="report-h3">Ações e observações</h3>
            {ordered.map((f, i) => (
              <div key={i} className="report-finding">
                <div style={{ fontWeight: 700, fontSize: 13.5 }}>
                  {i + 1}. {f.titulo} <span style={{ color: (VEREDITO[f.veredito] || {}).fg }}>· {(VEREDITO[f.veredito] || {}).label}</span>
                </div>
                <div className="text-muted" style={{ fontSize: 12.5, margin: "3px 0" }}>{f.o_que_significa}</div>
                <div style={{ fontSize: 12.5 }}><b>O que fazer:</b> {f.o_que_fazer}</div>
                <div style={{ fontSize: 12, color: "var(--fg-3)" }}>Impacto: {f.impacto}</div>
              </div>
            ))}
          </div>

          <div className="report-foot text-faint">Gerado pelo Copiloto do Vendus · {hoje}</div>
        </div>
      </div>
    </div>
  );
}

/* ===================== AGENDAMENTO ===================== */
const HORAS = ["06:00", "07:00", "08:00", "09:00", "10:00", "11:00"];
const HORAS_TARDE = ["16:00", "17:00", "18:00", "19:00", "20:00"];
const FREQS = [
  { id: "off", label: "Desligado", desc: "Só quando eu clicar em Analisar agora", icon: "power" },
  { id: "daily", label: "Todo dia de manhã", desc: "Uma análise por dia", icon: "sun" },
  { id: "twice", label: "2x por dia", desc: "Manhã e fim de tarde", icon: "sunrise" },
  { id: "every2", label: "A cada 2 dias", desc: "Dia sim, dia não", icon: "calendar" },
  { id: "weekly", label: "Semanal", desc: "Toda segunda de manhã", icon: "calendar-days" },
  { id: "monthly", label: "Mensal", desc: "Todo dia 1º", icon: "calendar-range" },
];

function cadenceToState(sch) {
  if (!sch || sch.enabled === false) return { freq: "off", am: "08:00", pm: "18:00" };
  const c = sch.cadence || {};
  const am = (c.times && c.times[0]) || "08:00";
  const pm = (c.times && c.times[1]) || "18:00";
  if (c.type === "every_n_days") return { freq: "every2", am, pm };
  if (c.type === "weekly") return { freq: "weekly", am, pm };
  if (c.type === "monthly") return { freq: "monthly", am, pm };
  if (c.type === "daily" && (c.times || []).length >= 2) return { freq: "twice", am, pm };
  return { freq: "daily", am, pm };
}

function stateToConfig({ freq, am, pm }, periodo) {
  if (freq === "off") return { enabled: false, periodo, cadence: { type: "daily", times: [am] } };
  const map = {
    daily: { type: "daily", times: [am] },
    twice: { type: "daily", times: [am, pm] },
    every2: { type: "every_n_days", n: 2, times: [am] },
    weekly: { type: "weekly", weekday: 1, times: [am] },
    monthly: { type: "monthly", monthday: 1, times: [am] },
  };
  return { enabled: true, periodo, cadence: map[freq] };
}

function ScheduleModal({ onClose }) {
  const [st, setSt] = useState({ freq: "off", am: "08:00", pm: "18:00" });
  const [periodo, setPeriodo] = useState("diario");
  const [saving, setSaving] = useState(false);
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    window.VendusCopilot.getSchedule().then((sch) => {
      setSt(cadenceToState(sch));
      setPeriodo(sch.periodo || "diario");
      setLoaded(true);
    });
  }, []);

  async function salvar() {
    setSaving(true);
    const r = await window.VendusCopilot.saveSchedule(undefined, stateToConfig(st, periodo));
    setSaving(false);
    if (!r.ok) {
      window.vendusToast && window.vendusToast(r.error || "Não consegui salvar.", { icon: "alert-triangle", tone: "danger" });
      return;
    }
    window.vendusToast && window.vendusToast("Agendamento salvo!", { icon: "check-check", tone: "success" });
    onClose();
  }

  return (
    <div className="report-backdrop" onClick={onClose}>
      <div className="modal-sheet" onClick={(e) => e.stopPropagation()}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 4 }}>
          <div>
            <Eyebrow>Automação · IA</Eyebrow>
            <h2 className="page-title" style={{ fontSize: 20 }}>Quando analisar?</h2>
          </div>
          <Btn variant="ghost" iconOnly onClick={onClose}><I name="x" size={16} /></Btn>
        </div>
        <p className="text-muted" style={{ fontSize: 13, marginBottom: 16 }}>
          Escolha com que frequência o Copiloto refaz a análise sozinho. Você sempre pode rodar na hora com "Analisar agora".
        </p>

        {!loaded ? (
          <div className="text-muted" style={{ fontSize: 13 }}>Carregando…</div>
        ) : (
          <>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {FREQS.map((f) => (
                <button key={f.id} onClick={() => setSt((s) => ({ ...s, freq: f.id }))}
                  className="sched-option" data-active={st.freq === f.id}>
                  <div className="sched-ic"><I name={f.icon} size={16} /></div>
                  <div style={{ flex: 1, textAlign: "left" }}>
                    <div style={{ fontWeight: 600, fontSize: 13.5 }}>{f.label}</div>
                    <div className="text-faint" style={{ fontSize: 11.5 }}>{f.desc}</div>
                  </div>
                  {st.freq === f.id && <I name="check" size={16} className="text-orange" />}
                </button>
              ))}
            </div>

            {st.freq !== "off" && (
              <div style={{ display: "flex", gap: 16, marginTop: 16, flexWrap: "wrap" }}>
                <label style={{ fontSize: 12.5 }}>
                  <div className="text-muted" style={{ marginBottom: 4 }}>Horário da manhã</div>
                  <select className="input" value={st.am} onChange={(e) => setSt((s) => ({ ...s, am: e.target.value }))} style={{ width: 120 }}>
                    {HORAS.map((h) => <option key={h} value={h}>{h}</option>)}
                  </select>
                </label>
                {st.freq === "twice" && (
                  <label style={{ fontSize: 12.5 }}>
                    <div className="text-muted" style={{ marginBottom: 4 }}>Horário da tarde</div>
                    <select className="input" value={st.pm} onChange={(e) => setSt((s) => ({ ...s, pm: e.target.value }))} style={{ width: 120 }}>
                      {HORAS_TARDE.map((h) => <option key={h} value={h}>{h}</option>)}
                    </select>
                  </label>
                )}
                <label style={{ fontSize: 12.5 }}>
                  <div className="text-muted" style={{ marginBottom: 4 }}>Período analisado</div>
                  <select className="input" value={periodo} onChange={(e) => setPeriodo(e.target.value)} style={{ width: 130 }}>
                    <option value="diario">Diário</option>
                    <option value="semanal">Semanal</option>
                  </select>
                </label>
              </div>
            )}

            <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 22 }}>
              <Btn variant="ghost" onClick={onClose}>Cancelar</Btn>
              <Btn variant="primary" onClick={salvar} disabled={saving}>
                <I name="check" size={14} /> {saving ? "Salvando…" : "Salvar"}
              </Btn>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

/* ===================== CONFIGURAÇÕES DA IA ===================== */
const TONS = [
  ["direto", "Direto", "Vai direto ao ponto, frases curtas."],
  ["cordial", "Cordial", "Equilibrado e amigável (padrão)."],
  ["detalhado", "Detalhado", "Explica mais o porquê de cada coisa."],
];
function AIConfigPage({ store }) {
  const [scheduleOpen, setScheduleOpen] = useState(false);
  const [tom, setTom] = useState("cordial");
  const conectado = !!(store && store.connected);
  useEffect(() => { window.VendusAuth && window.VendusAuth.getTom && window.VendusAuth.getTom().then(setTom); }, []);
  async function salvarTom(t) {
    setTom(t);
    const r = window.VendusAuth && window.VendusAuth.setTom ? await window.VendusAuth.setTom(t) : { ok: false };
    window.vendusToast && window.vendusToast(r && r.ok ? "Tom da IA atualizado." : "Não consegui salvar.", { icon: r && r.ok ? "check-check" : "alert-triangle", tone: r && r.ok ? "success" : "danger" });
  }
  const fontes = [
    { nome: conectado ? (MK_NOME[store.marketplace] || "Mercado Livre") : "Mercado Livre", ok: conectado },
    { nome: "Anúncios (Ads)", ok: conectado },
    { nome: "Estoque", ok: conectado },
    { nome: "Pedidos", ok: conectado },
  ];
  const skills = ["Desempenho de vendas", "Margem e rentabilidade", "Anúncios (Ads)", "Conteúdo dos anúncios", "Qualidade da loja", "Atendimento (mensagens)"];

  return (
    <div className="page fade-in">
      <div className="page-header">
        <div>
          <Eyebrow>IA Vendus · Configurações</Eyebrow>
          <h1 className="page-title">Configurações da IA</h1>
          <div className="page-sub">Fontes, frequência e tom das análises do Piloto e do Modo Estratégico</div>
        </div>
      </div>

      <Card style={{ marginBottom: 16 }}>
        <SectionTitle title="Fontes de dados" sub="De onde a IA puxa as informações da sua loja" />
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 10 }}>
          {fontes.map((f) => <Chip key={f.nome} tone={f.ok ? "success" : "default"} leading={<I name={f.ok ? "check" : "plug"} size={10} />}>{f.nome}</Chip>)}
        </div>
        {!conectado && <div className="text-faint" style={{ fontSize: 12, marginTop: 10 }}>Conecte sua loja em Configurações → Integrações para a IA analisar dados reais.</div>}
      </Card>

      <Card style={{ marginBottom: 16 }}>
        <div style={{ display: "flex", alignItems: "flex-start", gap: 10 }}>
          <div style={{ flex: 1 }}><SectionTitle title="Frequência das análises" sub="Quando o Piloto roda sozinho (sem você clicar)" /></div>
          <Btn variant="secondary" onClick={() => setScheduleOpen(true)}><I name="calendar-clock" size={14} /> Configurar</Btn>
        </div>
      </Card>

      <Card style={{ marginBottom: 16 }}>
        <SectionTitle title="Tom da IA" sub="Como o Copiloto fala com você" />
        <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 10 }}>
          {TONS.map(([k, l, d]) => (
            <label key={k} style={{ display: "flex", gap: 10, alignItems: "flex-start", cursor: "pointer" }}>
              <input type="radio" name="tomia" checked={tom === k} onChange={() => salvarTom(k)} style={{ marginTop: 3, width: 16, height: 16 }} />
              <span><span style={{ fontWeight: 600, fontSize: 13 }}>{l}</span><span className="text-faint" style={{ fontSize: 12, display: "block" }}>{d}</span></span>
            </label>
          ))}
        </div>
      </Card>

      <Card>
        <SectionTitle title="Skills ativas" sub="As análises que a IA executa" />
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 10 }}>
          {skills.map((s) => <Chip key={s} tone="default" leading={<I name="check" size={10} />}>{s}</Chip>)}
        </div>
      </Card>

      {scheduleOpen && <ScheduleModal onClose={() => setScheduleOpen(false)} />}
    </div>
  );
}

window.VendusCopiloto = { CopilotPage, AIConfigPage };