{% extends "ui/templates/base/layout.html" %}
{% block content %}
{% include "modules/managers/templates/managers/_manager_tabs.html" %}
<div class="space-y-6">
  <section class="rounded-3xl bg-gradient-to-r from-slate-900 via-brand-700 to-brand-600 p-6 text-white shadow-soft">
    <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
      <div>
        <p class="text-xs font-semibold uppercase tracking-[0.22em] text-brand-100">Team Workspace</p>
        <h2 class="mt-2 text-2xl font-semibold">Allocation, follow-up and team execution control</h2>
        <p class="mt-2 max-w-3xl text-sm text-brand-100">Focus on unassigned work, blocked assignments, due dates, team attendance and review-ready tasks.</p>
        {% if current_user_roles and ('Partner' in current_user_roles or 'Firm Admin' in current_user_roles) %}
        <p class="mt-3 inline-flex rounded-full bg-white/10 px-3 py-1 text-xs font-semibold text-white">Multi-role view enabled: partner/admin responsibilities may also apply.</p>
        {% endif %}
      </div>
      <div class="flex flex-wrap gap-2">
        <a href="/manager/work" class="rounded-xl bg-white px-4 py-2 text-sm font-semibold text-brand-700 hover:bg-brand-50">Open Team Work Board</a>
        {% if current_user_roles and 'Partner' in current_user_roles %}<a href="/partner/dashboard" class="rounded-xl border border-white/40 px-4 py-2 text-sm font-semibold text-white hover:bg-white/10">Partner Dashboard</a>{% endif %}
      </div>
    </div>
  </section>

  <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-6">
    <a href="/manager/work" class="af-metric-card hover:border-brand-200"><div class="text-xs font-semibold uppercase text-slate-500">Total Tasks</div><div class="mt-2 text-3xl font-semibold text-slate-900">{{ payload.summary.total }}</div><div class="mt-1 text-xs text-slate-500">All visible work</div></a>
    <a href="/manager/work?status=unassigned" class="af-metric-card border-orange-200 bg-orange-50 hover:border-orange-300"><div class="text-xs font-semibold uppercase text-orange-700">Unassigned</div><div class="mt-2 text-3xl font-semibold text-orange-700">{{ payload.summary.unassigned }}</div><div class="mt-1 text-xs text-orange-700">Allocate first</div></a>
    <a href="/manager/work?status=in_progress" class="af-metric-card border-blue-200 bg-blue-50 hover:border-blue-300"><div class="text-xs font-semibold uppercase text-blue-700">In Progress</div><div class="mt-2 text-3xl font-semibold text-blue-700">{{ payload.summary.in_progress }}</div><div class="mt-1 text-xs text-blue-700">Being worked</div></a>
    <a href="/manager/work?status=blocked" class="af-metric-card border-amber-200 bg-amber-50 hover:border-amber-300"><div class="text-xs font-semibold uppercase text-amber-700">Blocked</div><div class="mt-2 text-3xl font-semibold text-amber-700">{{ payload.summary.blocked }}</div><div class="mt-1 text-xs text-amber-700">Needs help</div></a>
    <a href="/manager/work?date_bucket=overdue" class="af-metric-card border-red-200 bg-red-50 hover:border-red-300"><div class="text-xs font-semibold uppercase text-red-700">Overdue</div><div class="mt-2 text-3xl font-semibold text-red-700">{{ payload.summary.overdue }}</div><div class="mt-1 text-xs text-red-700">Escalate</div></a>
    <a href="/employees/progress" class="af-metric-card border-emerald-200 bg-emerald-50 hover:border-emerald-300"><div class="text-xs font-semibold uppercase text-emerald-700">Completed</div><div class="mt-2 text-3xl font-semibold text-emerald-700">{{ payload.summary.completed }}</div><div class="mt-1 text-xs text-emerald-700">Closed tasks</div></a>
  </section>

  <section class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_380px]">
    <div class="af-card">
      <div class="mb-5 flex items-center justify-between gap-3">
        <div>
          <h3 class="text-lg font-semibold text-slate-900">Attention Required</h3>
          <p class="mt-1 text-sm text-slate-500">Unassigned, blocked and overdue work should be handled first.</p>
        </div>
        <a href="/manager/work" class="af-btn af-btn-primary">View All</a>
      </div>
      <div class="space-y-5">
        {% set shown = namespace(count=0) %}
        {% for column in payload.columns %}
          {% if column.code in ['unassigned', 'blocked'] and column.tasks %}
            <div>
              <div class="mb-2 flex items-center justify-between"><div class="text-xs font-semibold uppercase tracking-wide text-slate-500">{{ column.label }}</div><div class="text-xs text-slate-400">{{ column.tasks|length }} item(s)</div></div>
              <div class="grid gap-3 lg:grid-cols-2">
                {% for task in column.tasks[:6] %}
                {% set shown.count = shown.count + 1 %}
                <div class="rounded-2xl border border-slate-200 p-4 {% if task.is_overdue %}bg-red-50{% elif task.is_due_today %}bg-amber-50{% else %}bg-slate-50{% endif %}">
                  <div class="flex items-start justify-between gap-3">
                    <div>
                      <div class="font-semibold text-slate-900">{{ task.task_name }}</div>
                      <div class="mt-1 text-xs text-slate-500">{{ task.client_display }} · {{ task.engagement_label }}</div>
                      <div class="mt-1 text-xs text-slate-500">Target: {{ task.internal_target_date or '-' }} · {{ task.date_bucket }}</div>
                    </div>
                    <a href="/employees/work/tasks/{{ task.id }}/communication" class="rounded-lg border border-slate-300 bg-white px-2.5 py-1 text-xs font-semibold text-slate-700 hover:bg-slate-50">Timeline</a>
                  </div>
                </div>
                {% endfor %}
              </div>
            </div>
          {% endif %}
        {% endfor %}
        {% if shown.count == 0 %}<div class="rounded-2xl border border-dashed border-slate-300 p-8 text-center text-sm text-slate-600">No team assignments require manager attention right now.</div>{% endif %}
      </div>
    </div>

    <aside class="space-y-6">
      <div class="af-card">
        <h3 class="font-semibold text-slate-900">Team Snapshot</h3>
        <div class="mt-4 grid grid-cols-2 gap-3 text-sm">
          <div class="rounded-2xl bg-slate-50 p-4"><div class="text-xs text-slate-500">Clients touched</div><div class="mt-1 text-2xl font-semibold">{{ payload.summary.clients }}</div></div>
          <div class="rounded-2xl bg-slate-50 p-4"><div class="text-xs text-slate-500">Active assignees</div><div class="mt-1 text-2xl font-semibold">{{ payload.summary.assignees }}</div></div>
          <div class="rounded-2xl bg-amber-50 p-4"><div class="text-xs text-amber-700">Due today</div><div class="mt-1 text-2xl font-semibold text-amber-700">{{ payload.summary.due_today }}</div></div>
          <div class="rounded-2xl bg-brand-50 p-4"><div class="text-xs text-brand-700">Open tasks</div><div class="mt-1 text-2xl font-semibold text-brand-700">{{ payload.summary.open }}</div></div>
        </div>
      </div>

      <div class="af-card">
        <h3 class="font-semibold text-slate-900">Manager Actions</h3>
        <div class="mt-4 space-y-2">
          <a href="/manager/work" class="block rounded-xl border border-slate-200 px-4 py-3 text-sm font-semibold text-slate-700 hover:bg-slate-50">Allocate or reassign work</a>
          <a href="/employees/progress" class="block rounded-xl border border-slate-200 px-4 py-3 text-sm font-semibold text-slate-700 hover:bg-slate-50">Review engagement progress</a>
          <a href="/employees/attendance" class="block rounded-xl border border-slate-200 px-4 py-3 text-sm font-semibold text-slate-700 hover:bg-slate-50">Check team attendance</a>
          <a href="/employees/leave" class="block rounded-xl border border-slate-200 px-4 py-3 text-sm font-semibold text-slate-700 hover:bg-slate-50">Review leave requests</a>
          {% if current_user_roles and 'Partner' in current_user_roles %}<a href="/partner/reviews" class="block rounded-xl border border-brand-200 bg-brand-50 px-4 py-3 text-sm font-semibold text-brand-700 hover:bg-brand-100">Open partner review board</a>{% endif %}
        </div>
      </div>
    </aside>
  </section>
</div>
{% endblock %}
