{% extends "ui/templates/base/layout.html" %}
{% block content %}
{% if is_employee_self %}
  {% include "modules/employees/templates/employees/_my_workspace_tabs.html" %}
{% else %}
  {% include "modules/managers/templates/managers/_manager_tabs.html" %}
{% endif %}
<div class="space-y-6">
  <div class="flex flex-wrap items-start justify-between gap-3">
    <div>
      <h2 class="text-xl font-semibold text-slate-900">Task Communication</h2>
      <p class="mt-1 text-sm text-slate-500">Communication timeline for engagement task notes, clarifications and review remarks.</p>
    </div>
    <a href="{{ back_url }}" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">Back</a>
  </div>

  <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-soft">
    <div class="grid gap-4 md:grid-cols-4">
      <div class="md:col-span-2">
        <div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Task</div>
        <div class="mt-1 text-lg font-semibold text-slate-900">{{ task.task_name }}</div>
        {% if task.description %}<p class="mt-1 text-sm text-slate-600">{{ task.description }}</p>{% endif %}
      </div>
      <div>
        <div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Client</div>
        <div class="mt-1 text-sm font-semibold text-slate-900">{{ task.client.client_name if task.client else 'Unlinked Client' }}</div>
        <div class="text-xs text-slate-500">{{ task.client.client_code if task.client else '' }}</div>
      </div>
      <div>
        <div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Engagement / Service</div>
        <div class="mt-1 text-sm font-semibold text-slate-900">{{ task.engagement_label }}</div>
        <div class="text-xs text-slate-500">Target: {{ task.internal_target_date or '-' }}</div>
      </div>
    </div>
    <div class="mt-4 flex flex-wrap gap-2 text-xs">
      <span class="rounded-full bg-slate-100 px-2.5 py-1 font-semibold text-slate-700">{{ task.status_label }}</span>
      <span class="rounded-full bg-slate-100 px-2.5 py-1 font-semibold text-slate-700">{{ task.priority_label }}</span>
      <span class="rounded-full bg-slate-100 px-2.5 py-1 font-semibold text-slate-700">{{ task.date_bucket }}</span>
      <span class="rounded-full bg-slate-100 px-2.5 py-1 font-semibold text-slate-700">Assigned: {{ task.assigned_to.full_name if task.assigned_to else 'Unassigned' }}</span>
    </div>
  </div>

  <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-soft">
    <h3 class="font-semibold text-slate-900">Add communication</h3>
    <form method="post" action="{{ post_url }}" class="mt-4 space-y-4">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <input type="hidden" name="return_to" value="{{ return_to or back_url }}">
      <div class="grid gap-3 md:grid-cols-2">
        <label class="block text-sm font-medium text-slate-700">Type
          <select name="comment_type" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-100">
            {% for code, label in communication_types %}
            <option value="{{ code }}">{{ label }}</option>
            {% endfor %}
          </select>
        </label>
        <label class="block text-sm font-medium text-slate-700">Visibility
          <select name="visibility" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-100">
            {% for code, label in communication_visibilities %}
            <option value="{{ code }}">{{ label }}</option>
            {% endfor %}
          </select>
        </label>
      </div>
      <label class="block text-sm font-medium text-slate-700">Message
        <textarea name="message" rows="4" required placeholder="Write note, client clarification, consultant communication, or review remark" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-100"></textarea>
      </label>
      <div class="flex justify-end">
        <button type="submit" class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Add to Timeline</button>
      </div>
    </form>
  </div>

  <div class="rounded-2xl border border-slate-200 bg-white shadow-soft">
    <div class="border-b border-slate-100 px-5 py-4">
      <h3 class="font-semibold text-slate-900">Communication Timeline</h3>
      <p class="mt-1 text-sm text-slate-500">Newest communication appears first.</p>
    </div>
    <div class="divide-y divide-slate-100">
      {% for item in task.communication_items %}
      <div class="p-5">
        <div class="flex flex-wrap items-center justify-between gap-3">
          <div class="flex flex-wrap items-center gap-2">
            <span class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-700">{{ item.comment_type.replace('_',' ').title() }}</span>
            <span class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-700">{{ item.visibility.replace('_',' ').title() }}</span>
          </div>
          <div class="text-xs text-slate-500">{{ item.created_at_utc }}</div>
        </div>
        <p class="mt-3 whitespace-pre-wrap text-sm text-slate-800">{{ item.message }}</p>
        <div class="mt-3 text-xs text-slate-500">By {{ item.created_by.full_name if item.created_by else 'System/User' }}</div>
      </div>
      {% else %}
      <div class="p-8 text-center text-sm text-slate-500">No communication has been added for this task yet.</div>
      {% endfor %}
    </div>
  </div>
</div>
{% endblock %}