<script setup>
import { onMounted } from 'vue';
import { Head } from '@inertiajs/vue3';

const props = defineProps({
  caso: Object
});

onMounted(() => {
  setTimeout(() => {
    window.print();
  }, 500);
});

const formatDate = (date) => {
  if (!date) return 'N/A';
  return new Date(date).toLocaleDateString();
};
</script>

<template>
  <Head :title="'Hoja de Ruta - ' + caso.numero_reclamo" />
  
  <div class="print-container p-8 max-w-4xl mx-auto bg-white min-h-screen text-slate-800">
    <!-- Header -->
    <div class="flex justify-between items-start border-b-2 border-slate-900 pb-6 mb-8">
      <div>
        <h1 class="text-3xl font-black uppercase tracking-tighter">Hoja de Ruta</h1>
        <p class="text-slate-500 font-bold mt-1 tracking-widest uppercase text-xs">Sistema de Gestión de Siniestros</p>
      </div>
      <div class="text-right">
        <div class="text-2xl font-black text-blue-600">{{ caso.numero_reclamo }}</div>
        <p class="text-xs font-bold text-slate-400 uppercase mt-1">SIAS: {{ caso.numero_caso_sias || 'N/A' }}</p>
      </div>
    </div>

    <!-- main Grid -->
    <div class="grid grid-cols-2 gap-8 mb-8">
      <!-- Section: Info General -->
      <div class="space-y-4">
        <h2 class="text-xs font-black uppercase bg-slate-100 p-2 rounded tracking-widest">Información del Caso</h2>
        <div class="grid grid-cols-2 gap-y-3 text-sm">
          <span class="font-bold text-slate-500 uppercase text-[10px]">Aseguradora:</span>
          <span class="font-bold">{{ caso.aseguradora?.nombre || 'Particular' }}</span>
          
          <span class="font-bold text-slate-500 uppercase text-[10px]">Fecha Siniestro:</span>
          <span class="font-mono">{{ formatDate(caso.fecha_siniestro) }}</span>
          
          <span class="font-bold text-slate-500 uppercase text-[10px]">Fecha Asignación:</span>
          <span class="font-mono font-bold">{{ formatDate(caso.fecha_asignacion) }}</span>
          
          <span class="font-bold text-slate-500 uppercase text-[10px]">Cobertura:</span>
          <span class="font-black text-blue-600">{{ caso.cobertura }}</span>
        </div>
      </div>

      <!-- Section: Ajustador -->
      <div class="space-y-4">
        <h2 class="text-xs font-black uppercase bg-slate-100 p-2 rounded tracking-widest">Ajustador Asignado</h2>
        <div class="grid grid-cols-2 gap-y-3 text-sm">
          <span class="font-bold text-slate-500 uppercase text-[10px]">Ajustador:</span>
          <span class="font-bold text-lg">{{ caso.ajustador?.nombre || 'PENDIENTE' }}</span>
          
          <span class="font-bold text-slate-500 uppercase text-[10px]">Celular:</span>
          <span class="font-mono">{{ caso.ajustador?.celular || 'N/A' }}</span>
          
          <span class="font-bold text-slate-500 uppercase text-[10px]">Email:</span>
          <span class="text-xs">{{ caso.ajustador?.email || 'N/A' }}</span>
        </div>
      </div>
    </div>

    <!-- Section: Asegurado y Vehiculo -->
    <div class="grid grid-cols-2 gap-8 mb-8 border-t border-slate-100 pt-8">
      <div class="space-y-4">
        <h2 class="text-xs font-black uppercase bg-slate-100 p-2 rounded tracking-widest">Datos del Asegurado</h2>
        <div class="space-y-2">
          <p class="text-xl font-black">{{ caso.cliente?.nombre }}</p>
          <div class="grid grid-cols-2 text-sm gap-y-1">
             <span class="text-slate-500 text-[10px] font-bold uppercase">Identificación:</span>
             <span class="font-mono">{{ caso.cliente?.ruc }}</span>
             <span class="text-slate-500 text-[10px] font-bold uppercase">Teléfono:</span>
             <span class="font-bold">{{ caso.cliente?.telefono }}</span>
             <span class="text-slate-500 text-[10px] font-bold uppercase">Email:</span>
             <span class="text-xs">{{ caso.cliente?.email }}</span>
          </div>
        </div>
      </div>

      <div class="space-y-4">
        <h2 class="text-xs font-black uppercase bg-slate-100 p-2 rounded tracking-widest">Datos del Vehículo</h2>
        <div class="p-4 border-2 border-slate-900 rounded-xl bg-slate-50">
           <p class="text-3xl font-black text-center mb-2 tracking-tighter">{{ caso.vehiculo?.placa }}</p>
           <div class="flex justify-between text-sm border-t border-slate-300 pt-2">
             <span class="font-bold uppercase">{{ caso.vehiculo?.marca }}</span>
             <span class="text-slate-600">{{ caso.vehiculo?.modelo }} ({{ caso.vehiculo?.anio }})</span>
           </div>
        </div>
      </div>
    </div>

    <!-- Section: Taller -->
    <div class="space-y-4 mb-8 border-t border-slate-100 pt-8">
      <h2 class="text-xs font-black uppercase bg-slate-100 p-2 rounded tracking-widest">Destino de Inspección (Taller)</h2>
      <div class="grid grid-cols-2 gap-8">
        <div>
          <p class="text-lg font-black">{{ caso.taller?.razon_social || 'N/A' }}</p>
          <p class="text-sm text-slate-600 mt-1">{{ caso.taller?.direccion || 'Consulte en sistema' }}</p>
        </div>
        <div class="grid grid-cols-2 text-sm gap-y-1">
           <span class="text-slate-500 text-[10px] font-bold uppercase">Ejecutivo Taller:</span>
           <span class="font-bold">{{ caso.taller_ejecutivo || 'N/A' }}</span>
           <span class="text-slate-500 text-[10px] font-bold uppercase">Teléfono:</span>
           <span class="font-bold">{{ caso.taller_telefono || 'N/A' }}</span>
        </div>
      </div>
    </div>

    <!-- Observaciones -->
    <div class="space-y-4 mb-16 border-t border-slate-100 pt-8">
      <h2 class="text-xs font-black uppercase bg-slate-100 p-2 rounded tracking-widest">Observaciones de Coordinación</h2>
      <div class="min-h-[100px] p-4 border border-slate-200 rounded-xl text-sm italic text-slate-600 bg-slate-50">
        {{ caso.observaciones || 'Sin observaciones registradas.' }}
      </div>
    </div>

    <!-- Signatures -->
    <div class="grid grid-cols-2 gap-32 mt-auto pt-24">
      <div class="border-t border-slate-900 pt-4 text-center">
        <p class="text-[10px] font-black uppercase tracking-widest">Asignado por (Firma)</p>
      </div>
      <div class="border-t border-slate-900 pt-4 text-center">
        <p class="text-[10px] font-black uppercase tracking-widest">Recibido por (Firma / Sello)</p>
      </div>
    </div>

    <!-- Footer Page -->
    <div class="fixed bottom-8 left-0 right-0 text-center text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em] print-only">
      Documento generado automáticamente por Sistema Innova &copy; {{ new Date().getFullYear() }}
    </div>
  </div>
</template>

<style>
@media print {
  body {
    background: white;
  }
  .print-container {
    padding: 0 !important;
    max-width: 100% !important;
  }
  .no-print {
    display: none !important;
  }
  .print-only {
    display: block !important;
  }
}

.print-only {
  display: none;
}
</style>
