@model QRRapidoApp.Models.User
@inject Microsoft.Extensions.Localization.IStringLocalizer<QRRapidoApp.Resources.SharedResource> Localizer
@{
    ViewData["Title"] = Localizer["UserProfileTitle"];
    var monthlyQRCount = ViewBag.MonthlyQRCount as int? ?? 0;
    var qrHistory = ViewBag.QRHistory as List<QRRapidoApp.Models.QRCodeHistory> ?? new List<QRRapidoApp.Models.QRCodeHistory>();
    Layout = "~/Views/Shared/_Layout.cshtml";
    
    // Cálculos de Cota Gratuita
    var freeUsed = Model.FreeQRsUsed;
    var freeLimit = 5;
    var freePercent = (double)freeUsed / freeLimit * 100;
    var freeRemaining = Math.Max(0, freeLimit - freeUsed);
}

<div class="container mt-4">
    <div class="row">
        <div class="col-lg-4">
            <!-- Header do Perfil -->
            <div class="card mb-4 border-0 shadow-sm text-center">
                <div class="card-body py-5">
                    <div class="mb-3">
                        <i class="fas fa-user-circle fa-5x text-secondary"></i>
                    </div>
                    <h4 class="mb-1">@Model.Name</h4>
                    <p class="text-muted mb-3">@Model.Email</p>
                    <p class="small text-muted">Membro desde @Model.CreatedAt.ToString("MMM yyyy")</p>
                    
                    <form method="post" action="/Account/Logout" class="d-inline">
                        <button type="submit" class="btn btn-outline-danger btn-sm">
                            <i class="fas fa-sign-out-alt me-1"></i>Sair
                        </button>
                    </form>
                </div>
            </div>

            <!-- Estatísticas Rápidas -->
            <div class="card mb-4 border-0 shadow-sm">
                <div class="card-header bg-white fw-bold">
                    <i class="fas fa-chart-pie me-2 text-primary"></i> Resumo
                </div>
                <div class="list-group list-group-flush">
                    <div class="list-group-item d-flex justify-content-between align-items-center">
                        <span>Total Gerado</span>
                        <span class="badge bg-primary rounded-pill">@Model.TotalQRGenerated</span>
                    </div>
                    <div class="list-group-item d-flex justify-content-between align-items-center">
                        <span>Este Mês</span>
                        <span class="badge bg-info rounded-pill">@monthlyQRCount</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-8">
            <!-- CARTEIRA E SALDO -->
            <div class="card mb-4 border-0 shadow-sm">
                <div class="card-header bg-success text-white d-flex align-items-center justify-content-between">
                    <h5 class="mb-0"><i class="fas fa-wallet me-2"></i>Minha Carteira</h5>
                </div>
                <div class="card-body p-4">
                    <div class="row align-items-center">
                        <div class="col-md-6 text-center text-md-start mb-3 mb-md-0">
                            <small class="text-muted text-uppercase fw-bold">Saldo Disponível</small>
                            <div class="display-4 fw-bold text-success">
                                @Model.Credits <span class="fs-4 text-muted">Créditos</span>
                            </div>
                            <p class="mb-0 text-muted small">
                                <i class="fas fa-check-circle text-success"></i> Válidos por 5 anos
                            </p>
                        </div>
                        <div class="col-md-6 text-center text-md-end">
                            <a href="/Pagamento/SelecaoPlano" class="btn btn-warning btn-lg shadow-sm fw-bold">
                                <i class="fas fa-plus-circle me-2"></i> Recarregar Agora
                            </a>
                        </div>
                    </div>

                    <hr class="my-4">

                    <!-- Cota Gratuita -->
                    <div class="row align-items-center">
                        <div class="col-12">
                            <div class="d-flex justify-content-between align-items-end mb-1">
                                <span class="fw-bold text-secondary">
                                    <i class="fas fa-gift me-1 text-warning"></i> Cota Gratuita Vitalícia
                                </span>
                                <span class="small text-muted">
                                    @freeUsed de @freeLimit usados (@freeRemaining restantes)
                                </span>
                            </div>
                            <div class="progress" style="height: 10px;">
                                <div class="progress-bar @(freeRemaining == 0 ? "bg-secondary" : "bg-warning")" 
                                     role="progressbar" 
                                     style="width: @freePercent%">
                                </div>
                            </div>
                            @if (freeRemaining == 0)
                            {
                                <small class="text-danger mt-1 d-block">
                                    <i class="fas fa-exclamation-circle"></i> Cota esgotada. Use seus créditos para gerar mais.
                                </small>
                            }
                        </div>
                    </div>
                </div>
            </div>

            <!-- Histórico Recente -->
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
                    <h5 class="mb-0 text-primary">
                        <i class="fas fa-history me-2"></i>Últimos QR Codes
                    </h5>
                    <a href="/Account/History" class="btn btn-outline-primary btn-sm">
                        Ver Todos
                    </a>
                </div>
                <div class="card-body p-0">
                    @if (qrHistory.Any())
                    {
                        <div class="list-group list-group-flush">
                            @foreach (var qr in qrHistory.Take(5))
                            {
                                <div class="list-group-item px-4 py-3">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 bg-light rounded p-2 me-3">
                                            <i class="fas fa-qrcode fa-2x text-secondary"></i>
                                        </div>
                                        <div class="flex-grow-1">
                                            <h6 class="mb-1 fw-bold text-uppercase text-primary">@qr.Type</h6>
                                            <p class="mb-0 text-muted small text-truncate" style="max-width: 300px;">
                                                @qr.Content
                                            </p>
                                            <small class="text-muted">
                                                <i class="far fa-clock me-1"></i> @qr.CreatedAt.ToLocalTime().ToString("dd/MM/yyyy HH:mm")
                                            </small>
                                        </div>
                                        <div>
                                            <a href="/api/QR/Download/@qr.Id" class="btn btn-sm btn-outline-secondary" title="Baixar PNG">
                                                <i class="fas fa-download"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            }
                        </div>
                    }
                    else
                    {
                        <div class="text-center py-5">
                            <i class="fas fa-ghost fa-3x text-muted mb-3 opacity-25"></i>
                            <p class="text-muted">Nenhum QR Code gerado ainda.</p>
                            <a href="/" class="btn btn-primary btn-sm">Criar o Primeiro</a>
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>
</div>