<?php
session_start();
require_once '../../config/database.php';

// Check admin authentication
if (!isset($_SESSION['user_id']) || $_SESSION['role'] !== 'admin') {
    header('Location: ../login.php');
    exit;
}

$database = new Database();
$conn = $database->getConnection();

// Get statistics
try {
    // Overall stats
    $overall_stmt = $conn->query("
        SELECT 
            COUNT(*) as total_results,
            AVG(score) as avg_score,
            COUNT(CASE WHEN is_contacted = 1 THEN 1 END) as contacted_count,
            COUNT(CASE WHEN created_at >= DATE_SUB(NOW(), INTERVAL 7 DAY) THEN 1 END) as this_week,
            COUNT(CASE WHEN created_at >= DATE_SUB(NOW(), INTERVAL 30 DAY) THEN 1 END) as this_month
        FROM skin_quiz_results
    ");
    $overall = $overall_stmt->fetch(PDO::FETCH_ASSOC);
    
    // Skin type distribution
    $skin_type_stmt = $conn->query("
        SELECT 
            skin_type,
            COUNT(*) as count,
            AVG(score) as avg_score
        FROM skin_quiz_results
        GROUP BY skin_type
        ORDER BY count DESC
    ");
    $skin_types = $skin_type_stmt->fetchAll(PDO::FETCH_ASSOC);
    
    // Age distribution
    $age_stmt = $conn->query("
        SELECT 
            CASE 
                WHEN age < 20 THEN 'أقل من 20'
                WHEN age BETWEEN 20 AND 29 THEN '20-29'
                WHEN age BETWEEN 30 AND 39 THEN '30-39'
                WHEN age BETWEEN 40 AND 49 THEN '40-49'
                ELSE '50+'
            END as age_group,
            COUNT(*) as count
        FROM skin_quiz_results
        GROUP BY age_group
        ORDER BY age_group
    ");
    $age_groups = $age_stmt->fetchAll(PDO::FETCH_ASSOC);
    
    // Gender distribution
    $gender_stmt = $conn->query("
        SELECT 
            gender,
            COUNT(*) as count
        FROM skin_quiz_results
        GROUP BY gender
    ");
    $genders = $gender_stmt->fetchAll(PDO::FETCH_ASSOC);
    
    // Top concerns
    $concerns_data = [];
    $all_results = $conn->query("SELECT skin_concerns FROM skin_quiz_results WHERE skin_concerns IS NOT NULL")->fetchAll(PDO::FETCH_ASSOC);
    foreach ($all_results as $result) {
        $concerns = json_decode($result['skin_concerns'], true);
        if (is_array($concerns)) {
            foreach ($concerns as $concern) {
                if (!isset($concerns_data[$concern])) {
                    $concerns_data[$concern] = 0;
                }
                $concerns_data[$concern]++;
            }
        }
    }
    arsort($concerns_data);
    
    // Daily results (last 30 days)
    $daily_stmt = $conn->query("
        SELECT 
            DATE(created_at) as date,
            COUNT(*) as count
        FROM skin_quiz_results
        WHERE created_at >= DATE_SUB(NOW(), INTERVAL 30 DAY)
        GROUP BY DATE(created_at)
        ORDER BY date ASC
    ");
    $daily_results = $daily_stmt->fetchAll(PDO::FETCH_ASSOC);
    
} catch (Exception $e) {
    $overall = ['total_results' => 0, 'avg_score' => 0, 'contacted_count' => 0, 'this_week' => 0, 'this_month' => 0];
    $skin_types = [];
    $age_groups = [];
    $genders = [];
    $concerns_data = [];
    $daily_results = [];
}

$skinTypeNames = [
    'oily' => 'دهنية',
    'dry' => 'جافة',
    'combination' => 'مختلطة',
    'normal' => 'عادية',
    'sensitive' => 'حساسة'
];

$concernNames = [
    'acne' => 'حب الشباب',
    'dark_spots' => 'البقع الداكنة',
    'wrinkles' => 'التجاعيد',
    'dryness' => 'الجفاف',
    'large_pores' => 'المسام الواسعة',
    'dullness' => 'البشرة الباهتة',
    'dark_circles' => 'الهالات السوداء',
    'redness' => 'الاحمرار'
];
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>إحصائيات اختبار البشرة - Roz Skin</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="../assets/css/admin-layout.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body { font-family: 'Tajawal', sans-serif; }
        .chart-container { position: relative; height: 300px; }
    </style>
</head>
<body class="bg-gray-50">

<?php include '../includes/sidebar.php'; ?>

<div style="margin-right: 280px; padding: 24px;">
    
    <!-- Header -->
    <header class="bg-white shadow-sm border-b border-gray-200 rounded-lg mb-6 p-6">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold text-gray-900">📊 إحصائيات اختبار البشرة</h1>
                <p class="text-sm text-gray-500 mt-1">تحليل شامل لنتائج الاختبارات</p>
            </div>
            <a href="index.php" class="bg-gray-600 text-white px-6 py-3 rounded-lg hover:bg-gray-700 transition">
                <i class="fas fa-arrow-right"></i> العودة
            </a>
        </div>
    </header>

    <!-- Overview Stats -->
    <div class="grid grid-cols-1 md:grid-cols-5 gap-6 mb-6">
        <div class="bg-white rounded-lg shadow p-6">
            <div class="text-gray-500 text-sm mb-2">إجمالي النتائج</div>
            <div class="text-3xl font-bold text-gray-900"><?php echo number_format($overall['total_results']); ?></div>
        </div>
        
        <div class="bg-white rounded-lg shadow p-6">
            <div class="text-gray-500 text-sm mb-2">متوسط النتيجة</div>
            <div class="text-3xl font-bold text-purple-600"><?php echo round($overall['avg_score']); ?>/100</div>
        </div>
        
        <div class="bg-white rounded-lg shadow p-6">
            <div class="text-gray-500 text-sm mb-2">تم التواصل</div>
            <div class="text-3xl font-bold text-green-600"><?php echo number_format($overall['contacted_count']); ?></div>
        </div>
        
        <div class="bg-white rounded-lg shadow p-6">
            <div class="text-gray-500 text-sm mb-2">هذا الأسبوع</div>
            <div class="text-3xl font-bold text-blue-600"><?php echo number_format($overall['this_week']); ?></div>
        </div>
        
        <div class="bg-white rounded-lg shadow p-6">
            <div class="text-gray-500 text-sm mb-2">هذا الشهر</div>
            <div class="text-3xl font-bold text-orange-600"><?php echo number_format($overall['this_month']); ?></div>
        </div>
    </div>

    <!-- Charts Row 1 -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        
        <!-- Skin Type Distribution -->
        <div class="bg-white rounded-lg shadow p-6">
            <h3 class="text-lg font-bold text-gray-900 mb-4">توزيع أنواع البشرة</h3>
            <div class="chart-container">
                <canvas id="skinTypeChart"></canvas>
            </div>
        </div>
        
        <!-- Age Distribution -->
        <div class="bg-white rounded-lg shadow p-6">
            <h3 class="text-lg font-bold text-gray-900 mb-4">توزيع الفئات العمرية</h3>
            <div class="chart-container">
                <canvas id="ageChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Charts Row 2 -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        
        <!-- Top Concerns -->
        <div class="bg-white rounded-lg shadow p-6">
            <h3 class="text-lg font-bold text-gray-900 mb-4">أكثر المشاكل شيوعاً</h3>
            <div class="chart-container">
                <canvas id="concernsChart"></canvas>
            </div>
        </div>
        
        <!-- Gender Distribution -->
        <div class="bg-white rounded-lg shadow p-6">
            <h3 class="text-lg font-bold text-gray-900 mb-4">توزيع الجنس</h3>
            <div class="chart-container">
                <canvas id="genderChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Daily Results Chart -->
    <div class="bg-white rounded-lg shadow p-6 mb-6">
        <h3 class="text-lg font-bold text-gray-900 mb-4">النتائج اليومية (آخر 30 يوم)</h3>
        <div style="height: 300px;">
            <canvas id="dailyChart"></canvas>
        </div>
    </div>

    <!-- Detailed Tables -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        
        <!-- Skin Types Table -->
        <div class="bg-white rounded-lg shadow p-6">
            <h3 class="text-lg font-bold text-gray-900 mb-4">تفاصيل أنواع البشرة</h3>
            <table class="w-full">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-500">النوع</th>
                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-500">العدد</th>
                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-500">النسبة</th>
                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-500">متوسط النتيجة</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    <?php foreach ($skin_types as $type): 
                        $percentage = $overall['total_results'] > 0 ? ($type['count'] / $overall['total_results']) * 100 : 0;
                    ?>
                    <tr>
                        <td class="px-4 py-3 font-medium"><?php echo $skinTypeNames[$type['skin_type']] ?? $type['skin_type']; ?></td>
                        <td class="px-4 py-3"><?php echo $type['count']; ?></td>
                        <td class="px-4 py-3"><?php echo round($percentage, 1); ?>%</td>
                        <td class="px-4 py-3"><?php echo round($type['avg_score']); ?>/100</td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
        
        <!-- Concerns Table -->
        <div class="bg-white rounded-lg shadow p-6">
            <h3 class="text-lg font-bold text-gray-900 mb-4">تفاصيل المشاكل</h3>
            <table class="w-full">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-500">المشكلة</th>
                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-500">العدد</th>
                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-500">النسبة</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    <?php 
                    $total_concerns = array_sum($concerns_data);
                    foreach (array_slice($concerns_data, 0, 8) as $concern => $count): 
                        $percentage = $total_concerns > 0 ? ($count / $total_concerns) * 100 : 0;
                    ?>
                    <tr>
                        <td class="px-4 py-3 font-medium"><?php echo $concernNames[$concern] ?? $concern; ?></td>
                        <td class="px-4 py-3"><?php echo $count; ?></td>
                        <td class="px-4 py-3"><?php echo round($percentage, 1); ?>%</td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
// Skin Type Chart
const skinTypeCtx = document.getElementById('skinTypeChart').getContext('2d');
new Chart(skinTypeCtx, {
    type: 'doughnut',
    data: {
        labels: <?php echo json_encode(array_map(function($t) use ($skinTypeNames) { return $skinTypeNames[$t['skin_type']] ?? $t['skin_type']; }, $skin_types)); ?>,
        datasets: [{
            data: <?php echo json_encode(array_column($skin_types, 'count')); ?>,
            backgroundColor: ['#3b82f6', '#f59e0b', '#8b5cf6', '#10b981', '#ec4899']
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: { position: 'bottom' }
        }
    }
});

// Age Chart
const ageCtx = document.getElementById('ageChart').getContext('2d');
new Chart(ageCtx, {
    type: 'bar',
    data: {
        labels: <?php echo json_encode(array_column($age_groups, 'age_group')); ?>,
        datasets: [{
            label: 'عدد النتائج',
            data: <?php echo json_encode(array_column($age_groups, 'count')); ?>,
            backgroundColor: '#8b5cf6'
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: { display: false }
        }
    }
});

// Concerns Chart
const concernsCtx = document.getElementById('concernsChart').getContext('2d');
new Chart(concernsCtx, {
    type: 'bar',
    data: {
        labels: <?php echo json_encode(array_map(function($c) use ($concernNames) { return $concernNames[$c] ?? $c; }, array_keys(array_slice($concerns_data, 0, 5)))); ?>,
        datasets: [{
            label: 'عدد الحالات',
            data: <?php echo json_encode(array_values(array_slice($concerns_data, 0, 5))); ?>,
            backgroundColor: '#ef4444'
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        indexAxis: 'y',
        plugins: {
            legend: { display: false }
        }
    }
});

// Gender Chart
const genderCtx = document.getElementById('genderChart').getContext('2d');
new Chart(genderCtx, {
    type: 'pie',
    data: {
        labels: <?php echo json_encode(array_map(function($g) { return $g['gender'] === 'female' ? 'أنثى' : 'ذكر'; }, $genders)); ?>,
        datasets: [{
            data: <?php echo json_encode(array_column($genders, 'count')); ?>,
            backgroundColor: ['#ec4899', '#3b82f6']
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: { position: 'bottom' }
        }
    }
});

// Daily Results Chart
const dailyCtx = document.getElementById('dailyChart').getContext('2d');
new Chart(dailyCtx, {
    type: 'line',
    data: {
        labels: <?php echo json_encode(array_column($daily_results, 'date')); ?>,
        datasets: [{
            label: 'عدد النتائج',
            data: <?php echo json_encode(array_column($daily_results, 'count')); ?>,
            borderColor: '#8b5cf6',
            backgroundColor: 'rgba(139, 92, 246, 0.1)',
            tension: 0.4,
            fill: true
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: { display: false }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: { stepSize: 1 }
            }
        }
    }
});
</script>

</body>
</html>
