{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  <div class="rounded-2xl bg-white p-6 shadow-card ring-1 ring-slate-200">
    <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
      <div>
        <a href="/email/inbox" class="text-sm font-medium text-blue-700 hover:underline">← Back to inbox</a>
        <h2 class="mt-2 text-xl font-semibold text-slate-900">{{ row.subject or '(No subject)' }}</h2>
        <p class="mt-1 text-sm text-slate-500">From {{ row.sender_name or row.sender_email or '-' }} &lt;{{ row.sender_email or '-' }}&gt;</p>
      </div>
      <div class="flex flex-col items-start gap-2 md:items-end">
        <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-700">{{ row.status }}</span>
        <span class="rounded-full bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-700">{{ row.mapping_status or 'UNMAPPED' }}</span>
      </div>
    </div>
    <div class="mt-4 grid gap-3 text-sm md:grid-cols-2">
      <div><span class="font-medium text-slate-700">Received:</span> {{ row.received_at_utc or '-' }}</div>
      <div><span class="font-medium text-slate-700">Mailbox:</span> {{ row.mailbox_email }}</div>
      <div><span class="font-medium text-slate-700">To:</span> {{ row.recipient_emails or '-' }}</div>
      <div><span class="font-medium text-slate-700">CC:</span> {{ row.cc_emails or '-' }}</div>
    </div>
  </div>

  <div class="grid gap-6 lg:grid-cols-3">
    <div class="rounded-2xl bg-white p-6 shadow-card ring-1 ring-slate-200 lg:col-span-2">
      <h3 class="text-base font-semibold text-slate-900">Message</h3>
      {% if row.body_text %}
        <pre class="mt-4 max-h-[560px] overflow-auto whitespace-pre-wrap rounded-xl bg-slate-50 p-4 text-sm leading-6 text-slate-800">{{ row.body_text }}</pre>
      {% elif row.body_html %}
        <div class="mt-4 rounded-xl border border-slate-200 p-4 text-sm text-slate-700">HTML-only message stored. Full HTML body is available in database.</div>
      {% else %}
        <div class="mt-4 rounded-xl border border-slate-200 p-4 text-sm text-slate-500">No readable body found.</div>
      {% endif %}
    </div>

    <div class="space-y-6">
      <div class="rounded-2xl bg-white p-6 shadow-card ring-1 ring-slate-200">
        <h3 class="text-base font-semibold text-slate-900">Matched Sender</h3>
        <div class="mt-4 space-y-2 text-sm text-slate-700">
          <div>Client ID: <span class="font-medium">{{ row.matched_client_id or '-' }}</span></div>
          <div>Consultant ID: <span class="font-medium">{{ row.matched_consultant_id or '-' }}</span></div>
          <div>User ID: <span class="font-medium">{{ row.matched_user_id or '-' }}</span></div>
        </div>
      </div>

      <div class="rounded-2xl bg-white p-6 shadow-card ring-1 ring-slate-200">
        <h3 class="text-base font-semibold text-slate-900">Work Mapping</h3>
        <div class="mt-4 space-y-2 text-sm text-slate-700">
          <div>Tracking Code: <span class="font-medium">{{ row.tracking_code or '-' }}</span></div>
          <div>Related Module: <span class="font-medium">{{ row.related_module or '-' }}</span></div>
          <div>Related ID: <span class="font-medium">{{ row.related_id or '-' }}</span></div>
          <div>Engagement ID: <span class="font-medium">{{ row.matched_engagement_id or '-' }}</span></div>
          <div>Task ID: <span class="font-medium">{{ row.matched_task_id or '-' }}</span></div>
          <div>Invoice ID: <span class="font-medium">{{ row.matched_invoice_id or '-' }}</span></div>
          {% if row.mapping_notes %}<div class="rounded-xl bg-slate-50 p-3 text-xs text-slate-600">{{ row.mapping_notes }}</div>{% endif %}
        </div>
      </div>

      <form method="post" action="/email/inbox/{{ row.id }}/map" class="rounded-2xl bg-white p-6 shadow-card ring-1 ring-slate-200">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
        <h3 class="text-base font-semibold text-slate-900">Manual Mapping</h3>
        <p class="mt-1 text-xs text-slate-500">Select only one. Task mapping also adds the email to the task communication timeline.</p>
        <label class="mt-4 block">
          <span class="text-sm font-medium text-slate-700">Task</span>
          <select name="task_id" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm">
            <option value="">-- Select task --</option>
            {% for task in tasks %}
              <option value="{{ task.id }}">#{{ task.id }} - {{ task.task_name }}{% if task.financial_year %} ({{ task.financial_year }}){% endif %}</option>
            {% endfor %}
          </select>
        </label>
        <label class="mt-3 block">
          <span class="text-sm font-medium text-slate-700">Engagement / Assignment</span>
          <select name="engagement_id" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm">
            <option value="">-- Select engagement --</option>
            {% for eng in engagements %}
              <option value="{{ eng.id }}">#{{ eng.id }} - Service {{ eng.service_catalogue_id }}{% if eng.financial_year %} ({{ eng.financial_year }}){% endif %}</option>
            {% endfor %}
          </select>
        </label>
        <label class="mt-3 block">
          <span class="text-sm font-medium text-slate-700">Invoice</span>
          <select name="invoice_id" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm">
            <option value="">-- Select invoice --</option>
            {% for inv in invoices %}
              <option value="{{ inv.id }}">#{{ inv.id }} - {{ inv.invoice_no }} - ₹{{ inv.total_amount }}</option>
            {% endfor %}
          </select>
        </label>
        <button class="mt-4 w-full rounded-xl bg-slate-900 px-4 py-2 text-sm font-semibold text-white hover:bg-slate-800">Save Mapping</button>
      </form>

      <div class="rounded-2xl bg-white p-6 shadow-card ring-1 ring-slate-200">
        <h3 class="text-base font-semibold text-slate-900">Attachments</h3>
        <div class="mt-4 space-y-3">
          {% for item in attachments %}
            <div class="rounded-xl border border-slate-200 p-3 text-sm">
              <div class="font-medium text-slate-800">{{ item.filename or 'attachment' }}</div>
              <div class="text-xs text-slate-500">{{ item.content_type or '-' }} • {{ item.size_bytes }} bytes</div>
              <div class="mt-1 break-all text-xs text-slate-400">{{ item.storage_path or '' }}</div>
            </div>
          {% else %}
            <p class="text-sm text-slate-500">No attachments.</p>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}