@page "/painel"
@model Nalu.Web.Pages.Painel.IndexModel
@{
    ViewData["Title"] = "Painel — NALU AI";
    var pct = Model.CreditsLimit > 0 ? Math.Min(100, Model.CreditsUsed * 100 / Model.CreditsLimit) : 0;
    var barColor = pct >= 90 ? "bg-red-500" : pct >= 70 ? "bg-amber-500" : "bg-nalu-500";
}

<!-- Welcome modal (new users) -->
@if (Model.NewApiKey != null)
{
    <div id="welcome-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
        <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full p-8">
            <div class="text-4xl mb-4 text-center">🎉</div>
            <h2 class="text-2xl font-bold text-gray-900 text-center mb-2">Bem-vindo ao NALU AI!</h2>
            <p class="text-gray-500 text-sm text-center mb-6">
                Sua conta foi criada com <strong>3.000 créditos grátis</strong>.
                Guarde sua API key — ela só é exibida uma vez.
            </p>
            <div class="bg-slate-900 rounded-xl p-4 mb-4">
                <div class="text-xs text-slate-400 mb-2 font-semibold uppercase tracking-wide">Sua API Key</div>
                <div class="font-mono text-sm text-green-400 break-all" id="new-api-key">@Model.NewApiKey</div>
            </div>
            <button onclick="copyKey()"
                    class="w-full bg-nalu-600 text-white font-semibold py-2.5 rounded-xl hover:bg-nalu-700 transition-colors mb-3">
                Copiar API Key
            </button>
            <button onclick="document.getElementById('welcome-modal').remove()"
                    class="w-full text-sm text-gray-500 hover:text-gray-700 py-2">
                Entendi, já copiei
            </button>
        </div>
    </div>
    <script>
        function copyKey() {
            navigator.clipboard.writeText('@Model.NewApiKey');
            const btn = event.target;
            btn.textContent = '✓ Copiado!';
            setTimeout(() => btn.textContent = 'Copiar API Key', 2000);
        }
    </script>
}

<div class="max-w-4xl mx-auto px-4 sm:px-6 py-12">
    <!-- Header -->
    <div class="flex items-center justify-between mb-10">
        <div class="flex items-center gap-4">
            @if (!string.IsNullOrEmpty(Model.UserPicture))
            {
                <img src="@Model.UserPicture" alt="Avatar" class="w-12 h-12 rounded-full border border-gray-200" />
            }
            else
            {
                <div class="w-12 h-12 rounded-full bg-nalu-100 flex items-center justify-center text-nalu-700 font-bold text-lg">
                    @(Model.UserName.Length > 0 ? Model.UserName[0].ToString().ToUpper() : "?")
                </div>
            }
            <div>
                <div class="font-bold text-gray-900">@Model.UserName</div>
                <div class="text-sm text-gray-500">@Model.UserEmail</div>
            </div>
        </div>
        <div class="flex items-center gap-3">
            <span class="bg-nalu-100 text-nalu-700 text-xs font-bold px-3 py-1 rounded-full uppercase">@Model.Plan</span>
            <a href="/auth/logout" class="text-sm text-gray-500 hover:text-gray-700">Sair</a>
        </div>
    </div>

    <!-- Usage card -->
    <div class="bg-white border border-gray-100 rounded-2xl p-6 mb-6 shadow-sm">
        <div class="flex items-center justify-between mb-4">
            <h2 class="font-bold text-gray-900">Uso este mês</h2>
            <span class="text-sm text-gray-500">Reseta em @(new DateTime(DateTime.UtcNow.Year, DateTime.UtcNow.Month, 1).AddMonths(1).ToString("dd/MM"))</span>
        </div>
        <div class="flex items-end gap-3 mb-3">
            <div class="text-3xl font-extrabold text-gray-900">@Model.CreditsUsed.ToString("N0")</div>
            <div class="text-gray-500 mb-1">/ @Model.CreditsLimit.ToString("N0") créditos</div>
        </div>
        <div class="w-full bg-gray-100 rounded-full h-3">
            <div class="@barColor h-3 rounded-full transition-all" style="width: @pct%"></div>
        </div>
        <div class="flex justify-between text-xs text-gray-400 mt-1">
            <span>@(Model.CreditsLimit - Model.CreditsUsed) restantes</span>
            <span>@pct%</span>
        </div>
        @if (Model.Plan == "free")
        {
            <div class="mt-4 pt-4 border-t border-gray-100 text-center">
                <a href="/precos" class="text-sm font-semibold text-nalu-600 hover:text-nalu-700">
                    Fazer upgrade para mais créditos →
                </a>
            </div>
        }
    </div>

    <!-- API Keys -->
    <div class="bg-white border border-gray-100 rounded-2xl p-6 shadow-sm">
        <div class="flex items-center justify-between mb-4">
            <h2 class="font-bold text-gray-900">API Keys</h2>
        </div>

        @if (Model.Keys.Count == 0)
        {
            <p class="text-sm text-gray-500 text-center py-8">Nenhuma key ativa.</p>
        }
        else
        {
            <div class="space-y-3">
                @foreach (var k in Model.Keys)
                {
                    <div class="flex items-center justify-between bg-slate-50 rounded-xl px-4 py-3">
                        <div class="flex-1 min-w-0 mr-4">
                            <div class="text-xs font-semibold text-gray-500 mb-1">@(k.Label ?? "API Key")</div>
                            <div class="font-mono text-sm text-gray-800 truncate">
                                @(k.Key[..Math.Min(20, k.Key.Length)])…
                            </div>
                            @if (k.LastUsedAt.HasValue)
                            {
                                <div class="text-xs text-gray-400 mt-0.5">Último uso: @k.LastUsedAt.Value.ToString("dd/MM/yyyy HH:mm") UTC</div>
                            }
                        </div>
                        <div class="flex items-center gap-2">
                            <button onclick="copyApiKey('@k.Key', this)"
                                    class="text-xs text-nalu-600 hover:text-nalu-700 font-medium px-3 py-1.5 border border-nalu-200 rounded-lg">
                                Copiar
                            </button>
                            <form method="post" asp-page-handler="Revoke" onsubmit="return confirm('Revogar esta key?')">
                                <input type="hidden" name="key" value="@k.Key" />
                                <button type="submit"
                                        class="text-xs text-red-500 hover:text-red-700 font-medium px-3 py-1.5 border border-red-200 rounded-lg">
                                    Revogar
                                </button>
                            </form>
                        </div>
                    </div>
                }
            </div>
        }

        <!-- Usage hint -->
        <div class="mt-4 bg-slate-900 rounded-xl p-4">
            <div class="text-xs text-slate-400 mb-2 font-semibold uppercase tracking-wide">Como usar</div>
            <pre class="font-mono text-sm text-slate-300 leading-relaxed overflow-x-auto">curl https://api.naluai.dev/v1/extract/cpf \
  -H "Authorization: Bearer @(Model.Keys.FirstOrDefault()?.Key ?? "SUA_API_KEY")" \
  -H "Content-Type: application/json" \
  -d '{"agent_input":"Qual seu CPF?","user_input":"123.456.789-09"}'</pre>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        function copyApiKey(key, btn) {
            navigator.clipboard.writeText(key);
            const orig = btn.textContent;
            btn.textContent = '✓ Copiado';
            setTimeout(() => btn.textContent = orig, 2000);
        }
    </script>
}
