<?= $this->extend('layouts/enterprise') ?>

<?= $this->section('content') ?>

<?php
$displayName = esc($currentUser['fullName'] ?? 'there');
$kpis = $kpis ?? [];
$summary = $summary ?? [];
$defaultPeriod = $defaultChartPeriod ?? 'q' . (int) ceil((int) date('n') / 3);
?>

<section class="enterprise-hero">
    <div class="enterprise-hero-content">
        <p class="enterprise-hero-status">SYSTEM ONLINE / <?= number_format($summary['activeSessions'] ?? 0) ?> ACTIVE SESSIONS</p>
        <h1 class="enterprise-hero-title">Welcome Back, <?= $displayName ?></h1>
        <p class="enterprise-hero-desc">
            Your organization has <?= number_format($summary['activeUsers'] ?? 0) ?> active users across
            <?= number_format($summary['branches'] ?? 0) ?> branches and
            <?= number_format($summary['departments'] ?? 0) ?> departments.
            <?= number_format($summary['activity24h'] ?? 0) ?> system events were recorded in the last 24 hours.
        </p>
    </div>
    <div class="enterprise-hero-date">
        <i class="fa-regular fa-calendar"></i>
        <div>
            <div class="enterprise-hero-date-main"><?= esc($operationalDate) ?></div>
            <div class="enterprise-hero-date-sub">LOCAL TIME (<?= esc($timezoneLabel) ?>)</div>
        </div>
    </div>
</section>

<section class="enterprise-kpi-grid">
    <?php foreach ($kpis as $kpi): ?>
        <article class="enterprise-kpi-card">
            <div class="enterprise-kpi-header">
                <span class="enterprise-kpi-label"><?= esc($kpi['label']) ?></span>
                <span class="enterprise-kpi-icon"><i class="fa-solid <?= esc($kpi['icon']) ?>"></i></span>
            </div>
            <div class="enterprise-kpi-value"><?= esc($kpi['value']) ?></div>
            <div class="enterprise-kpi-footer">
                <span class="enterprise-kpi-badge enterprise-kpi-badge--<?= esc($kpi['badgeType']) ?>">
                    <i class="fa-solid <?= $kpi['badgeType'] === 'positive' ? 'fa-arrow-trend-up' : 'fa-arrow-trend-down' ?>"></i>
                    <?= esc($kpi['badge']) ?>
                </span>
                <span class="enterprise-kpi-dept"><?= esc($kpi['dept']) ?></span>
            </div>
        </article>
    <?php endforeach; ?>
</section>

<?php
$docExpiry = $summary['documentExpiry'] ?? [];
$formatDate = static fn (?string $d): string => $d ? date('M j, Y', strtotime($d)) : '—';
$expiryAlerts = array_merge($docExpiry['recently_expired'] ?? [], $docExpiry['upcoming'] ?? []);
?>

<section class="enterprise-data-panel mb-4">
    <div class="enterprise-data-panel__head">
        <h2 class="enterprise-data-panel__title">Document Expiry Overview</h2>
        <p class="enterprise-data-panel__subtitle">
            Employee documents requiring attention —
            <strong><?= (int) ($docExpiry['expired'] ?? 0) ?></strong> expired,
            <strong><?= (int) ($docExpiry['expiring_30'] ?? 0) ?></strong> expiring within 30 days.
        </p>
    </div>
    <div class="enterprise-data-panel__body">
        <?php if ($expiryAlerts === []): ?>
            <p class="text-muted text-center py-4 mb-0">No document expiry alerts at this time.</p>
        <?php else: ?>
            <div class="table-responsive">
                <table class="enterprise-data-table">
                    <thead>
                        <tr><th>Employee</th><th>Document</th><th>Expiry Date</th><th></th></tr>
                    </thead>
                    <tbody>
                        <?php foreach (array_slice($expiryAlerts, 0, 6) as $doc): ?>
                            <tr>
                                <td>
                                    <span class="enterprise-data-table__primary"><?= esc($doc['full_name']) ?></span>
                                    <br><small class="text-muted"><?= esc($doc['employee_number']) ?></small>
                                </td>
                                <td><?= esc($doc['type_name']) ?></td>
                                <td><?= $formatDate($doc['expiry_date']) ?></td>
                                <td class="text-end">
                                    <a href="<?= base_url('documents/' . $doc['id']) ?>" class="btn btn-sm btn-outline-secondary">View</a>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        <?php endif; ?>
    </div>
    <div class="enterprise-data-panel__toolbar border-top-0 pt-0">
        <a href="<?= base_url('documents/expiry') ?>" class="btn btn-sm btn-outline-warning"><i class="fa-solid fa-clock me-1"></i>Full Expiry Tracker</a>
        <a href="<?= base_url('documents') ?>" class="btn btn-sm btn-outline-primary"><i class="fa-solid fa-folder-open me-1"></i>Employee Documents</a>
    </div>
</section>

<section class="enterprise-analytics">
    <div class="enterprise-analytics-header">
        <div>
            <h2 class="enterprise-analytics-title">System Analytics</h2>
            <p class="enterprise-analytics-subtitle">Live metrics from users, access control, and authentication activity</p>
        </div>
        <button class="enterprise-reload-btn" type="button" id="reloadFeedBtn">
            <i class="fa-solid fa-rotate-right"></i> Reload
        </button>
    </div>

    <div class="enterprise-charts-grid">
        <article class="enterprise-chart-card">
            <div class="enterprise-chart-header">
                <h3 class="enterprise-chart-title">NEW USER REGISTRATIONS</h3>
                <div class="enterprise-period-toggle" data-chart="registrationsChart">
                    <?php foreach (['q1', 'q2', 'q3', 'q4', 'fy'] as $period): ?>
                        <button type="button" data-period="<?= $period ?>"<?= $period === $defaultPeriod ? ' class="active"' : '' ?>><?= strtoupper($period) ?></button>
                    <?php endforeach; ?>
                </div>
            </div>
            <div class="enterprise-chart-body">
                <canvas id="registrationsChart" height="220"></canvas>
            </div>
        </article>

        <article class="enterprise-chart-card">
            <div class="enterprise-chart-header">
                <h3 class="enterprise-chart-title">USERS BY ROLE</h3>
                <div class="enterprise-period-toggle" data-chart="usersByRoleChart">
                    <?php foreach (['q1', 'q2', 'q3', 'q4', 'fy'] as $period): ?>
                        <button type="button" data-period="<?= $period ?>"<?= $period === $defaultPeriod ? ' class="active"' : '' ?>><?= strtoupper($period) ?></button>
                    <?php endforeach; ?>
                </div>
            </div>
            <div class="enterprise-chart-body">
                <canvas id="usersByRoleChart" height="220"></canvas>
            </div>
        </article>

        <article class="enterprise-chart-card">
            <div class="enterprise-chart-header">
                <h3 class="enterprise-chart-title">USERS BY BRANCH</h3>
                <div class="enterprise-period-toggle" data-chart="usersByBranchChart">
                    <?php foreach (['q1', 'q2', 'q3', 'q4', 'fy'] as $period): ?>
                        <button type="button" data-period="<?= $period ?>"<?= $period === $defaultPeriod ? ' class="active"' : '' ?>><?= strtoupper($period) ?></button>
                    <?php endforeach; ?>
                </div>
            </div>
            <div class="enterprise-chart-body">
                <canvas id="usersByBranchChart" height="220"></canvas>
            </div>
        </article>

        <article class="enterprise-chart-card">
            <div class="enterprise-chart-header">
                <h3 class="enterprise-chart-title">SUCCESSFUL LOGINS</h3>
                <div class="enterprise-period-toggle" data-chart="loginActivityChart">
                    <?php foreach (['q1', 'q2', 'q3', 'q4', 'fy'] as $period): ?>
                        <button type="button" data-period="<?= $period ?>"<?= $period === $defaultPeriod ? ' class="active"' : '' ?>><?= strtoupper($period) ?></button>
                    <?php endforeach; ?>
                </div>
            </div>
            <div class="enterprise-chart-body">
                <canvas id="loginActivityChart" height="220"></canvas>
            </div>
        </article>
    </div>
</section>

<script>
window.enterpriseChartData = <?= json_encode($chartData ?? [], JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP) ?>;
window.enterpriseDefaultPeriod = <?= json_encode($defaultPeriod) ?>;
</script>

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