<script setup>
import { ref, computed } from 'vue';
import { Head, Link, useForm } from '@inertiajs/vue3';
import AppLayout from '@/Layouts/AppLayout.vue';

const props = defineProps({
  title: String,
  casos: Array,
  filters: Object
});

const form = useForm({
  search: props.filters?.search || '',
});

const submitSearch = () => {
    form.get(route('estados'), { preserveState: true });
};

const estadoColores = {
  pendiente_coordinacion: { bg: 'bg-slate-100', text: 'text-slate-700' },
  coordinado: { bg: 'bg-blue-100', text: 'text-blue-700' },
  mesa_compras: { bg: 'bg-amber-100', text: 'text-amber-700' },
  en_reparacion: { bg: 'bg-rose-100', text: 'text-rose-700' },
  analisis: { bg: 'bg-purple-100', text: 'text-purple-700' },
  facturacion: { bg: 'bg-cyan-100', text: 'text-cyan-700' },
  finalizado: { bg: 'bg-emerald-100', text: 'text-emerald-700' },
};
</script>

<template>
  <Head :title="title" />

  <AppLayout :title="title">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <div class="mb-8">
        <h1 class="text-2xl font-bold text-slate-900">Gestión de Estados</h1>
        <p class="text-slate-500 mt-1">Busque un caso para actualizar su estado o ver el historial de cambios.</p>
      </div>

      <!-- Search Section -->
      <div class="bg-white rounded-xl sm:rounded-2xl shadow-sm border border-slate-100 p-4 sm:p-6 mb-6 sm:mb-8">
        <form @submit.prevent="submitSearch" class="flex flex-col md:flex-row gap-3 sm:gap-4">
          <div class="flex-1 relative">
            <svg class="w-5 h-5 absolute left-3 sm:left-4 top-1/2 -translate-y-1/2 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
            <input 
              v-model="form.search"
              type="text" 
              placeholder="Buscar por placa o reclamo..."
              class="w-full pl-10 sm:pl-12 pr-4 py-2.5 sm:py-3 rounded-xl border border-slate-100 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 transition-all font-medium text-sm"
            />
          </div>
          <button 
            type="submit"
            class="w-full md:w-auto px-6 sm:px-8 py-2.5 sm:py-3 bg-primary-600 text-white rounded-xl font-bold hover:bg-primary-700 transition-all shadow-lg shadow-primary-200 uppercase text-[10px] tracking-widest"
          >
            Buscar
          </button>
        </form>
      </div>

      <!-- Results Table (Desktop) -->
      <div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden hidden md:block">
        <div class="px-6 py-4 bg-slate-50 border-b border-slate-100 flex justify-between items-center">
           <h3 class="text-sm font-bold text-slate-800">Casos Encontrados</h3>
           <span class="px-2 py-0.5 bg-primary-100 text-primary-700 rounded text-[10px] font-bold">{{ casos?.length || 0 }} resultados</span>
        </div>

        <div class="overflow-x-auto">
          <table class="w-full text-left text-sm">
            <thead>
              <tr class="bg-white border-b border-slate-50">
                <th class="px-6 py-4 font-semibold text-slate-700">Reclamo / SIAS</th>
                <th class="px-6 py-4 font-semibold text-slate-700">Vehículo / Placa</th>
                <th class="px-6 py-4 font-semibold text-slate-700">Estado Actual</th>
                <th class="px-6 py-4 font-semibold text-slate-700">Última Actualización</th>
                <th class="px-6 py-4 font-semibold text-slate-700 text-right">Acción</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-slate-50" v-if="casos?.length > 0">
              <tr v-for="caso in casos" :key="caso.id" class="hover:bg-slate-50 transition-colors">
                <td class="px-6 py-4">
                  <div class="font-bold text-slate-800">{{ caso.numero_reclamo }}</div>
                  <div class="text-[10px] text-slate-500">{{ caso.numero_caso_sias || 'S/N' }}</div>
                </td>
                <td class="px-6 py-4">
                  <div class="font-medium text-slate-800">{{ caso.vehiculo?.marca }} {{ caso.vehiculo?.modelo }}</div>
                  <div class="text-[10px] bg-slate-100 text-slate-600 px-1.5 py-0.5 rounded font-bold inline-block">{{ caso.vehiculo?.placa }}</div>
                </td>
                <td class="px-6 py-4">
                  <span 
                    :class="[
                       'px-2 py-1 rounded text-[10px] font-bold uppercase',
                       estadoColores[caso.estado_actual]?.bg || 'bg-slate-100',
                       estadoColores[caso.estado_actual]?.text || 'text-slate-700'
                    ]"
                  >
                    {{ caso.estado_actual.replace('_', ' ') }}
                  </span>
                </td>
                <td class="px-6 py-4 text-xs text-slate-500">
                   {{ new Date(caso.updated_at).toLocaleString() }}
                </td>
                <td class="px-6 py-4 text-right">
                   <Link 
                    :href="route('casos.estados', caso.id)"
                    class="px-4 py-2 bg-primary-50 text-primary-700 rounded-lg text-[10px] font-bold uppercase tracking-widest hover:bg-primary-100 transition-all border border-primary-100"
                   >
                      Gestionar Estado
                   </Link>
                </td>
              </tr>
            </tbody>
            <tbody v-else>
               <tr>
                  <td colspan="5" class="p-12 text-center text-slate-400 italic font-medium">
                     No se han encontrado casos registrados.
                  </td>
               </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- Results Cards (Mobile) -->
      <div class="md:hidden space-y-3">
        <div class="flex items-center justify-between px-1">
          <h3 class="text-sm font-bold text-slate-800">Casos Encontrados</h3>
          <span class="px-2 py-0.5 bg-primary-100 text-primary-700 rounded text-[10px] font-bold">{{ casos?.length || 0 }} resultados</span>
        </div>

        <template v-if="casos?.length > 0">
          <div v-for="caso in casos" :key="caso.id" class="bg-white rounded-xl border border-slate-100 shadow-sm p-4 space-y-3">
            <div class="flex items-start justify-between gap-2">
              <div class="min-w-0 flex-1">
                <div class="font-bold text-slate-800 text-sm truncate">{{ caso.numero_reclamo }}</div>
                <div class="text-[10px] text-slate-500 truncate">{{ caso.numero_caso_sias || 'S/N' }}</div>
              </div>
              <span 
                :class="[
                   'px-2 py-1 rounded text-[10px] font-bold uppercase whitespace-nowrap',
                   estadoColores[caso.estado_actual]?.bg || 'bg-slate-100',
                   estadoColores[caso.estado_actual]?.text || 'text-slate-700'
                ]"
              >
                {{ caso.estado_actual.replace('_', ' ') }}
              </span>
            </div>

            <div class="flex items-center gap-2">
              <span class="text-[10px] bg-slate-100 text-slate-600 px-1.5 py-0.5 rounded font-bold">{{ caso.vehiculo?.placa }}</span>
              <span class="text-xs text-slate-600 truncate">{{ caso.vehiculo?.marca }} {{ caso.vehiculo?.modelo }}</span>
            </div>

            <div class="flex items-center justify-between pt-2 border-t border-slate-50">
              <span class="text-[10px] text-slate-400">{{ new Date(caso.updated_at).toLocaleString() }}</span>
              <Link 
                :href="route('casos.estados', caso.id)"
                class="px-3 py-1.5 bg-primary-50 text-primary-700 rounded-lg text-[10px] font-bold uppercase tracking-widest hover:bg-primary-100 transition-all border border-primary-100"
              >
                Gestionar
              </Link>
            </div>
          </div>
        </template>

        <div v-else class="bg-white rounded-xl border border-slate-100 shadow-sm p-8 text-center">
          <p class="text-slate-400 italic font-medium text-sm">No se han encontrado casos registrados.</p>
        </div>
      </div>
    </div>
  </AppLayout>
</template>
