<?php
// views/pages/agente-disparo.php
require_once __DIR__ . '/../../app/csrf.php';
require_once __DIR__ . '/components/tutorial.php';
$csrf = htmlspecialchars(csrf_token(), ENT_QUOTES, 'UTF-8');

/**
 * ===== Valores Padrão (seed) =====
 * Edite aqui os textos iniciais que aparecerão preenchidos.
 */
$defaultPrompt = <<<TXT
🎯 Agente de Disparos:
Você é um agente de disparo automático.
Sua única tarefa é gerar *uma saudação curta, natural e humana* para iniciar uma conversa com um lead.

---

💬 Regras de mensagem:
- Escolha *apenas uma* saudação por vez.
- A saudação deve parecer espontânea, natural e diferente em cada envio.
- *Não* use “bom dia”, “boa tarde” ou “boa noite”.
- *Não adicione* nada além da saudação (sem assinatura, sem texto extra).
- Use variações simples e neutras.

Escolha *aleatoriamente* entre as opções abaixo (ou pequenas variações delas):
- "Olá, tudo bem?"
- "Olá, como vai?"
- "Oi, tudo certo?"
- "Olá, tudo bem?"
- "Oi, tudo bom?"
- "Olá 👋"
- "Oi, tudo jóia?"

---

Use a ferramenta Date & Time sempre que precisar saber qual dia é hoje.

📦 Formato obrigatório de resposta:
Responda *exclusivamente* em JSON, neste formato exato:

{
  "mensagem": "Oi, tudo certo?"
}

⚠️ Não adicione texto fora do JSON.
⚠️ Não explique o que está fazendo.
Apenas devolva o JSON conforme o exemplo acima, com a saudação escolhida.
TXT;

$defaultMessage = <<<TXT
Oi, tudo bem? 😊
TXT;
?>
<!-- Em qualquer lugar do HTML: -->
<div class="mb-4 sm:mb-6">
  <?= tutorial_component([
    'id'        => 'agente-disparos',
    'title'     => 'Como usar Agente de Disparos',
    'button'    => 'Ver tutorial Agente de Disparos',
    'video'     => 'https://youtu.be/5-Pz2wZKphg',
    'spotlight' => true
  ]); ?>
</div>

<div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6">
  <div class="flex items-center justify-between mb-4">
    <div>
      <h2 class="text-xl font-semibold">Agente de Disparo</h2>
      <p class="text-sm text-gray-500 dark:text-gray-400">
        Defina o prompt base e uma mensagem padrão para o agente de disparos/broadcast.
      </p>
    </div>
    <span id="saveBadge" class="hidden text-xs px-2 py-1 rounded bg-emerald-100 text-emerald-800">Salvo</span>
  </div>

  <div class="space-y-6">
    <!-- Prompt -->
    <div class="space-y-2">
      <label for="prompt" class="block text-sm font-medium">Prompt do agente de disparo</label>
      <textarea id="prompt" rows="10"
        class="w-full rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-950 px-3 py-2 outline-none focus:ring-2 focus:ring-indigo-500"
        placeholder="Escreva as instruções do agente de disparo (tom, limites de frequência, CTAs, exemplos de mensagens, proibições, etc.)."><?= htmlspecialchars($defaultPrompt, ENT_QUOTES, 'UTF-8') ?></textarea>
      <div class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
        <div><span id="countPrompt">0</span>/8000 caracteres</div>
      </div>
      <p class="text-xs text-gray-500 dark:text-gray-400">
        Dica: seja explícito sobre tom, limites de envio e conteúdo proibido. Ex.: “Mensagens curtas,
        educadas, sem caps lock, inclua CTA claro; nunca encaminhe dados sensíveis; respeite opt-out.”
      </p>
    </div>

    <!-- Mensagem Padrão -->
    <div class="space-y-2">
      <label for="message" class="block text-sm font-medium">Mensagem Padrão</label>
      <textarea id="message" rows="4"
        class="w-full rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-950 px-3 py-2 outline-none focus:ring-2 focus:ring-indigo-500"
        placeholder="Defina aqui uma mensagem padrão para ser enviada quando o agente não gerar mensagem personalizada."><?= htmlspecialchars($defaultMessage, ENT_QUOTES, 'UTF-8') ?></textarea>
      <div class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
        <div><span id="countMsg">0</span>/4000 caracteres</div>
        <div class="flex gap-2">
          <button id="btnReset" class="rounded-lg border border-gray-300 dark:border-gray-700 px-3 py-1.5">Limpar</button>
          <button id="btnSave" class="rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-1.5">Salvar</button>
        </div>
      </div>
      <p class="text-xs text-gray-500 dark:text-gray-400">
        Sugestão: inclua uma saudação, apresentação curta, objetivo e CTA. Ex.: “Olá, tudo bem? Sou da {{empresa}}.
        Gostaria de lhe apresentar uma solução. Posso te enviar mais detalhes ou preferir falar por aqui?”
      </p>
    </div>
  </div>
</div>

<script>
const API = 'api/agent_disparo.php';
const taPrompt = document.getElementById('prompt');
const taMsg    = document.getElementById('message');
const countPrompt = document.getElementById('countPrompt');
const countMsg    = document.getElementById('countMsg');
const btnSave  = document.getElementById('btnSave');
const btnReset = document.getElementById('btnReset');
const saveBadge = document.getElementById('saveBadge');
const CSRF = '<?= $csrf ?>';

// Defaults (vindos do PHP), preservam quebras corretamente
const DEFAULT_PROMPT  = <?= json_encode($defaultPrompt,  JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;
const DEFAULT_MESSAGE = <?= json_encode($defaultMessage, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;

function setCounts(){
  countPrompt.textContent = (taPrompt.value || '').length;
  countMsg.textContent    = (taMsg.value || '').length;
}
function showSaved(){
  saveBadge.classList.remove('hidden');
  setTimeout(()=>saveBadge.classList.add('hidden'), 1800);
}
async function fetchJSON(url, opts){
  const r = await fetch(url, opts);
  const t = await r.text();
  try { const j = JSON.parse(t); if(!r.ok) throw j; return j; }
  catch(e){ return {ok:false, error:(e && e.error) || t || 'Erro'} }
}
async function saveData(promptVal, messageVal){
  const fd = new FormData();
  fd.append('csrf', CSRF);
  fd.append('prompt',  promptVal);
  fd.append('message', messageVal);
  return await fetchJSON(`${API}?action=save`, { method:'POST', body:fd, credentials:'same-origin' });
}
function isEmptyValue(v){
  return !(typeof v === 'string' && v.trim().length > 0);
}

async function loadData(){
  // Exibe os defaults de cara (já estão no HTML) e tenta carregar do backend
  const d = await fetchJSON(`${API}?action=get`, { credentials: 'same-origin' });

  if (d.ok) {
    const hasPrompt  = !isEmptyValue(d.prompt);
    const hasMessage = !isEmptyValue(d.message);

    if (hasPrompt || hasMessage) {
      // Se backend já tem algo salvo, aplica o que existir (mantendo default no que vier vazio)
      if (hasPrompt)  taPrompt.value = d.prompt;
      if (hasMessage) taMsg.value    = d.message;
      setCounts();
      return;
    }
    // Se chegou aqui: OK porém vazio -> primeira visita. Salva automaticamente os defaults.
    const res = await saveData(taPrompt.value || DEFAULT_PROMPT, taMsg.value || DEFAULT_MESSAGE);
    if (res.ok) showSaved();
    setCounts();
  } else {
    // Falha no GET: mantém defaults visuais e não quebra a tela
    // (poderia opcionalmente alertar)
    setCounts();
  }
}

btnSave.addEventListener('click', async ()=>{
  btnSave.disabled = true; btnSave.textContent = 'Salvando...';
  const d = await saveData(taPrompt.value, taMsg.value);
  btnSave.disabled = false; btnSave.textContent = 'Salvar';
  if (d.ok){ showSaved(); } else { alert(d.error || 'Falha ao salvar'); }
});

btnReset.addEventListener('click', ()=>{
  if ((taPrompt.value || taMsg.value) && !confirm('Limpar os campos atuais?')) return;
  taPrompt.value = DEFAULT_PROMPT;
  taMsg.value    = DEFAULT_MESSAGE;
  setCounts();
});

taPrompt.addEventListener('input', setCounts);
taMsg.addEventListener('input', setCounts);

loadData();
</script>
