{% extends 'base.html' %}
{% load static %}

{% block title %}Buy AI Credits - 3ncount{% endblock %}

{% block page_pretitle %}AI Credits{% endblock %}
{% block page_title %}Top Up Your Credits{% endblock %}

{% block extra_css %}
<style>
    .credit-balance-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 16px;
        padding: 2.5rem;
        margin-bottom: 2rem;
        box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
    }
    
    .balance-amount {
        font-size: 3.5rem;
        font-weight: bold;
        margin: 1rem 0;
    }
    
    .balance-subtitle {
        opacity: 0.9;
        font-size: 1.1rem;
    }
    
    .low-balance-warning {
        background: #fef3c7;
        border-left: 4px solid #f59e0b;
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 2rem;
    }
    
    .credit-package-card {
        border-radius: 12px;
        transition: all 0.3s ease;
        height: 100%;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    
    .credit-package-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    }
    
    .credit-package-card.popular {
        border: 3px solid #10b981;
    }
    
    .best-value-badge {
        position: absolute;
        top: 15px;
        right: -35px;
        background: #10b981;
        color: white;
        padding: 5px 40px;
        transform: rotate(45deg);
        font-size: 11px;
        font-weight: bold;
        text-transform: uppercase;
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    }
    
    .credit-amount {
        font-size: 2.5rem;
        font-weight: bold;
        color: #667eea;
    }
    
    .credit-price {
        font-size: 2rem;
        font-weight: bold;
        color: #2d3748;
    }
    
    .price-per-1k {
        color: #10b981;
        font-weight: 600;
        font-size: 0.95rem;
    }
    
    .payment-gateway-selector {
        margin: 1.5rem 0;
    }
    
    .gateway-option {
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        padding: 1.5rem;
        cursor: pointer;
        transition: all 0.3s ease;
        text-align: center;
    }
    
    .gateway-option:hover {
        border-color: #667eea;
        background: #f8f9ff;
    }
    
    .gateway-option.selected {
        border-color: #667eea;
        background: #f8f9ff;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
    }
    
    .gateway-logo {
        height: 40px;
        margin-bottom: 0.5rem;
    }
    
    .gateway-features {
        font-size: 0.85rem;
        color: #6c757d;
        margin-top: 0.5rem;
    }
    
    .purchase-button {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        color: white;
        padding: 12px 24px;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.3s ease;
        width: 100%;
    }
    
    .purchase-button:hover {
        transform: scale(1.02);
        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
    }
    
    .usage-history {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        margin-top: 2rem;
    }
    
    .usage-bar {
        background: #e5e7eb;
        border-radius: 50px;
        height: 12px;
        overflow: hidden;
        margin: 1rem 0;
    }
    
    .usage-fill {
        background: linear-gradient(90deg, #10b981 0%, #059669 100%);
        height: 100%;
        transition: width 0.5s ease;
        border-radius: 50px;
    }
    
    .usage-fill.warning {
        background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
    }
    
    .usage-fill.danger {
        background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
    }
</style>
{% endblock %}

{% block content %}

<!-- Current Balance Card -->
<div class="credit-balance-card text-center">
    <div class="balance-subtitle">Your Current Balance</div>
    <div class="balance-amount" id="current-balance">
        {{ credit_balance.balance|floatformat:0 }}
    </div>
    <div class="balance-subtitle">
        <i class="ti ti-coins me-2"></i>AI Credits Available
    </div>
    
    {% if credit_balance.balance < 1000 %}
    <div class="mt-3">
        <span class="badge bg-warning" style="font-size: 1rem; padding: 0.5rem 1rem;">
            <i class="ti ti-alert-circle me-2"></i>Low Balance - Consider Topping Up
        </span>
    </div>
    {% endif %}
</div>

<!-- Usage Statistics -->
<div class="row mb-4">
    <div class="col-md-4">
        <div class="card">
            <div class="card-body text-center">
                <i class="ti ti-chart-line" style="font-size: 2rem; color: #667eea;"></i>
                <h3 class="mt-2 mb-0">{{ usage_stats.total_used|floatformat:0 }}</h3>
                <p class="text-muted mb-0">Credits Used This Month</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-body text-center">
                <i class="ti ti-clock" style="font-size: 2rem; color: #10b981;"></i>
                <h3 class="mt-2 mb-0">{{ usage_stats.days_until_renewal }}</h3>
                <p class="text-muted mb-0">Days Until Renewal</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-body text-center">
                <i class="ti ti-trending-up" style="font-size: 2rem; color: #f59e0b;"></i>
                <h3 class="mt-2 mb-0">{{ usage_stats.avg_daily|floatformat:0 }}</h3>
                <p class="text-muted mb-0">Avg. Daily Usage</p>
            </div>
        </div>
    </div>
</div>

<!-- Low Balance Warning -->
{% if credit_balance.balance < 1000 %}
<div class="low-balance-warning">
    <div class="d-flex align-items-center">
        <i class="ti ti-alert-triangle me-3" style="font-size: 2rem; color: #f59e0b;"></i>
        <div>
            <h4 class="mb-1" style="color: #92400e;">Running Low on Credits</h4>
            <p class="mb-0" style="color: #78350f;">
                You have less than 1,000 credits remaining. Top up now to avoid service interruption.
            </p>
        </div>
    </div>
</div>
{% endif %}

<!-- Credit Packages -->
<div class="row mb-4">
    <div class="col-12">
        <h3 class="mb-4">
            <i class="ti ti-packages me-2"></i>Choose Your Credit Package
        </h3>
    </div>
</div>

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4 mb-5" x-data="{ selectedPackage: null, gateway: 'stripe' }">
    {% for package in packages %}
    <div class="col">
        <div class="card credit-package-card {% if package.is_popular %}popular{% endif %}" 
             @click="selectedPackage = {{ package.id }}"
             :class="selectedPackage === {{ package.id }} ? 'border-primary' : ''">
            
            {% if package.is_popular %}
            <div class="best-value-badge">Best Value</div>
            {% endif %}
            
            <div class="card-body text-center">
                <div class="credit-amount mb-2">
                    {{ package.credits|floatformat:0 }}
                </div>
                <div class="text-muted mb-3">Credits</div>
                
                <div class="credit-price mb-2">
                    RM {{ package.price|floatformat:2 }}
                </div>
                
                <div class="price-per-1k">
                    <i class="ti ti-percentage"></i> RM {{ package.price_per_1k|floatformat:3 }} per 1K
                </div>
                
                {% if package.promotional_price %}
                <div class="mt-3">
                    <span class="badge bg-success">
                        <i class="ti ti-discount-2"></i> 
                        Save {{ package.discount_percentage|floatformat:0 }}%
                    </span>
                </div>
                {% endif %}
                
                <div class="mt-4">
                    <button class="btn btn-outline-primary" 
                            @click="selectedPackage = {{ package.id }}"
                            :class="selectedPackage === {{ package.id }} ? 'btn-primary' : 'btn-outline-primary'">
                        <i class="ti ti-check me-2" x-show="selectedPackage === {{ package.id }}"></i>
                        <span x-text="selectedPackage === {{ package.id }} ? 'Selected' : 'Select'"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
    
    <!-- Purchase Panel (shows when package selected) -->
    <div class="col-12" x-show="selectedPackage" x-transition>
        <div class="card" style="border: 2px solid #667eea;">
            <div class="card-body">
                <h4 class="mb-4">
                    <i class="ti ti-credit-card me-2"></i>Payment Method
                </h4>
                
                <div class="payment-gateway-selector">
                    <!-- Stripe Option (Default and Only Gateway) -->
                    <div class="gateway-option selected">
                        <img src="https://stripe.com/img/v3/home/social.png" alt="Stripe" class="gateway-logo">
                        <div class="fw-bold">Stripe</div>
                        <div class="gateway-features">
                            <i class="ti ti-check"></i> Credit/Debit Cards<br>
                            <i class="ti ti-check"></i> FPX Online Banking<br>
                            <i class="ti ti-check"></i> Secure & Fast
                        </div>
                    </div>
                </div>
                
                <!-- Purchase Summary -->
                <div class="alert alert-info">
                    <h5 class="mb-2">
                        <i class="ti ti-info-circle me-2"></i>Purchase Summary
                    </h5>
                    <div class="d-flex justify-content-between mb-2">
                        <span>Package:</span>
                        <strong>
                            <span x-text="selectedPackage ? document.querySelector('[data-package-id=\'' + selectedPackage + '\']')?.dataset.credits : '0'"></span> Credits
                        </strong>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>Amount:</span>
                        <strong>
                            RM <span x-text="selectedPackage ? document.querySelector('[data-package-id=\'' + selectedPackage + '\']')?.dataset.price : '0.00'"></span>
                        </strong>
                    </div>
                    <div class="d-flex justify-content-between">
                        <span>Payment Gateway:</span>
                        <strong>Stripe</strong>
                    </div>
                </div>
                
                <!-- Purchase Button -->
                <form method="POST" action="" id="purchase-form">
                    {% csrf_token %}
                    <input type="hidden" name="package_id" x-model="selectedPackage">
                    <input type="hidden" name="gateway" value="stripe">
                    
                    <button type="submit" class="purchase-button" @click="processPurchase($event)">
                        <i class="ti ti-shopping-cart me-2"></i>
                        Complete Purchase
                    </button>
                </form>
                
                <div class="text-center mt-3 text-muted">
                    <i class="ti ti-lock"></i> Secure payment powered by Stripe
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Hidden data attributes for Alpine.js -->
{% for package in packages %}
<div style="display: none;" 
     data-package-id="{{ package.id }}"
     data-credits="{{ package.credits|floatformat:0 }}"
     data-price="{{ package.price|floatformat:2 }}">
</div>
{% endfor %}

<!-- Recent Transactions -->
<div class="card">
    <div class="card-header">
        <h3 class="card-title">
            <i class="ti ti-history me-2"></i>Recent Credit Transactions
        </h3>
    </div>
    <div class="card-body">
        {% if recent_transactions %}
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Type</th>
                        <th>Description</th>
                        <th class="text-end">Amount</th>
                        <th class="text-end">Balance After</th>
                    </tr>
                </thead>
                <tbody>
                    {% for transaction in recent_transactions %}
                    <tr>
                        <td>{{ transaction.created_at|date:"d M Y H:i" }}</td>
                        <td>
                            <span class="badge bg-{% if transaction.transaction_type == 'PURCHASE' %}success{% elif transaction.transaction_type == 'USAGE' %}info{% else %}warning{% endif %}">
                                {{ transaction.get_transaction_type_display }}
                            </span>
                        </td>
                        <td>{{ transaction.description }}</td>
                        <td class="text-end">
                            <span class="{% if transaction.transaction_type == 'PURCHASE' %}text-success{% else %}text-danger{% endif %}">
                                {% if transaction.transaction_type == 'PURCHASE' %}+{% else %}-{% endif %}{{ transaction.amount|floatformat:0 }}
                            </span>
                        </td>
                        <td class="text-end">{{ transaction.balance_after|floatformat:0 }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="empty">
            <p class="empty-title">No transactions yet</p>
            <p class="empty-subtitle text-muted">
                Your credit transactions will appear here
            </p>
        </div>
        {% endif %}
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
    function processPurchase(event) {
        event.preventDefault();
        
        const form = document.getElementById('purchase-form');
        const packageId = form.querySelector('[name="package_id"]').value;
        const gateway = 'stripe';
        
        if (!packageId) {
            alert('Please select a credit package');
            return;
        }
        
        // Show loading state
        const button = event.target.closest('button');
        const originalHTML = button.innerHTML;
        button.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Processing...';
        button.disabled = true;
        
        // FIXED: Updated URL to match correct routing path
        fetch(`/organization/credits/purchase/${packageId}/`, {
            method: 'POST',
            headers: {
                'X-CSRFToken': form.querySelector('[name="csrfmiddlewaretoken"]').value,
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ gateway: gateway })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Redirect to payment gateway
                if (data.redirect_url) {
                    window.location.href = data.redirect_url;
                } else {
                    alert('Payment initiated successfully!');
                    location.reload();
                }
            } else {
                alert(data.error || 'Purchase failed. Please try again.');
                button.innerHTML = originalHTML;
                button.disabled = false;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred. Please try again.');
            button.innerHTML = originalHTML;
            button.disabled = false;
        });
    }
</script>
{% endblock %}