@page "/docs/fluxos"
@model Nalu.Web.Pages.Docs.FluxosModel
@{
    ViewData["Title"] = "Fluxos — NaLU AI Docs";
    ViewData["Description"] = "Fluxos de integração NaLU AI com n8n, Make, chatbots e máquinas de estado.";
}

<section class="bg-gradient-to-b from-slate-50 to-white pt-16 pb-8">
    <div class="max-w-3xl mx-auto px-4 sm:px-6">
        <div class="text-xs font-semibold text-nalu-600 uppercase tracking-wide mb-3">
            <a href="/docs" class="hover:underline">Docs</a> / Fluxos
        </div>
        <h1 class="text-3xl font-extrabold text-gray-900 mb-2">Fluxos de integração</h1>
        <p class="text-gray-500">Padrões recomendados para encadear validadores em conversas reais.</p>
    </div>
</section>

<section class="py-10 bg-white">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 space-y-12">

        <!-- Fluxo 1: coleta básica -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-1">Fluxo 1 — Coleta de dados cadastrais</h2>
            <p class="text-sm text-gray-500 mb-4">Padrão para chatbots de cadastro: nome → CPF → telefone → email.</p>
            <div class="bg-slate-900 rounded-xl p-5 font-mono text-sm text-slate-300 overflow-x-auto leading-relaxed">
<pre>1. POST /v1/extract/name
   → obtained: true  → salvar, seguir para CPF
   → obtained: false → usar suggestion_to_agent, perguntar de novo

2. POST /v1/extract/cpf
   → obtained: true, certain: true  → salvar, seguir para telefone
   → obtained: true, certain: false → confirmar com usuário
   → obtained: false → usar suggestion_to_agent

3. POST /v1/extract/phone
   → obtained: true → salvar, seguir para email
   → obtained: false → suggestion_to_agent

4. POST /v1/extract/email
   → obtained: true → cadastro completo ✓
   → obtained: false → suggestion_to_agent

Custo total por cadastro: 12 créditos (4 × 3 cr.)</pre>
            </div>
        </div>

        <!-- Fluxo 2: negociação -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-1">Fluxo 2 — Negociação de parcelas</h2>
            <p class="text-sm text-gray-500 mb-4">Resolve o "bug das 48 parcelas" usando validate_reply para interpretar contrapropostas.</p>
            <div class="bg-slate-900 rounded-xl p-5 font-mono text-sm text-slate-300 overflow-x-auto leading-relaxed">
<pre>1. Agente oferece: "Posso parcelar em 20x de R$100. Topa?"

2. POST /v1/extract/reply
   { agent_message: "...", user_reply: "Bora em 48?" }

   → reply_type: "counter_proposal"
     → extracted_value: "48", value_type: "quantity"
     → agente avalia se pode oferecer 48x

   → reply_type: "confirmation"
     → prosseguir com fechamento

   → reply_type: "rejection"
     → oferecer alternativa

   → reply_type: "handoff"
     → POST /v1/extract/handoff para confirmar urgência
     → transferir para humano

   → reply_type: "cancel"
     → POST /v1/extract/cancel-intent para classificar
     → acionar fluxo de retenção

Custo: 5 créditos por análise de resposta</pre>
            </div>
        </div>

        <!-- Fluxo 3: n8n/Make -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-1">Fluxo 3 — n8n / Make / Zapier</h2>
            <p class="text-sm text-gray-500 mb-4">Use um nó HTTP Request apontando para o endpoint desejado.</p>
            <div class="bg-slate-900 rounded-xl p-5 font-mono text-sm text-slate-300 overflow-x-auto leading-relaxed">
<pre># n8n — nó "HTTP Request"
Method:  POST
URL:     https://api.naluai.dev/v1/extract/cpf
Headers:
  Authorization: Bearer {{ $env.NALU_API_KEY }}
  Content-Type:  application/json
Body (JSON):
{
  "agent_input": "{{ $json.agent_question }}",
  "user_input":  "{{ $json.user_message }}",
  "language":    "pt-BR"
}

# Próximo nó: IF
# Condição: {{ $json.obtained }} === true
#   → ramo OK: salvar extracted_value
#   → ramo NOK: enviar suggestion_to_agent ao usuário</pre>
            </div>
        </div>

        <!-- Fluxo 4: padrão de retry -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-1">Fluxo 4 — Padrão de re-pergunta</h2>
            <p class="text-sm text-gray-500 mb-4">Como usar <code class="bg-slate-100 px-1 rounded text-xs">suggestion_to_agent</code> corretamente.</p>
            <div class="bg-slate-900 rounded-xl p-5 font-mono text-sm text-slate-300 overflow-x-auto leading-relaxed">
<pre>MAX_RETRIES = 3
retries = 0

loop:
  response = POST /v1/extract/{validator}
             { agent_input, user_input: coleta_atual, agent_context }

  if response.obtained:
    → usar extracted_value, sair do loop

  retries++
  if retries >= MAX_RETRIES:
    → escalar para humano ou abandonar coleta

  # Usar sugestão do NaLU como próxima mensagem do agente
  proxima_mensagem = response.suggestion_to_agent
  coleta_atual = aguardar_resposta_usuario(proxima_mensagem)</pre>
            </div>
        </div>

        <!-- Dicas -->
        <div class="bg-blue-50 border border-blue-100 rounded-xl px-5 py-4">
            <div class="font-semibold text-blue-800 mb-2">Boas práticas</div>
            <ul class="text-sm text-blue-700 space-y-1">
                <li>• Sempre envie <code class="bg-blue-100 px-1 rounded text-xs">agent_context</code> — melhora muito as sugestões contextuais</li>
                <li>• Limite 3 tentativas por campo antes de escalar para humano</li>
                <li>• Use <code class="bg-blue-100 px-1 rounded text-xs">certain: false</code> para pedir confirmação, não para bloquear o fluxo</li>
                <li>• validate_reply pode retornar handoff ou cancel — sempre trate esses casos</li>
            </ul>
        </div>

        <div class="border-t border-gray-100 pt-6 flex gap-4">
            <a href="/docs" class="text-nalu-600 text-sm hover:underline">← Voltar para Docs</a>
            <a href="/docs/erros" class="text-nalu-600 text-sm hover:underline">Erros →</a>
        </div>
    </div>
</section>
