@page "/docs/creditos"
@model Nalu.Web.Pages.Docs.CreditosModel
@{
    ViewData["Title"] = "Créditos — NaLU AI Docs";
    ViewData["Description"] = "Como o sistema de créditos NaLU AI funciona, custo por validador e limites de plano.";
}

<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> / Créditos
        </div>
        <h1 class="text-3xl font-extrabold text-gray-900 mb-2">Créditos</h1>
        <p class="text-gray-500">Como funciona o sistema de créditos e limites de plano.</p>
    </div>
</section>

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

        <!-- Como funciona -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-3">Como funciona</h2>
            <p class="text-sm text-gray-600 mb-3">
                Cada chamada à API consome créditos. Créditos são debitados no momento da chamada.
                O limite é mensal e reseta no primeiro dia de cada mês às 00:00 UTC.
            </p>
            <div class="grid sm:grid-cols-3 gap-3">
                <div class="bg-slate-50 rounded-xl p-4 text-center">
                    <div class="text-2xl font-extrabold text-nalu-600">3</div>
                    <div class="text-xs text-gray-500 mt-1">créditos — validadores padrão</div>
                </div>
                <div class="bg-nalu-50 rounded-xl p-4 text-center">
                    <div class="text-2xl font-extrabold text-nalu-600">5</div>
                    <div class="text-xs text-gray-500 mt-1">créditos — validate_reply</div>
                </div>
                <div class="bg-slate-50 rounded-xl p-4 text-center">
                    <div class="text-2xl font-extrabold text-gray-900">0</div>
                    <div class="text-xs text-gray-500 mt-1">créditos — cache hit</div>
                </div>
            </div>
        </div>

        <!-- Tabela de custos -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-3">Custo por validador</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">Validadores</th>
                            <th class="px-4 py-3 text-center font-semibold text-gray-700">Créditos</th>
                            <th class="px-4 py-3 text-center font-semibold text-gray-700">Starter (R$29)</th>
                            <th class="px-4 py-3 text-center font-semibold text-gray-700">Pro (R$199)</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50">
                        <tr>
                            <td class="px-4 py-3 text-gray-700 text-xs">CPF, CEP, CNPJ, email, telefone, placa, postal-code, nome, sim/não, data nasc., handoff, cancelamento, empresa</td>
                            <td class="px-4 py-3 text-center font-bold">3</td>
                            <td class="px-4 py-3 text-center text-nalu-600 font-semibold">R$ 0,0058</td>
                            <td class="px-4 py-3 text-center text-nalu-600 font-semibold">R$ 0,0024</td>
                        </tr>
                        <tr class="bg-nalu-50">
                            <td class="px-4 py-3 text-gray-700 text-xs font-semibold">validate_reply (análise de contexto aprofundada)</td>
                            <td class="px-4 py-3 text-center font-bold">5</td>
                            <td class="px-4 py-3 text-center text-nalu-600 font-bold">R$ 0,0097</td>
                            <td class="px-4 py-3 text-center text-nalu-600 font-bold">R$ 0,0040</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Limites de plano -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-3">Limites por plano</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">Plano</th>
                            <th class="px-4 py-3 text-center font-semibold text-gray-700">Créditos/mês</th>
                            <th class="px-4 py-3 text-center font-semibold text-gray-700">Limite diário</th>
                            <th class="px-4 py-3 text-center font-semibold text-gray-700">Preço</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50">
                        <tr><td class="px-4 py-3 font-semibold">Free</td><td class="px-4 py-3 text-center">3.000</td><td class="px-4 py-3 text-center text-amber-600">100 cr/dia</td><td class="px-4 py-3 text-center">R$ 0</td></tr>
                        <tr><td class="px-4 py-3 font-semibold text-nalu-600">Starter</td><td class="px-4 py-3 text-center">15.000</td><td class="px-4 py-3 text-center text-green-600">sem limite</td><td class="px-4 py-3 text-center">R$ 29/mês</td></tr>
                        <tr><td class="px-4 py-3 font-semibold">Indie</td><td class="px-4 py-3 text-center">50.000</td><td class="px-4 py-3 text-center text-green-600">sem limite</td><td class="px-4 py-3 text-center">R$ 69/mês</td></tr>
                        <tr><td class="px-4 py-3 font-semibold">Pro</td><td class="px-4 py-3 text-center">250.000</td><td class="px-4 py-3 text-center text-green-600">sem limite</td><td class="px-4 py-3 text-center">R$ 199/mês</td></tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Rate limits -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-3">Rate limits (todos os planos)</h2>
            <div class="space-y-2">
                <div class="flex justify-between items-center bg-slate-50 rounded-lg px-4 py-3 text-sm">
                    <span class="text-gray-600">Por IP por minuto</span>
                    <span class="font-bold text-gray-900">60 req/min</span>
                </div>
                <div class="flex justify-between items-center bg-slate-50 rounded-lg px-4 py-3 text-sm">
                    <span class="text-gray-600">Por IP por hora</span>
                    <span class="font-bold text-gray-900">500 req/hora</span>
                </div>
            </div>
            <p class="text-xs text-gray-500 mt-2">Rate limit retorna HTTP 429. Ver <a href="/docs/erros" class="text-nalu-600 hover:underline">Erros</a>.</p>
        </div>

        <!-- Headers -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-3">Monitorar créditos</h2>
            <p class="text-sm text-gray-600 mb-3">Cada resposta inclui headers com o estado atual:</p>
            <div class="bg-slate-900 rounded-xl p-5 font-mono text-sm text-slate-300 overflow-x-auto">
<pre>X-Credits-Used:      3        # consumido nesta chamada
X-Credits-Remaining: 2997     # restantes no mês
X-Credits-Limit:     3000     # limite do plano
X-Credits-Reset:     2026-06-01T00:00:00Z</pre>
            </div>
        </div>

        <!-- Cache -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-3">Cache</h2>
            <p class="text-sm text-gray-600">
                Requisições idênticas (mesmo <code class="bg-slate-100 px-1 rounded text-xs">agent_input</code> + <code class="bg-slate-100 px-1 rounded text-xs">user_input</code> + <code class="bg-slate-100 px-1 rounded text-xs">agent_context</code> + <code class="bg-slate-100 px-1 rounded text-xs">language</code>)
                retornam o resultado em cache por <strong>60 minutos</strong> sem consumir créditos adicionais.
            </p>
        </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="/precos" class="text-nalu-600 text-sm hover:underline">Ver planos →</a>
        </div>
    </div>
</section>