{% extends "base.html" %}
{% block title %}مدیریت اشتراک‌ها{% endblock %}
{% block page_title %}مدیریت اشتراک کاربران{% endblock %}
{% block subtitle %}مدیریت پلن‌های اشتراک و کاربران{% endblock %}

{% block content %}
<style>
    .stat-card {
        background: linear-gradient(135deg, rgba(30, 40, 70, 0.95), rgba(20, 25, 50, 0.95));
        border-radius: 20px;
        padding: 20px;
        text-align: center;
        border: 1px solid rgba(0, 212, 255, 0.2);
    }
    .stat-value {
        font-size: 2rem;
        font-weight: 700;
        color: #00d4ff;
    }
    .plan-card {
        background: rgba(20, 25, 50, 0.95);
        border-radius: 20px;
        padding: 20px;
        text-align: center;
        border: 1px solid rgba(0, 212, 255, 0.2);
        transition: all 0.3s;
    }
    .plan-card:hover {
        transform: translateY(-5px);
        border-color: #00d4ff;
    }
    .plan-price {
        font-size: 2rem;
        font-weight: 700;
        color: #00d4ff;
    }
    .user-row {
        background: rgba(20, 25, 50, 0.95);
        border-radius: 12px;
        padding: 12px 16px;
        margin-bottom: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        border: 1px solid rgba(0, 212, 255, 0.1);
    }
    .user-row:hover {
        border-color: rgba(0, 212, 255, 0.3);
    }
    .status-active { color: #00ff88; }
    .status-expired { color: #ff6666; }
    .status-cancelled { color: #ffc107; }
    .badge-plan {
        background: rgba(0, 212, 255, 0.2);
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.75rem;
    }
</style>

<!-- آمار -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
    <div class="stat-card">
        <div class="stat-value" id="totalUsers">0</div>
        <div class="text-sm text-gray-400">کل کاربران</div>
    </div>
    <div class="stat-card">
        <div class="stat-value text-green-400" id="activeSubscriptions">0</div>
        <div class="text-sm text-gray-400">اشتراک فعال</div>
    </div>
    <div class="stat-card">
        <div class="stat-value text-yellow-400" id="expiredSubscriptions">0</div>
        <div class="text-sm text-gray-400">اشتراک منقضی</div>
    </div>
    <div class="stat-card">
        <div class="stat-value text-cyan-400" id="totalRevenue">0 €</div>
        <div class="text-sm text-gray-400">درآمد کل</div>
    </div>
</div>

<!-- پلن‌های اشتراک -->
<h3 class="section-title mt-6 mb-4">📋 پلن‌های اشتراک</h3>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8" id="plansContainer"></div>

<!-- دکمه‌های مدیریت -->
<div class="flex gap-3 mb-6">
    <button onclick="checkExpiredSubscriptions()" class="btn-primary">
        <i class="fas fa-clock ml-2"></i> بررسی اشتراک‌های منقضی
    </button>
    <button onclick="loadUsers()" class="btn-secondary">
        <i class="fas fa-sync-alt ml-2"></i> بروزرسانی
    </button>
</div>

<!-- لیست کاربران -->
<h3 class="section-title mb-4">👥 لیست کاربران</h3>
<div id="usersList" class="space-y-2"></div>

<script>
    const SUBSCRIPTION_PLANS = {
        'free': { name: 'رایگان', price: 0, color: 'gray' },
        'monthly': { name: 'ماهیانه', price: 49, color: 'blue' },
        'quarterly': { name: 'سه ماهه', price: 129, color: 'green' },
        'biannual': { name: 'شش ماهه', price: 239, color: 'purple' },
        'yearly': { name: 'سالانه', price: 449, color: 'gold' }
    };
    
    async function loadData() {
        await Promise.all([loadUsers(), loadStats(), loadPlans()]);
    }
    
    async function loadUsers() {
        const container = document.getElementById('usersList');
        container.innerHTML = '<div class="text-center py-8"><div class="loading-spinner"></div><p>در حال بارگذاری...</p></div>';
        
        try {
            const response = await fetch('/api/subscription/admin/users');
            const data = await response.json();
            
            if (data.status === 'success' && data.users) {
                container.innerHTML = data.users.map(user => `
                    <div class="user-row">
                        <div>
                            <div class="font-bold">${user.username}</div>
                            <div class="text-xs text-gray-400">${user.email}</div>
                        </div>
                        <div>
                            <span class="badge-plan">${SUBSCRIPTION_PLANS[user.subscription_plan]?.name || user.subscription_plan}</span>
                            <span class="ml-2 ${user.subscription_status === 'active' ? 'status-active' : user.subscription_status === 'expired' ? 'status-expired' : 'status-cancelled'}">
                                ${user.subscription_status === 'active' ? '✓ فعال' : user.subscription_status === 'expired' ? '⚠️ منقضی' : '✗ لغو شده'}
                            </span>
                        </div>
                        <div class="text-sm">
                            ${user.days_left > 0 ? `${user.days_left} روز باقی‌مانده` : 'منقضی شده'}
                        </div>
                        <div class="flex gap-2">
                            <select id="planSelect_${user.id}" class="bg-gray-800 border border-gray-700 rounded-lg px-2 py-1 text-sm">
                                <option value="free" ${user.subscription_plan === 'free' ? 'selected' : ''}>رایگان</option>
                                <option value="monthly" ${user.subscription_plan === 'monthly' ? 'selected' : ''}>ماهیانه</option>
                                <option value="quarterly" ${user.subscription_plan === 'quarterly' ? 'selected' : ''}>سه ماهه</option>
                                <option value="biannual" ${user.subscription_plan === 'biannual' ? 'selected' : ''}>شش ماهه</option>
                                <option value="yearly" ${user.subscription_plan === 'yearly' ? 'selected' : ''}>سالانه</option>
                            </select>
                            <button onclick="updateUserSubscription(${user.id})" class="text-cyan-400 hover:text-cyan-300 text-sm">
                                <i class="fas fa-save"></i>
                            </button>
                            ${user.subscription_status === 'active' ? 
                                `<button onclick="expireUserSubscription(${user.id})" class="text-red-400 hover:text-red-300 text-sm ml-1"><i class="fas fa-ban"></i></button>` : 
                                `<button onclick="activateUserSubscription(${user.id})" class="text-green-400 hover:text-green-300 text-sm ml-1"><i class="fas fa-play"></i></button>`
                            }
                        </div>
                    </div>
                `).join('');
            }
        } catch(e) {
            console.error('Error:', e);
            container.innerHTML = '<div class="text-red-400 text-center p-4">❌ خطا در دریافت لیست کاربران</div>';
        }
    }
    
    async function loadStats() {
        try {
            const [usersRes, revenueRes] = await Promise.all([
                fetch('/api/subscription/admin/users'),
                fetch('/api/subscription/admin/stats/revenue')
            ]);
            
            const usersData = await usersRes.json();
            const revenueData = await revenueRes.json();
            
            if (usersData.status === 'success') {
                document.getElementById('totalUsers').innerText = usersData.statistics?.total_users || 0;
                document.getElementById('activeSubscriptions').innerText = usersData.statistics?.active_subscriptions || 0;
                document.getElementById('expiredSubscriptions').innerText = usersData.statistics?.expired_subscriptions || 0;
            }
            
            if (revenueData.status === 'success') {
                document.getElementById('totalRevenue').innerText = `${revenueData.revenue?.total || 0} €`;
            }
        } catch(e) {
            console.error('Error loading stats:', e);
        }
    }
    
    async function loadPlans() {
        const container = document.getElementById('plansContainer');
        
        try {
            const response = await fetch('/api/subscription/plans');
            const data = await response.json();
            
            if (data.status === 'success' && data.plans) {
                container.innerHTML = Object.entries(data.plans).map(([key, plan]) => `
                    <div class="plan-card">
                        <h4 class="font-bold text-lg">${plan.name}</h4>
                        <div class="plan-price">${plan.price} ${plan.currency}</div>
                        <div class="text-sm text-gray-400">${plan.duration_months} ماه</div>
                        ${plan.save ? `<div class="text-green-400 text-sm mt-1">صرفه‌جویی ${plan.save}%</div>` : ''}
                        <div class="mt-3 text-xs text-gray-500">
                            ${plan.features.slice(0, 3).map(f => `<div>✓ ${f}</div>`).join('')}
                            ${plan.features.length > 3 ? `<div class="text-cyan-400 mt-1">+${plan.features.length - 3} مورد دیگر</div>` : ''}
                        </div>
                    </div>
                `).join('');
            }
        } catch(e) {
            console.error('Error loading plans:', e);
        }
    }
    
    async function updateUserSubscription(userId) {
        const planSelect = document.getElementById(`planSelect_${userId}`);
        const plan = planSelect.value;
        
        try {
            const response = await fetch(`/api/subscription/admin/users/${userId}/subscription`, {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ plan: plan, action: 'activate' })
            });
            const data = await response.json();
            
            if (data.status === 'success') {
                alert(data.message);
                loadUsers();
                loadStats();
            } else {
                alert('خطا: ' + (data.error || 'Unknown error'));
            }
        } catch(e) {
            alert('خطا در ارتباط با سرور');
        }
    }
    
    async function activateUserSubscription(userId) {
        try {
            const response = await fetch(`/api/subscription/admin/users/${userId}/subscription`, {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ action: 'activate', plan: 'monthly' })
            });
            const data = await response.json();
            if (data.status === 'success') {
                alert(data.message);
                loadUsers();
                loadStats();
            }
        } catch(e) {
            alert('خطا در فعال‌سازی اشتراک');
        }
    }
    
    async function expireUserSubscription(userId) {
        if (!confirm('آیا از منقضی کردن اشتراک این کاربر اطمینان دارید؟')) return;
        
        try {
            const response = await fetch(`/api/subscription/admin/users/${userId}/subscription`, {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ action: 'expire' })
            });
            const data = await response.json();
            if (data.status === 'success') {
                alert(data.message);
                loadUsers();
                loadStats();
            }
        } catch(e) {
            alert('خطا در منقضی کردن اشتراک');
        }
    }
    
    async function checkExpiredSubscriptions() {
        try {
            const response = await fetch('/api/subscription/admin/check-expired', { method: 'POST' });
            const data = await response.json();
            if (data.status === 'success') {
                alert(`${data.expired_count} اشتراک منقضی شدند`);
                loadUsers();
                loadStats();
            }
        } catch(e) {
            alert('خطا در بررسی اشتراک‌ها');
        }
    }
    
    // بارگذاری اولیه
    loadData();
    setInterval(loadData, 30000);
</script>
{% endblock %}