<div class="space-y-6">
  {% if not consultant or not payload.workspace %}
  <div class="rounded-2xl border border-amber-200 bg-amber-50 p-6 text-sm text-amber-900 shadow-soft">
    Your consultant workspace is not configured yet. Open profile/workspace settings and complete setup.
    <div class="mt-4"><a href="/consultant/workspace/edit" class="rounded-xl bg-amber-700 px-4 py-2 text-sm font-semibold text-white hover:bg-amber-800">Configure Workspace</a></div>
  </div>
  {% else %}
  <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-6">
    <a href="/consultant/communications" class="af-metric-card border-purple-200 bg-purple-50 hover:border-purple-300"><div class="text-xs font-semibold uppercase text-purple-700">Clarifications</div><div class="mt-2 text-3xl font-semibold text-purple-700">{{ payload.stats.pending_clarifications or 0 }}</div><div class="mt-1 text-xs text-purple-700">Firm messages</div></a>
    <a href="/consultant/service-requests" class="af-metric-card hover:border-brand-200"><div class="text-xs font-semibold uppercase text-slate-500">Open Requests</div><div class="mt-2 text-3xl font-semibold text-slate-900">{{ payload.stats.open_service_requests or 0 }}</div><div class="mt-1 text-xs text-slate-500">Service requests</div></a>
    <a href="/consultant/managed-clients" class="af-metric-card hover:border-brand-200"><div class="text-xs font-semibold uppercase text-slate-500">Managed Clients</div><div class="mt-2 text-3xl font-semibold text-slate-900">{{ payload.stats.managed_clients or 0 }}</div><div class="mt-1 text-xs text-slate-500">Bookkeeping / support</div></a>
    <a href="/consultant/dashboard?tab=clients" class="af-metric-card hover:border-brand-200"><div class="text-xs font-semibold uppercase text-slate-500">Linked Firm Clients</div><div class="mt-2 text-3xl font-semibold text-slate-900">{{ payload.stats.linked_clients or 0 }}</div><div class="mt-1 text-xs text-slate-500">Visible clients</div></a>
    <a href="/consultant/work" class="af-metric-card border-amber-200 bg-amber-50 hover:border-amber-300"><div class="text-xs font-semibold uppercase text-amber-700">Due Soon</div><div class="mt-2 text-3xl font-semibold text-amber-700">{{ payload.stats.upcoming_due or 0 }}</div><div class="mt-1 text-xs text-amber-700">Next 30 days</div></a>
    <a href="/consultant/work" 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.stats.overdue or 0 }}</div><div class="mt-1 text-xs text-red-700">Attention</div></a>
  </section>

  <section class="grid gap-6 xl:grid-cols-[380px_minmax(0,1fr)]">
    <aside class="space-y-6">
      <div class="af-card">
        <div class="flex items-start justify-between gap-3">
          <div>
            <h3 class="font-semibold text-slate-900">Workspace & Plan</h3>
            <p class="mt-1 text-sm text-slate-600">{{ payload.workspace.workspace_name }}</p>
            <p class="text-xs text-slate-500">{{ payload.workspace.workspace_type.replace('_',' ').title() }} • {{ payload.workspace.plan_code.replace('_',' ').title() }} • {{ payload.workspace.subscription_status.replace('_',' ').title() }}</p>
          </div>
          <a href="/consultant/workspace/edit" class="rounded-xl border border-slate-300 px-3 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-50">Edit</a>
        </div>
        <div class="mt-5">
          <div class="flex items-center justify-between text-xs text-slate-500">
            <span>Managed client usage</span>
            <span>{{ payload.workspace_summary.managed_clients_used or 0 }} / {{ payload.workspace_summary.managed_clients_limit or 'No limit' }}</span>
          </div>
          <div class="mt-2 h-2 rounded-full bg-slate-100"><div class="h-2 rounded-full bg-slate-900" style="width: {{ 100 if (payload.workspace_summary.usage_percent or 0) > 100 else (payload.workspace_summary.usage_percent or 0) }}%"></div></div>
          <div class="mt-2 text-xs text-slate-500">{% if payload.workspace_summary.managed_clients_remaining is none %}No client limit configured.{% else %}{{ payload.workspace_summary.managed_clients_remaining }} client slots remaining.{% endif %}</div>
        </div>
        {% if payload.workspace_alerts %}
        <div class="mt-4 space-y-2">
          {% for alert in payload.workspace_alerts %}<div class="rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-xs font-semibold text-amber-800">{{ alert }}</div>{% endfor %}
        </div>
        {% endif %}
      </div>

      <div class="af-card">
        <h3 class="font-semibold text-slate-900">Quick Actions</h3>
        <div class="mt-4 grid gap-2 text-sm">
          <a href="/consultant/work" class="rounded-xl border border-slate-200 px-4 py-3 font-semibold text-slate-700 hover:bg-slate-50">Open Work Board</a>
          <a href="/consultant/managed-clients" class="rounded-xl border border-slate-200 px-4 py-3 font-semibold text-slate-700 hover:bg-slate-50">Manage Clients</a>
          {% if payload.workspace_summary.managed_clients_remaining is none or payload.workspace_summary.managed_clients_remaining > 0 %}<a href="/consultant/managed-clients/new" class="rounded-xl border border-slate-200 px-4 py-3 font-semibold text-slate-700 hover:bg-slate-50">Add Managed Client</a>{% endif %}
          <a href="/consultant/communications" class="rounded-xl border border-slate-200 px-4 py-3 font-semibold text-slate-700 hover:bg-slate-50">Reply Clarifications</a>
          <a href="/consultant/service-requests/new" class="rounded-xl border border-slate-200 px-4 py-3 font-semibold text-slate-700 hover:bg-slate-50">Raise Service Request</a>
        </div>
      </div>
    </aside>

    <div class="space-y-6">
      <div class="af-card">
        <div class="flex items-center justify-between gap-3">
          <div><h3 class="text-lg font-semibold text-slate-900">Pending Consultant Clarifications</h3><p class="mt-1 text-sm text-slate-500">Firm messages visible to consultant. Internal and client-only notes are hidden.</p></div>
          <a href="/consultant/communications" class="text-sm font-semibold text-brand-700 hover:underline">View all</a>
        </div>
        <div class="mt-4 space-y-3">
          {% for comment, task, subscription, client, catalogue in payload.recent_firm_messages %}
          <a href="/consultant/communications/{{ comment.id }}" class="block rounded-2xl border border-slate-200 p-4 hover:bg-slate-50">
            <div class="flex flex-wrap items-start justify-between gap-3">
              <div><div class="font-semibold text-slate-900">{{ client.client_name }} — {{ catalogue.service_name }}</div><div class="text-xs text-slate-500">Task: {{ task.task_name }} • {{ comment.created_at_utc.strftime('%d-%m-%Y %H:%M') if comment.created_at_utc else '' }}</div></div>
              <span class="rounded-full bg-purple-50 px-2 py-1 text-xs font-semibold text-purple-700">{{ comment.comment_type.replace('_',' ').title() }}</span>
            </div>
            <div class="mt-3 line-clamp-3 whitespace-pre-line rounded-xl bg-slate-50 p-3 text-sm text-slate-700">{{ comment.message }}</div>
          </a>
          {% else %}
          <div class="rounded-2xl border border-dashed border-slate-300 p-6 text-sm text-slate-500">No pending consultant-visible firm messages.</div>
          {% endfor %}
        </div>
      </div>

      <div class="grid gap-6 lg:grid-cols-3">
        <div class="af-card">
          <div class="flex items-center justify-between"><h3 class="font-semibold text-slate-900">Upcoming Due Dates</h3><a href="/consultant/work" class="text-xs font-semibold text-brand-700 hover:underline">View</a></div>
          <div class="mt-4 space-y-3">{% for subscription, client, catalogue in payload.due_items %}<div class="rounded-xl border border-slate-200 p-3"><div class="font-semibold text-slate-900">{{ client.client_name }}</div><div class="text-xs text-slate-500">{{ catalogue.service_name }} • Due {{ subscription.current_due_date.strftime('%d-%m-%Y') if subscription.current_due_date else '-' }}</div></div>{% else %}<div class="text-sm text-slate-500">No upcoming due dates.</div>{% endfor %}</div>
        </div>
        <div class="af-card border-red-200">
          <div class="flex items-center justify-between"><h3 class="font-semibold text-slate-900">Overdue Work</h3><a href="/consultant/work" class="text-xs font-semibold text-red-600 hover:underline">View</a></div>
          <div class="mt-4 space-y-3">{% for subscription, client, catalogue in payload.overdue_items %}<div class="rounded-xl border border-red-100 bg-red-50 p-3"><div class="font-semibold text-slate-900">{{ client.client_name }}</div><div class="text-xs text-red-600">{{ catalogue.service_name }} • Due {{ subscription.current_due_date.strftime('%d-%m-%Y') if subscription.current_due_date else '-' }}</div></div>{% else %}<div class="text-sm text-slate-500">No overdue linked firm engagements.</div>{% endfor %}</div>
        </div>
        <div class="af-card">
          <div class="flex items-center justify-between"><h3 class="font-semibold text-slate-900">Open Requests</h3><a href="/consultant/service-requests" class="text-xs font-semibold text-brand-700 hover:underline">View</a></div>
          <div class="mt-4 space-y-3">{% for row in payload.open_service_requests %}<a href="/consultant/service-requests/{{ row.id }}" class="block rounded-xl border border-slate-200 p-3 hover:bg-slate-50"><div class="font-semibold text-slate-900">{{ row.title }}</div><div class="text-xs text-slate-500">{{ row.status.replace('_',' ').title() }} • {{ row.priority.replace('_',' ').title() if row.priority else 'Normal' }}</div></a>{% else %}<div class="text-sm text-slate-500">No open service requests.</div>{% endfor %}</div>
        </div>
      </div>
    </div>
  </section>
  {% endif %}
</div>
