<script setup>
import { computed } from 'vue';
import { Link } from '@inertiajs/vue3';
import AjustadorLayout from './AjustadorLayout.vue';

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

const estadoColores = {
  pendiente_coordinacion: 'bg-slate-100 text-slate-700',
  coordinado: 'bg-blue-100 text-blue-700',
  caso_en_ruta: 'bg-indigo-100 text-indigo-700',
  inspeccion_realizada: 'bg-purple-100 text-purple-700',
  elaboracion_informe: 'bg-violet-100 text-violet-700',
  mesa_compras: 'bg-yellow-100 text-yellow-700',
  en_reparacion: 'bg-rose-100 text-rose-700',
  facturacion: 'bg-teal-100 text-teal-700',
  finalizado: 'bg-emerald-100 text-emerald-700',
};

const calculateDays = (date) => {
  if (!date) return 0;
  const start = new Date(date);
  const end = new Date();
  const diff = Math.floor((end - start) / (1000 * 60 * 60 * 24));
  return diff > 0 ? diff : 0;
};

const stats = computed(() => ({
  total: props.casos.length,
  pendientes: props.casos.filter(c => ['coordinado', 'caso_en_ruta'].includes(c.estado_actual)).length,
  en_proceso: props.casos.filter(c => ['inspeccion_realizada', 'elaboracion_informe', 'mesa_compras'].includes(c.estado_actual)).length,
  finalizados: props.casos.filter(c => c.estado_actual === 'finalizado').length,
}));
</script>

<template>
  <AjustadorLayout :title="title" :ajustador="ajustador">
    <!-- Header -->
    <div class="mb-8">
      <h1 class="text-2xl font-bold text-slate-800">Mis Casos Asignados</h1>
      <p class="text-slate-500 mt-1">Gestiona los casos que te han sido asignados</p>
    </div>

    <!-- Stats -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
      <div class="bg-white rounded-2xl p-5 border border-slate-200 shadow-sm">
        <p class="text-xs font-bold text-slate-400 uppercase tracking-widest">Total</p>
        <p class="text-3xl font-black text-slate-800 mt-1">{{ stats.total }}</p>
      </div>
      <div class="bg-white rounded-2xl p-5 border border-slate-200 shadow-sm">
        <p class="text-xs font-bold text-blue-400 uppercase tracking-widest">Pendientes</p>
        <p class="text-3xl font-black text-blue-600 mt-1">{{ stats.pendientes }}</p>
      </div>
      <div class="bg-white rounded-2xl p-5 border border-slate-200 shadow-sm">
        <p class="text-xs font-bold text-purple-400 uppercase tracking-widest">En Proceso</p>
        <p class="text-3xl font-black text-purple-600 mt-1">{{ stats.en_proceso }}</p>
      </div>
      <div class="bg-white rounded-2xl p-5 border border-slate-200 shadow-sm">
        <p class="text-xs font-bold text-emerald-400 uppercase tracking-widest">Finalizados</p>
        <p class="text-3xl font-black text-emerald-600 mt-1">{{ stats.finalizados }}</p>
      </div>
    </div>

    <!-- Cases List -->
    <div v-if="casos.length === 0" class="bg-white rounded-2xl border border-slate-200 p-16 text-center">
      <svg class="w-16 h-16 mx-auto text-slate-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
      </svg>
      <h3 class="text-lg font-bold text-slate-700">No tienes casos asignados</h3>
      <p class="text-slate-500 mt-2">Cuando se te asigne un caso, aparecerá aquí</p>
    </div>

    <div v-else class="space-y-4">
      <Link 
        v-for="caso in casos" 
        :key="caso.id"
        :href="route('ajustador.casos.show', caso.id)"
        class="block bg-white rounded-2xl border border-slate-200 shadow-sm hover:shadow-md hover:border-slate-300 transition-all duration-200 overflow-hidden group"
      >
        <div class="p-6">
          <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <!-- Left: Case Info -->
            <div class="flex-1">
              <div class="flex items-center gap-3 mb-2">
                <span class="text-lg font-bold text-slate-800">{{ caso.numero_reclamo }}</span>
                <span :class="['px-2.5 py-1 rounded-lg text-xs font-bold', estadoColores[caso.estado_actual] || 'bg-slate-100 text-slate-600']">
                  {{ estados[caso.estado_actual] || caso.estado_actual }}
                </span>
              </div>
              
              <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                <div>
                  <p class="text-xs text-slate-400 font-bold uppercase">Placa</p>
                  <p class="font-semibold text-slate-700">{{ caso.vehiculo?.placa || 'N/A' }}</p>
                </div>
                <div>
                  <p class="text-xs text-slate-400 font-bold uppercase">Cliente</p>
                  <p class="font-semibold text-slate-700 truncate">{{ caso.cliente?.nombre || 'N/A' }}</p>
                </div>
                <div>
                  <p class="text-xs text-slate-400 font-bold uppercase">Taller</p>
                  <p class="font-semibold text-slate-700 truncate">{{ caso.taller?.razon_social || 'N/A' }}</p>
                </div>
                <div>
                  <p class="text-xs text-slate-400 font-bold uppercase">Días</p>
                  <p class="font-semibold text-slate-700">{{ calculateDays(caso.fecha_asignacion) }} días</p>
                </div>
              </div>
            </div>

            <!-- Right: Arrow -->
            <div class="flex items-center">
              <svg class="w-5 h-5 text-slate-400 group-hover:text-blue-600 group-hover:translate-x-1 transition-all" 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"></path>
              </svg>
            </div>
          </div>
        </div>
      </Link>
    </div>
  </AjustadorLayout>
</template>
