@page "/en/docs/api-reference"
@model Nalu.Web.Pages.En.Docs.EnApiReferenceModel
@{
    ViewData["LangPrefix"] = "/en";
    ViewData["PtUrl"] = "/docs/api-reference";
    ViewData["Title"] = "API Reference — NaLU AI Docs";
    ViewData["Description"] = "Complete reference for all NaLU AI endpoints. Parameters, responses and examples.";
}

<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="/en/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</code></p>
    </div>
</section>

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

        <!-- Auth -->
        <div>
            <h2 class="text-xl font-bold text-gray-900 mb-4">Authentication</h2>
            <p class="text-gray-600 mb-3">All requests require a Bearer token in the <code class="bg-slate-100 px-1.5 py-0.5 rounded text-xs">Authorization</code> header:</p>
            <div class="bg-slate-900 rounded-xl p-4 font-mono text-sm text-slate-300">
                Authorization: Bearer nalu_YOUR_API_KEY
            </div>
        </div>

        <!-- Standard endpoints -->
        <div>
            <h2 class="text-xl font-bold text-gray-900 mb-6">Standard endpoints — 3 credits</h2>
            <div class="space-y-4">
                @foreach (var ep in new[] {
                    ("name", "Full name extraction"),
                    ("email", "Email extraction and typo correction"),
                    ("postal-code", "International postal code"),
                    ("yes-no", "Yes/No detection in any language"),
                    ("birthdate", "Date of birth in any format"),
                    ("handoff", "Intent to speak with human agent"),
                    ("cancel-intent", "Service cancellation intent"),
                    ("company-name", "Company name extraction"),
                    ("cpf", "Brazilian CPF validation (mod 11)"),
                    ("cep", "Brazilian ZIP code + enriched address"),
                    ("phone-br", "Brazilian phone with area code"),
                    ("cnpj", "Brazilian CNPJ validation (mod 11)"),
                    ("plate-br", "Brazilian vehicle plate (Mercosul or legacy)"),
                })
                {
                    <div class="border border-gray-100 rounded-xl p-4">
                        <div class="flex items-center gap-3 mb-1">
                            <span class="bg-nalu-600 text-white text-xs font-bold px-2 py-0.5 rounded">POST</span>
                            <code class="font-mono text-sm text-gray-800">/v1/extract/@ep.Item1</code>
                        </div>
                        <p class="text-sm text-gray-500">@ep.Item2</p>
                    </div>
                }
            </div>
        </div>

        <!-- validate_reply -->
        <div>
            <h2 class="text-xl font-bold text-gray-900 mb-4">validate_reply — 5 credits</h2>
            <div class="border border-nalu-200 rounded-xl p-4 mb-4">
                <div class="flex items-center gap-3 mb-1">
                    <span class="bg-nalu-600 text-white text-xs font-bold px-2 py-0.5 rounded">POST</span>
                    <code class="font-mono text-sm text-gray-800">/v1/extract/reply</code>
                    <span class="bg-nalu-100 text-nalu-700 text-xs px-2 py-0.5 rounded-full font-semibold">Premium</span>
                </div>
                <p class="text-sm text-gray-500">Full conversational context analysis. Detects reply type, extracts value and provides suggestion to agent.</p>
            </div>
        </div>

        <!-- Request body -->
        <div>
            <h2 class="text-xl font-bold text-gray-900 mb-4">Request body</h2>
            <div class="overflow-x-auto">
                <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-3 text-left font-semibold text-gray-700">Field</th>
                            <th class="px-4 py-3 text-left font-semibold text-gray-700">Type</th>
                            <th class="px-4 py-3 text-left font-semibold text-gray-700">Required</th>
                            <th class="px-4 py-3 text-left font-semibold text-gray-700">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50">
                        <tr><td class="px-4 py-3 font-mono text-xs">agent_input</td><td class="px-4 py-3 text-gray-500">string</td><td class="px-4 py-3 text-gray-500">Yes*</td><td class="px-4 py-3 text-gray-500">Agent question/message (*not for reply)</td></tr>
                        <tr><td class="px-4 py-3 font-mono text-xs">user_input</td><td class="px-4 py-3 text-gray-500">string</td><td class="px-4 py-3 text-gray-500">Yes*</td><td class="px-4 py-3 text-gray-500">User response (*not for reply)</td></tr>
                        <tr><td class="px-4 py-3 font-mono text-xs">agent_message</td><td class="px-4 py-3 text-gray-500">string</td><td class="px-4 py-3 text-gray-500">reply only</td><td class="px-4 py-3 text-gray-500">Agent message for validate_reply</td></tr>
                        <tr><td class="px-4 py-3 font-mono text-xs">user_reply</td><td class="px-4 py-3 text-gray-500">string</td><td class="px-4 py-3 text-gray-500">reply only</td><td class="px-4 py-3 text-gray-500">User reply for validate_reply</td></tr>
                        <tr><td class="px-4 py-3 font-mono text-xs">language</td><td class="px-4 py-3 text-gray-500">string</td><td class="px-4 py-3 text-gray-500">No</td><td class="px-4 py-3 text-gray-500">BCP-47 tag (default: pt-BR)</td></tr>
                        <tr><td class="px-4 py-3 font-mono text-xs">agent_context</td><td class="px-4 py-3 text-gray-500">string</td><td class="px-4 py-3 text-gray-500">No</td><td class="px-4 py-3 text-gray-500">Agent objective description (improves accuracy)</td></tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Response fields -->
        <div>
            <h2 class="text-xl font-bold text-gray-900 mb-4">Response fields</h2>
            <div class="overflow-x-auto">
                <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-3 text-left font-semibold text-gray-700">Field</th>
                            <th class="px-4 py-3 text-left font-semibold text-gray-700">Type</th>
                            <th class="px-4 py-3 text-left font-semibold text-gray-700">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50">
                        <tr><td class="px-4 py-3 font-mono text-xs">obtained</td><td class="px-4 py-3 text-gray-500">bool</td><td class="px-4 py-3 text-gray-500">true = data extracted successfully</td></tr>
                        <tr><td class="px-4 py-3 font-mono text-xs">extracted_value</td><td class="px-4 py-3 text-gray-500">string?</td><td class="px-4 py-3 text-gray-500">Normalized and validated value</td></tr>
                        <tr><td class="px-4 py-3 font-mono text-xs">certain</td><td class="px-4 py-3 text-gray-500">bool</td><td class="px-4 py-3 text-gray-500">true = no ambiguity</td></tr>
                        <tr><td class="px-4 py-3 font-mono text-xs">confidence</td><td class="px-4 py-3 text-gray-500">string</td><td class="px-4 py-3 text-gray-500">high / medium / low</td></tr>
                        <tr><td class="px-4 py-3 font-mono text-xs">smart_suggestion</td><td class="px-4 py-3 text-gray-500">string?</td><td class="px-4 py-3 text-gray-500">Suggested re-ask when obtained=false</td></tr>
                        <tr><td class="px-4 py-3 font-mono text-xs">credits_used</td><td class="px-4 py-3 text-gray-500">int</td><td class="px-4 py-3 text-gray-500">Credits consumed by this call</td></tr>
                        <tr><td class="px-4 py-3 font-mono text-xs">reply_type</td><td class="px-4 py-3 text-gray-500">string?</td><td class="px-4 py-3 text-gray-500">validate_reply only: confirmation / rejection / counter_proposal / handoff / cancel / other</td></tr>
                        <tr><td class="px-4 py-3 font-mono text-xs">suggestion_to_agent</td><td class="px-4 py-3 text-gray-500">string?</td><td class="px-4 py-3 text-gray-500">validate_reply only: contextual suggestion for the agent</td></tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Error codes -->
        <div>
            <h2 class="text-xl font-bold text-gray-900 mb-4">HTTP status codes</h2>
            <div class="overflow-x-auto">
                <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-3 text-left font-semibold text-gray-700">Status</th>
                            <th class="px-4 py-3 text-left font-semibold text-gray-700">Meaning</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50">
                        <tr><td class="px-4 py-3 font-mono text-xs text-green-700">200</td><td class="px-4 py-3 text-gray-500">Success</td></tr>
                        <tr><td class="px-4 py-3 font-mono text-xs text-yellow-700">400</td><td class="px-4 py-3 text-gray-500">Invalid request (missing required field)</td></tr>
                        <tr><td class="px-4 py-3 font-mono text-xs text-red-700">401</td><td class="px-4 py-3 text-gray-500">Invalid or missing API key</td></tr>
                        <tr><td class="px-4 py-3 font-mono text-xs text-red-700">402</td><td class="px-4 py-3 text-gray-500">Insufficient credits</td></tr>
                        <tr><td class="px-4 py-3 font-mono text-xs text-red-700">429</td><td class="px-4 py-3 text-gray-500">Rate limit exceeded</td></tr>
                        <tr><td class="px-4 py-3 font-mono text-xs text-red-700">500</td><td class="px-4 py-3 text-gray-500">Internal server error</td></tr>
                    </tbody>
                </table>
            </div>
            <p class="text-sm text-gray-500 mt-3">→ <a href="/en/docs/errors" class="text-nalu-600 hover:underline">Detailed error reference</a></p>
        </div>
    </div>
</section>
