document.addEventListener('DOMContentLoaded', function() {
    // Simulate fetching user data from API
    setTimeout(() => {
        fetchUserData();
        fetchActiveSubscriptions();
    }, 1000);
});

function fetchUserData() {
    // In a real app, this would be an actual API call
    const mockUserData = {
        userInfo: {
            id: 12345,
            userid: 987654321,
            name: "محمد رضایی",
            username: "mohammad_r",
            phone: "09123456789",
            wallet: 125000,
            joinDate: "1402/05/15",
            isAdmin: false,
            isAgent: false,
            discountPercent: 0,
            referredBy: null,
            freeTrial: false
        },
        balance: {
            wallet: 125000,
            totalSpent: 450000
        },
        orders: {
            count: 3,
            active: 2,
            list: []
        },
        payments: {
            count: 5,
            total: 450000,
            history: []
        },
        chats: {
            count: 2,
            list: []
        },
        increaseOrders: {
            count: 0,
            list: []
        }
    };

    // Update UI with user data
    document.getElementById('username').textContent = mockUserData.userInfo.name;
    document.getElementById('user-id').textContent = `شناسه: ${mockUserData.userInfo.userid}`;
    document.getElementById('join-date').textContent = mockUserData.userInfo.joinDate;
    document.getElementById('wallet-balance').textContent = mockUserData.userInfo.wallet.toLocaleString('fa-IR');
    document.getElementById('active-subs-count').textContent = mockUserData.orders.active;
    document.getElementById('total-spent').textContent = mockUserData.balance.totalSpent.toLocaleString('fa-IR');
    document.getElementById('tickets-count').textContent = mockUserData.chats.count;
}

function fetchActiveSubscriptions() {
    const mockSubscriptions = [
        {
            id: 1,
            server_title: "سرور آلمان",
            flag: "de",
            remark: "اشتراک ماهانه",
            protocol: "vmess",
            expire_date: "1696118400", // Oct 1, 2023
            amount: 45000,
            status: 1
        },
        {
            id: 2,
            server_title: "سرور فرانسه",
            flag: "fr",
            remark: "اشتراک 3 ماهه",
            protocol: "trojan",
            expire_date: "1703980800", // Dec 30, 2023
            amount: 120000,
            status: 1
        }
    ];

    const subscriptionsList = document.getElementById('active-subscriptions-list');
    subscriptionsList.innerHTML = '';

    if (mockSubscriptions.length === 0) {
        subscriptionsList.innerHTML = `
            <div class="text-center py-8 text-gray-500">
                <i data-feather="frown" class="w-8 h-8 mx-auto"></i>
                <p class="mt-2">اشتراک فعالی ندارید</p>
            </div>
        `;
        feather.replace();
        return;
    }

    mockSubscriptions.forEach(sub => {
        const expireDate = new Date(parseInt(sub.expire_date) * 1000);
        const formattedDate = expireDate.toLocaleDateString('fa-IR');
        
        const subscriptionEl = document.createElement('div');
        subscriptionEl.className = 'subscription-card bg-gray-50 rounded-lg p-4';
        subscriptionEl.innerHTML = `
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <img src="https://flagcdn.com/w40/${sub.flag}.png" class="server-flag" alt="${sub.server_title}">
                    <div>
                        <h4 class="font-semibold text-gray-800">${sub.server_title}</h4>
                        <p class="text-sm text-gray-500">${sub.remark}</p>
                    </div>
                </div>
                <div class="text-left">
                    <p class="text-sm text-gray-500">انقضا: ${formattedDate}</p>
                    <p class="font-medium">${sub.amount.toLocaleString('fa-IR')} تومان</p>
                </div>
            </div>
            <div class="mt-3 pt-3 border-t border-gray-200 flex justify-between items-center">
                <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded">فعال</span>
                <a href="subscription-detail.html?id=${sub.id}" class="text-primary-500 hover:text-primary-600 text-sm flex items-center">
                    جزئیات
                    <i data-feather="chevron-left" class="w-4 h-4 mr-1"></i>
                </a>
            </div>
        `;
        subscriptionsList.appendChild(subscriptionEl);
    });

    feather.replace();
}

// Telegram Mini App integration
if (window.Telegram && window.Telegram.WebApp) {
    const tgWebApp = window.Telegram.WebApp;
    
    // Expand the app to full view
    tgWebApp.expand();
    
    // Set theme colors based on Telegram theme
    if (tgWebApp.colorScheme === 'dark') {
        document.body.classList.add('bg-gray-900');
        document.body.classList.remove('bg-gray-100');
    }
    
    // Handle back button
    tgWebApp.BackButton.onClick(() => {
        window.history.back();
    });
    
    // Show back button when needed
    // tgWebApp.BackButton.show();
}