<style>
/* Activity Heatmap */
.heatmap-grid { display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; }
.heatmap-cell { width: 14px; height: 14px; border-radius: 3px; background-color: #f1f5f9; transition: transform 0.1s; }
.heatmap-cell:hover { transform: scale(1.3); z-index: 10; position:relative; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
.lvl-0 { background-color: #f1f5f9; border: 1px solid #e2e8f0; }
.lvl-1 { background-color: #93c5fd; border: 1px solid #60a5fa; }
.lvl-2 { background-color: #3b82f6; }
.lvl-3 { background-color: #1d4ed8; }
.lvl-4 { background-color: #1e3a8a; }
.table-telemetry th { border-bottom: 2px solid #e2e8f0; color: #64748b; font-size: 0.85rem; }
.table-telemetry td { border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
</style>

<div class="row fade-in mb-4 pb-2 border-bottom">
    <div class="col-md-8">
        <h1 class="h2 fw-bold text-dark mb-1"><i class="fa-solid fa-satellite-dish text-info me-2"></i> سجل العمليات</h1>
        <p class="text-secondary mb-0">تتبع مفصل لنشاط النظام والعمليات التي قمت بها.</p>
    </div>
</div>

<div class="row g-4 fade-in">
    <!-- BEHAVIOR MIRROR HEATMAP -->
    <div class="col-12">
        <div class="card p-4 border-0 shadow-sm rounded-4 bg-white">
            <h6 class="fw-bold mb-3 text-dark"><i class="fa-solid fa-chart-gantt me-2 text-primary"></i> خريطة التفاعل المبنية على 90 يوماً</h6>
            <div class="heatmap-grid" dir="ltr">
                <?php 
                if(isset($heatmap)): 
                    foreach($heatmap as $date => $count): 
                        $class = "heatmap-cell lvl-0";
                        if ($count > 15) $class = "heatmap-cell lvl-4";
                        elseif ($count > 8) $class = "heatmap-cell lvl-3";
                        elseif ($count > 3) $class = "heatmap-cell lvl-2";
                        elseif ($count > 0) $class = "heatmap-cell lvl-1";
                ?>
                <div class="<?= $class ?>" title="<?= $date ?> | العمليات: <?= $count ?>"></div>
                <?php endforeach; endif; ?>
            </div>
            <div class="d-flex align-items-center justify-content-end gap-2 mt-3 fs-7 text-secondary">
                <span>أقل نشاطاً</span>
                <div class="heatmap-cell lvl-0"></div>
                <div class="heatmap-cell lvl-1"></div>
                <div class="heatmap-cell lvl-2"></div>
                <div class="heatmap-cell lvl-3"></div>
                <div class="heatmap-cell lvl-4"></div>
                <span>شديد النشاط</span>
            </div>
        </div>
    </div>

    <!-- LOGS FEED -->
    <div class="col-12">
        <div class="card p-0 border-0 shadow-sm rounded-4 bg-white overflow-hidden">
            <div class="table-responsive">
                <table class="table table-telemetry mb-0 align-middle table-hover">
                    <thead class="bg-light">
                        <tr>
                            <th class="py-3 px-4">الطابع الزمني</th>
                            <th class="py-3">القسم</th>
                            <th class="py-3">الحدث</th>
                            <th class="py-3">التفاصيل</th>
                            <th class="py-3">الرقم المرجعي</th>
                            <th class="py-3 text-end px-4">أدوات إضافية</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php if(empty($logs)): ?>
                            <tr><td colspan="6" class="text-center py-5 text-muted">لم يتم رصد أي عمليات حتى الآن.</td></tr>
                        <?php endif; ?>
                        
                        <?php foreach($logs as $log): 
                            $badgeColor = 'secondary border';
                            if($log->action == 'created') $badgeColor = 'success';
                            if($log->action == 'updated') $badgeColor = 'info text-dark';
                            if($log->action == 'deleted') $badgeColor = 'danger';
                            if($log->action == 'restored') $badgeColor = 'warning text-dark';
                        ?>
                        <tr>
                            <td class="text-muted px-4" style="font-family: 'Courier New', monospace;"><small dir="ltr"><?= date('Y-m-d H:i:s', strtotime($log->created_at)) ?></small></td>
                            <td><span class="badge bg-light text-dark border" style="text-transform: uppercase;"><?= htmlspecialchars($log->module) ?></span></td>
                            <td><span class="badge bg-<?= $badgeColor ?>"><?= strtoupper(htmlspecialchars($log->action)) ?></span></td>
                            <td class="text-secondary" style="font-size: 0.95rem;"><?= htmlspecialchars($log->description) ?></td>
                            <td class="text-muted" style="font-family: monospace;">#<?= $log->record_id ?: '-' ?></td>
                            <td class="text-end px-4">
                                <?php if ($log->action == 'deleted' && $log->record_id): ?>
                                <form action="<?= BASE_URL ?>/system/restoreRecord" method="POST" style="display:inline;">
                                    <?= csrf_field() ?>
                                    <input type="hidden" name="model_path" value="<?= htmlspecialchars($log->module) ?>/Models/<?= htmlspecialchars($log->module) ?>Model">
                                    <input type="hidden" name="record_id" value="<?= $log->record_id ?>">
                                    <button class="btn btn-sm btn-outline-warning fw-bold pulse" style="font-size:0.75rem;" onclick="return confirm('هل أنت متأكد من محاولة استعادة هذا السجل؟')">
                                        <i class="fa-solid fa-rotate-left"></i> استعادة
                                    </button>
                                </form>
                                <?php endif; ?>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
            <div class="p-3 text-end text-muted small bg-light border-top">
                يتم عرض آخر 300 عملية تمت على النظام.
            </div>
        </div>
    </div>
</div>
