{% extends "admin/base_site.html" %}
{% load i18n %}

{% comment %}
Dashboard page for django-taskly.

Displays aggregated stats cards (auto-refreshed via HTMX every 30 s),
a slow-tasks table, and a recent-tasks table.

Context variables
-----------------
title            str        — page heading from DASHBOARD_TITLE setting
total_tasks      int        — total snapshot count
successful_count int        — SUCCESSFUL snapshot count
failed_count     int        — FAILED snapshot count
success_rate     float      — percentage (0.0–100.0)
slow_tasks       QuerySet   — up to 10 slowest TaskSnapshot objects
recent_tasks     QuerySet   — up to 20 recently-updated TaskSnapshot objects
{% endcomment %}

{% block title %}{{ title }} | {% trans "Django Taskly" %}{% endblock %}
{% block content_title %}{% endblock %}

{% block extrahead %}
  {{ block.super }}
  {# Load HTMX from CDN for partial auto-refresh #}
  <script src="https://unpkg.com/htmx.org@2.0.4" defer></script>
  <style>
    /* ------------------------------------------------------------------ */
    /* Layout                                                               */
    /* ------------------------------------------------------------------ */
    .taskly-section {
      margin: 1.5rem 0;
    }

    .taskly-section-title {
      font-size: 1rem;
      font-weight: 600;
      color: var(--body-fg, #333);
      margin: 0 0 0.75rem;
      padding-bottom: 0.4rem;
      border-bottom: 1px solid var(--border-color, #ddd);
    }

    /* ------------------------------------------------------------------ */
    /* Stats grid                                                           */
    /* ------------------------------------------------------------------ */
    .taskly-stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 1rem;
      margin-bottom: 2rem;
    }

    .taskly-stat-card {
      background: var(--darkened-bg, #f8f8f8);
      border: 1px solid var(--border-color, #ddd);
      border-radius: 6px;
      padding: 1.25rem 1.5rem;
      text-align: center;
    }

    .taskly-stat-card--success {
      border-left: 4px solid #2e7d32;
    }

    .taskly-stat-card--danger {
      border-left: 4px solid #c62828;
    }

    .taskly-stat-label {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--body-quiet-color, #666);
      margin-bottom: 0.5rem;
    }

    .taskly-stat-value {
      font-size: 2rem;
      font-weight: 700;
      color: var(--body-fg, #333);
      line-height: 1;
    }

    /* ------------------------------------------------------------------ */
    /* Tables                                                               */
    /* ------------------------------------------------------------------ */
    .taskly-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.875rem;
    }

    .taskly-table th {
      text-align: left;
      padding: 0.5rem 0.75rem;
      background: var(--darkened-bg, #f8f8f8);
      border-bottom: 2px solid var(--border-color, #ddd);
      font-weight: 600;
      white-space: nowrap;
    }

    .taskly-table td {
      padding: 0.5rem 0.75rem;
      border-bottom: 1px solid var(--border-color, #eee);
      vertical-align: middle;
    }

    .taskly-table tr:last-child td {
      border-bottom: none;
    }

    .taskly-table tr:hover td {
      background: var(--selected-row, #f0f0f0);
    }

    .taskly-empty-state {
      text-align: center;
      padding: 2rem !important;
      color: var(--body-quiet-color, #888);
      font-style: italic;
    }

    /* ------------------------------------------------------------------ */
    /* Status badges                                                        */
    /* ------------------------------------------------------------------ */
    .taskly-badge {
      display: inline-block;
      padding: 0.15em 0.55em;
      border-radius: 3px;
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .taskly-badge--success { background: #e8f5e9; color: #2e7d32; }
    .taskly-badge--danger  { background: #ffebee; color: #c62828; }
    .taskly-badge--info    { background: #e3f2fd; color: #1565c0; }
    .taskly-badge--warning { background: #fff3e0; color: #e65100; }

    /* ------------------------------------------------------------------ */
    /* Misc                                                                 */
    /* ------------------------------------------------------------------ */
    .taskly-slow-indicator {
      color: #e65100;
      font-size: 0.65rem;
      vertical-align: middle;
    }

    .taskly-truncate {
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .taskly-refresh-note {
      font-size: 0.75rem;
      color: var(--body-quiet-color, #888);
      margin-top: -0.5rem;
      margin-bottom: 1rem;
    }

    /* ------------------------------------------------------------------ */
    /* Toolbar                                                              */
    /* ------------------------------------------------------------------ */
    .taskly-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 1.25rem;
    }

    .taskly-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.45rem 1rem;
      border: 1px solid var(--border-color, #ccc);
      border-radius: 4px;
      font-size: 0.8rem;
      font-weight: 600;
      cursor: pointer;
      background: var(--darkened-bg, #f8f8f8);
      color: var(--body-fg, #333);
      transition: background 0.15s;
    }

    .taskly-btn:hover {
      background: var(--border-color, #ddd);
    }

    .taskly-btn--active {
      background: var(--primary, #417690);
      color: #fff;
      border-color: var(--primary, #417690);
    }

    .taskly-btn--active:hover {
      opacity: 0.9;
      background: var(--primary, #417690);
    }

    .taskly-auto-refresh-group {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      border: 1px solid var(--border-color, #ccc);
      border-radius: 4px;
      padding: 0.25rem 0.5rem;
      background: var(--darkened-bg, #f8f8f8);
    }

    .taskly-auto-refresh-group label {
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--body-fg, #333);
      white-space: nowrap;
    }

    .taskly-auto-refresh-group input[type="number"] {
      width: 50px;
      padding: 0.2rem 0.35rem;
      border: 1px solid var(--border-color, #ccc);
      border-radius: 3px;
      font-size: 0.8rem;
      text-align: center;
      background: var(--body-bg, #fff);
      color: var(--body-fg, #333);
    }

    .taskly-countdown {
      font-size: 0.75rem;
      color: var(--body-quiet-color, #888);
      min-width: 80px;
    }
  </style>
{% endblock %}

{% block content %}
  {# -------------------------------------------------------------------- #}
  {# Toolbar: Navigation + Refresh + Auto-refresh                          #}
  {# -------------------------------------------------------------------- #}
  <div class="taskly-toolbar">
    <a href="{% url 'django_taskly:task_list' %}" class="taskly-btn">
      Task List &rarr;
    </a>

    <button
      type="button"
      class="taskly-btn"
      id="taskly-refresh-btn"
      hx-get="{% url 'django_taskly:dashboard_content_partial' %}"
      hx-target="#taskly-content"
      hx-swap="innerHTML"
    >
      &#8635; Refresh
    </button>

    <div class="taskly-auto-refresh-group">
      <label for="taskly-interval">Auto-refresh</label>
      <input type="number" id="taskly-interval" value="10" min="1" max="300" step="1">
      <label>s</label>
      <button type="button" class="taskly-btn" id="taskly-auto-btn">
        Start
      </button>
      <span class="taskly-countdown" id="taskly-countdown"></span>
    </div>
  </div>

  {# -------------------------------------------------------------------- #}
  {# Dashboard content — HTMX swap target                                  #}
  {# -------------------------------------------------------------------- #}
  <div id="taskly-content">
    {% include "django_taskly/partials/dashboard_content.html" %}
  </div>

  <script>
    (function() {
      var autoTimerId = null;
      var countdownId = null;
      var remaining = 0;
      var intervalSeconds = 0;

      var btn = document.getElementById('taskly-auto-btn');
      var input = document.getElementById('taskly-interval');
      var display = document.getElementById('taskly-countdown');
      var contentUrl = '{% url "django_taskly:dashboard_content_partial" %}';

      function doRefresh() {
        htmx.ajax('GET', contentUrl, {target: '#taskly-content', swap: 'innerHTML'});
      }

      function resetCountdown() {
        remaining = intervalSeconds;
      }

      function tickCountdown() {
        if (remaining > 0) {
          display.textContent = remaining + 's';
          remaining--;
        } else {
          doRefresh();
          resetCountdown();
        }
      }

      function startAuto() {
        var seconds = parseInt(input.value, 10);
        if (isNaN(seconds) || seconds < 1) seconds = 10;
        input.value = seconds;
        intervalSeconds = seconds;
        input.disabled = true;

        btn.textContent = 'Stop';
        btn.classList.add('taskly-btn--active');

        remaining = intervalSeconds;
        display.textContent = remaining + 's';
        countdownId = setInterval(tickCountdown, 1000);
      }

      function stopAuto() {
        clearInterval(countdownId);
        autoTimerId = null;
        countdownId = null;
        btn.textContent = 'Start';
        btn.classList.remove('taskly-btn--active');
        display.textContent = '';
        input.disabled = false;
      }

      btn.addEventListener('click', function() {
        if (countdownId) {
          stopAuto();
        } else {
          startAuto();
        }
      });
    })();
  </script>
{% endblock %}