<script setup>
import { ref, computed, watch } from 'vue';
import { Link, useForm, router, usePage } from '@inertiajs/vue3';
import AppLayout from '@/Layouts/AppLayout.vue';
import ChatWidget from '@/Components/ChatWidget.vue';

const props = defineProps({
  title: String,
  caso: Object,
  estados: Object
});

const showEstadoForm = ref(false);
const estadoForm = useForm({
  estado: '',
  nota: ''
});

const availableEstados = computed(() => {
  const all = { ...props.estados };
  // Prevenir saltarse la Coordinación
  if (props.caso.estado_actual === 'pendiente_coordinacion') {
      delete all['coordinado'];
      delete all['caso_en_ruta'];
      delete all['inspeccion_realizada'];
      delete all['facturacion'];
      delete all['finalizado'];
  }
  return all;
});

const formatDate = (date) => {
  if (!date) return '';
  const d = new Date(date);
  if (isNaN(d.getTime())) return date;
  return d.toLocaleDateString('es-EC', { year: 'numeric', month: '2-digit', day: '2-digit' });
};

const informeData = computed(() => {
  if (!props.caso?.informe_enviado || !props.caso?.informe_data) return null;
  return typeof props.caso.informe_data === 'string'
    ? JSON.parse(props.caso.informe_data)
    : props.caso.informe_data;
});

const cambiarEstado = () => {
  estadoForm.post(route('casos.cambiar_estado', props.caso.id), {
    onSuccess: () => {
      showEstadoForm.value = false;
      estadoForm.nota = '';
    }
  });
};

const estadoColores = {
  // Inicial
  pendiente_coordinacion: 'bg-slate-50 text-slate-700 border-slate-200',
  recoordinacion: 'bg-slate-100 text-slate-800 border-slate-300',
  
  // En progreso / Logística
  coordinado: 'bg-blue-50 text-blue-700 border-blue-200',
  caso_en_ruta: 'bg-indigo-50 text-indigo-700 border-indigo-200',
  
  // Proformas / Espera
  pendiente_proforma_cliente: 'bg-amber-50 text-amber-700 border-amber-200',
  pendiente_proforma_taller: 'bg-amber-50 text-amber-700 border-amber-200',
  no_contesta: 'bg-orange-50 text-orange-700 border-orange-200',
  llamar_despues: 'bg-orange-50 text-orange-600 border-orange-200',
  vehiculo_retenido: 'bg-red-50 text-red-700 border-red-200',
  
  // Análisis e Inspección
  analisis: 'bg-fuchsia-50 text-fuchsia-700 border-fuchsia-200',
  inspeccion_realizada: 'bg-purple-50 text-purple-700 border-purple-200',
  elaboracion_informe: 'bg-violet-50 text-violet-700 border-violet-200',
  
  // Autorizaciones
  confirmacion_cobertura: 'bg-cyan-50 text-cyan-700 border-cyan-200',
  autorizacion_inspector: 'bg-sky-50 text-sky-700 border-sky-200',
  autorizacion_reinspector: 'bg-sky-50 text-sky-700 border-sky-200',
  autorizacion_ejecutivo: 'bg-sky-50 text-sky-700 border-sky-200',
  
  // Operaciones
  mesa_compras: 'bg-yellow-50 text-yellow-700 border-yellow-200',
  en_reparacion: 'bg-rose-50 text-rose-700 border-rose-200',
  
  // Final
  facturacion: 'bg-teal-50 text-teal-700 border-teal-200',
  finalizado: 'bg-emerald-50 text-emerald-700 border-emerald-200',
  rechazado: 'bg-stone-100 text-stone-700 border-stone-300',
};

// File helpers
const placa = computed(() => props.caso?.vehiculo?.placa || '');

const getFilePath = (item) => typeof item === 'string' ? item : item?.path;
const getFileDate = (item) => typeof item === 'string' ? '' : item?.uploaded_at || '';

const getItemLabel = (item) => {
  const prefix = placa.value ? `${placa.value} - ` : '';
  if (typeof item === 'string') {
    return `${prefix}${item.split('/').pop()}`;
  }
  const desc = item?.descripcion || item?.nombre || item?.path?.split('/').pop() || 'Archivo';
  return `${prefix}${desc}`;
};

const isPdf = (item) => getFilePath(item)?.toLowerCase().endsWith('.pdf');
const isImage = (item) => /\.(jpg|jpeg|png|gif|webp)$/i.test(getFilePath(item));
const getFileName = (item) => getFilePath(item)?.split('/').pop() || 'Archivo';
const getFileType = (item) => {
  const ext = getFilePath(item)?.split('.').pop()?.toUpperCase();
  return ext || 'Archivo';
};
const getFileIconClass = (item) => {
  const p = getFilePath(item);
  if (isPdf(item)) return 'bg-red-100 text-red-600';
  if (isImage(item)) return 'bg-emerald-100 text-emerald-600';
  return 'bg-slate-100 text-slate-600';
};

// Preview modal
const showPreview = ref(false);
const previewFilePath = ref('');
const previewFileName = computed(() => previewFilePath.value?.split('/').pop() || '');

const previewFile = (path) => {
  previewFilePath.value = path;
  showPreview.value = true;
};

// Delete confirmation
const showDeleteModal = ref(false);
const deleteIndex = ref(null);
const deleteTipo = ref('admin');

const openDeleteModal = (index, tipo) => {
  deleteIndex.value = index;
  deleteTipo.value = tipo;
  showDeleteModal.value = true;
};

const confirmDelete = () => {
  router.post(route('casos.archivos.eliminar', [props.caso.id, deleteIndex.value]), {
    tipo: deleteTipo.value,
  }, {
    preserveScroll: true,
    onSuccess: () => {
      showDeleteModal.value = false;
      deleteIndex.value = null;
    },
  });
};

// Success/error flash
const page = usePage();
const showMessage = ref(false);
const messageText = ref('');
let flashTimer = null;

watch(() => page.props.flash, (flash) => {
  if (flash?.message) {
    messageText.value = flash.message;
    showMessage.value = true;
    if (flashTimer) clearTimeout(flashTimer);
    flashTimer = setTimeout(() => { showMessage.value = false; }, 4000);
  }
}, { immediate: true });

const ajustadorArchivos = computed(() => {
  const a = props.caso.ajustador_archivos;
  if (!a) return [];
  if (Array.isArray(a)) return a;
  return [];
});
</script>

<template>
  <AppLayout :title="title">
    <div class="max-w-7xl mx-auto space-y-8 animate-fade-in-up">
      
      <!-- Toast -->
      <div v-if="showMessage" class="fixed top-4 right-4 z-[200] bg-emerald-600 text-white px-5 py-3 rounded-xl shadow-2xl flex items-center gap-3 text-sm font-bold animate-[slideIn_0.3s_ease-out]">
        <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
        {{ messageText }}
      </div>

      <!-- Premium Header Section -->
      <div class="relative overflow-hidden bg-white/70 backdrop-blur-2xl rounded-3xl p-8 border border-white/80 shadow-[0_8px_30px_rgb(0,0,0,0.04)] ring-1 ring-slate-100/50">
        <!-- Abstract Background Ornaments -->
        <div class="absolute top-0 right-0 -mt-16 -mr-16 w-64 h-64 bg-gradient-to-br from-blue-400/10 to-indigo-500/10 rounded-full blur-3xl pointer-events-none"></div>
        <div class="absolute bottom-0 left-0 w-32 h-32 bg-gradient-to-tr from-rose-400/10 to-amber-400/10 rounded-full blur-2xl pointer-events-none"></div>

        <div class="relative z-10 flex flex-col lg:flex-row lg:items-end justify-between gap-6">
          <div class="flex flex-col gap-3">
            <Link href="/casos" class="flex items-center gap-2 text-sm font-semibold text-slate-500 hover:text-blue-600 transition-colors w-max group">
              <span class="bg-white rounded-full p-1.5 shadow-sm border border-slate-100 group-hover:scale-110 group-hover:shadow-md transition-all">
                <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="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
              </span>
              Volver a Casos
            </Link>
            
            <div class="flex items-center gap-4 mt-2">
              <h1 class="text-3xl lg:text-5xl font-black text-slate-900 tracking-tight">{{ caso.numero_reclamo }}</h1>
            </div>
            
            <div class="flex items-center gap-3 mt-1">
              <span class="text-slate-500 font-medium">Estado actual:</span>
              <span :class="['px-3.5 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider border shadow-sm flex items-center gap-1.5', estadoColores[caso.estado_actual] || 'bg-slate-100 text-slate-700 border-slate-200']">
                <span class="w-1.5 h-1.5 rounded-full bg-current opacity-75"></span>
                {{ estados[caso.estado_actual] || caso.estado_actual }}
              </span>
            </div>
          </div>

          <div class="flex flex-wrap items-center gap-3">
             <Link :href="`/casos/${caso.id}/edit`" class="flex items-center gap-2 px-5 py-2.5 bg-white text-slate-700 font-bold rounded-xl shadow-sm border border-slate-200 hover:bg-slate-50 hover:shadow-md transition-all active:scale-95">
                <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
                Editar Siniestro
             </Link>
             
             <!-- Nuevo botón directo para asignación real (M2) -->
             <Link 
               v-if="['pendiente_coordinacion', 'recoordinacion', 'llamar_despues', 'no_contesta'].includes(caso.estado_actual)"
               :href="route('coordinacion.ruta', caso.id)" 
               class="flex items-center gap-2 px-5 py-2.5 bg-brand-blue text-white font-bold rounded-xl shadow-lg shadow-brand-blue/20 hover:bg-blue-700 transition-all active:scale-95"
             >
                <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="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"></path></svg>
                Asignar Ruta (M2)
             </Link>

             <button @click="showEstadoForm = !showEstadoForm" :class="showEstadoForm ? 'bg-slate-800 text-white shadow-lg' : 'bg-white text-slate-700 shadow-sm border border-slate-200 hover:bg-slate-50'" class="flex items-center gap-2 px-5 py-2.5 font-bold rounded-xl shadow-lg hover:-translate-y-0.5 transition-all active:scale-95">
                <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="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>
                {{ showEstadoForm ? 'Cerrar Panel' : 'Actualizar Gestión' }}
             </button>
          </div>
        </div>
      </div>

      <!-- Animated Form Panel -->
      <transition 
          enter-active-class="transition duration-300 ease-out"
          enter-from-class="transform -translate-y-4 opacity-0"
          enter-to-class="transform translate-y-0 opacity-100"
          leave-active-class="transition duration-200 ease-in"
          leave-from-class="transform translate-y-0 opacity-100"
          leave-to-class="transform -translate-y-4 opacity-0"
      >
        <div v-if="showEstadoForm" class="bg-gradient-to-br from-slate-800 to-slate-900 rounded-3xl p-8 shadow-2xl relative overflow-hidden ring-1 ring-slate-800">
           <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-5"></div>
           <div class="relative z-10 grid grid-cols-1 lg:grid-cols-3 gap-8 items-center">
              <div class="lg:col-span-1">
                 <h3 class="text-2xl font-bold text-white mb-2">Actualizar Siniestro</h3>
                 <p class="text-slate-400 text-sm">Cambia la fase actual del caso. Esto puede desencadenar notificaciones y registrarse en el historial.</p>
              </div>
              <div class="lg:col-span-2">
                 <form @submit.prevent="cambiarEstado" class="grid grid-cols-1 md:grid-cols-2 gap-5">
                   <div class="space-y-1.5">
                     <label class="text-xs font-bold text-slate-300 uppercase tracking-widest">Nuevo Estado</label>
                     <select v-model="estadoForm.estado" class="w-full bg-slate-800/50 border border-slate-600 text-white font-medium rounded-xl px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-shadow" required>
                       <option value="" disabled>Seleccione un estado...</option>
                       <option v-for="(label, key) in availableEstados" :key="key" :value="key" class="bg-slate-800 text-white">{{ label }}</option>
                     </select>
                   </div>
                   <div class="space-y-1.5">
                     <label class="text-xs font-bold text-slate-300 uppercase tracking-widest">Nota / Observación</label>
                     <input type="text" v-model="estadoForm.nota" class="w-full bg-slate-800/50 border border-slate-600 text-white font-medium rounded-xl px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-shadow" placeholder="Escribe un comentario opcional..." />
                   </div>
                   <div class="md:col-span-2 flex justify-end gap-3 mt-2">
                     <button type="button" @click="showEstadoForm = false" class="px-5 py-2.5 rounded-xl font-bold text-slate-300 hover:text-white hover:bg-slate-700 transition-colors">Cancelar</button>
                     <button type="submit" :disabled="estadoForm.processing" class="flex items-center gap-2 px-6 py-2.5 bg-blue-600 text-white font-bold rounded-xl shadow-lg shadow-blue-600/30 hover:bg-blue-500 transition-colors disabled:opacity-50">
                        <svg v-if="estadoForm.processing" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
                        Confirmar Cambio
                     </button>
                   </div>
                 </form>
              </div>
           </div>
        </div>
      </transition>

      <!-- Main Content Grid -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        
        <!-- Left Column: Rich Data Cards -->
        <div class="lg:col-span-2 space-y-8">
           
           <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
              <!-- Datos del Caso Card -->
              <div class="bg-white rounded-3xl p-6 lg:p-8 shadow-[0_4px_20px_rgb(0,0,0,0.03)] border border-slate-100 transition-transform duration-300 hover:-translate-y-1 hover:shadow-[0_8px_30px_rgb(0,0,0,0.06)] relative overflow-hidden group">
                  <div class="absolute top-0 right-0 w-32 h-32 bg-slate-50 rounded-full -mt-10 -mr-10 transition-transform group-hover:scale-110 duration-500 pointer-events-none"></div>
                  <div class="flex items-center gap-3 mb-6 relative z-10">
                     <div class="w-10 h-10 rounded-xl bg-orange-100 flex items-center justify-center text-orange-600 shadow-sm border border-orange-200/50">
                        <svg class="w-5 h-5" 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"></path></svg>
                     </div>
                     <h3 class="text-xl font-bold text-slate-800">Detalles de Póliza</h3>
                  </div>
                   <dl class="space-y-5 relative z-10">
                    <div>
                      <dt class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-0.5">No. Reclamo</dt>
                      <dd class="text-sm font-semibold text-slate-800">{{ caso.numero_reclamo || '---' }}</dd>
                    </div>
                    <div>
                      <dt class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-0.5">Fecha de Siniestro</dt>
                      <dd class="text-sm font-semibold text-slate-800">{{ formatDate(caso.fecha_siniestro) }}</dd>
                    </div>
                    <div>
                      <dt class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-0.5">Fecha Asignación</dt>
                      <dd class="text-sm font-semibold text-slate-800">{{ formatDate(caso.fecha_asignacion) || '---' }}</dd>
                    </div>
                    <div>
                      <dt class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-0.5">Fecha Inspección</dt>
                      <dd class="text-sm font-semibold text-slate-800">{{ formatDate(caso.fecha_inspeccion) || '---' }}</dd>
                    </div>
                    <div>
                      <dt class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-0.5">Cobertura / Ded.</dt>
                      <dd class="text-sm font-semibold text-slate-800">{{ caso.cobertura }}</dd>
                    </div>
                    <div>
                      <dt class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-0.5">Ramo</dt>
                      <dd class="text-sm font-semibold text-slate-800">{{ caso.ramo || '---' }}</dd>
                    </div>
                    <div>
                      <dt class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-0.5">Tipo Contrato</dt>
                      <dd class="text-sm font-semibold text-slate-800">{{ caso.tipo_contrato || '---' }}</dd>
                    </div>
                    <div>
                      <dt class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-0.5">Tipo de Ajuste</dt>
                      <dd class="text-sm font-semibold text-slate-800">{{ caso.tipo_ajuste || '---' }}</dd>
                    </div>
                    <div>
                      <dt class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-0.5">Número SIAS</dt>
                      <dd class="text-sm font-semibold text-slate-800">{{ caso.numero_caso_sias || '---' }}</dd>
                    </div>
                    <div>
                      <dt class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-0.5">Número WAN-AX</dt>
                      <dd class="text-sm font-semibold text-slate-800">{{ caso.numero_caso_wan_ax || '---' }}</dd>
                    </div>
                    <div>
                      <dt class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-0.5">Aseguradora</dt>
                      <dd class="text-sm font-semibold text-slate-800 flex items-center gap-1.5">
                         <span class="w-2 h-2 rounded-full bg-blue-500" v-if="caso.aseguradora"></span>
                         {{ caso.aseguradora?.nombre || 'No asignada' }}
                      </dd>
                    </div>
                    <div>
                      <dt class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-0.5">Broker</dt>
                      <dd class="text-sm font-semibold text-slate-800">{{ caso.broker?.razon_social || 'Directo' }}</dd>
                    </div>
                  </dl>
              </div>

              <!-- Cliente Card -->
              <div class="bg-white rounded-3xl p-6 lg:p-8 shadow-[0_4px_20px_rgb(0,0,0,0.03)] border border-slate-100 transition-transform duration-300 hover:-translate-y-1 hover:shadow-[0_8px_30px_rgb(0,0,0,0.06)] relative overflow-hidden group">
                  <div class="absolute top-0 right-0 w-32 h-32 bg-slate-50 rounded-full -mt-10 -mr-10 transition-transform group-hover:scale-110 duration-500 pointer-events-none"></div>
                  <div class="flex items-center gap-3 mb-6 relative z-10">
                     <div class="w-10 h-10 rounded-xl bg-emerald-100 flex items-center justify-center text-emerald-600 shadow-sm border border-emerald-200/50">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
                     </div>
                     <h3 class="text-xl font-bold text-slate-800">Asegurado (Cliente)</h3>
                  </div>
                   <dl class="space-y-5 relative z-10">
                    <div>
                      <dt class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-0.5">Nombre Completo</dt>
                      <dd class="text-sm font-semibold text-slate-800">{{ caso.cliente?.nombre || '---' }}</dd>
                    </div>
                    <div>
                      <dt class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-0.5">Identificación</dt>
                      <dd class="text-sm font-semibold text-slate-800 font-mono">
                        <span v-if="caso.cliente?.ruc || caso.cliente?.identificacion">
                          <span class="text-[10px] font-bold text-slate-400 uppercase bg-slate-100 px-1.5 py-0.5 rounded mr-1">{{ caso.cliente?.tipo_identificacion || '?' }}</span>
                          {{ caso.cliente?.ruc || caso.cliente?.identificacion }}
                        </span>
                        <span v-else class="text-slate-400">---</span>
                      </dd>
                    </div>
                    <div>
                      <dt class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-0.5">Teléfono</dt>
                      <dd class="text-sm font-semibold text-slate-800"><a :href="`tel:${caso.cliente?.telefono}`" class="text-blue-600 hover:underline">{{ caso.cliente?.telefono || '---' }}</a></dd>
                    </div>
                    <div>
                      <dt class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-0.5">Correo Electrónico</dt>
                      <dd class="text-sm font-semibold text-slate-800"><a :href="`mailto:${caso.cliente?.email}`" class="text-blue-600 hover:underline">{{ caso.cliente?.email || '---' }}</a></dd>
                    </div>
                    <div>
                      <dt class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-0.5">Ciudad de Residencia</dt>
                      <dd class="text-sm font-semibold text-slate-800">{{ caso.cliente?.ciudad || '---' }}</dd>
                    </div>
                   </dl>
               </div>

               <!-- Documentos Adjuntos Card -->
               <div class="bg-white rounded-3xl p-6 lg:p-8 shadow-[0_4px_20px_rgb(0,0,0,0.03)] border border-slate-100 transition-transform duration-300 hover:-translate-y-1 hover:shadow-[0_8px_30px_rgb(0,0,0,0.06)] group md:col-span-2">
                   <div class="flex items-center gap-3 mb-6 relative z-10">
                      <div class="w-10 h-10 rounded-xl bg-indigo-100 flex items-center justify-center text-indigo-600 shadow-sm border border-indigo-200/50">
                         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"></path></svg>
                      </div>
                       <h3 class="text-xl font-bold text-slate-800">Documentos (Admin)</h3>
                   </div>

                   <div v-if="!caso.aviso_siniestro_path?.length" class="text-center py-8 relative z-10">
                      <svg class="w-16 h-16 mx-auto text-slate-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 13h6m-3-3v6m5 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>
                      <p class="text-slate-400 font-medium">No hay documentos adjuntos</p>
                   </div>

                   <div v-else class="grid grid-cols-1 sm:grid-cols-2 gap-4 relative z-10">
                      <div v-for="(item, index) in caso.aviso_siniestro_path" :key="index"
                           class="flex items-center gap-4 bg-slate-50 p-4 rounded-xl border border-slate-100 hover:border-slate-200 transition-colors group/item">
                          
                          <div :class="getFileIconClass(item)" class="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0">
                             <svg v-if="isPdf(item)" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>
                             <svg v-else-if="isImage(item)" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                             <svg v-else class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>
                          </div>

                          <div class="flex-1 min-w-0">
                             <p class="text-sm font-semibold text-slate-800 truncate">{{ getItemLabel(item) }}</p>
                             <p class="text-xs text-slate-400">{{ getFileType(item) }} <span v-if="getFileDate(item)" class="ml-2">• {{ getFileDate(item) }}</span></p>
                          </div>

                           <div class="flex gap-2">
                              <button @click="previewFile(getFilePath(item))" class="p-2 text-slate-400 hover:text-blue-600 transition-colors rounded-lg hover:bg-blue-50" title="Previsualizar">
                                 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
                              </button>
                              <a :href="`/storage/${getFilePath(item)}`" download class="p-2 text-slate-400 hover:text-emerald-600 transition-colors rounded-lg hover:bg-emerald-50" title="Descargar">
                                 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
                              </a>
                              <button @click="openDeleteModal(index, 'admin')" class="p-2 text-slate-400 hover:text-red-600 transition-colors rounded-lg hover:bg-red-50" title="Eliminar">
                                 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                              </button>
                           </div>
                      </div>
                   </div>
               </div>
                </div>

                <!-- Fotos del Ajustador Card -->
                <div class="bg-white rounded-3xl p-6 lg:p-8 shadow-[0_4px_20px_rgb(0,0,0,0.03)] border border-slate-100 transition-transform duration-300 hover:-translate-y-1 hover:shadow-[0_8px_30px_rgb(0,0,0,0.06)] group md:col-span-2">
                    <div class="flex items-center gap-3 mb-6 relative z-10">
                       <div class="w-10 h-10 rounded-xl bg-amber-100 flex items-center justify-center text-amber-600 shadow-sm border border-amber-200/50">
                          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                       </div>
                       <h3 class="text-xl font-bold text-slate-800">Fotos / Archivos del Ajustador</h3>
                    </div>

                    <div v-if="ajustadorArchivos.length === 0" class="text-center py-8 relative z-10">
                       <svg class="w-16 h-16 mx-auto text-slate-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path></svg>
                       <p class="text-slate-400 font-medium">El ajustador aún no ha subido archivos</p>
                    </div>

                     <div v-else class="grid grid-cols-1 sm:grid-cols-2 gap-4 relative z-10">
                       <div v-for="(item, index) in ajustadorArchivos" :key="index"
                            class="flex items-center gap-4 bg-slate-50 p-4 rounded-xl border border-slate-100 hover:border-slate-200 transition-colors group/item">
                          
                          <div :class="getFileIconClass(item)" class="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0">
                             <svg v-if="isPdf(item)" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>
                             <svg v-else-if="isImage(item)" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                             <svg v-else class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>
                          </div>

                          <div class="flex-1 min-w-0">
                             <p class="text-sm font-semibold text-slate-800 truncate">{{ getItemLabel(item) }}</p>
                             <p class="text-xs text-slate-400">{{ getFileType(item) }} <span v-if="getFileDate(item)" class="ml-2">• {{ getFileDate(item) }}</span></p>
                          </div>

                          <div class="flex gap-2">
                             <button @click="previewFile(getFilePath(item))" class="p-2 text-slate-400 hover:text-blue-600 transition-colors rounded-lg hover:bg-blue-50" title="Previsualizar">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
                             </button>
                             <a :href="`/storage/${getFilePath(item)}`" download class="p-2 text-slate-400 hover:text-emerald-600 transition-colors rounded-lg hover:bg-emerald-50" title="Descargar">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
                             </a>
                             <button @click="openDeleteModal(index, 'ajustador')" class="p-2 text-slate-400 hover:text-red-600 transition-colors rounded-lg hover:bg-red-50" title="Eliminar">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                             </button>
                          </div>
                       </div>
                    </div>
                </div>

                <!-- Vehículo y Asignaciones (Wide Card) -->
           <div class="bg-white rounded-3xl p-6 lg:p-8 shadow-[0_4px_20px_rgb(0,0,0,0.03)] border border-slate-100 transition-transform duration-300 hover:-translate-y-1 hover:shadow-[0_8px_30px_rgb(0,0,0,0.06)] group">
               <div class="grid grid-cols-1 md:grid-cols-2 gap-8 divide-y md:divide-y-0 md:divide-x divide-slate-100">
                  <!-- Vehículo -->
                  <div class="md:pr-8">
                     <div class="flex items-center gap-3 mb-6">
                        <div class="w-10 h-10 rounded-xl bg-blue-100 flex items-center justify-center text-blue-600 shadow-sm border border-blue-200/50">
                           <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>
                        </div>
                        <h3 class="text-xl font-bold text-slate-800">Bien Afectado (Vehículo)</h3>
                     </div>
                     <div class="grid grid-cols-2 gap-5">
                       <div>
                         <dt class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-0.5">Placa</dt>
                         <dd class="text-base font-bold text-slate-900 border-2 border-slate-900 bg-slate-50 w-max px-2 py-0.5 rounded-md uppercase tracking-widest">{{ caso.vehiculo?.placa || '---' }}</dd>
                       </div>
                       <div>
                         <dt class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-0.5">Marca / Modelo</dt>
                         <dd class="text-sm font-semibold text-slate-800">{{ caso.vehiculo?.marca }} {{ caso.vehiculo?.modelo }}</dd>
                       </div>
                       <div>
                         <dt class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-0.5">Año</dt>
                         <dd class="text-sm font-semibold text-slate-800">{{ caso.vehiculo?.anio || '---' }}</dd>
                       </div>
                        <div>
                          <dt class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-0.5">Color</dt>
                          <dd class="text-sm font-semibold text-slate-800">{{ caso.vehiculo?.color || '---' }}</dd>
                        </div>
                        <div>
                          <dt class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-0.5">Valor Asegurado</dt>
                          <dd class="text-sm font-semibold text-slate-800">{{ caso.vehiculo?.valor_asegurado ? `$${Number(caso.vehiculo.valor_asegurado).toLocaleString()}` : '---' }}</dd>
                        </div>
                      </div>
                  </div>

                  <!-- Asignaciones -->
                  <div class="md:pl-8 pt-6 md:pt-0">
                     <div class="flex items-center gap-3 mb-6">
                        <div class="w-10 h-10 rounded-xl bg-purple-100 flex items-center justify-center text-purple-600 shadow-sm border border-purple-200/50">
                           <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
                        </div>
                        <h3 class="text-xl font-bold text-slate-800">Cadenas de Asignación</h3>
                     </div>
                     <dl class="space-y-4">
                        <div class="bg-slate-50 rounded-xl p-3 border border-slate-100 flex items-center justify-between">
                           <div>
                              <dt class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-0.5">Taller Asignado</dt>
                              <dd class="text-sm font-bold text-slate-800">{{ caso.taller?.razon_social || 'Pendiente de asignar' }}</dd>
                           </div>
                           <div class="w-8 h-8 rounded-full bg-white shadow-sm flex items-center justify-center text-slate-400">
                             <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"></path></svg>
                           </div>
                        </div>
                        <div class="bg-slate-50 rounded-xl p-3 border border-slate-100 flex items-center justify-between">
                           <div>
                              <dt class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-0.5">Ajustador a Cargo</dt>
                              <dd class="text-sm font-bold text-slate-800">{{ caso.ajustador?.nombre || 'Pendiente de asignar' }}</dd>
                           </div>
                           <div class="w-8 h-8 rounded-full bg-white shadow-sm flex items-center justify-center text-slate-400">
                             <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"></path></svg>
                           </div>
                        </div>
                        <div class="bg-slate-50 rounded-xl p-3 border border-slate-100 flex items-center justify-between">
                           <div>
                              <dt class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-0.5">Ejecutivo Interno</dt>
                              <dd class="text-sm font-bold text-slate-800">{{ caso.ejecutivo?.nombre || 'Pendiente de asignar' }}</dd>
                           </div>
                           <div class="w-8 h-8 rounded-full bg-white shadow-sm flex items-center justify-center text-slate-400">
                             <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="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
                           </div>
                        </div>
                     </dl>
                  </div>
               </div>
               <!-- Observaciones -->
                <div v-if="caso.observaciones" class="bg-white rounded-3xl p-6 lg:p-8 shadow-[0_4px_20px_rgb(0,0,0,0.03)] border border-slate-100 group">
                  <div class="flex items-center gap-3 mb-4">
                    <div class="w-10 h-10 rounded-xl bg-slate-100 flex items-center justify-center text-slate-600 shadow-sm border border-slate-200/50">
                      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
                    </div>
                    <h3 class="text-xl font-bold text-slate-800">Observaciones</h3>
                  </div>
                 <p class="text-sm text-slate-600 leading-relaxed whitespace-pre-wrap">{{ caso.observaciones }}</p>
                 </div>

                 <!-- Informe del Ajustador -->
                 <div v-if="informeData" class="bg-white rounded-3xl p-6 lg:p-8 shadow-[0_4px_20px_rgb(0,0,0,0.03)] border border-slate-100 group">
                   <div class="flex items-center gap-3 mb-6">
                     <div class="w-10 h-10 rounded-xl bg-green-100 flex items-center justify-center text-green-600 shadow-sm border border-green-200/50">
                       <svg class="w-5 h-5" 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"></path></svg>
                     </div>
                     <div class="flex-1">
                       <h3 class="text-xl font-bold text-slate-800">Informe del Ajustador</h3>
                       <p v-if="informeData.enviado_por_nombre" class="text-xs text-slate-400 mt-0.5">
                         Enviado por {{ informeData.enviado_por_nombre }} {{ informeData.enviado_at ? formatDate(informeData.enviado_at) : '' }}
                       </p>
                     </div>
                   </div>

                   <div class="space-y-6">
                     <!-- Datos Generales -->
                     <div>
                       <h4 class="text-sm font-bold text-slate-700 border-b border-slate-100 pb-2 mb-3">Datos Generales de la Inspección</h4>
                       <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                         <div>
                           <dt class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-0.5">Tipo de Inspección</dt>
                           <dd class="text-sm font-semibold text-slate-800 capitalize">{{ informeData.tipo_inspeccion || '---' }}</dd>
                         </div>
                         <div>
                           <dt class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-0.5">Fecha de Inspección</dt>
                           <dd class="text-sm font-semibold text-slate-800">{{ formatDate(informeData.fecha_inspeccion) || '---' }}</dd>
                         </div>
                         <div>
                           <dt class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-0.5">Lugar de Inspección</dt>
                           <dd class="text-sm font-semibold text-slate-800">{{ informeData.lugar_inspeccion || '---' }}</dd>
                         </div>
                       </div>
                     </div>

                     <!-- Daños Vehiculares -->
                     <div>
                       <h4 class="text-sm font-bold text-slate-700 border-b border-slate-100 pb-2 mb-3">Daños Vehiculares</h4>
                       <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                         <div v-if="informeData.danos_externos">
                           <dt class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-0.5">Daños Externos</dt>
                           <dd class="text-sm text-slate-700 whitespace-pre-wrap">{{ informeData.danos_externos }}</dd>
                         </div>
                         <div v-if="informeData.danos_internos">
                           <dt class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-0.5">Daños Internos</dt>
                           <dd class="text-sm text-slate-700 whitespace-pre-wrap">{{ informeData.danos_internos }}</dd>
                         </div>
                         <div v-if="informeData.danos_mecanicos">
                           <dt class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-0.5">Daños Mecánicos</dt>
                           <dd class="text-sm text-slate-700 whitespace-pre-wrap">{{ informeData.danos_mecanicos }}</dd>
                         </div>
                         <div v-if="informeData.danos_electricos">
                           <dt class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-0.5">Daños Eléctricos</dt>
                           <dd class="text-sm text-slate-700 whitespace-pre-wrap">{{ informeData.danos_electricos }}</dd>
                         </div>
                       </div>
                     </div>

                     <!-- Clasificación y Costos -->
                     <div>
                       <h4 class="text-sm font-bold text-slate-700 border-b border-slate-100 pb-2 mb-3">Clasificación y Costos</h4>
                       <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                         <div>
                           <dt class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-0.5">Clasificación del Daño</dt>
                           <dd class="text-sm font-semibold text-slate-800 capitalize">{{ informeData.clasificacion_dano || '---' }}</dd>
                         </div>
                         <div>
                           <dt class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-0.5">Costo Estimado Reparación</dt>
                           <dd class="text-sm font-semibold text-slate-800">{{ informeData.costo_estimado_reparacion ? `$${Number(informeData.costo_estimado_reparacion).toLocaleString()}` : '---' }}</dd>
                         </div>
                         <div>
                           <dt class="text-[10px] uppercase tracking-widest font-bold text-slate-400 mb-0.5">Tiempo Estimado (días)</dt>
                           <dd class="text-sm font-semibold text-slate-800">{{ informeData.tiempo_estimato_reparacion_dias || '---' }}</dd>
                         </div>
                       </div>
                     </div>

                     <!-- Piezas a Reemplazar -->
                     <div v-if="informeData.piezas_reemplazar?.length">
                       <h4 class="text-sm font-bold text-slate-700 border-b border-slate-100 pb-2 mb-3">Piezas a Reemplazar</h4>
                       <div class="overflow-x-auto">
                         <table class="w-full text-sm">
                           <thead>
                             <tr class="border-b border-slate-200">
                               <th class="text-left py-2 px-2 text-[10px] uppercase tracking-widest font-bold text-slate-400">Nombre</th>
                               <th class="text-left py-2 px-2 text-[10px] uppercase tracking-widest font-bold text-slate-400">Código</th>
                               <th class="text-right py-2 px-2 text-[10px] uppercase tracking-widest font-bold text-slate-400">Cant.</th>
                               <th class="text-right py-2 px-2 text-[10px] uppercase tracking-widest font-bold text-slate-400">Costo Unit.</th>
                               <th class="text-right py-2 px-2 text-[10px] uppercase tracking-widest font-bold text-slate-400">Subtotal</th>
                             </tr>
                           </thead>
                           <tbody>
                             <tr v-for="(pieza, i) in informeData.piezas_reemplazar" :key="i" class="border-b border-slate-50 hover:bg-slate-50">
                               <td class="py-2 px-2 font-semibold text-slate-700">{{ pieza.nombre || '---' }}</td>
                               <td class="py-2 px-2 text-slate-500">{{ pieza.codigo || '---' }}</td>
                               <td class="py-2 px-2 text-right text-slate-700">{{ pieza.cantidad ?? '---' }}</td>
                               <td class="py-2 px-2 text-right text-slate-700">{{ pieza.costo_unitario ? `$${Number(pieza.costo_unitario).toLocaleString()}` : '---' }}</td>
                               <td class="py-2 px-2 text-right font-bold text-slate-800">{{ pieza.cantidad && pieza.costo_unitario ? `$${Number(pieza.cantidad * pieza.costo_unitario).toLocaleString()}` : '---' }}</td>
                             </tr>
                           </tbody>
                         </table>
                       </div>
                     </div>

                     <!-- Observaciones / Conclusión -->
                     <div v-if="informeData.observaciones_tecnicas || informeData.conclusion_recomendacion" class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                       <div v-if="informeData.observaciones_tecnicas">
                         <h4 class="text-sm font-bold text-slate-700 border-b border-slate-100 pb-2 mb-3">Observaciones Técnicas</h4>
                         <p class="text-sm text-slate-700 whitespace-pre-wrap">{{ informeData.observaciones_tecnicas }}</p>
                       </div>
                       <div v-if="informeData.conclusion_recomendacion">
                         <h4 class="text-sm font-bold text-slate-700 border-b border-slate-100 pb-2 mb-3">Conclusión / Recomendación</h4>
                         <p class="text-sm text-slate-700 whitespace-pre-wrap">{{ informeData.conclusion_recomendacion }}</p>
                       </div>
                     </div>
                   </div>
                 </div>

             </div>
          </div>

          <!-- Right Column: Vertical Timeline -->
        <div class="bg-white rounded-3xl lg:h-[max-content] p-6 lg:p-8 shadow-[0_4px_20px_rgb(0,0,0,0.03)] border border-slate-100">
          <div class="flex items-center gap-3 mb-8">
             <div class="w-10 h-10 rounded-xl bg-slate-100 flex items-center justify-center text-slate-700 shadow-sm border border-slate-200/50">
                <svg class="w-5 h-5" 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"></path></svg>
             </div>
             <h3 class="text-xl font-bold text-slate-800">Timeline de Estados</h3>
          </div>

          <div class="relative pl-4 space-y-6">
            <!-- Timeline connection line -->
            <div class="absolute top-4 bottom-4 left-6 w-0.5 bg-slate-100 rounded-full"></div>
            
            <div v-if="!caso.estados_historicos?.length" class="text-sm text-slate-500 italic pl-6 relative">
               No hay historial registrado.
            </div>

            <!-- Timeline Items -->
            <div v-for="(estado, index) in caso.estados_historicos" :key="estado.id" class="relative pl-8 group">
              <!-- Node Point -->
              <div class="absolute left-[-5px] top-1.5 w-3 h-3 rounded-full border-2 border-white bg-blue-500 shadow-sm group-hover:scale-150 transition-transform ring-4 ring-blue-50"></div>
              
              <div class="bg-white border hover:border-blue-200 transition-colors rounded-2xl p-4 shadow-sm relative group-hover:shadow-md">
                 <!-- Tiny triangle logic -->
                 <div class="absolute top-2 -left-2 w-4 h-4 bg-white border-l border-b border-transparent group-hover:border-blue-200 transform rotate-45 transition-colors hidden sm:block"></div>
                 
                 <div class="flex flex-col gap-1.5 relative z-10">
                    <span :class="['px-2.5 py-1 rounded-md text-[10px] font-bold uppercase tracking-wider w-max', estadoColores[estado.estado] || 'bg-slate-100 text-slate-700']">
                      {{ estados[estado.estado] || estado.estado }}
                    </span>
                    <time class="text-[10px] uppercase font-bold text-slate-400 mt-1 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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                      {{ estado.fecha_ingreso }}
                    </time>
                    <p v-if="estado.nota" class="text-xs text-slate-600 mt-2 bg-slate-50 p-2 rounded border border-slate-100 italic">
                      "{{ estado.nota }}"
                    </p>
                 </div>
              </div>
            </div>

          </div>
        </div>

      </div>
    </div>

    <!-- Modal Previsualización -->
    <div v-if="showPreview" class="fixed inset-0 z-[100] overflow-y-auto">
      <div @click="showPreview = false" class="fixed inset-0 bg-slate-900/70 backdrop-blur-xl transition-opacity"></div>
      <div class="relative min-h-screen flex items-center justify-center p-4">
        <div class="relative bg-white rounded-3xl shadow-2xl max-w-5xl w-full max-h-[90vh] overflow-hidden">
          <div class="flex items-center justify-between p-6 border-b border-slate-100">
            <h3 class="text-lg font-bold text-slate-800 truncate pr-4">{{ previewFileName }}</h3>
            <button @click="showPreview = false" class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center text-slate-400 hover:text-slate-900 transition-colors flex-shrink-0">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
            </button>
          </div>
          <div class="p-6 overflow-auto max-h-[calc(90vh-80px)]">
            <img v-if="isImage(previewFilePath)" :src="`/storage/${previewFilePath}`" class="max-w-full h-auto rounded-xl mx-auto" />
            <iframe v-else-if="isPdf(previewFilePath)" :src="`/storage/${previewFilePath}`" class="w-full h-[70vh] rounded-xl border border-slate-200"></iframe>
            <div v-else class="text-center py-12">
              <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 13h6m-3-3v6m5 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>
              <p class="text-slate-400 mb-4">Vista previa no disponible para este tipo de archivo</p>
              <a :href="`/storage/${previewFilePath}`" download class="inline-flex items-center gap-2 px-6 py-3 bg-blue-600 text-white rounded-xl font-bold hover:bg-blue-700 transition-colors">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
                Descargar archivo
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div v-if="showDeleteModal" class="fixed inset-0 z-[100] overflow-y-auto">
      <div @click="showDeleteModal = false" class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity"></div>
      <div class="relative min-h-screen flex items-center justify-center p-4">
        <div class="relative bg-white rounded-2xl shadow-2xl max-w-sm w-full overflow-hidden border border-slate-200">
          <div class="p-6 text-center">
            <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-4">
              <svg class="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"></path></svg>
            </div>
            <h3 class="text-lg font-bold text-slate-800 mb-2">Eliminar Archivo</h3>
            <p class="text-sm text-slate-500 mb-6">¿Estás seguro de eliminar este archivo? Solo se quitará de la lista, el archivo físico permanece en el servidor.</p>
            <div class="flex gap-3">
              <button @click="showDeleteModal = false" class="flex-1 px-4 py-3 text-sm font-bold text-slate-400 bg-slate-50 rounded-xl hover:bg-slate-100 transition-colors">Cancelar</button>
              <button @click="confirmDelete" class="flex-1 px-4 py-3 bg-red-600 text-white font-bold rounded-xl hover:bg-red-700 transition-colors">Eliminar</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <ChatWidget
      :caso-id="caso.id"
      :fetch-url="`/casos/${caso.id}/chat`"
      :store-url="`/casos/${caso.id}/chat`"
      current-user-type="admin"
      current-user-name="Admin"
      :other-party-name="caso.ajustador?.nombre || 'Ajustador'"
    />
  </AppLayout>
</template>

<style scoped>
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in-up {
  animation: fadeInUp 0.5s ease-out forwards;
}

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
</style>

