import React, { useState, useEffect, useMemo, useRef } from 'react';
import { initializeApp } from 'firebase/app';
import { 
  getFirestore, 
  collection, 
  doc, 
  setDoc, 
  onSnapshot, 
  query, 
  addDoc, 
  deleteDoc, 
  updateDoc 
} from 'firebase/firestore';
import { 
  getAuth, 
  signInAnonymously, 
  signInWithCustomToken, 
  onAuthStateChanged 
} from 'firebase/auth';
import { 
  LayoutDashboard, 
  TrendingUp, 
  TrendingDown, 
  Settings, 
  PlusCircle, 
  Trash2, 
  Edit3, 
  X, 
  Wallet, 
  HandCoins, 
  History,
  Cloud,
  User
} from 'lucide-react';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  Filler
} from 'chart.js';
import { Line } from 'react-chartjs-2';

// Register ChartJS
ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  Filler
);

// --- Firebase Config ---
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 : 'fintrack-pro-v1';

export default function App() {
  const [user, setUser] = useState(null);
  const [activeTab, setActiveTab] = useState('dashboard');
  const [transactions, setTransactions] = useState([]);
  const [categories, setCategories] = useState([]);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modalMode, setModalMode] = useState('transaction');
  const [editingItem, setEditingItem] = useState(null);
  const [dateFilter, setDateFilter] = useState('all');

  const [formData, setFormData] = useState({
    amount: '', description: '', categoryId: '', type: 'expense',
    isRepayment: false, date: new Date().toISOString().split('T')[0]
  });

  const [catFormData, setCatFormData] = useState({
    name: '', type: 'expense', color: '#6366f1'
  });

  // --- Auth Logic ---
  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 (err) {
        console.error("Auth Error:", err);
      }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, setUser);
    return () => unsubscribe();
  }, []);

  // --- Data Sync ---
  useEffect(() => {
    if (!user) return;

    // Sync Categories
    const catCol = collection(db, 'artifacts', appId, 'users', user.uid, 'categories');
    const unsubCats = onSnapshot(catCol, (snapshot) => {
      const cats = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      // Initialize default categories if none exist
      if (cats.length === 0) {
        const defaults = [
          { name: 'Salary', type: 'income', color: '#10b981' },
          { name: 'Food', type: 'expense', color: '#ef4444' },
          { name: 'Rent', type: 'expense', color: '#f59e0b' },
          { name: 'Lending', type: 'debt', color: '#3b82f6' },
          { name: 'Borrowing', type: 'debt', color: '#8b5cf6' },
        ];
        defaults.forEach(d => addDoc(catCol, d));
      }
      setCategories(cats);
    }, (err) => console.error("Firestore Error:", err));

    // Sync Transactions
    const txCol = collection(db, 'artifacts', appId, 'users', user.uid, 'transactions');
    const unsubTxs = onSnapshot(txCol, (snapshot) => {
      const txs = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      setTransactions(txs);
    }, (err) => console.error("Firestore Error:", err));

    return () => { unsubCats(); unsubTxs(); };
  }, [user]);

  // --- Calculations ---
  const filteredTransactions = useMemo(() => {
    const sorted = [...transactions].sort((a, b) => new Date(b.date) - new Date(a.date));
    if (dateFilter === 'all') return sorted;
    const now = new Date();
    return sorted.filter(tx => {
      const txDate = new Date(tx.date);
      if (dateFilter === 'week') {
        const weekAgo = new Date();
        weekAgo.setDate(now.getDate() - 7);
        return txDate >= weekAgo;
      }
      return true;
    });
  }, [transactions, dateFilter]);

  const totals = useMemo(() => {
    return filteredTransactions.reduce((acc, curr) => {
      const cat = categories.find(c => c.id === curr.categoryId);
      const val = parseFloat(curr.amount) || 0;
      const type = curr.type || cat?.type;

      if (type === 'income') acc.income += val;
      else if (type === 'expense') acc.expense += val;
      else if (type === 'debt') {
        const isBorrowing = cat?.name.toLowerCase().includes('borrow');
        if (curr.isRepayment) {
          if (isBorrowing) acc.debt -= val; else acc.lent -= val;
        } else {
          if (isBorrowing) acc.debt += val; else acc.lent += val;
        }
      }
      return acc;
    }, { income: 0, expense: 0, debt: 0, lent: 0 });
  }, [filteredTransactions, categories]);

  // --- Chart Data ---
  const chartData = useMemo(() => {
    const sorted = [...filteredTransactions].sort((a, b) => new Date(a.date) - new Date(b.date));
    const labels = [...new Set(sorted.map(t => t.date))];
    const incomeData = labels.map(date => 
      sorted.filter(t => t.date === date && (t.type === 'income')).reduce((s, c) => s + c.amount, 0)
    );
    const expenseData = labels.map(date => 
      sorted.filter(t => t.date === date && (t.type === 'expense')).reduce((s, c) => s + c.amount, 0)
    );

    return {
      labels,
      datasets: [
        { label: 'Income', data: incomeData, borderColor: '#10b981', backgroundColor: 'rgba(16, 185, 129, 0.1)', fill: true, tension: 0.4 },
        { label: 'Expenses', data: expenseData, borderColor: '#ef4444', backgroundColor: 'rgba(239, 68, 68, 0.1)', fill: true, tension: 0.4 }
      ]
    };
  }, [filteredTransactions]);

  // --- Actions ---
  const handleTxSubmit = async (e) => {
    e.preventDefault();
    if (!user) return;
    const txData = { ...formData, amount: parseFloat(formData.amount) };
    const txCol = collection(db, 'artifacts', appId, 'users', user.uid, 'transactions');
    
    if (editingItem) {
      await updateDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'transactions', editingItem.id), txData);
    } else {
      await addDoc(txCol, txData);
    }
    setIsModalOpen(false);
  };

  const handleCatSubmit = async (e) => {
    e.preventDefault();
    if (!user) return;
    const catCol = collection(db, 'artifacts', appId, 'users', user.uid, 'categories');
    
    if (editingItem) {
      await updateDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'categories', editingItem.id), catFormData);
    } else {
      await addDoc(catCol, catFormData);
    }
    setIsModalOpen(false);
  };

  const openModal = (mode, item = null) => {
    setModalMode(mode);
    setEditingItem(item);
    if (mode === 'transaction') {
      setFormData(item || { 
        amount: '', description: '', type: 'expense', 
        categoryId: categories.find(c => c.type === 'expense')?.id || '',
        isRepayment: false, date: new Date().toISOString().split('T')[0] 
      });
    } else {
      setCatFormData(item || { name: '', type: 'expense', color: '#6366f1' });
    }
    setIsModalOpen(true);
  };

  if (!user) return <div className="h-screen flex items-center justify-center bg-slate-50 font-bold text-slate-400 animate-pulse">Initializing Secure Session...</div>;

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900 pb-24 md:pb-0 md:pl-64 flex flex-col">
      {/* Sidebar */}
      <aside className="fixed left-0 top-0 bottom-0 w-64 bg-white border-r border-slate-200 hidden md:flex flex-col p-6 space-y-8 z-30">
        <div className="flex items-center space-x-3 px-2">
          <div className="bg-indigo-600 p-2 rounded-xl text-white shadow-lg shadow-indigo-200"><Wallet size={24} /></div>
          <span className="text-xl font-black tracking-tighter">FINTRACK <span className="text-indigo-600">PRO</span></span>
        </div>
        
        <nav className="flex-1 space-y-1">
          <button onClick={() => setActiveTab('dashboard')} className={`w-full flex items-center space-x-3 px-4 py-3 rounded-xl transition-all ${activeTab === 'dashboard' ? 'bg-indigo-50 text-indigo-600' : 'text-slate-500 hover:bg-slate-50'}`}>
            <LayoutDashboard size={20} /><span className="font-bold text-sm">Dashboard</span>
          </button>
          <button onClick={() => setActiveTab('ledger')} className={`w-full flex items-center space-x-3 px-4 py-3 rounded-xl transition-all ${activeTab === 'ledger' ? 'bg-indigo-50 text-indigo-600' : 'text-slate-500 hover:bg-slate-50'}`}>
            <TrendingUp size={20} /><span className="font-bold text-sm">Ledger</span>
          </button>
          <button onClick={() => setActiveTab('settings')} className={`w-full flex items-center space-x-3 px-4 py-3 rounded-xl transition-all ${activeTab === 'settings' ? 'bg-indigo-50 text-indigo-600' : 'text-slate-500 hover:bg-slate-50'}`}>
            <Settings size={20} /><span className="font-bold text-sm">Settings</span>
          </button>
        </nav>

        <div className="bg-slate-50 p-4 rounded-2xl border border-slate-100">
          <div className="flex items-center space-x-2 mb-2 text-indigo-600">
            <Cloud size={14} />
            <span className="text-[10px] font-black uppercase tracking-widest">Server Sync Active</span>
          </div>
          <p className="text-[10px] text-slate-400 font-medium break-all mb-1">UID: {user.uid}</p>
          <div className="flex items-center space-x-2 text-[10px] text-slate-500">
             <div className="w-2 h-2 rounded-full bg-emerald-500"></div>
             <span>Authenticated</span>
          </div>
        </div>
      </aside>

      {/* Main content */}
      <main className="flex-1 p-4 md:p-10 max-w-6xl mx-auto w-full">
        <header className="flex flex-col md:flex-row justify-between items-start md:items-center mb-10 gap-4">
          <div>
            <h1 className="text-3xl font-black tracking-tight text-slate-800 capitalize">{activeTab}</h1>
            <p className="text-slate-400 text-sm font-medium">Manage your financial footprint in real-time.</p>
          </div>
          <button onClick={() => openModal('transaction')} className="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-2xl flex items-center space-x-2 transition-all shadow-xl shadow-indigo-100 active:scale-95 font-bold text-sm">
            <PlusCircle size={20} /><span>RECORD ENTRY</span>
          </button>
        </header>

        {activeTab === 'dashboard' && (
          <div className="space-y-8">
            {/* Stats */}
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
              {[
                { label: 'Balance', val: totals.income - totals.expense, color: 'bg-indigo-600', icon: Wallet },
                { label: 'Income', val: totals.income, color: 'bg-emerald-500', icon: TrendingUp },
                { label: 'Expenses', val: totals.expense, color: 'bg-rose-500', icon: TrendingDown },
                { label: 'Money Lent', val: totals.lent, color: 'bg-blue-500', icon: HandCoins },
              ].map(stat => (
                <div key={stat.label} className="bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm flex items-center space-x-4">
                  <div className={`p-3 rounded-2xl ${stat.color} text-white shadow-lg shadow-indigo-50`}><stat.icon size={24} /></div>
                  <div>
                    <p className="text-[10px] font-black uppercase tracking-widest text-slate-400">{stat.label}</p>
                    <p className="text-xl font-black">₹{stat.val.toLocaleString()}</p>
                  </div>
                </div>
              ))}
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
              {/* Chart */}
              <div className="lg:col-span-2 bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm min-h-[400px]">
                <div className="flex justify-between items-center mb-8">
                  <h3 className="font-black text-slate-800 tracking-tight">CASH FLOW</h3>
                  <div className="flex bg-slate-100 p-1 rounded-xl">
                    {['all', 'week'].map(f => (
                      <button key={f} onClick={() => setDateFilter(f)} className={`px-4 py-1.5 rounded-lg text-[10px] font-black uppercase transition-all ${dateFilter === f ? 'bg-white shadow-sm text-indigo-600' : 'text-slate-400'}`}>{f}</button>
                    ))}
                  </div>
                </div>
                <div className="h-64"><Line data={chartData} options={{ responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } }} /></div>
              </div>

              {/* Debt View */}
              <div className="bg-slate-900 text-white rounded-[2.5rem] p-8 shadow-2xl relative overflow-hidden flex flex-col justify-between">
                <div className="relative z-10">
                  <h3 className="text-indigo-400 text-[10px] font-black uppercase tracking-[0.2em] mb-2">Liability Portfolio</h3>
                  <p className="text-4xl font-black mb-1">₹{totals.debt.toLocaleString()}</p>
                  <p className="text-slate-500 text-xs font-medium">Total active borrowings</p>
                </div>
                
                <div className="relative z-10 space-y-4">
                  <div className="h-3 bg-slate-800 rounded-full overflow-hidden">
                    <div className="h-full bg-indigo-500 transition-all duration-700" style={{ width: totals.debt > 0 ? '60%' : '0%' }}></div>
                  </div>
                  <div className="flex justify-between text-[10px] font-black uppercase text-slate-500">
                    <span>Payback Status</span>
                    <span>{totals.debt > 0 ? 'Action Required' : 'Cleared'}</span>
                  </div>
                </div>

                <div className="absolute -bottom-10 -right-10 opacity-5 rotate-12"><HandCoins size={200} /></div>
              </div>
            </div>

            {/* Recent Activity */}
            <div className="bg-white rounded-[2.5rem] border border-slate-100 p-8 shadow-sm">
              <h3 className="font-black text-slate-800 mb-6">LATEST RECORDS</h3>
              <div className="space-y-4">
                {filteredTransactions.slice(0, 5).map(tx => {
                  const cat = categories.find(c => c.id === tx.categoryId);
                  return (
                    <div key={tx.id} className="flex items-center justify-between p-4 hover:bg-slate-50 rounded-2xl transition-all border border-transparent hover:border-slate-100 group">
                      <div className="flex items-center space-x-4">
                        <div className="w-12 h-12 rounded-2xl flex items-center justify-center text-white font-bold" style={{ backgroundColor: cat?.color || '#ccc' }}>
                          {tx.isRepayment ? <History size={20} /> : <TrendingUp size={20} />}
                        </div>
                        <div>
                          <p className="font-black text-sm">{tx.description}</p>
                          <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{cat?.name} • {tx.date}</p>
                        </div>
                      </div>
                      <div className="text-right">
                        <p className={`font-black text-sm ${tx.type === 'income' ? 'text-emerald-500' : 'text-rose-500'}`}>
                          {tx.isRepayment ? '↓' : (tx.type === 'income' ? '+' : '-')} ₹{tx.amount.toLocaleString()}
                        </p>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        )}

        {activeTab === 'ledger' && (
          <div className="bg-white rounded-[2rem] border border-slate-200 overflow-hidden shadow-sm">
            <table className="w-full text-left">
              <thead className="bg-slate-50 border-b border-slate-200">
                <tr>
                  <th className="p-5 text-[10px] font-black uppercase tracking-widest text-slate-400">Date</th>
                  <th className="p-5 text-[10px] font-black uppercase tracking-widest text-slate-400">Description</th>
                  <th className="p-5 text-[10px] font-black uppercase tracking-widest text-slate-400">Category</th>
                  <th className="p-5 text-[10px] font-black uppercase tracking-widest text-slate-400 text-right">Amount</th>
                  <th className="p-5 text-[10px] font-black uppercase tracking-widest text-slate-400 text-center">Action</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100">
                {filteredTransactions.map(tx => {
                   const cat = categories.find(c => c.id === tx.categoryId);
                   return (
                    <tr key={tx.id} className="hover:bg-slate-50/50 transition-colors">
                      <td className="p-5 text-sm font-bold text-slate-400">{tx.date}</td>
                      <td className="p-5 font-black text-sm">
                        {tx.description}
                        {tx.isRepayment && <span className="ml-2 bg-indigo-100 text-indigo-600 text-[8px] px-1.5 py-0.5 rounded font-black tracking-widest uppercase">Repayment</span>}
                      </td>
                      <td className="p-5">
                        <span className="px-3 py-1 rounded-lg text-[10px] font-black uppercase" style={{ backgroundColor: (cat?.color || '#eee') + '20', color: cat?.color }}>{cat?.name}</span>
                      </td>
                      <td className={`p-5 text-sm font-black text-right ${tx.type === 'income' ? 'text-emerald-500' : 'text-rose-500'}`}>
                        ₹{tx.amount.toLocaleString()}
                      </td>
                      <td className="p-5 flex justify-center space-x-2">
                        <button onClick={() => openModal('transaction', tx)} className="p-2 text-slate-400 hover:text-indigo-600"><Edit3 size={16} /></button>
                        <button onClick={async () => {
                          if (!confirm("Delete record?")) return;
                          await deleteDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'transactions', tx.id));
                        }} className="p-2 text-slate-400 hover:text-rose-600"><Trash2 size={16} /></button>
                      </td>
                    </tr>
                   );
                })}
              </tbody>
            </table>
          </div>
        )}

        {activeTab === 'settings' && (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {categories.map(cat => (
              <div key={cat.id} className="bg-white p-6 rounded-[2rem] border border-slate-200 flex items-center justify-between shadow-sm">
                <div className="flex items-center space-x-4">
                  <div className="w-10 h-10 rounded-xl flex items-center justify-center text-white" style={{ backgroundColor: cat.color }}><Settings size={18} /></div>
                  <div>
                    <p className="font-black text-sm">{cat.name}</p>
                    <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{cat.type}</p>
                  </div>
                </div>
                <div className="flex space-x-1">
                  <button onClick={() => openModal('category', cat)} className="p-2 text-slate-400 hover:text-indigo-600"><Edit3 size={16} /></button>
                  <button onClick={async () => {
                    await deleteDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'categories', cat.id));
                  }} className="p-2 text-slate-400 hover:text-rose-600"><Trash2 size={16} /></button>
                </div>
              </div>
            ))}
            <button onClick={() => openModal('category')} className="border-2 border-dashed border-slate-200 rounded-[2rem] p-6 flex flex-col items-center justify-center text-slate-300 hover:text-indigo-600 hover:border-indigo-200 transition-all">
              <PlusCircle size={32} className="mb-2" />
              <span className="text-[10px] font-black uppercase tracking-widest">New Category</span>
            </button>
          </div>
        )}
      </main>

      {/* Modal */}
      {isModalOpen && (
        <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-md z-50 flex items-center justify-center p-4">
          <div className="bg-white rounded-[3rem] w-full max-w-md p-10 shadow-2xl relative animate-in zoom-in duration-200">
            <button onClick={() => setIsModalOpen(false)} className="absolute right-10 top-10 text-slate-300 hover:text-slate-500"><X size={24} /></button>
            <h2 className="text-2xl font-black mb-8 text-slate-800 tracking-tight">{editingItem ? 'Edit' : 'Record'} {modalMode}</h2>

            {modalMode === 'transaction' ? (
              <form onSubmit={handleTxSubmit} className="space-y-6">
                <div className="flex bg-slate-100 p-1 rounded-2xl">
                  {['income', 'expense', 'debt'].map(type => (
                    <button key={type} type="button" onClick={() => setFormData({...formData, type, isRepayment: false, categoryId: categories.find(c => c.type === type)?.id || ''})} className={`flex-1 py-3 text-[10px] font-black uppercase tracking-widest rounded-xl transition-all ${formData.type === type ? 'bg-white shadow-sm text-indigo-600' : 'text-slate-400'}`}>
                      {type}
                    </button>
                  ))}
                </div>

                {formData.type === 'debt' && (
                   <div className="flex space-x-2 bg-indigo-50/50 p-2 rounded-2xl">
                     <button type="button" onClick={() => setFormData({...formData, isRepayment: false})} className={`flex-1 py-2 text-[10px] font-black rounded-xl transition-all ${!formData.isRepayment ? 'bg-indigo-600 text-white' : 'text-slate-400'}`}>NEW DEBT</button>
                     <button type="button" onClick={() => setFormData({...formData, isRepayment: true})} className={`flex-1 py-2 text-[10px] font-black rounded-xl transition-all ${formData.isRepayment ? 'bg-indigo-600 text-white' : 'text-slate-400'}`}>PAYBACK</button>
                   </div>
                )}

                <div className="space-y-1">
                  <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-2">Amount</label>
                  <input type="number" required value={formData.amount} onChange={(e) => setFormData({...formData, amount: e.target.value})} className="w-full bg-slate-50 border border-slate-100 rounded-2xl p-4 font-black text-xl outline-none focus:ring-2 focus:ring-indigo-100" placeholder="0.00" />
                </div>

                <div className="space-y-1">
                  <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-2">Description</label>
                  <input type="text" required value={formData.description} onChange={(e) => setFormData({...formData, description: e.target.value})} className="w-full bg-slate-50 border border-slate-100 rounded-2xl p-4 font-bold outline-none focus:ring-2 focus:ring-indigo-100" placeholder="Lunch, Salary, etc." />
                </div>

                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-1">
                    <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-2">Category</label>
                    <select value={formData.categoryId} onChange={(e) => setFormData({...formData, categoryId: e.target.value})} className="w-full bg-slate-50 border border-slate-100 rounded-2xl p-4 font-bold outline-none text-sm">
                      {categories.filter(c => c.type === formData.type).map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
                    </select>
                  </div>
                  <div className="space-y-1">
                    <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-2">Date</label>
                    <input type="date" value={formData.date} onChange={(e) => setFormData({...formData, date: e.target.value})} className="w-full bg-slate-50 border border-slate-100 rounded-2xl p-4 font-bold outline-none text-sm" />
                  </div>
                </div>

                <button type="submit" className="w-full bg-indigo-600 text-white font-black py-5 rounded-[2rem] shadow-xl shadow-indigo-100 hover:bg-indigo-700 active:scale-95 transition-all text-xs uppercase tracking-widest">COMMIT TO SERVER</button>
              </form>
            ) : (
              <form onSubmit={handleCatSubmit} className="space-y-6">
                <div className="space-y-1">
                  <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-2">Name</label>
                  <input type="text" required value={catFormData.name} onChange={(e) => setCatFormData({...catFormData, name: e.target.value})} className="w-full bg-slate-50 border border-slate-100 rounded-2xl p-4 font-bold outline-none" placeholder="Rent, Bonus, etc." />
                </div>
                <div className="space-y-1">
                  <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-2">Type</label>
                  <select value={catFormData.type} onChange={(e) => setCatFormData({...catFormData, type: e.target.value})} className="w-full bg-slate-50 border border-slate-100 rounded-2xl p-4 font-bold outline-none">
                    <option value="income">Income</option>
                    <option value="expense">Expense</option>
                    <option value="debt">Debt</option>
                  </select>
                </div>
                <div className="flex items-center justify-between p-4 bg-slate-50 rounded-2xl border border-slate-100">
                  <span className="text-xs font-black uppercase text-slate-500">Theme Color</span>
                  <input type="color" value={catFormData.color} onChange={(e) => setCatFormData({...catFormData, color: e.target.value})} className="h-10 w-20 rounded-xl cursor-pointer bg-transparent border-none" />
                </div>
                <button type="submit" className="w-full bg-indigo-600 text-white font-black py-5 rounded-[2rem] shadow-xl shadow-indigo-100 text-xs uppercase tracking-widest">SAVE CATEGORY</button>
              </form>
            )}
          </div>
        </div>
      )}

      {/* Mobile Nav */}
      <nav className="fixed bottom-0 left-0 right-0 bg-white/80 backdrop-blur-lg border-t border-slate-100 flex md:hidden justify-around p-4 z-40">
        {[
          { id: 'dashboard', icon: LayoutDashboard },
          { id: 'ledger', icon: TrendingUp },
          { id: 'settings', icon: Settings },
        ].map(item => (
          <button key={item.id} onClick={() => setActiveTab(item.id)} className={`p-4 rounded-[1.5rem] transition-all ${activeTab === item.id ? 'bg-indigo-600 text-white shadow-xl shadow-indigo-200 scale-110' : 'text-slate-400'}`}>
            <item.icon size={22} />
          </button>
        ))}
      </nav>
    </div>
  );
}