<?php
require_once 'includes/auth.php';
require_once 'includes/header.php';
?>

<div x-data="premiumManagement()" class="space-y-6">
    
    <!-- Header -->
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <h3 class="text-3xl font-medium text-gray-100">Premium Management</h3>
        <div class="flex items-center gap-3">
            <div class="bg-surface px-4 py-2 rounded-lg border border-gray-700">
                <span class="text-xs text-gray-500 block">Total PLUS Members</span>
                <span class="text-xl font-bold text-indigo-400" x-text="stats.plus || 0"></span>
            </div>
            <div class="bg-surface px-4 py-2 rounded-lg border border-gray-700">
                <span class="text-xs text-gray-500 block">Total Diamond VIP (Boosted)</span>
                <span class="text-xl font-bold text-pink-500" x-text="stats.boosted || 0"></span>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-surface p-4 rounded-xl border border-gray-700 flex flex-wrap items-center gap-4">
        <div class="relative flex-1 min-w-[200px]">
            <i class="fas fa-search absolute left-3 top-3 text-gray-500"></i>
            <input x-model="search" @input.debounce.300ms="fetchUsers()" type="text" placeholder="Search members..." class="w-full bg-dark border border-gray-600 rounded-lg pl-10 pr-4 py-2 text-gray-300 focus:outline-none focus:border-primary">
        </div>
        
        <select x-model="filter" @change="fetchUsers()" class="bg-dark border border-gray-600 rounded-lg px-4 py-2 text-gray-300 focus:outline-none focus:border-primary">
            <option value="premium_all">All Premium Members</option>
            <option value="plus">PLUS Only</option>
            <option value="boosted">Diamond VIP (Boost) Only</option>
        </select>
    </div>

    <!-- Data Grid -->
    <div class="bg-surface rounded-xl shadow-lg border border-gray-700 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-darker/50 text-gray-400 text-xs uppercase tracking-wider border-b border-gray-700">
                        <th class="p-4 font-medium">User</th>
                        <th class="p-4 font-medium">PLUS Status</th>
                        <th class="p-4 font-medium">Diamond VIP (Boost)</th>
                        <th class="p-4 font-medium">Frame</th>
                        <th class="p-4 font-medium text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-700">
                    <template x-for="user in users" :key="user.id">
                        <tr class="hover:bg-dark/50 transition-colors group">
                            <td class="p-4">
                                <div class="flex items-center gap-3">
                                    <img :src="user.avatar_url || 'https://ui-avatars.com/api/?name='+user.username" class="w-10 h-10 rounded-full object-cover border border-gray-600">
                                    <div>
                                        <div class="font-medium text-white" x-text="user.display_name || user.username"></div>
                                        <div class="text-xs text-gray-500" x-text="'@'+user.username"></div>
                                    </div>
                                </div>
                            </td>
                            <td class="p-4">
                                <div x-show="user.is_plus_subscriber == 1">
                                    <span class="px-2 py-1 rounded bg-indigo-500/10 text-indigo-400 text-[10px] font-bold border border-indigo-500/20">PLUS</span>
                                    <div class="text-[10px] text-gray-500 mt-1" x-text="'Expires: ' + formatDate(user.plus_expires_at)"></div>
                                </div>
                                <span x-show="user.is_plus_subscriber == 0" class="text-gray-600">-</span>
                            </td>
                            <td class="p-4">
                                <div x-show="isBoosted(user)">
                                    <span class="px-2 py-1 rounded bg-pink-500/10 text-pink-500 text-[10px] font-bold border border-pink-500/20">DIAMOND VIP</span>
                                    <div class="text-[10px] text-gray-500 mt-1" x-text="'Until: ' + formatDateTime(user.boosted_until)"></div>
                                </div>
                                <span x-show="!isBoosted(user)" class="text-gray-600">-</span>
                            </td>
                            <td class="p-4">
                                <span x-show="user.active_frame" class="text-xs text-gray-300 capitalize" x-text="user.active_frame.replace('_', ' ')"></span>
                                <span x-show="!user.active_frame" class="text-gray-600">-</span>
                            </td>
                            <td class="p-4 text-right">
                                <a :href="'user_detail.php?id='+user.id" class="inline-flex items-center gap-1 text-sm text-primary hover:text-indigo-400 transition-colors">
                                    Manage <i class="fas fa-chevron-right text-xs"></i>
                                </a>
                            </td>
                        </tr>
                    </template>
                    
                    <tr x-show="loading">
                        <td colspan="6" class="p-8 text-center text-gray-500">
                            <i class="fas fa-circle-notch fa-spin fa-2x mb-2 text-primary"></i>
                            <p>Loading members...</p>
                        </td>
                    </tr>
                    
                    <tr x-show="!loading && users.length === 0">
                        <td colspan="6" class="p-8 text-center text-gray-500">
                            <i class="fas fa-crown fa-2x mb-2 opacity-20"></i>
                            <p>No premium members found.</p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
function premiumManagement() {
    return {
        users: [],
        stats: { premium: 0, plus: 0 },
        search: '',
        filter: 'premium_all',
        loading: false,

        init() {
            this.fetchUsers();
        },

        fetchUsers() {
            this.loading = true;
            const query = new URLSearchParams({
                search: this.search,
                filter: this.filter,
                limit: 100
            });

            fetch('/backend-php/public/api/admin/users?' + query)
                .then(res => res.json())
                .then(data => {
                    this.users = Array.isArray(data) ? data : [];
                    this.stats.plus = this.users.filter(u => u.is_plus_subscriber == 1).length;
                    this.stats.boosted = this.users.filter(u => this.isBoosted(u)).length;
                    this.loading = false;
                })
                .catch(err => {
                    console.error(err);
                    showToast('Failed to load premium users', 'error');
                    this.loading = false;
                });
        },

        isBoosted(user) {
            if (!user.boosted_until) return false;
            // Use server time or just compare with local time (risky but okay for UI)
            return new Date(user.boosted_until) > new Date();
        },

        formatDate(dateStr) {
            if (!dateStr) return '-';
            return new Date(dateStr).toLocaleDateString();
        },

        formatDateTime(dateStr) {
            if (!dateStr) return '-';
            return new Date(dateStr).toLocaleString(undefined, { 
                month: 'short', 
                day: 'numeric', 
                hour: '2-digit', 
                minute: '2-digit' 
            });
        }
    }
}
</script>

<?php require_once 'includes/footer.php'; ?>
