{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="mx-auto max-w-3xl rounded-2xl bg-white p-6 shadow-soft">
  <div class="flex items-center justify-between">
    <div>
      <h2 class="text-xl font-semibold text-slate-900">Update Service Task</h2>
      <p class="text-sm text-slate-500">{{ task.client.client_name if task.client else '-' }} · {{ task.catalogue.service_name if task.catalogue else '-' }}</p>
    </div>
    <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">Back</a>
  </div>

  <div class="mt-6 rounded-xl border border-slate-200 p-4">
    <div class="text-sm font-semibold text-slate-900">{{ task.sequence_no }}. {{ task.task_name }}</div>
    {% if task.description %}<p class="mt-2 text-sm text-slate-700">{{ task.description }}</p>{% endif %}
    <div class="mt-3 grid gap-3 text-sm text-slate-600 md:grid-cols-2">
      <div><span class="font-medium text-slate-700">Engagement Due Date:</span> {{ task.subscription.current_due_date if task.subscription and task.subscription.current_due_date else '-' }}</div>
      <div><span class="font-medium text-slate-700">Internal Target Date:</span> {{ task.internal_target_date or '-' }}</div>
    </div>
  </div>

  {% if task.is_task_overdue %}
  <div class="mt-4 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm font-medium text-red-700">This task is overdue based on the internal target date.</div>
  {% elif task.is_due_today %}
  <div class="mt-4 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm font-medium text-amber-700">This task is due today based on the internal target date.</div>
  {% endif %}

  {% if task.is_aqmm_task %}
  <div class="mt-4 rounded-2xl border border-indigo-200 bg-indigo-50 p-4">
    <div class="flex flex-wrap items-start justify-between gap-3">
      <div>
        <div class="text-sm font-semibold text-indigo-900">AQMM / Quality Evidence Task</div>
        <p class="mt-1 text-xs text-indigo-700">Documents, work notes and review notes recorded against this task are treated as AQMM evidence.</p>
      </div>
      <span class="rounded-full bg-white px-3 py-1 text-xs font-medium text-indigo-700">{{ task.aqmm_status.replace('_',' ').title() }}</span>
    </div>
    <div class="mt-4 grid gap-3 text-xs md:grid-cols-4">
      <div class="rounded-xl bg-white p-3"><div class="text-slate-500">Evidence</div><div class="mt-1 font-semibold text-slate-900">{{ task.evidence_status.replace('_',' ').title() }}</div></div>
      <div class="rounded-xl bg-white p-3"><div class="text-slate-500">Manager Review</div><div class="mt-1 font-semibold text-slate-900">{{ task.manager_review_status.replace('_',' ').title() }}</div></div>
      <div class="rounded-xl bg-white p-3"><div class="text-slate-500">Partner Review</div><div class="mt-1 font-semibold text-slate-900">{{ task.partner_review_status.replace('_',' ').title() }}</div></div>
      <div class="rounded-xl bg-white p-3"><div class="text-slate-500">Review Partner</div><div class="mt-1 font-semibold text-slate-900">{{ task.review_partner_review_status.replace('_',' ').title() }}</div></div>
    </div>
    <div class="mt-3 flex flex-wrap gap-2 text-xs">
      {% if task.aqmm_mandatory %}<span class="rounded-full bg-indigo-100 px-2 py-1 text-indigo-800">Mandatory</span>{% endif %}
      {% if task.aqmm_evidence_required %}<span class="rounded-full bg-indigo-100 px-2 py-1 text-indigo-800">Evidence Required</span>{% endif %}
      {% if task.aqmm_manager_review_required %}<span class="rounded-full bg-indigo-100 px-2 py-1 text-indigo-800">Manager Review</span>{% endif %}
      {% if task.aqmm_partner_review_required %}<span class="rounded-full bg-indigo-100 px-2 py-1 text-indigo-800">Partner Review</span>{% endif %}
      {% if task.aqmm_review_partner_required %}<span class="rounded-full bg-indigo-100 px-2 py-1 text-indigo-800">Review Partner Review</span>{% endif %}
      {% if task.aqmm_blocks_final_release %}<span class="rounded-full bg-red-100 px-2 py-1 text-red-800">Blocks Final Release</span>{% endif %}
      {% if task.aqmm_reference %}<span class="rounded-full bg-white px-2 py-1 text-slate-700">{{ task.aqmm_reference }}</span>{% endif %}
    </div>
    {% if task.rework_status == 'open' %}
      <div class="mt-3 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">Rework required: {{ task.rework_reason or '-' }}</div>
    {% endif %}
  </div>
  {% endif %}

  {% if request.query_params.get('checklist_error') %}
  <div class="mt-4 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">The task could not be completed. Enter the required checklist response, remarks and evidence.</div>
  {% endif %}

  <form method="post" class="mt-6 grid gap-5 md:grid-cols-2">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <div>
      <label class="mb-2 block text-sm font-medium text-slate-700">Status</label>
      <select name="status" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm" {% if not can_edit %}disabled{% endif %}>
        {% for code, label in task_statuses %}<option value="{{ code }}" {% if task.status == code %}selected{% endif %}>{{ label }}</option>{% endfor %}
      </select>
    </div>
    <div>
      <label class="mb-2 block text-sm font-medium text-slate-700">Priority</label>
      <select name="priority" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm" {% if not can_manage_fields %}disabled{% endif %}>
        {% for code, label in task_priorities %}<option value="{{ code }}" {% if task.priority == code %}selected{% endif %}>{{ label }}</option>{% endfor %}
      </select>
    </div>
    <div>
      <label class="mb-2 block text-sm font-medium text-slate-700">Internal Target Date</label>
      <input type="date" name="internal_target_date" value="{{ task.internal_target_date or '' }}" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm" {% if not can_manage_fields %}readonly{% endif %}>
      <p class="mt-1 text-xs text-slate-500">Internal office target date. Statutory due date remains at engagement level.</p>
    </div>
    <div>
      <label class="mb-2 block text-sm font-medium text-slate-700">Assigned To</label>
      <select name="assigned_to_user_id" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm" {% if not can_reassign %}disabled{% endif %}>
        <option value="">Unassigned</option>
        {% for user in assignees %}<option value="{{ user.id }}" {% if task.assigned_to_user_id == user.id %}selected{% endif %}>{{ user.full_name or user.email }}</option>{% endfor %}
      </select>
      {% if not can_reassign and task.assigned_to %}<p class="mt-1 text-xs text-slate-500">Assignee changes are restricted for this role.</p>{% endif %}
      {% if can_edit and not can_manage_fields %}<p class="mt-1 text-xs text-slate-500">You can update status and work note only for your own assigned task.</p>{% endif %}
    </div>
    {% if (task.response_type or 'NONE') != 'NONE' or task.response_required or task.evidence_required %}
    <div class="md:col-span-2 rounded-2xl border border-emerald-200 bg-emerald-50 p-4">
      <div class="flex flex-wrap items-start justify-between gap-3">
        <div>
          <div class="text-sm font-semibold text-emerald-950">Checklist Response</div>
          <p class="mt-1 text-xs text-emerald-800">{{ task.task_category or 'Verification' }}{% if task.response_required %} · Response required{% endif %}{% if task.evidence_required %} · Evidence required{% endif %}</p>
        </div>
      </div>
      <div class="mt-4 grid gap-4 md:grid-cols-2">
        {% if task.response_type == 'YES_NO_NA' %}
        <div>
          <label class="mb-2 block text-sm font-medium text-slate-700">Response</label>
          <select name="checklist_response" class="w-full rounded-xl border border-emerald-200 px-4 py-2 text-sm" {% if not can_edit %}disabled{% endif %}>
            <option value="">Select</option>
            {% for value in ['YES','NO','NA'] %}<option value="{{ value }}" {% if task.checklist_response == value %}selected{% endif %}>{{ value.replace('_',' ').title() }}</option>{% endfor %}
          </select>
        </div>
        {% elif task.response_type == 'YES_NO' %}
        <div>
          <label class="mb-2 block text-sm font-medium text-slate-700">Response</label>
          <select name="checklist_response" class="w-full rounded-xl border border-emerald-200 px-4 py-2 text-sm" {% if not can_edit %}disabled{% endif %}>
            <option value="">Select</option>
            {% for value in ['YES','NO'] %}<option value="{{ value }}" {% if task.checklist_response == value %}selected{% endif %}>{{ value.title() }}</option>{% endfor %}
          </select>
        </div>
        {% elif task.response_type == 'TEXT' %}
        <div class="md:col-span-2">
          <label class="mb-2 block text-sm font-medium text-slate-700">Response</label>
          <textarea name="checklist_text_response" rows="3" class="w-full rounded-xl border border-emerald-200 px-4 py-2 text-sm" {% if not can_edit %}readonly{% endif %}>{{ task.checklist_text_response or '' }}</textarea>
        </div>
        {% elif task.response_type == 'NUMBER' %}
        <div>
          <label class="mb-2 block text-sm font-medium text-slate-700">Numeric Response</label>
          <input type="number" step="0.01" name="checklist_number_response" value="{{ task.checklist_number_response if task.checklist_number_response is not none else '' }}" class="w-full rounded-xl border border-emerald-200 px-4 py-2 text-sm" {% if not can_edit %}readonly{% endif %}>
        </div>
        {% elif task.response_type == 'DATE' %}
        <div>
          <label class="mb-2 block text-sm font-medium text-slate-700">Date Response</label>
          <input type="date" name="checklist_date_response" value="{{ task.checklist_date_response or '' }}" class="w-full rounded-xl border border-emerald-200 px-4 py-2 text-sm" {% if not can_edit %}readonly{% endif %}>
        </div>
        {% endif %}
        <div class="{% if task.response_type == 'TEXT' %}md:col-span-2{% endif %}">
          <label class="mb-2 block text-sm font-medium text-slate-700">Checklist Remarks{% if task.remarks_required_if_no %} (required when No){% endif %}</label>
          <textarea name="checklist_remarks" rows="3" class="w-full rounded-xl border border-emerald-200 px-4 py-2 text-sm" {% if not can_edit %}readonly{% endif %}>{{ task.checklist_remarks or '' }}</textarea>
        </div>
      </div>
    </div>
    {% endif %}

    <div class="md:col-span-2">
      <label class="mb-2 block text-sm font-medium text-slate-700">Remarks / Work Note</label>
      <textarea name="remarks" rows="4" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm" {% if not can_edit %}readonly{% endif %}>{{ task.remarks or '' }}</textarea>
    </div>
    <div class="md:col-span-2 flex items-center justify-between gap-3">
      <label class="inline-flex items-center gap-2 text-sm text-slate-700"><input type="checkbox" name="is_active" {% if task.is_active %}checked{% endif %} {% if not can_manage_fields %}disabled{% endif %}> Active</label>
      <div class="flex gap-3">
        <a href="/documents/tasks/{{ task.id }}" class="rounded-xl border border-indigo-300 px-4 py-2 text-sm font-medium text-indigo-700 hover:bg-indigo-50">Task Evidence</a>
        <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">Cancel</a>
        {% if can_edit %}<button class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700">Save</button>{% endif %}
      </div>
    </div>
  </form>
</div>

{% if task.is_aqmm_task %}
<div class="mx-auto mt-6 max-w-3xl rounded-2xl bg-white p-6 shadow-soft">
  <div class="flex items-start justify-between gap-4">
    <div>
      <h3 class="text-lg font-semibold text-slate-900">AQMM Submit & Review</h3>
      <p class="mt-1 text-sm text-slate-500">Use this task as the AQMM evidence container. Upload documents first where evidence is required, then submit for review.</p>
    </div>
    <a href="/documents/tasks/{{ task.id }}" class="rounded-xl border border-indigo-300 px-4 py-2 text-sm font-medium text-indigo-700 hover:bg-indigo-50">Open Evidence</a>
  </div>

  {% if request.query_params.get('submitted') %}<div class="mt-4 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">Task submitted for review.</div>{% endif %}
  {% if request.query_params.get('reviewed') %}<div class="mt-4 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">Review action saved.</div>{% endif %}
  {% if request.query_params.get('review_error') %}<div class="mt-4 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">Review action failed. Check evidence requirement or rework note.</div>{% endif %}

  {% if can_submit_review %}
  <form method="post" action="/services/work-tracker/tasks/{{ task.id }}/submit-review" class="mt-5 rounded-2xl border border-slate-200 p-4">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <label class="mb-2 block text-sm font-medium text-slate-700">Staff Work Note / Submission Note</label>
    <textarea name="note" rows="3" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm" placeholder="Summarise work performed and evidence uploaded."></textarea>
    <div class="mt-3 flex justify-end"><button class="rounded-xl bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">Submit for Review</button></div>
  </form>
  {% endif %}

  <div class="mt-5 grid gap-4 md:grid-cols-3">
    {% if task.aqmm_manager_review_required and can_manager_review %}
    <form method="post" action="/services/work-tracker/tasks/{{ task.id }}/review/manager" class="rounded-2xl border border-slate-200 p-4">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <div class="text-sm font-semibold text-slate-900">Manager Review</div>
      <select name="decision" class="mt-3 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm"><option value="reviewed">Reviewed</option><option value="rework_required">Rework Required</option></select>
      <textarea name="note" rows="3" class="mt-3 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm" placeholder="Review note / rework reason"></textarea>
      <button class="mt-3 rounded-xl bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700">Save</button>
    </form>
    {% endif %}
    {% if task.aqmm_partner_review_required and can_partner_review %}
    <form method="post" action="/services/work-tracker/tasks/{{ task.id }}/review/partner" class="rounded-2xl border border-slate-200 p-4">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <div class="text-sm font-semibold text-slate-900">Partner Review</div>
      <select name="decision" class="mt-3 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm"><option value="reviewed">Reviewed</option><option value="rework_required">Rework Required</option></select>
      <textarea name="note" rows="3" class="mt-3 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm" placeholder="Review note / rework reason"></textarea>
      <button class="mt-3 rounded-xl bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700">Save</button>
    </form>
    {% endif %}
    {% if task.aqmm_review_partner_required and can_review_partner_review %}
    <form method="post" action="/services/work-tracker/tasks/{{ task.id }}/review/review_partner" class="rounded-2xl border border-slate-200 p-4">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <div class="text-sm font-semibold text-slate-900">Review Partner Review</div>
      <select name="decision" class="mt-3 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm"><option value="reviewed">Reviewed</option><option value="rework_required">Rework Required</option></select>
      <textarea name="note" rows="3" class="mt-3 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm" placeholder="Review note / rework reason"></textarea>
      <button class="mt-3 rounded-xl bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700">Save</button>
    </form>
    {% endif %}
  </div>
</div>
{% endif %}

<div class="mx-auto mt-6 max-w-3xl rounded-2xl bg-white p-6 shadow-soft">
  <div class="flex items-start justify-between gap-4">
    <div>
      <h3 class="text-lg font-semibold text-slate-900">Task Communication Timeline</h3>
      <p class="mt-1 text-sm text-slate-500">Record internal notes, client clarifications, consultant clarifications, and partner review notes for this task.</p>
    </div>
    {% if task.subscription and task.subscription.is_locked %}
      <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-600">Locked</span>
    {% endif %}
  </div>

  {% if can_add_comment and comment_type_options %}
  <form method="post" action="/services/work-tracker/tasks/{{ task.id }}/comments" class="mt-5 grid gap-4">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <div class="grid gap-4 md:grid-cols-2">
      <div>
        <label class="mb-2 block text-sm font-medium text-slate-700">Comment Type</label>
        <select name="comment_type" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">
          {% for code, label in comment_type_options %}
            <option value="{{ code }}">{{ label }}</option>
          {% endfor %}
        </select>
      </div>
      <div>
        <label class="mb-2 block text-sm font-medium text-slate-700">Visibility</label>
        <select name="visibility" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">
          {% for code, label in task_comment_visibilities %}
            <option value="{{ code }}">{{ label }}</option>
          {% endfor %}
        </select>
        <p class="mt-1 text-xs text-slate-500">Client/consultant visibility is stored now and will be used when portals are enabled.</p>
      </div>
    </div>
    <div>
      <label class="mb-2 block text-sm font-medium text-slate-700">Message</label>
      <textarea name="message" rows="4" required class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm" placeholder="Type the communication note here..."></textarea>
    </div>
    <div class="flex justify-end">
      <button class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700">Add Communication</button>
    </div>
  </form>
  {% else %}
    <div class="mt-5 rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">Communication entry is not available for this task or role.</div>
  {% endif %}

  <div class="mt-6 space-y-4">
    {% if comments %}
      {% for comment in comments %}
      <div class="rounded-2xl border border-slate-200 p-4">
        <div class="flex flex-wrap items-center justify-between gap-2">
          <div class="flex flex-wrap items-center gap-2">
            {% set type_label = comment.comment_type.replace('_', ' ').title() %}
            {% set visibility_label = comment.visibility.replace('_', ' ').title() %}
            <span class="rounded-full bg-slate-900 px-3 py-1 text-xs font-medium text-white">{{ type_label }}</span>
            <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-700">{{ visibility_label }}</span>
          </div>
          <div class="text-xs text-slate-500">{{ comment.created_at_utc }}</div>
        </div>
        <div class="mt-2 text-sm font-medium text-slate-700">{{ comment.created_by.full_name or comment.created_by.email if comment.created_by else 'System' }}</div>
        <p class="mt-3 whitespace-pre-wrap text-sm leading-6 text-slate-700">{{ comment.message }}</p>
      </div>
      {% endfor %}
    {% else %}
      <div class="rounded-xl border border-dashed border-slate-300 px-4 py-6 text-center text-sm text-slate-500">No task communication recorded yet.</div>
    {% endif %}
  </div>
</div>

{% endblock %}