{% extends "base.html" %}

{% block content %}
  <section class="card">
    <div class="kicker">Task Overview</div>
    <h2>Multi-Provider Tasks</h2>
    <p class="muted">Tasks are aggregated from all enabled providers and sorted by urgency.</p>

    <div class="btn-row task-filters">
      <form method="get" class="btn-row">
        {% if show_completed %}
          <input type="hidden" name="show_completed" value="1" />
        {% endif %}
        <button class="btn {% if task_view != 'today' %}secondary{% endif %}" type="submit" name="view" value="today">Today</button>
        <button class="btn {% if task_view != 'week' %}secondary{% endif %}" type="submit" name="view" value="week">This Week</button>
        <button class="btn {% if task_view != 'month' %}secondary{% endif %}" type="submit" name="view" value="month">This Month</button>
        <button class="btn {% if task_view != 'all' %}secondary{% endif %}" type="submit" name="view" value="all">All</button>
      </form>

      <form method="get" class="task-toggle-form">
        <input type="hidden" name="view" value="{{ task_view }}" />
        <label class="toggle-row task-toggle-row">
          <input
            class="toggle-control"
            type="checkbox"
            name="show_completed"
            value="1"
            {% if show_completed %}checked{% endif %}
            onchange="this.form.submit()"
          />
          <span class="toggle-label">Show Completed</span>
        </label>
      </form>
    </div>

    <div class="task-summary">
      <span class="chip mono">overdue: {{ overdue_count }}</span>
      <span class="chip mono">today: {{ today_count }}</span>
      <span class="chip mono">completed: {{ completed_count }}</span>
      <span class="chip mono">view: {{ task_view }}</span>
    </div>

    {% if error_message %}
      <div class="banner error">{{ error_message }}</div>
    {% elif not tasks %}
      <div class="banner ok">No tasks found for this view.</div>
    {% else %}
      <div class="table-wrap">
        <table>
          <thead>
            <tr>
              <th>Status</th>
              <th>Task</th>
              <th>Provider</th>
              <th>Due</th>
              <th>Priority</th>
              <th>ID</th>
            </tr>
          </thead>
          <tbody>
            {% for task in tasks %}
              {% set due_today = task.due_date == today_iso %}
              <tr class="{% if task.completed %}task-row-completed{% elif task.overdue %}task-row-overdue{% elif due_today %}task-row-today{% else %}task-row-future{% endif %}">
                <td class="status-cell">
                  {% if task.completed %}
                    <span class="status-muted">Completed</span>
                  {% elif task.overdue %}
                    <span class="status-overdue">&#9888; Overdue</span>
                  {% elif due_today %}
                    <span class="status-today">Due Today</span>
                  {% else %}
                    <span class="status-future">Upcoming</span>
                  {% endif %}
                </td>
                <td>
                  <div class="task-title">{{ task.title }}</div>
                  {% if task.description %}
                    <div class="muted">{{ task.description }}</div>
                  {% endif %}
                </td>
                <td><span class="pill mono provider-pill">{{ task.provider_label }}</span></td>
                <td>
                  {% if task.due_date %}
                    <span class="mono">{{ task.due_date }}</span>
                  {% else %}
                    <span class="muted">No due date</span>
                  {% endif %}
                </td>
                <td>{{ task.priority if task.priority is not none else "-" }}</td>
                <td class="mono">{{ task.id or "-" }}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% endif %}
  </section>
{% endblock %}

{% block page_scripts %}
  <style>
    .task-filters {
      justify-content: space-between;
      align-items: center;
      margin: 12px 0 10px;
      gap: 12px;
    }

    .task-toggle-form {
      margin: 0;
    }

    .task-toggle-row {
      border-radius: 999px;
      padding-inline: 14px;
    }

    .task-summary {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 4px 0 12px;
    }

    .task-title {
      font-weight: 600;
      line-height: 1.35;
    }

    .provider-pill {
      border-color: rgba(177, 42, 61, 0.35);
      background: rgba(177, 42, 61, 0.1);
    }

    .status-cell span {
      font-size: 0.78rem;
      letter-spacing: 0.01em;
      white-space: nowrap;
    }

    .status-overdue {
      color: #ff9f9f;
      font-weight: 600;
    }

    .status-today {
      color: #ffd89a;
      font-weight: 600;
    }

    .status-future {
      color: rgba(241, 239, 239, 0.72);
    }

    .status-muted {
      color: rgba(241, 239, 239, 0.5);
    }

    .task-row-overdue td {
      background: rgba(132, 23, 36, 0.22);
    }

    .task-row-today td {
      background: rgba(130, 92, 26, 0.18);
    }

    .task-row-completed td {
      color: rgba(241, 239, 239, 0.54);
      background: rgba(255, 255, 255, 0.03);
    }

    .task-row-completed .task-title {
      text-decoration: line-through;
      text-decoration-thickness: 1px;
    }

    @media (max-width: 760px) {
      .task-filters {
        align-items: flex-start;
      }

      .task-toggle-row {
        width: 100%;
        justify-content: center;
      }
    }
  </style>
{% endblock %}
