import React, { useState, useMemo } from 'react';
import { 
  ShieldCheck, 
  LayoutDashboard, 
  Wallet, 
  Percent, 
  Calculator, 
  HelpCircle, 
  Info, 
  TrendingUp, 
  DollarSign, 
  Clock, 
  Zap, 
  BarChart3 
} from 'lucide-react';
import { 
  LineChart, 
  Line, 
  XAxis, 
  YAxis, 
  CartesianGrid, 
  Tooltip, 
  Legend, 
  ResponsiveContainer, 
  AreaChart, 
  Area, 
  BarChart, 
  Bar, 
  Cell 
} from 'recharts';

// --- CONFIGURACIÓN Y DATOS MOCK ---
const defaultInputs = {
  totalProjectListPrice: 100000,
  partnerDiscountRate: 35,
  partnerServicesMarginRate: 20,
  contractTermMonths: 36,
  ciscoCapitalFinanceFactor: 0.0315,
  endOfTermOption: 'RETURN', 
  fixedResidualValue: 10000,
  managedServicesMRR: 500,
  bankAnnualRate: 12,
  bankFees: 500,
  servicesMultiplier: 6.06,
  includeMultiplier: false,
  clientDiscountRate: 8,
  traditionalDSO: 60,
  taxRate: 27
};

// --- SUB-COMPONENTES ---

const InputPanel = ({ inputs, setInputs }) => {
  return (
    <div className="bg-white p-6 rounded-3xl shadow-sm border border-slate-200 animate-in fade-in">
      <h2 className="text-xl font-bold mb-6 flex items-center gap-3 text-slate-800 border-b border-slate-100 pb-4">
        <div className="bg-blue-50 p-1.5 rounded-lg text-blue-600">
          <Calculator size={22} />
        </div>
        Parámetros del Proyecto
      </h2>

      <div className="space-y-6">
        {/* TOTAL PROJECT */}
        <div>
          <label className="text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-2 flex items-center gap-1">
            TOTAL PROJECT LIST PRICE (USD) <HelpCircle size={14} className="text-slate-400" />
          </label>
          <input
            type="number"
            value={inputs.totalProjectListPrice}
            onChange={(e) => setInputs({ ...inputs, totalProjectListPrice: Number(e.target.value) })}
            className="w-full p-3 bg-blue-50/10 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none font-bold text-blue-900 text-lg transition-all"
          />
          <p className="text-[10px] text-slate-400 mt-1.5 italic">
            Valor total de Hardware, Software y Servicios de implementación que se facturará al cliente final.
          </p>
        </div>

        {/* DISCOUNT AND TERM */}
        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="text-[11px] font-bold text-slate-500 uppercase block mb-2">PARTNER DISCOUNT (%)</label>
            <input
              type="number"
              value={inputs.partnerDiscountRate}
              onChange={(e) => setInputs({ ...inputs, partnerDiscountRate: Number(e.target.value) })}
              className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none font-bold"
            />
            <p className="text-[9px] text-slate-400 mt-1.5 italic">Tu nivel de descuento con Cisco. Afecta tu margen inicial.</p>
          </div>
          <div>
            <label className="text-[11px] font-bold text-slate-500 uppercase block mb-2">TERM (MESES)</label>
            <select
              value={inputs.contractTermMonths}
              onChange={(e) => setInputs({ ...inputs, contractTermMonths: Number(e.target.value) })}
              className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none font-bold"
            >
              <option value={36}>36</option>
              <option value={48}>48</option>
              <option value={60}>60</option>
            </select>
            <p className="text-[9px] text-slate-400 mt-1.5 italic">Duración del contrato de financiamiento.</p>
          </div>
        </div>

        {/* FINANCE FACTOR - BLUE BOX */}
        <div className="p-5 bg-blue-50/50 rounded-2xl border border-blue-100 relative overflow-hidden">
          <label className="flex items-center gap-1 text-[11px] font-bold text-blue-800 uppercase mb-3">
            FINANCE FACTOR (MONTHLY) <Info size={15} className="text-blue-600" />
          </label>
          <div className="bg-white border border-blue-200 rounded-xl p-1 shadow-sm">
            <input
              type="number"
              step="0.0001"
              value={inputs.ciscoCapitalFinanceFactor}
              onChange={(e) => setInputs({ ...inputs, ciscoCapitalFinanceFactor: Number(e.target.value) })}
              className="w-full p-2 text-center font-mono text-2xl font-bold text-blue-900 outline-none bg-transparent"
            />
          </div>
          <p className="text-[10px] text-blue-600 mt-3 font-medium italic leading-relaxed">
            FACTOR CRÍTICO: Multiplicador que define la cuota mensual. Un factor menor implica un costo de capital más eficiente.
          </p>
        </div>

        {/* OPCIÓN FIN DE TÉRMINO */}
        <div className="pt-4 border-t border-slate-100">
          <label className="text-[11px] font-bold text-slate-500 uppercase block mb-3 flex items-center gap-1">
            OPCIÓN FIN DE TÉRMINO <HelpCircle size={14} className="text-slate-400" />
          </label>
          <div className="flex gap-2">
            <button
              onClick={() => setInputs({ ...inputs, endOfTermOption: 'RETURN' })}
              className={`flex-1 py-3 px-2 text-[10px] rounded-lg border font-bold transition-all uppercase ${inputs.endOfTermOption === 'RETURN' ? 'bg-blue-600 text-white border-blue-600 shadow-md' : 'bg-white text-slate-500 border-slate-200'}`}
            >
              DEVOLVER (REFRESH)
            </button>
            <button
              onClick={() => setInputs({ ...inputs, endOfTermOption: 'OWN' })}
              className={`flex-1 py-3 px-2 text-[10px] rounded-lg border font-bold transition-all uppercase ${inputs.endOfTermOption === 'OWN' ? 'bg-blue-600 text-white border-blue-600 shadow-md' : 'bg-white text-slate-500 border-slate-200'}`}
            >
              COMPRAR (PROPIEDAD)
            </button>
          </div>
          <p className="text-[10px] text-slate-400 mt-2 italic">
            {inputs.endOfTermOption === 'RETURN' 
              ? 'El cliente devuelve el equipo a costo $0. Ideal para incentivar el recambio tecnológico en 3 años.' 
              : 'El cliente paga un residual fijo para ser dueño definitivo de los activos.'}
          </p>
        </div>

        {/* MSP */}
        <div className="pt-4 border-t border-slate-100">
          <label className="text-[11px] font-bold text-slate-500 uppercase block mb-2">MONTHLY RECURRING REVENUE (MRR)</label>
          <input
            type="number"
            value={inputs.managedServicesMRR}
            onChange={(e) => setInputs({ ...inputs, managedServicesMRR: Number(e.target.value) })}
            className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 font-bold outline-none"
          />
          <p className="text-[9px] text-slate-400 mt-1.5 italic">Tus ingresos propios mensuales por gestión y soporte. Se suman a tu flujo de caja neto.</p>
          
          <div className="mt-4 p-4 bg-emerald-50 rounded-2xl border border-emerald-100 flex items-center justify-between">
            <div className="flex flex-col">
              <div className="flex items-center gap-2 text-emerald-700 font-bold text-xs uppercase">
                <TrendingUp size={16} /> EFECTO MULTIPLICADOR
              </div>
              <p className="text-[9px] text-emerald-600 mt-1 max-w-[180px]">Activa el cálculo basado en el multiplicador de Cisco (6.06x) que estima el valor de servicios adicionales desbloqueados.</p>
            </div>
            <input
              type="checkbox"
              checked={inputs.includeMultiplier}
              onChange={(e) => setInputs({ ...inputs, includeMultiplier: e.target.checked })}
              className="w-6 h-6 accent-emerald-500 rounded cursor-pointer"
            />
          </div>
        </div>

        {/* TASA IMPUESTO Y DSO */}
        <div className="pt-4 border-t border-slate-100 grid grid-cols-2 gap-4">
          <div>
            <label className="text-[10px] font-bold text-slate-500 uppercase block mb-1">DSO TRAD. (DÍAS)</label>
            <input
              type="number"
              value={inputs.traditionalDSO}
              onChange={(e) => setInputs({ ...inputs, traditionalDSO: Number(e.target.value) })}
              className="w-full p-2 bg-slate-50 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue-500 font-bold"
            />
            <p className="text-[9px] text-slate-400 mt-1 italic">Días promedio de cobranza fuera del modelo Dual Pay.</p>
          </div>
          <div>
            <label className="text-[10px] font-bold text-slate-500 uppercase block mb-1">IMPUESTO RENTA (%)</label>
            <input
              type="number"
              value={inputs.taxRate}
              onChange={(e) => setInputs({ ...inputs, taxRate: Number(e.target.value) })}
              className="w-full p-2 bg-slate-50 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue-500 font-bold"
            />
            <p className="text-[9px] text-slate-400 mt-1 italic">Impacta directamente en el ahorro fiscal anual al deducir el gasto OPEX.</p>
          </div>
        </div>
      </div>
    </div>
  );
};

const SimulatorView = ({ inputs, setInputs, derived, monthlyData, formatCurrency }) => {
  return (
    <div className="space-y-8 animate-in fade-in duration-500">
      {/* HEADER BANNER */}
      <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-200 flex flex-col md:flex-row justify-between items-start md:items-center">
        <div>
          <h1 className="text-2xl font-bold text-blue-900 flex items-center gap-3 leading-none">
             <ShieldCheck className="text-blue-600" size={28} /> Simulador de Caso de Negocio Dual Pay
          </h1>
          <p className="text-slate-500 text-sm mt-2">LATAM Financial Engineering — Herramienta de Modelado para Partners</p>
        </div>
        <div className="mt-4 md:mt-0 px-5 py-2.5 bg-blue-50 text-blue-700 rounded-full text-[11px] font-bold border border-blue-100 uppercase tracking-wide">
          PARTNER RISK = 0% | CURRENCY RISK = 0%
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
        <div className="lg:col-span-4 space-y-6">
          <InputPanel inputs={inputs} setInputs={setInputs} />
        </div>

        <div className="lg:col-span-8 space-y-8">
          {/* TOP CARDS */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="bg-white p-6 rounded-3xl shadow-sm border border-slate-100 flex flex-col justify-between min-h-[190px]">
              <div>
                <p className="text-xs font-bold text-slate-400 uppercase tracking-wide mb-1 flex items-center gap-1">
                  MARGEN PARTNER DÍA 1 <Info size={14} className="text-slate-300" />
                </p>
                <h3 className="text-3xl font-black text-blue-600 mb-2">{formatCurrency(derived.partnerGrossMarginDay1)}</h3>
                <p className="text-[10px] text-slate-500 leading-snug mb-4">
                  <strong>Origen:</strong> Diferencia entre el precio de venta al cliente y tu costo con descuento. Cisco Capital te transfiere el 100% de este monto al activarse el contrato.
                </p>
              </div>
              <div className="bg-emerald-50 text-emerald-700 text-[10px] font-black uppercase tracking-tight py-2 px-3 rounded-xl w-fit">
                CASH INMEDIATO SIN RIESGO
              </div>
            </div>

            <div className="bg-white p-6 rounded-3xl shadow-sm border border-slate-100 flex flex-col justify-between min-h-[190px]">
              <div>
                <p className="text-xs font-bold text-slate-400 uppercase tracking-wide mb-1">PAGO MENSUAL CLIENTE</p>
                <h3 className="text-3xl font-black text-slate-800 mb-2">{formatCurrency(derived.monthlyPaymentDualPay)}</h3>
                <p className="text-[10px] text-slate-500 leading-snug mb-4">
                  <strong>Origen:</strong> Cálculo del Total del Proyecto por el Finance Factor. Este monto es el que el cliente paga directamente a Cisco Capital bajo una estructura de arrendamiento/OPEX.
                </p>
              </div>
              <div className="bg-blue-50 text-blue-700 text-[10px] font-black uppercase tracking-tight py-2 px-3 rounded-xl w-fit">
                FACTURADO COMO OPEX
              </div>
            </div>

            <div className="bg-white p-6 rounded-3xl shadow-sm border border-slate-100 flex flex-col justify-between min-h-[190px]">
              <div>
                <p className="text-xs font-bold text-slate-400 uppercase tracking-wide mb-1">DSO / RIESGO COBRO</p>
                <h3 className="text-3xl font-black text-emerald-600 mb-2">0 Días</h3>
                <p className="text-[10px] text-slate-500 leading-snug mb-4">
                  <strong>Origen:</strong> Bajo el modelo Dual Pay, Cisco Capital asume el riesgo crediticio y la gestión de cobranza. El Partner no espera el pago del cliente para realizar su margen.
                </p>
              </div>
              <div className="bg-slate-50 text-slate-500 text-[10px] font-black uppercase tracking-tight py-2 px-3 rounded-xl w-fit">
                TRANSFERIDO A CISCO CAP
              </div>
            </div>
          </div>

          {/* MAIN CHART */}
          <div className="bg-white p-8 rounded-3xl shadow-md border border-slate-100">
            <div className="flex justify-between items-center mb-8">
               <h2 className="text-xl font-bold text-slate-800">Flujo de Caja Acumulado (Partner vs Cliente)</h2>
               <span className="text-[10px] font-bold text-slate-300 uppercase tracking-widest">ANÁLISIS MULTIDIMENSIONAL</span>
            </div>
            <div className="h-[350px]">
              <ResponsiveContainer width="100%" height="100%">
                <LineChart data={monthlyData} margin={{ left: 20 }}>
                  <CartesianGrid strokeDasharray="3 3" stroke="#f8fafc" vertical={false} />
                  <XAxis dataKey="month" fontSize={11} stroke="#94a3b8" />
                  <YAxis fontSize={11} stroke="#94a3b8" tickFormatter={(v) => `$${v / 1000}k`} />
                  <Tooltip
                    formatter={(v) => formatCurrency(v)}
                    contentStyle={{ borderRadius: '16px', border: 'none', boxShadow: '0 10px 15px -3px rgba(0,0,0,0.1)' }}
                  />
                  <Legend 
                    verticalAlign="top" 
                    height={40} 
                    iconType="circle" 
                    formatter={(v) => <span className="text-sm font-bold text-slate-600">{v === 'cumPartner' ? 'Partner (Ganancia Acumulada)' : 'Cliente (Salida de Efectivo)'}</span>} 
                  />
                  <Line name="cumClient" type="monotone" dataKey="cumClient" stroke="#f43f5e" strokeWidth={3} dot={false} />
                  <Line name="cumPartner" type="stepAfter" dataKey="cumPartner" stroke="#2563eb" strokeWidth={5} dot={false} />
                </LineChart>
              </ResponsiveContainer>
            </div>
            <p className="text-[11px] text-slate-400 mt-6 text-center italic leading-relaxed">
              El salto inicial en el flujo del Partner representa el pago del 100% del margen por parte de Cisco Capital en el Día 1.
            </p>
          </div>

          {/* BOTTOM DARK BANNER */}
          <div className="bg-[#0f172a] text-white p-8 rounded-3xl shadow-2xl relative overflow-hidden">
            <div className="relative z-10 flex flex-col md:flex-row gap-8 items-center justify-between">
              <div className="flex-1">
                <h3 className="text-2xl font-bold flex items-center gap-3 mb-6">
                  <DollarSign size={28} className="text-emerald-400" /> Beneficio Neto para el Partner
                </h3>
                <div className="grid grid-cols-2 gap-6">
                  <div className="bg-white/5 p-5 rounded-2xl border border-white/10">
                    <span className="block text-[10px] text-slate-400 uppercase font-black mb-1">MARGEN INMEDIATO</span>
                    <span className="text-2xl font-black text-emerald-400">{formatCurrency(derived.partnerGrossMarginDay1)}</span>
                  </div>
                  <div className="bg-white/5 p-5 rounded-2xl border border-white/10">
                    <span className="block text-[10px] text-slate-400 uppercase font-black mb-1">INGRESO MRR (TOTAL)</span>
                    <span className="text-2xl font-black text-blue-400">{formatCurrency(inputs.managedServicesMRR * inputs.contractTermMonths)}</span>
                  </div>
                </div>
              </div>
              <div className="bg-emerald-500 text-emerald-950 p-6 rounded-3xl text-center min-w-[260px] shadow-lg shadow-emerald-500/20">
                <span className="text-[11px] font-black uppercase block mb-1 text-emerald-900">MARGEN TOTAL DEL NEGOCIO</span>
                <span className="text-4xl font-black block leading-none">
                  {formatCurrency(derived.partnerGrossMarginDay1 + (inputs.managedServicesMRR * inputs.contractTermMonths))}
                </span>
                <p className="text-[10px] font-bold mt-3 opacity-90 uppercase tracking-tighter">100% LIBRE DE RIESGO CREDITICIO</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

const PaybackView = ({ inputs, setInputs, monthlyData, formatCurrency }) => {
  return (
    <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-8 animate-in slide-in-from-bottom-4">
      <div className="lg:col-span-4">
        <InputPanel inputs={inputs} setInputs={setInputs} />
      </div>
      <div className="lg:col-span-8 space-y-6">
        <div className="bg-blue-900 text-white p-10 rounded-3xl shadow-xl relative overflow-hidden flex items-center">
          <div className="relative z-10">
            <h3 className="text-3xl font-black mb-3">Payback Partner: Mes 0</h3>
            <p className="text-sm opacity-80 max-w-lg text-blue-50 leading-relaxed">
              Dual Pay libera tu flujo de caja instantáneamente al recibir el pago del financiamiento el Día 1.
            </p>
          </div>
          <Clock className="absolute -right-10 -bottom-10 text-white/5" size={260} />
        </div>
        <div className="bg-white p-8 rounded-3xl shadow-md border border-slate-100">
          <h2 className="text-xl font-bold mb-8 text-slate-700">Comparativa de Retorno (Cash Flow Neto)</h2>
          <div className="h-[400px]">
            <ResponsiveContainer width="100%" height="100%">
              <AreaChart data={monthlyData} margin={{ left: 20 }}>
                <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" vertical={false} />
                <XAxis dataKey="month" fontSize={11} stroke="#94a3b8" />
                <YAxis fontSize={11} stroke="#94a3b8" tickFormatter={(v) => `$${v / 1000}k`} />
                <Tooltip formatter={(v) => formatCurrency(v)} />
                <Legend verticalAlign="top" height={40} />
                <Area name="Modelo Dual Pay" type="stepAfter" dataKey="cumPartner" stroke="#2563eb" strokeWidth={3} fill="#2563eb" fillOpacity={0.1} />
                <Area name="Modelo Tradicional (Sujeto a DSO)" type="stepAfter" dataKey="cumPartnerTraditional" stroke="#94a3b8" strokeWidth={2} fill="#94a3b8" fillOpacity={0.05} />
                <Line type="monotone" dataKey="zeroLine" stroke="#cbd5e1" strokeWidth={1} dot={false} />
              </AreaChart>
            </ResponsiveContainer>
          </div>
        </div>
      </div>
    </div>
  );
};

const FiscalView = ({ inputs, setInputs, derived, formatCurrency }) => {
  const fiscalChartData = [
    { name: 'Ahorro Fiscal OPEX (Dual Pay)', monto: derived.taxSavingsOPEX },
    { name: 'Ahorro Fiscal CAPEX (Compra)', monto: derived.taxSavingsCAPEX },
  ];

  return (
    <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-8 animate-in slide-in-from-right-4">
      <div className="lg:col-span-4">
        <InputPanel inputs={inputs} setInputs={setInputs} />
      </div>
      <div className="lg:col-span-8 space-y-6">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="bg-emerald-600 text-white p-8 rounded-3xl shadow-lg border border-emerald-500 relative overflow-hidden group">
            <p className="text-xs font-bold uppercase opacity-80 mb-2 flex items-center gap-1">
              <Zap size={16} className="text-yellow-400" fill="currentColor" /> AHORRO FISCAL INCREMENTAL (ANUAL)
            </p>
            <h4 className="text-4xl font-black">{formatCurrency(derived.fiscalBenefitDelta)}</h4>
            <p className="text-[11px] mt-4 opacity-90 leading-relaxed italic text-pretty">
              Diferencia de ahorro al deducir el 100% de la cuota como gasto vs depreciación lenta en CAPEX.
            </p>
            <TrendingUp size={100} className="absolute -right-6 -bottom-6 text-white/10 group-hover:scale-110 transition-transform" />
          </div>
          <div className="bg-white p-8 rounded-3xl border border-slate-100 shadow-sm flex flex-col justify-center">
            <p className="text-sm font-bold text-slate-400 uppercase mb-2">IMPACTO NETO REAL</p>
            <h4 className="text-3xl font-black text-slate-800 italic tracking-tight">
              {formatCurrency(derived.monthlyPaymentDualPay - (derived.taxSavingsOPEX / 12))}
            </h4>
            <p className="text-[10px] text-slate-400 mt-3 uppercase font-black tracking-widest leading-tight">
              COSTO EFECTIVO DE LA CUOTA MENSUAL DESPUÉS DE APLICAR EL BENEFICIO TRIBUTARIO.
            </p>
          </div>
        </div>

        <div className="bg-white p-8 rounded-3xl shadow-md border border-slate-100">
          <h2 className="text-xl font-bold mb-8 text-slate-800 flex items-center gap-2">
            <BarChart3 className="text-blue-600" size={24} /> Análisis del Escudo Tributario (Anual)
          </h2>
          <div className="h-[300px]">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={fiscalChartData} barSize={100}>
                <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f8fafc" />
                <XAxis dataKey="name" fontSize={11} stroke="#94a3b8" />
                <YAxis fontSize={11} stroke="#94a3b8" tickFormatter={(v) => `$${v/1000}k`} />
                <Tooltip 
                  formatter={(v) => formatCurrency(v)}
                  contentStyle={{ borderRadius: '16px', border: 'none', boxShadow: '0 10px 15px -3px rgba(0,0,0,0.1)' }}
                />
                <Bar dataKey="monto" radius={[8, 8, 0, 0]}>
                  {fiscalChartData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={index === 0 ? '#10b981' : '#94a3b8'} />
                  ))}
                </Bar>
              </BarChart>
            </ResponsiveContainer>
          </div>
          <div className="mt-8 p-6 bg-blue-50 rounded-2xl border border-blue-100 flex gap-4 items-start">
            <Info className="text-blue-600 shrink-0 mt-0.5" size={22} />
            <div className="text-xs text-blue-900 leading-relaxed italic">
              <strong>Argumento para el CFO:</strong> La compra directa obliga a depreciar a 5 años. Dual Pay permite llevar el 100% del pago a gastos operativos (OPEX), acelerando la deducción fiscal y mejorando el flujo de caja neto.
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

// --- APP PRINCIPAL ---

const App = () => {
  const [activeTab, setActiveTab] = useState('simulator');
  const [inputs, setInputs] = useState(defaultInputs);

  const derived = useMemo(() => {
    const customerFixedPrice = inputs.totalProjectListPrice;
    const partnerCostFromCisco = customerFixedPrice * (1 - (inputs.partnerDiscountRate / 100));
    const partnerGrossMarginDay1 = customerFixedPrice - partnerCostFromCisco;
    const monthlyPaymentDualPay = customerFixedPrice * inputs.ciscoCapitalFinanceFactor;

    const annualPaymentUSD = monthlyPaymentDualPay * 12;
    const taxSavingsOPEX = annualPaymentUSD * (inputs.taxRate / 100);
    const annualDepreciationCAPEX = customerFixedPrice / 5;
    const taxSavingsCAPEX = annualDepreciationCAPEX * (inputs.taxRate / 100);
    const fiscalBenefitDelta = taxSavingsOPEX - taxSavingsCAPEX;

    return {
      customerFixedPrice,
      partnerCostFromCisco,
      partnerGrossMarginDay1,
      monthlyPaymentDualPay,
      taxSavingsOPEX,
      taxSavingsCAPEX,
      fiscalBenefitDelta,
    };
  }, [inputs]);

  const monthlyData = useMemo(() => {
    let data = [];
    let cumPartner = 0;
    let cumClient = 0;
    let cumPartnerTraditional = 0;
    const monthDSO = Math.ceil(inputs.traditionalDSO / 30);

    for (let m = 0; m <= inputs.contractTermMonths; m++) {
      let cfPartner = m === 0 ? derived.partnerGrossMarginDay1 : inputs.managedServicesMRR;
      let cfClient = m === 0 ? 0 : -derived.monthlyPaymentDualPay;

      if (m === inputs.contractTermMonths && inputs.endOfTermOption === 'OWN') {
        cfClient -= inputs.fixedResidualValue;
      }

      let cfTrad = 0;
      if (m === 0) cfTrad = -derived.partnerCostFromCisco;
      else if (m === monthDSO) cfTrad = derived.customerFixedPrice;
      else cfTrad = inputs.managedServicesMRR;

      cumPartner += cfPartner;
      cumClient += cfClient;
      cumPartnerTraditional += cfTrad;

      data.push({
        month: m, partner: cfPartner, client: cfClient,
        cumPartner, cumClient, cumPartnerTraditional, zeroLine: 0
      });
    }
    return data;
  }, [inputs, derived]);

  const formatCurrency = (val) => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(val);

  return (
    <div className="min-h-screen bg-[#f8fafc] font-sans text-slate-900 pb-20">
      <style>{`
        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(8px); }
          to { opacity: 1; transform: translateY(0); }
        }
        @keyframes slideInFromBottom {
          from { opacity: 0; transform: translateY(16px); }
          to { opacity: 1; transform: translateY(0); }
        }
        @keyframes slideInFromRight {
          from { opacity: 0; transform: translateX(16px); }
          to { opacity: 1; transform: translateX(0); }
        }
        .animate-in.fade-in { animation: fadeIn 0.5s ease-out forwards; }
        .animate-in.slide-in-from-bottom-4 { animation: slideInFromBottom 0.5s ease-out forwards; }
        .animate-in.slide-in-from-right-4 { animation: slideInFromRight 0.5s ease-out forwards; }
        
        input[type="number"]::-webkit-outer-spin-button,
        input[type="number"]::-webkit-inner-spin-button {
          -webkit-appearance: none; margin: 0;
        }
        input[type="number"] { -moz-appearance: textfield; }
      `}</style>

      <nav className="bg-white border-b border-slate-200 sticky top-0 z-50 shadow-sm">
        <div className="max-w-7xl mx-auto px-4 md:px-8 flex justify-between items-center h-16">
          <div className="flex items-center gap-3">
            <div className="bg-blue-600 p-1.5 rounded-lg shadow-blue-200 shadow-lg leading-none">
              <ShieldCheck className="text-white" size={24} />
            </div>
            <h1 className="text-xl font-bold text-slate-800 flex items-center gap-2">
              Cisco Capital <span className="text-slate-400 font-light">LATAM</span>
            </h1>
          </div>
          <div className="flex gap-2 bg-slate-100 p-1 rounded-2xl border border-slate-200 shadow-inner">
            <button 
              onClick={() => setActiveTab('simulator')}
              className={`flex items-center gap-2 px-5 py-2.5 rounded-xl text-[11px] font-bold transition-all duration-300 ${activeTab === 'simulator' ? 'bg-white text-blue-600 shadow-md border border-slate-200/50' : 'text-slate-500 hover:text-slate-800'}`}
            >
              <LayoutDashboard size={14} /> <span>Simulador de Oferta</span>
            </button>
            <button 
              onClick={() => setActiveTab('payback')}
              className={`flex items-center gap-2 px-5 py-2.5 rounded-xl text-[11px] font-bold transition-all duration-300 ${activeTab === 'payback' ? 'bg-white text-blue-600 shadow-md border border-slate-200/50' : 'text-slate-500 hover:text-blue-800'}`}
            >
              <Wallet size={14} /> <span>Análisis de Payback</span>
            </button>
            <button 
              onClick={() => setActiveTab('fiscal')}
              className={`flex items-center gap-2 px-5 py-2.5 rounded-xl text-[11px] font-bold transition-all duration-300 ${activeTab === 'fiscal' ? 'bg-white text-blue-600 shadow-md border border-slate-200/50' : 'text-slate-500 hover:text-blue-800'}`}
            >
              <Percent size={14} /> <span>Fiscal & ROI</span>
            </button>
          </div>
        </div>
      </nav>

      <div className="max-w-7xl mx-auto pt-10 px-4">
        {activeTab === 'simulator' && (
          <SimulatorView 
            inputs={inputs} 
            setInputs={setInputs} 
            derived={derived} 
            monthlyData={monthlyData} 
            formatCurrency={formatCurrency} 
          />
        )}
        {activeTab === 'payback' && (
          <PaybackView 
            inputs={inputs} 
            setInputs={setInputs} 
            monthlyData={monthlyData} 
            formatCurrency={formatCurrency} 
          />
        )}
        {activeTab === 'fiscal' && (
          <FiscalView 
            inputs={inputs} 
            setInputs={setInputs} 
            derived={derived} 
            formatCurrency={formatCurrency} 
          />
        )}
      </div>

      <footer className="fixed bottom-0 w-full bg-[#1e293b] py-3 text-center text-[10px] text-slate-400 font-bold uppercase tracking-widest border-t border-slate-700/50 z-[100]">
        © 2024 Cisco Capital LATAM Financial Engineering Tool. Basado en modelos de estructuración Dual Pay. Los factores y residuales son referenciales.
      </footer>
    </div>
  );
};

export default App;