@page "/docs/mcp"
@model Nalu.Web.Pages.Docs.McpModel
@{
    ViewData["Title"] = "MCP Server — NALU AI Docs";
    ViewData["Description"] = "Integre NALU AI com Claude Code, Cursor e qualquer cliente MCP via JSON-RPC 2.0.";
}

<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> / MCP Server
        </div>
        <h1 class="text-3xl font-extrabold text-gray-900 mb-2">MCP Server</h1>
        <p class="text-gray-500">Use os validadores NALU como ferramentas nativas no Claude Code, Cursor e qualquer cliente MCP.</p>
    </div>
</section>

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

        <!-- O que é MCP -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-2">O que é MCP?</h2>
            <p class="text-sm text-gray-600">
                Model Context Protocol (MCP) é um protocolo aberto que permite agentes de IA chamarem ferramentas externas de forma padronizada.
                O NALU AI expõe todos os validadores como ferramentas MCP via <code class="bg-slate-100 px-1 rounded text-xs">JSON-RPC 2.0</code> sobre <code class="bg-slate-100 px-1 rounded text-xs">stdio</code> ou <code class="bg-slate-100 px-1 rounded text-xs">HTTP/SSE</code>.
            </p>
        </div>

        <!-- Claude Code -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-3">Configurar no Claude Code</h2>
            <p class="text-sm text-gray-600 mb-3">Adicione ao seu <code class="bg-slate-100 px-1 rounded text-xs">~/.claude/settings.json</code>:</p>
            <div class="bg-slate-900 rounded-xl p-5 font-mono text-sm text-slate-300 overflow-x-auto leading-relaxed">
<pre>{
  "mcpServers": {
    "nalu": {
      "command": "npx",
      "args": ["-y", "@@naluai/mcp-server"],
      "env": {
        "NALU_API_KEY": "SUA_API_KEY"
      }
    }
  }
}</pre>
            </div>
            <p class="text-xs text-gray-500 mt-2">Ou via HTTP (se preferir não usar npx):</p>
            <div class="bg-slate-900 rounded-xl p-5 font-mono text-sm text-slate-300 overflow-x-auto leading-relaxed mt-2">
<pre>{
  "mcpServers": {
    "nalu": {
      "url": "https://api.naluai.com/mcp",
      "headers": {
        "Authorization": "Bearer SUA_API_KEY"
      }
    }
  }
}</pre>
            </div>
        </div>

        <!-- Cursor -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-3">Configurar no Cursor</h2>
            <p class="text-sm text-gray-600 mb-3">Acesse <strong>Settings → MCP → Add Server</strong> e adicione:</p>
            <div class="bg-slate-900 rounded-xl p-5 font-mono text-sm text-slate-300 overflow-x-auto leading-relaxed">
<pre>Name: NALU AI
URL:  https://api.naluai.com/mcp
Headers:
  Authorization: Bearer SUA_API_KEY</pre>
            </div>
        </div>

        <!-- Ferramentas disponíveis -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-3">Ferramentas disponíveis</h2>
            <p class="text-sm text-gray-600 mb-3">Após conectar, o agente de IA enxerga estas ferramentas:</p>
            <div class="bg-white border border-gray-100 rounded-xl overflow-hidden">
                <table class="w-full text-sm">
                    <thead class="bg-gray-50 border-b border-gray-100">
                        <tr>
                            <th class="px-4 py-2 text-left font-semibold text-gray-700">Ferramenta</th>
                            <th class="px-4 py-2 text-left font-semibold text-gray-700">Descrição</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50 text-xs">
                        @foreach (var t in new[] {
                            ("validate_cpf",           "Extrai e valida CPF de texto em linguagem natural"),
                            ("validate_cep",           "Extrai CEP e retorna endereço completo"),
                            ("validate_cnpj",          "Extrai e valida CNPJ"),
                            ("validate_email",         "Extrai email com correção de typos"),
                            ("validate_phone_br",      "Extrai telefone brasileiro com DDD"),
                            ("validate_plate_br",      "Extrai placa Mercosul ou formato antigo"),
                            ("validate_postal_code",   "Código postal internacional"),
                            ("validate_full_name",     "Extrai nome completo, ignora saudações"),
                            ("validate_yes_no",        "Detecta sim/não em linguagem natural"),
                            ("validate_birthdate",     "Extrai data de nascimento"),
                            ("validate_handoff",       "Detecta intenção de falar com humano"),
                            ("validate_cancel_intent", "Classifica intenção de cancelamento"),
                            ("validate_company_name",  "Extrai nome de empresa"),
                            ("validate_reply",         "Analisa contexto conversacional completo"),
                        })
                        {
                            <tr class="hover:bg-gray-50">
                                <td class="px-4 py-2 font-mono text-nalu-600">@t.Item1</td>
                                <td class="px-4 py-2 text-gray-600">@t.Item2</td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Exemplo de uso -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-3">Exemplo de uso no Claude Code</h2>
            <div class="bg-slate-50 rounded-xl p-5 text-sm text-gray-700 leading-relaxed border border-gray-100">
                <p class="text-gray-500 text-xs mb-3">Prompt para o Claude:</p>
                <p class="italic">"O usuário disse 'meu cpf é 111.444.777-35'. Use validate_cpf para extrair e validar."</p>
                <p class="text-gray-500 text-xs mt-4 mb-1">Claude chama automaticamente:</p>
                <pre class="font-mono text-xs bg-white rounded p-3 border border-gray-100">validate_cpf({
  "agent_input": "Qual o seu CPF?",
  "user_input":  "meu cpf é 111.444.777-35"
})</pre>
            </div>
        </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/api-reference" class="text-nalu-600 text-sm hover:underline">API Reference →</a>
        </div>
    </div>
</section>