<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 allStates = ref(props.filters.all_states || false);

const performSearch = () => {
    router.get(route('mesa-compras'), { 
        search: search.value,
        all_states: allStates.value ? 1 : 0
    }, { 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 Mesa de Compras</h1>
        <p class="text-slate-500 mt-1">Busque casos por placa o número de reclamo para gestionar proformas y repuestos.</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">
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                <font-awesome-icon :icon="['fas', 'search']" class="h-5 w-5 text-slate-400" />
            </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>
          <div class="mt-3 flex items-center gap-2">
            <label class="relative inline-flex items-center cursor-pointer select-none">
              <input type="checkbox" v-model="allStates" @change="performSearch" class="sr-only peer">
              <div class="relative w-9 h-5 bg-slate-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"></div>
              <span class="ml-3 text-xs font-bold text-slate-500 uppercase tracking-widest">Incluir Casos Finalizados / Otros Estados</span>
            </label>
          </div>
        </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">
                <div class="flex justify-between items-center mb-4">
                    <div class="px-2.5 py-1 bg-slate-50 text-slate-500 border border-slate-200 rounded-lg text-[9px] font-extrabold uppercase tracking-widest leading-none">
                        {{ caso.aseguradora?.nombre }}
                    </div>
                    <div class="flex items-center">
                        <span class="px-2.5 py-1 text-[9px] font-extrabold rounded-lg border uppercase tracking-wider flex items-center gap-1.5 shadow-sm"
                              :class="caso.estado_actual === 'finalizado' 
                                ? 'bg-emerald-50 text-emerald-700 border-emerald-200' 
                                : caso.estado_actual === 'mesa_compras' 
                                ? 'bg-blue-50 text-blue-700 border-blue-200' 
                                : 'bg-amber-50 text-amber-700 border-amber-200'">
                            <span class="w-1.5 h-1.5 rounded-full" 
                                  :class="caso.estado_actual === 'finalizado' 
                                    ? 'bg-emerald-500 animate-pulse' 
                                    : caso.estado_actual === 'mesa_compras' 
                                    ? 'bg-blue-500 animate-pulse' 
                                    : 'bg-amber-500 animate-pulse'"></span>
                            {{ caso.estado_label || caso.estado_actual }}
                        </span>
                    </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.vehiculo?.marca || 'Marca' }}</span>
                        <span class="text-slate-400 text-[10px] block truncate mt-0.5">{{ caso.vehiculo?.modelo || 'Modelo' }}</span>
                    </div>
                </div>

                <Link 
                    :href="route('mesa-compras.show', 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"
                >
                    Gestionar Compras
                    <font-awesome-icon :icon="['fas', 'arrow-right']" class="w-3.5 h-3.5 transform group-hover:translate-x-1 transition-transform" />
                </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">
               <font-awesome-icon :icon="['fas', 'shopping-cart']" class="w-10 h-10 text-slate-300" />
            </div>
            <p class="text-slate-400">No se encontraron casos en proceso de compra.</p>
        </div>
      </div>
    </div>
  </AppLayout>
</template>
