{% 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">AQMM Dashboard</h2>
      <p class="text-sm text-slate-500">Assurance engagement quality status, AQMM tasks, evidence, reviews and closure readiness.</p>
    </div>
    <div class="flex flex-wrap gap-2">
      <a href="/peer-review/evidence?financial_year={{ financial_year or '' }}&q={{ q or '' }}" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Peer Review Export</a>
      <a href="/aqmm/dashboard/export.csv?financial_year={{ financial_year or '' }}&q={{ q or '' }}" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Export CSV</a>
      <a href="/services/engagements" class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700">Open Engagements</a>
    </div>
  </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">Financial Year</label>
      <input type="text" name="financial_year" value="{{ financial_year or '' }}" placeholder="2025-26" class="w-36 rounded-xl border border-slate-300 px-3 py-2 text-sm">
    </div>
    <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 or '' }}" placeholder="Client or service" class="w-72 rounded-xl border border-slate-300 px-3 py-2 text-sm">
    </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>
  </form>

  <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
    <section class="rounded-2xl bg-white p-5 shadow-soft"><p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Assurance Engagements</p><p class="mt-2 text-3xl font-semibold text-slate-900">{{ kpis.total_assurance }}</p><p class="mt-1 text-xs text-slate-500">Within selected scope</p></section>
    <section class="rounded-2xl bg-white p-5 shadow-soft"><p class="text-xs font-semibold uppercase tracking-wide text-slate-500">AQMM Approved</p><p class="mt-2 text-3xl font-semibold text-emerald-700">{{ kpis.aqmm_approved }}</p><p class="mt-1 text-xs text-slate-500">Pending: {{ kpis.aqmm_pending }}</p></section>
    <section class="rounded-2xl bg-white p-5 shadow-soft"><p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Evidence Pending</p><p class="mt-2 text-3xl font-semibold text-amber-700">{{ kpis.evidence_pending }}</p><p class="mt-1 text-xs text-slate-500">AQMM-tagged task evidence</p></section>
    <section class="rounded-2xl bg-white p-5 shadow-soft"><p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Closure Pending</p><p class="mt-2 text-3xl font-semibold text-rose-700">{{ kpis.closure_pending }}</p><p class="mt-1 text-xs text-slate-500">Closed: {{ kpis.closure_closed }}</p></section>
  </div>

  <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
    <section class="rounded-2xl bg-white p-4 shadow-soft"><p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Declarations Pending</p><p class="mt-2 text-2xl font-semibold text-slate-900">{{ kpis.declaration_pending }}</p></section>
    <section class="rounded-2xl bg-white p-4 shadow-soft"><p class="text-xs font-semibold uppercase tracking-wide text-slate-500">KYC Pending</p><p class="mt-2 text-2xl font-semibold text-slate-900">{{ kpis.kyc_pending }}</p></section>
    <section class="rounded-2xl bg-white p-4 shadow-soft"><p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Engagement Letter Pending</p><p class="mt-2 text-2xl font-semibold text-slate-900">{{ kpis.engagement_letter_pending }}</p></section>
    <section class="rounded-2xl bg-white p-4 shadow-soft"><p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Rework Pending</p><p class="mt-2 text-2xl font-semibold text-slate-900">{{ kpis.rework_pending }}</p></section>
  </div>

  <div class="grid gap-4 lg:grid-cols-4">
    <section class="rounded-2xl bg-white p-4 shadow-soft"><p class="text-xs font-semibold uppercase tracking-wide text-slate-500">AQMM Tasks</p><p class="mt-2 text-2xl font-semibold text-slate-900">{{ kpis.aqmm_tasks_total }}</p></section>
    <section class="rounded-2xl bg-white p-4 shadow-soft"><p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Manager Review Pending</p><p class="mt-2 text-2xl font-semibold text-slate-900">{{ kpis.manager_review_pending }}</p></section>
    <section class="rounded-2xl bg-white p-4 shadow-soft"><p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Partner Review Pending</p><p class="mt-2 text-2xl font-semibold text-slate-900">{{ kpis.partner_review_pending }}</p></section>
    <section class="rounded-2xl bg-white p-4 shadow-soft"><p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Review Partner Pending</p><p class="mt-2 text-2xl font-semibold text-slate-900">{{ kpis.review_partner_pending }}</p></section>
  </div>

  <section class="overflow-hidden rounded-2xl bg-white shadow-soft">
    <div class="border-b border-slate-100 px-5 py-4">
      <h3 class="text-sm font-semibold text-slate-900">Assurance Engagement Quality Status</h3>
      <p class="text-sm text-slate-500">Shows only assurance engagements in the selected tenant, branch and financial year.</p>
    </div>
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-slate-200">
        <thead class="bg-slate-50">
          <tr>
            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Client / Service</th>
            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">AQMM Acceptance</th>
            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Checklist Tasks</th>
            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Pending Reviews</th>
            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Closure</th>
            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Blockers</th>
            <th class="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wide text-slate-500">Action</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-100">
          {% for item in engagements %}
          {% set row = item.row %}
          {% set closure = item.closure %}
          {% set counts = item.counts %}
          <tr>
            <td class="px-4 py-3 text-sm">
              <div class="font-medium text-slate-900">{{ row.client.client_name if row.client else '-' }}</div>
              <div class="text-xs text-slate-500">{{ row.catalogue.service_name if row.catalogue else '-' }} · FY {{ row.financial_year or '-' }}</div>
              <div class="mt-1 text-xs text-slate-500">Partner: {{ row.assigned_partner.full_name if row.assigned_partner and row.assigned_partner.full_name else (row.assigned_partner.email if row.assigned_partner else '-') }}</div>
            </td>
            <td class="px-4 py-3 text-xs text-slate-700">
              <div>Status: <span class="font-medium">{{ (row.quality_workflow_status or 'not_required')|replace('_',' ')|title }}</span></div>
              <div>KYC: {{ (row.quality_kyc_status or '-')|replace('_',' ')|title }}</div>
              <div>Independence: {{ (row.quality_independence_status or '-')|replace('_',' ')|title }}</div>
              <div>Conflict: {{ (row.quality_conflict_status or '-')|replace('_',' ')|title }}</div>
              <div>Letter: {{ (row.quality_engagement_letter_status or '-')|replace('_',' ')|title }}</div>
            </td>
            <td class="px-4 py-3 text-xs text-slate-700">
              <div>Total: {{ counts.total }}</div>
              <div>Mandatory: {{ counts.mandatory }}</div>
              <div>Completed: {{ counts.completed }}</div>
              <div>Evidence pending: {{ counts.evidence_pending }}</div>
            </td>
            <td class="px-4 py-3 text-xs text-slate-700">
              <div>Manager: {{ counts.manager_pending }}</div>
              <div>Partner: {{ counts.partner_pending }}</div>
              <div>Review Partner: {{ counts.review_partner_pending }}</div>
            </td>
            <td class="px-4 py-3 text-xs text-slate-700">
              <span class="rounded-full px-2 py-1 text-xs font-medium {% if closure and closure.closure_status in ['closed','completed'] %}bg-emerald-100 text-emerald-700{% else %}bg-amber-100 text-amber-700{% endif %}">{{ (closure.closure_status if closure else 'not_started')|replace('_',' ')|title }}</span>
            </td>
            <td class="px-4 py-3 text-xs text-slate-700">
              {% if item.blockers %}
                <ul class="list-disc space-y-1 pl-4">
                  {% for blocker in item.blockers[:4] %}<li>{{ blocker }}</li>{% endfor %}
                  {% if item.blockers|length > 4 %}<li>More blockers...</li>{% endif %}
                </ul>
              {% else %}
                <span class="text-emerald-700">No major blocker</span>
              {% endif %}
            </td>
            <td class="px-4 py-3 text-right text-sm"><a href="/services/engagements/{{ row.id }}" class="font-medium text-brand-700 hover:underline">Open</a></td>
          </tr>
          {% else %}
          <tr><td colspan="7" class="px-4 py-8 text-center text-sm text-slate-500">No assurance engagements found.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </section>

  <section class="overflow-hidden rounded-2xl bg-white shadow-soft">
    <div class="border-b border-slate-100 px-5 py-4">
      <h3 class="text-sm font-semibold text-slate-900">AQMM Tasks Needing Evidence / Review</h3>
      <p class="text-sm text-slate-500">Tasks shown here are already part of your existing service checklist and are tagged as AQMM tasks.</p>
    </div>
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-slate-200">
        <thead class="bg-slate-50"><tr><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 / Engagement</th><th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Evidence</th><th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Review Status</th><th class="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wide text-slate-500">Action</th></tr></thead>
        <tbody class="divide-y divide-slate-100">
          {% for task in pending_tasks %}
          <tr>
            <td class="px-4 py-3 text-sm"><div class="font-medium text-slate-900">{{ task.task_name }}</div><div class="text-xs text-slate-500">Seq {{ task.sequence_no }}{% if task.aqmm_reference %} · {{ task.aqmm_reference }}{% endif %}</div></td>
            <td class="px-4 py-3 text-xs text-slate-600"><div>{{ task.subscription.client.client_name if task.subscription and task.subscription.client else '-' }}</div><div>{{ task.subscription.catalogue.service_name if task.subscription and task.subscription.catalogue else '-' }}</div></td>
            <td class="px-4 py-3 text-xs text-slate-600"><div>Required: {{ 'Yes' if task.aqmm_evidence_required else 'No' }}</div><div>Status: {{ (task.evidence_status or '-')|replace('_',' ')|title }}</div></td>
            <td class="px-4 py-3 text-xs text-slate-600"><div>Manager: {{ (task.manager_review_status or '-')|replace('_',' ')|title }}</div><div>Partner: {{ (task.partner_review_status or '-')|replace('_',' ')|title }}</div><div>Review Partner: {{ (task.review_partner_review_status or '-')|replace('_',' ')|title }}</div>{% if task.rework_status not in ['none','not_required',''] %}<div class="font-medium text-rose-700">Rework: {{ task.rework_status|replace('_',' ')|title }}</div>{% endif %}</td>
            <td class="px-4 py-3 text-right text-sm"><a href="/documents/tasks/{{ task.id }}" class="font-medium text-brand-700 hover:underline">Evidence</a></td>
          </tr>
          {% else %}
          <tr><td colspan="5" class="px-4 py-8 text-center text-sm text-slate-500">No pending AQMM task evidence or reviews.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </section>
</div>
{% endblock %}
