<?php ?>

<!-- Header + Week Navigation -->
<div class="d-flex align-items-center justify-content-between mb-4 flex-wrap gap-2">
    <div>
        <h1 class="h3 fw-bold mb-0"><i class="fa-solid fa-calendar-week text-primary me-2"></i>المراجعة الأسبوعية</h1>
        <p class="text-muted mb-0">الأسبوع <?= $week ?> — <?= $start ?> إلى <?= $end ?></p>
    </div>
    <div class="btn-group">
        <a href="<?= BASE_URL ?>/review?year=<?= $prevYear ?>&week=<?= $prevWeek ?>" class="btn btn-outline-secondary rounded-pill rounded-end-0">
            <i class="fa-solid fa-chevron-right"></i> السابق
        </a>
        <a href="<?= BASE_URL ?>/review?year=<?= date('o') ?>&week=<?= date('W') ?>" class="btn btn-outline-primary">
            الأسبوع الحالي
        </a>
        <a href="<?= BASE_URL ?>/review?year=<?= $nextYear ?>&week=<?= $nextWeek ?>" class="btn btn-outline-secondary rounded-pill rounded-start-0">
            التالي <i class="fa-solid fa-chevron-left"></i>
        </a>
    </div>
</div>

<div class="row g-4">
    <!-- Radar Chart -->
    <div class="col-12 col-lg-5">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="card-body p-4 d-flex flex-column align-items-center">
                <h5 class="fw-bold mb-1 align-self-start">🎯 أداء الأسبوع الشامل</h5>
                <p class="text-muted small mb-3 align-self-start">تقييم 4 محاور رئيسية</p>
                <canvas id="radarChart" style="max-height:280px;"></canvas>
            </div>
        </div>
    </div>

    <!-- 4 Section Cards -->
    <div class="col-12 col-lg-7">
        <div class="row g-3">

            <!-- Tasks -->
            <div class="col-12 col-sm-6">
                <div class="card border-0 shadow-sm rounded-4 h-100" style="border-top: 4px solid #0d6efd !important;">
                    <div class="card-body p-3">
                        <div class="d-flex align-items-center gap-2 mb-2">
                            <i class="fa-solid fa-list-check fs-4 text-primary"></i>
                            <h6 class="fw-bold mb-0">المهام</h6>
                        </div>
                        <h3 class="fw-bold text-primary mb-1"><?= $tasks['pct'] ?>%</h3>
                        <small class="text-muted"><?= $tasks['done'] ?> منجزة من <?= $tasks['total'] ?> مهمة</small>
                        <?php if (!empty($tasks['avgRating'])): ?>
                        <div class="mt-2">
                            <small class="text-muted">متوسط تقييم اليومية: <strong><?= $tasks['avgRating'] ?>/5</strong></small>
                        </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>

            <!-- Health -->
            <div class="col-12 col-sm-6">
                <div class="card border-0 shadow-sm rounded-4 h-100" style="border-top: 4px solid #dc3545 !important;">
                    <div class="card-body p-3">
                        <div class="d-flex align-items-center gap-2 mb-2">
                            <i class="fa-solid fa-heart-pulse fs-4 text-danger"></i>
                            <h6 class="fw-bold mb-0">الصحة</h6>
                        </div>
                        <div class="d-flex gap-3">
                            <div>
                                <div class="fw-bold text-danger fs-5"><?= $health['fastings'] ?></div>
                                <small class="text-muted">صيام مكتمل</small>
                            </div>
                            <div>
                                <div class="fw-bold text-danger fs-5"><?= $health['activities'] ?></div>
                                <small class="text-muted">نشاط بدني</small>
                            </div>
                        </div>
                        <?php if ($health['avgWeight']): ?>
                        <small class="text-muted d-block mt-2">متوسط الوزن: <strong><?= $health['avgWeight'] ?> كجم</strong></small>
                        <?php endif; ?>
                    </div>
                </div>
            </div>

            <!-- Finance -->
            <div class="col-12 col-sm-6">
                <div class="card border-0 shadow-sm rounded-4 h-100" style="border-top: 4px solid #198754 !important;">
                    <div class="card-body p-3">
                        <div class="d-flex align-items-center gap-2 mb-2">
                            <i class="fa-solid fa-wallet fs-4 text-success"></i>
                            <h6 class="fw-bold mb-0">المالية</h6>
                        </div>
                        <h3 class="fw-bold <?= $finance['net'] >= 0 ? 'text-success' : 'text-danger' ?> mb-1"><?= number_format($finance['net']) ?> ج.م</h3>
                        <small class="text-muted">
                            دخل <?= number_format($finance['income']) ?> — مصروف <?= number_format($finance['expense']) ?>
                        </small>
                    </div>
                </div>
            </div>

            <!-- Education -->
            <div class="col-12 col-sm-6">
                <div class="card border-0 shadow-sm rounded-4 h-100" style="border-top: 4px solid #6f42c1 !important;">
                    <div class="card-body p-3">
                        <div class="d-flex align-items-center gap-2 mb-2">
                            <i class="fa-solid fa-graduation-cap fs-4 text-purple"></i>
                            <h6 class="fw-bold mb-0">التعليم</h6>
                        </div>
                        <div class="d-flex gap-3">
                            <div>
                                <div class="fw-bold fs-5" style="color:#6f42c1"><?= $education['skills_leveled'] ?></div>
                                <small class="text-muted">ارتقاء مهارة</small>
                            </div>
                            <div>
                                <div class="fw-bold fs-5" style="color:#6f42c1"><?= $education['courses_completed'] ?></div>
                                <small class="text-muted">دورة مكتملة</small>
                            </div>
                        </div>
                        <?php if (!empty($education['skills_events'])): ?>
                        <div class="mt-2">
                            <?php foreach (array_slice($education['skills_events'], 0, 2) as $ev): ?>
                            <small class="text-muted d-block text-truncate">• <?= htmlspecialchars($ev->description) ?></small>
                            <?php endforeach; ?>
                        </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<script>
const radarRaw = <?= $radarData ?>;
new Chart(document.getElementById('radarChart'), {
    type: 'radar',
    data: {
        labels: radarRaw.labels,
        datasets: [{
            label: 'أداؤك',
            data: radarRaw.values,
            borderColor: '#0d6efd',
            backgroundColor: '#0d6efd22',
            pointBackgroundColor: '#0d6efd',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: '#0d6efd',
            borderWidth: 2,
            pointRadius: 5,
        }]
    },
    options: {
        responsive: true,
        scales: {
            r: {
                min: 0,
                max: 100,
                ticks: { display: false },
                grid: { color: '#dee2e644' },
                pointLabels: { font: { size: 14, weight: 'bold' } }
            }
        },
        plugins: { legend: { display: false } }
    }
});
</script>
