<%# Conversation view showing all messages from a contact %>
<%# Variables: contact, messages %>

<!-- Contact Header -->
<div class="bg-white border-b border-gray-200 px-6 py-4">
  <div class="flex items-center justify-between">
    <div class="flex items-center gap-4">
      <!-- Avatar -->
      <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center text-white font-semibold text-lg">
        <%= contact.first_name&.first&.upcase || contact.primary_email&.first&.upcase || '?' %>
      </div>

      <div>
        <h2 class="text-lg font-semibold text-gray-900">
          <% name = [contact.first_name, contact.last_name].compact.join(' ').presence %>
          <%= name || 'Unknown Contact' %>
        </h2>
        <div class="flex items-center gap-3 text-sm text-gray-500">
          <% if contact.primary_email.present? %>
            <a href="mailto:<%= contact.primary_email %>" class="hover:text-blue-600 flex items-center gap-1">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
              </svg>
              <%= contact.primary_email %>
            </a>
          <% end %>
          <% if contact.primary_phone_number.present? %>
            <a href="tel:<%= contact.primary_phone_number %>" class="hover:text-blue-600 flex items-center gap-1">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
              </svg>
              <%= contact.primary_phone_number %>
            </a>
          <% end %>
        </div>
      </div>
    </div>

    <!-- Actions -->
    <div class="flex items-center gap-2">
      <%= link_to site_admin_contact_path(contact),
                  class: "px-3 py-1.5 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors" do %>
        <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
        </svg>
        View Contact
      <% end %>
    </div>
  </div>
</div>

<!-- Messages Thread -->
<div class="flex-1 overflow-y-auto p-6 space-y-4">
  <% if messages.any? %>
    <% messages.each do |message| %>
      <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 max-w-3xl">
        <!-- Message Header -->
        <div class="flex items-start justify-between mb-3">
          <div class="flex items-center gap-2">
            <% if message.title.present? %>
              <span class="font-medium text-gray-900"><%= message.title %></span>
            <% end %>
            <% unless message.read? %>
              <span class="px-2 py-0.5 text-xs font-medium bg-blue-100 text-blue-700 rounded">New</span>
            <% end %>
          </div>
          <time class="text-xs text-gray-400" datetime="<%= message.created_at.iso8601 %>">
            <%= message.created_at.strftime('%b %d, %Y at %l:%M %p') %>
          </time>
        </div>

        <!-- Message Content -->
        <% if message.content.present? %>
          <div class="text-sm text-gray-700 whitespace-pre-wrap leading-relaxed">
            <%= message.content %>
          </div>
        <% else %>
          <p class="text-sm text-gray-400 italic">No message content</p>
        <% end %>

        <!-- Message Metadata -->
        <div class="mt-4 pt-3 border-t border-gray-100 flex flex-wrap gap-x-4 gap-y-1 text-xs text-gray-400">
          <% if message.origin_email.present? %>
            <span class="flex items-center gap-1">
              <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
              </svg>
              <%= message.origin_email %>
            </span>
          <% end %>

          <% if message.url.present? %>
            <span class="flex items-center gap-1">
              <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
              </svg>
              From: <%= URI.parse(message.url).path rescue message.url.truncate(30) %>
            </span>
          <% end %>

          <% if message.delivery_success %>
            <span class="flex items-center gap-1 text-green-600">
              <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
              </svg>
              Email sent
              <% if message.delivered_at %>
                (<%= time_ago_in_words(message.delivered_at) %> ago)
              <% end %>
            </span>
          <% elsif message.delivery_error.present? %>
            <span class="flex items-center gap-1 text-red-600">
              <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
              </svg>
              Delivery failed
            </span>
          <% end %>
        </div>
      </div>
    <% end %>

    <!-- Conversation Stats -->
    <div class="text-center text-xs text-gray-400 pt-4">
      <%= pluralize(messages.count, 'message') %> in this conversation
      &middot;
      First contact: <%= messages.first.created_at.strftime('%B %d, %Y') %>
    </div>
  <% else %>
    <div class="text-center text-gray-500 py-12">
      <p>No messages from this contact</p>
    </div>
  <% end %>
</div>
