{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  <div class="flex flex-wrap items-center justify-between gap-3">
    <div>
      <h2 class="text-xl font-semibold text-slate-900">Work Tracker Dashboard</h2>
      <p class="text-sm text-slate-500">Track engagement tasks, assigned staff, internal target dates and execution status.</p>
    </div>
    <a href="/services/work-tracker/subscriptions" class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700">Generate Tasks</a>
  </div>

  <div class="grid gap-4 md:grid-cols-4 xl:grid-cols-8">
    <a href="/services/work-tracker" class="rounded-2xl bg-white p-4 shadow-soft hover:bg-slate-50"><div class="text-xs text-slate-500">Total</div><div class="mt-1 text-2xl font-semibold text-slate-900">{{ stats.total }}</div></a>
    <a href="/services/work-tracker?status=pending" class="rounded-2xl bg-white p-4 shadow-soft hover:bg-slate-50"><div class="text-xs text-slate-500">Pending</div><div class="mt-1 text-2xl font-semibold text-slate-900">{{ stats.pending }}</div></a>
    <a href="/services/work-tracker?status=in_progress" class="rounded-2xl bg-white p-4 shadow-soft hover:bg-slate-50"><div class="text-xs text-slate-500">In Progress</div><div class="mt-1 text-2xl font-semibold text-slate-900">{{ stats.in_progress }}</div></a>
    <a href="/services/work-tracker?status=blocked" class="rounded-2xl bg-white p-4 shadow-soft hover:bg-slate-50"><div class="text-xs text-slate-500">Blocked</div><div class="mt-1 text-2xl font-semibold text-slate-900">{{ stats.blocked }}</div></a>
    <a href="/services/work-tracker?status=overdue" class="rounded-2xl bg-white p-4 shadow-soft hover:bg-red-50"><div class="text-xs text-slate-500">Overdue</div><div class="mt-1 text-2xl font-semibold text-red-700">{{ stats.overdue }}</div></a>
    <a href="/services/work-tracker?status=due_today" class="rounded-2xl bg-white p-4 shadow-soft hover:bg-amber-50"><div class="text-xs text-slate-500">Due Today</div><div class="mt-1 text-2xl font-semibold text-amber-700">{{ stats.due_today }}</div></a>
    <a href="/services/work-tracker?status=unassigned" class="rounded-2xl bg-white p-4 shadow-soft hover:bg-slate-50"><div class="text-xs text-slate-500">Unassigned</div><div class="mt-1 text-2xl font-semibold text-slate-900">{{ stats.unassigned }}</div></a>
    <a href="/services/work-tracker?status=completed" class="rounded-2xl bg-white p-4 shadow-soft hover:bg-green-50"><div class="text-xs text-slate-500">Completed</div><div class="mt-1 text-2xl font-semibold text-green-700">{{ stats.completed }}</div></a>
  </div>

  <form method="get" class="flex flex-wrap items-end gap-3 rounded-2xl bg-white p-4 shadow-soft">
    <div>
      <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500">Search</label>
      <input type="text" name="q" value="{{ q }}" class="rounded-xl border border-slate-300 px-3 py-2 text-sm" placeholder="Client / service / task">
    </div>
    <div>
      <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500">Status / Filter</label>
      <select name="status" class="rounded-xl border border-slate-300 px-3 py-2 text-sm">
        <option value="">All</option>
        <option value="overdue" {% if status == 'overdue' %}selected{% endif %}>Overdue</option>
        <option value="due_today" {% if status == 'due_today' %}selected{% endif %}>Due Today</option>
        <option value="unassigned" {% if status == 'unassigned' %}selected{% endif %}>Unassigned</option>
        {% for code, label in task_statuses %}
        <option value="{{ code }}" {% if status == code %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </select>
    </div>
    <button class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Filter</button>
    {% if q or status %}<a href="/services/work-tracker" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Clear</a>{% endif %}
  </form>

  <form method="post" action="/services/work-tracker/tasks/bulk-update" class="space-y-4">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    {% if can_bulk_manage %}
    <div class="rounded-2xl bg-white p-4 shadow-soft">
      <div class="flex flex-wrap items-end gap-3">
        <div class="min-w-44">
          <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500">Bulk Status</label>
          <select name="bulk_status" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm">
            <option value="">No change</option>
            {% for code, label in task_statuses %}<option value="{{ code }}">{{ label }}</option>{% endfor %}
          </select>
        </div>
        {% if can_assign_staff %}
        <div class="min-w-56">
          <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500">Bulk Assignee</label>
          <select name="bulk_assigned_to_user_id" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm">
            <option value="__no_change__">No change</option>
            <option value="">Unassigned</option>
            {% for user in assignees %}<option value="{{ user.id }}">{{ user.full_name or user.email }}</option>{% endfor %}
          </select>
        </div>
        {% endif %}
        <div>
          <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500">Internal Target Date</label>
          <input type="date" name="bulk_internal_target_date" class="rounded-xl border border-slate-300 px-3 py-2 text-sm">
          <label class="mt-2 flex items-center gap-2 text-xs text-slate-600"><input type="checkbox" name="update_internal_target_date"> Apply target date</label>
        </div>
        <button class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700" onclick="return confirm('Update selected tasks?')">Update Selected Tasks</button>
      </div>
      <p class="mt-3 text-xs text-slate-500">Select tasks below, then apply status, assignee or internal target date. Locked engagements/tasks are skipped.</p>
    </div>
    {% endif %}

    <div class="overflow-hidden rounded-2xl bg-white shadow-soft">
      <table class="min-w-full divide-y divide-slate-200">
        <thead class="bg-slate-50">
          <tr>
            {% if can_bulk_manage %}<th class="px-4 py-3 text-left"><input type="checkbox" onclick="document.querySelectorAll('.task-check').forEach(cb => cb.checked = this.checked)"></th>{% endif %}
            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Task</th>
            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Client</th>
            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Service</th>
            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Assignee</th>
            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Internal Target</th>
            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Engagement Due</th>
            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Status</th>
            <th class="px-4 py-3"></th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-100">
          {% for task in tasks %}
          <tr class="{% if task.is_task_overdue %}bg-red-50{% elif task.is_due_today %}bg-amber-50{% endif %}">
            {% if can_bulk_manage %}<td class="px-4 py-3"><input type="checkbox" class="task-check" name="task_ids" value="{{ task.id }}"></td>{% endif %}
            <td class="px-4 py-3 text-sm font-medium text-slate-900">{{ task.sequence_no }}. {{ task.task_name }}</td>
            <td class="px-4 py-3 text-sm text-slate-700">{{ task.client.client_name if task.client else '-' }}</td>
            <td class="px-4 py-3 text-sm text-slate-700">{{ task.catalogue.service_name if task.catalogue else '-' }}</td>
            <td class="px-4 py-3 text-sm text-slate-700">{{ task.assigned_to.full_name if task.assigned_to and task.assigned_to.full_name else (task.assigned_to.email if task.assigned_to else '-') }}</td>
            <td class="px-4 py-3 text-sm text-slate-700">
              {% if task.internal_target_date %}
                <span class="{% if task.is_task_overdue %}font-semibold text-red-700{% elif task.is_due_today %}font-semibold text-amber-700{% endif %}">{{ task.internal_target_date }}</span>
                {% if task.is_task_overdue %}<span class="ml-2 rounded-full bg-red-100 px-2 py-1 text-xs font-medium text-red-700">Overdue</span>{% endif %}
                {% if task.is_due_today %}<span class="ml-2 rounded-full bg-amber-100 px-2 py-1 text-xs font-medium text-amber-700">Today</span>{% endif %}
              {% else %}-{% endif %}
            </td>
            <td class="px-4 py-3 text-sm text-slate-700">{% if task.subscription and task.subscription.current_due_date %}{{ task.subscription.current_due_date }}{% else %}-{% endif %}</td>
            <td class="px-4 py-3 text-sm text-slate-700"><span class="rounded-full bg-slate-100 px-2 py-1 text-xs font-medium text-slate-700">{{ task.tracker_status_label }}</span></td>
            <td class="px-4 py-3 text-right"><a href="/services/work-tracker/tasks/{{ task.id }}/edit" class="text-sm font-medium text-brand-700 hover:underline">Open</a></td>
          </tr>
          {% else %}
          <tr><td colspan="{% if can_bulk_manage %}9{% else %}8{% endif %}" class="px-4 py-8 text-center text-sm text-slate-500">No execution tasks found. Generate tasks from subscriptions first.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </form>
</div>
{% endblock %}