{% extends "lia_base.html" %}

{% block title %}{{ customer.name or 'Conversation' }} – LIA{% endblock %}
{% block page_title %}
<div class="flex items-center gap-2">
  <a href="/lia/conversations" class="text-gray-400 hover:text-gray-600 transition">
    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
    </svg>
  </a>
  <span>{{ customer.name or 'Conversation' }}</span>
</div>
{% endblock %}

{% block content %}
<div class="h-full flex flex-col lg:flex-row" x-data="conversationDetailApp({{ conversation_id }})">
  
  <!-- Top Status Banner -->
  <template x-if="statusBanner">
    <div 
      class="px-4 py-3 flex items-center justify-between flex-shrink-0 lg:hidden"
      :class="{
        'bg-green-50 border-b border-green-100': statusBanner.type === 'booked',
        'bg-purple-50 border-b border-purple-100': statusBanner.type === 'escalated',
        'bg-blue-50 border-b border-blue-100': statusBanner.type === 'awaiting',
        'bg-amber-50 border-b border-amber-100': statusBanner.type === 'paused',
        'bg-red-50 border-b border-red-100': statusBanner.type === 'dnc',
      }"
    >
      <p class="text-sm font-medium" :class="{
        'text-green-700': statusBanner.type === 'booked',
        'text-purple-700': statusBanner.type === 'escalated',
        'text-blue-700': statusBanner.type === 'awaiting',
        'text-amber-700': statusBanner.type === 'paused',
        'text-red-700': statusBanner.type === 'dnc',
      }" x-text="statusBanner.message"></p>
      <template x-if="statusBanner.action">
        <button 
          @click="handleBannerAction(statusBanner.action)"
          class="text-sm font-medium underline hover:no-underline"
          :class="{
            'text-green-700': statusBanner.type === 'booked',
            'text-purple-700': statusBanner.type === 'escalated',
            'text-amber-700': statusBanner.type === 'paused',
          }"
          x-text="statusBanner.actionLabel"
        ></button>
      </template>
    </div>
  </template>
  
  <!-- Left Panel: T-Card (Desktop) -->
  <aside class="hidden lg:block w-96 flex-shrink-0 border-r border-gray-200 bg-gray-50 overflow-y-auto scrollbar-thin">
    <div class="p-4">
      <!-- Status Banner (Desktop) -->
      <template x-if="statusBanner">
        <div 
          class="mb-4 p-3 rounded-lg"
          :class="{
            'bg-green-50 border border-green-200': statusBanner.type === 'booked',
            'bg-purple-50 border border-purple-200': statusBanner.type === 'escalated',
            'bg-blue-50 border border-blue-200': statusBanner.type === 'awaiting',
            'bg-amber-50 border border-amber-200': statusBanner.type === 'paused',
            'bg-red-50 border border-red-200': statusBanner.type === 'dnc',
          }"
        >
          <p class="text-sm font-medium" :class="{
            'text-green-700': statusBanner.type === 'booked',
            'text-purple-700': statusBanner.type === 'escalated',
            'text-blue-700': statusBanner.type === 'awaiting',
            'text-amber-700': statusBanner.type === 'paused',
            'text-red-700': statusBanner.type === 'dnc',
          }" x-text="statusBanner.message"></p>
          <template x-if="statusBanner.action">
            <button 
              @click="handleBannerAction(statusBanner.action)"
              class="mt-2 text-xs font-medium underline hover:no-underline"
              x-text="statusBanner.actionLabel"
            ></button>
          </template>
        </div>
      </template>
      
      <!-- T-Card Component -->
      <div class="tcard bg-white rounded-xl border border-gray-200 shadow-card overflow-hidden" x-data="{ activeTab: 'overview' }">
        <!-- Header: Customer + Vehicle -->
        <div class="px-4 py-4 border-b border-gray-100">
          <div class="flex items-start justify-between gap-3">
            <div class="min-w-0">
              <h3 class="text-base font-semibold text-lia-ink truncate" x-text="customer.name || 'Unknown'"></h3>
              <p class="text-sm text-gray-500 mt-0.5">
                <span x-text="customer.vehicle_description || ''"></span>
                <template x-if="customer.reg">
                  <span class="text-gray-400"> • <span class="font-medium text-gray-600" x-text="customer.reg"></span></span>
                </template>
              </p>
            </div>
            <div class="flex items-center gap-1.5 flex-shrink-0 flex-wrap justify-end">
              <template x-if="customer.stage">
                <span class="inline-flex items-center px-2 py-0.5 text-xs font-semibold rounded bg-lia-blue/10 text-lia-blue" x-text="customer.stage + 'm'"></span>
              </template>
              <template x-if="customer.campaign_name">
                <span class="inline-flex items-center px-2 py-0.5 text-[10px] font-medium rounded bg-gray-100 text-gray-600" x-text="customer.campaign_name"></span>
              </template>
            </div>
          </div>
          
          <template x-if="customer.advisor_name">
            <p class="text-xs text-gray-400 mt-2">Advisor: <span x-text="customer.advisor_name"></span></p>
          </template>
          
          <template x-if="customer.hot_flag">
            <div class="mt-2 flex items-center gap-1.5 text-sm">
              <span class="text-orange-500">🔥</span>
              <span class="text-orange-600 font-medium">Hot match</span>
            </div>
          </template>
        </div>

        <!-- Finance Panel -->
        <div class="px-4 py-3 bg-gray-50/50 border-b border-gray-100">
          <div class="grid grid-cols-2 gap-3 mb-3">
            <div>
              <p class="text-[11px] text-gray-500 uppercase tracking-wide font-medium">True Equity</p>
              <p class="text-lg font-semibold text-lia-ink mt-0.5" x-text="customer.true_equity ? '£' + customer.true_equity.toLocaleString() : '—'"></p>
            </div>
            <div>
              <p class="text-[11px] text-gray-500 uppercase tracking-wide font-medium">Current Payment</p>
              <p class="text-lg font-semibold text-lia-ink mt-0.5" x-text="customer.current_payment ? '£' + customer.current_payment.toLocaleString() + '/mo' : '—'"></p>
            </div>
          </div>
          
          <template x-if="customer.tco_payment">
            <div class="mb-3">
              <p class="text-[11px] text-gray-500 uppercase tracking-wide font-medium">TCO Payment</p>
              <p class="text-base font-semibold text-lia-ink mt-0.5" x-text="'£' + customer.tco_payment.toLocaleString() + '/mo'"></p>
            </div>
          </template>
          
          <!-- Equity Trend Chips -->
          <template x-if="customer.equity_trend_1m || customer.equity_trend_3m || customer.equity_trend_6m">
            <div class="pt-2 border-t border-gray-200">
              <p class="text-[10px] text-gray-500 uppercase tracking-wide font-medium mb-1.5">Equity Trend</p>
              <div class="flex items-center gap-2 flex-wrap">
                <template x-if="customer.equity_trend_1m !== undefined">
                  <span 
                    class="inline-flex items-center gap-0.5 px-2 py-0.5 text-[10px] font-medium rounded"
                    :class="customer.equity_trend_1m >= 0 ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-600'"
                  >
                    <span x-text="customer.equity_trend_1m >= 0 ? '↑' : '↓'"></span>
                    <span x-text="'£' + Math.abs(customer.equity_trend_1m).toLocaleString()"></span>
                    <span class="text-gray-400 ml-0.5">1m</span>
                  </span>
                </template>
                <template x-if="customer.equity_trend_3m !== undefined">
                  <span 
                    class="inline-flex items-center gap-0.5 px-2 py-0.5 text-[10px] font-medium rounded"
                    :class="customer.equity_trend_3m >= 0 ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-600'"
                  >
                    <span x-text="customer.equity_trend_3m >= 0 ? '↑' : '↓'"></span>
                    <span x-text="'£' + Math.abs(customer.equity_trend_3m).toLocaleString()"></span>
                    <span class="text-gray-400 ml-0.5">3m</span>
                  </span>
                </template>
                <template x-if="customer.equity_trend_6m !== undefined">
                  <span 
                    class="inline-flex items-center gap-0.5 px-2 py-0.5 text-[10px] font-medium rounded"
                    :class="customer.equity_trend_6m >= 0 ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-600'"
                  >
                    <span x-text="customer.equity_trend_6m >= 0 ? '↑' : '↓'"></span>
                    <span x-text="'£' + Math.abs(customer.equity_trend_6m).toLocaleString()"></span>
                    <span class="text-gray-400 ml-0.5">6m</span>
                  </span>
                </template>
              </div>
            </div>
          </template>
        </div>

        <!-- Appointments Block -->
        <div class="px-4 py-3 border-b border-gray-100">
          <p class="text-[11px] text-gray-500 uppercase tracking-wide font-medium mb-2">Next Appointment</p>
          <template x-if="customer.next_appointment">
            <div class="p-2.5 bg-lia-green/5 border border-lia-green/20 rounded-lg mb-3">
              <p class="text-sm font-medium text-lia-ink" x-text="customer.next_appointment.date + ' at ' + customer.next_appointment.time"></p>
              <p class="text-xs text-gray-500" x-text="(customer.next_appointment.type || 'Visit') + ' • ' + formatAppointmentLabel(customer.next_appointment.status || 'BOOKED')"></p>
            </div>
          </template>
          <template x-if="!customer.next_appointment">
            <p class="text-sm text-gray-400 italic mb-3">No upcoming appointment</p>
          </template>
          
          <!-- Past Appointments -->
          <template x-if="customer.past_appointments && customer.past_appointments.length > 0">
            <div>
              <p class="text-[10px] text-gray-500 uppercase tracking-wide font-medium mb-1.5">Past Appointments</p>
              <div class="space-y-1.5">
                <template x-for="appt in customer.past_appointments.slice(0, 3)" :key="appt.date">
                  <div class="flex items-center justify-between text-xs">
                    <span class="text-gray-600" x-text="appt.date"></span>
                    <span class="text-gray-400" x-text="(appt.type || 'Visit')"></span>
                    <span 
                      class="px-1.5 py-0.5 text-[10px] font-medium rounded"
                      :class="{
                        'bg-green-50 text-green-600': appt.status === 'ATTENDED',
                        'bg-red-50 text-red-600': appt.status === 'NO_SHOW',
                        'bg-gray-100 text-gray-500': appt.status === 'CANCELLED'
                      }"
                      x-text="formatAppointmentLabel(appt.status)"
                    ></span>
                  </div>
                </template>
              </div>
            </div>
          </template>
        </div>

        <!-- Tabs: Overview / Notes / History -->
        <div class="border-b border-gray-200">
          <nav class="flex -mb-px">
            <button @click="activeTab = 'overview'" :class="activeTab === 'overview' ? 'border-lia-blue text-lia-blue' : 'border-transparent text-gray-500'" class="flex-1 py-2.5 text-xs font-medium text-center border-b-2 transition-colors">Overview</button>
            <button @click="activeTab = 'notes'" :class="activeTab === 'notes' ? 'border-lia-blue text-lia-blue' : 'border-transparent text-gray-500'" class="flex-1 py-2.5 text-xs font-medium text-center border-b-2 transition-colors">Notes</button>
            <button @click="activeTab = 'history'" :class="activeTab === 'history' ? 'border-lia-blue text-lia-blue' : 'border-transparent text-gray-500'" class="flex-1 py-2.5 text-xs font-medium text-center border-b-2 transition-colors">History</button>
          </nav>
        </div>

        <!-- Tab Content -->
        <div class="px-4 py-3 max-h-64 overflow-y-auto scrollbar-thin">
          <template x-if="activeTab === 'overview'">
            <div>
              <template x-if="customer.campaign_name">
                <div class="mb-3">
                  <p class="text-[11px] text-gray-500 uppercase tracking-wide font-medium mb-1">Campaign</p>
                  <p class="text-sm text-lia-ink" x-text="customer.campaign_name"></p>
                </div>
              </template>
              <div class="mb-3">
                <p class="text-[11px] text-gray-500 uppercase tracking-wide font-medium mb-1">Status</p>
                <p class="text-sm text-lia-ink" x-text="formatStatus(customer.status)"></p>
              </div>
              <template x-if="customer.appointment_status">
                <div class="mb-3">
                  <p class="text-[11px] text-gray-500 uppercase tracking-wide font-medium mb-1">Appointment</p>
                  <p class="text-sm text-lia-ink" x-text="formatAppointmentLabel(customer.appointment_status)"></p>
                </div>
              </template>
              <template x-if="customer.soft_no_count !== undefined">
                <div>
                  <p class="text-[11px] text-gray-500 uppercase tracking-wide font-medium mb-1">Soft No Count</p>
                  <p class="text-sm text-lia-ink" x-text="customer.soft_no_count"></p>
                </div>
              </template>
            </div>
          </template>
          <template x-if="activeTab === 'notes'">
            <div>
              <!-- Existing Notes -->
              <template x-if="customer.notes && customer.notes.length > 0">
                <div class="space-y-2 mb-3">
                  <template x-for="note in customer.notes" :key="note.id || note.created_at">
                    <div class="p-2 bg-gray-50 rounded-lg border border-gray-100">
                      <p class="text-sm text-gray-700 whitespace-pre-wrap" x-text="note.content || note.text"></p>
                      <p class="text-[10px] text-gray-400 mt-1" x-text="formatNoteTime(note.created_at)"></p>
                    </div>
                  </template>
                </div>
              </template>
              <template x-if="!customer.notes || customer.notes.length === 0">
                <p class="text-sm text-gray-400 italic mb-3">No notes yet</p>
              </template>
              
              <!-- Add Note Form -->
              <div class="border-t border-gray-100 pt-3 mt-3">
                <textarea 
                  x-model="newNote"
                  placeholder="Add a note..."
                  class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-lia-blue/20"
                  rows="2"
                ></textarea>
                <button 
                  @click="saveNote()"
                  :disabled="!newNote.trim() || savingNote"
                  :class="!newNote.trim() || savingNote ? 'opacity-50 cursor-not-allowed' : 'hover:bg-lia-blue/90'"
                  class="mt-2 w-full px-3 py-1.5 text-xs font-medium text-white bg-lia-blue rounded-lg transition"
                  x-text="savingNote ? 'Saving...' : 'Save Note'"
                ></button>
              </div>
            </div>
          </template>
          <template x-if="activeTab === 'history'">
            <div>
              <p class="text-[11px] text-gray-500 uppercase tracking-wide font-medium mb-2">Conversation History</p>
              <template x-if="messages.length > 0">
                <div class="space-y-2">
                  <template x-for="msg in messages.slice(0, 10)" :key="msg.id">
                    <div class="flex items-start gap-2">
                      <span 
                        class="flex-shrink-0 w-5 h-5 rounded-full flex items-center justify-center text-[9px] font-bold"
                        :class="{
                          'bg-lia-blue/10 text-lia-blue': msg.sender === 'lia',
                          'bg-gray-200 text-gray-600': msg.sender === 'customer',
                          'bg-lia-purple/10 text-lia-purple': msg.sender === 'manager'
                        }"
                        x-text="msg.sender === 'lia' ? 'L' : msg.sender === 'manager' ? 'M' : 'C'"
                      ></span>
                      <div class="flex-1 min-w-0">
                        <p class="text-xs text-gray-700 line-clamp-2" x-text="msg.body"></p>
                        <p class="text-[10px] text-gray-400" x-text="formatMessageTime(msg.timestamp)"></p>
                      </div>
                    </div>
                  </template>
                </div>
              </template>
              <template x-if="messages.length === 0">
                <p class="text-sm text-gray-400 italic">No message history</p>
              </template>
            </div>
          </template>
        </div>
      </div>
    </div>
  </aside>
  
  <!-- Right Panel: Message Timeline + Reply Box -->
  <div class="flex-1 flex flex-col min-w-0 bg-white">
    <!-- Header Strip -->
    <div class="px-4 py-3 border-b border-gray-200 flex items-center gap-3 flex-shrink-0">
      <div class="flex-1 min-w-0">
        <div class="flex items-center gap-2 flex-wrap">
          <span class="font-medium text-lia-ink" x-text="customer.name || 'Unknown'"></span>
          <template x-if="customer.hot_flag">
            <span class="text-orange-500">🔥</span>
          </template>
          <template x-if="customer.stage">
            <span class="px-1.5 py-0.5 text-[10px] font-semibold rounded bg-lia-blue/10 text-lia-blue" x-text="customer.stage + 'm'"></span>
          </template>
          <template x-if="customer.campaign_name">
            <span class="px-1.5 py-0.5 text-[10px] font-medium rounded bg-gray-100 text-gray-600" x-text="customer.campaign_name"></span>
          </template>
        </div>
        <p class="text-sm text-gray-500 truncate">
          <span x-text="(customer.vehicle_description || '') + (customer.reg ? ' • ' + customer.reg : '')"></span>
          <template x-if="customer.advisor_name">
            <span class="text-gray-400"> • Advisor: <span x-text="customer.advisor_name"></span></span>
          </template>
        </p>
      </div>
      
      <!-- Status Badges -->
      <span 
        class="px-2 py-0.5 text-xs font-medium rounded-full"
        :class="{
          'bg-green-100 text-green-700': customer.status === 'active',
          'bg-purple-100 text-purple-700': customer.status === 'needs_review',
          'bg-blue-100 text-blue-700': customer.status === 'awaiting_customer',
          'bg-amber-100 text-amber-700': customer.status === 'paused',
          'bg-red-100 text-red-700': customer.status === 'dnc' || customer.status === 'opted_out',
        }"
        x-text="formatStatus(customer.status)"
      ></span>
      
      <template x-if="customer.appointment_status && customer.appointment_status !== 'NONE'">
        <span class="px-2 py-0.5 text-xs font-medium rounded-full bg-lia-green/10 text-lia-green" x-text="customer.appointment_status"></span>
      </template>
    </div>
    
    <!-- Message Timeline -->
    <div class="flex-1 overflow-y-auto scrollbar-thin p-4 space-y-3" id="message-timeline">
      <template x-for="msg in messages" :key="msg.id">
        <div>
          <!-- System Marker -->
          <template x-if="msg.type === 'system'">
            <div class="flex items-center gap-2 py-2">
              <div class="flex-1 h-px bg-gray-200"></div>
              <span class="text-xs text-gray-400 px-2" x-text="msg.body"></span>
              <div class="flex-1 h-px bg-gray-200"></div>
            </div>
          </template>
          
          <!-- LIA Message -->
          <template x-if="msg.sender === 'lia'">
            <div class="flex gap-3">
              <div class="w-8 h-8 rounded-full bg-lia-blue/10 flex items-center justify-center flex-shrink-0">
                <span class="text-xs font-semibold text-lia-blue">LIA</span>
              </div>
              <div class="max-w-[75%]">
                <div class="bg-gray-100 rounded-2xl rounded-tl-md px-4 py-2.5">
                  <p class="text-sm text-gray-800 whitespace-pre-wrap" x-text="msg.body"></p>
                </div>
                <p class="text-[10px] text-gray-400 mt-1 ml-1" x-text="formatMessageTime(msg.timestamp)"></p>
              </div>
            </div>
          </template>
          
          <!-- Customer Message -->
          <template x-if="msg.sender === 'customer'">
            <div class="flex gap-3 justify-end">
              <div class="max-w-[75%]">
                <div class="bg-lia-blue text-white rounded-2xl rounded-tr-md px-4 py-2.5">
                  <p class="text-sm whitespace-pre-wrap" x-text="msg.body"></p>
                </div>
                <p class="text-[10px] text-gray-400 mt-1 mr-1 text-right" x-text="formatMessageTime(msg.timestamp)"></p>
              </div>
              <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center flex-shrink-0">
                <span class="text-xs font-semibold text-gray-600" x-text="getInitials(customer.name)"></span>
              </div>
            </div>
          </template>
          
          <!-- Manager Message -->
          <template x-if="msg.sender === 'manager'">
            <div class="flex gap-3">
              <div class="w-8 h-8 rounded-full bg-lia-purple/10 flex items-center justify-center flex-shrink-0">
                <span class="text-xs font-semibold text-lia-purple">MGR</span>
              </div>
              <div class="max-w-[75%]">
                <div class="bg-lia-purple/10 border border-lia-purple/20 rounded-2xl rounded-tl-md px-4 py-2.5">
                  <p class="text-sm text-gray-800 whitespace-pre-wrap" x-text="msg.body"></p>
                </div>
                <p class="text-[10px] text-gray-400 mt-1 ml-1" x-text="formatMessageTime(msg.timestamp)"></p>
              </div>
            </div>
          </template>
        </div>
      </template>
      
      <!-- Empty State -->
      <template x-if="messages.length === 0 && !loading">
        <div class="text-center py-8">
          <p class="text-gray-400">No messages yet</p>
        </div>
      </template>
    </div>
    
    <!-- Manager Reply Box -->
    <div class="border-t border-gray-200 p-4 bg-gray-50 flex-shrink-0">
      <!-- Escalation Banner in Reply Area -->
      <template x-if="customer.status === 'needs_review'">
        <div class="mb-3 p-2.5 bg-purple-50 border border-purple-200 rounded-lg flex items-center gap-2">
          <svg class="w-4 h-4 text-purple-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
          </svg>
          <span class="text-sm text-purple-700 font-medium">Needs manager review – LIA is waiting for a human reply</span>
        </div>
      </template>
      
      <div class="flex flex-col gap-3">
        <!-- Reply Input -->
        <textarea 
          x-model="replyText"
          placeholder="Type your reply..."
          class="w-full px-4 py-3 text-sm border border-gray-200 rounded-xl resize-none focus:outline-none focus:ring-2 focus:ring-lia-blue/20 focus:border-lia-blue"
          rows="3"
          @keydown.meta.enter="sendReply()"
          @keydown.ctrl.enter="sendReply()"
        ></textarea>
        
        <!-- Controls Row -->
        <div class="flex items-center justify-between gap-3">
          <!-- Send Options -->
          <div class="flex items-center gap-3">
            <!-- LIA Continue Toggle -->
            <label class="flex items-center gap-2 text-sm text-gray-600 cursor-pointer">
              <input type="checkbox" x-model="pauseLia" class="w-4 h-4 rounded border-gray-300 text-lia-blue focus:ring-lia-blue/20">
              <span>Pause LIA after sending</span>
            </label>
            
            <!-- Mark Resolved (if escalated) -->
            <template x-if="customer.status === 'needs_review'">
              <label class="flex items-center gap-2 text-sm text-gray-600 cursor-pointer">
                <input type="checkbox" x-model="markResolved" class="w-4 h-4 rounded border-gray-300 text-lia-purple focus:ring-lia-purple/20">
                <span>Mark escalation as resolved</span>
              </label>
            </template>
          </div>
          
          <!-- Send Button -->
          <button 
            @click="sendReply()"
            :disabled="!replyText.trim() || sending"
            :class="!replyText.trim() || sending ? 'opacity-50 cursor-not-allowed' : 'hover:bg-lia-blue/90'"
            class="px-5 py-2 text-sm font-medium text-white bg-lia-blue rounded-lg transition flex items-center gap-2"
          >
            <template x-if="sending">
              <div class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
            </template>
            <span x-text="sending ? 'Sending...' : 'Send as Manager'"></span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function conversationDetailApp(conversationId) {
  return {
    conversationId: conversationId,
    customer: {},
    messages: [],
    loading: true,
    replyText: '',
    pauseLia: false,
    markResolved: true,
    sending: false,
    statusBanner: null,
    newNote: '',
    savingNote: false,
    
    init() {
      this.loadConversation();
    },
    
    async loadConversation() {
      this.loading = true;
      try {
        const response = await fetch(`/api/lia/conversations/${this.conversationId}`);
        const data = await response.json();
        
        this.customer = data.customer || {};
        this.messages = data.messages || [];
        this.updateStatusBanner();
        
        this.$nextTick(() => {
          this.scrollToBottom();
        });
      } catch (error) {
        console.error('Failed to load conversation:', error);
      } finally {
        this.loading = false;
      }
    },
    
    updateStatusBanner() {
      if (this.customer.appointment_status === 'BOOKED' && this.customer.next_appointment) {
        this.statusBanner = {
          type: 'booked',
          message: `Appointment booked: ${this.customer.next_appointment.date} at ${this.customer.next_appointment.time}`,
          action: 'view_diary',
          actionLabel: 'View in diary'
        };
      } else if (this.customer.status === 'needs_review') {
        this.statusBanner = {
          type: 'escalated',
          message: 'Needs manager review – LIA is waiting for a human reply before continuing.',
          action: 'resolve',
          actionLabel: 'Mark as resolved'
        };
      } else if (this.customer.status === 'awaiting_customer') {
        const lastSent = this.messages.filter(m => m.sender === 'lia').pop();
        this.statusBanner = {
          type: 'awaiting',
          message: `Awaiting customer – last message sent by LIA${lastSent ? ' at ' + this.formatMessageTime(lastSent.timestamp) : ''}.`
        };
      } else if (this.customer.status === 'paused') {
        this.statusBanner = {
          type: 'paused',
          message: 'Paused – LIA is not sending messages to this customer.',
          action: 'resume',
          actionLabel: 'Resume LIA'
        };
      } else if (this.customer.status === 'dnc' || this.customer.status === 'opted_out') {
        this.statusBanner = {
          type: 'dnc',
          message: 'Do not contact – customer has opted out. LIA is disabled for this conversation.'
        };
      } else {
        this.statusBanner = null;
      }
    },
    
    async handleBannerAction(action) {
      if (action === 'resolve') {
        await this.resolveEscalation();
      } else if (action === 'resume') {
        await this.resumeConversation();
      } else if (action === 'view_diary') {
        window.location.href = '/lia/appointments';
      }
    },
    
    async sendReply() {
      if (!this.replyText.trim() || this.sending) return;
      
      this.sending = true;
      try {
        const response = await fetch(`/api/lia/conversations/${this.conversationId}/reply`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            body: this.replyText,
            pause_lia: this.pauseLia,
            mark_resolved: this.markResolved && this.customer.status === 'needs_review'
          })
        });
        
        if (response.ok) {
          this.replyText = '';
          await this.loadConversation();
        } else {
          const error = await response.json();
          alert('Failed to send: ' + (error.detail || 'Unknown error'));
        }
      } catch (error) {
        console.error('Failed to send reply:', error);
        alert('Failed to send reply');
      } finally {
        this.sending = false;
      }
    },
    
    async resolveEscalation() {
      try {
        const response = await fetch(`/api/lia/conversations/${this.conversationId}/resolve`, {
          method: 'POST'
        });
        if (response.ok) {
          await this.loadConversation();
        }
      } catch (error) {
        console.error('Failed to resolve:', error);
      }
    },
    
    async resumeConversation() {
      try {
        const response = await fetch(`/api/lia/conversations/${this.conversationId}/resume`, {
          method: 'POST'
        });
        if (response.ok) {
          await this.loadConversation();
        }
      } catch (error) {
        console.error('Failed to resume:', error);
      }
    },
    
    scrollToBottom() {
      const timeline = document.getElementById('message-timeline');
      if (timeline) {
        timeline.scrollTop = timeline.scrollHeight;
      }
    },
    
    formatStatus(status) {
      const map = {
        'active': 'Active',
        'awaiting_customer': 'Awaiting',
        'needs_review': 'Escalated',
        'paused': 'Paused',
        'dnc': 'DNC',
        'opted_out': 'Opted Out',
      };
      return map[status] || status;
    },
    
    formatMessageTime(timestamp) {
      if (!timestamp) return '';
      const date = new Date(timestamp);
      const now = new Date();
      const isToday = date.toDateString() === now.toDateString();
      
      if (isToday) {
        return date.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' });
      }
      return date.toLocaleDateString('en-GB', { day: '2-digit', month: 'short' }) + ' ' + 
             date.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' });
    },
    
    getInitials(name) {
      if (!name) return '?';
      return name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
    },
    
    formatAppointmentLabel(status) {
      const labels = {
        'INVITED': 'Invited',
        'BOOKED': 'Booked',
        'ATTENDED': 'Attended',
        'NO_SHOW': 'No-show',
        'CANCELLED': 'Cancelled',
        'NONE': 'None'
      };
      return labels[status] || status;
    },
    
    formatNoteTime(timestamp) {
      if (!timestamp) return '';
      const date = new Date(timestamp);
      return date.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }) + ' ' + 
             date.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' });
    },
    
    async saveNote() {
      if (!this.newNote.trim() || this.savingNote) return;
      
      this.savingNote = true;
      try {
        const response = await fetch(`/api/lia/conversations/${this.conversationId}/notes`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ content: this.newNote })
        });
        
        if (response.ok) {
          this.newNote = '';
          await this.loadConversation();
        } else {
          const error = await response.json();
          alert('Failed to save note: ' + (error.detail || 'Unknown error'));
        }
      } catch (error) {
        console.error('Failed to save note:', error);
        alert('Failed to save note');
      } finally {
        this.savingNote = false;
      }
    }
  };
}
</script>
{% endblock %}