import React, { useState, useRef } from 'react';
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

const SALARIO_MINIMO_2025 = 1423500;
const AUXILIO_TRANSPORTE_2025 = 162000;
const DOS_SMLV = SALARIO_MINIMO_2025 * 2;

export default function LiquidadorLaboral({ darkMode }) {
  const resultRef = useRef(null);
  const [formData, setFormData] = useState({
    nombreEmpleado: '',
    cedula: '',
    cargo: '',
    salarioMensual: '',
    recibeAuxTransporte: true,
    fechaIngreso: '',
    fechaRetiro: '',
    fechaPrimaInicial: '',
    tipoContrato: 'indefinido',
    diasVacacionesTomadas: '0',
    diasNoLaborados: '0',
    razonRetiro: 'renuncia',
    sueldoRecibido: '0',
    auxTransporteRecibido: '0',
    formaPago: '30',
  });

  const [resultado, setResultado] = useState(null);
  const [mostrarResultado, setMostrarResultado] = useState(false);

  const calcularDias360 = (fechaInicio, fechaFin) => {
    const inicio = new Date(fechaInicio);
    const fin = new Date(fechaFin);

    let dia1 = inicio.getDate();
    let mes1 = inicio.getMonth() + 1;
    let año1 = inicio.getFullYear();

    let dia2 = fin.getDate();
    let mes2 = fin.getMonth() + 1;
    let año2 = fin.getFullYear();

    if (dia1 === 31) dia1 = 30;
    if (dia2 === 31) dia2 = 30;

    return (año2 - año1) * 360 + (mes2 - mes1) * 30 + (dia2 - dia1);
  };

  const calcularDiasPendientes = (fechaRetiro, formaPago) => {
    const fecha = new Date(fechaRetiro);
    const ultimoDiaDelMes = new Date(fecha.getFullYear(), fecha.getMonth() + 1, 0).getDate();

    if (formaPago === 15) {
      return ultimoDiaDelMes - 15;
    }
    return ultimoDiaDelMes;
  };

  const calcularDiasPrimaActual = (fechaPrimaInicial, fechaRetiro) => {
    return calcularDias360(fechaPrimaInicial, fechaRetiro) + 1;
  };

  const handleInputChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value
    }));
  };

  const formatCurrency = (value) => {
    return new Intl.NumberFormat('es-CO', {
      style: 'currency',
      currency: 'COP',
      maximumFractionDigits: 0,
    }).format(value || 0);
  };

  const calcularLiquidacion = () => {
    const salario = parseFloat(formData.salarioMensual) || 0;

    if (!formData.fechaIngreso || !formData.fechaRetiro) {
      alert('Ingresa fechas de inicio y retiro');
      return;
    }

    const formaPago = parseInt(formData.formaPago);
    const diasTrabajados360 = calcularDias360(formData.fechaIngreso, formData.fechaRetiro) - 1;
    const diasNoLab = parseInt(formData.diasNoLaborados) || 0;
    const diasVacacionesTomadas = parseInt(formData.diasVacacionesTomadas) || 0;
    const diasLaboralesEfectivos = diasTrabajados360 - diasNoLab;

    const incluirAuxTransporte = formData.recibeAuxTransporte && salario <= DOS_SMLV;
    const auxTransporte = incluirAuxTransporte ? AUXILIO_TRANSPORTE_2025 : 0;
    const baseLiquidacion = salario + auxTransporte;

    const baseCesantias = salario + auxTransporte;
    const cesantias = (baseCesantias * diasLaboralesEfectivos) / 360;
    const interesesCesantias = (diasLaboralesEfectivos / 360) * cesantias * 0.12;

    const diasVacacionDerechos = (diasTrabajados360 / 360) * 15;
    const diasVacacionesPendientes = Math.max(0, diasVacacionDerechos - diasVacacionesTomadas);
    const liquidacionVacaciones = (salario * diasVacacionesPendientes) / 30;

    let diasPrimaActual = diasTrabajados360;
    if (formData.fechaPrimaInicial) {
      diasPrimaActual = calcularDiasPrimaActual(formData.fechaPrimaInicial, formData.fechaRetiro);
    }
    const primaServicios = (baseCesantias * diasPrimaActual) / 360;

    const diaDelMes = new Date(formData.fechaRetiro).getDate() + 1;
    const diasPendientes = calcularDiasPendientes(formData.fechaRetiro, formaPago);

    const sueldoRecibido = parseFloat(formData.sueldoRecibido) || 0;
    const sueldoPendiente = Math.max(0, (salario - sueldoRecibido) / 30 * diasPendientes);

    const auxTransporteRecibido = parseFloat(formData.auxTransporteRecibido) || 0;
    const auxTransportePendiente = Math.max(0, (auxTransporte * diasPendientes) / formaPago - auxTransporteRecibido);

    const totalDevengado = cesantias + interesesCesantias + liquidacionVacaciones + primaServicios + sueldoPendiente + auxTransportePendiente;

    const baseRetencion = sueldoPendiente + auxTransportePendiente;
    const retencionSalud = baseRetencion * 0.04;
    const retencionPension = baseRetencion * 0.04;
    const totalRetenciones = retencionSalud + retencionPension;

    let indemnizacion = 0;
    if (formData.razonRetiro === 'despidoSinCausa' && formData.tipoContrato === 'indefinido') {
      const anosServicio = Math.floor(diasLaboralesEfectivos / 360);
      indemnizacion = anosServicio === 0 ? salario * 30 : (salario * 30) + (salario * 20 * (anosServicio - 1));
    }

    const totalAPagar = totalDevengado - totalRetenciones + indemnizacion;

    setResultado({
      diasTrabajados: diasLaboralesEfectivos,
      diaDelMes,
      diasPendientes,
      baseLiquidacion,
      baseCesantias,
      cesantias,
      interesesCesantias,
      diasVacacionesPendientes: diasVacacionesPendientes.toFixed(2),
      liquidacionVacaciones,
      diasPrimaActual,
      primaServicios,
      sueldoPendiente,
      auxTransportePendiente,
      totalDevengado,
      retencionSalud,
      retencionPension,
      totalRetenciones,
      indemnizacion,
      totalAPagar,
      formaPago,
      salarioMensual: salario,
      auxTransporte,
    });

    setMostrarResultado(true);
  };

  const descargarPDF = async () => {
    if (!resultRef.current) return;

    try {
      const canvas = await html2canvas(resultRef.current, {
        scale: 2,
        backgroundColor: '#ffffff',
        logging: false,
        useCORS: true,
        allowTaint: true,
      });

      const imgData = canvas.toDataURL('image/png');
      const pdf = new jsPDF({
        orientation: 'p',
        unit: 'mm',
        format: 'a4'
      });

      const pdfWidth = pdf.internal.pageSize.getWidth();
      const pdfHeight = pdf.internal.pageSize.getHeight();
      const imgWidth = pdfWidth - 40;
      const imgHeight = (canvas.height * imgWidth) / canvas.width;

      const yOffset = (pdfHeight - imgHeight) / 2;

      pdf.addImage(imgData, 'PNG', 20, Math.max(10, yOffset), imgWidth, imgHeight);

      pdf.save(`liquidacion-${new Date().getTime()}.pdf`);
    } catch (error) {
      console.error('Error generando PDF:', error);
      alert('Error al generar el PDF');
    }
  };

  const resetForm = () => {
    setFormData({
      nombreEmpleado: '',
      cedula: '',
      cargo: '',
      salarioMensual: '',
      recibeAuxTransporte: true,
      fechaIngreso: '',
      fechaRetiro: '',
      fechaPrimaInicial: '',
      tipoContrato: 'indefinido',
      diasVacacionesTomadas: '0',
      diasNoLaborados: '0',
      razonRetiro: 'renuncia',
      sueldoRecibido: '0',
      auxTransporteRecibido: '0',
      formaPago: '30',
    });
    setMostrarResultado(false);
    setResultado(null);
  };

  return (
    <div className={`p-6 max-w-7xl mx-auto min-h-screen ${
      darkMode
        ? 'bg-gradient-to-br from-gray-900 to-gray-800'
        : 'bg-gradient-to-br from-blue-50 to-gray-50'
    }`}>
      <div className={`rounded-xl p-6 mb-8 shadow-lg bg-gradient-to-r from-blue-600 to-blue-800 text-white`}>
        <h1 className="text-3xl font-bold mb-1">Liquidación de Prestaciones Laborales</h1>
        <p className="text-blue-100 text-sm">Colombia 2025</p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div className="lg:col-span-1">
          <div className={`rounded-xl shadow-lg border p-6 sticky top-6 ${
            darkMode
              ? 'bg-gray-800 border-gray-700'
              : 'bg-white border-blue-200'
          }`}>
            <h2 className={`text-lg font-bold border-b-2 border-blue-600 pb-3 mb-4 ${
              darkMode ? 'text-white' : 'text-gray-900'
            }`}>Datos del Empleado</h2>

            <div className="space-y-4">
              <div>
                <label className={`block text-xs font-bold mb-1 ${
                  darkMode ? 'text-gray-300' : 'text-gray-600'
                }`}>Nombre</label>
                <input type="text" name="nombreEmpleado" value={formData.nombreEmpleado} onChange={handleInputChange} className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 text-sm ${
                  darkMode
                    ? 'bg-gray-700 border-gray-600 text-white'
                    : 'bg-white border-gray-300 text-gray-900'
                }`} />
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className={`block text-xs font-bold mb-1 ${
                    darkMode ? 'text-gray-300' : 'text-gray-600'
                  }`}>Cédula</label>
                  <input type="text" name="cedula" value={formData.cedula} onChange={handleInputChange} className={`w-full px-3 py-2 border rounded-lg text-sm ${
                    darkMode
                      ? 'bg-gray-700 border-gray-600 text-white'
                      : 'bg-white border-gray-300 text-gray-900'
                  }`} />
                </div>
                <div>
                  <label className={`block text-xs font-bold mb-1 ${
                    darkMode ? 'text-gray-300' : 'text-gray-600'
                  }`}>Cargo</label>
                  <input type="text" name="cargo" value={formData.cargo} onChange={handleInputChange} className={`w-full px-3 py-2 border rounded-lg text-sm ${
                    darkMode
                      ? 'bg-gray-700 border-gray-600 text-white'
                      : 'bg-white border-gray-300 text-gray-900'
                  }`} />
                </div>
              </div>

              <div>
                <label className={`block text-xs font-bold mb-1 ${
                  darkMode ? 'text-gray-300' : 'text-gray-600'
                }`}>Salario Mensual</label>
                <input type="number" name="salarioMensual" value={formData.salarioMensual} onChange={handleInputChange} placeholder="0" className={`w-full px-3 py-2 border rounded-lg text-sm ${
                  darkMode
                    ? 'bg-gray-700 border-gray-600 text-white'
                    : 'bg-white border-gray-300 text-gray-900'
                }`} />
              </div>

              <div className={`flex items-center gap-3 p-3 rounded-lg ${
                darkMode
                  ? 'bg-blue-900/20'
                  : 'bg-blue-50'
              }`}>
                <input type="checkbox" name="recibeAuxTransporte" checked={formData.recibeAuxTransporte} onChange={handleInputChange} className="w-4 h-4 text-blue-600 rounded" />
                <label className={`text-sm font-medium ${
                  darkMode ? 'text-gray-300' : 'text-gray-700'
                }`}>Recibe Auxilio Transporte</label>
              </div>

              <div className={`border-t pt-4 ${
                darkMode ? 'border-gray-700' : 'border-gray-200'
              }`}>
                <h3 className={`text-sm font-bold mb-3 ${
                  darkMode ? 'text-white' : 'text-gray-900'
                }`}>Fechas</h3>
                <div className="grid grid-cols-2 gap-3 mb-3">
                  <div>
                    <label className={`block text-xs font-bold mb-1 ${
                      darkMode ? 'text-gray-300' : 'text-gray-600'
                    }`}>Ingreso</label>
                    <input type="date" name="fechaIngreso" value={formData.fechaIngreso} onChange={handleInputChange} className={`w-full px-3 py-2 border rounded-lg text-sm ${
                      darkMode
                        ? 'bg-gray-700 border-gray-600 text-white'
                        : 'bg-white border-gray-300 text-gray-900'
                    }`} />
                  </div>
                  <div>
                    <label className={`block text-xs font-bold mb-1 ${
                      darkMode ? 'text-gray-300' : 'text-gray-600'
                    }`}>Retiro</label>
                    <input type="date" name="fechaRetiro" value={formData.fechaRetiro} onChange={handleInputChange} className={`w-full px-3 py-2 border rounded-lg text-sm ${
                      darkMode
                        ? 'bg-gray-700 border-gray-600 text-white'
                        : 'bg-white border-gray-300 text-gray-900'
                    }`} />
                  </div>
                </div>
                <div>
                  <label className={`block text-xs font-bold mb-1 ${
                    darkMode ? 'text-gray-300' : 'text-gray-600'
                  }`}>Prima Inicial</label>
                  <input type="date" name="fechaPrimaInicial" value={formData.fechaPrimaInicial} onChange={handleInputChange} className={`w-full px-3 py-2 border rounded-lg text-sm ${
                    darkMode
                      ? 'bg-gray-700 border-gray-600 text-white'
                      : 'bg-white border-gray-300 text-gray-900'
                  }`} />
                </div>
              </div>

              <div className={`border-t pt-4 ${
                darkMode ? 'border-gray-700' : 'border-gray-200'
              }`}>
                <h3 className={`text-sm font-bold mb-3 ${
                  darkMode ? 'text-white' : 'text-gray-900'
                }`}>Tipo Contrato</h3>
                <div className="grid grid-cols-2 gap-3">
                  <div>
                    <label className={`block text-xs font-bold mb-1 ${
                      darkMode ? 'text-gray-300' : 'text-gray-600'
                    }`}>Contrato</label>
                    <select name="tipoContrato" value={formData.tipoContrato} onChange={handleInputChange} className={`w-full px-3 py-2 border rounded-lg text-sm ${
                      darkMode
                        ? 'bg-gray-700 border-gray-600 text-white'
                        : 'bg-white border-gray-300 text-gray-900'
                    }`}>
                      <option value="indefinido">Indefinido</option>
                      <option value="definido">Término Fijo</option>
                    </select>
                  </div>
                  <div>
                    <label className={`block text-xs font-bold mb-1 ${
                      darkMode ? 'text-gray-300' : 'text-gray-600'
                    }`}>Motivo Retiro</label>
                    <select name="razonRetiro" value={formData.razonRetiro} onChange={handleInputChange} className={`w-full px-3 py-2 border rounded-lg text-sm ${
                      darkMode
                        ? 'bg-gray-700 border-gray-600 text-white'
                        : 'bg-white border-gray-300 text-gray-900'
                    }`}>
                      <option value="renuncia">Renuncia</option>
                      <option value="despidoConCausa">Despido Con Causa</option>
                      <option value="despidoSinCausa">Despido Sin Causa</option>
                      <option value="vencimiento">Vencimiento</option>
                    </select>
                  </div>
                </div>
              </div>

              <div className={`border-t pt-4 ${
                darkMode ? 'border-gray-700' : 'border-gray-200'
              }`}>
                <h3 className={`text-sm font-bold mb-3 ${
                  darkMode ? 'text-white' : 'text-gray-900'
                }`}>Forma de Pago</h3>
                <div className="space-y-2">
                  <div className="flex items-center gap-3">
                    <input type="radio" id="pago15" name="formaPago" value="15" checked={formData.formaPago === '15'} onChange={handleInputChange} className="w-4 h-4 text-blue-600" />
                    <label htmlFor="pago15" className={`text-sm cursor-pointer ${
                      darkMode ? 'text-gray-300' : 'text-gray-700'
                    }`}>Cada 15 días</label>
                  </div>
                  <div className="flex items-center gap-3">
                    <input type="radio" id="pago30" name="formaPago" value="30" checked={formData.formaPago === '30'} onChange={handleInputChange} className="w-4 h-4 text-blue-600" />
                    <label htmlFor="pago30" className={`text-sm cursor-pointer ${
                      darkMode ? 'text-gray-300' : 'text-gray-700'
                    }`}>Cada 30 días</label>
                  </div>
                </div>
              </div>

              <div className={`border-t pt-4 ${
                darkMode ? 'border-gray-700' : 'border-gray-200'
              }`}>
                <h3 className={`text-sm font-bold mb-3 ${
                  darkMode ? 'text-white' : 'text-gray-900'
                }`}>Descuentos</h3>
                <div className="grid grid-cols-2 gap-3">
                  <div>
                    <label className={`block text-xs font-bold mb-1 ${
                      darkMode ? 'text-gray-300' : 'text-gray-600'
                    }`}>Vacaciones</label>
                    <input type="number" name="diasVacacionesTomadas" value={formData.diasVacacionesTomadas} onChange={handleInputChange} className={`w-full px-3 py-2 border rounded-lg text-sm ${
                      darkMode
                        ? 'bg-gray-700 border-gray-600 text-white'
                        : 'bg-white border-gray-300 text-gray-900'
                    }`} />
                  </div>
                  <div>
                    <label className={`block text-xs font-bold mb-1 ${
                      darkMode ? 'text-gray-300' : 'text-gray-600'
                    }`}>No Laborados</label>
                    <input type="number" name="diasNoLaborados" value={formData.diasNoLaborados} onChange={handleInputChange} className={`w-full px-3 py-2 border rounded-lg text-sm ${
                      darkMode
                        ? 'bg-gray-700 border-gray-600 text-white'
                        : 'bg-white border-gray-300 text-gray-900'
                    }`} />
                  </div>
                </div>
              </div>

              <div className={`border-t pt-4 ${
                darkMode ? 'border-gray-700' : 'border-gray-200'
              }`}>
                <h3 className={`text-sm font-bold mb-3 ${
                  darkMode ? 'text-white' : 'text-gray-900'
                }`}>Anticipos</h3>
                <div className="grid grid-cols-2 gap-3">
                  <div>
                    <label className={`block text-xs font-bold mb-1 ${
                      darkMode ? 'text-gray-300' : 'text-gray-600'
                    }`}>Sueldo</label>
                    <input type="number" name="sueldoRecibido" value={formData.sueldoRecibido} onChange={handleInputChange} className={`w-full px-3 py-2 border rounded-lg text-sm ${
                      darkMode
                        ? 'bg-gray-700 border-gray-600 text-white'
                        : 'bg-white border-gray-300 text-gray-900'
                    }`} />
                  </div>
                  <div>
                    <label className={`block text-xs font-bold mb-1 ${
                      darkMode ? 'text-gray-300' : 'text-gray-600'
                    }`}>Transporte</label>
                    <input type="number" name="auxTransporteRecibido" value={formData.auxTransporteRecibido} onChange={handleInputChange} className={`w-full px-3 py-2 border rounded-lg text-sm ${
                      darkMode
                        ? 'bg-gray-700 border-gray-600 text-white'
                        : 'bg-white border-gray-300 text-gray-900'
                    }`} />
                  </div>
                </div>
              </div>

              <div className={`flex gap-2 pt-4 border-t ${
                darkMode ? 'border-gray-700' : 'border-gray-200'
              }`}>
                <button onClick={resetForm} className={`flex-1 px-3 py-2 border-2 rounded-lg hover:bg-opacity-50 font-bold text-sm transition-colors ${
                  darkMode
                    ? 'border-gray-600 text-gray-300 hover:bg-gray-700'
                    : 'border-gray-300 text-gray-700 hover:bg-gray-50'
                }`}>Limpiar</button>
                <button onClick={calcularLiquidacion} className="flex-1 px-3 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-bold text-sm shadow-md transition-colors">Calcular</button>
              </div>
            </div>
          </div>
        </div>

        <div className="lg:col-span-2">
          {mostrarResultado && resultado && (
            <div className="space-y-4">
              <div ref={resultRef} className={`rounded-xl shadow-lg border p-8 space-y-6 ${
                darkMode
                  ? 'bg-gray-800 border-gray-700'
                  : 'bg-white border-blue-300'
              }`} style={{ width: '210mm', margin: '0 auto' }}>
                <div className={`text-center border-b-2 border-blue-600 pb-4`}>
                  <h2 className={`text-2xl font-bold ${
                    darkMode ? 'text-white' : 'text-gray-900'
                  }`}>Liquidación del Contrato</h2>
                  <p className={`text-sm mt-2 ${
                    darkMode ? 'text-gray-400' : 'text-gray-600'
                  }`}>{formData.nombreEmpleado} - CC: {formData.cedula}</p>
                  <p className={`text-xs mt-1 ${
                    darkMode ? 'text-gray-500' : 'text-gray-500'
                  }`}>Pago cada {resultado.formaPago} días</p>
                </div>

                <div className={`grid grid-cols-3 gap-3 p-4 rounded-lg border ${
                  darkMode
                    ? 'bg-blue-900/20 border-blue-800'
                    : 'bg-blue-50 border-blue-200'
                }`}>
                  <div className="text-center">
                    <span className={`text-xs font-bold ${
                      darkMode ? 'text-gray-400' : 'text-gray-600'
                    }`}>DÍAS LABORADOS</span>
                    <p className={`font-bold text-lg text-blue-600`}>{resultado.diasTrabajados}</p>
                  </div>
                  <div className="text-center">
                    <span className={`text-xs font-bold ${
                      darkMode ? 'text-gray-400' : 'text-gray-600'
                    }`}>DÍAS PENDIENTES</span>
                    <p className={`font-bold text-lg text-blue-600`}>{resultado.diasPendientes}</p>
                  </div>
                  <div className="text-center">
                    <span className={`text-xs font-bold ${
                      darkMode ? 'text-gray-400' : 'text-gray-600'
                    }`}>BASE</span>
                    <p className={`font-bold text-lg text-blue-600`}>{formatCurrency(resultado.baseLiquidacion)}</p>
                  </div>
                </div>

                <div className="space-y-1">
                  <div className={`font-bold px-3 py-2 rounded text-sm ${
                    darkMode
                      ? 'bg-gray-700 text-gray-100'
                      : 'bg-gray-100 text-gray-700'
                  }`}>Información Base</div>
                  <div className={`flex justify-between py-2 border-b text-xs ${
                    darkMode
                      ? 'border-gray-700'
                      : 'border-gray-200'
                  }`}>
                    <span className={darkMode ? 'text-gray-400' : 'text-gray-600'}>Día del Mes hasta donde trabajó</span>
                    <span className={`font-semibold ${
                      darkMode ? 'text-gray-200' : 'text-gray-900'
                    }`}>{resultado.diaDelMes}</span>
                  </div>
                  <div className={`flex justify-between py-2 border-b text-xs ${
                    darkMode
                      ? 'border-blue-700'
                      : 'border-blue-300'
                  }`}>
                    <span className={darkMode ? 'text-gray-400' : 'text-gray-600'}>Forma de Pago</span>
                    <span className={`font-semibold ${
                      darkMode ? 'text-gray-200' : 'text-gray-900'
                    }`}>{resultado.formaPago}</span>
                  </div>
                  <div className={`flex justify-between py-2 border-b text-xs ${
                    darkMode
                      ? 'border-blue-700'
                      : 'border-blue-300'
                  }`}>
                    <span className={darkMode ? 'text-gray-400' : 'text-gray-600'}>Base Cesantías</span>
                    <span className={`font-semibold ${
                      darkMode ? 'text-gray-200' : 'text-gray-900'
                    }`}>{formatCurrency(resultado.baseCesantias)}</span>
                  </div>

                  <div className={`font-bold px-3 py-2 rounded text-sm mt-4 ${
                    darkMode
                      ? 'bg-gray-700 text-gray-100'
                      : 'bg-gray-100 text-gray-700'
                  }`}>Devengado</div>
                  <div className={`flex justify-between py-2 border-b text-xs ${
                    darkMode
                      ? 'border-gray-700'
                      : 'border-gray-200'
                  }`}>
                    <span className={darkMode ? 'text-gray-400' : 'text-gray-600'}>Cesantías</span>
                    <span className={`font-semibold ${
                      darkMode ? 'text-gray-200' : 'text-gray-900'
                    }`}>{formatCurrency(resultado.cesantias)}</span>
                  </div>
                  <div className={`flex justify-between py-2 border-b text-xs ${
                    darkMode
                      ? 'border-gray-700'
                      : 'border-gray-200'
                  }`}>
                    <span className={darkMode ? 'text-gray-400' : 'text-gray-600'}>Intereses (12%)</span>
                    <span className={`font-semibold ${
                      darkMode ? 'text-gray-200' : 'text-gray-900'
                    }`}>{formatCurrency(resultado.interesesCesantias)}</span>
                  </div>
                  <div className={`flex justify-between py-2 border-b text-xs ${
                    darkMode
                      ? 'border-gray-700'
                      : 'border-gray-200'
                  }`}>
                    <span className={darkMode ? 'text-gray-400' : 'text-gray-600'}>Vacaciones ({resultado.diasVacacionesPendientes}d)</span>
                    <span className={`font-semibold ${
                      darkMode ? 'text-gray-200' : 'text-gray-900'
                    }`}>{formatCurrency(resultado.liquidacionVacaciones)}</span>
                  </div>
                  <div className={`flex justify-between py-2 border-b text-xs ${
                    darkMode
                      ? 'border-gray-700'
                      : 'border-gray-200'
                  }`}>
                    <span className={darkMode ? 'text-gray-400' : 'text-gray-600'}>Prima ({resultado.diasPrimaActual}d)</span>
                    <span className={`font-semibold ${
                      darkMode ? 'text-gray-200' : 'text-gray-900'
                    }`}>{formatCurrency(resultado.primaServicios)}</span>
                  </div>
                  <div className={`flex justify-between py-2 border-b text-xs ${
                    darkMode
                      ? 'border-gray-700'
                      : 'border-gray-200'
                  }`}>
                    <span className={darkMode ? 'text-gray-400' : 'text-gray-600'}>Sueldo Pendiente</span>
                    <span className={`font-semibold ${
                      darkMode ? 'text-gray-200' : 'text-gray-900'
                    }`}>{formatCurrency(resultado.sueldoPendiente)}</span>
                  </div>
                  <div className={`flex justify-between py-2 border-b text-xs ${
                    darkMode
                      ? 'border-blue-700'
                      : 'border-blue-300'
                  }`}>
                    <span className={darkMode ? 'text-gray-400' : 'text-gray-600'}>Transporte Pendiente</span>
                    <span className={`font-semibold ${
                      darkMode ? 'text-gray-200' : 'text-gray-900'
                    }`}>{formatCurrency(resultado.auxTransportePendiente)}</span>
                  </div>

                  <div className={`flex justify-between py-3 rounded px-3 font-bold text-sm border mt-2 ${
                    darkMode
                      ? 'bg-green-900/20 border-green-800 text-green-300'
                      : 'bg-green-50 border-green-200 text-green-700'
                  }`}>
                    <span>Total Devengado</span>
                    <span>{formatCurrency(resultado.totalDevengado)}</span>
                  </div>

                  <div className={`font-bold px-3 py-2 rounded text-sm mt-4 ${
                    darkMode
                      ? 'bg-gray-700 text-gray-100'
                      : 'bg-gray-100 text-gray-700'
                  }`}>Deducciones</div>
                  <div className={`flex justify-between py-2 border-b text-xs ${
                    darkMode
                      ? 'border-gray-700'
                      : 'border-gray-200'
                  }`}>
                    <span className={darkMode ? 'text-gray-400' : 'text-gray-600'}>Salud (4%)</span>
                    <span className={`font-semibold ${
                      darkMode ? 'text-red-400' : 'text-red-600'
                    }`}>{formatCurrency(resultado.retencionSalud)}</span>
                  </div>
                  <div className={`flex justify-between py-2 border-b text-xs ${
                    darkMode
                      ? 'border-gray-700'
                      : 'border-gray-200'
                  }`}>
                    <span className={darkMode ? 'text-gray-400' : 'text-gray-600'}>Pensión (4%)</span>
                    <span className={`font-semibold ${
                      darkMode ? 'text-red-400' : 'text-red-600'
                    }`}>{formatCurrency(resultado.retencionPension)}</span>
                  </div>

                  <div className={`flex justify-between py-3 rounded px-3 font-bold text-sm border mt-2 ${
                    darkMode
                      ? 'bg-red-900/20 border-red-800 text-red-300'
                      : 'bg-red-50 border-red-200 text-red-700'
                  }`}>
                    <span>Total Deducido</span>
                    <span>{formatCurrency(resultado.retencionPension + resultado.retencionSalud)}</span>
                  </div>

                  {resultado.indemnizacion > 0 && (
                    <div className={`flex justify-between py-2 border-b text-xs ${
                      darkMode
                        ? 'border-gray-700'
                        : 'border-gray-200'
                    }`}>
                      <span className={darkMode ? 'text-gray-400' : 'text-gray-600'}>Indemnización</span>
                      <span className={`font-semibold ${
                        darkMode ? 'text-blue-400' : 'text-blue-600'
                      }`}>{formatCurrency(resultado.indemnizacion)}</span>
                    </div>
                  )}

                  <div className="flex justify-between py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded px-3 font-bold mt-4">
                    <span>TOTAL LIQUIDACIÓN</span>
                    <span>{formatCurrency(resultado.totalAPagar)}</span>
                  </div>
                </div>
              </div>

              <button onClick={descargarPDF} className="px-3 py-1 text-sm bg-gray-300 text-gray-700 rounded hover:bg-gray-400 font-medium">Descargar PDF</button>
            </div>
          )}

          {!mostrarResultado && (
            <div className={`rounded-xl border-2 p-12 text-center ${
              darkMode
                ? 'bg-gradient-to-br from-blue-900/20 to-blue-800/20 border-blue-800'
                : 'bg-gradient-to-br from-blue-50 to-blue-100 border-blue-300'
            }`}>
              <h3 className={`text-xl font-bold mb-2 ${
                darkMode ? 'text-blue-100' : 'text-blue-900'
              }`}>Completa los datos</h3>
              <p className={darkMode ? 'text-blue-300' : 'text-blue-700 text-sm'}>Legislación Colombiana 2025</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}