   <%- header %>
   <!-- pre-rendered navbar inserted -->
   <main class="dashboard-main">
     <%- navbar %>
     <!-- pre-rendered navbar inserted -->
<link rel="stylesheet" href="/css/lib/animate.min.css">

<style>
  .chat-container {
    background-color: #f8fafc;
    border-radius: 12px;
    height: 65vh;
    max-height: 800px;
    min-height: 400px;
    overflow-y: auto;
    scroll-behavior: smooth;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
  }

  .messages-wrapper {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
  }

  .message {
    max-width: 80%;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    opacity: 0;
    animation: fadeIn 0.3s ease-out forwards;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .message.visible {
    opacity: 1;
  }

  .user-message {
    margin-left: auto;
  }

  .user-message .message-content {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border-radius: 18px 18px 0 18px;
    padding: 12px 16px;
    box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3);
  }

  .other-message {
    margin-right: auto;
  }

  .other-message .message-content {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px 18px 18px 0;
    padding: 12px 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }

  .message-header {
    color: #4b5563;
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
  }

  .message-header .badge {
    font-size: 0.6rem;
    padding: 3px 8px;
    margin-left: 6px;
    border-radius: 9999px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  .user-message .message-header .badge {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
  }

  .other-message .message-header .badge {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
  }

  .message-time {
    font-size: 0.7rem;
    color: #9ca3af;
    margin-top: 4px;
    text-align: right;
  }

  .no-messages {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #6b7280;
    text-align: center;
    padding: 2rem;
  }

  .no-messages-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #d1d5db;
  }

  .trip-info-card {
    background: linear-gradient(to bottom, #ffffff, #f9fafb);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid #e5e7eb;
  }

  .trip-info-grid {
    display: grid;
    /* grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); */
    gap: 1.25rem;
  }

  .trip-info-item {
    background-color: white;
    padding: 0.875rem;
    border-radius: 8px;
    border: 1px solid #f3f4f6;
    transition: all 0.2s ease;
  }

  .trip-info-item:hover {
    border-color: #3b82f6;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.1);
    transform: translateY(-1px);
  }

  .trip-info-label {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
  }

  .trip-info-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2937;
    word-break: break-word;
  }

  .chat-input-container {
    border-top: 1px solid #e5e7eb;
    padding: 15px;
    background-color: white;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }

  .typing-indicator {
    font-size: 0.8rem;
    color: #6b7280;
    height: 20px;
    margin-bottom: 5px;
    padding-left: 10px;
    font-style: italic;
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
    .chat-container {
      height: 60vh;
    }
    
    .trip-info-grid {
      grid-template-columns: 1fr;
    }
    
    .message {
      max-width: 90%;
    }
  }

  /* Scrollbar styling */
  .messages-wrapper::-webkit-scrollbar {
    width: 6px;
  }

  .messages-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
  }

  .messages-wrapper::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
  }

  .messages-wrapper::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
  }

  /* Loading animation */
  .loading-dots {
    display: inline-flex;
    align-items: center;
  }

  .loading-dots span {
    width: 8px;
    height: 8px;
    margin: 0 2px;
    background-color: #9ca3af;
    border-radius: 50%;
    display: inline-block;
    animation: bounce 1.4s infinite ease-in-out both;
  }

  .loading-dots span:nth-child(1) {
    animation-delay: -0.32s;
  }

  .loading-dots span:nth-child(2) {
    animation-delay: -0.16s;
  }

  @keyframes bounce {
    0%, 80%, 100% { 
      transform: scale(0);
    }
    40% { 
      transform: scale(1);
    }
  }
</style>

 

  <div class="container flex-1 pt-20 w-full my-4">
    <%- include('../../partials/utils/title.ejs', {title: "Trip Chat"}) %>
    
    <% 
    const breadcrumbs = [
      { label: "Dashboard", href: "/admin/dashboard", icon: "bi bi-house-door" },
      { label: "Trips", href: "/admin/trips" },
      { label: "Trip Chat" }
    ];
    %>
    <%- include('../../partials/utils/breadcrumb', { breadcrumbs }) %>

    <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
      <div class="trip-info-card">
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 pb-4 border-b border-gray-200">
          <div>
            <h2 class="text-2xl font-bold text-gray-800 mb-1">Trip Conversation</h2>
            <p class="text-sm text-gray-500">View messages between passenger and driver</p>
          </div>
<% if (trip && trip.trip_date) { %>
  <div class="text-sm bg-gradient-to-r from-blue-50 to-blue-100 text-blue-700 px-4 py-2 rounded-lg mt-2 sm:mt-0 font-medium shadow-sm" id="tripDateDisplay" data-date="<%= new Date(trip.trip_date).toISOString() %>">
    <i class="bi bi-calendar-event mr-1"></i>
    <span id="tripDateFormatted"></span>
  </div>
<% } else { %>
  <div class="text-sm bg-gray-100 text-gray-500 px-4 py-2 rounded-lg mt-2 sm:mt-0">
    <i class="bi bi-calendar-x mr-1"></i>
    Date N/A
  </div>
<% } %>
        </div>
        
        <div class="trip-info-grid">
          <div class="trip-info-item">
            <div class="trip-info-label"><i class="bi bi-hash text-blue-500 mr-1"></i>Trip ID</div>
            <div class="trip-info-value"><%= trip?.trip_id || 'N/A' %></div>
          </div>
          <div class="trip-info-item">
            <div class="trip-info-label"><i class="bi bi-person-fill text-green-500 mr-1"></i>Passenger</div>
            <div class="trip-info-value"><%= trip?.user?.u_name || 'N/A' %></div>
          </div>
          <div class="trip-info-item">
            <div class="trip-info-label"><i class="bi bi-person-badge-fill text-purple-500 mr-1"></i>Driver</div>
            <div class="trip-info-value"><%= trip?.driver?.d_name || 'N/A' %></div>
          </div>
          <div class="trip-info-item">
            <div class="trip-info-label"><i class="bi bi-geo-alt-fill text-red-500 mr-1"></i>Pickup Location</div>
            <div class="trip-info-value"><%= trip?.trip_from_loc || trip?.trip_actual_from_loc || 'N/A' %></div>
          </div>
          <div class="trip-info-item">
            <div class="trip-info-label"><i class="bi bi-flag-fill text-orange-500 mr-1"></i>Drop Location</div>
            <div class="trip-info-value"><%= trip?.trip_to_loc || trip?.trip_actual_to_loc || 'N/A' %></div>
          </div>
          <div class="trip-info-item">
            <div class="trip-info-label"><i class="bi bi-cash-coin text-yellow-600 mr-1"></i>Fare</div>
            <div class="trip-info-value font-semibold text-green-600"><%= city_cur || '' %><%= trip?.trip_pay_amount || '0.00' %></div>
          </div>
        </div>
      </div>

      <div class="chat-container">
        <div class="messages-wrapper" id="chatMessages">
          <!-- Messages will be loaded here -->
          <div class="flex justify-center items-center h-full">
            <div class="text-center animate-pulse">
              <div class="loading-dots inline-block mb-2">
                <span></span>
                <span></span>
                <span></span>
              </div>
              <p class="text-gray-500 text-sm">Loading messages...</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

<%- footer %>

<script>
document.addEventListener('DOMContentLoaded', async function() {
  const tripId = document.getElementById('tripId')?.textContent || '<%= trip.trip_id %>';
  const chatMessages = document.getElementById('chatMessages');
  
  // Load initial messages
  await loadMessages(tripId);
  
  const tripDateDisplay = document.getElementById('tripDateDisplay');
  if (tripDateDisplay && tripDateDisplay.dataset.date) {
    const d = new Date(tripDateDisplay.dataset.date);
    document.getElementById('tripDateFormatted').textContent = d.toLocaleString([], { day: '2-digit', month: '2-digit', year: '2-digit', hour: '2-digit', minute: '2-digit' });
  }
  
  // Set up realtime listener for new messages
  setupRealtimeListener(tripId);
  
  // Scroll to bottom when messages load
  setTimeout(() => {
    chatMessages.scrollTop = chatMessages.scrollHeight;
  }, 100);
});

async function loadMessages(tripId) {
  try {
    const response = await fetch(`/admin/chats?tripId=${tripId}`);

    // Check if response is JSON
    const contentType = response.headers.get("content-type");
    if (!contentType || !contentType.includes("application/json")) {
      throw new Error("Invalid response type, expected JSON.");
    }

    const data = await response.json();
    
    if (!data || !data.chats || Object.keys(data.chats).length === 0) {
      displayNoMessages();
      return;
    }

    displayMessages(data.chats);

  } catch (error) {
    console.error("Error loading messages:", error);
    displayErrorMessage();
  }
}

function displayMessages(chats) {
  const chatMessages = document.getElementById('chatMessages');
  
  if (!chats || Object.keys(chats).length === 0) {
    displayNoMessages();
    return;
  }

  // Get passenger and driver names from trip data
  const passengerName = '<%= trip?.user?.u_name || "Customer" %>';
  const driverName = '<%= trip?.driver?.d_name || "Driver" %>';

  // Convert to array and sort by timestamp
  const messages = Object.values(chats).sort((a, b) => a.timeStamp - b.timeStamp);

  chatMessages.innerHTML = messages.map(msg => `
    <div class="message ${msg.isUser ? 'user-message' : 'other-message'}">
      <div class="message-header">
        ${msg.isUser ? passengerName : driverName}
        ${msg.isUser ? '<span class="badge">Customer</span>' : '<span class="badge">Driver</span>'}
      </div>
      <div class="message-content">
        ${msg.text || 'No message content'}
        <div class="message-time">
          ${msg.timeStamp ? formatTime(msg.timeStamp) : 'N/A'}
        </div>
      </div>
    </div>
  `).join('');

  // Scroll to bottom
  chatMessages.scrollTop = chatMessages.scrollHeight;
  
  // Animate messages sequentially
  const messageElements = chatMessages.querySelectorAll('.message');
  messageElements.forEach((el, i) => {
    setTimeout(() => {
      el.classList.add('visible');
    }, i * 100);
  });
}

function displayNoMessages() {
  const chatMessages = document.getElementById('chatMessages');
  chatMessages.innerHTML = `
    <div class="no-messages animate__animated animate__fadeIn">
      <div class="no-messages-icon">
        <i class="bi bi-chat-left-text"></i>
      </div>
      <h3 class="text-lg font-medium mb-2">No messages yet</h3>
      <p class="text-gray-500 max-w-md">This conversation hasn't started yet.</p>
    </div>
  `;
}

function displayErrorMessage() {
  const chatMessages = document.getElementById('chatMessages');
  chatMessages.innerHTML = `
    <div class="no-messages animate__animated animate__fadeIn">
      <div class="no-messages-icon text-red-500">
        <i class="bi bi-exclamation-circle-fill"></i>
      </div>
      <h3 class="text-lg font-medium mb-2">Couldn't load messages</h3>
      <p class="text-gray-500 max-w-md mb-4">There was an error loading the chat. Please try again.</p>
      <button onclick="window.location.reload()" class="text-sm px-4 py-2 bg-blue-50 text-blue-600 rounded-md hover:bg-blue-100 transition-colors">
        <i class="bi bi-arrow-repeat mr-1"></i> Reload
      </button>
    </div>
  `;
}

function formatTime(timestamp) {
  const date = new Date(Number(timestamp));
  return date.toLocaleString([], { day: '2-digit', month: '2-digit', year: '2-digit', hour: '2-digit', minute: '2-digit' });
}

function setupRealtimeListener(tripId) {
  // For realtime updates, you would typically use Firebase client SDK
  // This is a simplified version using polling
  setInterval(async () => {
    await loadMessages(tripId);
  }, 5000);
}
</script>