import React, { useState } from 'react';
import { Plus, TrendingUp, TrendingDown, User, Home, BarChart3, X, Check, Zap, Trash2, Settings, Sparkles, Coffee, Car, ShoppingBag, Film, Heart, DollarSign, Wallet } from 'lucide-react';

const Flowly = () => {
  const [activeTab, setActiveTab] = useState('home');
  const [showAddModal, setShowAddModal] = useState(false);
  const [showEditModal, setShowEditModal] = useState(false);
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
  const [showOnboarding, setShowOnboarding] = useState(true);
  const [onboardingStep, setOnboardingStep] = useState(0);
  const [selectedTransaction, setSelectedTransaction] = useState(null);
  const [theme, setTheme] = useState('cyan');
  const [longPressTimer, setLongPressTimer] = useState(null);
  const [touchStart, setTouchStart] = useState(null);
  const [touchEnd, setTouchEnd] = useState(null);
  const [swipedTxn, setSwipedTxn] = useState(null);
  const [numberAnimate, setNumberAnimate] = useState(false);
  
  const [transactions, setTransactions] = useState([
    { id: 1, type: 'expense', amount: 45, category: 'Food', desc: 'Lunch', date: new Date(), currency: 'USD' },
    { id: 2, type: 'income', amount: 3000, category: 'Salary', desc: 'Monthly', date: new Date(Date.now() - 86400000), currency: 'USD' },
    { id: 3, type: 'expense', amount: 12, category: 'Transport', desc: 'Uber', date: new Date(), currency: 'USD' },
  ]);
  
  const [currency, setCurrency] = useState('USD');
  const [monthlyIncome, setMonthlyIncome] = useState(3000);
  const [dailyBudget, setDailyBudget] = useState(100);
  
  const [newTransaction, setNewTransaction] = useState({
    type: 'expense',
    amount: '',
    category: 'Food',
    desc: ''
  });

  const [tempMonthlyIncome, setTempMonthlyIncome] = useState('');
  const [tempDailyBudget, setTempDailyBudget] = useState('');

  const themes = {
    cyan: { primary: '#06b6d4', glow: 'rgba(6, 182, 212, 0.5)', gradient: 'from-cyan-500 to-blue-500' },
    green: { primary: '#84cc16', glow: 'rgba(132, 204, 22, 0.5)', gradient: 'from-lime-500 to-green-500' },
    purple: { primary: '#a855f7', glow: 'rgba(168, 85, 247, 0.5)', gradient: 'from-purple-500 to-pink-500' },
    orange: { primary: '#f97316', glow: 'rgba(249, 115, 22, 0.5)', gradient: 'from-orange-500 to-red-500' }
  };

  const currencies = ['USD', 'EUR', 'GBP', 'INR', 'JPY', 'AUD', 'CAD'];
  const currencySymbols = { USD: '$', EUR: '€', GBP: '£', INR: '₹', JPY: '¥', AUD: 'A$', CAD: 'C$' };

  const categoryIcons = {
    Food: Coffee,
    Transport: Car,
    Bills: Wallet,
    Shopping: ShoppingBag,
    Entertainment: Film,
    Health: Heart,
    Salary: DollarSign,
    Other: Sparkles
  };

  const categories = Object.keys(categoryIcons);

  const getTodayTransactions = () => {
    const today = new Date().toDateString();
    return transactions.filter(t => new Date(t.date).toDateString() === today);
  };

  const getTodayBalance = () => {
    const todayTxns = getTodayTransactions();
    const income = todayTxns.filter(t => t.type === 'income').reduce((sum, t) => sum + t.amount, 0);
    const expense = todayTxns.filter(t => t.type === 'expense').reduce((sum, t) => sum + t.amount, 0);
    return { income, expense, balance: income - expense };
  };

  const getWeeklyData = () => {
    const days = [];
    const today = new Date();
    for (let i = 6; i >= 0; i--) {
      const date = new Date(today);
      date.setDate(date.getDate() - i);
      const dayTxns = transactions.filter(t => 
        new Date(t.date).toDateString() === date.toDateString()
      );
      const expense = dayTxns.filter(t => t.type === 'expense').reduce((sum, t) => sum + t.amount, 0);
      days.push({
        day: date.toLocaleDateString('en-US', { weekday: 'short' }),
        amount: expense
      });
    }
    return days;
  };

  const getWeeklyStats = () => {
    const weekAgo = new Date(Date.now() - 7 * 86400000);
    const weekTxns = transactions.filter(t => new Date(t.date) >= weekAgo);
    const categorySpending = {};
    weekTxns.filter(t => t.type === 'expense').forEach(t => {
      categorySpending[t.category] = (categorySpending[t.category] || 0) + t.amount;
    });
    return categorySpending;
  };

  const addTransaction = () => {
    if (!newTransaction.amount) return;
    const txn = {
      id: Date.now(),
      ...newTransaction,
      amount: parseFloat(newTransaction.amount),
      date: new Date(),
      currency
    };
    setTransactions([txn, ...transactions]);
    setNewTransaction({ type: 'expense', amount: '', category: 'Food', desc: '' });
    setShowAddModal(false);
    triggerNumberAnimation();
  };

  const deleteTransaction = (id) => {
    setTransactions(transactions.filter(t => t.id !== id));
    setShowDeleteConfirm(false);
    setSelectedTransaction(null);
    triggerNumberAnimation();
  };

  const editTransaction = () => {
    setTransactions(transactions.map(t => 
      t.id === selectedTransaction.id ? selectedTransaction : t
    ));
    setShowEditModal(false);
    setSelectedTransaction(null);
    triggerNumberAnimation();
  };

  const triggerNumberAnimation = () => {
    setNumberAnimate(true);
    setTimeout(() => setNumberAnimate(false), 500);
  };

  const handleLongPressStart = (txn) => {
    const timer = setTimeout(() => {
      setSelectedTransaction(txn);
      setShowDeleteConfirm(true);
    }, 500);
    setLongPressTimer(timer);
  };

  const handleLongPressEnd = () => {
    if (longPressTimer) {
      clearTimeout(longPressTimer);
      setLongPressTimer(null);
    }
  };

  const handleTouchStart = (e, txn) => {
    setTouchStart(e.targetTouches[0].clientX);
    setSwipedTxn(txn.id);
  };

  const handleTouchMove = (e) => {
    setTouchEnd(e.targetTouches[0].clientX);
  };

  const handleTouchEnd = (txn) => {
    if (!touchStart || !touchEnd) return;
    const distance = touchStart - touchEnd;
    if (distance > 75) {
      setSelectedTransaction(txn);
      setShowDeleteConfirm(true);
    }
    setTouchStart(null);
    setTouchEnd(null);
    setSwipedTxn(null);
  };

  const handleTransactionClick = (txn) => {
    setSelectedTransaction(txn);
    setShowEditModal(true);
  };

  const completeOnboarding = () => {
    if (tempMonthlyIncome) setMonthlyIncome(parseFloat(tempMonthlyIncome));
    if (tempDailyBudget) setDailyBudget(parseFloat(tempDailyBudget));
    setShowOnboarding(false);
  };

  const today = getTodayBalance();
  const dailyProgress = (today.expense / dailyBudget) * 100;
  const isOverBudget = today.expense > dailyBudget;
  const weeklyData = getWeeklyData();
  const weeklyStats = getWeeklyStats();
  const maxWeekly = Math.max(...weeklyData.map(d => d.amount), 1);

  const CircularProgress = ({ progress, size = 180 }) => {
    const strokeWidth = 8;
    const radius = (size - strokeWidth * 2) / 2;
    const circumference = radius * 2 * Math.PI;
    const offset = circumference - (Math.min(progress, 100) / 100) * circumference;

    return (
      <svg width={size} height={size} className="transform -rotate-90" style={{ overflow: 'visible' }}>
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          stroke="rgba(255,255,255,0.1)"
          strokeWidth={strokeWidth}
          fill="none"
        />
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          stroke={themes[theme].primary}
          strokeWidth={strokeWidth}
          fill="none"
          strokeDasharray={circumference}
          strokeDashoffset={offset}
          strokeLinecap="round"
          className="transition-all duration-500"
          style={{ filter: `drop-shadow(0 0 8px ${themes[theme].glow})` }}
        />
      </svg>
    );
  };

  if (showOnboarding) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-indigo-950 via-purple-950 to-black text-white flex items-center justify-center p-6 relative overflow-hidden">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(120,119,198,0.1),transparent_50%)]" />
        <div className="max-w-md w-full relative z-10">
          {onboardingStep === 0 && (
            <div className="text-center space-y-8 animate-in fade-in duration-700">
              <div className="relative">
                <div className="w-32 h-32 mx-auto rounded-3xl flex items-center justify-center relative"
                  style={{
                    background: 'rgba(255, 255, 255, 0.05)',
                    backdropFilter: 'blur(20px)',
                    border: `2px solid ${themes[theme].primary}`,
                    boxShadow: `0 0 40px ${themes[theme].glow}, inset 0 0 20px rgba(255,255,255,0.1)`
                  }}>
                  <Zap className="w-16 h-16" style={{ color: themes[theme].primary }} />
                </div>
              </div>
              <h1 className="text-5xl font-bold bg-gradient-to-r from-cyan-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">
                Flowly
              </h1>
              <p className="text-gray-400 text-lg">
                Your futuristic budgeting companion
              </p>
              <button
                onClick={() => setOnboardingStep(1)}
                className="w-full py-5 rounded-2xl font-bold text-lg relative overflow-hidden group"
                style={{
                  background: 'rgba(255, 255, 255, 0.05)',
                  backdropFilter: 'blur(20px)',
                  border: `2px solid ${themes[theme].primary}`,
                  boxShadow: `0 0 30px ${themes[theme].glow}`,
                  color: themes[theme].primary
                }}
              >
                <span className="relative z-10">Get Started</span>
              </button>
            </div>
          )}

          {onboardingStep === 1 && (
            <div className="space-y-6 animate-in fade-in duration-500 p-8 rounded-3xl"
              style={{
                background: 'rgba(255, 255, 255, 0.05)',
                backdropFilter: 'blur(30px)',
                border: `1px solid ${themes[theme].primary}40`,
                boxShadow: `0 0 50px ${themes[theme].glow}`
              }}>
              <h2 className="text-3xl font-bold">Monthly Income</h2>
              <input
                type="number"
                value={tempMonthlyIncome}
                onChange={(e) => setTempMonthlyIncome(e.target.value)}
                placeholder="3000"
                className="w-full px-6 py-5 rounded-2xl text-3xl font-bold text-center focus:outline-none"
                style={{
                  background: 'rgba(0, 0, 0, 0.4)',
                  border: `2px solid ${themes[theme].primary}60`,
                  color: themes[theme].primary
                }}
              />
              <button
                onClick={() => setOnboardingStep(2)}
                className="w-full py-4 rounded-2xl font-bold"
                style={{
                  background: `linear-gradient(135deg, ${themes[theme].primary}, ${themes[theme].primary}dd)`,
                  boxShadow: `0 0 30px ${themes[theme].glow}`
                }}
              >
                Continue
              </button>
            </div>
          )}

          {onboardingStep === 2 && (
            <div className="space-y-6 animate-in fade-in duration-500 p-8 rounded-3xl"
              style={{
                background: 'rgba(255, 255, 255, 0.05)',
                backdropFilter: 'blur(30px)',
                border: `1px solid ${themes[theme].primary}40`,
                boxShadow: `0 0 50px ${themes[theme].glow}`
              }}>
              <h2 className="text-3xl font-bold">Daily Budget</h2>
              <input
                type="number"
                value={tempDailyBudget}
                onChange={(e) => setTempDailyBudget(e.target.value)}
                placeholder="100"
                className="w-full px-6 py-5 rounded-2xl text-3xl font-bold text-center focus:outline-none"
                style={{
                  background: 'rgba(0, 0, 0, 0.4)',
                  border: `2px solid ${themes[theme].primary}60`,
                  color: themes[theme].primary
                }}
              />
              <button
                onClick={completeOnboarding}
                className="w-full py-4 rounded-2xl font-bold flex items-center justify-center gap-2"
                style={{
                  background: `linear-gradient(135deg, ${themes[theme].primary}, ${themes[theme].primary}dd)`,
                  boxShadow: `0 0 30px ${themes[theme].glow}`
                }}
              >
                <Check className="w-5 h-5" />
                Start Tracking
              </button>
            </div>
          )}
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-indigo-950 via-purple-950 to-black text-white relative overflow-hidden">
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_30%,rgba(120,119,198,0.15),transparent_50%)]" />
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_80%_70%,rgba(168,85,247,0.1),transparent_50%)]" />

      <div className="sticky top-0 z-20 backdrop-blur-xl border-b"
        style={{
          background: 'rgba(0, 0, 0, 0.4)',
          borderColor: `${themes[theme].primary}40`
        }}>
        <div className="max-w-md mx-auto px-6 py-4 flex justify-between items-center">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-2xl flex items-center justify-center"
              style={{
                background: `linear-gradient(135deg, ${themes[theme].primary}, ${themes[theme].primary}dd)`,
                boxShadow: `0 0 20px ${themes[theme].glow}`
              }}>
              <Zap className="w-5 h-5 text-black" />
            </div>
            <h1 className="text-2xl font-bold" style={{ color: themes[theme].primary }}>
              Flowly
            </h1>
          </div>
          <select 
            value={currency}
            onChange={(e) => setCurrency(e.target.value)}
            className="px-3 py-1.5 rounded-xl text-sm font-semibold focus:outline-none"
            style={{
              background: 'rgba(255, 255, 255, 0.05)',
              backdropFilter: 'blur(10px)',
              border: `1px solid ${themes[theme].primary}40`,
              color: themes[theme].primary
            }}
          >
            {currencies.map(c => <option key={c} className="bg-gray-900">{c}</option>)}
          </select>
        </div>
      </div>

      <div className="max-w-md mx-auto pb-28 relative z-10">
        {activeTab === 'home' && (
          <div className="p-6 space-y-6">
            <div className="relative flex items-center justify-center py-10 px-4">
              <CircularProgress progress={dailyProgress} />
              <div className="absolute inset-0 flex items-center justify-center">
                <div className="text-center px-6 max-w-[140px]">
                  <div className={`font-bold mb-2 transition-all duration-500 ${
                    numberAnimate ? 'scale-110' : 'scale-100'
                  } ${Math.abs(today.balance) >= 1000 ? 'text-3xl' : Math.abs(today.balance) >= 100 ? 'text-4xl' : 'text-5xl'}`}
                    style={{ 
                      color: today.balance >= 0 ? '#10b981' : '#ef4444',
                      textShadow: `0 0 30px ${today.balance >= 0 ? 'rgba(16, 185, 129, 0.5)' : 'rgba(239, 68, 68, 0.5)'}`,
                      wordBreak: 'break-all',
                      lineHeight: '1.1'
                    }}>
                    {today.balance >= 0 ? '+' : ''}{currencySymbols[currency]}{Math.abs(today.balance).toFixed(0)}
                  </div>
                  <div className="text-xs text-gray-400 mb-2">Today's Balance</div>
                  <div className={`text-xs px-3 py-1 rounded-full inline-block ${
                    isOverBudget ? 'bg-red-500/20 text-red-400' : 'bg-emerald-500/20 text-emerald-400'
                  }`}
                    style={{
                      boxShadow: `0 0 20px ${isOverBudget ? 'rgba(239, 68, 68, 0.3)' : 'rgba(16, 185, 129, 0.3)'}`
                    }}>
                    {isOverBudget ? '🔴 Over' : '🟢 Under'}
                  </div>
                </div>
              </div>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <button
                onClick={() => {
                  setNewTransaction({...newTransaction, type: 'income'});
                  setShowAddModal(true);
                }}
                className="p-6 rounded-2xl text-center transition-all active:scale-95"
                style={{
                  background: 'rgba(16, 185, 129, 0.1)',
                  backdropFilter: 'blur(20px)',
                  border: '2px solid rgba(16, 185, 129, 0.3)',
                  boxShadow: '0 0 30px rgba(16, 185, 129, 0.2)'
                }}>
                <TrendingUp className="w-8 h-8 mx-auto mb-2 text-emerald-400" />
                <div className="font-bold text-emerald-400">Add Income</div>
              </button>
              <button
                onClick={() => {
                  setNewTransaction({...newTransaction, type: 'expense'});
                  setShowAddModal(true);
                }}
                className="p-6 rounded-2xl text-center transition-all active:scale-95"
                style={{
                  background: 'rgba(239, 68, 68, 0.1)',
                  backdropFilter: 'blur(20px)',
                  border: '2px solid rgba(239, 68, 68, 0.3)',
                  boxShadow: '0 0 30px rgba(239, 68, 68, 0.2)'
                }}>
                <TrendingDown className="w-8 h-8 mx-auto mb-2 text-red-400" />
                <div className="font-bold text-red-400">Add Expense</div>
              </button>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div className="p-4 rounded-2xl"
                style={{
                  background: 'rgba(255, 255, 255, 0.03)',
                  backdropFilter: 'blur(20px)',
                  border: `1px solid ${themes[theme].primary}30`
                }}>
                <TrendingUp className="w-5 h-5 text-emerald-400 mb-2" />
                <div className="text-2xl font-bold text-emerald-400">{currencySymbols[currency]}{today.income.toFixed(0)}</div>
                <div className="text-xs text-gray-400">Income Today</div>
              </div>
              <div className="p-4 rounded-2xl"
                style={{
                  background: 'rgba(255, 255, 255, 0.03)',
                  backdropFilter: 'blur(20px)',
                  border: `1px solid ${themes[theme].primary}30`
                }}>
                <TrendingDown className="w-5 h-5 text-red-400 mb-2" />
                <div className="text-2xl font-bold text-red-400">{currencySymbols[currency]}{today.expense.toFixed(0)}</div>
                <div className="text-xs text-gray-400">Spent Today</div>
              </div>
            </div>

            <div>
              <h3 className="text-lg font-semibold mb-3" style={{ color: themes[theme].primary }}>Today's Activity</h3>
              <div className="space-y-2">
                {getTodayTransactions().length === 0 ? (
                  <div className="p-8 rounded-2xl text-center"
                    style={{
                      background: 'rgba(255, 255, 255, 0.03)',
                      backdropFilter: 'blur(20px)',
                      border: `1px solid ${themes[theme].primary}30`
                    }}>
                    <p className="text-gray-500">No transactions today</p>
                  </div>
                ) : (
                  getTodayTransactions().map(txn => {
                    const Icon = categoryIcons[txn.category] || Sparkles;
                    return (
                      <div 
                        key={txn.id}
                        onClick={() => handleTransactionClick(txn)}
                        onTouchStart={(e) => {
                          handleLongPressStart(txn);
                          handleTouchStart(e, txn);
                        }}
                        onTouchMove={handleTouchMove}
                        onTouchEnd={() => {
                          handleLongPressEnd();
                          handleTouchEnd(txn);
                        }}
                        className={`p-4 rounded-2xl flex justify-between items-center transition-all active:scale-95 cursor-pointer ${
                          swipedTxn === txn.id ? 'scale-95 opacity-50' : ''
                        }`}
                        style={{
                          background: 'rgba(255, 255, 255, 0.03)',
                          backdropFilter: 'blur(20px)',
                          border: `1px solid ${themes[theme].primary}30`
                        }}>
                        <div className="flex items-center gap-3">
                          <div className={`w-12 h-12 rounded-xl flex items-center justify-center`}
                            style={{
                              background: txn.type === 'income' ? 'rgba(16, 185, 129, 0.2)' : 'rgba(239, 68, 68, 0.2)',
                              border: `1px solid ${txn.type === 'income' ? 'rgba(16, 185, 129, 0.4)' : 'rgba(239, 68, 68, 0.4)'}`
                            }}>
                            <Icon className={`w-6 h-6 ${txn.type === 'income' ? 'text-emerald-400' : 'text-red-400'}`} />
                          </div>
                          <div>
                            <div className="font-semibold">{txn.category}</div>
                            <div className="text-xs text-gray-500">{txn.desc || 'No note'}</div>
                          </div>
                        </div>
                        <div className={`text-xl font-bold ${txn.type === 'income' ? 'text-emerald-400' : 'text-red-400'}`}>
                          {txn.type === 'income' ? '+' : '-'}{currencySymbols[currency]}{txn.amount}
                        </div>
                      </div>
                    );
                  })
                )}
              </div>
            </div>
          </div>
        )}

        {activeTab === 'insights' && (
          <div className="p-6 space-y-6">
            <h2 className="text-2xl font-bold" style={{ color: themes[theme].primary }}>Insights</h2>
            
            <div className="p-6 rounded-3xl"
              style={{
                background: 'rgba(255, 255, 255, 0.03)',
                backdropFilter: 'blur(30px)',
                border: `1px solid ${themes[theme].primary}40`,
                boxShadow: `0 0 50px ${themes[theme].glow}`
              }}>
              <h3 className="text-sm text-gray-400 mb-4">Last 7 Days Spending</h3>
              <div className="flex items-end justify-between gap-2 h-40">
                {weeklyData.map((day, idx) => {
                  const height = maxWeekly > 0 ? (day.amount / maxWeekly) * 100 : 0;
                  return (
                    <div key={idx} className="flex-1 flex flex-col items-center gap-2">
                      <div 
                        className="w-full rounded-t-lg transition-all duration-500 relative group"
                        style={{
                          height: `${height}%`,
                          background: day.amount > 0 ? `linear-gradient(180deg, ${themes[theme].primary}, ${themes[theme].primary}80)` : 'rgba(255,255,255,0.1)',
                          boxShadow: day.amount > 0 ? `0 0 20px ${themes[theme].glow}` : 'none',
                          minHeight: '8px'
                        }}>
                        {day.amount > 0 && (
                          <div className="absolute -top-8 left-1/2 transform -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity bg-black/80 px-2 py-1 rounded text-xs whitespace-nowrap">
                            {currencySymbols[currency]}{day.amount.toFixed(0)}
                          </div>
                        )}
                      </div>
                      <span className="text-xs text-gray-500">{day.day}</span>
                    </div>
                  );
                })}
              </div>
            </div>

            <div>
              <h3 className="text-lg font-semibold mb-3" style={{ color: themes[theme].primary }}>Top Categories</h3>
              {Object.keys(weeklyStats).length === 0 ? (
                <div className="p-8 rounded-2xl text-center"
                  style={{
                    background: 'rgba(255, 255, 255, 0.03)',
                    backdropFilter: 'blur(20px)',
                    border: `1px solid ${themes[theme].primary}30`
                  }}>
                  <p className="text-gray-500">No spending data yet</p>
                  <p className="text-xs text-gray-600 mt-1">Start adding expenses</p>
                </div>
              ) : (
                <div className="flex flex-wrap gap-3">
                  {Object.entries(weeklyStats).sort((a, b) => b[1] - a[1]).slice(0, 6).map(([cat, amt]) => {
                    const Icon = categoryIcons[cat] || Sparkles;
                    return (
                      <div 
                        key={cat}
                        className="px-5 py-3 rounded-2xl flex items-center gap-2"
                        style={{
                          background: 'rgba(255, 255, 255, 0.05)',
                          backdropFilter: 'blur(20px)',
                          border: `2px solid ${themes[theme].primary}40`,
                          boxShadow: `0 0 20px ${themes[theme].glow}`
                        }}>
                        <Icon className="w-5 h-5" style={{ color: themes[theme].primary }} />
                        <div>
                          <div className="text-sm font-semibold">{cat}</div>
                          <div className="text-xs text-gray-400">{currencySymbols[currency]}{amt.toFixed(0)}</div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              )}
            </div>

            <div className="p-5 rounded-2xl"
              style={{
                background: `linear-gradient(135deg, ${themes[theme].primary}20, ${themes[theme].primary}10)`,
                backdropFilter: 'blur(20px)',
                border: `1px solid ${themes[theme].primary}60`,
                boxShadow: `0 0 30px ${themes[theme].glow}`
              }}>
              <div className="flex items-start gap-3">
                <Sparkles className="w-6 h-6 mt-1 flex-shrink-0" style={{ color: themes[theme].primary }} />
                <div>
                  <div className="font-semibold mb-1" style={{ color: themes[theme].primary }}>Smart Insight</div>
                  <p className="text-sm text-gray-300">
                    {Object.keys(weeklyStats).length > 0 
                      ? `You spent most on ${Object.entries(weeklyStats).sort((a, b) => b[1] - a[1])[0][0]} this week (${currencySymbols[currency]}${Object.entries(weeklyStats).sort((a, b) => b[1] - a[1])[0][1].toFixed(0)})`
                      : 'Start tracking expenses to see personalized insights'}
                  </p>
                </div>
              </div>
            </div>
          </div>
        )}

        {activeTab === 'profile' && (
          <div className="p-6 space-y-6">
            <div className="flex items-center gap-4 mb-4">
              <div className="w-16 h-16 rounded-2xl flex items-center justify-center"
                style={{
                  background: `linear-gradient(135deg, ${themes[theme].primary}, ${themes[theme].primary}dd)`,
                  boxShadow: `0 0 30px ${themes[theme].glow}`
                }}>
                <User className="w-8 h-8 text-black" />
              </div>
              <div>
                <h2 className="text-2xl font-bold" style={{ color: themes[theme].primary }}>Settings</h2>
                <p className="text-sm text-gray-400">Customize your experience</p>
              </div>
            </div>

            <div className="p-6 rounded-2xl"
              style={{
                background: 'rgba(255, 255, 255, 0.03)',
                backdropFilter: 'blur(30px)',
                border: `1px solid ${themes[theme].primary}40`
              }}>
              <h3 className="font-semibold mb-4" style={{ color: themes[theme].primary }}>Choose Theme</h3>
              <div className="grid grid-cols-4 gap-3">
                {Object.entries(themes).map(([key, value]) => (
                  <button
                    key={key}
                    onClick={() => setTheme(key)}
                    className={`w-full aspect-square rounded-2xl transition-all ${
                      theme === key ? 'scale-110' : 'scale-100'
                    }`}
                    style={{
                      background: `linear-gradient(135deg, ${value.primary}, ${value.primary}dd)`,
                      boxShadow: theme === key ? `0 0 30px ${value.glow}` : 'none',
                      border: theme === key ? `2px solid ${value.primary}` : 'none'
                    }}
                  />
                ))}
              </div>
            </div>
            
            <div className="p-6 rounded-2xl space-y-5"
              style={{
                background: 'rgba(255, 255, 255, 0.03)',
                backdropFilter: 'blur(30px)',
                border: `1px solid ${themes[theme].primary}40`
              }}>
              <div>
                <label className="text-sm text-gray-400 block mb-2">Monthly Income</label>
                <input
                  type="number"
                  value={monthlyIncome}
                  onChange={(e) => setMonthlyIncome(parseFloat(e.target.value) || 0)}
                  className="w-full px-4 py-4 rounded-xl text-2xl font-bold focus:outline-none"
                  style={{
                    background: 'rgba(0, 0, 0, 0.4)',
                    border: `2px solid ${themes[theme].primary}40`,
                    color: themes[theme].primary
                  }}
                />
              </div>
              
              <div>
                <label className="text-sm text-gray-400 block mb-2">Daily Budget Goal</label>
                <input
                  type="number"
                  value={dailyBudget}
                  onChange={(e) => setDailyBudget(parseFloat(e.target.value) || 0)}
                  className="w-full px-4 py-4 rounded-xl text-2xl font-bold focus:outline-none"
                  style={{
                    background: 'rgba(0, 0, 0, 0.4)',
                    border: `2px solid ${themes[theme].primary}40`,
                    color: themes[theme].primary
                  }}
                />
              </div>
            </div>

            <div className="p-6 rounded-2xl"
              style={{
                background: `linear-gradient(135deg, ${themes[theme].primary}20, ${themes[theme].primary}10)`,
                backdropFilter: 'blur(20px)',
                border: `1px solid ${themes[theme].primary}60`,
                boxShadow: `0 0 30px ${themes[theme].glow}`
              }}>
              <div className="flex items-center gap-2 mb-3">
                <Zap className="w-5 h-5" style={{ color: themes[theme].primary }} />
                <div className="font-semibold" style={{ color: themes[theme].primary }}>Pro Tips</div>
              </div>
              <ul className="text-sm text-gray-300 space-y-2">
                <li>• Tap transactions to edit instantly</li>
                <li>• Swipe left to delete</li>
                <li>• Long press for quick actions</li>
                <li>• Change theme anytime above</li>
              </ul>
            </div>
          </div>
        )}
      </div>

      {showAddModal && (
        <div className="fixed inset-0 z-50 flex items-end animate-in fade-in duration-200"
          style={{ background: 'rgba(0, 0, 0, 0.8)', backdropFilter: 'blur(10px)' }}>
          <div className="w-full max-w-md mx-auto rounded-t-3xl p-6 animate-in slide-in-from-bottom duration-300"
            style={{
              background: 'rgba(0, 0, 0, 0.9)',
              backdropFilter: 'blur(40px)',
              border: `2px solid ${themes[theme].primary}60`,
              borderBottom: 'none',
              boxShadow: `0 -10px 50px ${themes[theme].glow}`
            }}>
            <div className="flex justify-between items-center mb-6">
              <h3 className="text-2xl font-bold" style={{ color: themes[theme].primary }}>
                Add {newTransaction.type === 'income' ? 'Income' : 'Expense'}
              </h3>
              <button 
                onClick={() => setShowAddModal(false)} 
                className="w-12 h-12 rounded-xl flex items-center justify-center transition-all active:scale-95"
                style={{
                  background: 'rgba(255, 255, 255, 0.05)',
                  border: `1px solid ${themes[theme].primary}40`
                }}>
                <X className="w-6 h-6" />
              </button>
            </div>

            <div className="space-y-4">
              <input
                type="number"
                value={newTransaction.amount}
                onChange={(e) => setNewTransaction({...newTransaction, amount: e.target.value})}
                placeholder="0.00"
                autoFocus
                className="w-full px-6 py-5 rounded-2xl text-4xl font-bold text-center focus:outline-none"
                style={{
                  background: 'rgba(0, 0, 0, 0.6)',
                  border: `2px solid ${themes[theme].primary}`,
                  color: themes[theme].primary,
                  boxShadow: `0 0 30px ${themes[theme].glow}`
                }}
              />

              <div className="grid grid-cols-4 gap-3">
                {categories.map(cat => {
                  const Icon = categoryIcons[cat];
                  return (
                    <button
                      key={cat}
                      onClick={() => setNewTransaction({...newTransaction, category: cat})}
                      className={`p-3 rounded-xl flex flex-col items-center gap-2 transition-all active:scale-95 ${
                        newTransaction.category === cat ? 'scale-110' : 'scale-100'
                      }`}
                      style={{
                        background: newTransaction.category === cat 
                          ? `linear-gradient(135deg, ${themes[theme].primary}40, ${themes[theme].primary}20)`
                          : 'rgba(255, 255, 255, 0.05)',
                        backdropFilter: 'blur(10px)',
                        border: `1px solid ${newTransaction.category === cat ? themes[theme].primary : 'rgba(255,255,255,0.1)'}`,
                        boxShadow: newTransaction.category === cat ? `0 0 20px ${themes[theme].glow}` : 'none'
                      }}>
                      <Icon className={`w-5 h-5 ${newTransaction.category === cat ? '' : 'text-gray-400'}`}
                        style={{ color: newTransaction.category === cat ? themes[theme].primary : undefined }} />
                      <span className="text-xs">{cat}</span>
                    </button>
                  );
                })}
              </div>

              <input
                type="text"
                value={newTransaction.desc}
                onChange={(e) => setNewTransaction({...newTransaction, desc: e.target.value})}
                placeholder="Add a note (optional)"
                className="w-full px-4 py-4 rounded-xl focus:outline-none"
                style={{
                  background: 'rgba(255, 255, 255, 0.05)',
                  backdropFilter: 'blur(10px)',
                  border: `1px solid ${themes[theme].primary}40`,
                  color: 'white'
                }}
              />

              <button
                onClick={addTransaction}
                disabled={!newTransaction.amount}
                className="w-full py-5 rounded-2xl font-bold text-lg flex items-center justify-center gap-2 active:scale-95 transition-all disabled:opacity-50"
                style={{
                  background: `linear-gradient(135deg, ${themes[theme].primary}, ${themes[theme].primary}dd)`,
                  boxShadow: `0 0 40px ${themes[theme].glow}`
                }}>
                <Check className="w-6 h-6" />
                Add Transaction
              </button>
            </div>
          </div>
        </div>
      )}

      {showEditModal && selectedTransaction && (
        <div className="fixed inset-0 z-50 flex items-end animate-in fade-in duration-200"
          style={{ background: 'rgba(0, 0, 0, 0.8)', backdropFilter: 'blur(10px)' }}>
          <div className="w-full max-w-md mx-auto rounded-t-3xl p-6 animate-in slide-in-from-bottom duration-300"
            style={{
              background: 'rgba(0, 0, 0, 0.9)',
              backdropFilter: 'blur(40px)',
              border: `2px solid ${themes[theme].primary}60`,
              borderBottom: 'none',
              boxShadow: `0 -10px 50px ${themes[theme].glow}`
            }}>
            <div className="flex justify-between items-center mb-6">
              <h3 className="text-2xl font-bold" style={{ color: themes[theme].primary }}>Edit Transaction</h3>
              <button 
                onClick={() => setShowEditModal(false)} 
                className="w-12 h-12 rounded-xl flex items-center justify-center transition-all active:scale-95"
                style={{
                  background: 'rgba(255, 255, 255, 0.05)',
                  border: `1px solid ${themes[theme].primary}40`
                }}>
                <X className="w-6 h-6" />
              </button>
            </div>

            <div className="space-y-4">
              <input
                type="number"
                value={selectedTransaction.amount}
                onChange={(e) => setSelectedTransaction({...selectedTransaction, amount: parseFloat(e.target.value) || 0})}
                className="w-full px-6 py-5 rounded-2xl text-4xl font-bold text-center focus:outline-none"
                style={{
                  background: 'rgba(0, 0, 0, 0.6)',
                  border: `2px solid ${themes[theme].primary}`,
                  color: themes[theme].primary,
                  boxShadow: `0 0 30px ${themes[theme].glow}`
                }}
              />

              <select
                value={selectedTransaction.category}
                onChange={(e) => setSelectedTransaction({...selectedTransaction, category: e.target.value})}
                className="w-full px-4 py-4 rounded-xl text-lg focus:outline-none"
                style={{
                  background: 'rgba(255, 255, 255, 0.05)',
                  backdropFilter: 'blur(10px)',
                  border: `1px solid ${themes[theme].primary}40`,
                  color: 'white'
                }}>
                {categories.map(cat => <option key={cat} className="bg-gray-900">{cat}</option>)}
              </select>

              <input
                type="text"
                value={selectedTransaction.desc}
                onChange={(e) => setSelectedTransaction({...selectedTransaction, desc: e.target.value})}
                placeholder="Description"
                className="w-full px-4 py-4 rounded-xl focus:outline-none"
                style={{
                  background: 'rgba(255, 255, 255, 0.05)',
                  backdropFilter: 'blur(10px)',
                  border: `1px solid ${themes[theme].primary}40`,
                  color: 'white'
                }}
              />

              <button
                onClick={editTransaction}
                className="w-full py-5 rounded-2xl font-bold text-lg flex items-center justify-center gap-2 active:scale-95 transition-all"
                style={{
                  background: `linear-gradient(135deg, ${themes[theme].primary}, ${themes[theme].primary}dd)`,
                  boxShadow: `0 0 40px ${themes[theme].glow}`
                }}>
                <Check className="w-5 h-5" />
                Save Changes
              </button>
            </div>
          </div>
        </div>
      )}

      {showDeleteConfirm && selectedTransaction && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-6 animate-in fade-in duration-200"
          style={{ background: 'rgba(0, 0, 0, 0.9)', backdropFilter: 'blur(20px)' }}>
          <div className="w-full max-w-sm rounded-3xl p-6 animate-in zoom-in duration-300"
            style={{
              background: 'rgba(0, 0, 0, 0.9)',
              backdropFilter: 'blur(40px)',
              border: '2px solid rgba(239, 68, 68, 0.5)',
              boxShadow: '0 0 50px rgba(239, 68, 68, 0.3)'
            }}>
            <div className="text-center mb-6">
              <div className="w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4"
                style={{
                  background: 'rgba(239, 68, 68, 0.2)',
                  border: '2px solid rgba(239, 68, 68, 0.5)'
                }}>
                <Trash2 className="w-10 h-10 text-red-400" />
              </div>
              <h3 className="text-2xl font-bold mb-2">Delete Transaction?</h3>
              <p className="text-gray-400">
                {selectedTransaction.category} - {currencySymbols[currency]}{selectedTransaction.amount}
              </p>
            </div>
            
            <div className="flex gap-3">
              <button
                onClick={() => {
                  setShowDeleteConfirm(false);
                  setSelectedTransaction(null);
                }}
                className="flex-1 py-4 rounded-xl font-semibold active:scale-95 transition-all"
                style={{
                  background: 'rgba(255, 255, 255, 0.05)',
                  border: `1px solid ${themes[theme].primary}40`
                }}>
                Cancel
              </button>
              <button
                onClick={() => deleteTransaction(selectedTransaction.id)}
                className="flex-1 py-4 rounded-xl font-bold flex items-center justify-center gap-2 active:scale-95 transition-all"
                style={{
                  background: 'linear-gradient(135deg, #ef4444, #dc2626)',
                  boxShadow: '0 0 30px rgba(239, 68, 68, 0.5)'
                }}>
                <Trash2 className="w-4 h-4" />
                Delete
              </button>
            </div>
          </div>
        </div>
      )}

      <button
        onClick={() => setShowAddModal(true)}
        className="fixed bottom-28 right-6 w-16 h-16 rounded-2xl flex items-center justify-center active:scale-95 transition-all z-30"
        style={{
          background: `linear-gradient(135deg, ${themes[theme].primary}, ${themes[theme].primary}dd)`,
          boxShadow: `0 0 40px ${themes[theme].glow}, 0 10px 30px rgba(0,0,0,0.5)`
        }}>
        <Plus className="w-8 h-8 text-white" />
      </button>

      <div className="fixed bottom-0 left-0 right-0 z-40 border-t"
        style={{
          background: 'rgba(0, 0, 0, 0.8)',
          backdropFilter: 'blur(30px)',
          borderColor: `${themes[theme].primary}40`
        }}>
        <div className="max-w-md mx-auto flex justify-around py-3">
          {[
            { id: 'home', icon: Home, label: 'Home' },
            { id: 'insights', icon: BarChart3, label: 'Insights' },
            { id: 'profile', icon: Settings, label: 'Settings' }
          ].map(tab => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`flex flex-col items-center gap-1 px-8 py-3 rounded-2xl transition-all active:scale-95`}
              style={{
                color: activeTab === tab.id ? themes[theme].primary : '#6b7280',
                background: activeTab === tab.id ? `${themes[theme].primary}20` : 'transparent',
                boxShadow: activeTab === tab.id ? `0 0 20px ${themes[theme].glow}` : 'none'
              }}>
              <tab.icon className="w-6 h-6" />
              <span className="text-xs font-semibold">{tab.label}</span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};

export default Flowly;