<?php
/**
 * OTIS Spiritual Archive
 */
?>
<style>
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');
.archive-page { font-family: 'Tajawal', sans-serif; background-color: #f8fafc; color: #1e293b; min-height: 100vh; }
.timeline-card { border-radius: 16px; border: none; padding: 1.5rem; margin-bottom: 1rem; transition: transform 0.2s; background: white; border-right: 6px solid #cbd5e1; }
.timeline-card:hover { transform: translateX(-5px); }
.status-perfect { border-right-color: #10b981; }
.status-partial { border-right-color: #f59e0b; }
.status-weak { border-right-color: #ef4444; }
.summary-box { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); color: white; border-radius: 24px; padding: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
</style>

<div class="archive-page px-4 py-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="fw-bold"><i class="fa-solid fa-clock-rotate-left me-2 text-primary"></i> السجل الروحاني</h2>
        <a href="<?= BASE_URL ?>/spiritual" class="btn btn-outline-dark rounded-pill fw-bold"><i class="fa-solid fa-arrow-right"></i> لوحة اليوم</a>
    </div>

    <!-- WEEKLY SUMMARY -->
    <div class="summary-box mb-5 text-center">
        <h4 class="fw-bold mb-4 opacity-75">ملخص آخر 7 أيام</h4>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="fw-bold fs-5 opacity-75">متوسط الإنجاز</div>
                <div class="fs-1 fw-bold text-info"><?= $summary['avg'] ?>%</div>
            </div>
            <div class="col-md-4">
                <div class="fw-bold fs-5 opacity-75 text-success">أفضل سجل</div>
                <div class="fs-3 fw-bold mt-2"><?= isset($summary['best']['date']) ? date('M d', strtotime($summary['best']['date'])) : 'N/A' ?></div>
                <div class="badge bg-success mt-1"><?= (isset($summary['best']['score']) && $summary['best']['score'] !== -1) ? $summary['best']['score'].'%' : '' ?></div>
            </div>
            <div class="col-md-4">
                <div class="fw-bold fs-5 opacity-75 text-danger">أضعف سجل</div>
                <div class="fs-3 fw-bold mt-2"><?= isset($summary['worst']['date']) ? date('M d', strtotime($summary['worst']['date'])) : 'N/A' ?></div>
                <div class="badge bg-danger mt-1"><?= (isset($summary['worst']['score']) && $summary['worst']['score'] !== 101) ? $summary['worst']['score'].'%' : '' ?></div>
            </div>
        </div>
        
        <!-- Weekly Reflection -->
        <div class="row mt-4 pt-4 border-top border-secondary border-opacity-25 text-start">
            <div class="col-md-6">
                <h5 class="text-success fw-bold"><i class="fa-solid fa-arrow-trend-up me-2"></i>نقاط القوة والاستمرار</h5>
                <ul class="list-unstyled mb-0">
                    <?php if(!empty($summary['strengths'])): foreach($summary['strengths'] as $s): ?>
                        <li class="mb-2"><i class="fa-solid fa-check text-success me-2"></i> <?= $s ?></li>
                    <?php endforeach; else: ?>
                        <li class="text-muted"><i class="fa-solid fa-minus text-muted me-2"></i> لا توجد بيانات كافية أو استمرارية واضحة هذا الأسبوع.</li>
                    <?php endif; ?>
                </ul>
            </div>
            <div class="col-md-6 mt-4 mt-md-0">
                <h5 class="text-warning fw-bold"><i class="fa-solid fa-arrow-trend-down me-2"></i>مجالات التحسين (بلطف)</h5>
                <ul class="list-unstyled mb-0">
                    <?php if(!empty($summary['weaknesses'])): foreach($summary['weaknesses'] as $w): ?>
                        <li class="mb-2"><i class="fa-solid fa-circle-exclamation text-warning me-2"></i> <?= $w ?></li>
                    <?php endforeach; else: ?>
                        <li class="text-muted"><i class="fa-solid fa-check text-success me-2"></i> أداؤك متوازن وممتاز، حافظ عليه.</li>
                    <?php endif; ?>
                </ul>
            </div>
        </div>
    </div>

    <!-- ARCHIVE TIMELINE -->
    <h4 class="fw-bold mb-4 opacity-75">الأيام السابقة (سجل مقفل)</h4>
    <?php if (empty($days)): ?>
        <p class="text-muted">لا توجد أيام مسجلة مقفلة بعد.</p>
    <?php else: ?>
        <div class="row">
            <?php foreach ($days as $day): 
                $statusColor = 'status-partial';
                $icon = 'fa-minus';
                $textStatus = 'إنجاز جزئي';
                if ($day->final_status === 'perfect') { $statusColor = 'status-perfect'; $icon = 'fa-check text-success'; $textStatus = 'مكتمل'; }
                if ($day->final_status === 'weak') { $statusColor = 'status-weak'; $icon = 'fa-xmark text-danger'; $textStatus = 'ضعيف'; }
            ?>
            <div class="col-md-6 col-lg-4">
                <div class="timeline-card shadow-sm <?= $statusColor ?>">
                    <div class="d-flex justify-content-between align-items-middle mb-2">
                        <span class="fs-5 fw-bold"><?= date('l, M d, Y', strtotime($day->date)) ?></span>
                        <i class="fa-solid <?= $icon ?> fs-4"></i>
                    </div>
                    <p class="mb-2 text-muted fw-bold"><?= $textStatus ?> &bull; <?= $day->final_score ?>%</p>
                    <div class="badge bg-light text-dark shadow-sm border mb-2">
                        حال القلب: <?= $day->heart_state ?: 'لم يسجل' ?>
                    </div>
                    <div class="badge bg-warning text-dark shadow-sm border mb-2">
                        تقييمك: <?= $day->daily_rating ? $day->daily_rating.'/5' : 'لم يسجل' ?>
                    </div>
                    <div class="mt-3 d-flex gap-2">
                        <a href="<?= BASE_URL ?>/spiritual?date=<?= $day->date ?>" class="btn btn-sm btn-light fw-bold w-100 border">عرض / تعديل <i class="fa-solid fa-pen ms-1"></i></a>
                        <a href="<?= BASE_URL ?>/spiritual/deleteDay/<?= $day->date ?>" onclick="return confirm('تأكيد مسح كافة سجلات هذا اليوم؟')" class="btn btn-sm btn-outline-danger fw-bold border"><i class="fa-solid fa-trash"></i></a>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>
</div>
