// CENTRAL DA MARCA — Sanvi Activewear · Ferramentas funcionais (via window.claude.complete).
// Roteiros · Stories · Legendas · Revisar textos · Planejar captações · Banco de hooks.
// Exporta window.SV_Ferramentas
(function () {
  const { useState } = React;
  const h = React.createElement;
  const { PageHead } = window.SV_UI;

  const VOZ = "Você trabalha para a Sanvi Activewear, marca de roupa fitness fundada pela Sabrina Sanches (@sabrinasanchees), influencer premiada como a mais lembrada da cidade. A Sanvi não vende só roupa: vende um estilo de vida ativo, leve e saudável. " +
    "Público: mulheres que treinam ou querem começar a se mover, de corpos e rotinas variados, que buscam conforto, autoestima e peças bonitas para o dia a dia ativo. " +
    "Tom de voz: energético, acolhedor, confiante, moderno, próximo e motivador. Fala de igual para igual, com leveza e verdade. " +
    "NUNCA reforce padrão de corpo único, culpa estética, pressão para emagrecer, comparação ou linguagem vulgar. Celebre corpo real, constância (não perfeição) e movimento do jeito de cada uma. " +
    "Sempre que fizer sentido, valorize conforto, caimento, tecido que não marca e versatilidade das peças. Considere collabs com a Sabrina e a parceria com a Agência Logue quando o contexto pedir. " +
    "Escreva sempre em português do Brasil e entregue o resultado PRONTO PARA USAR, sem pedir mais informações e sem explicar o que você fez.";

  const TOOLS = [
    { id: "stories", nome: "Criar stories", ic: "❏", entrega: "Sequência de 6-7 telas (gancho → prova → convite) com texto e interação de cada tela.",
      ph: "Ex: sequência de stories aquecendo para a live provador com a Sabrina",
      label: "Tema ou objetivo", area: false,
      system: VOZ + " Você cria SEQUÊNCIAS DE STORIES. Dado o tema/objetivo, entregue uma sequência de 6 a 7 telas, cada uma com: rótulo da etapa (gancho, identificação, bastidor, prova/try-on, convite, encerramento), o texto exato para colocar na tela e a interação sugerida (enquete, caixinha, contagem regressiva, link/sticker de produto). Termine indicando para onde levar a pessoa. Energético e sem pressão." },
    { id: "legenda", nome: "Escrever legendas", ic: "❝", blocks: true, entrega: "3 versões (curta, média, inspiradora) + hashtags prontas para copiar.",
      ph: "Ex: legenda para o carrossel '3 looks Sanvi para 3 tipos de treino'",
      label: "Tema ou conteúdo do post", area: false,
      system: VOZ + " Você escreve LEGENDAS. Entregue blocos prontos para copiar. Separe CADA bloco com uma linha contendo apenas §§§. A primeira linha de cada bloco é o rótulo; da segunda linha em diante vem APENAS o texto final. Entregue nesta ordem: (1) rótulo 'Versão curta'; (2) rótulo 'Versão média'; (3) rótulo 'Versão inspiradora'; (4) rótulo 'Hashtags' com 8 a 12 hashtags de moda fitness / estilo de vida ativo. Cada legenda abre com uma primeira linha que puxa a leitura, com energia e verdade." },
  ];

  function Bloco({ label, body }) {
    const [c, setC] = useState(false);
    function cp() { navigator.clipboard && navigator.clipboard.writeText(body); setC(true); setTimeout(() => setC(false), 1600); }
    return h("div", { className: "fer-out" },
      h("div", { className: "fer-out-h" }, h("span", { className: "fer-out-l" }, label), h("button", { className: "fer-copy" + (c ? " ok" : ""), onClick: cp }, c ? "✓ Copiado" : "⧉ Copiar")),
      h("div", { className: "fer-text" }, body)
    );
  }

  function Panel({ tool }) {
    const [tema, setTema] = useState("");
    const [ctx, setCtx] = useState("");
    const [loading, setLoading] = useState(false);
    const [out, setOut] = useState("");
    const [err, setErr] = useState("");
    const [copied, setCopied] = useState(false);

    async function gerar() {
      if (!tema.trim() || loading) return;
      setLoading(true); setErr(""); setOut(""); setCopied(false);
      try {
        if (!window.claude || typeof window.claude.complete !== "function") {
          throw new Error("A IA está disponível quando você abre a Central pelo link oficial. Se você abriu um arquivo baixado, use o link da central para gerar conteúdo.");
        }
        const userMsg = (tool.id === "revisar" ? "TEXTO:\n" : "TEMA: ") + tema.trim() + (ctx.trim() ? ("\nCONTEXTO (formato, objetivo, local): " + ctx.trim()) : "");
        const text = await window.claude.complete({ model: "claude-sonnet-4-5", system: tool.system, max_tokens: 2000, messages: [{ role: "user", content: userMsg }] });
        if (!text || !String(text).trim()) throw new Error("A resposta veio vazia. Tente de novo.");
        setOut(String(text));
      } catch (e) {
        const msg = e && e.message ? e.message : String(e);
        setErr(/rate|limit|429/i.test(msg) ? "Muitas gerações seguidas. Espere alguns segundos e tente de novo." : msg);
      }
      setLoading(false);
    }
    function copiar() { navigator.clipboard && navigator.clipboard.writeText(out); setCopied(true); setTimeout(() => setCopied(false), 1600); }

    const blocos = tool.blocks && out
      ? out.split(/^\s*§§§\s*$/m).map((b) => b.trim()).filter(Boolean).map((b) => { const nl = b.indexOf("\n"); return nl === -1 ? { label: "Resultado", body: b } : { label: b.slice(0, nl).replace(/[*#:]/g, "").trim(), body: b.slice(nl + 1).trim() }; })
      : null;

    return h("div", { className: "fer-panel" },
      h("div", { className: "fer-panel-h" },
        h("span", { className: "fer-panel-ic" }, tool.ic),
        h("div", null, h("div", { className: "fer-panel-t" }, tool.nome), h("div", { className: "fer-panel-s" }, "Pronto para usar, na voz da Sanvi"))
      ),
      h("div", { className: "fer-entrega" }, "Entrega: " + tool.entrega),
      h("div", { className: "fer-field" },
        h("label", { className: "field-l" }, tool.label),
        h("textarea", { className: "input area", style: tool.area ? { minHeight: 150 } : { minHeight: 70 }, placeholder: tool.ph, value: tema, onChange: (e) => setTema(e.target.value), onKeyDown: (e) => { if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) gerar(); } })
      ),
      tool.id !== "revisar" && h("div", { className: "fer-field" },
        h("label", { className: "field-l" }, "Contexto (opcional) — formato, objetivo, local"),
        h("input", { className: "input", placeholder: "Ex: Reels · desejo de produto · gravar no estúdio", value: ctx, onChange: (e) => setCtx(e.target.value) })
      ),
      h("div", { className: "fer-run" },
        h("button", { className: "btn btn-pri", onClick: gerar, disabled: !tema.trim() || loading }, loading ? "Gerando…" : "✦ Gerar"),
        h("span", { className: "fer-hint" }, "⌘/Ctrl + Enter")
      ),
      err && h("div", { className: "fer-err" }, err),
      loading && h("div", { className: "fer-loading" }, h("span", { className: "spin" }), " Preparando com energia…"),
      blocos && blocos.length ? h("div", { className: "fer-blocks" }, blocos.map((b, i) => h(Bloco, { key: i, label: b.label, body: b.body })))
        : out && h("div", { className: "fer-out" },
            h("div", { className: "fer-out-h" }, h("span", { className: "fer-out-l" }, "Resultado"), h("button", { className: "fer-copy" + (copied ? " ok" : ""), onClick: copiar }, copied ? "✓ Copiado" : "⧉ Copiar")),
            h("div", { className: "fer-text" }, out)
          )
    );
  }

  function Ferramentas() {
    const [sel, setSel] = useState(TOOLS[0].id);
    const tool = TOOLS.find((t) => t.id === sel);
    return h("div", { className: "page" },
      h(PageHead, { eyebrow: "Recursos", titulo: "Ferramentas", sub: "Crie roteiros, stories e legendas, revise textos e planeje captações — sempre na voz da Sanvi." }),
      h("div", { className: "fer" },
        h("div", { className: "fer-tools" }, TOOLS.map((t) => h("button", { key: t.id, className: "fer-tool" + (sel === t.id ? " on" : ""), onClick: () => setSel(t.id) },
          h("span", { className: "fer-tool-ic" }, t.ic),
          h("div", null, h("div", { className: "fer-tool-n" }, t.nome), h("div", { className: "fer-tool-d" }, t.entrega.split(":")[0]))
        ))),
        h(Panel, { key: sel, tool })
      )
    );
  }

  window.SV_Ferramentas = Ferramentas;
})();