<script setup>
import { ref } 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('timeline'), { preserveState: true });
};
</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">Línea de Tiempo Integral</h1>
        <p class="text-slate-500 mt-1">Busque un caso para visualizar su flujo de trabajo y tiempos de respuesta.</p>
      </div>

      <!-- Buscador -->
      <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 mb-8 flex gap-4">
        <div class="flex-1 relative">
          <svg class="w-5 h-5 absolute 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="Ingrese placa o número de reclamo..."
            class="w-full pl-12 pr-4 py-3 rounded-xl border border-slate-100 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 transition-all font-medium"
            @keyup.enter="submitSearch"
          />
        </div>
        <button 
          @click="submitSearch"
          class="px-8 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>
      </div>

      <!-- Resultados -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div v-for="caso in casos" :key="caso.id" class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden hover:shadow-md transition-all group">
            <div class="p-6">
                <div class="flex justify-between items-center mb-4">
                    <span class="px-2 py-0.5 bg-blue-50 text-blue-700 rounded text-[10px] font-bold uppercase">{{ caso.numero_reclamo }}</span>
                    <span class="text-[10px] text-slate-400">{{ new Date(caso.created_at).toLocaleDateString() }}</span>
                </div>
                
                <h3 class="font-bold text-slate-800 mb-1">{{ caso.cliente?.nombre }}</h3>
                <div class="flex items-center gap-2 mb-6">
                  <span class="text-xs font-mono font-bold text-slate-600">{{ caso.vehiculo?.placa }}</span>
                  <span class="text-xs text-slate-400">•</span>
                  <span class="text-xs text-slate-500">{{ caso.estado_actual.replace('_', ' ') }}</span>
                </div>

                <Link 
                    :href="route('casos.estados', caso.id)"
                    class="w-full flex items-center justify-center gap-2 py-3 bg-slate-50 text-slate-700 rounded-xl text-[10px] font-bold uppercase tracking-widest hover:bg-primary-600 hover:text-white transition-all"
                >
                    Ver Timeline
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
                    </svg>
                </Link>
            </div>
        </div>

        <div v-if="casos?.length === 0" class="col-span-full py-12 text-center text-slate-400 italic">
           No se encontraron casos para mostrar en la línea de tiempo.
        </div>
      </div>
    </div>
  </AppLayout>
</template>
