import React, { useState } from 'react';
import { Shield, Home, Users, Car, DollarSign, TrendingUp, AlertCircle } from 'lucide-react';

export default function LifeInsuranceCalculator() {
  // Información del proveedor
  const [age, setAge] = useState(35);
  const [annualIncome, setAnnualIncome] = useState(60000);
  const [yearsToReplace, setYearsToReplace] = useState(10);
  
  // Deudas
  const [mortgageBalance, setMortgageBalance] = useState(200000);
  const [carLoans, setCarLoans] = useState(25000);
  const [creditCards, setCreditCards] = useState(10000);
  const [otherDebts, setOtherDebts] = useState(5000);
  
  // Gastos futuros
  const [numChildren, setNumChildren] = useState(2);
  const [collegePerChild, setCollegePerChild] = useState(50000);
  const [funeralCosts, setFuneralCosts] = useState(15000);
  const [emergencyFund, setEmergencyFund] = useState(30000);
  
  // Recursos existentes
  const [currentSavings, setCurrentSavings] = useState(20000);
  const [existingLifeInsurance, setExistingLifeInsurance] = useState(100000);
  const [otherAssets, setOtherAssets] = useState(10000);
  
  // Gastos del hogar
  const [monthlyExpenses, setMonthlyExpenses] = useState(4000);
  const [incomeReplacement, setIncomeReplacement] = useState(70);

  const calculateNeeds = () => {
    // 1. Reemplazo de ingresos
    const incomeNeeded = (annualIncome * (incomeReplacement / 100)) * yearsToReplace;
    
    // 2. Total de deudas
    const totalDebts = mortgageBalance + carLoans + creditCards + otherDebts;
    
    // 3. Gastos futuros
    const educationCosts = numChildren * collegePerChild;
    const finalExpenses = funeralCosts + emergencyFund;
    
    // 4. Gastos de transición (6 meses de gastos)
    const transitionExpenses = monthlyExpenses * 6;
    
    // 5. Total necesario
    const totalNeeded = incomeNeeded + totalDebts + educationCosts + finalExpenses + transitionExpenses;
    
    // 6. Recursos disponibles
    const totalAssets = currentSavings + existingLifeInsurance + otherAssets;
    
    // 7. Seguro adicional necesario
    const insuranceGap = Math.max(0, totalNeeded - totalAssets);
    
    // 8. Costo mensual estimado (varía por edad y salud)
    const costPer1000 = age < 30 ? 0.08 : age < 40 ? 0.12 : age < 50 ? 0.20 : 0.35;
    const estimatedMonthlyCost = (insuranceGap / 1000) * costPer1000;
    
    return {
      incomeNeeded,
      totalDebts,
      educationCosts,
      finalExpenses,
      transitionExpenses,
      totalNeeded,
      totalAssets,
      insuranceGap,
      estimatedMonthlyCost,
      recommendedCoverage: Math.ceil(insuranceGap / 50000) * 50000 // Redondear a $50k
    };
  };

  const results = calculateNeeds();

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

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 p-4 md:p-8">
      <div className="max-w-7xl mx-auto">
        <div className="bg-white rounded-2xl shadow-xl p-6 md:p-8">
          <div className="flex items-center gap-3 mb-6">
            <Shield className="w-8 h-8 text-blue-600" />
            <div>
              <h1 className="text-3xl font-bold text-gray-800">Calculadora de Seguro de Vida</h1>
              <p className="text-gray-600 text-sm mt-1">Protege el futuro financiero de tu familia</p>
            </div>
          </div>

          <div className="grid lg:grid-cols-3 gap-8">
            {/* Panel Izquierdo - Inputs */}
            <div className="lg:col-span-2 space-y-6">
              {/* Información del Proveedor */}
              <div className="bg-blue-50 rounded-lg p-5">
                <h2 className="text-lg font-semibold text-blue-900 mb-4 flex items-center gap-2">
                  <Users className="w-5 h-5" />
                  Información del Proveedor Principal
                </h2>
                
                <div className="grid md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Edad: {age} años
                    </label>
                    <input
                      type="range"
                      min="25"
                      max="65"
                      value={age}
                      onChange={(e) => setAge(Number(e.target.value))}
                      className="w-full"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Ingreso Anual
                    </label>
                    <input
                      type="number"
                      value={annualIncome}
                      onChange={(e) => setAnnualIncome(Number(e.target.value))}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Años de Ingreso a Reemplazar
                    </label>
                    <input
                      type="number"
                      value={yearsToReplace}
                      onChange={(e) => setYearsToReplace(Number(e.target.value))}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      % de Ingreso a Reemplazar: {incomeReplacement}%
                    </label>
                    <input
                      type="range"
                      min="50"
                      max="100"
                      step="5"
                      value={incomeReplacement}
                      onChange={(e) => setIncomeReplacement(Number(e.target.value))}
                      className="w-full"
                    />
                  </div>
                </div>
              </div>

              {/* Deudas */}
              <div className="bg-red-50 rounded-lg p-5">
                <h2 className="text-lg font-semibold text-red-900 mb-4 flex items-center gap-2">
                  <Home className="w-5 h-5" />
                  Deudas Pendientes
                </h2>
                
                <div className="grid md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Saldo de Hipoteca
                    </label>
                    <input
                      type="number"
                      value={mortgageBalance}
                      onChange={(e) => setMortgageBalance(Number(e.target.value))}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Préstamos de Autos
                    </label>
                    <input
                      type="number"
                      value={carLoans}
                      onChange={(e) => setCarLoans(Number(e.target.value))}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Tarjetas de Crédito
                    </label>
                    <input
                      type="number"
                      value={creditCards}
                      onChange={(e) => setCreditCards(Number(e.target.value))}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Otras Deudas
                    </label>
                    <input
                      type="number"
                      value={otherDebts}
                      onChange={(e) => setOtherDebts(Number(e.target.value))}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500"
                    />
                  </div>
                </div>
              </div>

              {/* Gastos Futuros */}
              <div className="bg-purple-50 rounded-lg p-5">
                <h2 className="text-lg font-semibold text-purple-900 mb-4 flex items-center gap-2">
                  <TrendingUp className="w-5 h-5" />
                  Gastos Futuros y Emergencias
                </h2>
                
                <div className="grid md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Número de Hijos
                    </label>
                    <input
                      type="number"
                      value={numChildren}
                      onChange={(e) => setNumChildren(Number(e.target.value))}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Costo Universitario por Hijo
                    </label>
                    <input
                      type="number"
                      value={collegePerChild}
                      onChange={(e) => setCollegePerChild(Number(e.target.value))}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Gastos Funerarios
                    </label>
                    <input
                      type="number"
                      value={funeralCosts}
                      onChange={(e) => setFuneralCosts(Number(e.target.value))}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Fondo de Emergencia
                    </label>
                    <input
                      type="number"
                      value={emergencyFund}
                      onChange={(e) => setEmergencyFund(Number(e.target.value))}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Gastos Mensuales del Hogar
                    </label>
                    <input
                      type="number"
                      value={monthlyExpenses}
                      onChange={(e) => setMonthlyExpenses(Number(e.target.value))}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
                    />
                  </div>
                </div>
              </div>

              {/* Recursos Existentes */}
              <div className="bg-green-50 rounded-lg p-5">
                <h2 className="text-lg font-semibold text-green-900 mb-4 flex items-center gap-2">
                  <DollarSign className="w-5 h-5" />
                  Recursos Financieros Existentes
                </h2>
                
                <div className="grid md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Ahorros Actuales
                    </label>
                    <input
                      type="number"
                      value={currentSavings}
                      onChange={(e) => setCurrentSavings(Number(e.target.value))}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Seguro de Vida Existente
                    </label>
                    <input
                      type="number"
                      value={existingLifeInsurance}
                      onChange={(e) => setExistingLifeInsurance(Number(e.target.value))}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500"
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Otros Activos Líquidos
                    </label>
                    <input
                      type="number"
                      value={otherAssets}
                      onChange={(e) => setOtherAssets(Number(e.target.value))}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500"
                    />
                  </div>
                </div>
              </div>
            </div>

            {/* Panel Derecho - Resultados */}
            <div className="space-y-6">
              {/* Resultado Principal */}
              <div className="bg-gradient-to-br from-blue-600 to-indigo-700 rounded-xl p-6 text-white sticky top-4">
                <h2 className="text-xl font-bold mb-6">Análisis de Cobertura</h2>
                
                <div className="space-y-4">
                  <div className="bg-white/20 backdrop-blur rounded-lg p-4">
                    <p className="text-sm opacity-90 mb-1">Cobertura Recomendada</p>
                    <p className="text-3xl font-bold">{formatCurrency(results.recommendedCoverage)}</p>
                  </div>

                  <div className="bg-white/20 backdrop-blur rounded-lg p-4">
                    <p className="text-sm opacity-90 mb-1">Déficit de Seguro</p>
                    <p className="text-2xl font-bold">{formatCurrency(results.insuranceGap)}</p>
                  </div>

                  <div className="bg-white/20 backdrop-blur rounded-lg p-4">
                    <p className="text-sm opacity-90 mb-1">Costo Mensual Estimado</p>
                    <p className="text-2xl font-bold">{formatCurrency(results.estimatedMonthlyCost)}</p>
                    <p className="text-xs opacity-75 mt-1">Basado en edad y salud promedio</p>
                  </div>
                </div>
              </div>

              {/* Desglose de Necesidades */}
              <div className="bg-gray-50 rounded-lg p-5">
                <h3 className="font-semibold text-gray-800 mb-4">Desglose de Necesidades</h3>
                <div className="space-y-3">
                  <div className="flex justify-between text-sm">
                    <span className="text-gray-600">Reemplazo de Ingresos</span>
                    <span className="font-semibold">{formatCurrency(results.incomeNeeded)}</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-gray-600">Total de Deudas</span>
                    <span className="font-semibold text-red-600">{formatCurrency(results.totalDebts)}</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-gray-600">Educación ({numChildren} hijos)</span>
                    <span className="font-semibold">{formatCurrency(results.educationCosts)}</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-gray-600">Gastos Finales</span>
                    <span className="font-semibold">{formatCurrency(results.finalExpenses)}</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-gray-600">Período de Transición</span>
                    <span className="font-semibold">{formatCurrency(results.transitionExpenses)}</span>
                  </div>
                  <div className="border-t pt-3 mt-3">
                    <div className="flex justify-between font-bold">
                      <span className="text-gray-800">Total Necesario</span>
                      <span className="text-blue-600">{formatCurrency(results.totalNeeded)}</span>
                    </div>
                  </div>
                  <div className="flex justify-between text-sm text-green-600">
                    <span>Recursos Existentes</span>
                    <span className="font-semibold">-{formatCurrency(results.totalAssets)}</span>
                  </div>
                  <div className="border-t pt-3 bg-blue-100 -mx-5 px-5 py-3 rounded">
                    <div className="flex justify-between font-bold text-blue-900">
                      <span>Seguro Adicional Necesario</span>
                      <span>{formatCurrency(results.insuranceGap)}</span>
                    </div>
                  </div>
                </div>
              </div>

              {/* Recomendaciones */}
              <div className="bg-amber-50 border-2 border-amber-200 rounded-lg p-5">
                <div className="flex items-start gap-2 mb-3">
                  <AlertCircle className="w-5 h-5 text-amber-600 mt-0.5 flex-shrink-0" />
                  <h3 className="font-semibold text-amber-900">Recomendaciones</h3>
                </div>
                <ul className="space-y-2 text-sm text-amber-800">
                  <li>• Considera una póliza de término a {20 + (numChildren * 2)} años para cubrir hasta que los hijos sean independientes</li>
                  <li>• Revisa tu cobertura anualmente o después de eventos importantes (nacimientos, compras grandes)</li>
                  <li>• Complementa con seguro de vida del empleador si está disponible</li>
                  <li>• Mantén un testamento actualizado y designa beneficiarios</li>
                  <li>• Considera un seguro permanente para dejar un legado</li>
                </ul>
              </div>

              {/* Escenarios */}
              <div className="bg-indigo-50 rounded-lg p-5">
                <h3 className="font-semibold text-indigo-900 mb-3">📊 Comparación de Coberturas</h3>
                <div className="space-y-3 text-sm">
                  <div className="bg-white p-3 rounded">
                    <p className="font-medium text-gray-700">Cobertura Básica (10x ingresos)</p>
                    <p className="text-xl font-bold text-gray-900">{formatCurrency(annualIncome * 10)}</p>
                    <p className="text-xs text-gray-500 mt-1">Cubre solo reemplazo de ingresos</p>
                  </div>
                  <div className="bg-white p-3 rounded border-2 border-indigo-500">
                    <p className="font-medium text-indigo-700">Cobertura Recomendada</p>
                    <p className="text-xl font-bold text-indigo-900">{formatCurrency(results.recommendedCoverage)}</p>
                    <p className="text-xs text-indigo-600 mt-1">Protección completa para tu familia</p>
                  </div>
                  <div className="bg-white p-3 rounded">
                    <p className="font-medium text-gray-700">Cobertura Premium (+ 25%)</p>
                    <p className="text-xl font-bold text-gray-900">{formatCurrency(results.recommendedCoverage * 1.25)}</p>
                    <p className="text-xs text-gray-500 mt-1">Margen extra para imprevistos</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Nota Final */}
          <div className="mt-8 p-5 bg-blue-50 border-l-4 border-blue-500 rounded-lg">
            <p className="text-sm text-blue-900">
              <strong>Nota Importante:</strong> Esta calculadora proporciona una estimación general basada en tus circunstancias. El costo real del seguro puede variar según tu salud, estilo de vida, tipo de póliza y aseguradora. Te recomendamos consultar con un agente de seguros profesional para obtener cotizaciones específicas y asesoría personalizada. El seguro de vida es una decisión importante que debe tomarse considerando todos los aspectos de tu situación familiar y financiera.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}