<div class="d-flex justify-content-end mb-2">
  <button class="btn btn-sm btn-outline-secondary" id="refreshStatsBtn" title="Statistik di-cache hingga 5 menit — klik untuk hitung ulang sekarang">
    <i class="fas fa-sync-alt mr-1"></i> Refresh Statistik
  </button>
</div>

<div class="row">
  <div class="col-lg-3 col-6">
    <a href="/email" class="small-box bg-info" style="color:inherit">
      <div class="inner">
        <h3><%= stats.totalEmail.toLocaleString('id-ID') %></h3>
        <p>Total Email<% if (stats.unlimitedCount) { %> (<%= stats.unlimitedCount %> tanpa batas quota)<% } %></p>
      </div>
      <div class="icon"><i class="fas fa-envelope"></i></div>
    </a>
  </div>
  <div class="col-lg-3 col-6">
    <div class="small-box bg-success">
      <div class="inner">
        <h3><%= stats.totalStorageMB == null ? 'Unlimited' : stats.totalStorageMB.toLocaleString('id-ID') + ' MB' %></h3>
        <p>Total Storage (Akun cPanel)</p>
      </div>
      <div class="icon"><i class="fas fa-database"></i></div>
    </div>
  </div>
  <div class="col-lg-3 col-6">
    <div class="small-box bg-warning">
      <div class="inner">
        <h3><%= stats.usedStorageMB.toLocaleString('id-ID') %> <sup style="font-size:1rem">MB</sup></h3>
        <p>Used Storage</p>
      </div>
      <div class="icon"><i class="fas fa-chart-pie"></i></div>
    </div>
  </div>
  <div class="col-lg-3 col-6">
    <div class="small-box bg-secondary">
      <div class="inner">
        <h3><%= stats.freeStorageMB == null ? 'Unlimited' : (stats.freeStorageMB / 1024).toLocaleString('id-ID', { maximumFractionDigits: 2 }) + ' GB' %></h3>
        <p>Free Storage (Akun cPanel)</p>
      </div>
      <div class="icon"><i class="fas fa-hdd"></i></div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-8">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Email Dibuat (30 Hari Terakhir)</h3>
        <div class="card-tools">
          <span class="badge badge-info">Hari ini: <%= chart.createdToday %></span>
          <span class="badge badge-primary">Bulan ini: <%= chart.createdThisMonth %></span>
        </div>
      </div>
      <div class="card-body">
        <canvas id="creationChart" height="110"></canvas>
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Recent Activity</h3>
      </div>
      <div class="card-body p-0" style="max-height:360px;overflow-y:auto">
        <ul class="list-group list-group-flush">
          <% if (!recentActivity.length) { %>
            <li class="list-group-item text-muted">Belum ada aktivitas.</li>
          <% } %>
          <% recentActivity.forEach(function(log) { %>
            <li class="list-group-item">
              <div class="d-flex justify-content-between">
                <strong><%= log.action %></strong>
                <span class="badge badge-<%= log.status === 'success' ? 'success' : 'danger' %>"><%= log.status %></span>
              </div>
              <div class="small text-muted"><%= log.description %></div>
              <div class="small text-muted"><%= log.user_name %> &middot; <%= formatDateTime(log.created_at) %></div>
            </li>
          <% }); %>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Statistics <span class="text-muted small font-weight-normal">(Akun cPanel)</span></h3>
      </div>
      <div class="card-body">
        <div class="row">
          <% resourceUsage.forEach(function(item) { %>
          <div class="col-md-6 col-lg-4 mb-3">
            <div class="d-flex justify-content-between">
              <span><%= item.label %></span>
              <span class="text-muted small">
                <%= item.usedDisplay %> / <%= item.maxDisplay %><% if (item.percent != null) { %> (<%= item.percent %>%)<% } %>
              </span>
            </div>
            <% if (item.percent != null) { %>
            <div class="progress" style="height:6px">
              <div class="progress-bar <%= item.percent >= 90 ? 'bg-danger' : item.percent >= 70 ? 'bg-warning' : 'bg-success' %>" style="width:<%= item.percent %>%"></div>
            </div>
            <% } %>
          </div>
          <% }); %>
        </div>
      </div>
    </div>
  </div>
</div>

<% if (typeof mock !== 'undefined' && mock) { %>
<div class="alert alert-info">
  <i class="fas fa-info-circle mr-1"></i>
  Aplikasi berjalan dalam <strong>Mock Mode</strong> (CPANEL_MOCK=true) &mdash; data email adalah simulasi lokal, bukan dari server cPanel sungguhan. Ubah di halaman Settings untuk menghubungkan ke cPanel asli.
</div>
<% } %>

<script nonce="<%= cspNonce %>">
  window.__dashboardChartData = <%- JSON.stringify(chart.series) %>;
</script>
<script src="/vendor/chart.js/chart.umd.min.js"></script>
<script src="/js/dashboard.js?v=<%= assetVersion %>"></script>
