<script setup>
import { ref } from 'vue';
import { Head, Link, useForm } from '@inertiajs/vue3';
import AppLayout from '@/Layouts/AppLayout.vue';

const props = defineProps({
  title: String,
  casos: Array,
  aseguradoras: Array,
  filters: Object,
  resultados_cruce: Array,
  resumen_cruce: Object,
  alertas: Array
});

const formUpload = useForm({
  archivo_excel: null,
  aseguradora_id: props.filters.aseguradora_id || ''
});

const filterForm = useForm({
  aseguradora_id: props.filters.aseguradora_id || ''
});

const submitUpload = () => {
    formUpload.post(route('facturacion.cargar'), {
        onSuccess: () => {
            formUpload.reset('archivo_excel');
        }
    });
};

const applyFilter = () => {
    filterForm.get(route('facturacion'), { preserveState: true });
};

const getBadgeClass = (estado) => {
    switch (estado) {
        case 'coincide': return 'bg-emerald-100 text-emerald-700';
        case 'diferencia': return 'bg-red-100 text-red-700 font-bold';
        case 'no_encontrado': return 'bg-orange-100 text-orange-700';
        default: return 'bg-slate-100 text-slate-700';
    }
};
</script>

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

  <AppLayout :title="title">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <div class="mb-8">
        <h1 class="text-2xl font-bold text-slate-900">Cruce de Facturación</h1>
        <p class="text-slate-500 mt-1">Concilie la información del sistema con los reportes de las aseguradoras mediante carga de Excel.</p>
      </div>

      <!-- Alertas de Facturación (M7 PPTX) -->
      <div v-if="alertas && alertas.length > 0" class="mb-8 space-y-3">
         <div v-for="(alerta, idx) in alertas" :key="idx" 
            class="flex items-center gap-4 p-4 rounded-2xl border-l-4 shadow-sm animate-pulse-slow"
            :class="alerta.tipo === 'corte' ? 'bg-amber-50 border-amber-500 text-amber-800' : 'bg-blue-50 border-blue-500 text-blue-800'"
         >
            <div class="w-8 h-8 rounded-full flex items-center justify-center bg-white shadow-sm">
                <svg v-if="alerta.tipo === 'corte'" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                <svg v-else 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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
            </div>
            <div>
                <p class="text-xs font-bold uppercase tracking-wider">{{ alerta.tipo === 'corte' ? 'Recordatorio de Corte' : 'Recordatorio de Cruce' }}</p>
                <p class="text-sm font-medium">{{ alerta.mensaje }}</p>
            </div>
         </div>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Panel de Filtros y Carga -->
        <div class="lg:col-span-1 space-y-6">
          <div v-if="resumen_cruce" class="bg-indigo-900 rounded-2xl shadow-lg p-6 text-white overflow-hidden relative">
             <div class="relative z-10">
                <h3 class="text-[10px] font-bold text-indigo-300 uppercase tracking-widest mb-4">Resumen del Último Cruce</h3>
                <div class="grid grid-cols-2 gap-4">
                   <div>
                      <div class="text-2xl font-bold">{{ resumen_cruce.coincide }}</div>
                      <div class="text-[10px] text-indigo-300">Coincidencias</div>
                   </div>
                   <div>
                      <div class="text-2xl font-bold">{{ resumen_cruce.diferencia }}</div>
                      <div class="text-[10px] text-indigo-300">Diferencias</div>
                   </div>
                   <div>
                      <div class="text-2xl font-bold">{{ resumen_cruce.no_encontrado }}</div>
                      <div class="text-[10px] text-indigo-300">No Encontrados</div>
                   </div>
                   <div>
                      <div class="text-2xl font-bold">{{ resumen_cruce.total }}</div>
                      <div class="text-[10px] text-indigo-300">Total Procesado</div>
                   </div>
                </div>
             </div>
             <div class="absolute -right-4 -bottom-4 opacity-10">
                <svg class="w-24 h-24" fill="currentColor" viewBox="0 0 20 20"><path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"></path></svg>
             </div>
          </div>

          <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
            <h3 class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-6">Filtros de Conciliación</h3>
            
            <div class="space-y-4">
              <div>
                <label class="form-label">Aseguradora</label>
                <select v-model="filterForm.aseguradora_id" @change="applyFilter" class="form-input text-sm">
                  <option value="">Todas las aseguradoras</option>
                  <option v-for="a in aseguradoras" :key="a.id" :value="a.id">{{ a.nombre }}</option>
                </select>
              </div>
            </div>
          </div>

          <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
            <h3 class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-6">Carga de Archivo</h3>
            
            <form @submit.prevent="submitUpload" class="space-y-6">
              <div>
                <label class="form-label">Archivo Excel/CSV *</label>
                <input 
                    type="file" 
                    @input="formUpload.archivo_excel = $event.target.files[0]"
                    class="block w-full text-xs text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-[10px] file:font-semibold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100 transition-all border border-slate-100 rounded-xl p-2"
                />
              </div>

              <input type="hidden" v-model="formUpload.aseguradora_id" />

              <button 
                type="submit" 
                :disabled="formUpload.processing || !formUpload.archivo_excel || !formUpload.aseguradora_id"
                class="w-full py-3 bg-primary-600 text-white rounded-xl font-bold hover:bg-primary-700 transition-all shadow-lg shadow-primary-200 disabled:opacity-50 uppercase text-[10px] tracking-widest"
              >
                Cargar para Cruce
              </button>
            </form>
          </div>

          <div class="bg-slate-900 rounded-2xl p-6 text-white" v-if="resultados_cruce">
             <h3 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-4">Reporte</h3>
             <p class="text-xs text-slate-300 mb-6">Genere el archivo final con las diferencias encontradas para enviar a la aseguradora.</p>
             <Link 
                :href="route('facturacion.generar')"
                class="w-full flex items-center justify-center gap-2 py-3 bg-white text-slate-900 rounded-xl text-[10px] font-bold uppercase tracking-widest hover:bg-slate-100 transition-all"
             >
                Generar Archivo Aseguradora
                <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="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
             </Link>
          </div>
        </div>

        <!-- Resultados del Cruce -->
        <div class="lg:col-span-2 space-y-8">
          <!-- Tabla de Resultados de Conciliación -->
          <div v-if="resultados_cruce" class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden ring-4 ring-primary-50 ring-opacity-50">
            <div class="px-6 py-4 bg-primary-900 border-b border-primary-800 flex justify-between items-center text-white">
               <h3 class="text-sm font-bold">Resultados del Cruce Realizado</h3>
               <span class="px-2 py-0.5 bg-primary-800 text-white rounded text-[10px] font-bold">{{ resultados_cruce.length }} reclamos en Excel</span>
            </div>

            <div class="overflow-x-auto">
              <table class="w-full text-left text-sm">
                <thead>
                  <tr class="bg-slate-50 border-b border-slate-100 text-[10px] uppercase text-slate-500 tracking-wider">
                    <th class="px-6 py-4 font-bold">Reclamo / SIAS</th>
                    <th class="px-6 py-4 font-bold">Placa</th>
                    <th class="px-6 py-4 font-bold">Cobertura</th>
                    <th class="px-6 py-4 font-bold">Sistema</th>
                    <th class="px-6 py-4 font-bold">Excel</th>
                    <th class="px-6 py-4 font-bold text-right">Diferencia</th>
                    <th class="px-6 py-4 font-bold text-right">Estado</th>
                  </tr>
                </thead>
                <tbody class="divide-y divide-slate-50">
                  <tr v-for="(res, idx) in resultados_cruce" :key="idx" class="hover:bg-slate-50 transition-colors">
                    <td class="px-6 py-3">
                      <div class="font-bold text-slate-800">{{ res.numero_reclamo }}</div>
                      <div class="text-[10px] text-slate-500">{{ res.numero_caso_sias }}</div>
                    </td>
                    <td class="px-6 py-3 text-xs font-mono text-primary-600">{{ res.placa || 'N/A' }}</td>
                    <td class="px-6 py-3">
                        <span class="px-2 py-0.5 bg-slate-100 text-slate-600 rounded text-[9px] font-bold uppercase">{{ res.cobertura || 'N/A' }}</span>
                    </td>
                    <td class="px-6 py-3 text-xs text-slate-600 font-medium">$ {{ res.valor_sistema.toFixed(2) }}</td>
                    <td class="px-6 py-3 text-xs text-slate-600 font-medium">$ {{ res.valor_externo.toFixed(2) }}</td>
                    <td class="px-6 py-3 text-right">
                        <div :class="['text-xs font-bold', res.diferencia !== 0 ? 'text-red-600' : 'text-slate-400']">
                            $ {{ res.diferencia.toFixed(2) }}
                        </div>
                    </td>
                    <td class="px-6 py-3 text-right">
                       <span :class="['px-2 py-1 rounded text-[10px] font-bold uppercase tracking-tighter', getBadgeClass(res.estado)]">
                           {{ res.estado.replace('_', ' ') }}
                       </span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          <!-- Casos Pendientes -->
          <div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
            <div class="px-6 py-4 bg-slate-50 border-b border-slate-100 flex justify-between items-center">
               <h3 class="text-sm font-bold text-slate-800">Casos en el Sistema (Pendientes)</h3>
               <span class="px-2 py-0.5 bg-primary-100 text-primary-700 rounded text-[10px] font-bold">{{ casos.length }} resultados</span>
            </div>

            <div class="overflow-x-auto">
              <table class="w-full text-left text-sm">
                <thead>
                  <tr class="bg-white border-b border-slate-50 text-[10px] uppercase text-slate-500 tracking-wider">
                    <th class="px-6 py-4 font-bold">Reclamo / SIAS</th>
                    <th class="px-6 py-4 font-bold">Aseguradora</th>
                    <th class="px-6 py-4 font-bold">Ajustador</th>
                    <th class="px-6 py-4 font-bold">Valor Ajuste</th>
                    <th class="px-6 py-4 font-bold text-right">Acción</th>
                  </tr>
                </thead>
                <tbody class="divide-y divide-slate-50">
                  <tr v-for="caso in casos" :key="caso.id" class="hover:bg-slate-50 transition-colors">
                    <td class="px-6 py-4">
                      <div class="font-bold text-slate-800">{{ caso.numero_reclamo }}</div>
                      <div class="text-[10px] text-slate-500">{{ caso.numero_caso_sias }}</div>
                    </td>
                    <td class="px-6 py-4 text-xs text-slate-600">{{ caso.aseguradora?.nombre }}</td>
                    <td class="px-6 py-4 text-xs text-slate-600">{{ caso.ajustador?.nombre || 'S/N' }}</td>
                    <td class="px-6 py-4">
                      <div class="font-bold text-primary-700">$ {{ (parseFloat(caso.tarifa_ajuste) + parseFloat(caso.valor_kilometraje)).toFixed(2) }}</div>
                    </td>
                    <td class="px-6 py-4 text-right">
                       <Link :href="route('casos.show', caso.id)" class="text-primary-600 hover:text-primary-800 font-bold text-[10px] uppercase">Ver Detalle</Link>
                    </td>
                  </tr>
                </tbody>
              </table>
              
              <div v-if="casos.length === 0" class="p-12 text-center text-slate-400 italic">
                 No hay casos registrados actualmente en estado de facturación.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </AppLayout>
</template>
