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

<div class="d-flex justify-content-end mb-3">
    <a href="<?= site_url('inventory/new') ?>" class="btn btn-primary btn-sm"><i class="bi bi-plus-lg me-1"></i>Add Item</a>
</div>

<div class="row g-3 mb-3">
    <div class="col-6 col-lg-3">
        <div class="card h-100"><div class="card-body">
            <div class="text-muted small mb-1">Total Items</div>
            <div class="fs-3 fw-bold"><?= $stats['totalItems'] ?></div>
        </div></div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="card h-100"><div class="card-body">
            <div class="text-muted small mb-1">Low Stock</div>
            <div class="fs-3 fw-bold text-danger"><?= $stats['lowStockCount'] ?></div>
        </div></div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="card h-100"><div class="card-body">
            <div class="text-muted small mb-1">Total Value</div>
            <div class="fs-3 fw-bold"><?= format_money($stats['totalValue']) ?></div>
        </div></div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="card h-100"><div class="card-body">
            <div class="text-muted small mb-1">Categories</div>
            <div class="fs-3 fw-bold"><?= $stats['categories'] ?></div>
        </div></div>
    </div>
</div>

<div class="row g-3">
    <div class="col-lg-8">
        <div class="card mb-3">
            <div class="card-header">Inventory Overview</div>
            <div class="table-responsive">
                <table class="table mb-0 align-middle small">
                    <thead><tr><th>Item</th><th>Category</th><th>In Stock</th><th>Unit</th><th>Reorder Level</th><th>Status</th><th></th></tr></thead>
                    <tbody>
                    <?php if (empty($items)): ?>
                        <tr><td colspan="7" class="text-center text-muted py-4">No inventory items yet.</td></tr>
                    <?php endif; ?>
                    <?php foreach ($items as $item):
                        $low = $item->quantity_in_stock <= $item->reorder_level;
                    ?>
                        <tr>
                            <td class="fw-semibold"><?= esc($item->name) ?></td>
                            <td class="text-muted"><?= esc($lookups->inventoryCategories[$item->category]['label'] ?? ucfirst($item->category)) ?></td>
                            <td><?= (int) $item->quantity_in_stock ?></td>
                            <td class="text-muted"><?= esc($item->unit) ?></td>
                            <td class="text-muted"><?= (int) $item->reorder_level ?></td>
                            <td><span class="badge bg-<?= $low ? 'danger' : 'success' ?>"><?= $low ? 'Low Stock' : 'In Stock' ?></span></td>
                            <td class="text-end">
                                <a href="<?= site_url('inventory/' . $item->id) ?>" class="btn btn-sm btn-outline-secondary"><i class="bi bi-eye"></i></a>
                                <a href="<?= site_url('inventory/' . $item->id . '/edit') ?>" class="btn btn-sm btn-outline-secondary"><i class="bi bi-pencil"></i></a>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card mb-3">
            <div class="card-header">Value by Category</div>
            <div class="card-body">
                <?php if (empty($valueByCategory)): ?>
                    <p class="text-muted small mb-0">No items yet.</p>
                <?php endif; ?>
                <?php $max = $valueByCategory ? max($valueByCategory) : 1; ?>
                <?php foreach ($valueByCategory as $cat => $value): ?>
                    <div class="d-flex justify-content-between small mb-1">
                        <span><?= esc($lookups->inventoryCategories[$cat]['label'] ?? ucfirst($cat)) ?></span>
                        <span class="fw-semibold"><?= format_money($value) ?></span>
                    </div>
                    <div class="progress mb-2" style="height: 6px;">
                        <div class="progress-bar" style="width: <?= (float) $max > 0 ? round((float) $value / (float) $max * 100) : 0 ?>%; background: var(--brand);"></div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-header">Low Stock Alerts</div>
            <ul class="list-group list-group-flush">
                <?php if (empty($lowStock)): ?>
                    <li class="list-group-item text-center text-muted py-3 small">Nothing low right now.</li>
                <?php endif; ?>
                <?php foreach ($lowStock as $item): ?>
                    <li class="list-group-item d-flex justify-content-between align-items-center small">
                        <span><?= esc($item->name) ?></span>
                        <span class="badge bg-danger"><?= (int) $item->quantity_in_stock ?> <?= esc($item->unit) ?> left</span>
                    </li>
                <?php endforeach; ?>
            </ul>
        </div>

        <div class="card">
            <div class="card-header">Stock Value Trend <span class="text-muted small fw-normal">(30 days, net GHS movement)</span></div>
            <div class="card-body"><canvas id="valueTrendChart" height="110"></canvas></div>
        </div>
    </div>
</div>

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

<?= $this->section('scripts') ?>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
<script>
new Chart(document.getElementById('valueTrendChart'), {
    type: 'bar',
    data: {
        labels: [<?= implode(',', array_map(static fn ($d) => json_encode(date('d M', strtotime($d))), array_keys($valueTrend))) ?>],
        datasets: [{
            data: [<?= implode(',', array_map(static fn ($v) => (float) $v, array_values($valueTrend))) ?>],
            backgroundColor: [<?= implode(',', array_map(static fn ($v) => (float) $v >= 0 ? "'#22c55e'" : "'#ef4444'", array_values($valueTrend))) ?>],
        }],
    },
    options: { plugins: { legend: { display: false } }, scales: { y: { ticks: { callback: (v) => 'GHS ' + v } } } },
});
</script>
<?= $this->endSection() ?>
