import React, { useState, useEffect, useRef } from 'react';
import { 
  Wallet, 
  Trash2, 
  TrendingUp, 
  TrendingDown, 
  History,
  X,
  Plus,
  Repeat,
  ArrowRightCircle,
  Search,
  Filter,
  Calendar,
  RefreshCw,
  Zap,
  Tag,
  Copy,
  PieChart,
  Calculator,
  CalendarDays,
  List
} from 'lucide-react';

export default function App() {
  // --- 預設資料 ---
  const defaultExpenseCategories = [
    { id: 'food', name: '食', icon: '🍜', color: 'bg-orange-100 text-orange-600 border-orange-200' },
    { id: 'clothing', name: '衣', icon: '👕', color: 'bg-pink-100 text-pink-600 border-pink-200' },
    { id: 'housing', name: '住', icon: '🏠', color: 'bg-blue-100 text-blue-600 border-blue-200' },
    { id: 'transport', name: '行', icon: '🚗', color: 'bg-green-100 text-green-600 border-green-200' },
    { id: 'education', name: '育', icon: '📚', color: 'bg-indigo-100 text-indigo-600 border-indigo-200' },
    { id: 'entertainment', name: '樂', icon: '🎮', color: 'bg-purple-100 text-purple-600 border-purple-200' },
  ];

  const defaultIncomeCategories = [
    { id: 'amway', name: '安麗獎金', icon: '💎', color: 'bg-emerald-100 text-emerald-600 border-emerald-200' },
    { id: 'stock', name: '股票', icon: '📈', color: 'bg-red-100 text-red-600 border-red-200' },
    { id: 'card', name: '牌卡', icon: '🎴', color: 'bg-violet-100 text-violet-600 border-violet-200' },
    { id: 'crystal', name: '水晶', icon: '✨', color: 'bg-cyan-100 text-cyan-600 border-cyan-200' },
    { id: 'other', name: '其他收入', icon: '💰', color: 'bg-gray-100 text-gray-600 border-gray-200' },
  ];

  // --- 狀態管理 ---
  const [transactions, setTransactions] = useState(() => {
    const saved = localStorage.getItem('my-simple-account-book');
    return saved ? JSON.parse(saved) : [];
  });

  const [expenseCats, setExpenseCats] = useState(() => {
    const saved = localStorage.getItem('my-expense-cats');
    return saved ? JSON.parse(saved) : defaultExpenseCategories;
  });

  const [incomeCats, setIncomeCats] = useState(() => {
    const saved = localStorage.getItem('my-income-cats');
    return saved ? JSON.parse(saved) : defaultIncomeCategories;
  });

  const [fixedItems, setFixedItems] = useState(() => {
    const saved = localStorage.getItem('my-fixed-items');
    return saved ? JSON.parse(saved) : [];
  });

  // 輸入狀態
  const [quickAmount, setQuickAmount] = useState('');
  const [quickNote, setQuickNote] = useState('');
  const [quickCategory, setQuickCategory] = useState('');
  const [quickType, setQuickType] = useState('expense'); 

  // 篩選與搜尋狀態
  const [searchTerm, setSearchTerm] = useState('');
  const [filterMonth, setFilterMonth] = useState(''); 
  const [filterCategory, setFilterCategory] = useState(''); 

  // 介面狀態
  const [showAddModal, setShowAddModal] = useState(false); 
  const [showFixedModal, setShowFixedModal] = useState(false); 
  
  // 固定收支預估選擇的月份
  const [forecastDate, setForecastDate] = useState(new Date().toISOString().slice(0, 7));

  // 新增分類輸入
  const [newCatName, setNewCatName] = useState('');

  // 新增固定收支輸入
  const [newFixed, setNewFixed] = useState({
    name: '',
    amount: '',
    type: 'expense',
    category: '',
    frequency: 'monthly',
    startMonth: String(new Date().getMonth() + 1) // 預設當前月份 (1-12字串)
  });

  // 長按刪除邏輯 Refs
  const timerRef = useRef(null);
  const isLongPressRef = useRef(false);

  // --- 副作用：自動儲存 ---
  useEffect(() => {
    localStorage.setItem('my-simple-account-book', JSON.stringify(transactions));
  }, [transactions]);

  useEffect(() => {
    localStorage.setItem('my-expense-cats', JSON.stringify(expenseCats));
    localStorage.setItem('my-income-cats', JSON.stringify(incomeCats));
  }, [expenseCats, incomeCats]);

  useEffect(() => {
    localStorage.setItem('my-fixed-items', JSON.stringify(fixedItems));
  }, [fixedItems]);

  // --- 計算邏輯 ---
  const filteredTransactions = transactions.filter(t => {
    const matchSearch = searchTerm === '' || 
      (t.note && t.note.includes(searchTerm)) || 
      t.category.includes(searchTerm);
    const matchMonth = filterMonth === '' || t.date.startsWith(filterMonth);
    const matchCategory = filterCategory === '' || t.category === filterCategory;

    return matchSearch && matchMonth && matchCategory;
  });

  const totalIncome = filteredTransactions
    .filter(t => t.type === 'income')
    .reduce((acc, curr) => acc + curr.amount, 0);

  const totalExpense = filteredTransactions
    .filter(t => t.type === 'expense')
    .reduce((acc, curr) => acc + curr.amount, 0);

  const balance = totalIncome - totalExpense;

  // --- 核心邏輯：計算特定月份的固定收支 ---
  const getMonthlyForecastDetails = (targetYearMonth) => {
    const [tYear, tMonth] = targetYearMonth.split('-').map(Number);
    const items = [];
    let mIncome = 0;
    let mExpense = 0;

    fixedItems.forEach(item => {
      let isOccurring = false;
      
      let startMonthNum;
      if (item.startMonth && item.startMonth.includes('-')) {
         startMonthNum = parseInt(item.startMonth.split('-')[1], 10);
      } else {
         startMonthNum = parseInt(item.startMonth || '1', 10);
      }

      switch(item.frequency) {
        case 'monthly':
          isOccurring = true;
          break;
        case 'quarterly':
          const monthDiff = tMonth - startMonthNum;
          isOccurring = (monthDiff % 3 === 0);
          break;
        case 'yearly':
          isOccurring = (tMonth === startMonthNum);
          break;
        default:
          isOccurring = true;
      }

      if (isOccurring) {
        items.push(item);
        if (item.type === 'income') mIncome += item.amount;
        else mExpense += item.amount;
      }
    });

    return { items, mIncome, mExpense };
  };

  const { items: forecastItems, mIncome: forecastIncome, mExpense: forecastExpense } = getMonthlyForecastDetails(forecastDate);
  const forecastBalance = forecastIncome - forecastExpense;
  
  // --- 年度固定收支總計 (概覽) ---
  const calculateAnnualFixed = () => {
    let annualIncome = 0;
    let annualExpense = 0;

    fixedItems.forEach(item => {
      let multiplier = 0;
      switch(item.frequency) {
        case 'monthly': multiplier = 12; break;
        case 'quarterly': multiplier = 4; break;
        case 'yearly': multiplier = 1; break;
        default: multiplier = 12;
      }
      const totalAmount = item.amount * multiplier;
      if (item.type === 'income') annualIncome += totalAmount;
      else annualExpense += totalAmount;
    });

    return { annualIncome, annualExpense };
  };

  const { annualIncome: annualFixedIncome, annualExpense: annualFixedExpense } = calculateAnnualFixed();
  const annualFixedBalance = annualFixedIncome - annualFixedExpense;


  // --- 事件處理 ---
  const handleQuickAdd = (e) => {
    e.preventDefault();
    if (!quickAmount || !quickCategory) return;
    addTransactionRecord(quickType, quickAmount, quickCategory, quickNote, new Date().toISOString().split('T')[0]);
    setQuickAmount('');
    setQuickNote('');
  };

  const addTransactionRecord = (tType, tAmount, tCategory, tNote, tDate) => {
    const newTransaction = {
      id: Date.now(),
      type: tType,
      amount: parseFloat(tAmount),
      category: tCategory,
      date: tDate,
      note: tNote
    };
    setTransactions([newTransaction, ...transactions]);
  };

  const handleDeleteTransaction = (e, id) => {
    e.stopPropagation(); 
    if (window.confirm('確定要刪除這筆紀錄嗎？')) {
      setTransactions(transactions.filter(t => t.id !== id));
    }
  };

  const handleReuseTransaction = (t) => {
    setQuickType(t.type);
    setQuickAmount(t.amount.toString());
    setQuickCategory(t.category);
    setQuickNote(t.note || '');
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const handleAddFixedItem = (e) => {
    e.preventDefault();
    if (!newFixed.name || !newFixed.amount || !newFixed.category) return;

    const newItem = {
      id: Date.now(),
      ...newFixed,
      amount: parseFloat(newFixed.amount)
    };

    setFixedItems([...fixedItems, newItem]);
    setNewFixed({ ...newFixed, name: '', amount: '' }); 
  };

  const handleDeleteFixedItem = (id) => {
    if (window.confirm('確定要刪除這個固定項目嗎？')) {
      setFixedItems(fixedItems.filter(item => item.id !== id));
    }
  };

  const handleRecordFixedItem = (item) => {
    addTransactionRecord(
      item.type, 
      item.amount, 
      item.category, 
      `${item.name} (${getFrequencyLabel(item.frequency)})`, 
      new Date().toISOString().split('T')[0]
    );
    setShowFixedModal(false);
    alert(`已新增：${item.name}`);
  };

  const startPress = (catId) => {
    isLongPressRef.current = false;
    timerRef.current = setTimeout(() => {
      isLongPressRef.current = true;
      if (window.confirm('【刪除分類】\n確定要刪除這個分類嗎？\n(這不會影響已存在的記帳紀錄)')) {
        handleDeleteCategory(catId);
        if (quickCategory === catId) setQuickCategory('');
      }
    }, 600); 
  };

  const endPress = () => {
    if (timerRef.current) {
      clearTimeout(timerRef.current);
    }
  };

  const handleQuickCategoryClick = (catName) => {
    if (isLongPressRef.current) return;
    setQuickCategory(catName);
  };

  const getRandomColorClass = () => {
    const colors = [
      'bg-red-100 text-red-600 border-red-200',
      'bg-orange-100 text-orange-600 border-orange-200',
      'bg-amber-100 text-amber-600 border-amber-200',
      'bg-yellow-100 text-yellow-600 border-yellow-200',
      'bg-lime-100 text-lime-600 border-lime-200',
      'bg-green-100 text-green-600 border-green-200',
      'bg-emerald-100 text-emerald-600 border-emerald-200',
      'bg-teal-100 text-teal-600 border-teal-200',
      'bg-cyan-100 text-cyan-600 border-cyan-200',
      'bg-sky-100 text-sky-600 border-sky-200',
      'bg-blue-100 text-blue-600 border-blue-200',
      'bg-indigo-100 text-indigo-600 border-indigo-200',
      'bg-violet-100 text-violet-600 border-violet-200',
      'bg-purple-100 text-purple-600 border-purple-200',
      'bg-fuchsia-100 text-fuchsia-600 border-fuchsia-200',
      'bg-pink-100 text-pink-600 border-pink-200',
      'bg-rose-100 text-rose-600 border-rose-200',
    ];
    return colors[Math.floor(Math.random() * colors.length)];
  };

  const handleConfirmAddCategory = (e) => {
    e.preventDefault();
    if (newCatName && newCatName.trim()) {
      const newCat = {
        id: Date.now().toString(),
        name: newCatName.trim(),
        icon: '🏷️', 
        color: getRandomColorClass()
      };

      if (quickType === 'expense') {
        setExpenseCats([...expenseCats, newCat]);
      } else {
        setIncomeCats([...incomeCats, newCat]);
      }
      
      setNewCatName('');
      setShowAddModal(false);
    }
  };

  const handleDeleteCategory = (catId) => {
      if (quickType === 'expense') {
        setExpenseCats(expenseCats.filter(c => c.id !== catId));
      } else {
        setIncomeCats(incomeCats.filter(c => c.id !== catId));
      }
      if (quickCategory === expenseCats.find(c => c.id === catId)?.name || quickCategory === incomeCats.find(c => c.id === catId)?.name) {
        setQuickCategory('');
      }
  };

  const getFrequencyLabel = (freq) => {
    switch(freq) {
      case 'monthly': return '每月';
      case 'quarterly': return '每季';
      case 'yearly': return '每年';
      default: return '每月';
    }
  };

  const currentCategories = quickType === 'expense' ? expenseCats : incomeCats;
  const allCategoryNames = Array.from(new Set([...expenseCats.map(c => c.name), ...incomeCats.map(c => c.name)]));

  const formatMoney = (num) => {
    return new Intl.NumberFormat('zh-TW', { style: 'currency', currency: 'TWD', maximumFractionDigits: 0 }).format(num);
  };

  const renderPieChart = (income, expense) => {
    if (income === 0 && expense === 0) return null;
    const expensePercent = income === 0 ? 100 : Math.min((expense / income) * 100, 100);
    const dashExpense = expensePercent;
    
    return (
      <div className="relative w-20 h-20 flex items-center justify-center">
         <svg width="100%" height="100%" viewBox="0 0 40 40" className="transform -rotate-90">
            <circle cx="20" cy="20" r="15.9155" fill="transparent" stroke="#e2e8f0" strokeWidth="5"></circle>
            <circle cx="20" cy="20" r="15.9155" fill="transparent" stroke="#10b981" strokeWidth="5" strokeDasharray={`100 0`}></circle>
            <circle cx="20" cy="20" r="15.9155" fill="transparent" stroke="#f43f5e" strokeWidth="5" 
              strokeDasharray={`${dashExpense} ${100 - dashExpense}`} 
              strokeDashoffset="0">
            </circle>
         </svg>
         <div className="absolute flex flex-col items-center">
            <span className="text-[8px] text-gray-500">支出佔比</span>
            <span className={`text-xs font-bold ${expensePercent > 100 ? 'text-rose-600' : 'text-gray-700'}`}>
               {expensePercent.toFixed(0)}%
            </span>
         </div>
      </div>
    );
  };

  return (
    <div className="min-h-screen bg-gray-50 text-gray-800 font-sans pb-20">
      
      {/* --- Header / 總覽卡片 (亮橘色主題) --- */}
      <div className="bg-gradient-to-r from-orange-400 to-orange-600 text-white p-4 rounded-b-3xl shadow-lg mb-4 transition-all duration-300">
        <div className="max-w-md mx-auto">
          <div className="flex justify-between items-center mb-2">
            <h1 className="text-lg font-bold flex items-center gap-2">
              <Wallet className="w-5 h-5" />
              {filterMonth ? `${filterMonth}` : '豐盛記錄'}
            </h1>
            {(searchTerm || filterMonth || filterCategory) && (
              <button 
                onClick={() => {setSearchTerm(''); setFilterMonth(''); setFilterCategory('');}}
                className="bg-white/20 hover:bg-white/30 text-[10px] px-2 py-1 rounded-lg flex items-center gap-1 backdrop-blur-sm transition-colors"
              >
                <RefreshCw className="w-3 h-3" /> 清除
              </button>
            )}
          </div>
          
          <div className="text-center mb-4">
            <p className="text-orange-50 text-xs mb-0.5">
              {filterMonth ? '本月結餘' : '目前總資產餘額'}
            </p>
            <h2 className="text-3xl font-bold tracking-tight">{formatMoney(balance)}</h2>
          </div>

          <div className="flex justify-between bg-white/10 rounded-xl p-3 backdrop-blur-sm">
            <div className="flex flex-col items-center flex-1 border-r border-white/20">
              <span className="text-orange-50 text-[10px] flex items-center gap-1 mb-0.5">
                <TrendingDown className="w-3 h-3" /> {filterMonth ? '本月支出' : '總支出'}
              </span>
              <span className="font-semibold text-sm">{formatMoney(totalExpense)}</span>
            </div>
            <div className="flex flex-col items-center flex-1">
              <span className="text-orange-50 text-[10px] flex items-center gap-1 mb-0.5">
                <TrendingUp className="w-3 h-3" /> {filterMonth ? '本月收入' : '總收入'}
              </span>
              <span className="font-semibold text-sm">{formatMoney(totalIncome)}</span>
            </div>
          </div>
        </div>
      </div>

      <div className="max-w-md mx-auto px-3">
        
        {/* --- 搜尋與篩選列 --- */}
        <div className="bg-white p-2 rounded-xl shadow-sm border border-gray-100 mb-3 flex flex-wrap gap-2 items-center">
          <div className="flex-1 relative min-w-[100px]">
            <Search className="w-3 h-3 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2" />
            <input 
              type="text"
              placeholder="搜尋..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full pl-8 pr-2 py-1.5 bg-gray-50 rounded-lg text-xs outline-none focus:ring-2 focus:ring-orange-500/20"
            />
          </div>
          <div className="relative">
             <div className="relative">
                <Filter className="w-3 h-3 text-gray-500 absolute left-2 top-1/2 transform -translate-y-1/2 pointer-events-none" />
                <select
                  value={filterCategory}
                  onChange={(e) => setFilterCategory(e.target.value)}
                  className="pl-7 pr-3 py-1.5 bg-gray-50 rounded-lg text-xs outline-none focus:ring-2 focus:ring-orange-500/20 text-gray-600 appearance-none cursor-pointer max-w-[90px]"
                >
                  <option value="">分類</option>
                  <optgroup label="支出">
                    {expenseCats.map(c => (
                      <option key={c.id} value={c.name}>(支) {c.name}</option>
                    ))}
                  </optgroup>
                  <optgroup label="收入">
                    {incomeCats.map(c => (
                      <option key={c.id} value={c.name}>(收) {c.name}</option>
                    ))}
                  </optgroup>
                </select>
             </div>
          </div>
          <div className="relative">
             <div className="relative">
                <Calendar className="w-3 h-3 text-gray-500 absolute left-2 top-1/2 transform -translate-y-1/2 pointer-events-none" />
                <input 
                  type="month"
                  value={filterMonth}
                  onChange={(e) => setFilterMonth(e.target.value)}
                  className="pl-7 pr-1 py-1.5 bg-gray-50 rounded-lg text-xs outline-none focus:ring-2 focus:ring-orange-500/20 text-gray-600 w-28"
                />
             </div>
          </div>
        </div>

        {/* --- 記帳區域 (極速記帳列 - 亮橘色) --- */}
        <div className="bg-white rounded-2xl shadow-sm p-3 mb-4 border border-gray-100">
          
           <div className="flex justify-between items-center mb-2">
              <h4 className="text-xs font-bold text-gray-400 flex items-center gap-1">
                <Zap className="w-3 h-3 text-orange-500" /> 極速記帳
              </h4>
           </div>
           
           <form onSubmit={handleQuickAdd} className="space-y-2">
             {/* 第一排：類型 + 備註(前) + 金額(後) */}
             <div className="flex gap-2">
               <button
                 type="button"
                 onClick={() => setQuickType(quickType === 'expense' ? 'income' : 'expense')}
                 className={`px-2 py-1.5 rounded-lg text-xs font-bold border transition-colors shrink-0 flex items-center gap-1
                   ${quickType === 'expense' 
                     ? 'bg-rose-50 text-rose-600 border-rose-200' 
                     : 'bg-emerald-50 text-emerald-600 border-emerald-200'}
                 `}
               >
                 <span className={`flex items-center justify-center w-5 h-5 rounded-full bg-white border ${quickType === 'expense' ? 'border-rose-200' : 'border-emerald-200'}`}>
                   {quickType === 'expense' ? '支' : '收'}
                 </span>
               </button>
               
               {/* 備註 */}
               <input 
                 type="text"
                 placeholder="備註..."
                 value={quickNote}
                 onChange={(e) => setQuickNote(e.target.value)}
                 className="flex-1 min-w-0 px-2 py-1.5 bg-gray-50 rounded-lg text-sm outline-none focus:ring-2 focus:ring-orange-500/20 text-gray-700 placeholder-gray-300"
               />

               {/* 金額 */}
               <input 
                 type="number"
                 placeholder="$"
                 value={quickAmount}
                 onChange={(e) => setQuickAmount(e.target.value)}
                 className="w-20 px-2 py-1.5 bg-gray-50 rounded-lg text-base font-bold outline-none focus:ring-2 focus:ring-orange-500/20 text-gray-800 placeholder-gray-300"
               />

               <button 
                 type="submit"
                 disabled={!quickAmount || !quickCategory}
                 className="px-3 py-1.5 bg-orange-500 text-white rounded-lg text-xs font-bold hover:bg-orange-600 disabled:bg-gray-200 disabled:text-gray-400 transition-colors shrink-0 shadow-sm flex items-center justify-center"
               >
                 <Plus className="w-4 h-4" />
               </button>
             </div>

             {/* 第二排：田字狀分類按鈕 (亮橘色主題) */}
             <div className="pt-1">
               <div className="flex items-center gap-1 mb-1">
                  <Tag className="w-3 h-3 text-gray-300" /> 
                  <span className="text-[10px] text-gray-300 font-medium">類別 ({quickType === 'expense' ? '支出' : '收入'})</span>
               </div>
               
               <div className="grid grid-cols-4 gap-1.5">
                 {currentCategories.map(c => (
                   <button
                     key={c.id}
                     type="button"
                     onTouchStart={() => startPress(c.id)}
                     onTouchEnd={endPress}
                     onMouseDown={() => startPress(c.id)}
                     onMouseUp={endPress}
                     onMouseLeave={endPress}
                     onContextMenu={(e) => { e.preventDefault(); startPress(c.id); }}
                     onClick={() => handleQuickCategoryClick(c.name)}
                     className={`
                       relative flex flex-col items-center justify-center py-1.5 px-1 rounded-xl border transition-all h-14
                       ${quickCategory === c.name 
                         ? `${c.color} ring-2 ring-offset-1 ring-orange-500/30 shadow-md font-bold` 
                         : 'bg-white border-gray-100 text-gray-600 hover:bg-gray-50 hover:text-gray-800'}
                     `}
                   >
                     <span className="text-base mb-0.5 filter drop-shadow-sm">{c.icon}</span>
                     <span className="w-full text-center text-[10px] leading-tight break-words px-0.5">{c.name}</span>
                     
                     {quickCategory === c.name && (
                       <div className="absolute top-1 right-1 w-1.5 h-1.5 bg-orange-500 rounded-full"></div>
                     )}
                   </button>
                 ))}

                 <button
                   type="button"
                   onClick={() => setShowAddModal(true)}
                   className="flex flex-col items-center justify-center py-1.5 px-1 rounded-xl border-2 border-dashed border-gray-200 text-gray-300 hover:border-orange-400 hover:text-orange-500 hover:bg-orange-50 transition-all h-14"
                 >
                   <Plus className="w-4 h-4 mb-0.5 opacity-50" />
                   <span className="text-[10px]">新增</span>
                 </button>
               </div>
             </div>
           </form>

           <div className="my-3 border-b border-gray-100"></div>

           <button 
            onClick={() => setShowFixedModal(true)}
            className="w-full py-2 bg-orange-50 text-orange-600 border border-orange-100 rounded-lg text-xs font-bold flex items-center justify-center gap-2 hover:bg-orange-100 transition-colors group"
           >
            <Repeat className="w-3 h-3 group-hover:rotate-180 transition-transform duration-500" /> 固定收支 & 預算管理
           </button>

        </div>

        {/* --- 歷史紀錄 --- */}
        <div className="space-y-2">
          <h3 className="text-xs font-bold text-gray-500 flex items-center justify-between px-1">
            <div className="flex items-center gap-2">
              <History className="w-3 h-3" /> 
              {filterMonth ? `${filterMonth} 明細` : '近期明細'}
            </div>
            <span className="text-[10px] text-gray-400 font-normal">共 {filteredTransactions.length} 筆</span>
          </h3>
          
          {filteredTransactions.length === 0 ? (
            <div className="text-center py-8 text-gray-400 bg-white rounded-2xl border border-gray-100 border-dashed">
              <div className="mb-2 text-2xl">
                {searchTerm || filterMonth || filterCategory ? '🔍' : '📝'}
              </div>
              <p className="text-xs">{searchTerm || filterMonth || filterCategory ? '沒有符合條件的紀錄' : '還沒有紀錄，快記一筆吧！'}</p>
            </div>
          ) : (
            filteredTransactions.map((t) => (
              <div 
                key={t.id} 
                onClick={() => handleReuseTransaction(t)}
                className="bg-white p-3 rounded-xl shadow-sm border border-gray-100 flex items-center justify-between group cursor-pointer hover:border-orange-300 hover:shadow-md transition-all relative overflow-hidden active:scale-[0.99]"
                title="點擊以帶入資料"
              >
                <div className="absolute inset-0 bg-orange-50 opacity-0 group-hover:opacity-20 transition-opacity pointer-events-none"></div>

                <div className="flex items-center gap-3 relative z-10">
                  <div className={`
                    w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold border-2 shrink-0
                    ${t.type === 'income' ? 'bg-emerald-50 text-emerald-600 border-emerald-100' : 'bg-rose-50 text-rose-600 border-rose-100'}
                  `}>
                    {t.type === 'income' ? '收' : '支'}
                  </div>
                  <div>
                    <div className="font-bold text-sm text-gray-800 flex items-center gap-2">
                      {t.category}
                      <span className="text-[10px] font-normal text-gray-400 bg-gray-100 px-1.5 py-0.5 rounded">{t.date}</span>
                    </div>
                    {t.note && <div className="text-xs text-gray-500 mt-0.5">{t.note}</div>}
                  </div>
                </div>

                <div className="flex items-center gap-2 relative z-10">
                  <span className={`font-bold font-mono text-base ${t.type === 'income' ? 'text-emerald-600' : 'text-rose-600'}`}>
                    {t.type === 'income' ? '+' : '-'}{t.amount}
                  </span>
                  
                  <div className="hidden md:flex opacity-0 group-hover:opacity-100 text-orange-400 mr-1 transition-opacity">
                    <Copy className="w-3 h-3" />
                  </div>

                  <button 
                    onClick={(e) => handleDeleteTransaction(e, t.id)}
                    className="p-1.5 text-gray-300 hover:text-red-500 hover:bg-red-50 rounded-full transition-colors"
                    title="刪除紀錄"
                  >
                    <Trash2 className="w-3.5 h-3.5" />
                  </button>
                </div>
              </div>
            ))
          )}
        </div>
      </div>

      {/* --- 新增分類視窗 --- */}
      {showAddModal && (
        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
          <div className="bg-white w-full max-w-xs rounded-2xl p-5 shadow-xl animate-in fade-in zoom-in duration-200">
            <h3 className="text-base font-bold text-gray-800 mb-3">
              新增{quickType === 'expense' ? '支出' : '收入'}分類
            </h3>
            <form onSubmit={handleConfirmAddCategory}>
              <input 
                autoFocus
                type="text" 
                value={newCatName}
                onChange={(e) => setNewCatName(e.target.value)}
                placeholder="輸入名稱 (例如: 飲料)"
                className="w-full bg-gray-50 border border-gray-200 rounded-xl px-3 py-2 text-base mb-3 focus:ring-2 focus:ring-orange-500 outline-none"
              />
              <div className="flex gap-2">
                <button 
                  type="button"
                  onClick={() => setShowAddModal(false)}
                  className="flex-1 py-2 bg-gray-100 text-gray-600 rounded-xl text-sm font-medium hover:bg-gray-200 transition-colors"
                >
                  取消
                </button>
                <button 
                  type="submit"
                  disabled={!newCatName.trim()}
                  className="flex-1 py-2 bg-orange-500 text-white rounded-xl text-sm font-bold disabled:bg-gray-300 hover:bg-orange-600 transition-colors"
                >
                  確認
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* --- 固定收支 & 預算管理視窗 (亮橘色主題) --- */}
      {showFixedModal && (
        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
          <div className="bg-white w-full max-w-md rounded-2xl p-5 shadow-xl animate-in fade-in zoom-in duration-200 max-h-[90vh] flex flex-col">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-lg font-bold text-gray-800 flex items-center gap-2">
                <Repeat className="w-5 h-5 text-orange-500" /> 固定收支 & 預算
              </h3>
              <button onClick={() => setShowFixedModal(false)} className="text-gray-400 hover:text-gray-600">
                <X className="w-5 h-5" />
              </button>
            </div>

            <div className="flex-1 overflow-y-auto pr-1">
              
              {/* --- 1. 月度收支預估 & 佔比 --- */}
              <div className="bg-gradient-to-br from-orange-50 to-white p-4 rounded-2xl border border-orange-100 mb-4 shadow-sm">
                <h4 className="text-xs font-bold text-orange-700 mb-3 flex items-center gap-1">
                  <CalendarDays className="w-3.5 h-3.5" /> 月度收支預估 & 佔比
                </h4>
                
                {/* 月份選擇器 */}
                <div className="flex items-center gap-2 mb-3 bg-white p-1.5 rounded-lg border border-orange-100">
                   <label className="text-[10px] font-bold text-gray-500 whitespace-nowrap">選擇月份:</label>
                   <input 
                      type="month" 
                      value={forecastDate}
                      onChange={(e) => setForecastDate(e.target.value)}
                      className="text-xs font-bold text-gray-700 outline-none bg-transparent flex-1"
                   />
                </div>

                <div className="flex items-center justify-between gap-3 mb-3">
                  {/* 收支金額 */}
                  <div className="flex-1 space-y-2">
                     <div className="flex justify-between items-center border-b border-orange-100 pb-1">
                       <span className="text-[10px] text-gray-500">固定收入</span>
                       <span className="font-bold text-sm text-emerald-500">{formatMoney(forecastIncome)}</span>
                     </div>
                     <div className="flex justify-between items-center border-b border-orange-100 pb-1">
                       <span className="text-[10px] text-gray-500">固定支出</span>
                       <span className="font-bold text-sm text-rose-500">{formatMoney(forecastExpense)}</span>
                     </div>
                     <div className="flex justify-between items-center pt-1">
                       <span className="text-[10px] font-bold text-orange-900">預估結餘</span>
                       <span className={`font-bold text-sm ${forecastBalance >= 0 ? 'text-orange-600' : 'text-rose-600'}`}>
                         {formatMoney(forecastBalance)}
                       </span>
                     </div>
                  </div>

                  {/* 圓餅圖佔比 */}
                  <div className="flex flex-col items-center justify-center pl-2 border-l border-orange-50">
                     {renderPieChart(forecastIncome, forecastExpense)}
                  </div>
                </div>

                {/* 預估明細列表 */}
                {forecastItems.length > 0 && (
                  <div className="border-t border-orange-100 pt-2">
                    <h5 className="text-[10px] font-bold text-gray-500 mb-1.5 flex items-center gap-1">
                      <List className="w-3 h-3" /> 該月份明細 ({forecastItems.length}筆)
                    </h5>
                    <div className="max-h-28 overflow-y-auto space-y-1 pr-1">
                      {forecastItems.map(item => (
                        <div key={item.id} className="flex justify-between items-center text-[10px] bg-white p-1 rounded-md border border-orange-50">
                          <div className="flex items-center gap-1">
                            <span className={`w-1.5 h-1.5 rounded-full ${item.type === 'income' ? 'bg-emerald-400' : 'bg-rose-400'}`}></span>
                            <span className="text-gray-700 truncate max-w-[80px]">{item.name}</span>
                          </div>
                          <span className={`font-mono font-medium ${item.type === 'income' ? 'text-emerald-600' : 'text-rose-600'}`}>
                            {item.type === 'income' ? '+' : '-'}{item.amount}
                          </span>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
                {forecastItems.length === 0 && (
                  <p className="text-center text-[10px] text-gray-400 py-1 border-t border-orange-100">
                    該月份無固定收支項目
                  </p>
                )}
              </div>

               {/* --- 2. 年度固定收支預估 --- */}
              <div className="bg-gradient-to-br from-emerald-50 to-white p-4 rounded-2xl border border-emerald-100 mb-4 shadow-sm">
                <h4 className="text-xs font-bold text-emerald-700 mb-3 flex items-center gap-1">
                  <Calculator className="w-3.5 h-3.5" /> 年度固定收支總覽
                </h4>
                <div className="flex justify-between items-center bg-white/50 p-2 rounded-xl mb-2">
                   <div className="text-center flex-1 border-r border-emerald-100">
                     <p className="text-[10px] text-gray-500 mb-0.5">年度總收</p>
                     <p className="font-bold text-sm text-emerald-600">{formatMoney(annualFixedIncome)}</p>
                   </div>
                   <div className="text-center flex-1">
                     <p className="text-[10px] text-gray-500 mb-0.5">年度總支</p>
                     <p className="font-bold text-sm text-rose-500">{formatMoney(annualFixedExpense)}</p>
                   </div>
                </div>
                <div className="text-center pt-1 border-t border-emerald-100">
                    <p className="text-[10px] text-gray-500 mb-0.5">年度固定結餘</p>
                    <p className={`text-base font-bold ${annualFixedBalance >= 0 ? 'text-emerald-600' : 'text-rose-600'}`}>
                      {formatMoney(annualFixedBalance)}
                    </p>
                </div>
              </div>

              {/* --- 3. 固定收支區塊 --- */}
              <div className="mb-4">
                <h4 className="text-xs font-bold text-gray-700 mb-2 flex items-center gap-1">
                  <Repeat className="w-3.5 h-3.5 text-gray-400" /> 固定項目列表
                </h4>
                
                {/* 新增固定項目表單 */}
                <div className="bg-gray-50 p-3 rounded-xl mb-3 border border-gray-100">
                  <div className="space-y-2">
                     <div className="flex gap-2">
                        <select 
                          value={newFixed.type}
                          onChange={(e) => {
                            setNewFixed({...newFixed, type: e.target.value, category: ''})
                          }}
                          className="p-1.5 rounded-lg border border-gray-200 text-xs bg-white shrink-0"
                        >
                          <option value="expense">支出</option>
                          <option value="income">收入</option>
                        </select>
                        <input 
                          type="text" 
                          placeholder="名稱" 
                          value={newFixed.name}
                          onChange={(e) => setNewFixed({...newFixed, name: e.target.value})}
                          className="flex-1 p-1.5 rounded-lg border border-gray-200 text-xs outline-none focus:ring-2 focus:ring-orange-300"
                        />
                     </div>

                     <div className="flex gap-2">
                        <input 
                          type="number" 
                          placeholder="金額" 
                          value={newFixed.amount}
                          onChange={(e) => setNewFixed({...newFixed, amount: e.target.value})}
                          className="w-1/2 p-1.5 rounded-lg border border-gray-200 text-xs outline-none focus:ring-2 focus:ring-orange-300"
                        />
                        <select
                          value={newFixed.frequency}
                          onChange={(e) => setNewFixed({...newFixed, frequency: e.target.value})}
                          className="w-1/2 p-1.5 rounded-lg border border-gray-200 text-xs bg-white"
                        >
                          <option value="monthly">📅 每月</option>
                          <option value="quarterly">🍂 每季</option>
                          <option value="yearly">🎂 每年</option>
                        </select>
                     </div>

                     {/* 起始月份選擇 (優化：下拉選單) */}
                     {(newFixed.frequency === 'quarterly' || newFixed.frequency === 'yearly') && (
                       <div className="flex items-center gap-2 bg-white border border-gray-200 p-1.5 rounded-lg">
                          <span className="text-[10px] text-gray-500 whitespace-nowrap">
                            {newFixed.frequency === 'yearly' ? '發生月份:' : '起始月份:'}
                          </span>
                          <select
                            value={newFixed.startMonth}
                            onChange={(e) => setNewFixed({...newFixed, startMonth: e.target.value})}
                            className="text-xs font-bold text-gray-700 outline-none w-full bg-transparent"
                          >
                            {Array.from({ length: 12 }, (_, i) => i + 1).map(m => (
                              <option key={m} value={String(m)}>{m}月</option>
                            ))}
                          </select>
                       </div>
                     )}
                     
                     <div className="flex gap-2">
                        <select 
                          value={newFixed.category}
                          onChange={(e) => setNewFixed({...newFixed, category: e.target.value})}
                          className="flex-1 p-1.5 rounded-lg border border-gray-200 text-xs bg-white"
                        >
                          <option value="">選擇分類</option>
                          {(newFixed.type === 'expense' ? expenseCats : incomeCats).map(c => <option key={c.id} value={c.name}>{c.icon} {c.name}</option>)}
                        </select>
                        <button 
                          onClick={handleAddFixedItem}
                          disabled={!newFixed.name || !newFixed.amount || !newFixed.category}
                          className="px-3 py-1.5 bg-orange-500 text-white rounded-lg text-xs font-bold hover:bg-orange-600 disabled:bg-gray-300 transition-colors whitespace-nowrap"
                        >
                          新增
                        </button>
                     </div>
                  </div>
                </div>

                {/* 固定項目列表 */}
                <div className="space-y-2">
                  {fixedItems.length === 0 ? (
                    <div className="text-center text-gray-400 py-4 text-xs">
                      目前沒有固定項目
                    </div>
                  ) : (
                    fixedItems.map(item => (
                      <div key={item.id} className="bg-white border border-gray-100 p-2.5 rounded-xl flex items-center justify-between shadow-sm">
                        <div className="flex-1">
                          <div className="font-bold text-sm text-gray-800 flex items-center gap-2">
                            <span className={`text-[10px] px-1.5 py-0.5 rounded border ${
                               item.type === 'income' ? 'bg-emerald-50 text-emerald-600 border-emerald-200' : 'bg-rose-50 text-rose-600 border-rose-200'
                            }`}>
                              {item.type === 'income' ? '收' : '支'}
                            </span>
                            {item.name}
                          </div>
                          <div className="text-[10px] text-gray-500 mt-1 flex flex-wrap gap-2">
                            <span className="bg-gray-100 px-1.5 rounded text-gray-600">
                               {getFrequencyLabel(item.frequency)}
                            </span>
                            {/* 顯示起始月 (針對非每月項目) */}
                            {item.frequency !== 'monthly' && (
                               <span className="bg-blue-50 text-blue-600 px-1.5 rounded">
                                  {item.frequency === 'yearly' 
                                    ? `每年${item.startMonth ? item.startMonth.replace(/^[0]*([1-9][0-9]*)/, '$1') : '1'}月` 
                                    : `${item.startMonth ? item.startMonth.replace(/^[0]*([1-9][0-9]*)/, '$1') : '1'}月起`
                                  }
                               </span>
                            )}
                            <span>{item.category} • ${item.amount}</span>
                          </div>
                        </div>
                        <div className="flex items-center gap-2 pl-2">
                          <button 
                            onClick={() => handleRecordFixedItem(item)}
                            className="bg-orange-100 text-orange-700 px-2 py-1 rounded-lg text-[10px] font-bold hover:bg-orange-200 flex items-center gap-1 shrink-0"
                          >
                            <ArrowRightCircle className="w-3 h-3" /> 記帳
                          </button>
                          <button 
                            onClick={() => handleDeleteFixedItem(item.id)}
                            className="text-gray-300 hover:text-red-500 p-1 shrink-0"
                          >
                            <Trash2 className="w-3.5 h-3.5" />
                          </button>
                        </div>
                      </div>
                    ))
                  )}
                </div>
              </div>

            </div>
            
            <div className="mt-4 pt-3 border-t border-gray-100">
              <button 
                onClick={() => setShowFixedModal(false)}
                className="w-full py-2.5 bg-gray-100 text-gray-600 rounded-xl text-sm font-bold hover:bg-gray-200"
              >
                關閉
              </button>
            </div>
          </div>
        </div>
      )}

    </div>
  );
}