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

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

const filterAjustador = ref(props.filters.ajustador_id || '');
const filterPago = ref(props.filters.estado_pago || '');

const applyFilters = () => {
  router.get(route('facturacion.reporte-ajustadores'), {
    ajustador_id: filterAjustador.value,
    estado_pago: filterPago.value
  }, { preserveState: true });
};

const exportReport = () => {
    window.location.href = route('facturacion.reporte-ajustadores', {
        ajustador_id: filterAjustador.value,
        estado_pago: filterPago.value,
        export: 1
    });
};

const formatCurrency = (val) => {
    return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(val);
};
</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="flex justify-between items-end mb-8">
        <div>
          <h1 class="text-3xl font-extrabold text-slate-900 tracking-tight">Reporte de Honorarios</h1>
          <p class="text-slate-500 mt-1">Liquidación y seguimiento de pagos a ajustadores.</p>
        </div>
        <button 
            @click="exportReport"
            class="px-6 py-3 bg-green-600 text-white rounded-xl font-bold hover:bg-green-700 transition-all shadow-lg shadow-green-100 flex items-center gap-2 uppercase text-xs tracking-widest"
        >
            <font-awesome-icon :icon="['fas', 'file-excel']" />
            Exportar CSV
        </button>
      </div>

      <!-- Filtros -->
      <div class="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 mb-8 grid grid-cols-1 md:grid-cols-3 gap-6 items-end">
        <div>
          <label class="block text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-2">Filtrar por Ajustador</label>
          <select v-model="filterAjustador" class="w-full bg-slate-50 border-slate-200 rounded-xl text-sm focus:ring-brand-blue" @change="applyFilters">
            <option value="">TODOS LOS AJUSTADORES</option>
            <option v-for="a in ajustadores" :key="a.id" :value="a.id">{{ a.nombre }}</option>
          </select>
        </div>
        <div>
          <label class="block text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-2">Estado de Pago</label>
          <select v-model="filterPago" class="w-full bg-slate-50 border-slate-200 rounded-xl text-sm focus:ring-brand-blue" @change="applyFilters">
            <option value="">TODOS LOS ESTADOS</option>
            <option value="pendiente">PENDIENTE</option>
            <option value="pagado">PAGADO</option>
            <option value="pendiente_validacion">EN VALIDACIÓN</option>
          </select>
        </div>
        <div class="flex gap-2">
            <button @click="applyFilters" class="flex-1 py-2.5 bg-brand-blue text-white rounded-xl font-bold text-xs uppercase tracking-widest">Filtrar</button>
            <Link :href="route('facturacion.reporte-ajustadores')" class="px-4 py-2.5 bg-slate-100 text-slate-500 rounded-xl font-bold text-xs flex items-center justify-center">
                <font-awesome-icon :icon="['fas', 'redo']" />
            </Link>
        </div>
      </div>

      <!-- Tabla -->
      <div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
        <table class="w-full text-left">
          <thead>
            <tr class="bg-slate-50 border-b border-slate-100">
              <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase">Fecha</th>
              <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase">Caso / Reclamo</th>
              <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase">Ajustador</th>
              <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase">Honorario</th>
              <th class="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase">Estado Pago</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-slate-50">
            <tr v-for="caso in casos" :key="caso.id" class="hover:bg-slate-50/50 transition-colors">
              <td class="px-6 py-4 text-xs text-slate-500 font-medium">
                {{ new Date(caso.created_at).toLocaleDateString() }}
              </td>
              <td class="px-6 py-4">
                <div class="text-xs font-bold text-slate-900">{{ caso.numero_reclamo }}</div>
                <div class="text-[10px] text-slate-400 font-mono">{{ caso.vehiculo?.placa }}</div>
              </td>
              <td class="px-6 py-4 text-xs font-semibold text-slate-700">
                {{ caso.ajustador?.nombre || 'SIN ASIGNAR' }}
              </td>
              <td class="px-6 py-4 text-xs font-black text-brand-blue">
                {{ formatCurrency(caso.honorario_perito || 0) }}
              </td>
              <td class="px-6 py-4">
                <span class="px-3 py-1 rounded-full text-[9px] font-black uppercase tracking-widest"
                  :class="{
                    'bg-green-100 text-green-700': caso.pago_estado === 'pagado',
                    'bg-amber-100 text-amber-700': caso.pago_estado === 'pendiente' || !caso.pago_estado,
                    'bg-blue-100 text-blue-700': caso.pago_estado === 'pendiente_validacion'
                  }"
                >
                  {{ caso.pago_estado === 'pagado' ? 'PAGADO' : (caso.pago_estado === 'pendiente_validacion' ? 'VALIDANDO' : 'PENDIENTE') }}
                </span>
              </td>
            </tr>
            <tr v-if="casos.length === 0">
                <td colspan="5" class="px-6 py-12 text-center text-slate-400 italic text-sm">
                    No se encontraron registros de honorarios con los filtros seleccionados.
                </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </AppLayout>
</template>
