{% extends "base.html" %}
{% block content %}
<div class="min-h-screen bg-dark flex flex-col">
    <div class="flex-grow px-4">
        <div class="mb-8 flex justify-center pt-8">
            <img src="/static/images/logo.svg" alt="VPN Service Logo" class="h-16">
        </div>
        
        <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 will be active shortly. Please follow the instructions below to set up your VPN connection. If something Goes wrong please reach out. 
                </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>
                    <button id="download-config" class="mt-2 w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded transition-colors">
                        Download 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>Paste your keys in.</li>
                        <li>Activate the tunnel to connect</li>
                    </ol>
                </div>
 
                <div class="space-y-2 text-sm text-gray-400">
                    <p>• Thank you for using our service.</p>
                    <p>• Please reach out if there are any issues. The contact form is at the bottom of the page.</p>
                    <p>• For extra security, clear your browser data.</p>
                </div>
 
                <div class="mt-8 text-center">
                    <a href="/" class="text-blue-400 hover:text-blue-300">Return to Home</a>
                </div>
            </div>
        </div>
    </div>
 
    <footer class="bg-dark-lighter py-4 mt-8">
        <div class="container mx-auto text-center">
            <p class="text-gray-400">
                Need help? Contact us at <a href="mailto:support@vpnservice.com" class="text-blue-400 hover:text-blue-300">support@vpnservice.com</a>
            </p>
        </div>
    </footer>
 </div>


<script type="module">
    import { WireGuard } from '/static/js/utils/wireguard.js';

    document.addEventListener('DOMContentLoaded', async function () {
        const userId = new URLSearchParams(window.location.search).get('userId');
        if (!userId) {
            console.error('No user ID found in URL');
            return;
        }

        try {
            // Get stored keys from localStorage
            const storedKeys = localStorage.getItem(`vpn_keys_${userId}`);
            if (!storedKeys) {
                console.error('No key data found');
                return;
            }
            const keyData = JSON.parse(storedKeys);

            // Fetch VPN configuration from server
            const response = await fetch(`/api/vpn-config/${userId}`);
            if (!response.ok) {
                throw new Error('Failed to fetch VPN configuration');
            }

            const data = await response.json();
            if (!data.configText) {
                throw new Error('No configuration received');
            }

            // Show configuration section
            const configSection = document.getElementById('config-section');
            configSection.classList.remove('hidden');

            // Display config
            const configText = data.configText;
            document.getElementById('wireguard-config').textContent = configText;

            // Setup copy button
            document.getElementById('copy-config').addEventListener('click', async function () {
                try {
                    await navigator.clipboard.writeText(configText);
                    this.textContent = 'Copied!';
                    setTimeout(() => {
                        this.textContent = 'Copy Configuration';
                    }, 2000);
                } catch (error) {
                    console.error('Failed to copy config:', error);
                    alert('Failed to copy configuration. Please try manually copying.');
                }
            });

            // Setup download button
            document.getElementById('download-config').addEventListener('click', function () {
                try {
                    const blob = new Blob([configText], { type: 'text/plain' });
                    const url = URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = 'wireguard.conf';
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    URL.revokeObjectURL(url);
                } catch (error) {
                    console.error('Failed to download config:', error);
                    alert('Failed to download configuration. Please try copying manually.');
                }
            });

            // Clear stored keys
            localStorage.removeItem(`vpn_keys_${userId}`);

        } catch (error) {
            console.error('Error setting up configuration:', error);
            alert('Failed to load VPN configuration. Please contact support.');
        }
    });
</script>
{% endblock %}