<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">Mis Casos</h1>
        <div class="flex items-center gap-3 sm:gap-4">
          <Link :href="route('portal.dashboard')" class="text-sm sm:text-base text-blue-600 hover:underline">Dashboard</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="bg-white shadow rounded-lg p-4 mb-6">
        <form @submit.prevent="buscar" class="flex flex-col sm:flex-row gap-3 sm:gap-4">
          <input
            v-model="filtros.search"
            type="text"
            placeholder="Buscar por placa o número de caso..."
            class="flex-1 border rounded px-4 py-2"
          />
          <select v-model="filtros.estado" class="border rounded px-4 py-2">
            <option value="">Todos los estados</option>
            <option v-for="(label, key) in estados" :key="key" :value="key">{{ label }}</option>
          </select>
          <PrimaryButton type="submit">Buscar</PrimaryButton>
        </form>
      </div>

      <div class="bg-white shadow rounded-lg">
        <div class="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">Cliente</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">Fecha Siniestro</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 casos.data" :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 text-sm text-gray-500">
                  {{ caso.cliente?.nombre || '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">
                    {{ estados[caso.estado_actual] || caso.estado_actual }}
                  </span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                  {{ caso.fecha_siniestro }}
                </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 mr-3">
                    Ver
                  </Link>
                  <Link :href="route('portal.casos.timeline', caso.id)" class="text-green-600 hover:text-green-900">
                    Timeline
                  </Link>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        
        <div class="px-6 py-4 border-t border-gray-200">
          <Pagination :links="casos.links" />
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { Link } from '@inertiajs/vue3'
import PrimaryButton from '@/Components/PrimaryButton.vue'
import Pagination from '@/Components/Pagination.vue'
import { router } from '@inertiajs/vue3'

defineProps({
  title: String,
  casos: Object,
  estados: Object,
  filtros: Object
})

const buscar = () => {
  router.get(route('portal.casos'), filtros.value || {})
}

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',
    'rechazado': 'bg-red-100 text-red-800',
    'default': 'bg-gray-100 text-gray-800'
  }
  return classes[estado] || classes.default
}
</script>
