import React, { useState, useEffect } from 'react';
import { BarChart, LineChart, Line, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
import { PieChart, Pie, Cell } from 'recharts';
import { Upload, DollarSign, Calendar, TrendingUp, Menu, X, Plus, Edit2, Trash2, FileText, Save } from 'lucide-react';

export default function FinanceManager() {
  // State management
  const [transactions, setTransactions] = useState([]);
  const [categories, setCategories] = useState([
    'Housing', 'Food', 'Transportation', 'Utilities', 'Entertainment', 'Healthcare', 'Shopping', 'Personal', 'Debt', 'Income', 'Other'
  ]);
  const [budgets, setBudgets] = useState({});
  const [activeTab, setActiveTab] = useState('dashboard');
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [isAddBudgetModalOpen, setIsAddBudgetModalOpen] = useState(false);
  const [newBudget, setNewBudget] = useState({ month: '', category: '', amount: '' });
  const [forecastMonths, setForecastMonths] = useState(3);
  const [csvParseError, setCsvParseError] = useState('');

  // Load data from localStorage on component mount
  useEffect(() => {
    const savedTransactions = localStorage.getItem('transactions');
    const savedBudgets = localStorage.getItem('budgets');
    
    if (savedTransactions) {
      setTransactions(JSON.parse(savedTransactions));
    }
    
    if (savedBudgets) {
      setBudgets(JSON.parse(savedBudgets));
    }
  }, []);

  // Save data to localStorage when it changes
  useEffect(() => {
    localStorage.setItem('transactions', JSON.stringify(transactions));
  }, [transactions]);

  useEffect(() => {
    localStorage.setItem('budgets', JSON.stringify(budgets));
  }, [budgets]);

  // CSV file handling
  const handleFileUpload = (event) => {
    const file = event.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        try {
          const csvData = parseCSV(e.target.result);
          setTransactions([...transactions, ...csvData]);
          setCsvParseError('');
        } catch (error) {
          setCsvParseError('Error parsing CSV file. Please check the format.');
          console.error('CSV parsing error:', error);
        }
      };
      reader.readAsText(file);
    }
  };

  // Parse CSV data
  const parseCSV = (csvText) => {
    const lines = csvText.split('\n');
    const headers = lines[0].split(',').map(header => header.trim());
    
    // Check if required columns exist
    const dateIndex = headers.findIndex(h => h.toLowerCase().includes('date'));
    const amountIndex = headers.findIndex(h => h.toLowerCase().includes('amount'));
    const descriptionIndex = headers.findIndex(h => h.toLowerCase().includes('description'));
    
    if (dateIndex === -1 || amountIndex === -1 || descriptionIndex === -1) {
      throw new Error('CSV must contain date, amount, and description columns');
    }
    
    const parsedData = [];
    
    for (let i = 1; i < lines.length; i++) {
      if (!lines[i].trim()) continue;
      
      const values = lines[i].split(',').map(value => value.trim());
      
      if (values.length >= Math.max(dateIndex, amountIndex, descriptionIndex) + 1) {
        const transaction = {
          id: Date.now() + i,
          date: new Date(values[dateIndex]),
          amount: parseFloat(values[amountIndex].replace(/[^0-9.-]+/g, '')),
          description: values[descriptionIndex],
          category: guessCategory(values[descriptionIndex])
        };
        
        parsedData.push(transaction);
      }
    }
    
    return parsedData;
  };

  // Guess category based on description
  const guessCategory = (description) => {
    description = description.toLowerCase();
    
    if (description.includes('rent') || description.includes('mortgage')) return 'Housing';
    if (description.includes('grocery') || description.includes('restaurant') || description.includes('food')) return 'Food';
    if (description.includes('gas') || description.includes('uber') || description.includes('lyft') || description.includes('transit')) return 'Transportation';
    if (description.includes('electric') || description.includes('water') || description.includes('internet') || description.includes('phone')) return 'Utilities';
    if (description.includes('movie') || description.includes('netflix') || description.includes('spotify')) return 'Entertainment';
    if (description.includes('doctor') || description.includes('pharmacy') || description.includes('medical')) return 'Healthcare';
    if (description.includes('amazon') || description.includes('walmart') || description.includes('target')) return 'Shopping';
    if (description.includes('loan') || description.includes('credit card')) return 'Debt';
    if (description.includes('salary') || description.includes('paycheck') || description.includes('deposit')) return 'Income';
    
    return 'Other';
  };

  // Update transaction category
  const updateTransactionCategory = (id, category) => {
    setTransactions(transactions.map(transaction => 
      transaction.id === id ? { ...transaction, category } : transaction
    ));
  };

  // Delete transaction
  const deleteTransaction = (id) => {
    setTransactions(transactions.filter(transaction => transaction.id !== id));
  };

  // Add or update budget
  const handleAddBudget = () => {
    if (!newBudget.month || !newBudget.category || !newBudget.amount) return;
    
    setBudgets({
      ...budgets,
      [newBudget.month]: {
        ...(budgets[newBudget.month] || {}),
        [newBudget.category]: parseFloat(newBudget.amount)
      }
    });
    
    setNewBudget({ month: '', category: '', amount: '' });
    setIsAddBudgetModalOpen(false);
  };

  // Calculate spending by category for a specific month
  const getSpendingByCategory = (month) => {
    const filteredTransactions = transactions.filter(transaction => {
      const transactionMonth = `${transaction.date.getFullYear()}-${String(transaction.date.getMonth() + 1).padStart(2, '0')}`;
      return transactionMonth === month && transaction.amount < 0;
    });
    
    const spending = {};
    categories.forEach(category => {
      spending[category] = 0;
    });
    
    filteredTransactions.forEach(transaction => {
      spending[transaction.category] = (spending[transaction.category] || 0) + Math.abs(transaction.amount);
    });
    
    return spending;
  };

  // Calculate total income for a specific month
  const getTotalIncome = (month) => {
    const filteredTransactions = transactions.filter(transaction => {
      const transactionMonth = `${transaction.date.getFullYear()}-${String(transaction.date.getMonth() + 1).padStart(2, '0')}`;
      return transactionMonth === month && transaction.amount > 0;
    });
    
    return filteredTransactions.reduce((sum, transaction) => sum + transaction.amount, 0);
  };

  // Calculate total expenses for a specific month
  const getTotalExpenses = (month) => {
    const filteredTransactions = transactions.filter(transaction => {
      const transactionMonth = `${transaction.date.getFullYear()}-${String(transaction.date.getMonth() + 1).padStart(2, '0')}`;
      return transactionMonth === month && transaction.amount < 0;
    });
    
    return Math.abs(filteredTransactions.reduce((sum, transaction) => sum + transaction.amount, 0));
  };

  // Get current month in YYYY-MM format
  const getCurrentMonth = () => {
    const now = new Date();
    return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
  };

  // Get list of months with transactions
  const getMonthsWithTransactions = () => {
    const months = new Set();
    
    transactions.forEach(transaction => {
      const month = `${transaction.date.getFullYear()}-${String(transaction.date.getMonth() + 1).padStart(2, '0')}`;
      months.add(month);
    });
    
    return Array.from(months).sort();
  };

  // Generate forecast data
  const generateForecast = () => {
    const months = getMonthsWithTransactions();
    if (months.length === 0) return [];
    
    const forecastData = [];
    const historicalData = {};
    
    // Calculate average spending by category
    categories.forEach(category => {
      let totalSpending = 0;
      let monthCount = 0;
      
      months.forEach(month => {
        const spending = getSpendingByCategory(month);
        if (spending[category] > 0) {
          totalSpending += spending[category];
          monthCount++;
        }
      });
      
      historicalData[category] = monthCount > 0 ? totalSpending / monthCount : 0;
    });
    
    // Generate forecast for future months
    const lastMonth = months[months.length - 1];
    const [lastYear, lastMonthNum] = lastMonth.split('-').map(num => parseInt(num));
    
    for (let i = 1; i <= forecastMonths; i++) {
      let forecastMonth = lastMonthNum + i;
      let forecastYear = lastYear;
      
      if (forecastMonth > 12) {
        forecastMonth -= 12;
        forecastYear += 1;
      }
      
      const monthStr = `${forecastYear}-${String(forecastMonth).padStart(2, '0')}`;
      const forecastSpending = { ...historicalData };
      
      forecastData.push({
        month: monthStr,
        ...forecastSpending
      });
    }
    
    return forecastData;
  };

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

  // Format date
  const formatDate = (date) => {
    return new Date(date).toLocaleDateString();
  };

  // Dashboard data
  const currentMonth = getCurrentMonth();
  const monthlySpending = getSpendingByCategory(currentMonth);
  const totalIncome = getTotalIncome(currentMonth);
  const totalExpenses = getTotalExpenses(currentMonth);
  const netSavings = totalIncome - totalExpenses;
  
  // Prepare data for charts
  const pieChartData = Object.entries(monthlySpending)
    .filter(([_, value]) => value > 0)
    .map(([name, value]) => ({ name, value }));
  
  const barChartData = getMonthsWithTransactions().map(month => ({
    month,
    income: getTotalIncome(month),
    expenses: getTotalExpenses(month)
  }));

  const COLORS = [
    '#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884D8', 
    '#82CA9D', '#FF6B6B', '#6A7FDB', '#61DAFB', '#F06292', '#BA68C8'
  ];

  // Budget progress calculation
  const getBudgetProgress = (category) => {
    const budget = budgets[currentMonth]?.[category] || 0;
    const spent = monthlySpending[category] || 0;
    
    if (budget === 0) return 0;
    return Math.min((spent / budget) * 100, 100);
  };

  return (
    <div className="min-h-screen bg-gray-50 text-gray-800 font-sans">
      {/* Mobile menu button */}
      <div className="md:hidden fixed top-4 right-4 z-50">
        <button 
          onClick={() => setIsMenuOpen(!isMenuOpen)}
          className="p-2 rounded-full bg-white shadow-md"
        >
          {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
        </button>
      </div>

      {/* Sidebar */}
      <div className={`fixed inset-y-0 left-0 transform ${isMenuOpen ? 'translate-x-0' : '-translate-x-full'} md:translate-x-0 transition duration-200 ease-in-out z-30 w-64 bg-white shadow-lg`}>
        <div className="p-6">
          <h1 className="text-2xl font-bold text-teal-700 mb-8">Finance Manager</h1>
          
          <nav className="space-y-2">
            <button 
              onClick={() => setActiveTab('dashboard')}
              className={`flex items-center space-x-3 w-full p-3 rounded-lg transition ${activeTab === 'dashboard' ? 'bg-teal-100 text-teal-700' : 'hover:bg-gray-100'}`}
            >
              <DollarSign size={20} />
              <span>Dashboard</span>
            </button>
            
            <button 
              onClick={() => setActiveTab('transactions')}
              className={`flex items-center space-x-3 w-full p-3 rounded-lg transition ${activeTab === 'transactions' ? 'bg-teal-100 text-teal-700' : 'hover:bg-gray-100'}`}
            >
              <FileText size={20} />
              <span>Transactions</span>
            </button>
            
            <button 
              onClick={() => setActiveTab('budgets')}
              className={`flex items-center space-x-3 w-full p-3 rounded-lg transition ${activeTab === 'budgets' ? 'bg-teal-100 text-teal-700' : 'hover:bg-gray-100'}`}
            >
              <Calendar size={20} />
              <span>Budgets</span>
            </button>
            
            <button 
              onClick={() => setActiveTab('forecast')}
              className={`flex items-center space-x-3 w-full p-3 rounded-lg transition ${activeTab === 'forecast' ? 'bg-teal-100 text-teal-700' : 'hover:bg-gray-100'}`}
            >
              <TrendingUp size={20} />
              <span>Forecast</span>
            </button>
          </nav>
          
          <div className="mt-8 pt-6 border-t border-gray-200">
            <div className="bg-gray-100 p-4 rounded-lg">
              <h3 className="font-medium mb-2">Import Transactions</h3>
              <p className="text-sm text-gray-600 mb-3">Upload a CSV file with your transaction data</p>
              <label className="flex items-center justify-center w-full p-2 bg-teal-600 text-white rounded-lg cursor-pointer hover:bg-teal-700 transition">
                <Upload size={16} className="mr-2" />
                <span>Upload CSV</span>
                <input 
                  type="file" 
                  accept=".csv" 
                  onChange={handleFileUpload} 
                  className="hidden" 
                />
              </label>
              {csvParseError && (
                <p className="mt-2 text-sm text-red-500">{csvParseError}</p>
              )}
            </div>
          </div>
        </div>
      </div>

      {/* Main content */}
      <div className="md:ml-64 p-6">
        {/* Dashboard */}
        {activeTab === 'dashboard' && (
          <div className="space-y-6">
            <h2 className="text-2xl font-bold">Financial Dashboard</h2>
            
            {/* Summary cards */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div className="bg-white p-6 rounded-xl shadow-sm">
                <h3 className="text-lg font-medium text-gray-600 mb-2">Income</h3>
                <p className="text-3xl font-bold text-green-600">{formatCurrency(totalIncome)}</p>
                <p className="text-sm text-gray-500 mt-2">Current month</p>
              </div>
              
              <div className="bg-white p-6 rounded-xl shadow-sm">
                <h3 className="text-lg font-medium text-gray-600 mb-2">Expenses</h3>
                <p className="text-3xl font-bold text-red-500">{formatCurrency(totalExpenses)}</p>
                <p className="text-sm text-gray-500 mt-2">Current month</p>
              </div>
              
              <div className="bg-white p-6 rounded-xl shadow-sm">
                <h3 className="text-lg font-medium text-gray-600 mb-2">Net Savings</h3>
                <p className={`text-3xl font-bold ${netSavings >= 0 ? 'text-teal-600' : 'text-red-500'}`}>
                  {formatCurrency(netSavings)}
                </p>
                <p className="text-sm text-gray-500 mt-2">Current month</p>
              </div>
            </div>
            
            {/* Charts */}
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              {/* Spending by category */}
              <div className="bg-white p-6 rounded-xl shadow-sm">
                <h3 className="text-lg font-medium mb-4">Spending by Category</h3>
                {pieChartData.length > 0 ? (
                  <div className="h-64">
                    <ResponsiveContainer width="100%" height="100%">
                      <PieChart>
                        <Pie
                          data={pieChartData}
                          cx="50%"
                          cy="50%"
                          labelLine={false}
                          outerRadius={80}
                          fill="#8884d8"
                          dataKey="value"
                          label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                        >
                          {pieChartData.map((entry, index) => (
                            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                          ))}
                        </Pie>
                        <Tooltip formatter={(value) => formatCurrency(value)} />
                      </PieChart>
                    </ResponsiveContainer>
                  </div>
                ) : (
                  <div className="h-64 flex items-center justify-center text-gray-500">
                    No spending data available
                  </div>
                )}
              </div>
              
              {/* Income vs Expenses */}
              <div className="bg-white p-6 rounded-xl shadow-sm">
                <h3 className="text-lg font-medium mb-4">Income vs Expenses</h3>
                {barChartData.length > 0 ? (
                  <div className="h-64">
                    <ResponsiveContainer width="100%" height="100%">
                      <BarChart
                        data={barChartData}
                        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
                      >
                        <CartesianGrid strokeDasharray="3 3" />
                        <XAxis dataKey="month" />
                        <YAxis />
                        <Tooltip formatter={(value) => formatCurrency(value)} />
                        <Legend />
                        <Bar dataKey="income" fill="#4CAF50" name="Income" />
                        <Bar dataKey="expenses" fill="#F44336" name="Expenses" />
                      </BarChart>
                    </ResponsiveContainer>
                  </div>
                ) : (
                  <div className="h-64 flex items-center justify-center text-gray-500">
                    No income/expense data available
                  </div>
                )}
              </div>
            </div>
            
            {/* Budget progress */}
            <div className="bg-white p-6 rounded-xl shadow-sm">
              <div className="flex justify-between items-center mb-4">
                <h3 className="text-lg font-medium">Budget Progress</h3>
                <button 
                  onClick={() => setIsAddBudgetModalOpen(true)}
                  className="flex items-center text-sm text-teal-600 hover:text-teal-700"
                >
                  <Plus size={16} className="mr-1" />
                  Add Budget
                </button>
              </div>
              
              {Object.keys(budgets[currentMonth] || {}).length > 0 ? (
                <div className="space-y-4">
                  {Object.entries(budgets[currentMonth] || {}).map(([category, budget]) => (
                    <div key={category}>
                      <div className="flex justify-between mb-1">
                        <span className="text-sm font-medium">{category}</span>
                        <span className="text-sm text-gray-600">
                          {formatCurrency(monthlySpending[category] || 0)} / {formatCurrency(budget)}
                        </span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-2.5">
                        <div 
                          className={`h-2.5 rounded-full ${getBudgetProgress(category) >= 100 ? 'bg-red-500' : 'bg-teal-600'}`}
                          style={{ width: `${getBudgetProgress(category)}%` }}
                        ></div>
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <p className="text-gray-500">No budgets set for this month</p>
              )}
            </div>
          </div>
        )}
        
        {/* Transactions */}
        {activeTab === 'transactions' && (
          <div className="space-y-6">
            <h2 className="text-2xl font-bold">Transactions</h2>
            
            {transactions.length > 0 ? (
              <div className="bg-white rounded-xl shadow-sm overflow-hidden">
                <div className="overflow-x-auto">
                  <table className="min-w-full divide-y divide-gray-200">
                    <thead className="bg-gray-50">
                      <tr>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                      </tr>
                    </thead>
                    <tbody className="bg-white divide-y divide-gray-200">
                      {transactions.sort((a, b) => new Date(b.date) - new Date(a.date)).map((transaction) => (
                        <tr key={transaction.id}>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {formatDate(transaction.date)}
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            {transaction.description}
                          </td>
                          <td className={`px-6 py-4 whitespace-nowrap text-sm font-medium ${transaction.amount >= 0 ? 'text-green-600' : 'text-red-500'}`}>
                            {formatCurrency(transaction.amount)}
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            <select
                              value={transaction.category}
                              onChange={(e) => updateTransactionCategory(transaction.id, e.target.value)}
                              className="border border-gray-300 rounded-md px-2 py-1 text-sm"
                            >
                              {categories.map(category => (
                                <option key={category} value={category}>{category}</option>
                              ))}
                            </select>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            <button 
                              onClick={() => deleteTransaction(transaction.id)}
                              className="text-red-500 hover:text-red-700"
                            >
                              <Trash2 size={16} />
                            </button>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            ) : (
              <div className="bg-white p-8 rounded-xl shadow-sm text-center">
                <p className="text-gray-500 mb-4">No transactions yet</p>
                <label className="inline-flex items-center px-4 py-2 bg-teal-600 text-white rounded-lg cursor-pointer hover:bg-teal-700 transition">
                  <Upload size={16} className="mr-2" />
                  <span>Upload CSV</span>
                  <input 
                    type="file" 
                    accept=".csv" 
                    onChange={handleFileUpload} 
                    className="hidden" 
                  />
                </label>
              </div>
            )}
          </div>
        )}
        
        {/* Budgets */}
        {activeTab === 'budgets' && (
          <div className="space-y-6">
            <div className="flex justify-between items-center">
              <h2 className="text-2xl font-bold">Budgets</h2>
              <button 
                onClick={() => setIsAddBudgetModalOpen(true)}
                className="flex items-center px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition"
              >
                <Plus size={16} className="mr-2" />
                Add Budget
              </button>
            </div>
            
            {Object.keys(budgets).length > 0 ? (
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {Object.entries(budgets).sort().map(([month, monthBudgets]) => (
                  <div key={month} className="bg-white p-6 rounded-xl shadow-sm">
                    <h3 className="text-lg font-medium mb-4">{month}</h3>
                    <div className="space-y-4">
                      {Object.entries(monthBudgets).map(([category, amount]) => {
                        const spent = month === currentMonth ? (monthlySpending[category] || 0) : 0;
                        const progress = amount > 0 ? Math.min((spent / amount) * 100, 100) : 0;
                        
                        return (
                          <div key={category}>
                            <div className="flex justify-between mb-1">
                              <span className="text-sm font-medium">{category}</span>
                              <span className="text-sm text-gray-600">
                                {month === currentMonth ? `${formatCurrency(spent)} / ` : ''}
                                {formatCurrency(amount)}
                              </span>
                            </div>
                            {month === currentMonth && (
                              <div className="w-full bg-gray-200 rounded-full h-2.5">
                                <div 
                                  className={`h-2.5 rounded-full ${progress >= 100 ? 'bg-red-500' : 'bg-teal-600'}`}
                                  style={{ width: `${progress}%` }}
                                ></div>
                              </div>
                            )}
                          </div>
                        );
                      })}
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <div className="bg-white p-8 rounded-xl shadow-sm text-center">
                <p className="text-gray-500 mb-4">No budgets set yet</p>
                <button 
                  onClick={() => setIsAddBudgetModalOpen(true)}
                  className="inline-flex items-center px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition"
                >
                  <Plus size={16} className="mr-2" />
                  Add Budget
                </button>
              </div>
            )}
          </div>
        )}
        
        {/* Forecast */}
        {activeTab === 'forecast' && (
          <div className="space-y-6">
            <h2 className="text-2xl font-bold">Expense Forecast</h2>
            
            <div className="bg-white p-6 rounded-xl shadow-sm">
              <div className="flex items-center justify-between mb-6">
                <h3 className="text-lg font-medium">Future Expenses Projection</h3>
                <div className="flex items-center space-x-2">
                  <label className="text-sm text-gray-600">Months to forecast:</label>
                  <select 
                    value={forecastMonths}
                    onChange={(e) => setForecastMonths(parseInt(e.target.value))}
                    className="border border-gray-300 rounded-md px-2 py-1 text-sm"
                  >
                    <option value="1">1 month</option>
                    <option value="3">3 months</option>
                    <option value="6">6 months</option>
                    <option value="12">12 months</option>
                  </select>
                </div>
              </div>
              
              {transactions.length > 0 ? (
                <div className="h-80">
                  <ResponsiveContainer width="100%" height="100%">
                    <LineChart
                      data={[
                        ...barChartData.map(item => ({
                          month: item.month,
                          expenses: item.expenses,
                          type: 'Historical'
                        })),
                        ...generateForecast().map(item => ({
                          month: item.month,
                          expenses: Object.values(item).reduce((sum, val) => 
                            typeof val === 'number' ? sum + val : sum, 0
                          ) - item.month.length, // Subtract the length of month string which was counted in reduce
                          type: 'Forecast'
                        }))
                      ]}
                      margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
                    >
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="month" />
                      <YAxis />
                      <Tooltip formatter={(value) => formatCurrency(value)} />
                      <Legend />
                      <Line 
                        type="monotone" 
                        dataKey="expenses" 
                        stroke="#8884d8" 
                        strokeWidth={2}
                        dot={{ r: 4 }}
                        activeDot={{ r: 8 }}
                      />
                    </LineChart>
                  </ResponsiveContainer>
                </div>
              ) : (
                <div className="h-80 flex items-center justify-center text-gray-500">
                  <p>Not enough data for forecasting. Please import transactions first.</p>
                </div>
              )}
              
              <div className="mt-6 pt-6 border-t border-gray-200">
                <h4 className="font-medium mb-4">Forecast Details</h4>
                
                {generateForecast().length > 0 ? (
                  <div className="overflow-x-auto">
                    <table className="min-w-full divide-y divide-gray-200">
                      <thead className="bg-gray-50">
                        <tr>
                          <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Month</th>
                          {categories.map(category => (
                            <th key={category} className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{category}</th>
                          ))}
                          <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total</th>
                        </tr>
                      </thead>
                      <tbody className="bg-white divide-y divide-gray-200">
                        {generateForecast().map((forecast) => (
                          <tr key={forecast.month}>
                            <td className="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">{forecast.month}</td>
                            {categories.map(category => (
                              <td key={category} className="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                {formatCurrency(forecast[category] || 0)}
                              </td>
                            ))}
                            <td className="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
                              {formatCurrency(
                                Object.entries(forecast)
                                  .filter(([key]) => key !== 'month')
                                  .reduce((sum, [_, value]) => sum + value, 0)
                              )}
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                ) : (
                  <p className="text-gray-500">Not enough data for detailed forecasting</p>
                )}
              </div>
            </div>
          </div>
        )}
      </div>

      {/* Add Budget Modal */}
      {isAddBudgetModalOpen && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl shadow-lg p-6 w-full max-w-md">
            <h3 className="text-xl font-bold mb-4">Add Budget</h3>
            
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Month</label>
                <input 
                  type="month" 
                  value={newBudget.month}
                  onChange={(e) => setNewBudget({ ...newBudget, month: e.target.value })}
                  className="w-full border border-gray-300 rounded-md px-3 py-2"
                />
              </div>
              
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Category</label>
                <select 
                  value={newBudget.category}
                  onChange={(e) => setNewBudget({ ...newBudget, category: e.target.value })}
                  className="w-full border border-gray-300 rounded-md px-3 py-2"
                >
                  <option value="">Select a category</option>
                  {categories.map(category => (
                    <option key={category} value={category}>{category}</option>
                  ))}
                </select>
              </div>
              
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Budget Amount</label>
                <input 
                  type="number" 
                  value={newBudget.amount}
                  onChange={(e) => setNewBudget({ ...newBudget, amount: e.target.value })}
                  className="w-full border border-gray-300 rounded-md px-3 py-2"
                  min="0"
                  step="0.01"
                />
              </div>
            </div>
            
            <div className="mt-6 flex justify-end space-x-3">
              <button 
                onClick={() => setIsAddBudgetModalOpen(false)}
                className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
              >
                Cancel
              </button>
              <button 
                onClick={handleAddBudget}
                className="px-4 py-2 bg-teal-600 text-white rounded-md hover:bg-teal-700"
                disabled={!newBudget.month || !newBudget.category || !newBudget.amount}
              >
                Save Budget
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}