import React, { useState, useMemo } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { TrendingUp, Wallet, Landmark, ArrowRight, X, Info, Calculator, Percent, ShieldCheck } from 'lucide-react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from 'recharts';

const CALCULATORS = [
  {
    id: 'compound',
    tag: 'INVESTING',
    title: 'Compound Interest Calculator',
    description: 'Watch your money grow year by year with a live animated chart. Adjust return rate, contributions, and timeline.',
    icon: <TrendingUp className="text-blue-500" />,
    color: 'border-blue-400',
    features: [
      'Year-by-year growth chart',
      'Contribution vs. gain breakdown',
      'Rule of 72 insight built in',
      'Compare fee drag scenarios'
    ]
  },
  {
    id: 'retirement',
    tag: 'RETIREMENT',
    title: 'Retirement Savings Calculator',
    description: 'Find your magic number — how much you need to retire, based on your spending, Social Security, and withdrawal rate.',
    icon: <Landmark className="text-amber-500" />,
    color: 'border-amber-400',
    features: [
      '4% rule & safe withdrawal modeling',
      'Social Security income offset',
      'On-track vs. gap analysis',
      'Inflation-adjusted projections'
    ]
  },
  {
    id: 'tax',
    tag: 'TAX STRATEGY',
    title: 'Roth vs. Traditional IRA',
    description: 'Side-by-side after-tax comparison at retirement. Select your current and expected future tax brackets.',
    icon: <Wallet className="text-purple-500" />,
    color: 'border-purple-400',
    features: [
      'Current vs. retirement bracket selector',
      'After-tax value comparison',
      'Break-even tax rate shown',
      'RMD impact explained'
    ]
  }
];

export default function FinancialCalculators() {
  const [activeCalc, setActiveCalc] = useState(null);

  return (
    <div className="mt-12 mb-16">
      <div className="flex items-center justify-between mb-8">
        <div>
          <h2 className="text-2xl font-light text-gs-navy">Institutional <span className="font-semibold">Planning Tools</span></h2>
          <p className="text-gs-slate text-sm">Advanced modeling used by our private wealth advisors.</p>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {CALCULATORS.map((calc) => (
          <CalculatorCard 
            key={calc.id} 
            calc={calc} 
            onClick={() => setActiveCalc(calc)} 
          />
        ))}
      </div>

      <AnimatePresence>
        {activeCalc && (
          <CalculatorModal 
            calc={activeCalc} 
            onClose={() => setActiveCalc(null)} 
          />
        )}
      </AnimatePresence>
    </div>
  );
}

function CalculatorCard({ calc, onClick }) {
  return (
    <motion.div 
      whileHover={{ y: -5 }}
      className={`bg-white rounded-xl shadow-sm border-t-4 ${calc.color} p-6 flex flex-col h-full border-x border-b border-gray-100 hover:shadow-md transition-shadow cursor-pointer group`}
      onClick={onClick}
    >
      <div className="flex justify-between items-start mb-6">
        <div className="p-3 bg-gray-50 rounded-xl group-hover:bg-gs-light transition-colors">
          {calc.icon}
        </div>
        <span className="text-[10px] font-bold tracking-widest text-gs-slate/60 bg-gray-100 px-2 py-1 rounded">
          {calc.tag}
        </span>
      </div>

      <h3 className="text-xl font-semibold text-gs-navy mb-3 group-hover:text-gs-gold transition-colors">
        {calc.title}
      </h3>
      
      <p className="text-gs-slate text-sm font-light leading-relaxed mb-6 flex-grow">
        {calc.description}
      </p>

      <ul className="space-y-2 mb-8">
        {calc.features.map((feature, i) => (
          <li key={i} className="flex items-center text-xs text-gs-slate/80">
            <ShieldCheck size={14} className="text-gs-gold mr-2 flex-shrink-0" />
            {feature}
          </li>
        ))}
      </ul>

      <div className="flex items-center text-gs-navy font-semibold text-sm group-hover:translate-x-1 transition-transform">
        Open Calculator <ArrowRight size={16} className="ml-2" />
      </div>
    </motion.div>
  );
}

function CalculatorModal({ calc, onClose }) {
  const [inputs, setInputs] = useState({
    salary: 120000,
    contribution: 15, // percent
    has401k: true,
    employerMatch: 4,
    age: 30,
    retirementAge: 65,
    initialSavings: 50000,
    annualReturn: 7,
    taxBracket: 24,
    futureTaxBracket: 20
  });

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

  const renderCalculatorContent = () => {
    switch (calc.id) {
      case 'compound':
        return <CompoundCalc inputs={inputs} onChange={handleInputChange} />;
      case 'retirement':
        return <RetirementCalc inputs={inputs} onChange={handleInputChange} />;
      case 'tax':
        return <TaxCalc inputs={inputs} onChange={handleInputChange} />;
      default:
        return null;
    }
  };

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-gs-navy/40 backdrop-blur-sm">
      <motion.div 
        initial={{ opacity: 0, scale: 0.95, y: 20 }}
        animate={{ opacity: 1, scale: 1, y: 0 }}
        exit={{ opacity: 0, scale: 0.95, y: 20 }}
        className="bg-white rounded-2xl shadow-2xl w-full max-w-5xl max-h-[90vh] overflow-hidden flex flex-col md:flex-row"
      >
        {/* Sidebar / Inputs */}
        <div className="w-full md:w-80 bg-gs-light p-8 border-r border-gray-200 overflow-y-auto">
          <div className="flex items-center mb-8">
            <div className="p-2 bg-white rounded-lg shadow-sm mr-3">
              {calc.icon}
            </div>
            <h3 className="font-bold text-gs-navy uppercase tracking-wider text-sm">{calc.tag}</h3>
          </div>

          <div className="space-y-6">
            <div className="grid grid-cols-2 gap-4">
              <InputGroup 
                label="Current Age" 
                name="age" 
                value={inputs.age} 
                onChange={handleInputChange} 
              />
              <InputGroup 
                label="Retire Age" 
                name="retirementAge" 
                value={inputs.retirementAge} 
                onChange={handleInputChange} 
              />
            </div>
            <InputGroup 
              label="Annual Salary" 
              name="salary" 
              value={inputs.salary} 
              onChange={handleInputChange} 
              prefix="$" 
            />
            <InputGroup 
              label="401k Contribution (%)" 
              name="contribution" 
              value={inputs.contribution} 
              onChange={handleInputChange} 
              suffix="%" 
              type="range"
              min="0"
              max="50"
            />
            <InputGroup 
              label="Employer Match (%)" 
              name="employerMatch" 
              value={inputs.employerMatch} 
              onChange={handleInputChange} 
              suffix="%" 
            />
            <div className="grid grid-cols-2 gap-4">
              <InputGroup 
                label="Current Tax" 
                name="taxBracket" 
                value={inputs.taxBracket} 
                onChange={handleInputChange} 
                suffix="%"
              />
              <InputGroup 
                label="Retire Tax" 
                name="futureTaxBracket" 
                value={inputs.futureTaxBracket} 
                onChange={handleInputChange} 
                suffix="%"
              />
            </div>
            <InputGroup 
              label="Initial Savings" 
              name="initialSavings" 
              value={inputs.initialSavings} 
              onChange={handleInputChange} 
              prefix="$" 
            />
            <InputGroup 
              label="Expected Return" 
              name="annualReturn" 
              value={inputs.annualReturn} 
              onChange={handleInputChange} 
              suffix="%" 
            />
          </div>

          <div className="mt-12 p-4 bg-gs-gold/10 rounded-xl border border-gs-gold/20">
            <h4 className="text-xs font-bold text-gs-gold mb-2 flex items-center">
              <Info size={14} className="mr-1" /> GS ADVICE
            </h4>
            <InvestmentAdvice inputs={inputs} />
          </div>
        </div>

        {/* Main Content / Results */}
        <div className="flex-grow flex flex-col h-full bg-white relative">
          <button 
            onClick={onClose}
            className="absolute top-6 right-6 p-2 hover:bg-gray-100 rounded-full transition-colors z-10"
          >
            <X size={20} className="text-gs-slate" />
          </button>

          <div className="p-8 md:p-12 overflow-y-auto">
            <div className="mb-10">
              <h2 className="text-3xl font-light text-gs-navy mb-2">{calc.title}</h2>
              <p className="text-gs-slate font-light">Interactive projection based on institutional modeling.</p>
            </div>

            {renderCalculatorContent()}
          </div>
        </div>
      </motion.div>
    </div>
  );
}

function InputGroup({ label, name, value, onChange, prefix, suffix, type = "number", min, max }) {
  return (
    <div className="space-y-2">
      <div className="flex justify-between items-center">
        <label className="text-xs font-semibold text-gs-slate uppercase tracking-tighter">{label}</label>
        {type === "range" && <span className="text-sm font-bold text-gs-navy">{value}{suffix}</span>}
      </div>
      <div className="relative">
        {prefix && <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm">{prefix}</span>}
        <input 
          type={type}
          name={name}
          value={value}
          onChange={onChange}
          min={min}
          max={max}
          className={`w-full bg-white border border-gray-200 rounded-lg p-2 text-sm focus:ring-2 focus:ring-gs-gold focus:border-transparent outline-none transition-all ${prefix ? 'pl-7' : ''} ${suffix && type !== 'range' ? 'pr-7' : ''}`}
        />
        {suffix && type !== "range" && <span className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm">{suffix}</span>}
      </div>
    </div>
  );
}

function InvestmentAdvice({ inputs }) {
  const { salary, contribution, employerMatch } = inputs;
  const totalContribution = contribution + employerMatch;
  
  let advice = "";
  if (totalContribution < 15) {
    advice = `Increase your total savings to at least 15% ($${(salary * 0.15 / 12).toLocaleString()} /mo) to remain on track for institutional-grade retirement.`;
  } else if (contribution > employerMatch + 10) {
    advice = "You are over-contributing to 401k. Consider diversifying into a brokerage account for liquidity or high-yield GS instruments.";
  } else {
    advice = "Excellent contribution level. Ensure your portfolio allocation matches your risk profile in the main dashboard.";
  }

  return <p className="text-xs text-gs-navy leading-relaxed">{advice}</p>;
}

// Calculator Logic Components
function CompoundCalc({ inputs }) {
  const data = useMemo(() => {
    let current = inputs.initialSavings;
    let totalContributed = inputs.initialSavings;
    const yearlyReturn = inputs.annualReturn / 100;
    const yearlyContribution = (inputs.salary * (inputs.contribution / 100));
    
    const results = [];
    for (let i = 0; i <= 30; i++) {
      results.push({
        year: `Year ${i}`,
        balance: Math.round(current),
        contributions: Math.round(totalContributed)
      });
      current = (current + yearlyContribution) * (1 + yearlyReturn);
      totalContributed += yearlyContribution;
    }
    return results;
  }, [inputs]);

  const finalBalance = data[data.length - 1].balance;

  return (
    <div className="space-y-8">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="p-6 bg-gs-navy text-white rounded-2xl">
          <p className="text-xs font-bold text-gs-gold uppercase tracking-widest mb-1">Estimated Value (30 Years)</p>
          <p className="text-4xl font-light">${finalBalance.toLocaleString()}</p>
        </div>
        <div className="p-6 bg-gs-light rounded-2xl border border-gray-100">
          <p className="text-xs font-bold text-gs-slate uppercase tracking-widest mb-1">Total Interest Earned</p>
          <p className="text-4xl font-light text-gs-navy">${(finalBalance - data[data.length-1].contributions).toLocaleString()}</p>
        </div>
      </div>

      <div className="h-[350px] w-full">
        <ResponsiveContainer width="100%" height="100%">
          <AreaChart data={data}>
            <defs>
              <linearGradient id="colorBalance" x1="0" y1="0" x2="0" y2="1">
                <stop offset="5%" stopColor="#C5A880" stopOpacity={0.3}/>
                <stop offset="95%" stopColor="#C5A880" stopOpacity={0}/>
              </linearGradient>
            </defs>
            <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#eee" />
            <XAxis dataKey="year" hide />
            <YAxis 
              tickFormatter={(value) => `$${value / 1000}k`} 
              axisLine={false} 
              tickLine={false}
              tick={{fontSize: 12, fill: '#666'}}
            />
            <Tooltip 
              formatter={(value) => [`$${value.toLocaleString()}`, '']}
              contentStyle={{ borderRadius: '12px', border: 'none', boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)' }}
            />
            <Area type="monotone" dataKey="balance" stroke="#C5A880" strokeWidth={3} fillOpacity={1} fill="url(#colorBalance)" />
            <Area type="monotone" dataKey="contributions" stroke="#0B233F" strokeWidth={2} fillOpacity={0.1} fill="#0B233F" />
          </AreaChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
}

function RetirementCalc({ inputs }) {
  const { salary, contribution, employerMatch, initialSavings, annualReturn, age, retirementAge } = inputs;
  
  const yearsToRetirement = retirementAge - age;
  const annualContribution = salary * ((contribution + employerMatch) / 100);
  const rate = annualReturn / 100;

  // FV of current savings + FV of annual contributions
  const fvInitial = initialSavings * Math.pow(1 + rate, yearsToRetirement);
  const fvContributions = annualContribution * (Math.pow(1 + rate, yearsToRetirement) - 1) / rate;
  const projectedTotal = fvInitial + fvContributions;

  // Retirement Need: 80% of salary * 25 (4% rule)
  const annualNeed = salary * 0.8;
  const totalNeed = annualNeed * 25;
  const gap = totalNeed - projectedTotal;

  return (
    <div className="space-y-6">
      <div className="p-8 bg-gs-light rounded-2xl border border-dashed border-gs-gold/50 flex flex-col items-center justify-center text-center">
        <Landmark size={48} className="text-gs-gold mb-4" />
        <h4 className="text-xl font-medium text-gs-navy mb-2">Retirement Readiness Analysis</h4>
        <p className="text-gs-slate max-w-md">
          To maintain your lifestyle, you'll need approximately <span className="font-bold text-gs-navy">${(totalNeed / 1000000).toFixed(1)}M</span>. 
          Your current path projects a fund of <span className="font-bold text-gs-navy">${(projectedTotal / 1000000).toFixed(1)}M</span> in {yearsToRetirement} years.
        </p>
      </div>
      
      <div className="grid grid-cols-3 gap-4">
        <div className="p-4 bg-white border border-gray-100 rounded-xl shadow-sm text-center">
          <p className="text-[10px] font-bold text-gs-slate uppercase tracking-tighter">Current Plan</p>
          <p className="text-lg font-semibold text-gs-navy">${(projectedTotal / 1000000).toFixed(2)}M</p>
        </div>
        <div className="p-4 bg-white border border-gray-100 rounded-xl shadow-sm text-center">
          <p className="text-[10px] font-bold text-gs-slate uppercase tracking-tighter">Projected {gap > 0 ? 'Gap' : 'Surplus'}</p>
          <p className={`text-lg font-semibold ${gap > 0 ? 'text-red-500' : 'text-green-600'}`}>
            ${Math.abs(gap / 1000000).toFixed(2)}M
          </p>
        </div>
        <div className="p-4 bg-white border border-gray-100 rounded-xl shadow-sm text-center">
          <p className="text-[10px] font-bold text-gs-slate uppercase tracking-tighter">Savings Rate</p>
          <p className="text-lg font-semibold text-gs-gold">{contribution + employerMatch}%</p>
        </div>
      </div>

      <div className="mt-4 p-4 bg-gs-navy text-white rounded-xl text-xs font-light">
        <p><span className="text-gs-gold font-bold">PROJECTION BASIS:</span> Assumes {annualReturn}% annual return, inflation-adjusted spending, and adherence to the 4% safe withdrawal rule. Modeling includes GS institutional market assumptions.</p>
      </div>
    </div>
  );
}

function TaxCalc({ inputs }) {
  const { salary, contribution, initialSavings, annualReturn, age, retirementAge, taxBracket, futureTaxBracket } = inputs;
  
  const years = retirementAge - age;
  const rate = annualReturn / 100;
  const annualContribution = salary * (contribution / 100);

  // Traditional IRA: Invest pre-tax, pay tax at withdrawal
  const tradFV_Initial = initialSavings * Math.pow(1 + rate, years);
  const tradFV_Cont = annualContribution * (Math.pow(1 + rate, years) - 1) / rate;
  const tradNet = (tradFV_Initial + tradFV_Cont) * (1 - (futureTaxBracket / 100));

  // Roth IRA: Invest after-tax, tax-free withdrawal
  const rothInitial = initialSavings * (1 - (taxBracket / 100));
  const rothAnnual = annualContribution * (1 - (taxBracket / 100));
  const rothFV_Initial = rothInitial * Math.pow(1 + rate, years);
  const rothFV_Cont = rothAnnual * (Math.pow(1 + rate, years) - 1) / rate;
  const rothNet = rothFV_Initial + rothFV_Cont;

  const winner = rothNet > tradNet ? "Roth" : "Traditional";
  const diffPercent = Math.abs(((rothNet - tradNet) / Math.min(rothNet, tradNet)) * 100).toFixed(1);

  return (
    <div className="space-y-8">
      <div className="flex flex-col md:flex-row gap-4">
        <div className={`flex-1 p-6 border rounded-2xl transition-all ${winner === 'Roth' ? 'border-purple-200 bg-purple-50/30' : 'border-gray-100 bg-gray-50/50 opacity-80'}`}>
          <h4 className="text-purple-700 font-bold text-xs uppercase mb-4 flex justify-between">
            Roth Strategy {winner === 'Roth' && <span className="bg-purple-100 text-[8px] px-2 py-0.5 rounded-full text-purple-700">OPTIMAL</span>}
          </h4>
          <p className="text-gs-navy text-sm font-light leading-relaxed">Pay taxes now at <span className="font-bold">{taxBracket}%</span>. All future growth and withdrawals are <span className="text-purple-700 font-bold underline">100% Tax-Free</span>.</p>
          <div className="mt-6 pt-6 border-t border-purple-100">
            <span className="text-3xl font-semibold text-purple-700">${(rothNet / 1000).toFixed(0)}k</span>
            <p className="text-xs text-purple-600 mt-1 uppercase tracking-wider font-bold">Estimated Net Wealth</p>
          </div>
        </div>

        <div className={`flex-1 p-6 border rounded-2xl transition-all ${winner === 'Traditional' ? 'border-gs-navy/20 bg-gs-light' : 'border-gray-100 bg-gray-50/50 opacity-80'}`}>
          <h4 className="text-gs-navy font-bold text-xs uppercase mb-4 flex justify-between">
            Traditional {winner === 'Traditional' && <span className="bg-gs-navy text-white text-[8px] px-2 py-0.5 rounded-full">OPTIMAL</span>}
          </h4>
          <p className="text-gs-navy text-sm font-light leading-relaxed">Get a tax deduction now. Entire balance is taxed at <span className="font-bold">{futureTaxBracket}%</span> during retirement.</p>
          <div className="mt-6 pt-6 border-t border-gray-200">
            <span className="text-3xl font-semibold text-gs-navy">${(tradNet / 1000).toFixed(0)}k</span>
            <p className="text-xs text-gs-slate mt-1 uppercase tracking-wider font-bold">Estimated Net Wealth</p>
          </div>
        </div>
      </div>

      <div className="bg-gs-navy text-white p-6 rounded-2xl flex flex-col md:flex-row justify-between items-center gap-4">
        <div>
          <h4 className="text-gs-gold font-bold text-[10px] uppercase tracking-widest mb-1">Strategic Selection</h4>
          <p className="text-lg font-light">The <span className="font-bold text-gs-gold">{winner} Strategy</span> is projected to provide <span className="font-bold">{diffPercent}% more</span> spendable wealth.</p>
        </div>
        <div className="flex items-center gap-3">
          <div className="text-right hidden md:block">
            <p className="text-[10px] text-gray-400 font-bold uppercase">Difference</p>
            <p className="text-gs-gold font-bold">${Math.abs((rothNet - tradNet) / 1000).toFixed(0)}k</p>
          </div>
          <div className="p-3 bg-gs-gold/20 rounded-full border border-gs-gold/30">
            <Percent className="text-gs-gold" size={24} />
          </div>
        </div>
      </div>
    </div>
  );
}