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

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

const search = ref(props.filters?.search || '');

const performSearch = () => {
    router.get(route('reparacion'), { search: search.value }, { 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">Seguimiento Reparación</h1>
        <p class="text-slate-500 mt-1">Gestione el ingreso a taller, las fases de reparación y la generación de órdenes de salida.</p>
      </div>

      <!-- Buscador -->
      <div class="bg-white rounded-3xl shadow-[0_4px_20px_rgb(0,0,0,0.02)] border border-slate-100 p-6 mb-8 flex flex-col md:flex-row gap-4 items-stretch md:items-start transition-all duration-300">
        <div class="flex-1 relative">
          <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
            <svg class="h-5 w-5 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>
          </div>
          <input 
            v-model="search" 
            type="text" 
            class="block w-full pl-11 pr-4 py-3.5 border border-slate-200 rounded-2xl leading-5 bg-slate-50 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all text-sm font-medium hover:border-slate-300 h-12" 
            placeholder="Ingrese placa o número de reclamo..."
            @keyup.enter="performSearch"
          >
        </div>
        <button 
            @click="performSearch"
            class="w-full md:w-auto px-8 h-12 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-2xl font-bold hover:from-blue-700 hover:to-blue-800 transition-all shadow-md shadow-blue-600/20 active:scale-[0.98] uppercase text-xs tracking-wider flex items-center justify-center"
        >
            Buscar Caso
        </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-3xl shadow-[0_4px_20px_rgb(0,0,0,0.02)] border border-slate-100 overflow-hidden hover:shadow-[0_8px_30px_rgb(0,0,0,0.06)] hover:border-slate-200 transition-all duration-300 group">
            <div class="p-6">
                <!-- Severity Badge -->
                <div class="flex justify-between items-center mb-4">
                    <div 
                      class="px-2.5 py-1 rounded-lg text-[9px] font-extrabold uppercase tracking-wider border flex items-center gap-1.5 shadow-sm"
                      :class="{
                        'bg-rose-50 text-rose-700 border-rose-200': caso.seguimiento_reparacion?.nivel_dano?.toLowerCase() === 'alta',
                        'bg-amber-50 text-amber-700 border-amber-200': caso.seguimiento_reparacion?.nivel_dano?.toLowerCase() === 'media',
                        'bg-emerald-50 text-emerald-700 border-emerald-200': caso.seguimiento_reparacion?.nivel_dano?.toLowerCase() === 'baja',
                        'bg-slate-50 text-slate-500 border-slate-200': !caso.seguimiento_reparacion?.nivel_dano
                      }"
                    >
                        <span class="w-1.5 h-1.5 rounded-full" 
                              :class="{
                                'bg-rose-500 animate-pulse': caso.seguimiento_reparacion?.nivel_dano?.toLowerCase() === 'alta',
                                'bg-amber-500': caso.seguimiento_reparacion?.nivel_dano?.toLowerCase() === 'media',
                                'bg-emerald-500': caso.seguimiento_reparacion?.nivel_dano?.toLowerCase() === 'baja',
                                'bg-slate-400': !caso.seguimiento_reparacion?.nivel_dano
                              }"></span>
                        Prioridad: {{ caso.seguimiento_reparacion?.nivel_dano || 'S/N' }}
                    </div>
                </div>
                
                <h3 class="font-extrabold text-slate-800 text-base mb-1 group-hover:text-blue-600 transition-colors tracking-tight truncate">{{ caso.cliente?.nombre || 'Sin Cliente' }}</h3>
                <p class="text-xs text-slate-400 font-medium mb-4">Reclamo: <span class="text-slate-600 font-bold">{{ caso.numero_reclamo }}</span></p>

                <div class="flex items-center gap-3 bg-slate-50 p-3 rounded-2xl border border-slate-100 group-hover:border-slate-200 transition-colors mb-6">
                    <div class="bg-slate-800 text-white text-[10px] px-2.5 py-1.5 rounded-lg font-bold font-mono leading-none shadow-sm whitespace-nowrap">
                        {{ caso.vehiculo?.placa || 'S/N' }}
                    </div>
                    <div class="text-xs min-w-0 flex-1">
                        <span class="font-bold text-slate-700 block truncate">{{ caso.taller?.razon_social || 'Particular' }}</span>
                        <span class="text-slate-400 text-[10px] block truncate mt-0.5">Ejecutivo: {{ caso.taller_ejecutivo || 'N/A' }}</span>
                    </div>
                </div>

                <div class="mb-6">
                    <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-2 flex justify-between">
                        <span>Estado de Reparación</span>
                        <span class="text-slate-600 font-extrabold">{{ caso.seguimiento_reparacion?.vehiculo_ingresado ? '40%' : '5%' }}</span>
                    </div>
                    <div class="w-full bg-slate-100 h-1.5 rounded-full overflow-hidden">
                        <div class="bg-blue-600 h-full rounded-full transition-all duration-500" :style="{ width: caso.seguimiento_reparacion?.vehiculo_ingresado ? '40%' : '5%' }"></div>
                    </div>
                </div>

                <Link 
                    :href="route('casos.reparacion', caso.id)"
                    class="w-full flex items-center justify-center gap-2 py-3 bg-slate-50 text-slate-600 rounded-xl text-[10px] font-bold uppercase tracking-widest group-hover:bg-gradient-to-r group-hover:from-blue-600 group-hover:to-blue-700 group-hover:text-white group-hover:shadow-md group-hover:shadow-blue-600/10 transition-all duration-300"
                >
                    Seguimiento
                    <svg class="w-3.5 h-3.5 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                </Link>
            </div>
        </div>

        <div v-if="casos.length === 0" class="col-span-full py-20 text-center">
            <div class="w-20 h-20 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-4">
               <svg class="w-10 h-10 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
               </svg>
            </div>
            <p class="text-slate-400">No se encontraron casos en seguimiento de reparación.</p>
        </div>
      </div>
    </div>
  </AppLayout>
</template>
