<%- include('partials/page-start') %>

<section class="page">
  <div class="page-header">
    <div>
      <h1>Tổng quan</h1>
      <p>Theo dõi nhanh package, version mới nhất và các app đang được đóng gói.</p>
    </div>
    <div class="page-actions">
      <button class="btn btn-secondary" type="button" data-modal-open="uploadPackageModal">
        <span class="material-symbols-outlined">upload_file</span>
        Upload package
      </button>
      <a class="btn btn-primary" href="/builder">
        <span class="material-symbols-outlined">add_box</span>
        Tạo App
      </a>
    </div>
  </div>

  <div class="dashboard-stats">
    <article class="metric-card">
      <span>Packages</span>
      <div>
        <strong><%= stats.totalPackages %></strong>
        <small><%= stats.activePackages %> active</small>
      </div>
    </article>
    <article class="metric-card">
      <span>Versions</span>
      <div>
        <strong><%= stats.totalVersions %></strong>
        <small>latest tracking</small>
      </div>
    </article>
    <article class="metric-card">
      <span>Applications</span>
      <div>
        <strong><%= stats.totalApplications %></strong>
        <small><%= stats.releasedApplications %> released</small>
      </div>
    </article>
    <article class="metric-card">
      <span>Package types</span>
      <div>
        <strong>2</strong>
        <small>.deb + docker</small>
      </div>
    </article>
  </div>

  <div class="dashboard-grid">
    <section class="panel">
      <div class="panel-header">
        <div>
          <h2>Package mới cập nhật</h2>
          <p>Hiển thị version mới nhất cho từng package.</p>
        </div>
        <a href="/packages" class="text-link">Xem tất cả</a>
      </div>
      <div class="table-wrap compact">
        <table>
          <thead>
            <tr>
              <th>Package</th>
              <th>Type</th>
              <th>Latest</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            <% if (packages.length === 0) { %>
              <tr>
                <td colspan="4" class="table-empty">Chưa có package nào. Bấm Upload package để thêm dữ liệu đầu tiên.</td>
              </tr>
            <% } %>
            <% packages.slice(0, 4).forEach((item) => { %>
              <tr>
                <td>
                  <a class="table-title" href="/packages/<%= item.id %>"><%= item.name %></a>
                  <span class="table-subtitle"><%= item.code %></span>
                </td>
                <td><span class="badge <%= helpers.packageTypeClass(item.type) %>"><%= helpers.packageTypeLabel(item.type) %></span></td>
                <td><%= item.latestVersion %></td>
                <td><span class="badge <%= helpers.statusClass(item.status) %>"><%= item.status %></span></td>
              </tr>
            <% }) %>
          </tbody>
        </table>
      </div>
    </section>

    <section class="panel">
      <div class="panel-header">
        <div>
          <h2>Hoạt động gần đây</h2>
          <p>Các thay đổi chính trong package/app.</p>
        </div>
      </div>
      <div class="activity-list">
        <% if (activity.length === 0) { %>
          <div class="table-empty">Chưa có hoạt động upload/update package.</div>
        <% } %>
        <% activity.forEach((item) => { %>
          <div class="activity-item">
            <div class="activity-icon">
              <span class="material-symbols-outlined"><%= item.icon %></span>
            </div>
            <div>
              <strong><%= item.title %></strong>
              <span><%= item.detail %></span>
            </div>
            <time><%= item.time %></time>
          </div>
        <% }) %>
      </div>
    </section>
  </div>
</section>

<%- include('partials/package-modal') %>
<%- include('partials/page-end') %>
