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

  const VOZ = "Você trabalha para Mariana Cabral, psicóloga e criadora do Clube da Maturidade Emocional. " +
    "Público: mulheres de 25 a 50 anos em desenvolvimento pessoal, que muitas vezes sentem culpa, ansiedade, sobrecarga, dependência emocional e dificuldade de impor limites. " +
    "Tom de voz: acolhedor, elegante, calmo, reflexivo, inteligente, didático e profundo. Conversa de igual para igual, sem jargão, sem autoajuda, sem clichê, sem frases de efeito, sem infantilização. " +
    "Base tudo em psicologia baseada em evidências e experiência clínica, tornando conceitos complexos acessíveis sem perder profundidade. " +
    "NUNCA seja dramática, sensacionalista, agressiva ou infantil. NUNCA prometa cura, não patologize comportamentos comuns, não use gatilhos exagerados nem linguagem de coach. " +
    "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 PLATAFORMAS = ["Instagram (feed)", "Reels / TikTok", "Stories", "YouTube", "Pinterest", "Blog / Substack", "Newsletter"];

  const TOOLS = [
    { id: "legenda", nome: "Escrever legendas", ic: "❝", blocks: true, platforms: PLATAFORMAS,
      entrega: "3 versões (curta, média, reflexiva) + hashtags, adaptadas à plataforma escolhida.",
      ph: "Ex: legenda para o carrossel 'Três verdades sobre maturidade emocional'",
      label: "Tema ou conteúdo do post", area: false,
      system: VOZ + " Você escreve LEGENDAS na voz da Mariana, ADAPTADAS À PLATAFORMA informada em PLATAFORMA: ajuste tamanho, ritmo, uso de quebras de linha e chamada conforme a plataforma (Instagram feed: primeira linha forte + texto editorial; Reels/TikTok: curta e direta; Stories: frases curtas em blocos; YouTube: descrição com contexto; Pinterest: descritiva com palavras-chave; Blog/Substack: introdução editorial mais longa; Newsletter: tom de carta próxima). 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 reflexiva'; (4) rótulo 'Hashtags' com 8 a 12 hashtags de nicho (ou, se a plataforma não usar hashtags, palavras-chave). Cada legenda abre com uma primeira linha que convida à leitura, com elegância." },
    { id: "estruturar", nome: "Estruturar temas", ic: "❖", blocks: true,
      entrega: "Formatos ideais, ângulos, estrutura de conteúdo, CTAs, onde publicar e a que pilar/etapa pertence.",
      ph: "Ex: a culpa que aparece ao impor limites",
      label: "Tema que você quer desenvolver", area: false,
      system: VOZ + " Você é ESTRATEGISTA DE CONTEÚDO da marca. Dado um TEMA, estruture como transformá-lo em conteúdo. Separe CADA bloco com uma linha contendo apenas §§§. A primeira linha de cada bloco é o rótulo; da segunda linha em diante vem o conteúdo. Entregue nesta ordem: (1) 'Formatos recomendados' — 2 a 3 formatos ideais (Reels, carrossel, aula, stories, e-mail) e por quê; (2) 'Ângulos de abordagem' — 3 a 4 recortes possíveis do tema; (3) 'Estrutura sugerida' — o esqueleto do formato principal, parte a parte, com o que dizer em cada parte; (4) 'Ideias de CTA' — 3 CTAs alinhados ao objetivo; (5) 'Onde publicar' — plataformas recomendadas e o objetivo de cada uma; (6) 'Pilar e etapa' — a que pilar da marca e a que etapa do funil (Descoberta, Consideração, Desejo, Conversão, Retenção) o tema pertence. Seja concreta e enxuta." },
  ];

  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 [plat, setPlat] = useState(tool.platforms ? tool.platforms[0] : "");
    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 {
        const userMsg = (tool.id === "revisar" ? "TEXTO:\n" : "TEMA: ") + tema.trim() + (tool.platforms ? ("\nPLATAFORMA: " + plat) : "") + (ctx.trim() ? ("\nCONTEXTO (formato, objetivo, local): " + ctx.trim()) : "");
        const text = await window.claude.complete({ system: tool.system, max_tokens: 2000, messages: [{ role: "user", content: userMsg }] });
        setOut(text || "");
      } catch (e) { setErr("Não consegui gerar agora. Tente novamente em alguns segundos."); }
      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 marca"))
      ),
      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.platforms && h("div", { className: "fer-field" },
        h("label", { className: "field-l" }, "Plataforma"),
        h("select", { className: "input", value: plat, onChange: (e) => setPlat(e.target.value) }, tool.platforms.map((p) => h("option", { key: p }, p)))
      ),
      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 · identificação · gravar em casa", 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 cuidado…"),
      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: "Escreva legendas na voz da marca por plataforma e estruture temas em conteúdo — pronto para usar." }),
      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.MC_Ferramentas = Ferramentas;
})();