import React, { useState } from 'react';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Download } from 'lucide-react';

const FIRECalculator = () => {
  const [inputs, setInputs] = useState({
    currentAge: 30,
    annualExpenses: 50000,
    currentSavings: 100000,
    monthlySavings: 2000,
    withdrawalRate: 4,
    returnRate: 7,
    inflationRate: 2.5
  });

  // Calculate FIRE Number
  const calculateFIRENumber = () => {
    return (inputs.annualExpenses * (100 / inputs.withdrawalRate));
  };

  // Calculate Years to FIRE
  const calculateYearsToFIRE = () => {
    const fireNumber = calculateFIRENumber();
    const monthlyReturn = inputs.returnRate / 100 / 12;
    let currentSavings = inputs.currentSavings;
    let months = 0;
    
    while (currentSavings < fireNumber && months < 600) { // 50 years max
      currentSavings = currentSavings * (1 + monthlyReturn) + inputs.monthlySavings;
      months++;
    }
    
    return (months / 12).toFixed(1);
  };

  const generateSpreadsheet = () => {
    // TODO: Implement Google Sheets API integration
    console.log("Generating spreadsheet template...");
  };

  return (
    <Card className="w-full max-w-2xl">
      <CardHeader>
        <CardTitle>FIRE Calculator & Template Generator</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium">Current Age</label>
              <input
                type="number"
                value={inputs.currentAge}
                onChange={(e) => setInputs({...inputs, currentAge: Number(e.target.value)})}
                className="w-full p-2 border rounded"
                min="0"
                max="100"
              />
            </div>
            
            <div>
              <label className="block text-sm font-medium">Annual Expenses</label>
              <input
                type="number"
                value={inputs.annualExpenses}
                onChange={(e) => setInputs({...inputs, annualExpenses: Number(e.target.value)})}
                className="w-full p-2 border rounded"
                min="0"
              />
            </div>
            
            <div>
              <label className="block text-sm font-medium">Current Savings</label>
              <input
                type="number"
                value={inputs.currentSavings}
                onChange={(e) => setInputs({...inputs, currentSavings: Number(e.target.value)})}
                className="w-full p-2 border rounded"
                min="0"
              />
            </div>
            
            <div>
              <label className="block text-sm font-medium">Monthly Savings</label>
              <input
                type="number"
                value={inputs.monthlySavings}
                onChange={(e) => setInputs({...inputs, monthlySavings: Number(e.target.value)})}
                className="w-full p-2 border rounded"
                min="0"
              />
            </div>
          </div>
          
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium">Withdrawal Rate (%)</label>
              <input
                type="number"
                value={inputs.withdrawalRate}
                onChange={(e) => setInputs({...inputs, withdrawalRate: Number(e.target.value)})}
                className="w-full p-2 border rounded"
                min="0.1"
                max="10"
                step="0.1"
              />
            </div>
            
            <div>
              <label className="block text-sm font-medium">Expected Return Rate (%)</label>
              <input
                type="number"
                value={inputs.returnRate}
                onChange={(e) => setInputs({...inputs, returnRate: Number(e.target.value)})}
                className="w-full p-2 border rounded"
                min="0"
                max="15"
                step="0.1"
              />
            </div>
            
            <div>
              <label className="block text-sm font-medium">Inflation Rate (%)</label>
              <input
                type="number"
                value={inputs.inflationRate}
                onChange={(e) => setInputs({...inputs, inflationRate: Number(e.target.value)})}
                className="w-full p-2 border rounded"
                min="0"
                max="10"
                step="0.1"
              />
            </div>
          </div>
        </div>

        <div className="mt-8 p-4 bg-gray-50 rounded-lg">
          <h3 className="font-semibold mb-4">Results</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <p className="text-sm text-gray-600">FIRE Number</p>
              <p className="text-2xl font-bold">${calculateFIRENumber().toLocaleString()}</p>
            </div>
            <div>
              <p className="text-sm text-gray-600">Years to FIRE</p>
              <p className="text-2xl font-bold">{calculateYearsToFIRE()} years</p>
            </div>
          </div>
        </div>

        <button
          onClick={generateSpreadsheet}
          className="mt-6 w-full bg-indigo-600 text-white p-3 rounded-lg flex items-center justify-center hover:bg-indigo-700"
        >
          <Download className="w-5 h-5 mr-2" />
          Generate Spreadsheet Template
        </button>
      </CardContent>
    </Card>
  );
};

export default FIRECalculator;