@page "/docs/api-reference"
@model Nalu.Web.Pages.Docs.ApiReferenceModel
@{
    ViewData["Title"] = "API Reference — NaLU AI Docs";
    ViewData["Description"] = "Referência completa de todos os endpoints NaLU AI. Parâmetros, respostas e exemplos.";
}

<section class="bg-gradient-to-b from-slate-50 to-white pt-16 pb-8">
    <div class="max-w-4xl 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> / API Reference
        </div>
        <h1 class="text-3xl font-extrabold text-gray-900 mb-2">API Reference</h1>
        <p class="text-gray-500">Base URL: <code class="bg-slate-100 px-2 py-0.5 rounded text-sm">https://api.naluai.dev/v1/extract</code></p>
    </div>
</section>

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

        <!-- Auth -->
        <div class="bg-blue-50 border border-blue-100 rounded-xl px-5 py-4">
            <div class="font-semibold text-blue-800 mb-1">Autenticação</div>
            <p class="text-sm text-blue-700">Todas as rotas requerem <code class="bg-blue-100 px-1 rounded">Authorization: Bearer SUA_API_KEY</code> no header.</p>
        </div>

        <!-- Request body -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-3">Corpo da requisição (ExtractionRequest)</h2>
            <table class="w-full text-sm border border-gray-100 rounded-xl overflow-hidden">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-2 text-left font-semibold text-gray-700">Campo</th>
                        <th class="px-4 py-2 text-left font-semibold text-gray-700">Tipo</th>
                        <th class="px-4 py-2 text-left font-semibold text-gray-700">Obrigatório</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">
                    <tr><td class="px-4 py-2 font-mono text-xs text-nalu-600">user_input</td><td class="px-4 py-2 text-gray-500">string</td><td class="px-4 py-2 text-green-600 font-semibold">sim</td><td class="px-4 py-2 text-gray-600">O que o usuário digitou</td></tr>
                    <tr><td class="px-4 py-2 font-mono text-xs text-nalu-600">agent_input</td><td class="px-4 py-2 text-gray-500">string?</td><td class="px-4 py-2 text-gray-400">não</td><td class="px-4 py-2 text-gray-600">Pergunta do agente (melhora SmartSuggestion)</td></tr>
                    <tr><td class="px-4 py-2 font-mono text-xs text-nalu-600">agent_context</td><td class="px-4 py-2 text-gray-500">string?</td><td class="px-4 py-2 text-gray-400">não</td><td class="px-4 py-2 text-gray-600">Objetivo geral do agente (melhora sugestões contextuais)</td></tr>
                    <tr><td class="px-4 py-2 font-mono text-xs text-nalu-600">language</td><td class="px-4 py-2 text-gray-500">string?</td><td class="px-4 py-2 text-gray-400">não</td><td class="px-4 py-2 text-gray-600">pt-BR (padrão), en-US, es-ES</td></tr>
                </tbody>
            </table>
        </div>

        <!-- Endpoints table -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-3">Endpoints</h2>
            <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-3 text-left font-semibold text-gray-700">POST</th>
                            <th class="px-4 py-3 text-left font-semibold text-gray-700">Descrição</th>
                            <th class="px-4 py-3 text-center font-semibold text-gray-700">Créditos</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50">
                        @foreach (var ep in new[] {
                            ("/v1/extract/cpf",          "Extrai CPF, valida mod 11, formata XXX.XXX.XXX-XX",                      3),
                            ("/v1/extract/cep",          "Extrai CEP e retorna endereço enriquecido (logradouro, bairro, cidade, estado)", 3),
                            ("/v1/extract/cnpj",         "Extrai CNPJ, valida mod 11, formata XX.XXX.XXX/XXXX-XX",                3),
                            ("/v1/extract/email",        "Extrai email, corrige typos de domínio",                                 3),
                            ("/v1/extract/phone",        "Extrai telefone com DDD, normaliza formato brasileiro",                  3),
                            ("/v1/extract/plate-br",     "Extrai placa Mercosul ou formato antigo, aceita por extenso",            3),
                            ("/v1/extract/postal-code",  "Código postal internacional (não CEP)",                                  3),
                            ("/v1/extract/name",         "Extrai nome completo, ignora saudações e títulos",                      3),
                            ("/v1/extract/yes-no",       "Detecta sim/não em linguagem natural",                                   3),
                            ("/v1/extract/birthdate",    "Extrai data de nascimento, calcula idade",                               3),
                            ("/v1/extract/handoff",      "Detecta intenção de falar com humano + urgência",                       3),
                            ("/v1/extract/cancel-intent","Classifica cancelamento de serviço vs operação atual",                  3),
                            ("/v1/extract/company-name", "Extrai nome de empresa, detecta sufixos legais",                        3),
                            ("/v1/extract/reply",        "Analisa contexto conversacional completo (par agente+usuário)",         5),
                        })
                        {
                            <tr class="hover:bg-gray-50 @(ep.Item1 == "/v1/extract/reply" ? "bg-nalu-50" : "")">
                                <td class="px-4 py-3 font-mono text-xs text-nalu-700">@ep.Item1</td>
                                <td class="px-4 py-3 text-gray-600 text-xs">@ep.Item2</td>
                                <td class="px-4 py-3 text-center font-bold text-gray-900">@ep.Item3</td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>

        <!-- validate_reply special -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-3">validate_reply — corpo especial</h2>
            <p class="text-sm text-gray-600 mb-3">Este endpoint usa <code class="bg-slate-100 px-1 rounded text-xs">ReplyRequest</code> em vez de <code class="bg-slate-100 px-1 rounded text-xs">ExtractionRequest</code>:</p>
            <table class="w-full text-sm border border-gray-100 rounded-xl overflow-hidden mb-4">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-2 text-left font-semibold text-gray-700">Campo</th>
                        <th class="px-4 py-2 text-left font-semibold text-gray-700">Tipo</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">
                    <tr><td class="px-4 py-2 font-mono text-xs text-nalu-600">agent_message</td><td class="px-4 py-2 text-gray-500">string</td><td class="px-4 py-2 text-gray-600">O que o agente disse</td></tr>
                    <tr><td class="px-4 py-2 font-mono text-xs text-nalu-600">user_reply</td><td class="px-4 py-2 text-gray-500">string</td><td class="px-4 py-2 text-gray-600">O que o usuário respondeu</td></tr>
                    <tr><td class="px-4 py-2 font-mono text-xs text-nalu-600">agent_context</td><td class="px-4 py-2 text-gray-500">string?</td><td class="px-4 py-2 text-gray-600">Contexto geral do agente</td></tr>
                    <tr><td class="px-4 py-2 font-mono text-xs text-nalu-600">language</td><td class="px-4 py-2 text-gray-500">string?</td><td class="px-4 py-2 text-gray-600">pt-BR (padrão)</td></tr>
                </tbody>
            </table>
            <div class="bg-slate-900 rounded-xl p-5 font-mono text-sm text-slate-300 overflow-x-auto">
<pre># Exemplo: detectar contraproposta de parcelas
curl https://api.naluai.dev/v1/extract/reply \
  -H "Authorization: Bearer SUA_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "agent_message": "Posso parcelar em 20x de R$100. Topa?",
    "user_reply":    "Bora em 48?",
    "agent_context": "Agente de negociação de parcelas"
  }'

# Resposta:
# {
#   "reply_type":       "counter_proposal",
#   "extracted_value":  "48",
#   "value_type":       "quantity",
#   "extracted_meaning":"48 parcelas, não R$48",
#   "confidence":       0.95,
#   "suggestion_to_agent": "Cliente propõe 48 parcelas..."
# }</pre>
            </div>
        </div>

        <!-- Response codes -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-3">Códigos de resposta</h2>
            <table class="w-full text-sm border border-gray-100 rounded-xl overflow-hidden">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-2 text-left font-semibold text-gray-700">HTTP</th>
                        <th class="px-4 py-2 text-left font-semibold text-gray-700">Significado</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    <tr><td class="px-4 py-2 font-bold text-green-600">200</td><td class="px-4 py-2 text-gray-600">Sucesso — ver campo <code class="bg-slate-100 px-1 rounded text-xs">obtained</code> para saber se extraiu</td></tr>
                    <tr><td class="px-4 py-2 font-bold text-yellow-600">401</td><td class="px-4 py-2 text-gray-600">API Key inválida ou ausente</td></tr>
                    <tr><td class="px-4 py-2 font-bold text-orange-600">429</td><td class="px-4 py-2 text-gray-600">Créditos esgotados ou rate limit atingido</td></tr>
                    <tr><td class="px-4 py-2 font-bold text-red-600">503</td><td class="px-4 py-2 text-gray-600">Motor de IA indisponível — tentar novamente em 30s</td></tr>
                </tbody>
            </table>
            <p class="text-xs text-gray-500 mt-2">Ver <a href="/docs/erros" class="text-nalu-600 hover:underline">Erros</a> para payloads completos.</p>
        </div>

        <!-- Headers -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-3">Headers de resposta</h2>
            <table class="w-full text-sm border border-gray-100 rounded-xl overflow-hidden">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-2 text-left font-semibold text-gray-700">Header</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">
                    <tr><td class="px-4 py-2 font-mono text-xs text-nalu-600">X-Credits-Used</td><td class="px-4 py-2 text-gray-600">Créditos consumidos nesta chamada</td></tr>
                    <tr><td class="px-4 py-2 font-mono text-xs text-nalu-600">X-Credits-Remaining</td><td class="px-4 py-2 text-gray-600">Créditos restantes no mês</td></tr>
                    <tr><td class="px-4 py-2 font-mono text-xs text-nalu-600">X-Credits-Limit</td><td class="px-4 py-2 text-gray-600">Limite mensal do seu plano</td></tr>
                    <tr><td class="px-4 py-2 font-mono text-xs text-nalu-600">X-Credits-Reset</td><td class="px-4 py-2 text-gray-600">Data de reset (ISO 8601)</td></tr>
                </tbody>
            </table>
        </div>

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