<?php require APPROOT . '/app/Views/layouts/header.php'; ?>

<!-- Chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="max-w-7xl mx-auto mb-10">

    <div class="flex flex-col md:flex-row md:items-center justify-between mb-8">
        <div>
            <h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1"><?php echo $data['title']; ?></h1>
            <p class="text-sm text-gray-600 dark:text-gray-400"><?php echo $data['description']; ?></p>
        </div>
        <div class="mt-4 md:mt-0 flex space-x-3">
            <a href="<?php echo URLROOT; ?>/admin/emailQueue" class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-800 dark:text-gray-300 font-bold py-2 px-4 rounded-lg text-sm transition-colors flex items-center shadow-sm">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                View Email Queue
            </a>
            <a href="<?php echo URLROOT; ?>/admin/settings" class="bg-primary hover:opacity-90 text-white font-bold py-2 px-4 rounded-lg shadow-sm transition-all focus:ring-4 focus:ring-primary/50 text-sm flex items-center">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                App Settings
            </a>
        </div>
    </div>

    <!-- Metrics Row -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8">
        <div class="p-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700/50 flex flex-col items-start justify-center">
            <h3 class="text-[10px] font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Total Users</h3>
            <p class="text-3xl font-extrabold text-gray-900 dark:text-white"><?php echo $data['stats']['total']; ?></p>
        </div>
        <div class="p-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700/50 flex flex-col items-start justify-center">
            <h3 class="text-[10px] font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Total Jobcards</h3>
            <p class="text-3xl font-extrabold text-blue-600 dark:text-blue-500"><?php echo $data['jobcard_stats']['total']; ?></p>
        </div>
        <div class="p-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700/50 flex flex-col items-start justify-center">
            <h3 class="text-[10px] font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Completed Jobs</h3>
            <p class="text-3xl font-extrabold text-emerald-600 dark:text-emerald-500"><?php echo $data['jobcard_stats']['completed']; ?></p>
        </div>
        <div class="p-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700/50 flex flex-col items-start justify-center">
            <h3 class="text-[10px] font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">System Health</h3>
            <div class="flex items-center mt-1">
                <span class="w-3 h-3 rounded-full bg-green-500 animate-pulse mr-2"></span>
                <p class="text-sm font-extrabold text-gray-900 dark:text-white">Optimal</p>
            </div>
        </div>
    </div>

    <!-- Analytics Charts Row -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
        
        <!-- Status Doughnut Chart -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700/50 p-6">
            <h2 class="text-sm font-bold text-gray-900 dark:text-white mb-6 uppercase tracking-wider border-b border-gray-200 dark:border-gray-700/50 pb-2">Jobcard Statuses</h2>
            <div class="relative h-64 w-full">
                <canvas id="statusChart"></canvas>
            </div>
        </div>

        <!-- Volume Bar Chart -->
        <div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700/50 p-6">
            <h2 class="text-sm font-bold text-gray-900 dark:text-white mb-6 uppercase tracking-wider border-b border-gray-200 dark:border-gray-700/50 pb-2">Jobcard Volume (Last 7 Days)</h2>
            <div class="relative h-64 w-full">
                <canvas id="volumeChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Recent Activity Row -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700/50 overflow-hidden">
            <div class="p-5 border-b border-gray-200 dark:border-gray-700/50 bg-gray-50 dark:bg-gray-900/40 flex justify-between items-center">
                <h2 class="text-sm font-bold text-gray-900 dark:text-white flex items-center">
                    <svg class="w-4 h-4 mr-2 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
                    Newest Members
                </h2>
                <a href="<?php echo URLROOT; ?>/admin/users" class="text-xs text-primary hover:underline font-bold">View All</a>
            </div>
            <div class="p-5 space-y-5">
                <?php foreach($data['recent_users'] as $user): ?>
                    <div class="flex justify-between items-center">
                        <div class="flex flex-col border-l-2 border-primary/50 pl-3">
                            <span class="text-[10px] text-gray-400 dark:text-gray-500 font-mono tracking-wider uppercase mb-1">Joined: <?php echo date('M j, Y', strtotime($user->created_at)); ?></span>
                            <span class="text-sm font-bold text-gray-900 dark:text-white"><?php echo $user->name; ?></span>
                            <span class="text-xs text-gray-500 dark:text-gray-400 mt-0.5"><?php echo $user->email; ?></span>
                        </div>
                        <span class="px-2 py-0.5 text-[9px] font-bold uppercase tracking-wider rounded border 
                             <?php 
                             if ($user->role === 'admin') echo 'bg-purple-50 dark:bg-purple-900/10 text-purple-700 dark:text-purple-400 border-purple-200 dark:border-purple-800/30'; 
                             elseif ($user->role === 'staff') echo 'bg-blue-50 dark:bg-blue-900/10 text-blue-700 dark:text-blue-400 border-blue-200 dark:border-blue-800/30'; 
                             elseif ($user->role === 'partner') echo 'bg-indigo-50 dark:bg-indigo-900/10 text-indigo-700 dark:text-indigo-400 border-indigo-200 dark:border-indigo-800/30';
                             else echo 'bg-emerald-50 dark:bg-emerald-900/10 text-emerald-700 dark:text-emerald-400 border-emerald-200 dark:border-emerald-800/30'; 
                             ?>">
                            <?php echo $user->role === 'partner' ? 'Agency' : ucfirst($user->role); ?>
                        </span>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700/50 overflow-hidden">
            <div class="p-5 border-b border-gray-200 dark:border-gray-700/50 bg-gray-50 dark:bg-gray-900/40 flex justify-between items-center">
                <h2 class="text-sm font-bold text-gray-900 dark:text-white flex items-center">
                    <svg class="w-4 h-4 mr-2 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                    Recent Activity
                </h2>
                <a href="<?php echo URLROOT; ?>/admin/logs" class="text-xs text-primary hover:underline font-bold">View Logs</a>
            </div>
            <div class="p-5 space-y-5">
                <?php foreach($data['recent_logs'] as $log): ?>
                    <div class="flex flex-col border-l-2 border-gray-200 dark:border-gray-700 pl-3">
                        <span class="text-[10px] text-gray-400 dark:text-gray-500 font-mono tracking-wider uppercase mb-1"><?php echo date('M j, Y - H:i', strtotime($log->created_at)); ?></span>
                        <span class="text-sm font-bold text-gray-900 dark:text-white"><?php echo $log->action; ?></span>
                        <span class="text-xs text-gray-500 dark:text-gray-400 mt-0.5"><?php echo $log->description; ?> <span class="text-gray-400 dark:text-gray-500 italic">(<?php echo $log->user_name ?? 'System'; ?>)</span></span>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
        
    </div>

</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const isDark = document.documentElement.classList.contains('dark');
    const textColor = isDark ? '#9ca3af' : '#6b7280';
    const gridColor = isDark ? '#374151' : '#e5e7eb';

    // 1. Status Doughnut Chart
    const statusCtx = document.getElementById('statusChart').getContext('2d');
    const statusRaw = <?php echo json_encode($data['analytics']['statuses']); ?>;
    
    new Chart(statusCtx, {
        type: 'doughnut',
        data: {
            labels: ['Created', 'Assigned', 'Started', 'Completed', 'Signed Off'],
            datasets: [{
                data: [
                    statusRaw['Created'] || 0,
                    statusRaw['Assigned'] || 0,
                    statusRaw['Started'] || 0,
                    statusRaw['Completed'] || 0,
                    statusRaw['Signed Off'] || 0
                ],
                backgroundColor: [
                    '#e5e7eb', // Gray
                    '#3b82f6', // Blue
                    '#eab308', // Yellow
                    '#a855f7', // Purple
                    '#10b981'  // Emerald
                ],
                borderWidth: 0,
                cutout: '75%'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { position: 'right', labels: { color: textColor, font: { family: "'Plus Jakarta Sans', sans-serif", size: 11 } } }
            }
        }
    });

    // 2. Volume Bar Chart
    const volumeCtx = document.getElementById('volumeChart').getContext('2d');
    const volumeLabels = <?php echo json_encode($data['analytics']['volume']['labels']); ?>;
    const volumeData = <?php echo json_encode($data['analytics']['volume']['data']); ?>;

    new Chart(volumeCtx, {
        type: 'bar',
        data: {
            labels: volumeLabels.length ? volumeLabels : ['No Data'],
            datasets: [{
                label: 'New Jobcards',
                data: volumeData.length ? volumeData : [0],
                backgroundColor: '#1c70b4',
                borderRadius: 4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: { precision: 0, color: textColor },
                    grid: { color: gridColor, drawBorder: false }
                },
                x: {
                    ticks: { color: textColor },
                    grid: { display: false, drawBorder: false }
                }
            }
        }
    });
});
</script>

<?php require APPROOT . '/app/Views/layouts/footer.php'; ?>