{% extends "base.html" %}

{% block content %}
<div class="min-h-screen bg-dark py-8 px-4">
    <div class="max-w-2xl mx-auto bg-dark-lighter rounded-lg shadow-lg p-6">
        <h1 class="text-2xl font-bold mb-4 text-center">Payment Successful!</h1>
        
        <div class="mb-8">
            <p class="text-gray-300 text-center mb-4">
                Your VPN subscription is now active. Please follow the instructions below to set up your VPN connection.
            </p>
        </div>

        <div class="space-y-6">
            <!-- WireGuard Configuration Section -->
            <div id="config-section" class="hidden">
                <h2 class="text-xl font-semibold mb-2">Your WireGuard Configuration</h2>
                <pre id="wireguard-config" class="bg-dark p-4 rounded-md font-mono text-sm overflow-x-auto"></pre>
                <button 
                    id="copy-config" 
                    class="mt-2 w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-colors"
                >
                    Copy Configuration
                </button>
            </div>

            <!-- Installation Instructions -->
            <div class="space-y-4">
                <h2 class="text-xl font-semibold">Installation Instructions</h2>
                <ol class="list-decimal list-inside space-y-2 text-gray-300">
                    <li>Download WireGuard for your platform:
                        <div class="ml-6 mt-2 space-y-2">
                            <a href="https://www.wireguard.com/install/" 
                               target="_blank"
                               class="text-blue-400 hover:text-blue-300 block">
                               Official WireGuard Downloads
                            </a>
                        </div>
                    </li>
                    <li>Create a new tunnel in WireGuard</li>
                    <li>Copy the configuration above and paste it into the new tunnel</li>
                    <li>Activate the tunnel to connect</li>
                </ol>
            </div>

            <div class="space-y-2 text-sm text-gray-400">
                <p>• Save your configuration securely - you'll need it to reconnect</p>
                <p>• Your private key is stored in your browser's local storage</p>
                <p>• For security, clear your browser data after saving the configuration</p>
            </div>
        </div>

        <div class="mt-8 text-center">
            <a href="/" class="text-blue-400 hover:text-blue-300">
                Return to Home
            </a>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const userId = new URLSearchParams(window.location.search).get('userId');
    if (userId) {
        // Retrieve keys from localStorage
        const keyData = localStorage.getItem(`vpn_keys_${userId}`);
        if (keyData) {
            const keys = JSON.parse(keyData);
            
            // Make config section visible
            document.getElementById('config-section').classList.remove('hidden');
            
            // Get server details from response
            fetch(`/api/subscription/config?userId=${userId}`)
                .then(response => response.json())
                .then(data => {
                    const config = `[Interface]
PrivateKey = ${keys.privateKey}
Address = ${data.clientIp}/24
DNS = 1.1.1.1

[Peer]
PublicKey = ${data.serverPublicKey}
Endpoint = ${data.serverEndpoint}:51820
AllowedIPs = 0.0.0.0/0
PersistentKeepalive = 25`;

                    document.getElementById('wireguard-config').textContent = config;
                })
                .catch(error => {
                    console.error('Error fetching configuration:', error);
                });
            
            // Setup copy button
            document.getElementById('copy-config').addEventListener('click', function() {
                const config = document.getElementById('wireguard-config').textContent;
                navigator.clipboard.writeText(config).then(() => {
                    this.textContent = 'Copied!';
                    setTimeout(() => {
                        this.textContent = 'Copy Configuration';
                    }, 2000);
                });
            });
            
            // Clear keys from localStorage after showing config
            localStorage.removeItem(`vpn_keys_${userId}`);
        }
    }
});
</script>
{% endblock %}