@model QRRapidoApp.Models.ViewModels.UpgradeViewModel
@using Microsoft.Extensions.Localization
@inject IStringLocalizer<QRRapidoApp.Resources.SharedResource> Localizer
@{
    ViewData["Title"] = "QR Rapido Premium";
}

<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <!-- Hero Section -->
            <div class="text-center mb-5">
                <h1 class="display-4 text-gradient">
                    <i class="fas fa-rocket"></i> QR Rapido Premium
                </h1>
                <p class="lead text-muted">
                    @Localizer["PremiumAccelerateProductivity"]
                </p>
                <div class="badge bg-success fs-6 p-2">
                    <i class="fas fa-bolt"></i> @Localizer["ThreeTimesFaster"]
                </div>
            </div>

            <!-- Current Status -->
            @if (Model.IsAdFreeActive)
            {
                <div class="alert alert-info border-0 shadow-sm mb-4">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h6><i class="fas fa-info-circle"></i> @Localizer["CurrentStatus"]</h6>
                            <p class="mb-0">
                                @Localizer["YouHave"] <strong>@Model.DaysUntilAdExpiry @Localizer["DaysRemainingNoAds"]</strong>
                                @Localizer["UpgradeNowForever"]
                            </p>
                        </div>
                        <div class="col-md-4 text-end">
                            <div class="badge bg-success p-2">
                                @Model.DaysUntilAdExpiry @Localizer["DaysRemaining"]
                            </div>
                        </div>
                    </div>
                </div>
            }

            <!-- Pricing Card -->
            <div class="row justify-content-center mb-5">
                <div class="col-md-6">
                    <div class="card shadow-lg border-warning">
                        <div class="card-header bg-warning text-dark text-center">
                            <h3 class="mb-0">
                                <i class="fas fa-crown"></i> QR Rapido Premium
                            </h3>
                            <small>@Localizer["MostPopularPlan"]</small>
                        </div>
                        <div class="card-body text-center">
                            <div class="display-3 text-warning fw-bold mb-2">
                                R$ @Model.PremiumPrice.ToString("0.00")
                            </div>
                            <p class="text-muted">@Localizer["PerMonth"]</p>
                            
                            <div class="list-group list-group-flush mb-4">
                                <div class="list-group-item border-0">
                                    <i class="fas fa-infinity text-success me-2"></i>
                                    <strong>@Localizer["UnlimitedQRCodes"]</strong>
                                </div>
                                <div class="list-group-item border-0">
                                    <i class="fas fa-bolt text-success me-2"></i>
                                    <strong>@Localizer["UltraFastGeneration04s"]</strong>
                                </div>
                                <div class="list-group-item border-0">
                                    <i class="fas fa-ban text-success me-2"></i>
                                    <strong>@Localizer["NoAdsForever"]</strong>
                                </div>
                                <div class="list-group-item border-0">
                                    <i class="fas fa-magic text-success me-2"></i>
                                    <strong>@Localizer["DynamicQRCodes"]</strong>
                                </div>
                                <div class="list-group-item border-0">
                                    <i class="fas fa-chart-line text-success me-2"></i>
                                    <strong>@Localizer["RealTimeAnalytics"]</strong>
                                </div>
                                <div class="list-group-item border-0">
                                    <i class="fas fa-headset text-success me-2"></i>
                                    <strong>@Localizer["PrioritySupport"]</strong>
                                </div>
                                <div class="list-group-item border-0">
                                    <i class="fas fa-code text-success me-2"></i>
                                    <strong>@Localizer["DeveloperAPI"]</strong>
                                </div>
                            </div>

                            <button id="upgrade-btn" class="btn btn-warning btn-lg w-100 mb-3">
                                <i class="fas fa-rocket"></i> @Localizer["UpgradeNowButton"]
                                <div class="spinner-border spinner-border-sm ms-2 d-none" role="status"></div>
                            </button>
                            
                            <small class="text-muted">
                                <i class="fas fa-shield-alt"></i> @Localizer["SecurePaymentStripe"]
                                <br>
                                <i class="fas fa-times-circle"></i> @Localizer["CancelAnytime"]
                            </small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Feature Comparison -->
            <div class="card shadow-sm mb-5">
                <div class="card-header">
                    <h4 class="mb-0">
                        <i class="fas fa-balance-scale"></i> @Localizer["PlanComparison"]
                    </h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>@Localizer["Feature"]</th>
                                    <th class="text-center">Free</th>
                                    <th class="text-center bg-warning text-dark">Premium</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>@Localizer["QRCodesPerDay"]</td>
                                    <td class="text-center">50</td>
                                    <td class="text-center"><i class="fas fa-infinity text-success"></i> @Localizer["Unlimited"]</td>
                                </tr>
                                <tr>
                                    <td>@Localizer["GenerationSpeed"]</td>
                                    <td class="text-center">1.2s</td>
                                    <td class="text-center"><strong class="text-success">0.4s</strong></td>
                                </tr>
                                <tr>
                                    <td>@Localizer["Ads"]</td>
                                    <td class="text-center"><i class="fas fa-times text-danger"></i></td>
                                    <td class="text-center"><i class="fas fa-check text-success"></i> @Localizer["NoAds"]</td>
                                </tr>
                                <tr>
                                    <td>@Localizer["DynamicQRCodes"]</td>
                                    <td class="text-center"><i class="fas fa-times text-danger"></i></td>
                                    <td class="text-center"><i class="fas fa-check text-success"></i></td>
                                </tr>
                                <tr>
                                    <td>@Localizer["DetailedAnalytics"]</td>
                                    <td class="text-center"><i class="fas fa-times text-danger"></i></td>
                                    <td class="text-center"><i class="fas fa-check text-success"></i></td>
                                </tr>
                                <tr>
                                    <td>@Localizer["PrioritySupport"]</td>
                                    <td class="text-center"><i class="fas fa-times text-danger"></i></td>
                                    <td class="text-center"><i class="fas fa-check text-success"></i></td>
                                </tr>
                                <tr>
                                    <td>API access</td>
                                    <td class="text-center"><i class="fas fa-times text-danger"></i></td>
                                    <td class="text-center"><i class="fas fa-check text-success"></i></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Speed Demonstration -->
            <div class="card shadow-sm mb-5">
                <div class="card-header bg-primary text-white">
                    <h4 class="mb-0">
                        <i class="fas fa-stopwatch"></i> @Localizer["SpeedDemonstration"]
                    </h4>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-md-4">
                            <div class="card border-danger">
                                <div class="card-body">
                                    <h5 class="text-danger">@Localizer["Competitors"]</h5>
                                    <div class="display-4 text-danger">4.5s</div>
                                    <p class="text-muted">@Localizer["AverageTime"]</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card border-primary">
                                <div class="card-body">
                                    <h5 class="text-primary">QR Rapido Free</h5>
                                    <div class="display-4 text-primary">1.2s</div>
                                    <p class="text-muted">@Localizer["ThreeTimesFaster"]</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card border-success">
                                <div class="card-body">
                                    <h5 class="text-success">QR Rapido Premium</h5>
                                    <div class="display-4 text-success">0.4s</div>
                                    <p class="text-muted">@Localizer["ElevenTimesFaster"]</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- FAQ -->
            <div class="card shadow-sm">
                <div class="card-header">
                    <h4 class="mb-0">
                        <i class="fas fa-question-circle"></i> @Localizer["FAQ"]
                    </h4>
                </div>
                <div class="card-body">
                    <div class="accordion" id="faqAccordion">
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
                                    @Localizer["CanCancelAnytime"]
                                </button>
                            </h2>
                            <div id="faq1" class="accordion-collapse collapse show">
                                <div class="accordion-body">
                                    @Localizer["CancelAnytimeAnswer"]
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
                                    @Localizer["WhatAreDynamicQR"]
                                </button>
                            </h2>
                            <div id="faq2" class="accordion-collapse collapse">
                                <div class="accordion-body">
                                    @Localizer["DynamicQRAnswer"]
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
                                    @Localizer["HowPrioritySupport"]
                                </button>
                            </h2>
                            <div id="faq3" class="accordion-collapse collapse">
                                <div class="accordion-body">
                                    @Localizer["PrioritySupportAnswer"]
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        document.getElementById('upgrade-btn').addEventListener('click', async function() {
            const btn = this;
            const spinner = btn.querySelector('.spinner-border');
            
            btn.disabled = true;
            spinner.classList.remove('d-none');
            
            try {
                const response = await fetch('/Premium/CreateCheckout', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    }
                });
                
                const result = await response.json();
                
                if (result.success) {
                    // Track conversion attempt
                    if (typeof gtag !== 'undefined') {
                        gtag('event', 'begin_checkout', {
                            'event_category': 'Premium',
                            'value': @Model.PremiumPrice,
                            'currency': 'BRL'
                        });
                    }
                    
                    window.location.href = result.url;
                } else {
                    alert('@Localizer["PaymentProcessingError"]' + result.error);
                }
            } catch (error) {
                console.error('Erro:', error);
                alert('@Localizer["PaymentErrorTryAgain"]');
            } finally {
                btn.disabled = false;
                spinner.classList.add('d-none');
            }
        });
        
        // Track page view
        if (typeof gtag !== 'undefined') {
            gtag('event', 'page_view', {
                'page_title': 'Premium Upgrade',
                'page_location': window.location.href
            });
        }
    </script>
}