<template>
  <div class="min-h-screen bg-gray-50">
    <header class="bg-white shadow">
      <div class="max-w-7xl mx-auto py-4 sm:py-6 px-4 sm:px-6 lg:px-8 flex justify-between items-center">
        <div class="min-w-0 flex-1 mr-4">
          <h1 class="text-lg sm:text-2xl font-bold text-gray-900 truncate">Caso {{ caso.numero_reclamo }}</h1>
          <p class="text-xs sm:text-sm text-gray-600">Estado: {{ estados[caso.estado_actual] || caso.estado_actual }}</p>
        </div>
        <div class="flex items-center gap-3 sm:gap-4 flex-shrink-0">
          <Link :href="route('portal.casos')" class="text-sm sm:text-base text-blue-600 hover:underline whitespace-nowrap">← Volver</Link>
          <form method="POST" :action="route('portal.logout')">
            <button type="submit" class="text-sm sm:text-base text-gray-600 hover:text-gray-900 whitespace-nowrap">Cerrar Sesión</button>
          </form>
        </div>
      </div>
    </header>

    <main class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
        <div class="lg:col-span-2 space-y-4 sm:space-y-6">
          <div class="bg-white shadow rounded-lg p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-medium text-gray-900 mb-3 sm:mb-4">Datos del Vehículo</h2>
            <div class="grid grid-cols-2 gap-3 sm:gap-4">
              <div>
                <span class="text-sm text-gray-500">Placa:</span>
                <p class="font-medium">{{ caso.vehiculo?.placa || 'N/A' }}</p>
              </div>
              <div>
                <span class="text-sm text-gray-500">Marca/Modelo:</span>
                <p class="font-medium">{{ caso.vehiculo?.marca }} {{ caso.vehiculo?.modelo }}</p>
              </div>
              <div>
                <span class="text-sm text-gray-500">Año:</span>
                <p class="font-medium">{{ caso.vehiculo?.anio || 'N/A' }}</p>
              </div>
              <div>
                <span class="text-sm text-gray-500">Color:</span>
                <p class="font-medium">{{ caso.vehiculo?.color || 'N/A' }}</p>
              </div>
            </div>
          </div>

          <div class="bg-white shadow rounded-lg p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-medium text-gray-900 mb-3 sm:mb-4">Datos del Cliente</h2>
            <div class="grid grid-cols-2 gap-3 sm:gap-4">
              <div>
                <span class="text-sm text-gray-500">Nombre:</span>
                <p class="font-medium">{{ caso.cliente?.nombre || 'N/A' }}</p>
              </div>
              <div>
                <span class="text-sm text-gray-500">Email:</span>
                <p class="font-medium">{{ caso.cliente?.email || 'N/A' }}</p>
              </div>
              <div>
                <span class="text-sm text-gray-500">Teléfono:</span>
                <p class="font-medium">{{ caso.cliente?.telefono || 'N/A' }}</p>
              </div>
              <div>
                <span class="text-sm text-gray-500">Identificación:</span>
                <p class="font-medium">{{ caso.cliente?.ruc || 'N/A' }}</p>
              </div>
            </div>
          </div>

          <div class="bg-white shadow rounded-lg p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-medium text-gray-900 mb-3 sm:mb-4">Datos del Siniestro</h2>
            <div class="grid grid-cols-2 gap-3 sm:gap-4">
              <div>
                <span class="text-sm text-gray-500">Fecha Siniestro:</span>
                <p class="font-medium">{{ caso.fecha_siniestro }}</p>
              </div>
              <div>
                <span class="text-sm text-gray-500">Cobertura:</span>
                <p class="font-medium">{{ caso.cobertura }}</p>
              </div>
              <div>
                <span class="text-sm text-gray-500">Tipo Contrato:</span>
                <p class="font-medium">{{ caso.tipo_contrato }}</p>
              </div>
              <div>
                <span class="text-sm text-gray-500">Número SIAS:</span>
                <p class="font-medium">{{ caso.numero_caso_sias || 'N/A' }}</p>
              </div>
            </div>
          </div>
        </div>

        <div class="space-y-4 sm:space-y-6">
          <div class="bg-white shadow rounded-lg p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-medium text-gray-900 mb-3 sm:mb-4">Acciones</h2>
            <div class="space-y-2 sm:space-y-3">
              <Link
                :href="route('portal.casos.timeline', caso.id)"
                class="block w-full text-center px-4 py-2 sm:py-2.5 bg-green-600 text-white text-sm sm:text-base rounded hover:bg-green-700"
              >
                Ver Línea de Tiempo
              </Link>
              <Link
                :href="route('portal.casos.fotos', caso.id)"
                class="block w-full text-center px-4 py-2 sm:py-2.5 bg-blue-600 text-white text-sm sm:text-base rounded hover:bg-blue-700"
              >
                Ver Fotos
              </Link>
              <Link
                :href="route('portal.casos.informe', caso.id)"
                class="block w-full text-center px-4 py-2 sm:py-2.5 bg-purple-600 text-white text-sm sm:text-base rounded hover:bg-purple-700"
              >
                Ver Informe
              </Link>
            </div>
          </div>

          <div class="bg-white shadow rounded-lg p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-medium text-gray-900 mb-3 sm:mb-4">Ajustador Asignado</h2>
            <div v-if="caso.ajustador">
              <p class="font-medium">{{ caso.ajustador.nombre }}</p>
              <p class="text-sm text-gray-500">{{ caso.ajustador.ruc }}</p>
            </div>
            <div v-else>
              <p class="text-gray-500">No asignado</p>
            </div>
          </div>

          <div class="bg-white shadow rounded-lg p-4 sm:p-6">
            <h2 class="text-base sm:text-lg font-medium text-gray-900 mb-3 sm:mb-4">Taller</h2>
            <div v-if="caso.taller">
              <p class="font-medium">{{ caso.taller.razon_social }}</p>
              <p class="text-sm text-gray-500">{{ caso.taller.direccion }}</p>
            </div>
            <div v-else>
              <p class="text-gray-500">No asignado</p>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { Link } from '@inertiajs/vue3'

defineProps({
  title: String,
  caso: Object,
  estados: Object
})
</script>
