import React, { useState, useMemo, useRef, useEffect } from 'react';
import { initializeApp } from 'firebase/app';
import { 
  getAuth, 
  signInWithCustomToken, 
  signInAnonymously, 
  onAuthStateChanged 
} from 'firebase/auth';
import { 
  getFirestore, 
  doc, 
  setDoc, 
  getDoc, 
  collection, 
  onSnapshot, 
  updateDoc, 
  deleteDoc,
  query
} from 'firebase/firestore';
import { 
  Wallet, 
  Car, 
  Home, 
  Utensils, 
  TrendingUp, 
  Calendar, 
  CreditCard, 
  CheckCircle2,
  ChevronRight,
  ArrowRight,
  RefreshCw,
  Zap,
  Building2,
  ShieldCheck,
  ShoppingBag,
  Scissors,
  Hammer,
  Gamepad2,
  BarChart3,
  PlusCircle,
  History,
  ChevronDown,
  Camera,
  Loader2,
  FileText,
  AlertCircle,
  ArrowUpRight,
  Plus,
  X,
  Cloud,
  Fuel,
  Layers
} from 'lucide-react';

// --- Firebase Configuration ---
const firebaseConfig = JSON.parse(__firebase_config);
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'wealthsimple-budget-tracker';

const App = () => {
  // User & Auth State
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  // Constants
  const BI_WEEKLY_INCOME = 1865;
  const MONTHLY_AVG_INCOME = (BI_WEEKLY_INCOME * 26) / 12;
  const apiKey = ""; 

  const MONTH_NAMES = [
    "January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December"
  ];

  // Budget State
  const [availableYears, setAvailableYears] = useState([2026]);
  const [selectedYear, setSelectedYear] = useState(2026);
  const [months, setMonths] = useState(['March 2026', 'April 2026']);
  const [selectedMonth, setSelectedMonth] = useState('April 2026');
  const [monthlyData, setMonthlyData] = useState({});
  const [customFixedExpenses, setCustomFixedExpenses] = useState([]);
  const [savingsGoal, setSavingsGoal] = useState(20000);
  const [isPostJuly, setIsPostJuly] = useState(false);

  // UI States
  const [view, setView] = useState('dashboard');
  const [isScanning, setIsScanning] = useState(false);
  const [scanError, setScanError] = useState(null);
  const [showAddBillModal, setShowAddBillModal] = useState(false);
  const [newBill, setNewBill] = useState({ name: '', amount: '', category: 'Bills' });
  const fileInputRef = useRef(null);

  // 1. Authentication Lifecycle
  useEffect(() => {
    const initAuth = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          await signInWithCustomToken(auth, __initial_auth_token);
        } else {
          await signInAnonymously(auth);
        }
      } catch (error) {
        console.error("Auth error:", error);
      }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      setUser(user);
      if (!user) setLoading(false);
    });
    return () => unsubscribe();
  }, []);

  // 2. Data Synchronization Lifecycle
  useEffect(() => {
    if (!user) return;

    const userRootPath = `/artifacts/${appId}/users/${user.uid}`;
    
    // Listen to Settings
    const settingsUnsub = onSnapshot(doc(db, userRootPath, 'settings', 'global'), (snapshot) => {
      if (snapshot.exists()) {
        const data = snapshot.data();
        if (data.savingsGoal) setSavingsGoal(data.savingsGoal);
        if (data.isPostJuly !== undefined) setIsPostJuly(data.isPostJuly);
        if (data.availableYears) setAvailableYears(data.availableYears);
        if (data.months) setMonths(data.months);
      } else {
        setDoc(doc(db, userRootPath, 'settings', 'global'), {
          savingsGoal: 20000,
          isPostJuly: false,
          availableYears: [2026],
          months: ['March 2026', 'April 2026']
        });
      }
    }, (error) => console.error("Settings listener error:", error));

    // Listen to Monthly Data
    const dataUnsub = onSnapshot(collection(db, userRootPath, 'monthlyData'), (snapshot) => {
      const data = {};
      snapshot.forEach(doc => { data[doc.id] = doc.data(); });
      setMonthlyData(data);
      setLoading(false);
    }, (error) => console.error("Monthly data listener error:", error));

    // Listen to Fixed Expenses
    const fixedUnsub = onSnapshot(collection(db, userRootPath, 'fixedExpenses'), (snapshot) => {
      const bills = [];
      snapshot.forEach(doc => { bills.push({ id: doc.id, ...doc.data() }); });
      setCustomFixedExpenses(bills);
    }, (error) => console.error("Fixed expenses listener error:", error));

    return () => {
      settingsUnsub();
      dataUnsub();
      fixedUnsub();
    };
  }, [user]);

  // Firestore Helpers
  const handleVariableChange = async (key, value) => {
    if (!user) return;
    const numericValue = parseInt(value) || 0;
    const monthRef = doc(db, `artifacts/${appId}/users/${user.uid}/monthlyData`, selectedMonth);
    await setDoc(monthRef, { [key]: numericValue }, { merge: true });
  };

  const addNewMonth = async () => {
    if (!user) return;
    const lastMonthStr = months[months.length - 1];
    const [mName, yStr] = lastMonthStr.split(' ');
    let monthIdx = MONTH_NAMES.indexOf(mName);
    let year = parseInt(yStr);
    monthIdx++;
    if (monthIdx > 11) { monthIdx = 0; year++; }
    const nextMonthName = `${MONTH_NAMES[monthIdx]} ${year}`;
    if (months.includes(nextMonthName)) return;

    const newYears = availableYears.includes(year) ? availableYears : [...availableYears, year].sort();
    const newMonthsList = [...months, nextMonthName];
    
    await updateDoc(doc(db, `artifacts/${appId}/users/${user.uid}/settings/global`), {
      availableYears: newYears,
      months: newMonthsList
    });
    
    await setDoc(doc(db, `artifacts/${appId}/users/${user.uid}/monthlyData`, nextMonthName), currentSpending || {});
    setSelectedMonth(nextMonthName);
    setSelectedYear(year);
  };

  const handleAddBill = async () => {
    if (!user || !newBill.name || !newBill.amount) return;
    const id = Date.now().toString();
    await setDoc(doc(db, `artifacts/${appId}/users/${user.uid}/fixedExpenses`, id), {
      name: newBill.name,
      amount: parseFloat(newBill.amount),
      category: newBill.category,
      type: 'user'
    });
    setNewBill({ name: '', amount: '', category: 'Bills' });
    setShowAddBillModal(false);
  };

  const removeBill = async (id) => {
    if (!user) return;
    await deleteDoc(doc(db, `artifacts/${appId}/users/${user.uid}/fixedExpenses`, id));
  };

  // AI Scanning Logic (Support Multiple Files)
  const scanStatement = async (e) => {
    const files = Array.from(e.target.files);
    if (!files.length || !user) return;
    
    setIsScanning(true);
    setScanError(null);
    
    try {
      // Process all images to Base64
      const imageParts = await Promise.all(files.map(async (file) => {
        const base64 = await new Promise((resolve) => {
          const reader = new FileReader();
          reader.onload = () => resolve(reader.result.split(',')[1]);
          reader.readAsDataURL(file);
        });
        return { inlineData: { mimeType: file.type, data: base64 } };
      }));

      const prompt = `You are an expert financial assistant. Analyze the provided credit card statement image(s). 
      If multiple images are provided, sum the totals across ALL statements.
      
      Extract and categorize spending into these exact keys:
      - 'dining': Coffee, restaurants, cafes, fast food.
      - 'shopping': General retail, Vaughan Mills, clothing, gifts.
      - 'personalCare': Hair salons, pharmacies, grooming.
      - 'homeHardware': Home Depot, Canadian Tire, hardware stores.
      - 'leisure': Entertainment, golf, games, movies.
      - 'subscriptions': Netflix, Google, YouTube, Discord, mobile apps.
      - 'transportation': Gas, Shell, Esso, parking, transit.

      Return ONLY a raw JSON object with these keys and their total numeric values (rounded to nearest dollar). 
      If a category has no transactions, set it to 0. 
      Important: Sum the values from all images before returning the object.`;

      const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          contents: [{ parts: [{ text: prompt }, ...imageParts] }],
          generationConfig: { responseMimeType: "application/json" }
        })
      });

      const result = await response.json();
      const parsedData = JSON.parse(result.candidates?.[0]?.content?.parts?.[0]?.text);
      
      // ADDITIVE LOGIC: Add newly scanned data to current data
      const updatedMonthlyData = { ...currentSpending };
      Object.keys(parsedData).forEach(key => {
        updatedMonthlyData[key] = (updatedMonthlyData[key] || 0) + parsedData[key];
      });

      await setDoc(doc(db, `artifacts/${appId}/users/${user.uid}/monthlyData`, selectedMonth), updatedMonthlyData, { merge: true });
    } catch (err) {
      console.error("Scan Error:", err);
      setScanError("AI Analysis failed. Make sure images are clear and try again.");
    } finally {
      setIsScanning(false);
      if (fileInputRef.current) fileInputRef.current.value = ""; // Clear input for next scan
    }
  };

  // Derived Values
  const filteredMonths = months.filter(m => m.includes(selectedYear.toString()));
  const currentSpending = monthlyData[selectedMonth] || { dining: 0, shopping: 0, personalCare: 0, homeHardware: 0, leisure: 0, subscriptions: 0, transportation: 0 };
  const prevMonthIndex = months.indexOf(selectedMonth) - 1;
  const prevSpending = prevMonthIndex >= 0 ? monthlyData[months[prevMonthIndex]] : null;

  const fixedExpenses = useMemo(() => {
    const carPaymentIsDone = isPostJuly || (selectedYear >= 2026 && MONTH_NAMES.indexOf(selectedMonth.split(' ')[0]) >= 7);
    
    const systemBills = [
      { id: 'car', name: 'Car Payment', amount: carPaymentIsDone ? 0 : 600, category: 'Auto', type: 'system' },
      { id: 'savings', name: 'Mandatory Savings', amount: 400, category: 'Savings', type: 'system' },
      { id: 'insurance', name: 'Auto Insurance', amount: 165, category: 'Auto', type: 'system' },
      { id: 'alectra', name: 'Alectra', amount: 174.36, category: 'Utilities', type: 'system' },
      { id: 'enbridge', name: 'Enbridge', amount: 115, category: 'Utilities', type: 'system' },
      { id: 'enercare', name: 'Enercare', amount: 53.17, category: 'Utilities', type: 'system' },
      { id: 'bell', name: 'Bell Mobility', amount: 112.99, category: 'Bills', type: 'system' },
      { id: 'public', name: 'Public Mobile', amount: 45.20, category: 'Bills', type: 'system' },
    ];
    
    return [...systemBills, ...customFixedExpenses].map(expense => {
        let icon = <CreditCard />;
        if (expense.category === 'Auto') icon = <Car />;
        if (expense.category === 'Utilities') icon = <Home />;
        if (expense.category === 'Savings') icon = <TrendingUp />;
        return { ...expense, icon };
    });
  }, [isPostJuly, selectedMonth, selectedYear, customFixedExpenses]);

  const totalFixed = fixedExpenses.reduce((acc, curr) => acc + curr.amount, 0);
  const totalVariable = Object.values(currentSpending).reduce((acc, curr) => acc + curr, 0);
  
  const totalMonthlyExpenses = totalFixed + totalVariable;
  const monthlySurplus = MONTHLY_AVG_INCOME - totalMonthlyExpenses;
  const monthsToGoal = monthlySurplus > 0 ? savingsGoal / monthlySurplus : Infinity;

  const perPaycheckSurplus = (monthlySurplus * 12) / 26;
  const perPaycheckBills = (totalFixed * 12) / 26;

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-[#FBF9F7]">
        <div className="text-center space-y-4">
          <Loader2 className="w-12 h-12 animate-spin mx-auto text-black" />
          <p className="text-xs font-black uppercase tracking-widest text-[#666666]">Syncing Finances...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen p-4 md:p-8 font-sans transition-all duration-300 bg-[#FBF9F7] text-black">
      <div className="max-w-6xl mx-auto space-y-8">
        
        {/* Navigation Bar */}
        <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
          <div className="flex bg-white rounded-full p-1 border border-[#E5E2DE] shadow-sm">
            {['dashboard', 'trends', 'automation'].map((v) => (
              <button 
                key={v}
                onClick={() => setView(v)}
                className={`px-6 py-2 rounded-full text-sm font-semibold capitalize transition-all ${view === v ? 'bg-black text-white' : 'text-[#666666] hover:text-black'}`}
              >
                {v}
              </button>
            ))}
          </div>

          <div className="flex items-center gap-3">
             <div className="flex items-center gap-2 bg-white px-4 py-2 rounded-full border border-[#E5E2DE]">
              <select value={selectedYear} onChange={(e) => setSelectedYear(parseInt(e.target.value))} className="bg-transparent text-sm font-bold outline-none cursor-pointer">
                {availableYears.map(y => <option key={y} value={y}>{y}</option>)}
              </select>
            </div>
            <div className="flex items-center gap-2 bg-white px-4 py-2 rounded-full border border-[#E5E2DE]">
              <History className="w-4 h-4 text-[#666666]" />
              <select value={selectedMonth} onChange={(e) => setSelectedMonth(e.target.value)} className="bg-transparent text-sm font-bold outline-none cursor-pointer">
                {filteredMonths.map(m => <option key={m} value={m}>{m.split(' ')[0]}</option>)}
              </select>
              <button onClick={addNewMonth} className="hover:text-black transition-colors">
                <PlusCircle className="w-4 h-4" />
              </button>
            </div>
          </div>
        </div>

        {/* Hero Section */}
        <header className="flex flex-col md:flex-row md:items-end justify-between gap-6 pb-4 border-b border-[#E5E2DE]">
          <div>
            <h1 className="text-4xl font-bold tracking-tight mb-2">{selectedMonth} Summary</h1>
            <p className="text-[#666666] text-lg font-medium">Monthly Cash In: <span className="text-black font-bold">${MONTHLY_AVG_INCOME.toLocaleString(undefined, { maximumFractionDigits: 0 })}</span></p>
          </div>
          
          <div className="flex gap-3">
            <button 
              onClick={() => fileInputRef.current?.click()}
              disabled={isScanning}
              className="flex items-center gap-3 px-8 py-4 rounded-full font-bold text-sm bg-black text-white hover:bg-zinc-800 transition-all disabled:opacity-50 shadow-xl shadow-zinc-200"
            >
              {isScanning ? <Loader2 className="w-5 h-5 animate-spin" /> : <Camera className="w-5 h-5" />}
              {isScanning ? 'Processing Batch...' : 'AI Batch Scan'}
            </button>
            <input 
              type="file" 
              ref={fileInputRef} 
              className="hidden" 
              accept="image/*" 
              multiple 
              onChange={scanStatement} 
            />
          </div>
        </header>

        {scanError && (
          <div className="bg-red-50 text-red-700 px-6 py-4 rounded-3xl border border-red-100 flex items-center gap-3 animate-in fade-in slide-in-from-top-4">
            <AlertCircle className="w-5 h-5 flex-shrink-0" />
            <p className="text-sm font-semibold">{scanError}</p>
          </div>
        )}

        {view === 'dashboard' && (
          <div className="animate-in fade-in duration-500 space-y-8">
            {/* Stats Cards */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div className="bg-white p-8 rounded-[40px] border border-[#E5E2DE] shadow-sm relative group overflow-hidden">
                <div className="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity">
                    <TrendingUp className="w-24 h-24" />
                </div>
                <p className="text-[#666666] text-xs font-black uppercase tracking-widest mb-2">Projected Surplus</p>
                <div className="flex items-baseline gap-2">
                    <p className="text-5xl font-black tracking-tighter">${monthlySurplus.toLocaleString(undefined, { maximumFractionDigits: 0 })}</p>
                    <ArrowUpRight className="w-6 h-6 text-[#00835F]" />
                </div>
              </div>
              <div className="bg-white p-8 rounded-[40px] border border-[#E5E2DE] shadow-sm">
                <p className="text-[#666666] text-xs font-black uppercase tracking-widest mb-2">Bills & Mandatory</p>
                <p className="text-4xl font-black tracking-tight">${totalFixed.toLocaleString(undefined, { maximumFractionDigits: 0 })}</p>
              </div>
              <div className="bg-white p-8 rounded-[40px] border border-[#E5E2DE] shadow-sm">
                <p className="text-[#666666] text-xs font-black uppercase tracking-widest mb-2">Statement Spending</p>
                <p className="text-4xl font-black tracking-tight">${totalVariable.toLocaleString(undefined, { maximumFractionDigits: 0 })}</p>
              </div>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
              {/* Dynamic Spending Controls */}
              <section className="bg-white p-10 rounded-[48px] border border-[#E5E2DE]">
                <div className="flex items-center justify-between mb-10">
                  <div className="flex items-center gap-3">
                     <Layers className="w-6 h-6 text-[#666666]" />
                     <h2 className="text-2xl font-bold">Variable Categories</h2>
                  </div>
                  <div className="bg-[#F2EFED] px-4 py-1.5 rounded-full text-[10px] font-black uppercase tracking-widest flex items-center gap-2">
                    <Cloud className="w-3 h-3 text-[#00835F]" />
                    Cloud Synced
                  </div>
                </div>
                
                <div className="space-y-8">
                  {[
                    { key: 'dining', label: 'Dining & Coffee', icon: <Utensils />, max: 1000 },
                    { key: 'transportation', label: 'Gas & Parking', icon: <Fuel />, max: 500 },
                    { key: 'shopping', label: 'Misc Shopping', icon: <ShoppingBag />, max: 800 },
                    { key: 'personalCare', label: 'Personal Care', icon: <Scissors />, max: 500 },
                    { key: 'homeHardware', label: 'Home & Hardware', icon: <Hammer />, max: 600 },
                    { key: 'leisure', label: 'Leisure & Fun', icon: <Gamepad2 />, max: 500 },
                    { key: 'subscriptions', label: 'Subscriptions', icon: <CreditCard />, max: 300 }
                  ].map((item) => (
                    <div key={item.key} className="space-y-4">
                      <div className="flex justify-between items-center text-[#666666]">
                        <label className="text-sm font-bold flex items-center gap-3">
                           {React.cloneElement(item.icon, { size: 16 })} {item.label}
                        </label>
                        <span className="text-xl font-black text-black">${currentSpending[item.key] || 0}</span>
                      </div>
                      <input 
                        type="range" min="0" max={item.max} step="5" 
                        value={currentSpending[item.key] || 0} 
                        onChange={(e) => handleVariableChange(item.key, e.target.value)} 
                        className="w-full h-1.5 bg-[#F2EFED] rounded-full appearance-none cursor-pointer accent-black transition-all hover:h-2" 
                      />
                    </div>
                  ))}
                </div>
              </section>

              {/* Fixed Expenses Tracking */}
              <section className="bg-white p-10 rounded-[48px] border border-[#E5E2DE] h-fit">
                    <div className="flex items-center justify-between mb-8">
                        <h2 className="text-2xl font-bold">Fixed & Essential</h2>
                        <button 
                            onClick={() => setShowAddBillModal(true)}
                            className="bg-black text-white p-3 rounded-full hover:scale-110 transition-transform shadow-lg shadow-zinc-200"
                        >
                            <Plus className="w-5 h-5" />
                        </button>
                    </div>

                    <div className="space-y-1 divide-y divide-[#F2EFED]">
                        {fixedExpenses.map((expense, idx) => (
                        <div key={idx} className="group flex items-center justify-between py-5 hover:bg-[#FBF9F7] px-4 -mx-4 rounded-2xl transition-all">
                            <div className="flex items-center gap-5">
                                <div className="p-3.5 bg-[#F2EFED] rounded-2xl text-black">
                                    {React.cloneElement(expense.icon, { size: 20, strokeWidth: 2.5 })}
                                </div>
                                <div>
                                    <p className={`font-bold text-lg ${expense.amount === 0 ? 'text-[#AAAAAA] line-through' : 'text-black'}`}>{expense.name}</p>
                                    <p className="text-[10px] uppercase font-black text-[#BBBBBB] tracking-widest">{expense.category}</p>
                                </div>
                            </div>
                            <div className="flex items-center gap-4 text-right">
                                <p className={`text-xl font-black ${expense.amount === 0 ? 'text-[#00835F]' : 'text-black'}`}>
                                    {expense.amount === 0 ? 'PAID' : `$${expense.amount.toLocaleString()}`}
                                </p>
                                {expense.type === 'user' && (
                                    <button 
                                        onClick={() => removeBill(expense.id)}
                                        className="text-[#DDDDDD] hover:text-red-500 transition-colors"
                                    >
                                        <X className="w-4 h-4" />
                                    </button>
                                )}
                            </div>
                        </div>
                        ))}
                    </div>
              </section>
            </div>
          </div>
        )}

        {view === 'trends' && (
          <div className="animate-in fade-in duration-500 bg-white p-12 rounded-[56px] border border-[#E5E2DE] shadow-sm">
            <h2 className="text-3xl font-black tracking-tight mb-2">Trend Analysis</h2>
            <p className="text-[#666666] font-medium mb-12 italic">Comparing {selectedMonth} performance with your historical patterns.</p>

            <div className="space-y-12">
              {Object.keys(currentSpending).map((key) => {
                const current = currentSpending[key] || 0;
                const baseline = prevSpending ? (prevSpending[key] || 0) : 150;
                const diff = current - baseline;
                const label = key.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase());

                return (
                  <div key={key} className="space-y-4">
                    <div className="flex justify-between items-end text-[10px] font-black tracking-[0.15em] uppercase text-[#999999]">
                      <span>{label}</span>
                      <div className={diff > 0 ? 'text-red-500 bg-red-50 px-3 py-1 rounded-full' : 'text-[#00835F] bg-emerald-50 px-3 py-1 rounded-full'}>
                        {diff > 0 ? `+ $${diff}` : `- $${Math.abs(diff)}`}
                      </div>
                    </div>
                    <div className="relative h-4 bg-[#F2EFED] rounded-full overflow-hidden">
                      <div className="absolute h-full bg-[#E5E2DE] z-0 transition-all duration-1000" style={{ width: `${Math.min(100, (baseline / 800) * 100)}%` }} />
                      <div className={`h-full z-10 transition-all duration-1000 shadow-[0_0_15px_rgba(0,0,0,0.1)] ${current > baseline ? 'bg-black' : 'bg-[#00835F]'}`} style={{ width: `${Math.min(100, (current / 800) * 100)}%` }} />
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        )}

        {view === 'automation' && (
          <div className="animate-in fade-in duration-500 space-y-8">
            <div className="bg-black text-white p-16 rounded-[64px] relative overflow-hidden shadow-2xl shadow-zinc-400">
                <div className="relative z-10 space-y-8">
                    <div className="w-16 h-16 bg-[#00835F] rounded-3xl flex items-center justify-center text-white mb-8">
                         <Zap className="w-8 h-8 fill-current" />
                    </div>
                    <h2 className="text-6xl font-black tracking-tighter">Automate Wealth</h2>
                    <p className="text-zinc-400 text-xl max-w-2xl leading-relaxed font-medium">Wealthsimple flows ensure you pay yourself first. Your bi-weekly strategy for ${BI_WEEKLY_INCOME.toLocaleString()}:</p>
                    
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-8 pt-8">
                        <div className="bg-zinc-900/50 backdrop-blur-sm p-10 rounded-[40px] border border-zinc-800 flex flex-col justify-between">
                            <p className="text-zinc-500 text-xs font-black uppercase tracking-widest mb-6">Bi-Weekly Bill Sweep</p>
                            <div>
                                <p className="text-6xl font-black text-white tracking-tighter mb-2">${perPaycheckBills.toFixed(0)}</p>
                                <p className="text-zinc-400 text-sm italic">Transfer to your dedicated Bills Account on payday.</p>
                            </div>
                        </div>
                        <div className="bg-zinc-900/50 backdrop-blur-sm p-10 rounded-[40px] border border-zinc-800 flex flex-col justify-between">
                            <p className="text-[#00835F] text-xs font-black uppercase tracking-widest mb-6">Invest / Save Sweep</p>
                            <div>
                                <p className="text-6xl font-black text-white tracking-tighter mb-2">${perPaycheckSurplus.toFixed(0)}</p>
                                <p className="text-zinc-400 text-sm italic">Direct deposit to TFSA/FHSA every payday.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
          </div>
        )}

        {/* Add Bill Modal */}
        {showAddBillModal && (
          <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-md animate-in fade-in duration-300">
            <div className="bg-white w-full max-w-md p-10 rounded-[48px] shadow-2xl border border-[#E5E2DE] space-y-8">
              <div className="flex justify-between items-center">
                <h3 className="text-3xl font-black tracking-tighter">New Bill</h3>
                <button onClick={() => setShowAddBillModal(false)} className="bg-[#F2EFED] p-2 rounded-full text-black hover:bg-black hover:text-white transition-colors">
                  <X className="w-5 h-5" />
                </button>
              </div>
              <div className="space-y-5">
                <div className="space-y-2">
                    <label className="text-[10px] font-black uppercase tracking-widest text-[#999999] ml-1">Title</label>
                    <input type="text" placeholder="e.g., Apple Music" value={newBill.name} onChange={(e) => setNewBill({...newBill, name: e.target.value})} className="w-full bg-[#FBF9F7] border border-[#E5E2DE] px-6 py-4 rounded-[24px] outline-none focus:border-black font-bold text-lg" />
                </div>
                <div className="space-y-2">
                    <label className="text-[10px] font-black uppercase tracking-widest text-[#999999] ml-1">Monthly Amount</label>
                    <input type="number" placeholder="0.00" value={newBill.amount} onChange={(e) => setNewBill({...newBill, amount: e.target.value})} className="w-full bg-[#FBF9F7] border border-[#E5E2DE] px-6 py-4 rounded-[24px] outline-none focus:border-black font-bold text-lg" />
                </div>
                <div className="space-y-2">
                    <label className="text-[10px] font-black uppercase tracking-widest text-[#999999] ml-1">Category</label>
                    <select value={newBill.category} onChange={(e) => setNewBill({...newBill, category: e.target.value})} className="w-full bg-[#FBF9F7] border border-[#E5E2DE] px-6 py-4 rounded-[24px] outline-none focus:border-black font-bold text-lg appearance-none">
                      <option value="Bills">General Bill</option>
                      <option value="Auto">Auto / Transport</option>
                      <option value="Utilities">Home Utilities</option>
                      <option value="Savings">Savings/Investments</option>
                    </select>
                </div>
              </div>
              <button onClick={handleAddBill} className="w-full bg-black text-white font-black py-5 rounded-full hover:scale-[1.02] active:scale-[0.98] transition-transform text-lg shadow-xl shadow-zinc-200">
                Confirm Bill
              </button>
            </div>
          </div>
        )}

        <footer className="py-16 border-t border-[#E5E2DE] flex flex-col md:flex-row justify-between items-center gap-8 text-[#999999] text-[10px] font-black uppercase tracking-[0.2em] text-center md:text-left">
          <p>© 2026 Wealth Management OS</p>
          <div className="flex items-center gap-8">
             <div className="flex items-center gap-2">
                <Cloud className="w-4 h-4 text-[#00835F]" />
                <span>Cloud Secure</span>
            </div>
            <div className="flex items-center gap-2">
                <div className="w-2.5 h-2.5 bg-[#00835F] rounded-full animate-pulse"></div>
                <span className="text-black">Sync Live</span>
            </div>
          </div>
        </footer>
      </div>
    </div>
  );
};

export default App;