{% extends "core/base.html" %}
{% load static %}
{% load currency_filters %}

{% block title %}Checkout — {{ plan.name }} — SwiftPOS{% endblock %}
{% block topbar_title %}Checkout{% endblock %}

{% block extra_css %}
<style>
.checkout-wrap { max-width: 820px; margin: 0 auto; }
.checkout-card {
    background: #fff; border-radius: 18px;
    border: 1px solid #e2e8f0; padding: 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.checkout-title { font-size: 1.3rem; font-weight: 800; color: #0f172a; margin-bottom: 1.5rem; }
.billing-option {
    display: flex; align-items: center; justify-content: space-between;
    border: 2px solid #e2e8f0;
    border-radius: 12px; padding: 1rem 1.25rem;
    margin-bottom: 0.75rem; cursor: pointer;
    transition: all 0.2s; user-select: none;
}
.billing-option:hover { border-color: #7c3aed; background: #faf5ff; }
.billing-option.selected { border-color: #7c3aed; background: #faf5ff; }
.billing-option input { margin-right: 0.75rem; accent-color: #7c3aed; width: 18px; height: 18px; }
.billing-label { font-size: 0.9rem; font-weight: 600; color: #0f172a; }
.billing-sub { font-size: 0.78rem; color: #64748b; }
.billing-price { font-size: 1rem; font-weight: 800; color: #7c3aed; }

.promo-group { display: flex; gap: 0.5rem; margin-top: 1.5rem; }
.promo-input {
    flex: 1; padding: 0.7rem 1rem; border: 1.5px solid #e2e8f0;
    border-radius: 10px; font-size: 0.9rem; font-family: inherit;
    text-transform: uppercase; letter-spacing: 0.05em;
    transition: border-color 0.2s;
}
.promo-input:focus { outline: none; border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,0.1); }
.btn-promo {
    padding: 0.7rem 1.25rem; border-radius: 10px; border: none;
    background: #0f172a; color: #fff; font-size: 0.85rem; font-weight: 600;
    cursor: pointer; font-family: inherit; transition: background 0.2s;
    white-space: nowrap;
}
.btn-promo:hover { background: #1e293b; }

.order-summary {
    background: #f8fafc; border-radius: 14px;
    padding: 1.25rem 1.5rem; margin-top: 1.5rem;
}
.summary-row { display: flex; justify-content: space-between; font-size: 0.88rem; margin-bottom: 0.5rem; }
.summary-divider { border: none; border-top: 1px solid #e2e8f0; margin: 0.75rem 0; }
.summary-total { font-size: 1.1rem; font-weight: 800; color: #0f172a; }
.summary-discount { color: #10b981; }
.promo-result { margin-top: 0.5rem; font-size: 0.83rem; border-radius: 8px; padding: 0.5rem 0.75rem; }
.promo-success { background: #d1fae5; color: #065f46; }
.promo-error { background: #fee2e2; color: #991b1b; }

.btn-pay {
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    width: 100%; padding: 1rem;
    background: linear-gradient(135deg, #059669, #10b981);
    color: #fff; border: none; border-radius: 14px;
    font-size: 1rem; font-weight: 800; font-family: inherit;
    cursor: pointer; margin-top: 1.5rem;
    transition: opacity 0.2s, transform 0.15s;
}
.btn-pay:hover { opacity: 0.92; transform: translateY(-1px); }
.btn-pay:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.action-badge { display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.3rem 0.8rem; border-radius: 20px;
    font-size: 0.75rem; font-weight: 700; margin-bottom: 1rem; }
.badge-upgrade { background: #dbeafe; color: #1e40af; }
.badge-downgrade { background: #fef3c7; color: #92400e; }
.badge-renew { background: #d1fae5; color: #065f46; }
.badge-new { background: #ede9fe; color: #5b21b6; }

.secure-note { text-align: center; font-size: 0.76rem; color: #94a3b8; margin-top: 0.75rem; }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-3">
<div class="checkout-wrap">

    <div class="d-flex align-items-center gap-2 mb-3">
        <a href="{% url 'subscriptions:choose_plan' %}" class="btn btn-sm btn-outline-secondary rounded-pill">
            <i class="fas fa-arrow-left"></i> Back
        </a>
        <h1 class="fw-bold fs-5 mb-0">Checkout</h1>
    </div>

    <!-- Action Badge -->
    {% if action == 'upgrade' %}
    <div class="action-badge badge-upgrade"><i class="fas fa-arrow-up"></i> Upgrading to {{ plan.name }}</div>
    {% elif action == 'downgrade' %}
    <div class="action-badge badge-downgrade"><i class="fas fa-arrow-down"></i> Downgrading to {{ plan.name }}</div>
    {% elif action == 'renew' %}
    <div class="action-badge badge-renew"><i class="fas fa-redo"></i> Renewing {{ plan.name }}</div>
    {% else %}
    <div class="action-badge badge-new"><i class="fas fa-bolt"></i> New subscription — {{ plan.name }}</div>
    {% endif %}

    {% if action == 'downgrade' %}
    <!-- DOWNGRADE: no payment needed -->
    <div class="checkout-card">
        <h2 class="checkout-title"><i class="fas fa-info-circle text-warning me-2"></i>Downgrade Notice</h2>
        <p style="font-size:.9rem;color:#64748b;line-height:1.7;">
            Downgrading to <strong>{{ plan.name }}</strong> will take effect when your <strong>{{ current_sub.plan.name }}</strong>
            subscription expires on <strong>{{ current_sub.expiry_date|date:"d M Y" }}</strong>.
        </p>
        <p style="font-size:.9rem;color:#64748b;line-height:1.7;margin-top:.75rem;">
            No payment is required for downgrades. Your current plan remains active until that date.
        </p>
        <form method="post">
            {% csrf_token %}
            <input type="hidden" name="billing_cycle" value="{{ current_sub.billing_cycle }}">
            <button type="submit" class="btn-pay" style="background: linear-gradient(135deg, #f59e0b, #d97706);">
                <i class="fas fa-calendar-check"></i> Schedule Downgrade to {{ plan.name }}
            </button>
        </form>
    </div>

    {% else %}
    <!-- UPGRADE / RENEW / NEW: payment required -->
    <form method="post" id="checkoutForm">
        {% csrf_token %}
        <div class="checkout-card">
            <h2 class="checkout-title">1. Choose Billing Cycle</h2>

            {% for opt in billing_options %}
            <label class="billing-option {% if forloop.first %}selected{% endif %}" id="opt-{{ opt.key }}">
                <div style="display:flex;align-items:center;gap:.75rem;">
                    <input type="radio" name="billing_cycle" value="{{ opt.key }}"
                           {% if forloop.first %}checked{% endif %}
                           data-price="{{ opt.price }}"
                           data-label="{{ opt.label }}"
                           onchange="updateSummary()">
                    <div>
                        <div class="billing-label">{{ opt.label }}</div>
                        <div class="billing-sub">{{ opt.key|title }} billing</div>
                    </div>
                </div>
                <div class="billing-price">₦{{ opt.price|currency:0 }}</div>
            </label>
            {% endfor %}
        </div>

        <div class="checkout-card mt-3">
            <h2 class="checkout-title">2. Have a Promo Code? (Optional)</h2>
            <div class="promo-group">
                <input type="text" class="promo-input" id="promoInput" placeholder="Enter promo code" autocomplete="off" style="text-transform:uppercase;">
                <button type="button" class="btn-promo" onclick="applyPromo()">Apply</button>
            </div>
            <input type="hidden" name="promo_code" id="promoCodeHidden" value="">
            <div id="promoResult"></div>
        </div>

        <div class="checkout-card mt-3">
            <h2 class="checkout-title">3. Order Summary</h2>
            <div class="order-summary">
                <div class="summary-row">
                    <span>Plan</span>
                    <span><strong>{{ plan.name }}</strong></span>
                </div>
                <div class="summary-row">
                    <span>Billing Cycle</span>
                    <span id="summCycle">Monthly</span>
                </div>
                <div class="summary-row">
                    <span>Subtotal</span>
                    <span>₦<span id="summBase">{{ billing_options.0.price|currency:0 }}</span></span>
                </div>
                <div class="summary-row summary-discount" id="discountRow" style="display:none;">
                    <span>Discount (promo)</span>
                    <span>-₦<span id="summDiscount">0</span></span>
                </div>
                <hr class="summary-divider">
                <div class="summary-row summary-total">
                    <span>Total Due</span>
                    <span>₦<span id="summTotal">{{ billing_options.0.price|currency:0 }}</span></span>
                </div>
            </div>

            <button type="submit" class="btn-pay" id="payBtn">
                <i class="fas fa-lock"></i> Pay Securely via Monnify
            </button>
            <p class="secure-note">
                <i class="fas fa-shield-alt"></i> Secured by Monnify — CBN Licensed Payment Gateway.
                Card, Transfer, USSD accepted.
            </p>
        </div>
    </form>
    {% endif %}

</div>
</div>
{% endblock %}

{% block extra_js %}
<script type="text/javascript" src="https://sdk.monnify.com/plugin/monnify.js"></script>
<script>
var currentBasePrice = {{ billing_options.0.price|default:0 }};
var currentDiscount = 0;
var planId = {{ plan.id }};

function fmt(n) {
    return parseFloat(n).toLocaleString('en-NG', {minimumFractionDigits: 0, maximumFractionDigits: 0});
}

function updateSummary() {
    var checked = document.querySelector('input[name="billing_cycle"]:checked');
    if (!checked) return;
    currentBasePrice = parseFloat(checked.dataset.price) || 0;
    currentDiscount = 0;
    document.getElementById('promoResult').innerHTML = '';
    document.getElementById('promoCodeHidden').value = '';
    document.getElementById('promoInput').value = '';

    document.getElementById('summCycle').textContent = checked.dataset.label;
    document.getElementById('summBase').textContent = fmt(currentBasePrice);
    document.getElementById('discountRow').style.display = 'none';
    document.getElementById('summTotal').textContent = fmt(currentBasePrice);

    // Highlight selected option
    document.querySelectorAll('.billing-option').forEach(o => o.classList.remove('selected'));
    checked.closest('.billing-option').classList.add('selected');
}

function applyPromo() {
    var code = document.getElementById('promoInput').value.trim().toUpperCase();
    var cycle = (document.querySelector('input[name="billing_cycle"]:checked') || {}).value || 'monthly';
    var resultEl = document.getElementById('promoResult');
    if (!code) { resultEl.innerHTML = '<div class="promo-result promo-error">Please enter a promo code.</div>'; return; }

    fetch('{% url "subscriptions:validate_promo" %}', {
        method: 'POST',
        headers: {'Content-Type': 'application/json', 'X-CSRFToken': '{{ csrf_token }}'},
        body: JSON.stringify({code, plan_id: planId, billing_cycle: cycle})
    })
    .then(r => r.json())
    .then(d => {
        if (d.ok) {
            currentDiscount = d.discount_amount;
            document.getElementById('promoCodeHidden').value = code;
            document.getElementById('summDiscount').textContent = fmt(currentDiscount);
            document.getElementById('discountRow').style.display = 'flex';
            document.getElementById('summTotal').textContent = fmt(d.final_amount);
            resultEl.innerHTML = '<div class="promo-result promo-success"><i class="fas fa-check-circle me-1"></i>' + d.message + '</div>';
        } else {
            currentDiscount = 0;
            document.getElementById('promoCodeHidden').value = '';
            document.getElementById('discountRow').style.display = 'none';
            document.getElementById('summTotal').textContent = fmt(currentBasePrice);
            resultEl.innerHTML = '<div class="promo-result promo-error"><i class="fas fa-times-circle me-1"></i>' + d.message + '</div>';
        }
    })
    .catch(() => { resultEl.innerHTML = '<div class="promo-result promo-error">Network error. Try again.</div>'; });
}

document.getElementById('checkoutForm') && document.getElementById('checkoutForm').addEventListener('submit', function(e) {
    e.preventDefault(); // Prevent standard POST redirect
    var btn = document.getElementById('payBtn');
    var originalBtnHTML = btn ? btn.innerHTML : '';
    if (btn) { btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Initializing...'; btn.disabled = true; }
    
    var formData = new FormData(this);
    
    fetch('', { // POST to current URL
        method: 'POST',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRFToken': '{{ csrf_token }}' // Use the template's CSRF token
        },
        body: formData
    })
    .then(r => r.json())
    .then(data => {
        if (!data.ok) {
            alert(data.message || 'Payment initiation failed.');
            if (btn) { btn.innerHTML = originalBtnHTML; btn.disabled = false; }
            return;
        }
        
        // If it was a completely free transaction (e.g. 100% off), skip Monnify
        if (data.free) {
            window.location.href = data.redirect_url;
            return;
        }

        // Initialize Monnify Web SDK Overlay
        MonnifySDK.initialize({
            amount: data.amount,
            currency: "NGN",
            reference: data.reference,
            customerName: data.customer_name,
            customerEmail: data.customer_email,
            apiKey: "{{ monnify_api_key }}",
            contractCode: "{{ monnify_contract_code }}",
            paymentDescription: "SwiftPOS Subscription",
            onComplete: function(response) {
                // Payment successful inside Monnify popup, instantly redirect to verification
                if (btn) { btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Verifying...'; }
                window.location.href = "{% url 'subscriptions:payment_callback' %}?paymentReference=" + encodeURIComponent(data.reference);
            },
            onClose: function(cb_data) {
                // User closed the popup manually
                if (btn) { btn.innerHTML = originalBtnHTML; btn.disabled = false; }
            }
        });
    })
    .catch(error => {
        console.error('Error:', error);
        alert('A network error occurred. Please try again.');
        if (btn) { btn.innerHTML = originalBtnHTML; btn.disabled = false; }
    });
});
</script>
{% endblock %}