{% extends "_frame.html" %}

{% block styles %}
<style>
/* Tab navigation - equal width */
nav.tabs {
  display: flex;
}

nav.tabs > a {
  flex: 1;
  min-width: 25%;
  text-align: center;
  justify-content: center;
}

/* Fix table column spacing and badge containment */
#running-agents-table td {
  padding: 12px 16px;
  vertical-align: middle;
}

#running-agents-table td:nth-child(4) {
  /* Status column - center and constrain */
  text-align: center;
  padding: 12px 8px;
  width: 120px;
  max-width: 120px;
}

#running-agents-table td:nth-child(5) {
  /* Started column - ensure space */
  padding-left: 20px;
  white-space: nowrap;
}

/* Badge styling - prevent overflow */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  white-space: nowrap;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 13px;
}

/* File modal styling */
.file-card {
  position: relative;
  padding: 12px 56px 12px 12px;
  border: 1px solid var(--outline-variant);
  border-radius: 8px;
  margin-bottom: 8px;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 0.2s;
}

.file-card:hover {
  background: var(--surface-container);
}

.file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  font-size: 14px;
  cursor: help;
}

.file-size {
  font-size: 12px;
  color: var(--on-surface-variant);
}

.download-btn {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--on-primary);
  cursor: pointer;
  transition: transform 0.2s;
  border: none;
}

.download-btn:hover {
  transform: translateY(-50%) scale(1.1);
}

.download-btn i {
  font-size: 20px;
}

.file-list-section {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 8px;
}

.file-list-section:empty::after {
  content: 'No files';
  display: block;
  text-align: center;
  color: var(--on-surface-variant);
  padding: 20px;
}
</style>
{% endblock %}

{% block menu %}
<h3>Analytics Dashboard</h3>
<div class="max"></div>
<div class="right-align bottom-align no-margin no-padding" style="height: 50px;">
  <nav class="center-align middle-align margin">
    <div>
      <a href="#" id="refresh-dashboard"><i class="small">refresh</i></a>
    </div>
    <div>refresh</div>
  </nav>
</div>
{% endblock %}

{% block details %}
<!-- Filters -->
<div class="grid" style="margin-bottom: 16px;">
  <div class="s12 m6 l2">
    <div class="field label border">
      <input type="text" id="filter-search" placeholder=" ">
      <label>Global Search</label>
    </div>
  </div>
  <div class="s12 m6 l2">
    <div class="field label suffix border">
      <select id="filter-agent">
        <option value="">All Agents</option>
      </select>
      <label>Agent Name</label>
      <i>arrow_drop_down</i>
    </div>
  </div>
  <div class="s12 m6 l2">
    <div class="field label suffix border">
      <select id="filter-user">
        <option value="">All Users</option>
      </select>
      <label>User</label>
      <i>arrow_drop_down</i>
    </div>
  </div>
  <div class="s12 m6 l2">
    <div class="field label suffix border">
      <select id="filter-status">
        <option value="">All Status</option>
      </select>
      <label>Status</label>
      <i>arrow_drop_down</i>
    </div>
  </div>
  <div class="s12 m6 l2">
    <div class="field label suffix border">
      <select id="time-range">
        <option value="1">Last 1 hour</option>
        <option value="6">Last 6 hours</option>
        <option value="24" selected>Last 24 hours</option>
        <option value="168">Last 7 days</option>
        <option value="720">Last 30 days</option>
        <option value="999999">All time</option>
      </select>
      <label>Time Range</label>
      <i>arrow_drop_down</i>
    </div>
  </div>
</div>

<!-- Statistics Boxes -->
<div class="grid">
  <div class="s12 m6 l3">
    <article class="border small-padding center-align">
      <h6 class="small">Total Executions</h6>
      <h3 id="stat-total" class="primary-text">-</h3>
    </article>
  </div>
  <div class="s12 m6 l3">
    <article class="border small-padding center-align">
      <h6 class="small">Running Now</h6>
      <h3 id="stat-running" class="primary-text">-</h3>
    </article>
  </div>
  <div class="s12 m6 l3">
    <article class="border small-padding center-align">
      <h6 class="small">Error Rate</h6>
      <h3 id="stat-errors" class="error-text">-</h3>
    </article>
  </div>
  <div class="s12 m6 l3">
    <article class="border small-padding center-align">
      <h6 class="small">Avg Runtime</h6>
      <h3 id="stat-runtime" class="secondary-text">-</h3>
    </article>
  </div>
</div>
{% endblock %}

{% block page %}
<div class="active page">
  <!-- Tab Navigation -->
  <nav class="tabs">
    <a data-ui="#tab-running" class="active">
      <i>play_circle</i>
      <span>Running Agents</span>
    </a>
    <a data-ui="#tab-errors">
      <i>error</i>
      <span>Errors</span>
    </a>
    <a data-ui="#tab-timeline">
      <i>timeline</i>
      <span>Timeline</span>
    </a>
    <a data-ui="#tab-stats">
      <i>bar_chart</i>
      <span>Statistics</span>
    </a>
  </nav>

  <!-- Running Agents Tab -->
  <div id="tab-running" class="page active">
    <article class="margin small-elevate large-padding">
      <h5>Running & Recent Agents</h5>
      <div class="small-divider"></div>

      <div style="overflow-x: auto; max-height: 600px; overflow-y: auto;">
        <table id="running-agents-table" class="border">
          <thead>
            <tr>
              <th>Agent Name</th>
              <th>Execution ID</th>
              <th>User</th>
              <th class="center-align">Status</th>
              <th>Started</th>
              <th>Runtime</th>
              <th class="center-align">Files (Up/Down)</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td colspan="8" class="center-align">Loading...</td>
            </tr>
          </tbody>
        </table>
      </div>
      <p id="results-count" class="small" style="margin-top: 8px; color: var(--on-surface-variant);"></p>
    </article>
  </div>

  <!-- File List Modal -->
  <dialog id="files-modal" style="max-width: 900px; width: 90%;">
    <h5>Execution Files: <span id="files-modal-fid"></span></h5>
    <div class="small-divider"></div>
    <div id="files-modal-content">
      <div class="grid">
        <div class="s12 m6">
          <h6>Uploads (<span id="upload-count">0</span>)</h6>
          <div class="file-list-section" id="upload-files-list"></div>
        </div>
        <div class="s12 m6">
          <h6>Downloads (<span id="download-count">0</span>)</h6>
          <div class="file-list-section" id="download-files-list"></div>
        </div>
      </div>
    </div>
    <div class="small-divider"></div>
    <nav class="right-align">
      <button data-ui="#files-modal" class="border">Close</button>
    </nav>
  </dialog>

  <!-- Errors Tab -->
  <div id="tab-errors" class="page">
    <article class="margin small-elevate large-padding">
      <h5>Recent Errors</h5>
      <div class="small-divider"></div>
      <div id="errors-container">
        <p class="center-align">Loading...</p>
      </div>
    </article>
  </div>

  <!-- Timeline Tab -->
  <div id="tab-timeline" class="page">
    <article class="margin small-elevate large-padding">
      <h5>Execution Timeline</h5>
      <div class="small-divider"></div>
      <div id="timeline-chart" style="min-height: 400px;">
        <p class="center-align">Loading...</p>
      </div>
    </article>
  </div>

  <!-- Statistics Tab -->
  <div id="tab-stats" class="page">
    <article class="margin small-elevate large-padding">
      <h5>Detailed Statistics</h5>
      <div class="small-divider"></div>

      <div class="grid">
        <div class="s12 m6">
          <h6>Executions by Status</h6>
          <table class="border">
            <thead>
              <tr>
                <th>Status</th>
                <th class="right-align">Count</th>
                <th class="right-align">Share</th>
              </tr>
            </thead>
            <tbody id="status-table-body">
              <tr>
                <td colspan="3" class="center-align">Loading...</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="s12 m6">
          <h6>Executions by User</h6>
          <table class="border">
            <thead>
              <tr>
                <th>User</th>
                <th class="right-align">Count</th>
                <th class="right-align">Share</th>
              </tr>
            </thead>
            <tbody id="user-table-body">
              <tr>
                <td colspan="3" class="center-align">Loading...</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </article>
  </div>
</div>

<!-- Error Detail Modal -->
<dialog id="error-detail-modal">
  <h5>Error Details</h5>
  <div id="error-detail-content"></div>
  <nav class="right-align">
    <button data-ui="#error-detail-modal">Close</button>
  </nav>
</dialog>

{% endblock %}

{% block script %}
{% include "dashboard/dashboard.js" %}
{% endblock %}