import React, { useState } from 'react';
import { Button } from './ui/button.js';


function ExpensesWizard({ onClose, onExpensesCalculated }) {
  const [housing, setHousing] = useState('');
  const [utilities, setUtilities] = useState('');
  const [groceries, setGroceries] = useState('');
  const [transportation, setTransportation] = useState('');
  const [insurance, setInsurance] = useState('');
  const [misc, setMisc] = useState('');

  const calculateTotal = () => {
    const sum =
      (parseFloat(housing) || 0) +
      (parseFloat(utilities) || 0) +
      (parseFloat(groceries) || 0) +
      (parseFloat(transportation) || 0) +
      (parseFloat(insurance) || 0) +
      (parseFloat(misc) || 0);

    return sum;
  };

  const handleFinish = () => {
    const total = calculateTotal();
    onExpensesCalculated(total);
    onClose();
  };

  const totalExpenses = calculateTotal();

  return (
    <div className="p-4 bg-white rounded shadow-md">
      <h2 className="text-xl font-semibold mb-4">Monthly Expenses Wizard</h2>
      <p className="text-sm mb-4">
        Enter approximate amounts for each category below. We'll sum them up to estimate
        your monthly expenses.
      </p>

      <div className="mb-2">
        <label className="block text-sm font-medium">
          Housing (Rent/Mortgage)
        </label>
        <input
          type="number"
          className="border p-2 rounded w-full"
          value={housing}
          onChange={(e) => setHousing(e.target.value)}
          placeholder="e.g. 1500"
        />
      </div>

      <div className="mb-2">
        <label className="block text-sm font-medium">Utilities</label>
        <input
          type="number"
          className="border p-2 rounded w-full"
          value={utilities}
          onChange={(e) => setUtilities(e.target.value)}
          placeholder="Water, electricity, gas, etc. (e.g. 200)"
        />
      </div>

      <div className="mb-2">
        <label className="block text-sm font-medium">Food</label>
        <input
          type="number"
          className="border p-2 rounded w-full"
          value={groceries}
          onChange={(e) => setGroceries(e.target.value)}
          placeholder="Groceries, dining out, etc. (e.g. 300)"
        />
      </div>

      <div className="mb-2">
        <label className="block text-sm font-medium">Transportation</label>
        <input
          type="number"
          className="border p-2 rounded w-full"
          value={transportation}
          onChange={(e) => setTransportation(e.target.value)}
          placeholder="Car payment, gas, train, bus, uber fare e.g. 500"
        />
      </div>

      <div className="mb-2">
        <label className="block text-sm font-medium">Insurance</label>
        <input
          type="number"
          className="border p-2 rounded w-full"
          value={insurance}
          onChange={(e) => setInsurance(e.target.value)}
          placeholder="Car, house, rental, health insurance not deducted from paycheck (e.g. 200)"
        />
      </div>

      <div className="mb-2">
        <label className="block text-sm font-medium">Miscellaneous</label>
        <input
          type="number"
          className="border p-2 rounded w-full"
          value={misc}
          onChange={(e) => setMisc(e.target.value)}
          placeholder="Subscriptions, Phone, any recurring cost not covered elsewhere e.g. 250"
        />
      </div>

{/* Show the user the current total */}
      <p className="text-sm mb-4">
        <strong>Current Total:</strong> ${totalExpenses.toFixed(2)}
      </p>

      <div className="mt-4 flex justify-between">
        <Button
          className="bg-gray-200 text-gray-800 hover:bg-gray-300"
          onClick={onClose}
        >
          Cancel
        </Button>
        <Button className="bg-blue-600 hover:bg-blue-700" onClick={handleFinish}>
          Use This Total
        </Button>
      </div>
    </div>
  );
}

export default ExpensesWizard;