{% extends "base.html" %}

{% block title %}{{ thread_subject }} — Thread{% endblock %}

{% block breadcrumbs %}
<nav class="flex items-center gap-2 text-sm">
  <a href="/mail" class="text-slate-600 dark:text-slate-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors flex items-center gap-1">
    <i data-lucide="home" class="w-3.5 h-3.5"></i>
    Projects
  </a>
  <i data-lucide="chevron-right" class="w-4 h-4 text-slate-400"></i>
  <a href="/mail/{{ project.slug }}" class="text-slate-600 dark:text-slate-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors">
    {{ project.human_key }}
  </a>
  <i data-lucide="chevron-right" class="w-4 h-4 text-slate-400"></i>
  <span class="text-slate-900 dark:text-white font-medium">Thread Conversation</span>
</nav>
{% endblock %}

{% block content %}
<div class="max-w-5xl mx-auto space-y-6 page-transition pb-12">

  <!-- Thread Header - Gmail Style -->
  <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
    <div class="flex items-start justify-between mb-4">
      <div class="flex-1 min-w-0">
        <div class="flex items-center gap-3 mb-2">
          <i data-lucide="messages-square" class="w-6 h-6 text-primary-600 dark:text-primary-400 flex-shrink-0"></i>
          <h1 class="text-2xl font-bold text-slate-900 dark:text-white truncate">
            {{ thread_subject }}
          </h1>
        </div>
        <div class="flex items-center gap-4 text-sm text-slate-600 dark:text-slate-400">
          <div class="flex items-center gap-1.5">
            <i data-lucide="hash" class="w-4 h-4"></i>
            <span class="font-mono">{{ thread_id }}</span>
          </div>
          <div class="flex items-center gap-1.5">
            <i data-lucide="layers" class="w-4 h-4"></i>
            <span>{{ message_count }} message{{ 's' if message_count != 1 else '' }}</span>
          </div>
        </div>
      </div>

      <!-- Actions -->
      <div class="flex items-center gap-2">
        <a href="/mail/{{ project.slug }}"
           class="px-3 py-2 bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-300 rounded-lg transition-all duration-200 flex items-center gap-2 text-sm font-medium">
          <i data-lucide="arrow-left" class="w-4 h-4"></i>
          Back to Project
        </a>
      </div>
    </div>
  </div>

  <!-- Conversation Thread - Gmail Style -->
  <div class="space-y-4">
    {% for msg in messages %}
      <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border-2 border-slate-200 dark:border-slate-700 overflow-hidden hover:shadow-md hover:border-primary-300 dark:hover:border-primary-600 transition-all duration-200"
           x-data="{ expanded: {{ 'true' if loop.last else 'false' }} }">

        <!-- Message Header (Always Visible) -->
        <div @click="expanded = !expanded"
             class="p-5 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-900/50 transition-colors"
             :class="expanded ? 'bg-slate-50 dark:bg-slate-900/30' : ''">
          <div class="flex items-start justify-between gap-4">
            <div class="flex items-start gap-3 flex-1 min-w-0">
              <!-- Avatar -->
              <div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary-500 to-primary-700 flex items-center justify-center flex-shrink-0 shadow-sm">
                <span class="text-white font-semibold text-sm">{{ (msg.sender[0] if msg.sender else '?')|upper }}</span>
              </div>

              <!-- Sender Info -->
              <div class="flex-1 min-w-0">
                <div class="flex items-baseline gap-2 mb-1">
                  <span class="font-semibold text-slate-900 dark:text-white">{{ msg.sender }}</span>
                  <span class="text-sm text-slate-500 dark:text-slate-400">{{ msg.created }}</span>
                </div>

                <!-- Preview (when collapsed) -->
                <div x-show="!expanded" class="text-sm text-slate-600 dark:text-slate-400 line-clamp-2">
                  {% if msg.body_md %}
                    {{ msg.body_md|striptags|truncate(150, killwords=False, end='...') }}
                  {% else %}
                    <em class="text-slate-400">No content</em>
                  {% endif %}
                </div>
              </div>
            </div>

            <!-- Right side badges and expand icon -->
            <div class="flex items-center gap-2 flex-shrink-0">
              <!-- Importance Badge -->
              {% if msg.importance == 'urgent' %}
                <span class="px-2.5 py-1 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300 text-xs font-semibold rounded-full flex items-center gap-1">
                  <i data-lucide="alert-circle" class="w-3 h-3"></i>
                  Urgent
                </span>
              {% elif msg.importance == 'high' %}
                <span class="px-2.5 py-1 bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 text-xs font-semibold rounded-full flex items-center gap-1">
                  <i data-lucide="alert-triangle" class="w-3 h-3"></i>
                  High
                </span>
              {% endif %}

              <!-- Expand/Collapse Icon -->
              <div class="text-slate-400 transition-transform duration-200"
                   :class="expanded ? 'rotate-180' : ''">
                <i data-lucide="chevron-down" class="w-5 h-5"></i>
              </div>
            </div>
          </div>
        </div>

        <!-- Message Body (Expandable) -->
        <div x-show="expanded"
             x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0 transform -translate-y-2"
             x-transition:enter-end="opacity-100 transform translate-y-0"
             class="px-5 pb-5 pt-2">

          <!-- Divider -->
          <div class="mb-4 -mx-5 px-5">
            <div class="border-t border-slate-200 dark:border-slate-700"></div>
          </div>

          <!-- Message Content -->
          <div class="prose prose-slate dark:prose-invert max-w-none
                      prose-headings:font-semibold prose-headings:text-slate-900 dark:prose-headings:text-white
                      prose-p:text-slate-700 dark:prose-p:text-slate-300
                      prose-a:text-primary-600 dark:prose-a:text-primary-400 prose-a:no-underline hover:prose-a:underline
                      prose-code:text-primary-600 dark:prose-code:text-primary-400 prose-code:bg-primary-50 dark:prose-code:bg-primary-900/20 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none
                      prose-pre:bg-slate-900 dark:prose-pre:bg-slate-950 prose-pre:border prose-pre:border-slate-700
                      prose-ul:text-slate-700 dark:prose-ul:text-slate-300
                      prose-ol:text-slate-700 dark:prose-ol:text-slate-300
                      prose-li:text-slate-700 dark:prose-li:text-slate-300
                      prose-strong:text-slate-900 dark:prose-strong:text-white
                      prose-em:text-slate-700 dark:prose-em:text-slate-300
                      prose-blockquote:border-primary-500 prose-blockquote:text-slate-700 dark:prose-blockquote:text-slate-300
                      prose-hr:border-slate-300 dark:prose-hr:border-slate-700
                      prose-table:text-sm
                      prose-th:bg-slate-100 dark:prose-th:bg-slate-800 prose-th:text-slate-900 dark:prose-th:text-white
                      prose-td:text-slate-700 dark:prose-td:text-slate-300">
            {{ msg.body_html|safe }}
          </div>

          <!-- Message Actions -->
          <div class="mt-6 pt-4 border-t border-slate-200 dark:border-slate-700 flex items-center justify-between">
            <div class="flex items-center gap-2">
              <a href="/mail/{{ project.slug }}/message/{{ msg.id }}"
                 class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-300 rounded-lg transition-colors text-sm font-medium">
                <i data-lucide="external-link" class="w-3.5 h-3.5"></i>
                View Full Message
              </a>
            </div>

            <!-- Message ID -->
            <div class="text-xs text-slate-400 dark:text-slate-500 font-mono">
              Message #{{ msg.id }}
            </div>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>

  <!-- Thread Actions Footer -->
  <div class="bg-slate-50 dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-700 p-6">
    <div class="flex items-center justify-between">
      <div class="text-sm text-slate-600 dark:text-slate-400">
        <p class="mb-1">End of conversation</p>
        <p class="text-xs">{{ message_count }} message{{ 's' if message_count != 1 else '' }} in this thread</p>
      </div>

      <a href="/mail/{{ project.slug }}"
         class="inline-flex items-center gap-2 px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded-lg shadow-sm hover:shadow-md transition-all duration-200 font-medium">
        <i data-lucide="arrow-left" class="w-4 h-4"></i>
        Back to Project
      </a>
    </div>
  </div>
</div>

<script>
  // Initialize icons after Alpine renders
  document.addEventListener('alpine:initialized', () => {
    if (typeof lucide !== 'undefined') {
      lucide.createIcons();
    }
  });
</script>
{% endblock %}