// ESTÚDIO — Página "Agentes": um agente pré-configurado por função do trabalho.
// Cada um recebe um tema e entrega pronto (via window.claude.complete).
// Exporta window.Agentes.
(function () {
  const { useState, useRef } = React;
  const { PageHead } = window.UI;
  const h = React.createElement;

  const VOZ = "Você trabalha para Lorenna Guerra (@lorennagn): criadora, mãe e comunicadora. " +
    "Público: mulheres 25-40, criadoras e empreendedoras iniciantes, muitas neurodivergentes. " +
    "Pilares: criação sustentável (anti-burnout), IA no dia a dia, bastidores de mãe atípica, repertório/referências e área de membros. " +
    "Tom de voz: direta, calorosa, sem jargão, como quem senta do seu lado. Honestidade acima de estética, processo acima de perfeição. " +
    "NUNCA use as palavras/ideias: 'hustle', 'não tem desculpa', 'só depende de você', 'guru', 'fórmula mágica', 'resultado garantido'. " +
    "Escreva sempre em português do Brasil. Entregue o resultado PRONTO PARA USAR, sem pedir mais informações e sem explicar o que você fez.";

  const AGENTES = [
    { id: "pesquisa", nome: "Pesquisa", emoji: "🔎", cor: "#6FA8D6",
      tagline: "Levanta ângulos, dados e o que já existe sobre o tema",
      entrega: "Resumo do tema · 5 ângulos originais · perguntas que a audiência faz · dados/fatos citáveis · o que evitar",
      ph: "Ex: rotina de gravação em lote para mães criadoras",
      system: VOZ + " Você é AGENTE DE PESQUISA. Dado um tema, entregue: (1) um resumo em 2-3 linhas do que é e por que importa pro público dela; (2) 5 ângulos originais e não óbvios pra abordar; (3) 4 perguntas reais que a audiência faz sobre isso; (4) 3 dados, fatos ou referências citáveis (se não tiver certeza, marque como '[confirmar]'); (5) 2 clichês a evitar. Use títulos e bullets." },
    { id: "conteudo", nome: "Escrever conteúdo", emoji: "✍️", cor: "#E8538D",
      tagline: "Roteiro completo de Reel, carrossel ou vídeo",
      entrega: "Gancho · desenvolvimento cena a cena (ou slide a slide) · CTA · sugestão de trilha/visual",
      ph: "Ex: como uso IA pra roteirizar uma semana de conteúdo — formato Reel",
      system: VOZ + " Você é AGENTE DE ROTEIRO. Dado um tema (e formato, se informado), entregue um roteiro pronto: (1) 3 opções de gancho pros primeiros 3 segundos; (2) o desenvolvimento cena a cena (Reel/vídeo) ou slide a slide (carrossel), com o texto exato de cada parte; (3) um CTA alinhado ao objetivo; (4) sugestão de trilha/áudio e ideia visual. Seja específico e escreva o texto que ela vai realmente falar/mostrar." },
    { id: "legendas", nome: "Escrever legendas", emoji: "💬", cor: "#E29B57", blocks: true,
      tagline: "Legenda que engaja e vende sem parecer venda",
      entrega: "3 versões (curta, média AIDA, storytelling) + hashtags — cada uma pronta pra copiar",
      ph: "Ex: legenda pra carrossel sobre bloqueio criativo",
      system: VOZ + " Você é AGENTE DE LEGENDAS. Dado o tema/conteúdo, entregue blocos de legenda prontos pra copiar e colar. " +
        "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 pronto pra colar (sem comentários seus). " +
        "Entregue exatamente estes blocos, nesta ordem: (1) rótulo 'Versão curta' — legenda curta e direta com CTA; (2) rótulo 'Versão média (AIDA)' — legenda média em estrutura AIDA com CTA; (3) rótulo 'Versão storytelling' — legenda em narrativa com CTA; (4) rótulo 'Hashtags de nicho' — 8 a 12 hashtags; (5) rótulo 'Hashtags amplas' — 8 a 12 hashtags. Cada legenda deve abrir com um gancho forte na primeira linha." },
    { id: "ganchos", nome: "Ganchos & títulos", emoji: "🎣", cor: "#9E8BCB",
      tagline: "Aberturas que seguram o dedo e títulos de vídeo",
      entrega: "10 ganchos de Reel/TikTok · 6 títulos de YouTube · 4 capas de carrossel",
      ph: "Ex: tema criação sustentável sem burnout",
      system: VOZ + " Você é AGENTE DE GANCHOS. Dado um tema, entregue: (1) 10 ganchos de 1ª linha pra Reel/TikTok (misturando curiosidade, quebra de padrão, contra-intuitivo e identificação); (2) 6 títulos de vídeo de YouTube otimizados pra clique honesto; (3) 4 frases de capa de carrossel. Sem clickbait vazio." },
    { id: "stories", nome: "Stories que vendem", emoji: "💰", cor: "#E8538D",
      tagline: "Sequência de stories que leva à venda",
      entrega: "Sequência de 6-7 telas (gancho→dor→virada→prova→oferta→escassez) com o texto de cada tela e a mecânica",
      ph: "Ex: vender a área de membros / o curso de criação com IA",
      system: VOZ + " Você é AGENTE DE STORIES DE VENDA. Dado o produto/oferta e o tema, entregue uma sequência de 6-7 telas de stories, cada uma com: rótulo da etapa (gancho, dor, virada, prova, oferta, escassez), o texto exato pra colocar na tela e qual figurinha/interação usar (enquete, caixinha, link). Termine com a mecânica de conversão (pra onde mandar). Honesto, sem pressão tóxica." },
    { id: "pautas", nome: "Banco de pautas", emoji: "💡", cor: "#7FB68C",
      tagline: "Ideias de conteúdo organizadas por pilar",
      entrega: "12 pautas divididas pelos pilares · formato sugerido · objetivo de cada uma",
      ph: "Ex: pautas de julho sobre IA e maternidade criativa",
      system: VOZ + " Você é AGENTE DE PAUTAS. Dado um tema ou período, entregue 12 ideias de conteúdo agrupadas pelos pilares dela. Pra cada pauta: título da ideia, formato sugerido (Reel, carrossel, vídeo, story, etc.) e o objetivo (atrair, nutrir, vender, autoridade). Varie os formatos e os objetivos." },
    { id: "repurpose", nome: "Reaproveitar", emoji: "♻️", cor: "#0A66C2",
      tagline: "1 conteúdo vira vários formatos e redes",
      entrega: "Do conteúdo-base: Reel, carrossel, Short YT, TikTok, newsletter, pin e stories",
      ph: "Ex: transformar meu vídeo 'gravar cansada' em vários formatos",
      system: VOZ + " Você é AGENTE DE REAPROVEITAMENTO. Dado um conteúdo-base (tema/vídeo/post), entregue como transformá-lo em: (1) Reel; (2) carrossel; (3) Short de YouTube; (4) TikTok; (5) edição de newsletter (Substack); (6) Pin do Pinterest; (7) sequência curta de stories. Pra cada um, dê o ângulo específico e a 1ª linha/gancho adaptada àquele formato." },
    { id: "membros", nome: "Área de membros", emoji: "⭐", cor: "#9E8BCB",
      tagline: "Estrutura uma aula, template ou material exclusivo",
      entrega: "Título · o que o membro vai aprender · roteiro/estrutura da aula ou material · recurso pra baixar",
      ph: "Ex: aula de edição de Reels no CapCut do zero",
      system: VOZ + " Você é AGENTE DA ÁREA DE MEMBROS. Dado um tema, estruture um material exclusivo e específico: (1) título claro do que será ensinado; (2) a transformação — o que o membro sai sabendo fazer; (3) o roteiro/estrutura passo a passo da aula ou do material; (4) um recurso complementar pra disponibilizar (template, imprimível, checklist, arquivo) com o que ele deve conter. Seja concreto no assunto." },
  ];

  function AgentWork({ agente, onBack }) {
    const { state, actions } = window.STORE.useStore();
    const [tema, setTema] = useState("");
    const [contexto, setContexto] = useState("");
    const [loading, setLoading] = useState(false);
    const [out, setOut] = useState("");
    const [err, setErr] = useState("");
    const [copied, setCopied] = useState(false);
    const [alvo, setAlvo] = useState("__novo");
    const [campo, setCampo] = useState("roteiro");
    const [savedMsg, setSavedMsg] = useState("");

    async function gerar() {
      if (!tema.trim() || loading) return;
      setLoading(true); setErr(""); setOut(""); setCopied(false);
      try {
        const userMsg = "TEMA: " + tema.trim() + (contexto.trim() ? ("\nCONTEXTO (rede, formato, objetivo): " + contexto.trim()) : "");
        const text = await window.claude.complete({
          system: agente.system,
          max_tokens: 2000,
          messages: [{ role: "user", content: userMsg }],
        });
        setOut(text || "");
      } catch (e) {
        setErr("Não consegui gerar agora. Tente de novo em alguns segundos.");
      }
      setLoading(false);
    }
    function copiar() {
      navigator.clipboard && navigator.clipboard.writeText(out);
      setCopied(true); setTimeout(() => setCopied(false), 1600);
    }
    function salvar() {
      if (!out) return;
      if (alvo === "__novo") {
        const titulo = tema.trim().slice(0, 70) || (agente.nome + " — resultado");
        const campoNovo = campo === "resumo" ? "resumo" : "roteiro";
        const id = actions.addConteudo({ titulo, [campoNovo]: out, status: "Roteirizado" });
        setSavedMsg("Criado na Produção ✓");
      } else {
        actions.appendToConteudo(alvo, campo, out);
        const c = state.conteudos.find((x) => x.id === alvo);
        setSavedMsg("Salvo em “" + (c ? c.titulo : "") + "” ✓");
      }
      setTimeout(() => setSavedMsg(""), 2600);
    }

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

    return h("div", { className: "agent-work" },
      h("button", { className: "agent-back", onClick: onBack }, "← Todos os agentes"),
      h("div", { className: "agent-work-head", style: { borderColor: agente.cor } },
        h("span", { className: "agent-ic", style: { background: agente.cor } }, agente.emoji),
        h("div", null,
          h("div", { className: "agent-work-nome" }, agente.nome),
          h("div", { className: "agent-work-tag" }, agente.tagline)
        )
      ),
      h("div", { className: "agent-entrega" }, h("b", null, "Entrega: "), agente.entrega),
      h("label", { className: "agent-label" }, "Tema"),
      h("textarea", { className: "agent-input", value: tema, placeholder: agente.ph, onChange: (e) => setTema(e.target.value), onKeyDown: (e) => { if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) gerar(); } }),
      h("label", { className: "agent-label" }, "Contexto (opcional) — rede, formato, objetivo"),
      h("input", { className: "agent-ctx", value: contexto, placeholder: "Ex: Instagram · Reel · vender a oficina", onChange: (e) => setContexto(e.target.value) }),
      h("div", { className: "agent-run" },
        h("button", { className: "btn-pink", onClick: gerar, disabled: !tema.trim() || loading, style: !loading && tema.trim() ? { background: agente.cor } : undefined }, loading ? "Gerando…" : "✨ Gerar pronto"),
        h("span", { className: "agent-hint" }, "⌘/Ctrl + Enter")
      ),
      err && h("div", { className: "agent-err" }, err),
      loading && h("div", { className: "agent-loading" }, h("span", { className: "agent-spin" }), " O agente está preparando sua entrega…"),
      blocos && blocos.length
        ? h("div", { className: "agent-blocks" }, blocos.map((bl, i) => h(BlocoCopiavel, { key: i, label: bl.label, body: bl.body })))
        : out && h("div", { className: "agent-out" },
            h("div", { className: "agent-out-head" },
              h("span", { className: "agent-out-t" }, "Entrega pronta"),
              h("button", { className: "agent-copy", onClick: copiar }, copied ? "✓ Copiado" : "⧉ Copiar")
            ),
            h("div", { className: "agent-out-body" }, out)
          ),
      out && h("div", { className: "agent-save" },
        h("span", { className: "agent-save-l" }, "💾 Salvar em"),
        h("select", { className: "agent-save-sel", value: alvo, onChange: (e) => setAlvo(e.target.value) },
          h("option", { value: "__novo" }, "+ Novo conteúdo (Produção)"),
          state.conteudos.slice(0, 60).map((c) => h("option", { key: c.id, value: c.id }, c.titulo.slice(0, 50)))
        ),
        h("select", { className: "agent-save-sel", value: campo, onChange: (e) => setCampo(e.target.value) },
          h("option", { value: "roteiro" }, "Conteúdo do post"),
          h("option", { value: "resumo" }, "Ideia / briefing")
        ),
        h("button", { className: "btn-pink sm", onClick: salvar }, "Salvar"),
        savedMsg && h("span", { className: "agent-saved" }, savedMsg)
      )
    );
  }

  function BlocoCopiavel({ 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: "agent-out" },
      h("div", { className: "agent-out-head" },
        h("span", { className: "agent-out-t" }, label),
        h("button", { className: "agent-copy", onClick: cp }, c ? "✓ Copiado" : "⧉ Copiar")
      ),
      h("div", { className: "agent-out-body" }, body)
    );
  }

  function Agentes() {
    const [sel, setSel] = useState(null);
    const agente = AGENTES.find((a) => a.id === sel);
    return h("div", { className: "page narrow" },
      h(PageHead, { titulo: "Agentes", sub: "Um agente pré-configurado por função. Escolha, mande o tema e receba pronto." }),
      agente
        ? h(AgentWork, { agente, onBack: () => setSel(null) })
        : h("div", { className: "agentes-grid" }, AGENTES.map((a) => h("button", { key: a.id, className: "agent-card", style: { "--agent-bg": a.cor + "18", "--agent-bd": a.cor + "3D" }, onClick: () => setSel(a.id) },
            h("span", { className: "agent-ic" }, a.emoji),
            h("div", { className: "agent-nome" }, a.nome),
            h("div", { className: "agent-tag" }, a.tagline),
            h("div", { className: "agent-go", style: { color: a.cor } }, "Abrir agente →")
          )))
    );
  }

  window.Agentes = Agentes;
})();