<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,
  casosPorAseguradora: Object,
  aseguradoras: Array,
  estados: Object,
  filters: Object
});

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

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

const filterState = ref('pendiente_coordinacion');
const filterDateFrom = ref('');
const filterDateTo = ref('');

const coordStates = [
  { id: 'all', label: 'Todos', icon: 'M4 6h16M4 10h16M4 14h16M4 18h16' },
  { id: 'pendiente_coordinacion', label: 'Pendiente', icon: 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z' },
  { id: 'recoordinacion', label: 'Re-coordinación', icon: 'M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15' },
  { id: 'no_contesta', label: 'No contesta', icon: 'M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z' },
  { id: 'llamar_despues', label: 'Llamar después', icon: 'M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z' },
  { id: 'vehiculo_retenido', label: 'Vehículo Retenido', icon: 'M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z' },
  { id: 'vehiculo_circulando', label: 'Vehículo Circulando', icon: 'M13 10V3L4 14h7v7l9-11h-7z' },
  { id: 'vehiculo_no_taller', label: 'Vehículo No en Taller', icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6' },
  { id: 'coordinado', label: 'Asignados', icon: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2' },
];

const expandedInsurers = ref(props.aseguradoras.map(a => a.id));

const toggleInsurer = (id) => {
  if (expandedInsurers.value.includes(id)) {
    expandedInsurers.value = expandedInsurers.value.filter(i => i !== id);
  } else {
    expandedInsurers.value.push(id);
  }
};

const filteredCasosPorAseguradora = computed(() => {
  const filtered = {};
  for (const [insurerId, casos] of Object.entries(props.casosPorAseguradora)) {
    const list = casos.filter(caso => {
      if (filterState.value !== 'all' && caso.estado_actual !== filterState.value) return false;
      if (filterDateFrom.value) {
        const from = new Date(filterDateFrom.value);
        const asig = new Date(caso.fecha_asignacion);
        if (asig < from) return false;
      }
      if (filterDateTo.value) {
        const to = new Date(filterDateTo.value);
        to.setHours(23, 59, 59, 999);
        const asig = new Date(caso.fecha_asignacion);
        if (asig > to) return false;
      }
      return true;
    });
    if (list.length > 0) {
      filtered[insurerId] = list;
    }
  }
  return filtered;
});

const getInsurersWithCasos = computed(() => {
  return props.aseguradoras.filter(a => filteredCasosPorAseguradora.value[a.id]);
});

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 formatDate = (dateString) => {
  if (!dateString) return 'N/A';
  const match = dateString.match(/^\d{4}-\d{2}-\d{2}/);
  return match ? match[0] : dateString;
};

const getStatusColor = (status) => {
    const colors = {
        'pendiente': 'text-slate-500 bg-slate-50 border-slate-200',
        'pagado': 'text-emerald-600 bg-emerald-50 border-emerald-200',
        'no_registra': 'text-red-500 bg-red-50 border-red-200'
    };
    return colors[status] || 'text-blue-600 bg-blue-50 border-blue-200';
};

const getStateLabel = (stateId) => {
  if (!stateId) return 'N/A';
  const found = coordStates.find(s => s.id === stateId);
  return found ? found.label : stateId.replace(/_/g, ' ');
};

const getStateBadgeClass = (stateId) => {
  const mapping = {
    pendiente_coordinacion: 'bg-slate-100 text-slate-700 border-slate-200',
    recoordinacion: 'bg-amber-50 text-amber-700 border-amber-200',
    no_contesta: 'bg-rose-50 text-rose-700 border-rose-200',
    llamar_despues: 'bg-orange-50 text-orange-700 border-orange-200',
    vehiculo_retenido: 'bg-red-50 text-red-700 border-red-200',
    vehiculo_circulando: 'bg-emerald-50 text-emerald-700 border-emerald-200',
    vehiculo_no_taller: 'bg-indigo-50 text-indigo-700 border-indigo-200',
    coordinado: 'bg-blue-50 text-blue-700 border-blue-200',
  };
  return mapping[stateId] || 'bg-slate-100 text-slate-600 border-slate-200';
};

const handleScroll = (e) => {
  const el = e.target;
  const wrapper = el.closest('.relative');
  if (!wrapper) return;
  const leftHint = wrapper.querySelector('.scroll-hint-left');
  const rightHint = wrapper.querySelector('.scroll-hint-right');
  if (leftHint) {
    leftHint.style.opacity = el.scrollLeft > 10 ? '1' : '0';
  }
  if (rightHint) {
    rightHint.style.opacity = el.scrollLeft < el.scrollWidth - el.clientWidth - 10 ? '1' : '0';
  }
};
</script>

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

  <AppLayout :title="title">
    <div class="px-4 sm:px-6 lg:px-8 py-8 space-y-8 bg-slate-50/50 min-h-screen">
      
      <!-- Top Filters -->
      <div class="max-w-7xl mx-auto bg-white p-6 rounded-3xl shadow-[0_4px_20px_rgb(0,0,0,0.03)] border border-slate-100 space-y-4">
        <div class="flex flex-col md:flex-row justify-between items-center gap-4">
          <div class="w-full md:w-80 relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg class="w-5 h-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="form.search"
              type="text" 
              placeholder="Buscar placa o reclamo..."
              class="block w-full pl-10 pr-3 py-3 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"
              @keyup.enter="submitSearch"
            />
          </div>

          <div class="flex items-center gap-3 w-full md:w-auto">
            <div class="flex items-center gap-2">
              <label class="text-[10px] font-bold text-slate-400 uppercase tracking-widest whitespace-nowrap">Desde</label>
              <input v-model="filterDateFrom" type="date" class="px-3 py-2.5 border border-slate-200 rounded-xl bg-slate-50 text-sm font-medium text-slate-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none" />
            </div>
            <div class="flex items-center gap-2">
              <label class="text-[10px] font-bold text-slate-400 uppercase tracking-widest whitespace-nowrap">Hasta</label>
              <input v-model="filterDateTo" type="date" class="px-3 py-2.5 border border-slate-200 rounded-xl bg-slate-50 text-sm font-medium text-slate-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none" />
            </div>
            <button v-if="filterDateFrom || filterDateTo" @click="filterDateFrom = ''; filterDateTo = ''" class="px-3 py-2.5 text-[10px] font-bold text-slate-400 hover:text-red-500 uppercase tracking-widest transition-colors">
              Limpiar
            </button>
          </div>
        </div>

        <nav class="flex space-x-2 overflow-x-auto pb-1 hide-scrollbar" aria-label="Tabs">
          <button 
            v-for="state in coordStates" 
            :key="state.id"
            @click="filterState = state.id"
            class="whitespace-nowrap py-2.5 px-4 rounded-xl font-bold text-xs uppercase tracking-wider transition-all duration-200"
            :class="filterState === state.id 
              ? 'bg-slate-800 text-white shadow-md shadow-slate-800/20' 
              : 'bg-slate-50 text-slate-500 hover:bg-slate-100 hover:text-slate-700'"
          >
            {{ state.label }}
          </button>
        </nav>
      </div>

      <!-- Empty State -->
      <div v-if="getInsurersWithCasos.length === 0" class="max-w-7xl mx-auto bg-white rounded-3xl overflow-hidden shadow-[0_4px_20px_rgb(0,0,0,0.03)] border border-slate-100 p-16 text-center">
         <div class="mx-auto w-16 h-16 bg-blue-50 rounded-2xl flex items-center justify-center mb-4">
             <svg class="w-8 h-8 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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" />
             </svg>
         </div>
         <h3 class="text-xl font-extrabold text-slate-800 tracking-tight">Sin Casos Pendientes</h3>
         <p class="text-slate-500 mt-2 text-sm max-w-md mx-auto font-medium">
           No hay casos que coincidan con los filtros seleccionados o todos han sido procesados.
         </p>
         <button @click="form.search = ''; filterState = 'all'; submitSearch()" class="mt-6 px-6 py-2.5 bg-blue-50 text-blue-600 font-bold text-xs uppercase tracking-widest rounded-xl hover:bg-blue-100 transition-colors">Ver Todos</button>
      </div>

      <!-- Insurance Accordions with the New Design -->
      <main 
        v-for="insurer in getInsurersWithCasos" 
        :key="insurer.id"
        class="max-w-7xl mx-auto bg-white rounded-3xl overflow-hidden shadow-[0_4px_20px_rgb(0,0,0,0.03)] border border-slate-100 transition-all duration-300 hover:shadow-[0_8px_30px_rgb(0,0,0,0.06)]"
      >
        <header 
          @click="toggleInsurer(insurer.id)"
          class="p-6 md:px-10 flex justify-between items-center border-b border-slate-100 cursor-pointer bg-gradient-to-r from-white to-slate-50/50 hover:from-slate-50 hover:to-slate-100/50 transition-all duration-300"
        >
          <div class="flex items-center gap-6">
            <!-- Logo style -->
            <div class="w-16 h-16 bg-gradient-to-br from-blue-600 to-indigo-700 rounded-2xl flex items-center justify-center text-white font-bold text-2xl shadow-lg shadow-blue-600/20 transition-transform duration-300 hover:scale-105">
              {{ insurer.nombre.substring(0, 2).toUpperCase() }}
            </div>
            <!-- Title and Status -->
            <div>
              <h1 class="text-2xl font-extrabold text-slate-800 tracking-tight">{{ insurer.nombre }}</h1>
              <div class="flex items-center gap-2 mt-1">
                <span class="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></span>
                <span class="text-blue-600 font-bold text-xs uppercase tracking-widest">{{ filteredCasosPorAseguradora[insurer.id].length }} Casos Para Procesar</span>
              </div>
            </div>
          </div>
          <!-- Collapse Button -->
          <div class="flex items-center gap-3">
            <button class="hidden md:flex items-center px-4 py-2 bg-slate-100 text-slate-500 text-xs font-semibold rounded-full hover:bg-slate-200 transition-colors pointer-events-none">
              Haz clic para {{ expandedInsurers.includes(insurer.id) ? 'colapsar' : 'expandir' }}
            </button>
            <button class="p-2 bg-slate-100 text-slate-500 rounded-full hover:bg-slate-200 transition-transform duration-300" :class="{'rotate-180': expandedInsurers.includes(insurer.id)}">
              <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M5 15l7-7 7 7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
              </svg>
            </button>
          </div>
        </header>
        <section v-show="expandedInsurers.includes(insurer.id)" class="p-4 md:p-6" data-purpose="content-area">
          <!-- Desktop: Horizontal scrollable cards -->
          <div class="hidden md:block relative">
            <!-- Scroll hint gradient left -->
            <div class="absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-white to-transparent z-10 pointer-events-none rounded-l-2xl opacity-0 scroll-hint-left transition-opacity duration-300"></div>
            <!-- Scroll hint gradient right -->
            <div class="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-white to-transparent z-10 pointer-events-none rounded-r-2xl scroll-hint-right transition-opacity duration-300"></div>
            
            <div class="flex gap-5 overflow-x-auto pb-4 snap-x snap-mandatory styled-scrollbar scroll-container" @scroll="handleScroll($event)">
              <div 
                v-for="caso in filteredCasosPorAseguradora[insurer.id]" 
                :key="caso.id" 
                class="flex-shrink-0 w-[340px] bg-white rounded-2xl border border-slate-200 shadow-sm hover:shadow-lg hover:border-slate-300 transition-all duration-300 snap-start group overflow-hidden"
              >
                <!-- Card Header -->
                <div class="px-5 pt-5 pb-4 border-b border-slate-100 bg-gradient-to-br from-slate-50 to-white">
                  <div class="flex justify-between items-start gap-2 mb-3">
                    <div class="min-w-0 flex-1">
                      <h3 class="font-extrabold text-slate-800 text-lg tracking-tight truncate">{{ caso.numero_reclamo }}</h3>
                      <span class="inline-block px-2 py-0.5 bg-slate-100 text-slate-500 text-[10px] font-bold rounded-md mt-1">
                        SIAS: {{ caso.numero_caso_sias || 'S/N' }}
                      </span>
                    </div>
                    <span class="px-2.5 py-1.5 text-[10px] font-bold rounded-lg border tracking-wider text-center flex-shrink-0 shadow-sm whitespace-nowrap"
                          :class="getStateBadgeClass(caso.estado_coordinacion || caso.estado_actual)">
                      {{ getStateLabel(caso.estado_coordinacion || caso.estado_actual) }}
                    </span>
                  </div>
                  <div class="flex items-center gap-3 text-[10px] text-slate-400 font-medium">
                    <span>Asig: <strong class="text-slate-600 font-bold">{{ formatDate(caso.fecha_asignacion) }}</strong></span>
                    <span class="w-1 h-1 rounded-full bg-slate-300"></span>
                    <span class="flex items-center gap-1">
                      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                      <strong class="text-slate-800 font-black text-sm">{{ calculateDays(caso.fecha_asignacion) }}</strong> días
                    </span>
                  </div>
                </div>

                <!-- Card Body -->
                <div class="px-5 py-4 space-y-4">
                  <!-- Cliente -->
                  <div class="flex items-start gap-3">
                    <div class="w-9 h-9 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center flex-shrink-0">
                      <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                    </div>
                    <div class="min-w-0 flex-1">
                      <span class="block text-[9px] text-slate-400 font-black uppercase tracking-widest leading-none mb-1">Cliente</span>
                      <span class="block text-sm font-bold text-slate-800 truncate" :title="caso.cliente?.nombre">{{ caso.cliente?.nombre || 'No registrado' }}</span>
                      <span class="block text-xs text-blue-500 font-semibold mt-0.5">{{ caso.cliente?.telefono || 'Sin teléfono' }}</span>
                    </div>
                  </div>

                  <!-- Vehículo -->
                  <div class="flex items-center gap-3 bg-slate-50 p-3 rounded-xl border border-slate-100">
                    <div class="bg-slate-800 text-white text-[11px] px-3 py-1.5 rounded-lg font-bold shadow-sm whitespace-nowrap">
                      {{ caso.vehiculo?.placa || 'N/A' }}
                    </div>
                    <div class="min-w-0 flex-1">
                      <span class="block font-bold text-slate-700 text-sm truncate">{{ caso.vehiculo?.marca || 'Marca' }}</span>
                      <span class="block text-slate-400 text-xs truncate">{{ caso.vehiculo?.modelo || 'Genérica' }}</span>
                    </div>
                    <span class="px-2 py-0.5 text-[9px] font-extrabold rounded-md"
                          :class="caso.cobertura === 'DP' ? 'bg-indigo-100 text-indigo-700' : 'bg-blue-100 text-blue-700'">
                      {{ caso.cobertura || 'RC' }}
                    </span>
                  </div>

                  <!-- Taller -->
                  <div class="flex items-start gap-3">
                    <div class="w-9 h-9 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center flex-shrink-0">
                      <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="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                    </div>
                    <div class="min-w-0 flex-1">
                      <span class="block text-[9px] text-slate-400 font-black uppercase tracking-widest leading-none mb-1">Taller</span>
                      <span class="block text-sm font-bold text-slate-800 truncate" :title="caso.taller?.razon_social">{{ caso.taller?.razon_social || 'Particular' }}</span>
                      <span v-if="caso.taller_ejecutivo" class="block text-xs text-slate-500 font-medium mt-0.5">Ejec: {{ caso.taller_ejecutivo }}</span>
                    </div>
                  </div>

                  <!-- Ciudad y Observaciones -->
                  <div class="flex items-center justify-between gap-2 pt-3 border-t border-slate-100">
                    <div class="flex items-center gap-1.5 min-w-0">
                      <svg class="w-3.5 h-3.5 text-slate-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                      <span class="text-xs font-bold text-slate-600 truncate">{{ caso.aseguradora_ciudad || caso.particular_ciudad || 'N/A' }}</span>
                    </div>
                    <span class="px-2.5 py-1 rounded-full text-[9px] font-bold border uppercase tracking-widest shadow-sm flex-shrink-0" :class="getStatusColor(caso.pago_estado)">
                      {{ caso.pago_estado || 'Pendiente' }}
                    </span>
                  </div>

                  <!-- Observaciones -->
                  <div v-if="caso.observaciones" class="text-xs text-slate-500 bg-slate-50 rounded-lg p-2.5 border border-slate-100">
                    <span class="text-[9px] font-black text-slate-400 uppercase tracking-widest block mb-1">Obs</span>
                    <span class="line-clamp-2" :title="caso.observaciones">{{ caso.observaciones }}</span>
                  </div>
                </div>

                <!-- Card Footer: Actions -->
                <div class="px-5 pb-5 pt-2 flex flex-col gap-2">
                  <Link 
                    v-if="caso.estado_actual !== 'coordinado'"
                    :href="route('coordinacion.ruta', caso.id)"
                    class="flex items-center justify-between gap-4 px-4 py-2.5 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-xl hover:from-blue-700 hover:to-blue-800 transition-all duration-200 group/btn shadow-sm shadow-blue-600/20 hover:shadow-md hover:shadow-blue-600/30 w-full"
                  >
                    <span class="text-[10px] font-bold tracking-widest uppercase">Asignar Ruta</span>
                    <svg class="h-3 w-3 transform group-hover/btn:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path d="M17 8l4 4m0 0l-4 4m4-4H3" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"></path>
                    </svg>
                  </Link>
                  <div class="flex gap-2">
                    <a 
                      :href="route('coordinacion.imprimir', caso.id)"
                      target="_blank"
                      class="flex-1 flex items-center justify-center gap-1.5 py-2 bg-white border border-slate-200 text-slate-600 rounded-xl hover:bg-slate-50 hover:border-slate-300 transition-all duration-200 font-bold text-[10px] uppercase tracking-widest"
                    >
                      <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
                      </svg>
                      Imprimir
                    </a>
                    <Link 
                      :href="route('casos.show', caso.id)"
                      class="flex-1 flex items-center justify-center gap-1.5 py-2 border border-slate-200 text-slate-500 rounded-xl hover:text-slate-600 hover:border-slate-300 transition-all duration-200 font-bold text-[10px] uppercase tracking-widest"
                    >
                      Detalle
                    </Link>
                  </div>
                </div>
              </div>
            </div>

            <!-- Scroll indicator dots -->
            <div class="flex justify-center gap-1.5 mt-3">
              <span class="text-[10px] text-slate-400 font-medium flex items-center gap-1">
                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16l-4-4m0 0l4-4m-4 4h18"/></svg>
                Desliza para ver más
                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
              </span>
            </div>
          </div>

          <!-- Mobile: Stacked cards (unchanged) -->
          <div class="md:hidden space-y-4">
            <div 
              v-for="caso in filteredCasosPorAseguradora[insurer.id]" 
              :key="caso.id" 
              class="bg-white rounded-2xl border border-slate-200 shadow-sm p-5"
            >
              <!-- Header of card: Case Number & Status -->
              <div class="flex flex-col gap-2 border-b border-slate-100 pb-3 mb-4">
                <div class="flex justify-between items-start gap-2">
                  <span class="font-extrabold text-slate-800 text-base tracking-tight truncate flex-1 min-w-0">{{ caso.numero_reclamo }}</span>
                  <span class="px-2.5 py-1 text-[10px] font-bold rounded-lg border tracking-wider text-center flex-shrink-0 shadow-sm whitespace-nowrap"
                        :class="getStateBadgeClass(caso.estado_coordinacion || caso.estado_actual)">
                    {{ getStateLabel(caso.estado_coordinacion || caso.estado_actual) }}
                  </span>
                </div>
                <div class="flex items-center gap-3 text-[10px] text-slate-400 font-medium">
                  <span>SIAS: <strong class="text-slate-600 font-bold">{{ caso.numero_caso_sias || 'S/N' }}</strong></span>
                  <span class="w-1.5 h-1.5 rounded-full bg-slate-300"></span>
                  <span>Asig: <strong class="text-slate-600 font-bold">{{ formatDate(caso.fecha_asignacion) }}</strong></span>
                </div>
              </div>

              <!-- Card Body -->
              <div class="space-y-4 mb-4">
                <div class="flex items-start gap-3">
                  <div class="w-8 h-8 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center flex-shrink-0">
                    <span class="material-symbols-outlined text-base">person</span>
                  </div>
                  <div class="min-w-0 flex-1">
                    <span class="block text-[8px] text-slate-400 font-black uppercase tracking-widest leading-none mb-1">Cliente</span>
                    <span class="block text-xs font-bold text-slate-800 truncate" :title="caso.cliente?.nombre">{{ caso.cliente?.nombre || 'No registrado' }}</span>
                    <span class="block text-[10px] text-blue-500 font-semibold mt-0.5">{{ caso.cliente?.telefono || 'Sin teléfono' }}</span>
                  </div>
                  <div class="flex flex-col items-end gap-1 flex-shrink-0">
                    <span class="bg-slate-800 text-white text-[10px] px-2.5 py-1 rounded-lg font-bold shadow-sm whitespace-nowrap">{{ caso.vehiculo?.placa || 'N/A' }}</span>
                    <span class="px-1.5 py-0.5 text-[8px] font-extrabold rounded bg-indigo-50 text-indigo-700 uppercase tracking-widest">{{ caso.cobertura || 'RC' }}</span>
                  </div>
                </div>

                <div class="flex items-start gap-3">
                  <div class="w-8 h-8 rounded-lg bg-emerald-50 text-emerald-600 flex items-center justify-center flex-shrink-0">
                    <span class="material-symbols-outlined text-base">home_repair_service</span>
                  </div>
                  <div class="min-w-0 flex-1">
                    <span class="block text-[8px] text-slate-400 font-black uppercase tracking-widest leading-none mb-1">Taller / Logística</span>
                    <span class="block text-xs font-bold text-slate-800 truncate" :title="caso.taller?.razon_social">{{ caso.taller?.razon_social || 'Particular' }}</span>
                    <span v-if="caso.taller_ejecutivo" class="block text-[10px] text-slate-500 font-medium mt-0.5">Ejecutivo: {{ caso.taller_ejecutivo }}</span>
                  </div>
                </div>

                <div class="grid grid-cols-2 gap-3 pt-3 px-1 border-t border-slate-100">
                  <div class="flex items-center gap-1.5 min-w-0">
                    <span class="material-symbols-outlined text-sm text-slate-400 flex-shrink-0">location_on</span>
                    <span class="text-[10px] font-bold text-slate-500 uppercase tracking-wider truncate">
                      {{ caso.aseguradora_ciudad || caso.particular_ciudad || 'N/A' }}
                    </span>
                  </div>
                  <div class="flex items-center justify-end gap-1.5">
                    <span class="material-symbols-outlined text-sm text-slate-400">schedule</span>
                    <span class="text-[10px] text-slate-500 font-medium">
                      Días: <strong class="text-slate-800 font-black text-sm">{{ calculateDays(caso.fecha_asignacion) }}</strong>
                    </span>
                  </div>
                </div>
              </div>

              <div class="grid grid-cols-2 gap-2 border-t border-slate-100 pt-4">
                <Link 
                  v-if="caso.estado_actual !== 'coordinado'"
                  :href="route('coordinacion.ruta', caso.id)"
                  class="col-span-2 flex items-center justify-center gap-2 py-2.5 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-xl shadow-sm font-bold text-[10px] uppercase tracking-widest"
                >
                  Asignar Ruta
                </Link>
                <a 
                  :href="route('coordinacion.imprimir', caso.id)"
                  target="_blank"
                  class="flex items-center justify-center gap-2 py-2.5 bg-white border border-slate-200 text-slate-600 rounded-xl font-bold text-[10px] uppercase tracking-widest shadow-sm"
                >
                  Imprimir
                </a>
                <Link 
                  :href="route('casos.show', caso.id)"
                  class="flex items-center justify-center gap-2 py-2.5 border border-slate-200 text-slate-500 rounded-xl font-bold text-[10px] uppercase tracking-widest"
                >
                  Detalle
                </Link>
              </div>
            </div>
          </div>
        </section>
      </main>

    </div>
  </AppLayout>
</template>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

* {
  font-family: 'Inter', sans-serif;
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
}

/* Hide scrollbar for filters */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Custom scrollbar for card containers */
.styled-scrollbar::-webkit-scrollbar {
  height: 6px;
}
.styled-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.styled-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}
.styled-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
.styled-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
</style>

