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

<div x-data="dashboard()">
    <h3 class="text-3xl font-medium text-gray-100 mb-6">Dashboard</h3>

    <!-- Stats Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        
        <!-- Total Users -->
        <div class="bg-surface rounded-xl p-6 shadow-lg border border-gray-700 relative overflow-hidden group">
            <div class="absolute right-0 top-0 h-full w-1/2 bg-gradient-to-l from-primary/10 to-transparent"></div>
            <div class="relative z-10">
                <div class="flex items-center justify-between mb-4">
                    <h4 class="text-gray-400 text-sm font-semibold uppercase tracking-wider">Total Users</h4>
                    <span class="p-2 rounded-lg bg-primary/20 text-primary"><i class="fas fa-users"></i></span>
                </div>
                <div class="flex items-end">
                    <h2 class="text-3xl font-bold text-white" x-text="stats.total_users || '-'">-</h2>
                    <span class="ml-2 text-sm text-green-400 flex items-center mb-1">
                        <i class="fas fa-arrow-up mr-1"></i> <span x-text="stats.new_users_today || 0">0</span> today
                    </span>
                </div>
            </div>
        </div>

        <!-- Messages -->
        <div class="bg-surface rounded-xl p-6 shadow-lg border border-gray-700 relative overflow-hidden">
            <div class="absolute right-0 top-0 h-full w-1/2 bg-gradient-to-l from-secondary/10 to-transparent"></div>
            <div class="relative z-10">
                <div class="flex items-center justify-between mb-4">
                    <h4 class="text-gray-400 text-sm font-semibold uppercase tracking-wider">Messages Today</h4>
                    <span class="p-2 rounded-lg bg-secondary/20 text-secondary"><i class="fas fa-comment-alt"></i></span>
                </div>
                <div class="flex items-end">
                    <h2 class="text-3xl font-bold text-white" x-text="stats.messages_today || '-'">-</h2>
                    <span class="ml-2 text-sm text-gray-500 mb-1">volume</span>
                </div>
            </div>
        </div>

        <!-- Active Conversations -->
        <div class="bg-surface rounded-xl p-6 shadow-lg border border-gray-700 relative overflow-hidden">
            <div class="absolute right-0 top-0 h-full w-1/2 bg-gradient-to-l from-green-500/10 to-transparent"></div>
            <div class="relative z-10">
                <div class="flex items-center justify-between mb-4">
                    <h4 class="text-gray-400 text-sm font-semibold uppercase tracking-wider">Active Chats (24h)</h4>
                    <span class="p-2 rounded-lg bg-green-500/20 text-green-500"><i class="fas fa-comments"></i></span>
                </div>
                <h2 class="text-3xl font-bold text-white" x-text="stats.active_conversations || '-'">-</h2>
            </div>
        </div>

        <!-- Pending Reports -->
        <div class="bg-surface rounded-xl p-6 shadow-lg border border-gray-700 relative overflow-hidden">
            <div class="absolute right-0 top-0 h-full w-1/2 bg-gradient-to-l from-red-500/10 to-transparent"></div>
            <div class="relative z-10">
                <div class="flex items-center justify-between mb-4">
                    <h4 class="text-gray-400 text-sm font-semibold uppercase tracking-wider">Pending Reports</h4>
                    <span class="p-2 rounded-lg bg-red-500/20 text-red-500"><i class="fas fa-exclamation-triangle"></i></span>
                </div>
                <h2 class="text-3xl font-bold text-white" x-text="stats.pending_reports || 0">0</h2>
            </div>
        </div>
    </div>

    <!-- Charts Section (Mockup for Investor Ready feel, can use Chart.js if needed) -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
        <div class="lg:col-span-2 bg-surface rounded-xl p-6 border border-gray-700">
            <h4 class="text-lg font-semibold text-white mb-4">Growth Trajectory</h4>
            <div class="h-64 flex items-center justify-center bg-dark rounded border border-dashed border-gray-700 text-gray-500">
                <!-- Placeholder for Chart.js -->
                [Growth Chart Visualization]
            </div>
        </div>
        <div class="bg-surface rounded-xl p-6 border border-gray-700">
            <h4 class="text-lg font-semibold text-white mb-4">User Distribution</h4>
            <div class="space-y-4">
                <div>
                    <div class="flex justify-between text-sm mb-1">
                        <span class="text-gray-400">Organic</span>
                        <span class="text-white">65%</span>
                    </div>
                    <div class="w-full bg-dark rounded-full h-2">
                        <div class="bg-primary h-2 rounded-full" style="width: 65%"></div>
                    </div>
                </div>
                <div>
                    <div class="flex justify-between text-sm mb-1">
                        <span class="text-gray-400">Bots/AI</span>
                        <span class="text-white">25%</span>
                    </div>
                    <div class="w-full bg-dark rounded-full h-2">
                        <div class="bg-secondary h-2 rounded-full" style="width: 25%"></div>
                    </div>
                </div>
                <div>
                    <div class="flex justify-between text-sm mb-1">
                        <span class="text-gray-400">Premium</span>
                        <span class="text-white">10%</span>
                    </div>
                    <div class="w-full bg-dark rounded-full h-2">
                        <div class="bg-green-500 h-2 rounded-full" style="width: 10%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<script>
function dashboard() {
    return {
        stats: {},
        init() {
            this.fetchStats();
            // Refresh every 30 seconds
            setInterval(() => this.fetchStats(), 30000);
        },
        fetchStats() {
            // Point to the correct API endpoint
            fetch('/backend-php/public/api/admin/dashboard/stats', {
                headers: { 'Authorization': 'Bearer ' + localStorage.getItem('admin_token') } 
                // Note: basic auth is session based in this MPA, but API might check headers.
                // Since we share session, we might rely on cookie.
                // The current AdminController checks AdminMiddleware::authenticate() which might use Session.
            })
            .then(res => res.json())
            .then(data => {
                this.stats = data;
            })
            .catch(err => console.error(err));
        }
    }
}
</script>

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