{% extends "base.html" %}
{% block content %}
<div class="min-h-screen bg-dark py-8 px-4">
    <div class="max-w-4xl mx-auto">
        <div class="flex justify-between items-center mb-8">
            <h1 class="text-2xl font-bold">Dashboard</h1>
            <div class="flex items-center space-x-4">
                <span class="text-gray-400">User ID: {{ user.user_id }}</span>
                <a href="{{ url_for('user.logout') }}" 
                   class="px-4 py-2 bg-red-600 hover:bg-red-700 rounded text-white">
                    Logout
                </a>
            </div>
        </div>

        {% if active_subscription %}
        <div class="bg-dark-lighter rounded-lg p-6 mb-8">
            <h2 class="text-xl font-semibold mb-4">Active Subscription</h2>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <p class="text-gray-400">Status</p>
                    <p class="font-medium">{{ active_subscription.status }}</p>
                </div>
                <div>
                    <p class="text-gray-400">IP Address</p>
                    <p class="font-mono">{{ active_subscription.assigned_ip }}</p>
                </div>
                <div>
                    <p class="text-gray-400">Expires</p>
                    <p class="font-medium">{{ active_subscription.expiry_time.strftime('%Y-%m-%d %H:%M UTC') }}</p>
                </div>
                <div>
                    <p class="text-gray-400">Time Remaining</p>
                    <p class="font-medium">{{ active_subscription.remaining_time }}</p>
                </div>
            </div>
            
            <div class="mt-6 flex space-x-4">
                <button onclick="downloadConfig('{{ active_subscription.id }}')"
                        class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded text-white">
                    Download Config
                </button>
                <button onclick="showQRCode('{{ active_subscription.id }}')"
                        class="px-4 py-2 bg-green-600 hover:bg-green-700 rounded text-white">
                    Show QR Code
                </button>
            </div>
        </div>
        {% else %}
        <div class="bg-dark-lighter rounded-lg p-6 mb-8 text-center">
            <p class="text-gray-400 mb-4">No active subscription</p>
            <a href="{{ url_for('index') }}" 
               class="inline-block px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded text-white">
                Subscribe Now
            </a>
        </div>
        {% endif %}

        <div class="bg-dark-lighter rounded-lg p-6">
            <h2 class="text-xl font-semibold mb-4">Subscription History</h2>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="text-left text-gray-400">
                            <th class="p-2">Status</th>
                            <th class="p-2">Start Date</th>
                            <th class="p-2">End Date</th>
                            <th class="p-2">IP Address</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for sub in subscriptions %}
                        <tr class="border-t border-gray-700">
                            <td class="p-2">{{ sub.status }}</td>
                            <td class="p-2">{{ sub.start_time.strftime('%Y-%m-%d %H:%M UTC') }}</td>
                            <td class="p-2">{{ sub.expiry_time.strftime('%Y-%m-%d %H:%M UTC') }}</td>
                            <td class="p-2 font-mono">{{ sub.assigned_ip }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
async function downloadConfig(subscriptionId) {
    try {
        const response = await fetch(`/api/subscription/config/${subscriptionId}`);
        if (!response.ok) throw new Error('Failed to fetch config');
        
        const data = await response.json();
        const blob = new Blob([data.config], { 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('Error downloading config:', error);
        alert('Failed to download configuration');
    }
}

function showQRCode(subscriptionId) {
    // TODO: Implement QR code display
    alert('QR Code feature coming soon');
}
</script>
{% endblock %}