{% extends "base.html" %}
{% block title %}Dashboard — NFR{% endblock %}

{% block content %}
<div class="page-header flex-between">
  <div>
    <h1>Dashboard</h1>
    <p class="subtitle">System overview — NAS File Router</p>
  </div>
  <div class="flex gap-1">
    <span class="text-muted text-sm" id="clock"></span>
  </div>
</div>

{# ── System status row ────────────────────────────────────────────────────── #}
<div class="grid-4">
  {# DB #}
  <div class="card">
    <div class="card-title">Database</div>
    <div>
      <span class="status-dot status-ok"></span>
      <strong>PostgreSQL</strong>
    </div>
    <div class="text-muted text-sm mt-1">Connected</div>
  </div>

  {# NAS #}
  <div class="card">
    <div class="card-title">NAS Mount</div>
    {% if nas_mounted %}
    <div>
      <span class="status-dot status-ok"></span>
      <strong>Mounted</strong>
    </div>
    <div class="path-text mt-1">{{ settings.NAS_ROOT_PATH }}</div>
    {% else %}
    <div>
      <span class="status-dot status-error"></span>
      <strong class="text-danger">Not mounted</strong>
    </div>
    <div class="text-muted text-sm mt-1">{{ settings.NAS_ROOT_PATH }}</div>
    {% endif %}
  </div>

  {# Dry-run #}
  <div class="card">
    <div class="card-title">Write Mode</div>
    {% if settings.DRY_RUN_MODE %}
    <div>
      <span class="status-dot status-warn"></span>
      <strong>Dry-run ON</strong>
    </div>
    <div class="text-muted text-sm mt-1">No files written to NAS</div>
    {% else %}
    <div>
      <span class="status-dot status-ok"></span>
      <strong>Live writes</strong>
    </div>
    <div class="text-muted text-sm mt-1">DRY_RUN_MODE = false</div>
    {% endif %}
  </div>

  {# ClickUp #}
  <div class="card">
    <div class="card-title">ClickUp API</div>
    {% if settings.CLICKUP_API_TOKEN %}
    <div>
      <span class="status-dot status-ok"></span>
      <strong>Configured</strong>
    </div>
    <div class="text-muted text-sm mt-1">Space: {{ settings.CLICKUP_SPACE_ID or "—" }}</div>
    {% else %}
    <div>
      <span class="status-dot status-error"></span>
      <strong>Not configured</strong>
    </div>
    <div class="text-muted text-sm mt-1">CLICKUP_API_TOKEN not set</div>
    {% endif %}
  </div>
</div>

{# ── Today's activity ─────────────────────────────────────────────────────── #}
<h2 class="text-sm text-muted mb-1" style="text-transform:uppercase;letter-spacing:.05em;font-weight:600;">Today's Activity</h2>
<div class="grid-4 mb-2">
  <div class="card">
    <div class="stat-widget">
      <div class="stat-value">{{ today_ingested }}</div>
      <div class="stat-label">Ingested</div>
    </div>
  </div>
  <div class="card">
    <div class="stat-widget">
      <div class="stat-value success">{{ today_done }}</div>
      <div class="stat-label">Written to NAS</div>
    </div>
  </div>
  <div class="card">
    <div class="stat-widget">
      <div class="stat-value warning">{{ today_review }}</div>
      <div class="stat-label">Sent to Review</div>
    </div>
  </div>
  <div class="card">
    <div class="stat-widget">
      <div class="stat-value {% if today_errors %}danger{% endif %}">{{ today_errors }}</div>
      <div class="stat-label">Errors</div>
    </div>
  </div>
</div>

{# ── Sync summary + Review queue ──────────────────────────────────────────── #}
<div class="grid-2">

  {# Last sync #}
  <div class="card">
    <div class="card-title">Last ClickUp Sync</div>
    {% if last_sync %}
      <div class="flex-between">
        <div>
          {% if last_sync.status == "success" %}
          <span class="badge badge-success">Success</span>
          {% elif last_sync.status == "error" %}
          <span class="badge badge-danger">Error</span>
          {% elif last_sync.status == "running" %}
          <span class="badge badge-info">Running…</span>
          {% else %}
          <span class="badge badge-neutral">{{ last_sync.status }}</span>
          {% endif %}
          <span class="text-muted text-sm ml-1">{{ last_sync.started_at.strftime("%Y-%m-%d %H:%M UTC") if last_sync.started_at else "—" }}</span>
        </div>
        <a href="/sync" class="btn btn-outline btn-sm">History</a>
      </div>
      <div class="mt-1 text-sm">
        Projects found: <strong>{{ last_sync.projects_found or 0 }}</strong> &nbsp;
        New: <strong>{{ last_sync.projects_new or 0 }}</strong> &nbsp;
        Updated: <strong>{{ last_sync.projects_updated or 0 }}</strong>
      </div>
      {% if next_sync_seconds is not none %}
      <div class="text-muted text-sm mt-1">
        Next sync in ~{{ (next_sync_seconds // 60) }}m {{ next_sync_seconds % 60 }}s
        (interval: {{ settings.CLICKUP_SYNC_INTERVAL_MINUTES }}m)
      </div>
      {% endif %}
      {% if last_sync.error_message %}
      <div class="alert alert-danger mt-1">{{ last_sync.error_message }}</div>
      {% endif %}
    {% else %}
      <div class="text-muted">No sync runs recorded yet.</div>
      <div class="text-sm mt-1">Sync will run automatically every {{ settings.CLICKUP_SYNC_INTERVAL_MINUTES }} minutes.</div>
    {% endif %}
  </div>

  {# Review queue #}
  <div class="card">
    <div class="card-title">Review Queue</div>
    <div class="flex-between">
      <div>
        <span class="stat-value {% if pending_review_count %}warning{% endif %}" style="font-size:24px">
          {{ pending_review_count }}
        </span>
        <span class="text-muted text-sm"> pending item{{ "s" if pending_review_count != 1 }}</span>
      </div>
      {% if pending_review_count %}
      <a href="/review" class="btn btn-primary btn-sm">Review now</a>
      {% else %}
      <a href="/review" class="btn btn-outline btn-sm">View queue</a>
      {% endif %}
    </div>
    {% if oldest_review_at %}
    <div class="text-muted text-sm mt-1">
      Oldest item: {{ oldest_review_at.strftime("%Y-%m-%d %H:%M UTC") }}
    </div>
    {% endif %}
  </div>

</div>

{# ── Recent failures ──────────────────────────────────────────────────────── #}
<div class="card">
  <div class="flex-between mb-1">
    <div class="card-title">Recent Failures</div>
    <a href="/files?status=error" class="text-sm">View all errors →</a>
  </div>

  {% if recent_failures %}
  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Filename</th>
          <th>Source</th>
          <th>Status</th>
          <th>Error</th>
          <th>When</th>
        </tr>
      </thead>
      <tbody>
        {% for rec in recent_failures %}
        <tr>
          <td><a href="/files?status=error" class="mono">{{ rec.id }}</a></td>
          <td>{{ rec.original_filename }}</td>
          <td><span class="badge badge-neutral">{{ rec.ingest_source }}</span></td>
          <td>
            {% if rec.status == "error" %}
            <span class="badge badge-danger">error</span>
            {% else %}
            <span class="badge badge-warning">{{ rec.status }}</span>
            {% endif %}
          </td>
          <td class="text-sm" style="max-width:400px;">
            {% if rec.error_message %}
            <span style="color:var(--color-danger);" title="{{ rec.error_message }}">{{ rec.error_message[:120] }}{% if rec.error_message|length > 120 %}…{% endif %}</span>
            {% else %}
            <span class="text-muted">—</span>
            {% endif %}
          </td>
          <td class="text-sm text-muted">
            {{ rec.created_at.strftime("%Y-%m-%d %H:%M") if rec.created_at else "—" }}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <div class="text-muted text-sm">No failures in the last 24 hours. ✓</div>
  {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script>
  // Live clock
  function tick() {
    const el = document.getElementById('clock');
    if (el) el.textContent = new Date().toUTCString().replace(' GMT', ' UTC');
  }
  tick();
  setInterval(tick, 1000);
</script>
{% endblock %}