import React, { useMemo, useState } from 'react';
import { Transaction, TransactionType, ExpenseCategory, IncomeCategory } from '../types';
import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip, Legend } from 'recharts';
import EditTransactionModal from './EditTransactionModal';

interface LedgerPageProps {
  transactions: Transaction[];
  onUpdateTransaction: (t: Transaction) => void;
  onDeleteTransaction: (id: string) => void;
}

const COLORS = ['#6366f1', '#ec4899', '#10b981', '#f59e0b', '#8b5cf6', '#ef4444', '#6b7280'];

const LedgerPage: React.FC<LedgerPageProps> = ({ transactions, onUpdateTransaction, onDeleteTransaction }) => {
  const [editingTransaction, setEditingTransaction] = useState<Transaction | null>(null);

  // Group by date
  const groupedTransactions = useMemo(() => {
    const groups: { [key: string]: Transaction[] } = {};
    transactions.forEach(t => {
      if (!groups[t.date]) groups[t.date] = [];
      groups[t.date].push(t);
    });
    // Sort dates descending
    return Object.entries(groups).sort((a, b) => new Date(b[0]).getTime() - new Date(a[0]).getTime());
  }, [transactions]);

  const totalExpense = useMemo(() => 
    transactions.filter(t => t.type === TransactionType.EXPENSE).reduce((sum, t) => sum + t.amount, 0), 
  [transactions]);

  const totalIncome = useMemo(() => 
    transactions.filter(t => t.type === TransactionType.INCOME).reduce((sum, t) => sum + t.amount, 0), 
  [transactions]);
  
  const balance = totalIncome - totalExpense;

  // Category Data for Pie Chart (Expenses Only)
  const expenseCategoryData = useMemo(() => {
      const map = new Map<string, number>();
      transactions.filter(t => t.type === TransactionType.EXPENSE).forEach(t => {
        map.set(t.category, (map.get(t.category) || 0) + t.amount);
      });
      return Array.from(map.entries())
        .map(([name, value], index) => ({ name, value, fill: COLORS[index % COLORS.length] }))
        .sort((a, b) => b.value - a.value);
  }, [transactions]);

  const getIcon = (t: Transaction) => {
      if (t.type === TransactionType.INCOME) {
          switch (t.category) {
              case IncomeCategory.SALARY: return '💰';
              case IncomeCategory.BONUS: return '🧧';
              case IncomeCategory.INVESTMENT: return '📈';
              default: return '💵';
          }
      }
      switch (t.category) {
          case ExpenseCategory.FOOD: return '🍔';
          case ExpenseCategory.SHOPPING: return '🛍️';
          case ExpenseCategory.TRANSPORT: return '🚗';
          case ExpenseCategory.ENTERTAINMENT: return '🎬';
          case ExpenseCategory.HOUSING: return '🏠';
          case ExpenseCategory.MEDICAL: return '💊';
          default: return '🧾';
      }
  };

  const handleSaveEdit = (updated: Transaction) => {
    onUpdateTransaction(updated);
    setEditingTransaction(null);
  };

  const handleDelete = (id: string) => {
    onDeleteTransaction(id);
    setEditingTransaction(null);
  };

  return (
      <div className="h-full flex flex-col bg-gray-50 overflow-y-auto no-scrollbar pb-24 md:pb-4 relative">
          {/* Header Summary Cards */}
          <div className="bg-indigo-600 text-white p-6 rounded-b-3xl shadow-lg shrink-0">
              <div className="grid grid-cols-3 gap-4 text-center">
                  <div className="flex flex-col items-center">
                      <span className="text-xs opacity-70 mb-1">收入 (Income)</span>
                      <span className="text-lg font-bold text-emerald-200">+¥{totalIncome.toFixed(0)}</span>
                  </div>
                  <div className="flex flex-col items-center border-x border-indigo-500/50">
                      <span className="text-xs opacity-70 mb-1">结余 (Balance)</span>
                      <span className="text-2xl font-bold">¥{balance.toFixed(0)}</span>
                  </div>
                  <div className="flex flex-col items-center">
                      <span className="text-xs opacity-70 mb-1">支出 (Expense)</span>
                      <span className="text-lg font-bold text-pink-200">-¥{totalExpense.toFixed(0)}</span>
                  </div>
              </div>
          </div>

          <div className="p-4 space-y-6 flex-1 max-w-3xl mx-auto w-full">
              {/* Charts Section (Expenses) */}
              {expenseCategoryData.length > 0 && (
                  <div className="bg-white p-5 rounded-2xl shadow-sm border border-gray-100">
                      <h3 className="text-gray-700 font-bold mb-4 flex items-center gap-2 text-sm">
                          <svg className="w-4 h-4 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" /></svg>
                          支出构成
                      </h3>
                      <div className="h-48 w-full">
                            <ResponsiveContainer width="100%" height="100%">
                                <PieChart>
                                    <Pie
                                        data={expenseCategoryData}
                                        cx="50%"
                                        cy="50%"
                                        innerRadius={45}
                                        outerRadius={65}
                                        paddingAngle={5}
                                        dataKey="value"
                                    >
                                        {expenseCategoryData.map((entry, index) => (
                                            <Cell key={`cell-${index}`} fill={entry.fill} />
                                        ))}
                                    </Pie>
                                    <Tooltip formatter={(value: number) => `¥${value.toFixed(2)}`} />
                                    <Legend iconSize={8} wrapperStyle={{ fontSize: '12px' }} />
                                </PieChart>
                            </ResponsiveContainer>
                      </div>
                  </div>
              )}

              {/* Transactions List */}
              <div className="space-y-4">
                  <h3 className="text-gray-700 font-bold px-2 flex items-center gap-2 text-sm">
                      <svg className="w-4 h-4 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" /></svg>
                      收支明细
                  </h3>
                  {groupedTransactions.map(([date, items]) => {
                      const dayIncome = items.filter(t => t.type === TransactionType.INCOME).reduce((s,t)=>s+t.amount,0);
                      const dayExpense = items.filter(t => t.type === TransactionType.EXPENSE).reduce((s,t)=>s+t.amount,0);
                      
                      return (
                      <div key={date} className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
                          <div className="bg-gray-50/80 px-4 py-2 border-b border-gray-100 flex justify-between items-center backdrop-blur-sm sticky top-0 text-xs">
                              <span className="font-semibold text-gray-500">{date}</span>
                              <div className="flex gap-2">
                                  {dayIncome > 0 && <span className="text-emerald-600">收 ¥{dayIncome}</span>}
                                  {dayExpense > 0 && <span className="text-gray-600">支 ¥{dayExpense}</span>}
                              </div>
                          </div>
                          <div>
                              {items.slice().reverse().map((t, idx) => (
                                  <div 
                                    key={t.id} 
                                    onClick={() => setEditingTransaction(t)}
                                    className={`flex items-center justify-between p-4 hover:bg-gray-50 active:bg-gray-100 cursor-pointer transition-colors ${idx !== items.length - 1 ? 'border-b border-gray-50' : ''}`}
                                  >
                                      <div className="flex items-center gap-3 overflow-hidden">
                                          <div className={`w-10 h-10 rounded-full flex items-center justify-center text-lg shrink-0 shadow-sm
                                              ${t.type === TransactionType.INCOME 
                                                ? 'bg-emerald-100 text-emerald-600' 
                                                : (t.category === ExpenseCategory.FOOD ? 'bg-orange-100 text-orange-500' : 
                                                   t.category === ExpenseCategory.SHOPPING ? 'bg-pink-100 text-pink-500' :
                                                   t.category === ExpenseCategory.TRANSPORT ? 'bg-blue-100 text-blue-500' :
                                                   'bg-gray-100 text-gray-500')
                                              }`}
                                          >
                                              {getIcon(t)}
                                          </div>
                                          <div className="min-w-0">
                                              <p className="font-medium text-gray-800 truncate">{t.item}</p>
                                              <p className="text-xs text-gray-500">{t.category}</p>
                                          </div>
                                      </div>
                                      <div className={`font-bold whitespace-nowrap pl-2 ${t.type === TransactionType.INCOME ? 'text-emerald-600' : 'text-gray-900'}`}>
                                          {t.type === TransactionType.INCOME ? '+' : '-'} {t.amount.toFixed(2)}
                                      </div>
                                  </div>
                              ))}
                          </div>
                      </div>
                  )})}
                  {transactions.length === 0 && (
                      <div className="text-center text-gray-400 py-12 bg-white rounded-2xl border border-dashed border-gray-200">
                          <p className="text-4xl mb-2">💸</p>
                          <p>还没有账目</p>
                          <p className="text-sm mt-1">告诉崔经理你赚了多少或花了多少！</p>
                      </div>
                  )}
              </div>
          </div>

          {/* Edit Modal */}
          {editingTransaction && (
            <EditTransactionModal 
                transaction={editingTransaction}
                onSave={handleSaveEdit}
                onDelete={handleDelete}
                onClose={() => setEditingTransaction(null)}
            />
          )}
      </div>
  );
};

export default LedgerPage;