import React, { useState, useEffect, useRef } from 'react';
import { processUserMessage } from './services/geminiService';
import VoiceInput from './components/VoiceInput';
import LedgerPage from './components/LedgerPage';
import StatisticsPage from './components/StatisticsPage';
import EditTransactionModal from './components/EditTransactionModal';
import { Transaction, TransactionType, Message, ExpenseCategory, IncomeCategory, BillReminder } from './types';
import { v4 as uuidv4 } from 'uuid';

type Tab = 'chat' | 'ledger' | 'stats';

interface AISettings {
    name: string;
    persona: string;
    avatar?: string;
}

const DEFAULT_AI_SETTINGS: AISettings = {
    name: "崔经理",
    persona: "一个精明、毒舌但实际上很负责任的财务经理。说话喜欢带刺，吐槽用户乱花钱，但关键时刻会给出靠谱建议。"
};

const INITIAL_PERSONA_PRESETS = [
    {
        id: 'toxic',
        name: '崔经理 (默认)',
        description: '精明、毒舌、傲娇。喜欢吐槽你乱花钱，"恨铁不成钢"，但内心其实是为你好。'
    },
    {
        id: 'gentle',
        name: '温柔管家',
        description: '温柔、体贴、治愈。无论你怎么花钱都会温柔记录，并在超支时委婉地提醒你注意身体和钱包。'
    },
    {
        id: 'strict',
        name: '严厉会计',
        description: '一丝不苟、冷酷无情。只关心数字，对任何非必要支出都会严厉批评，没有任何废话。'
    },
    {
        id: 'custom',
        name: '自定义',
        description: '可以根据你喜欢的方式设定助手的语气和风格'
    }
];

const getLocalDateString = (date = new Date()) => {
    const offset = date.getTimezoneOffset();
    const localDate = new Date(date.getTime() - (offset * 60 * 1000));
    return localDate.toISOString().split('T')[0];
};

const getCategoryIcon = (category: string, type: TransactionType) => {
    if (type === TransactionType.INCOME) {
        switch (category) {
            case IncomeCategory.SALARY: return '💰';
            case IncomeCategory.BONUS: return '🧧';
            case IncomeCategory.INVESTMENT: return '📈';
            default: return '💵';
        }
    }
    switch (category) {
        case ExpenseCategory.FOOD: return '🍔';
        case ExpenseCategory.SHOPPING: return '🛍️';
        case ExpenseCategory.TRANSPORT: return '🚗';
        case ExpenseCategory.HOUSING: return '🏠';
        case ExpenseCategory.ENTERTAINMENT: return '🎬';
        case ExpenseCategory.MEDICAL: return '💊';
        case ExpenseCategory.SOCIAL: return '🤝';
        case ExpenseCategory.EDUCATION: return '📚';
        case ExpenseCategory.FINANCE: return '🏦';
        case ExpenseCategory.CHILD: return '👶';
        case ExpenseCategory.PET: return '🐱';
        case ExpenseCategory.CAR: return '🚘';
        case ExpenseCategory.BEAUTY: return '💄';
        case ExpenseCategory.BUSINESS: return '💼';
        case ExpenseCategory.MISC: return '🧺';
        default: return '🧾';
    }
};

const App: React.FC = () => {
  const [activeTab, setActiveTab] = useState<Tab>('chat');
  const [messages, setMessages] = useState<Message[]>([]);
  const [transactions, setTransactions] = useState<Transaction[]>([]);
  const [budgets, setBudgets] = useState<Record<string, number>>({ '总预算': 3000 }); 
  const [reminders, setReminders] = useState<BillReminder[]>([]);
  const [inputText, setInputText] = useState('');
  const [isProcessing, setIsProcessing] = useState(false);
  const [editingTransaction, setEditingTransaction] = useState<Transaction | null>(null);
  const [isEditingFromChat, setIsEditingFromChat] = useState(false);
  const [inputMode, setInputMode] = useState<'voice' | 'keyboard'>('voice');

  const [aiSettings, setAiSettings] = useState<AISettings>(DEFAULT_AI_SETTINGS);
  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
  const [customPreset, setCustomPreset] = useState({ name: '自定义', description: '可以根据你喜欢的方式设定助手的语气和风格' });
  
  const fileInputRef = useRef<HTMLInputElement>(null);
  const avatarInputRef = useRef<HTMLInputElement>(null);
  const messagesEndRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const storedTransactions = localStorage.getItem('cui_transactions');
    const storedMessages = localStorage.getItem('cui_messages');
    const storedBudget = localStorage.getItem('cui_budget');
    const storedReminders = localStorage.getItem('cui_reminders');
    const storedAiSettings = localStorage.getItem('cui_ai_settings');
    const storedCustom = localStorage.getItem('cui_custom_preset_info');
    
    if (storedTransactions) setTransactions(JSON.parse(storedTransactions));
    if (storedMessages) setMessages(JSON.parse(storedMessages));
    if (storedBudget) {
        const parsed = JSON.parse(storedBudget);
        setBudgets(typeof parsed === 'number' ? { '总预算': parsed } : parsed);
    }
    if (storedReminders) setReminders(JSON.parse(storedReminders));
    if (storedAiSettings) setAiSettings(JSON.parse(storedAiSettings));
    if (storedCustom) setCustomPreset(JSON.parse(storedCustom));

    if (!storedMessages) {
      setMessages([{
        id: 'init',
        role: 'assistant',
        content: `我是${storedAiSettings ? JSON.parse(storedAiSettings).name : '崔经理'}。✨\n想记账？快说！🎤`,
        timestamp: Date.now()
      }]);
    }
  }, []);

  useEffect(() => { localStorage.setItem('cui_transactions', JSON.stringify(transactions)); }, [transactions]);
  useEffect(() => { localStorage.setItem('cui_budget', JSON.stringify(budgets)); }, [budgets]);
  useEffect(() => { localStorage.setItem('cui_reminders', JSON.stringify(reminders)); }, [reminders]);
  useEffect(() => { localStorage.setItem('cui_ai_settings', JSON.stringify(aiSettings)); }, [aiSettings]);
  useEffect(() => { localStorage.setItem('cui_custom_preset_info', JSON.stringify(customPreset)); }, [customPreset]);
  
  useEffect(() => {
    localStorage.setItem('cui_messages', JSON.stringify(messages));
    if (activeTab === 'chat') scrollToBottom();
  }, [messages, activeTab]);

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  };

  const handleUpdateTransaction = (updated: Transaction) => {
    setTransactions(prev => prev.map(t => t.id === updated.id ? updated : t));
    setEditingTransaction(null);
    setIsEditingFromChat(false);
  };

  const handleDeleteTransaction = (id: string) => {
    if (confirm('确定要删除这条记录吗？')) {
        setTransactions(prev => prev.filter(t => t.id !== id));
        setEditingTransaction(null);
        setIsEditingFromChat(false);
    }
  };

  const handleAddReminder = (reminder: BillReminder) => {
    setReminders(prev => [...prev, reminder]);
  };

  const handleUpdateReminder = (updated: BillReminder) => {
    setReminders(prev => prev.map(r => r.id === updated.id ? updated : r));
  };

  const handleDeleteReminder = (id: string) => {
    if (confirm('确定要删除这个提醒吗？')) {
      setReminders(prev => prev.filter(r => r.id !== id));
    }
  };

  const handleToggleReminder = (id: string) => {
    setReminders(prev => prev.map(r => r.id === id ? { ...r, isCompleted: !r.isCompleted } : r));
  };

  const handleSendMessage = async (text: string, imageBase64?: string, mimeType?: string) => {
    if (!text.trim() && !imageBase64) return;

    const userMsg: Message = {
      id: uuidv4(),
      role: 'user',
      content: imageBase64 ? '已上传图片' : text,
      timestamp: Date.now()
    };
    setMessages(prev => [...prev, userMsg]);
    setInputText('');
    setIsProcessing(true);

    try {
      const result = await processUserMessage(text, aiSettings.name, aiSettings.persona, imageBase64, mimeType);
      
      if (result.transaction) {
        const newTransactionId = uuidv4();
        const newTransaction: Transaction = {
          id: newTransactionId,
          item: result.transaction.item,
          amount: result.transaction.amount,
          type: result.transaction.type,
          category: result.transaction.category,
          date: getLocalDateString(),
          timestamp: Date.now()
        };
        
        setTransactions(prev => [...prev, newTransaction]);
        
        setMessages(prev => [...prev, { 
            id: uuidv4(), 
            role: 'assistant', 
            content: 'RECEIPT', 
            timestamp: Date.now(), 
            relatedTransactionId: newTransactionId 
        }]);

        const replySegments = result.reply.split('\n').filter(s => s.trim()).slice(0, 2);
        for (let i = 0; i < replySegments.length; i++) {
            if (i > 0) await new Promise(r => setTimeout(r, 450)); 
            setMessages(prev => [...prev, { 
                id: uuidv4(), 
                role: 'assistant', 
                content: replySegments[i].trim(), 
                timestamp: Date.now() 
            }]);
        }
      } else {
        const replySegments = result.reply.split('\n').filter(s => s.trim()).slice(0, 2);
        for (let i = 0; i < replySegments.length; i++) {
            if (i > 0) await new Promise(r => setTimeout(r, 450));
            setMessages(prev => [...prev, { 
                id: uuidv4(), 
                role: 'assistant', 
                content: replySegments[i].trim(), 
                timestamp: Date.now() 
            }]);
        }
      }
    } catch (error) {
      setMessages(prev => [...prev, { id: uuidv4(), role: 'assistant', content: '系统走神了... 🫥\n等会儿再说。', timestamp: Date.now() }]);
    } finally {
      setIsProcessing(false);
    }
  };

  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSendMessage(inputText);
    }
  };

  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
      const file = e.target.files?.[0];
      if (!file) return;
      const reader = new FileReader();
      reader.onloadend = () => {
          const base64Data = (reader.result as string).split(',')[1];
          handleSendMessage("", base64Data, file.type);
      };
      reader.readAsDataURL(file);
      if (fileInputRef.current) fileInputRef.current.value = '';
  }

  const handleAvatarUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
      const file = e.target.files?.[0];
      if (!file) return;
      const reader = new FileReader();
      reader.onloadend = () => {
          const base64Data = reader.result as string;
          setAiSettings(prev => ({ ...prev, avatar: base64Data }));
      };
      reader.readAsDataURL(file);
      if (avatarInputRef.current) avatarInputRef.current.value = '';
  }

  const todayStr = getLocalDateString();
  const todaySpending = transactions
    .filter(t => t.date === todayStr && t.type === TransactionType.EXPENSE)
    .reduce((a, b) => a + b.amount, 0);

  const personaPresets = INITIAL_PERSONA_PRESETS.map(p => {
      if (p.id === 'custom') {
          return { ...p, name: customPreset.name, description: customPreset.description };
      }
      return p;
  });

  const handleSaveSettings = () => {
      const currentPreset = INITIAL_PERSONA_PRESETS.find(p => p.description === aiSettings.persona && p.id !== 'custom');
      if (!currentPreset) {
          setCustomPreset({ name: aiSettings.name, description: aiSettings.persona });
      }
      setIsSettingsOpen(false);
  };

  return (
    <div className="flex flex-col h-screen w-full bg-gray-100 font-sans">
      <div className="flex-1 overflow-hidden relative">
        {/* Chat Tab */}
        <div className={`absolute inset-0 flex flex-col transition-transform duration-300 ${activeTab === 'chat' ? 'translate-x-0' : '-translate-x-full'}`}>
            <div className="bg-white/90 backdrop-blur-lg border-b border-gray-100 px-6 py-3 flex items-center justify-between shadow-sm z-10 relative">
                <div className="flex items-center gap-2.5 cursor-pointer group" onClick={() => setIsSettingsOpen(true)}>
                    <div className="w-9 h-9 rounded-full bg-indigo-900 text-white flex items-center justify-center font-bold text-lg border-2 border-yellow-400 shadow-sm transition-transform group-hover:scale-105 active:scale-95 overflow-hidden">
                        {aiSettings.avatar ? <img src={aiSettings.avatar} alt="avatar" className="w-full h-full object-cover" /> : aiSettings.name.charAt(0)}
                    </div>
                    <div className="min-w-0">
                        <h1 className="font-bold text-gray-800 text-sm md:text-base flex items-center gap-1">
                            {aiSettings.name}
                            <svg className="w-3 h-3 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
                        </h1>
                        <span className="text-[9px] text-gray-400 font-medium tracking-tight truncate block max-w-[140px]">
                            {aiSettings.persona.split(/[。！]/)[0] + '...'}
                        </span>
                    </div>
                </div>
                <div className="flex items-center gap-1">
                    <span className="text-[10px] text-gray-400/50 font-bold uppercase tracking-widest mr-1">今日支出</span>
                    <span className="text-lg font-black text-indigo-600 font-mono tracking-tighter">¥{todaySpending.toFixed(0)}</span>
                </div>
            </div>

            {/* AI Settings Modal */}
            {isSettingsOpen && (
                <div className="fixed inset-0 z-[100] bg-black/40 backdrop-blur-sm flex items-end md:items-center justify-center p-4">
                    <div className="bg-white w-full max-w-md rounded-3xl p-6 shadow-2xl animate-float-up md:animate-zoom-in max-h-[85vh] flex flex-col mb-32 md:mb-0">
                        <div className="flex justify-between items-center mb-5 shrink-0">
                            <h3 className="text-xl font-bold text-gray-900">管家设定</h3>
                            <button onClick={() => setIsSettingsOpen(false)} className="p-2 bg-gray-100 rounded-full hover:bg-gray-200 transition-colors">
                                <svg className="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
                            </button>
                        </div>
                        <div className="flex-1 overflow-y-auto pr-1 space-y-6 pb-2 no-scrollbar">
                            <div className="flex flex-col items-center mb-2">
                                <div className="relative group">
                                    <div className="w-20 h-20 rounded-full bg-indigo-900 border-4 border-white shadow-lg flex items-center justify-center text-3xl font-bold text-white overflow-hidden">
                                        {aiSettings.avatar ? <img src={aiSettings.avatar} alt="avatar" className="w-full h-full object-cover" /> : aiSettings.name.charAt(0)}
                                    </div>
                                    <button 
                                        onClick={() => avatarInputRef.current?.click()}
                                        className="absolute bottom-0 right-0 p-1.5 bg-indigo-600 text-white rounded-full border-2 border-white shadow-md hover:bg-indigo-700 transition-colors"
                                    >
                                        <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
                                    </button>
                                    <input type="file" ref={avatarInputRef} onChange={handleAvatarUpload} accept="image/*" className="hidden" />
                                </div>
                                <span className="text-[10px] text-gray-400 font-bold mt-2 uppercase tracking-widest">更改管家形象</span>
                            </div>

                            <div>
                                <label className="block text-xs font-bold text-gray-400 mb-2 uppercase tracking-wider">管家名字</label>
                                <input type="text" value={aiSettings.name} onChange={(e) => setAiSettings({...aiSettings, name: e.target.value})} className="w-full p-3.5 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none font-bold text-gray-800" />
                            </div>
                            <div>
                                <label className="block text-xs font-bold text-gray-400 mb-3 uppercase tracking-wider">性格预设</label>
                                <div className="grid grid-cols-2 gap-3">
                                    {personaPresets.map(p => (
                                        <button key={p.id} onClick={() => setAiSettings({...aiSettings, name: p.name.split(' ')[0], persona: p.description})} className={`p-4 rounded-2xl border text-left transition-all ${aiSettings.persona === p.description ? 'bg-indigo-600 border-indigo-600 text-white shadow-lg shadow-indigo-100' : 'bg-white border-gray-100 hover:bg-gray-50 text-gray-600'}`}>
                                            <div className={`font-bold text-sm mb-1 ${aiSettings.persona === p.description ? 'text-white' : 'text-gray-900'}`}>{p.name}</div>
                                            <div className={`text-[10px] leading-tight ${aiSettings.persona === p.description ? 'text-indigo-100' : 'text-gray-400'}`}>{p.description.slice(0, 24)}...</div>
                                        </button>
                                    ))}
                                </div>
                            </div>
                            <div>
                                <label className="block text-xs font-bold text-gray-400 mb-2 uppercase tracking-wider">详细性格定义</label>
                                <textarea value={aiSettings.persona} onChange={(e) => setAiSettings({...aiSettings, persona: e.target.value})} className="w-full p-4 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none text-sm text-gray-600 h-28 resize-none" />
                            </div>
                        </div>
                        <div className="pt-5 shrink-0 border-t border-gray-100 mt-2">
                            <button onClick={handleSaveSettings} className="w-full py-4 bg-indigo-600 text-white rounded-2xl font-bold shadow-xl shadow-indigo-100 hover:bg-indigo-700 transition-all active:scale-95">保存设定</button>
                        </div>
                    </div>
                </div>
            )}

            {/* Messages - Added Gradient Background */}
            <div className="flex-1 overflow-y-auto p-4 pb-32 space-y-6 bg-gradient-to-b from-indigo-50/40 via-white to-gray-50">
                {messages.map((msg) => {
                    const isUser = msg.role === 'user';
                    const relatedTx = msg.relatedTransactionId ? transactions.find(t => t.id === msg.relatedTransactionId) : null;
                    if (msg.relatedTransactionId && !relatedTx) return null;
                    
                    const isExpense = relatedTx?.type === TransactionType.EXPENSE;
                    
                    return (
                        <div key={msg.id} className={`flex w-full ${isUser ? 'justify-end' : 'justify-start'}`}>
                            <div className={`flex max-w-[90%] md:max-w-[70%] gap-2 ${isUser ? 'flex-row-reverse' : 'flex-row'}`}>
                                <div className="flex-shrink-0 mt-1">
                                    {isUser ? <div className="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 border border-indigo-200 shadow-sm"><svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg></div> : <div className="w-8 h-8 rounded-full bg-indigo-900 text-white text-[10px] flex items-center justify-center border border-yellow-500 shadow-sm font-bold overflow-hidden">{aiSettings.avatar ? <img src={aiSettings.avatar} alt="avatar" className="w-full h-full object-cover" /> : aiSettings.name.charAt(0)}</div>}
                                </div>
                                <div className="flex flex-col">
                                    {!isUser && !relatedTx && <span className="text-[9px] text-gray-400 font-bold mb-1 ml-1 tracking-tight">{aiSettings.name}</span>}
                                    {relatedTx ? (
                                        /* Redesigned Receipt Card with visual differentiation */
                                        <div className={`
                                            relative min-w-[240px] md:min-w-[280px] rounded-3xl overflow-hidden shadow-xl animate-float-in border
                                            ${isExpense 
                                                ? 'bg-gradient-to-br from-rose-50/30 to-white border-rose-100/50 shadow-rose-200/20' 
                                                : 'bg-gradient-to-br from-emerald-50/30 to-white border-emerald-100/50 shadow-emerald-200/20'}
                                        `}>
                                            {/* Top Accents */}
                                            <div className={`h-1.5 w-full ${isExpense ? 'bg-rose-400' : 'bg-emerald-400'}`}></div>
                                            
                                            <div className="p-5">
                                                <div className="flex justify-between items-start mb-4">
                                                    <div className="flex flex-col">
                                                        <div className="flex items-center gap-1.5 mb-0.5">
                                                            <span className={`w-1.5 h-1.5 rounded-full ${isExpense ? 'bg-rose-400 animate-pulse' : 'bg-emerald-400 animate-pulse'}`}></span>
                                                            <span className={`text-[10px] font-black uppercase tracking-wider ${isExpense ? 'text-rose-400' : 'text-emerald-500'}`}>
                                                                {isExpense ? '支出成功' : '收入成功'}
                                                            </span>
                                                        </div>
                                                        <h4 className="text-gray-800 font-black text-base line-clamp-1">{relatedTx.item}</h4>
                                                    </div>
                                                    <div className={`w-11 h-11 rounded-2xl flex items-center justify-center text-2xl shrink-0 border shadow-sm 
                                                        ${isExpense ? 'bg-rose-50 border-rose-100' : 'bg-emerald-50 border-emerald-100'}
                                                    `}>
                                                        {getCategoryIcon(relatedTx.category, relatedTx.type)}
                                                    </div>
                                                </div>

                                                <div className="space-y-3">
                                                    <div className="flex flex-col">
                                                        <span className="text-[9px] text-gray-400 font-bold uppercase tracking-tight mb-1">交易详情</span>
                                                        <div className="flex items-center gap-2">
                                                            <span className={`px-2 py-0.5 rounded-lg text-[10px] font-black 
                                                                ${isExpense ? 'bg-rose-100 text-rose-600' : 'bg-emerald-100 text-emerald-600'}
                                                            `}>
                                                                {relatedTx.category}
                                                            </span>
                                                            <span className="text-[10px] text-gray-300 font-mono">{relatedTx.date}</span>
                                                        </div>
                                                    </div>

                                                    <div className="pt-3 border-t border-dashed border-gray-100 flex items-baseline justify-between">
                                                        <span className="text-gray-400 text-[10px] font-black uppercase tracking-tighter">Amount</span>
                                                        <span className={`text-2xl font-black font-mono tracking-tighter ${isExpense ? 'text-rose-500' : 'text-emerald-500'}`}>
                                                            {isExpense ? '-' : '+'}¥{relatedTx.amount.toFixed(2)}
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>

                                            {/* Quick Actions Bar */}
                                            <div className="bg-gray-50/50 px-3 py-2 border-t border-gray-100 flex justify-end gap-3">
                                                <button onClick={() => { setEditingTransaction(relatedTx); setIsEditingFromChat(true); }} className="p-2 text-gray-300 hover:text-indigo-600 transition-all">
                                                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" /></svg>
                                                </button>
                                                <button onClick={() => handleDeleteTransaction(relatedTx.id)} className="p-2 text-gray-300 hover:text-rose-500 transition-all">
                                                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
                                                </button>
                                            </div>
                                        </div>
                                    ) : (
                                        <div className={`p-4 rounded-3xl shadow-sm text-sm md:text-base leading-relaxed whitespace-pre-wrap ${isUser ? 'bg-indigo-600 text-white rounded-tr-none' : 'bg-white text-gray-800 border border-gray-100 rounded-tl-none animate-float-in'}`}>{msg.content}</div>
                                    )}
                                </div>
                            </div>
                        </div>
                    );
                })}
                {isProcessing && <div className="flex w-full justify-start"><div className="flex max-w-[70%] gap-2"><div className="w-8 h-8 rounded-full bg-indigo-900 text-white text-[10px] flex items-center justify-center border border-yellow-500 font-bold overflow-hidden">{aiSettings.avatar ? <img src={aiSettings.avatar} alt="avatar" className="w-full h-full object-cover" /> : aiSettings.name.charAt(0)}</div><div className="bg-white p-3 rounded-2xl rounded-tl-none border border-gray-200 shadow-sm flex items-center gap-1.5"><span className="w-1.5 h-1.5 bg-indigo-400 rounded-full animate-bounce"></span><span className="w-1.5 h-1.5 bg-indigo-400 rounded-full animate-bounce delay-75"></span><span className="w-1.5 h-1.5 bg-indigo-400 rounded-full animate-bounce delay-150"></span></div></div></div>}
                <div ref={messagesEndRef} />
            </div>

            {/* Input Area */}
            <div className="absolute bottom-20 left-0 right-0 p-4 bg-gradient-to-t from-gray-100 via-gray-100 to-transparent z-40">
                <div className="max-w-4xl mx-auto flex flex-col gap-3">
                    <div className="flex items-center gap-3">
                        <button onClick={() => setInputMode(inputMode === 'voice' ? 'keyboard' : 'voice')} className="p-3 bg-white text-gray-400 rounded-full shadow-lg hover:bg-gray-50 transition-all active:scale-90">
                            {inputMode === 'voice' ? (
                                <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
                            ) : (
                                <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" /></svg>
                            )}
                        </button>
                        
                        {inputMode === 'keyboard' ? (
                            <div className="flex-1 bg-white rounded-2xl flex items-center px-4 py-1.5 focus-within:ring-2 focus-within:ring-indigo-500 shadow-lg border border-gray-100 transition-all">
                                <input type="text" value={inputText} onChange={(e) => setInputText(e.target.value)} onKeyDown={handleKeyPress} placeholder="刚才花了还是赚了？" className="flex-1 bg-transparent border-none focus:outline-none text-gray-700 py-2.5 text-sm" disabled={isProcessing} />
                                {inputText.trim() && (
                                    <button onClick={() => handleSendMessage(inputText)} className="ml-2 p-2 text-indigo-600 font-bold text-sm">发送</button>
                                )}
                            </div>
                        ) : (
                            <VoiceInput onTranscript={(text) => handleSendMessage(text)} isProcessing={isProcessing} isFullWidth />
                        )}
                        
                        <input type="file" accept="image/*" className="hidden" ref={fileInputRef} onChange={handleFileUpload} />
                        <button onClick={() => fileInputRef.current?.click()} disabled={isProcessing} className="p-3 bg-white text-gray-400 rounded-full shadow-lg hover:bg-gray-50 transition-all active:scale-90">
                            <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        {/* Other Tabs */}
        <div className={`absolute inset-0 bg-gray-50 transition-transform duration-300 ${activeTab === 'ledger' ? 'translate-x-0' : (activeTab === 'stats' ? '-translate-x-full' : 'translate-x-full')}`}>
             <LedgerPage transactions={transactions} onUpdateTransaction={handleUpdateTransaction} onDeleteTransaction={handleDeleteTransaction} budgets={budgets} setBudgets={setBudgets} reminders={reminders} onAddReminder={handleAddReminder} onUpdateReminder={handleUpdateReminder} onDeleteReminder={handleDeleteReminder} onToggleReminder={handleToggleReminder} />
        </div>
        <div className={`absolute inset-0 bg-gray-50 transition-transform duration-300 ${activeTab === 'stats' ? 'translate-x-0' : 'translate-x-full'}`}>
             <StatisticsPage transactions={transactions} />
        </div>
      </div>

      {/* Bottom Nav */}
      <div className="absolute bottom-2 left-4 right-4 bg-white/95 backdrop-blur-xl rounded-2xl shadow-2xl border border-gray-100 p-1 flex justify-around md:w-96 md:mx-auto z-50">
         <button onClick={() => setActiveTab('ledger')} className={`flex flex-col items-center justify-center w-full py-2 rounded-xl transition-all duration-300 ${activeTab === 'ledger' ? 'bg-indigo-50 text-indigo-600' : 'text-gray-400'}`}>
            <svg className="w-5 h-5 mb-0.5" viewBox="0 0 24 24" fill={activeTab === 'ledger' ? 'currentColor' : 'none'} stroke="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h4v-4zm0-6h-4v4h4V7zM9 17H5v-4h4v4zm0-6H5V7h4v4z" strokeWidth={activeTab === 'ledger' ? 0 : 2} /></svg>
            <span className="text-[10px] font-bold">账本</span>
         </button>
         <button onClick={() => setActiveTab('chat')} className={`flex flex-col items-center justify-center w-full py-2 rounded-xl transition-all duration-300 ${activeTab === 'chat' ? 'bg-indigo-50 text-indigo-600' : 'text-gray-400'}`}>
             <svg className="w-5 h-5 mb-0.5" viewBox="0 0 24 24" fill={activeTab === 'chat' ? 'currentColor' : 'none'} stroke="currentColor"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z" strokeWidth={activeTab === 'chat' ? 0 : 2} /></svg>
             <span className="text-[10px] font-bold">记一笔</span>
         </button>
         <button onClick={() => setActiveTab('stats')} className={`flex flex-col items-center justify-center w-full py-2 rounded-xl transition-all duration-300 ${activeTab === 'stats' ? 'bg-indigo-50 text-indigo-600' : 'text-gray-400'}`}>
             <svg className="w-5 h-5 mb-0.5" viewBox="0 0 24 24" fill={activeTab === 'stats' ? 'currentColor' : 'none'} stroke="currentColor"><path d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" strokeWidth={activeTab === 'stats' ? 0 : 2} /><path d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" strokeWidth={activeTab === 'stats' ? 0 : 2} /></svg>
             <span className="text-[10px] font-bold">统计</span>
         </button>
      </div>

      {/* Global Edit Modal */}
      {editingTransaction && (
          <EditTransactionModal 
            transaction={editingTransaction} 
            onSave={handleUpdateTransaction} 
            onDelete={() => handleDeleteTransaction(editingTransaction.id)} 
            onClose={() => { setEditingTransaction(null); setIsEditingFromChat(false); }} 
            hideDelete={isEditingFromChat}
          />
      )}
    </div>
  );
};

export default App;