<template>
  <div class="max-w-7xl mx-auto">
    <!-- Header skeleton -->
    <div class="mb-6 mt-6">
      <div class="h-7 md:h-9 w-56 bg-gray-200 rounded animate-pulse"></div>
      <div class="h-4 w-80 bg-gray-100 rounded mt-3 animate-pulse"></div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- Conversation thread skeleton -->
      <div class="lg:col-span-2">
        <div class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
          <!-- Header -->
          <div class="px-4 py-3 border-b border-gray-200 flex items-center justify-between">
            <div class="h-4 w-60 bg-gray-100 rounded animate-pulse"></div>
            <div class="flex items-center gap-2">
              <div class="h-5 w-16 bg-gray-100 rounded-full animate-pulse"></div>
              <div class="h-8 w-8 bg-gray-100 rounded animate-pulse"></div>
            </div>
          </div>

          <!-- Messages -->
          <div class="p-4 space-y-4" style="max-height: 60vh;">
            <div v-for="i in 6" :key="i" class="flex items-end gap-2 sm:gap-3" :class="i % 2 === 0 ? 'justify-end' : 'justify-start'">
              <div :class="['w-8 h-8 rounded-full bg-gray-200 animate-pulse', i % 2 === 0 ? 'order-2' : '']"></div>
              <div :class="['max-w-[75%] flex-1', i % 2 !== 0 ? '' : 'order-1']">
                <div class="h-12 sm:h-14 w-full bg-gray-100 rounded-2xl animate-pulse"></div>
                <div class="h-3 w-16 bg-gray-200 rounded mt-1 animate-pulse" :class="i % 2 !== 0 ? 'ml-0' : 'ml-auto'"></div>
              </div>
            </div>
          </div>

          <!-- Composer skeleton -->
          <div class="px-4 py-3 border-t border-gray-200">
            <div class="flex items-end gap-3">
              <div class="flex-1">
                <div class="border border-gray-300 rounded-lg overflow-hidden">
                  <div class="px-3 pt-2">
                    <div class="h-10 bg-gray-100 rounded animate-pulse"></div>
                  </div>
                  <div class="px-2 py-1.5 flex items-center justify-between border-t border-gray-200 bg-gray-50">
                    <div class="flex items-center gap-2">
                      <div class="h-4 w-32 bg-gray-100 rounded animate-pulse"></div>
                    </div>
                    <div class="flex items-center">
                      <div class="h-9 w-20 bg-gray-100 rounded animate-pulse"></div>
                    </div>
                  </div>
                </div>
                <div class="h-3 w-72 bg-gray-100 rounded mt-2 animate-pulse"></div>
              </div>
            </div>
          </div>

          <!-- Footer -->
          <div class="px-4 py-3 border-t border-gray-200 flex items-center justify-end">
            <div class="h-9 w-28 bg-gray-100 rounded animate-pulse"></div>
          </div>
        </div>
      </div>

      <!-- Sidebar skeleton -->
      <aside class="lg:col-span-1">
        <div class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
          <div class="px-4 py-3 border-b border-gray-200">
            <div class="h-5 w-40 bg-gray-200 rounded animate-pulse"></div>
          </div>
          <div class="p-4 space-y-4">
            <!-- Customer info -->
            <div class="flex items-center gap-3">
              <div class="w-10 h-10 rounded-full bg-gray-200 animate-pulse"></div>
              <div class="space-y-2">
                <div class="h-3 w-32 bg-gray-200 rounded animate-pulse"></div>
                <div class="h-3 w-40 bg-gray-100 rounded animate-pulse"></div>
              </div>
            </div>

            <!-- First message -->
            <div>
              <div class="h-3 w-24 bg-gray-200 rounded mb-2 animate-pulse"></div>
              <div class="h-4 w-full bg-gray-100 rounded animate-pulse"></div>
            </div>

            <!-- Meta info -->
            <div>
              <div class="h-3 w-16 bg-gray-200 rounded mb-2 animate-pulse"></div>
              <div class="space-y-2">
                <div class="h-3 w-24 bg-gray-100 rounded animate-pulse"></div>
                <div class="h-3 w-28 bg-gray-100 rounded animate-pulse"></div>
              </div>
            </div>
          </div>
        </div>
      </aside>
    </div>
  </div>
</template>

<script setup>
// Pure presentational skeleton component for conversation details page
</script>
