<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">
        <h1 class="text-lg sm:text-2xl font-bold text-gray-900">Portal Aseguradora</h1>
        <div class="flex items-center gap-3 sm:gap-4">
          <Link :href="route('portal.casos')" class="text-sm sm:text-base text-blue-600 hover:underline">Mis Casos</Link>
          <form method="POST" :action="route('portal.logout')">
            <button type="submit" class="text-sm sm:text-base text-gray-600 hover:text-gray-900">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-2 md:grid-cols-4 gap-3 sm:gap-6 mb-6 sm:mb-8">
        <div class="bg-white overflow-hidden shadow rounded-lg p-4 sm:p-5">
          <div class="text-xs sm:text-sm font-medium text-gray-500">Total Casos</div>
          <div class="text-xl sm:text-3xl font-bold text-gray-900">{{ stats.total }}</div>
        </div>
        <div class="bg-white overflow-hidden shadow rounded-lg p-4 sm:p-5">
          <div class="text-xs sm:text-sm font-medium text-gray-500">Pendientes</div>
          <div class="text-xl sm:text-3xl font-bold text-yellow-600">{{ stats.pendientes }}</div>
        </div>
        <div class="bg-white overflow-hidden shadow rounded-lg p-4 sm:p-5">
          <div class="text-xs sm:text-sm font-medium text-gray-500">En Proceso</div>
          <div class="text-xl sm:text-3xl font-bold text-blue-600">{{ stats.en_proceso }}</div>
        </div>
        <div class="bg-white overflow-hidden shadow rounded-lg p-4 sm:p-5">
          <div class="text-xs sm:text-sm font-medium text-gray-500">Finalizados</div>
          <div class="text-xl sm:text-3xl font-bold text-green-600">{{ stats.finalizados }}</div>
        </div>
      </div>

      <div class="bg-white shadow rounded-lg">
        <div class="px-4 py-5 sm:px-6 flex justify-between items-center">
          <h2 class="text-lg font-medium text-gray-900">Casos Recientes</h2>
          <Link :href="route('portal.casos')" class="text-sm text-blue-600 hover:underline">
            Ver todos →
          </Link>
        </div>
        <div class="border-t border-gray-200 overflow-x-auto">
          <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
              <tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Caso</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Vehículo</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Estado</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Última Actualización</th>
                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Acciones</th>
              </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
              <tr v-for="caso in casosRecientes" :key="caso.id">
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                  {{ caso.numero_reclamo }}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                  {{ caso.vehiculo?.placa || 'N/A' }}
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <span :class="getEstadoClass(caso.estado_actual)" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full">
                    {{ caso.estado_actual }}
                  </span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                  {{ formatDate(caso.updated_at) }}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                  <Link :href="route('portal.casos.ver', caso.id)" class="text-blue-600 hover:text-blue-900">
                    Ver
                  </Link>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </main>
  </div>
</template>

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

defineProps({
  title: String,
  stats: Object,
  casosRecientes: Array
})

const getEstadoClass = (estado) => {
  const classes = {
    'finalizado': 'bg-green-100 text-green-800',
    'en_reparacion': 'bg-blue-100 text-blue-800',
    'mesa_compras': 'bg-purple-100 text-purple-800',
    'default': 'bg-gray-100 text-gray-800'
  }
  return classes[estado] || classes.default
}

const formatDate = (date) => {
  return new Date(date).toLocaleDateString('es-EC', {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  })
}
</script>
