{% extends "lia_base.html" %}

{% block title %}Conversations – LIA{% endblock %}
{% block page_title %}Conversations{% endblock %}

{% block topbar_actions %}
<div class="flex items-center gap-2">
  <span class="text-sm text-gray-500">{{ total_count or 0 }} conversations</span>
</div>
{% endblock %}

{% block content %}
<div class="p-4 md:p-6" x-data="conversationsApp()">
  
  <!-- Filters Row -->
  <div class="bg-white rounded-xl border border-gray-200 shadow-card p-4 mb-4">
    <div class="flex flex-wrap items-center gap-3">
      <!-- Status Tabs -->
      <div class="flex items-center gap-1 bg-gray-100 rounded-lg p-1">
        <button 
          @click="filters.status = 'active'; loadConversations()"
          :class="filters.status === 'active' ? 'bg-white shadow-sm text-lia-ink' : 'text-gray-500 hover:text-gray-700'"
          class="px-3 py-1.5 text-xs font-medium rounded-md transition"
        >Active & Recent</button>
        <button 
          @click="filters.status = 'escalated'; loadConversations()"
          :class="filters.status === 'escalated' ? 'bg-white shadow-sm text-lia-ink' : 'text-gray-500 hover:text-gray-700'"
          class="px-3 py-1.5 text-xs font-medium rounded-md transition flex items-center gap-1.5"
        >
          Escalated
          <template x-if="escalatedCount > 0">
            <span class="px-1.5 py-0.5 text-[10px] bg-lia-purple text-white rounded-full" x-text="escalatedCount"></span>
          </template>
        </button>
        <button 
          @click="filters.status = 'awaiting'; loadConversations()"
          :class="filters.status === 'awaiting' ? 'bg-white shadow-sm text-lia-ink' : 'text-gray-500 hover:text-gray-700'"
          class="px-3 py-1.5 text-xs font-medium rounded-md transition"
        >Awaiting Customer</button>
        <button 
          @click="filters.status = 'paused'; loadConversations()"
          :class="filters.status === 'paused' ? 'bg-white shadow-sm text-lia-ink' : 'text-gray-500 hover:text-gray-700'"
          class="px-3 py-1.5 text-xs font-medium rounded-md transition"
        >Paused / DNC</button>
      </div>
      
      <!-- Spacer -->
      <div class="flex-1"></div>
      
      <!-- Stage Filter -->
      <select 
        x-model="filters.stage" 
        @change="loadConversations()"
        class="px-3 py-1.5 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-lia-blue/20"
      >
        <option value="">All Stages</option>
        <option value="18">18 months</option>
        <option value="12">12 months</option>
        <option value="9">9 months</option>
        <option value="6">6 months</option>
        <option value="3">3 months</option>
      </select>
      
      <!-- Search -->
      <div class="relative">
        <input 
          type="text" 
          x-model="searchQuery"
          @input.debounce.300ms="loadConversations()"
          placeholder="Search name or reg..."
          class="pl-9 pr-4 py-1.5 text-sm border border-gray-200 rounded-lg w-56 focus:outline-none focus:ring-2 focus:ring-lia-blue/20"
        >
        <svg class="w-4 h-4 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
        </svg>
      </div>
    </div>
  </div>

  <!-- Conversations List -->
  <div class="bg-white rounded-xl border border-gray-200 shadow-card overflow-hidden">
    <!-- Loading State -->
    <template x-if="loading">
      <div class="p-8 text-center">
        <div class="inline-block w-6 h-6 border-2 border-lia-blue border-t-transparent rounded-full animate-spin"></div>
        <p class="mt-2 text-sm text-gray-500">Loading conversations...</p>
      </div>
    </template>
    
    <!-- Empty State -->
    <template x-if="!loading && conversations.length === 0">
      <div class="p-8 text-center">
        <svg class="w-12 h-12 mx-auto text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
        </svg>
        <p class="mt-3 text-gray-500">No conversations found</p>
        <p class="text-sm text-gray-400">Try adjusting your filters or search</p>
      </div>
    </template>
    
    <!-- Conversation Rows -->
    <template x-if="!loading && conversations.length > 0">
      <div>
        <template x-for="conv in conversations" :key="conv.id">
          <a 
            :href="'/lia/conversations/' + conv.id"
            class="block border-b border-gray-100 last:border-0 hover:bg-gray-50 transition-colors"
          >
            <div class="p-4 flex items-center gap-4">
              <!-- Customer Info -->
              <div class="flex-1 min-w-0">
                <div class="flex items-center gap-2 mb-0.5 flex-wrap">
                  <span class="font-medium text-lia-ink truncate" x-text="conv.customer_name || 'Unknown'"></span>
                  
                  <!-- HOT Badge -->
                  <template x-if="conv.hot_flag">
                    <span class="flex-shrink-0 text-orange-500 text-sm">🔥</span>
                  </template>
                  
                  <!-- Stage Badge -->
                  <template x-if="conv.stage">
                    <span class="flex-shrink-0 px-1.5 py-0.5 text-[10px] font-semibold rounded bg-lia-blue/10 text-lia-blue" x-text="conv.stage + 'm'"></span>
                  </template>
                  
                  <!-- Campaign Chip -->
                  <template x-if="conv.campaign_name">
                    <span class="flex-shrink-0 px-1.5 py-0.5 text-[10px] font-medium rounded bg-gray-100 text-gray-600" x-text="conv.campaign_name"></span>
                  </template>
                </div>
                
                <p class="text-sm text-gray-500 truncate">
                  <span x-text="conv.vehicle_description || ''"></span>
                  <template x-if="conv.reg">
                    <span class="text-gray-400"> • <span class="font-medium text-gray-600" x-text="conv.reg"></span></span>
                  </template>
                </p>
                
                <!-- Advisor Name -->
                <template x-if="conv.advisor_name">
                  <p class="text-xs text-gray-400 mt-0.5">Advisor: <span x-text="conv.advisor_name"></span></p>
                </template>
                
                <!-- Last Message Preview -->
                <p class="text-sm text-gray-400 truncate mt-1" x-text="conv.last_message || ''"></p>
              </div>
              
              <!-- Status & Time -->
              <div class="flex-shrink-0 text-right">
                <!-- Status Badge -->
                <span 
                  class="inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-full"
                  :class="{
                    'bg-green-100 text-green-700': conv.status === 'active',
                    'bg-purple-100 text-purple-700': conv.status === 'needs_review',
                    'bg-blue-100 text-blue-700': conv.status === 'awaiting_customer',
                    'bg-amber-100 text-amber-700': conv.status === 'paused',
                    'bg-red-100 text-red-700': conv.status === 'dnc' || conv.status === 'opted_out',
                    'bg-gray-100 text-gray-600': conv.status === 'closed_lost',
                    'bg-green-100 text-green-700': conv.status === 'closed_sold'
                  }"
                  x-text="formatStatus(conv.status)"
                ></span>
                
                <!-- Appointment Status with formatted display -->
                <template x-if="conv.appointment_status && conv.appointment_status !== 'NONE'">
                  <span 
                    class="ml-1.5 inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-full"
                    :class="getAppointmentStatusClass(conv.appointment_status)"
                    x-text="formatAppointmentStatus(conv.appointment_status, conv.next_appointment)"
                  ></span>
                </template>
                
                <!-- Time -->
                <p class="text-xs text-gray-400 mt-1" x-text="formatTime(conv.last_activity)"></p>
              </div>
              
              <!-- Arrow -->
              <svg class="w-4 h-4 text-gray-300 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
              </svg>
            </div>
          </a>
        </template>
        
        <!-- Pagination -->
        <div class="px-4 py-3 border-t border-gray-100 flex items-center justify-between bg-gray-50">
          <p class="text-sm text-gray-500">
            Showing <span x-text="((currentPage - 1) * 25) + 1"></span>–<span x-text="Math.min(currentPage * 25, totalCount)"></span> of <span x-text="totalCount"></span>
          </p>
          <div class="flex items-center gap-2">
            <button 
              @click="currentPage--; loadConversations()"
              :disabled="currentPage === 1"
              :class="currentPage === 1 ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-200'"
              class="px-3 py-1.5 text-sm font-medium text-gray-600 bg-white border border-gray-200 rounded-lg transition"
            >Previous</button>
            <button 
              @click="currentPage++; loadConversations()"
              :disabled="currentPage * 25 >= totalCount"
              :class="currentPage * 25 >= totalCount ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-200'"
              class="px-3 py-1.5 text-sm font-medium text-gray-600 bg-white border border-gray-200 rounded-lg transition"
            >Next</button>
          </div>
        </div>
      </div>
    </template>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function conversationsApp() {
  return {
    conversations: [],
    loading: true,
    currentPage: 1,
    totalCount: 0,
    escalatedCount: 0,
    searchQuery: '',
    filters: {
      status: 'active',
      stage: '',
    },
    
    init() {
      this.loadConversations();
    },
    
    async loadConversations() {
      this.loading = true;
      try {
        const params = new URLSearchParams({
          page: this.currentPage,
          limit: 25,
          status: this.filters.status,
        });
        if (this.filters.stage) params.append('stage', this.filters.stage);
        if (this.searchQuery) params.append('search', this.searchQuery);
        
        const response = await fetch(`/api/lia/conversations?${params}`);
        const data = await response.json();
        
        this.conversations = data.conversations || [];
        this.totalCount = data.total || 0;
        this.escalatedCount = data.escalated_count || 0;
      } catch (error) {
        console.error('Failed to load conversations:', error);
        this.conversations = [];
      } finally {
        this.loading = false;
      }
    },
    
    formatStatus(status) {
      const map = {
        'active': 'Active',
        'awaiting_customer': 'Awaiting',
        'needs_review': 'Escalated',
        'paused': 'Paused',
        'dnc': 'DNC',
        'opted_out': 'Opted Out',
        'closed_lost': 'Lost',
        'closed_sold': 'Sold',
      };
      return map[status] || status;
    },
    
    formatTime(timestamp) {
      if (!timestamp) return '';
      const date = new Date(timestamp);
      const now = new Date();
      const diffMs = now - date;
      const diffMins = Math.floor(diffMs / 60000);
      const diffHours = Math.floor(diffMins / 60);
      const diffDays = Math.floor(diffHours / 24);
      
      if (diffMins < 60) return diffMins + 'm ago';
      if (diffHours < 24) return diffHours + 'h ago';
      if (diffDays === 1) return 'Yesterday';
      if (diffDays < 7) return diffDays + 'd ago';
      return date.toLocaleDateString('en-GB', { day: '2-digit', month: 'short' });
    },
    
    formatAppointmentStatus(status, nextAppointment) {
      const labels = {
        'INVITED': 'Invited',
        'BOOKED': 'Booked',
        'ATTENDED': 'Attended',
        'NO_SHOW': 'No-show',
        'CANCELLED': 'Cancelled'
      };
      
      const label = labels[status] || status;
      
      if (status === 'BOOKED' && nextAppointment) {
        const date = new Date(nextAppointment.date || nextAppointment);
        const dayName = date.toLocaleDateString('en-GB', { weekday: 'short' });
        const dateStr = date.toLocaleDateString('en-GB', { day: '2-digit', month: 'short' });
        const timeStr = nextAppointment.time || '';
        return timeStr ? `${label} – ${dayName} ${dateStr}, ${timeStr}` : `${label} – ${dayName} ${dateStr}`;
      }
      
      return label;
    },
    
    getAppointmentStatusClass(status) {
      const classes = {
        'INVITED': 'bg-blue-50 text-blue-600',
        'BOOKED': 'bg-lia-green/10 text-lia-green',
        'ATTENDED': 'bg-green-100 text-green-700',
        'NO_SHOW': 'bg-red-50 text-red-600',
        'CANCELLED': 'bg-gray-100 text-gray-500'
      };
      return classes[status] || 'bg-lia-green/10 text-lia-green';
    }
  };
}
</script>
{% endblock %}