<?= $this->extend('layouts/main') ?>
<?= $this->section('content') ?>

<div class="d-flex justify-content-between align-items-start mb-4 gap-3">
    <div class="alert alert-light border small mb-0 flex-grow-1">
        <i class="bi bi-info-circle me-1" style="color: var(--brand);"></i>
        These are straightforward rule-based and statistical observations computed from your real operational data — not
        machine learning or predictive AI. Each card below shows exactly what real data it's based on.
    </div>
    <a href="<?= site_url('ai-modules/settings') ?>" class="btn btn-outline-secondary flex-shrink-0"><i class="bi bi-sliders me-1"></i>Settings</a>
</div>

<?php if (empty($insights)): ?>
    <div class="card">
        <div class="card-body text-center text-muted py-5">
            <i class="bi bi-lightbulb fs-1"></i>
            <p class="mt-3 mb-0">Not enough data yet to generate insights.</p>
        </div>
    </div>
<?php else: ?>
    <div class="row g-3">
        <?php foreach ($insights as $insight):
            $sevColor = ['high' => '#ef4444', 'medium' => '#f59e0b', 'low' => '#22c55e'][$insight['severity']] ?? '#9ca3af';
            $sevBadge = ['high' => 'danger', 'medium' => 'warning', 'low' => 'success'][$insight['severity']] ?? 'secondary';
        ?>
            <div class="col-lg-6">
                <div class="card h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <div class="stat-icon-sm" style="background: color-mix(in srgb, <?= $sevColor ?> 15%, white); color: <?= $sevColor ?>;">
                                <i class="bi bi-graph-up"></i>
                            </div>
                            <span class="badge bg-<?= $sevBadge ?>"><?= esc(ucfirst($insight['severity'])) ?></span>
                        </div>
                        <h5 class="mb-2"><?= esc($insight['title']) ?></h5>
                        <p class="mb-2"><?= esc($insight['summary']) ?></p>
                        <p class="text-muted small mb-0"><i class="bi bi-database me-1"></i><?= esc($insight['basis']) ?></p>
                    </div>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
<?php endif; ?>

<?= $this->endSection() ?>

<?= $this->section('styles') ?>
.stat-icon-sm { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
<?= $this->endSection() ?>
