{% extends "base.html" %}
{% block title %}Booking Processing -- {{ PLATFORM_NAME }}{% endblock %}
{% block content %}
<div style="min-height:60vh;display:flex;align-items:center;justify-content:center;padding:var(--space-8);">
    <div class="card" style="max-width:480px;width:100%;text-align:center;">
        <div class="loading mb-6"><div class="spinner" id="loadingSpinner"></div></div>
        <h2 id="statusTitle" style="margin-bottom:var(--space-3);">Processing Your Booking</h2>
        <p class="text-secondary" id="statusMessage">Verifying your payment. Please wait...</p>
        <div id="successActions" class="hidden mt-6">
            <a href="/dashboard/" class="btn btn--primary btn--lg btn--block">Go to Dashboard</a>
        </div>
        <div id="failedActions" class="hidden mt-6">
            <a href="/" class="btn btn--secondary btn--block">Try Again</a>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
const reference = '{{ reference }}';
if (reference) {
    let attempts = 0;
    const poll = setInterval(async () => {
        attempts++;
        try {
            const resp = await fetch('/payments/booking/status/' + reference + '/');
            const data = await resp.json();
            if (data.status === 'verified') {
                clearInterval(poll);
                document.getElementById('loadingSpinner').style.display = 'none';
                document.getElementById('statusTitle').textContent = 'Booking Confirmed';
                document.getElementById('statusMessage').textContent = 'Your seller account is ready. Welcome to FlashSale.';
                document.getElementById('successActions').classList.remove('hidden');
            } else if (data.status === 'failed' || attempts > 30) {
                clearInterval(poll);
                document.getElementById('loadingSpinner').style.display = 'none';
                document.getElementById('statusTitle').textContent = 'Booking Issue';
                document.getElementById('statusMessage').textContent = 'Payment could not be confirmed. Please contact support.';
                document.getElementById('failedActions').classList.remove('hidden');
            }
        } catch (e) {
            if (attempts > 30) clearInterval(poll);
        }
    }, 3000);
}
</script>
{% endblock %}