import React, { useState, useEffect } from 'react';
import { Users, Plus, TrendingUp, DollarSign, Settings, LogOut, Home, Clock, Tag, Check, X, Menu, ChevronRight, Receipt, Search } from 'lucide-react';

// API Configuration - UPDATE THIS with your actual domain
const API_URL = 'https://https://justintrend.in/.com/api.php'; //

// API helper functions
const api = {
  async call(action, data = null, method = 'GET') {
    try {
      const options = {
        method,
        headers: { 'Content-Type': 'application/json' }
      };
      
      if (data && method !== 'GET') {
        options.body = JSON.stringify(data);
      }
      
      const url = method === 'GET' && data 
        ? `${API_URL}?action=${action}&${new URLSearchParams(data).toString()}`
        : `${API_URL}?action=${action}`;
      
      const response = await fetch(url, options);
      const result = await response.json();
      
      if (!result.success) {
        throw new Error(result.error || 'API request failed');
      }
      
      return result;
    } catch (error) {
      console.error('API Error:', error);
      throw error;
    }
  },
  
  // Auth
  register: (name, email, password) => 
    api.call('register', { name, email, password }, 'POST'),
  login: (email, password) => 
    api.call('login', { email, password }, 'POST'),
  
  // Household
  getHousehold: (userId) => 
    api.call('get_household', { user_id: userId }),
  addMember: (userId, name) => 
    api.call('add_member', { user_id: userId, name }, 'POST'),
  removeMember: (memberId) => 
    api.call('remove_member', { member_id: memberId }, 'POST'),
  
  // Expenses
  getExpenses: (userId, settled = null) => {
    const params = { user_id: userId };
    if (settled !== null) params.settled = settled ? '1' : '0';
    return api.call('get_expenses', params);
  },
  addExpense: (userId, expense) => 
    api.call('add_expense', { user_id: userId, ...expense }, 'POST'),
  settleExpense: (expenseId) => 
    api.call('settle_expense', { expense_id: expenseId }, 'POST'),
  settleAll: (userId) => 
    api.call('settle_all', { user_id: userId }, 'POST'),
  
  // Merchants
  getMerchants: (category = null) => {
    const params = {};
    if (category) params.category = category;
    return api.call('get_merchants', params);
  },
  searchMerchants: (query) => 
    api.call('search_merchants', { query }),
};

const CATEGORIES = [
  { name: 'Groceries', icon: '🛒', color: '#10b981' },
  { name: 'Utilities', icon: '⚡', color: '#f59e0b' },
  { name: 'Rent', icon: '🏠', color: '#8b5cf6' },
  { name: 'Entertainment', icon: '🎬', color: '#ec4899' },
  { name: 'Transport', icon: '🚗', color: '#3b82f6' },
  { name: 'Health', icon: '💊', color: '#ef4444' },
  { name: 'Shopping', icon: '🛍️', color: '#14b8a6' },
  { name: 'Food & Dining', icon: '🍽️', color: '#f97316' },
  { name: 'Other', icon: '📌', color: '#6366f1' },
];

export default function HomeExpenseApp() {
  const [currentUser, setCurrentUser] = useState(null);
  const [view, setView] = useState('login');
  const [showMenu, setShowMenu] = useState(false);
  const [loading, setLoading] = useState(false);
  
  // Auth states
  const [authForm, setAuthForm] = useState({ email: '', password: '', name: '' });
  const [authError, setAuthError] = useState('');
  
  // App states
  const [household, setHousehold] = useState([]);
  const [expenses, setExpenses] = useState([]);
  const [merchants, setMerchants] = useState([]);
  const [newMember, setNewMember] = useState('');
  const [showAddExpense, setShowAddExpense] = useState(false);
  const [showAddMember, setShowAddMember] = useState(false);
  const [showSettleUp, setShowSettleUp] = useState(false);
  
  // Expense form
  const [expenseForm, setExpenseForm] = useState({
    description: '',
    merchant: '',
    amount: '',
    category: 'Groceries',
    paid_by: '',
    split_among: [],
  });
  
  // Merchant search
  const [merchantSearch, setMerchantSearch] = useState('');
  const [merchantSuggestions, setMerchantSuggestions] = useState([]);
  const [showMerchantDropdown, setShowMerchantDropdown] = useState(false);

  // Load user from session storage
  useEffect(() => {
    const savedUser = sessionStorage.getItem('currentUser');
    if (savedUser) {
      const user = JSON.parse(savedUser);
      setCurrentUser(user);
      loadUserData(user.id);
    }
  }, []);

  const loadUserData = async (userId) => {
    try {
      setLoading(true);
      const [householdRes, expensesRes, merchantsRes] = await Promise.all([
        api.getHousehold(userId),
        api.getExpenses(userId, false),
        api.getMerchants()
      ]);
      
      setHousehold(householdRes.members || []);
      setExpenses(expensesRes.expenses || []);
      setMerchants(merchantsRes.merchants || []);
      setView('dashboard');
    } catch (error) {
      console.error('Error loading data:', error);
      alert('Error loading data: ' + error.message);
    } finally {
      setLoading(false);
    }
  };

  // Search merchants
  const handleMerchantSearch = async (query) => {
    setMerchantSearch(query);
    setExpenseForm({ ...expenseForm, merchant: query });
    
    if (query.length < 2) {
      setMerchantSuggestions([]);
      setShowMerchantDropdown(false);
      return;
    }
    
    try {
      const result = await api.searchMerchants(query);
      setMerchantSuggestions(result.merchants || []);
      setShowMerchantDropdown(true);
    } catch (error) {
      console.error('Error searching merchants:', error);
    }
  };

  const selectMerchant = (merchant) => {
    setMerchantSearch(merchant.name);
    setExpenseForm({ ...expenseForm, merchant: merchant.name });
    setShowMerchantDropdown(false);
  };

  // Auth functions
  const handleRegister = async () => {
    if (!authForm.name || !authForm.email || !authForm.password) {
      setAuthError('Please fill all fields');
      return;
    }
    
    try {
      setLoading(true);
      const result = await api.register(authForm.name, authForm.email, authForm.password);
      
      sessionStorage.setItem('currentUser', JSON.stringify(result.user));
      setCurrentUser(result.user);
      setAuthError('');
      await loadUserData(result.user.id);
    } catch (error) {
      setAuthError(error.message);
    } finally {
      setLoading(false);
    }
  };

  const handleLogin = async () => {
    if (!authForm.email || !authForm.password) {
      setAuthError('Please fill all fields');
      return;
    }
    
    try {
      setLoading(true);
      const result = await api.login(authForm.email, authForm.password);
      
      sessionStorage.setItem('currentUser', JSON.stringify(result.user));
      setCurrentUser(result.user);
      setAuthError('');
      await loadUserData(result.user.id);
    } catch (error) {
      setAuthError(error.message);
    } finally {
      setLoading(false);
    }
  };

  const handleLogout = () => {
    sessionStorage.removeItem('currentUser');
    setCurrentUser(null);
    setView('login');
    setAuthForm({ email: '', password: '', name: '' });
    setHousehold([]);
    setExpenses([]);
  };

  // Household functions
  const addHouseholdMember = async () => {
    if (!newMember.trim()) return;
    
    try {
      setLoading(true);
      const result = await api.addMember(currentUser.id, newMember.trim());
      
      setHousehold([...household, result.member]);
      setNewMember('');
      setShowAddMember(false);
    } catch (error) {
      alert('Error adding member: ' + error.message);
    } finally {
      setLoading(false);
    }
  };

  const removeMember = async (memberId) => {
    if (!confirm('Are you sure you want to remove this member?')) return;
    
    try {
      setLoading(true);
      await api.removeMember(memberId);
      setHousehold(household.filter(m => m.id !== memberId));
    } catch (error) {
      alert('Error removing member: ' + error.message);
    } finally {
      setLoading(false);
    }
  };

  // Expense functions
  const addExpense = async () => {
    if (!expenseForm.description || !expenseForm.amount || !expenseForm.paid_by || expenseForm.split_among.length === 0) {
      alert('Please fill all required fields');
      return;
    }
    
    try {
      setLoading(true);
      const expenseData = {
        description: expenseForm.description,
        merchant: expenseForm.merchant || '',
        amount: parseFloat(expenseForm.amount),
        category: expenseForm.category,
        paid_by: parseInt(expenseForm.paid_by),
        split_among: expenseForm.split_among.map(id => parseInt(id)),
      };
      
      await api.addExpense(currentUser.id, expenseData);
      
      // Reload expenses
      const result = await api.getExpenses(currentUser.id, false);
      setExpenses(result.expenses || []);
      
      setExpenseForm({
        description: '',
        merchant: '',
        amount: '',
        category: 'Groceries',
        paid_by: '',
        split_among: [],
      });
      setMerchantSearch('');
      setShowAddExpense(false);
    } catch (error) {
      alert('Error adding expense: ' + error.message);
    } finally {
      setLoading(false);
    }
  };

  const toggleSplitMember = (memberId) => {
    const current = expenseForm.split_among;
    if (current.includes(memberId)) {
      setExpenseForm({ ...expenseForm, split_among: current.filter(id => id !== memberId) });
    } else {
      setExpenseForm({ ...expenseForm, split_among: [...current, memberId] });
    }
  };

  const settleAllExpenses = async () => {
    try {
      setLoading(true);
      await api.settleAll(currentUser.id);
      
      // Reload expenses
      const result = await api.getExpenses(currentUser.id, false);
      setExpenses(result.expenses || []);
      setShowSettleUp(false);
    } catch (error) {
      alert('Error settling expenses: ' + error.message);
    } finally {
      setLoading(false);
    }
  };

  // Calculate balances
  const calculateBalances = () => {
    const balances = {};
    household.forEach(member => {
      balances[member.id] = { name: member.name, balance: 0 };
    });

    expenses.filter(e => !e.settled).forEach(expense => {
      const shareAmount = expense.amount / expense.split_among.length;
      
      expense.split_among.forEach(memberId => {
        if (memberId !== expense.paid_by) {
          balances[memberId].balance -= shareAmount;
          balances[expense.paid_by].balance += shareAmount;
        }
      });
    });

    return Object.values(balances).filter(b => Math.abs(b.balance) > 0.01);
  };

  const getTotalExpenses = () => expenses.filter(e => !e.settled).reduce((sum, e) => sum + e.amount, 0);
  const getYourShare = () => {
    const userMember = household.find(m => m.name === currentUser?.name);
    if (!userMember) return 0;
    
    return expenses.filter(e => !e.settled && e.split_among.includes(userMember.id))
      .reduce((sum, e) => sum + (e.amount / e.split_among.length), 0);
  };

  const balances = calculateBalances();

  if (loading && !currentUser) {
    return (
      <div style={{
        minHeight: '100vh',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      }}>
        <div style={{ color: 'white', fontSize: '20px' }}>Loading...</div>
      </div>
    );
  }

  if (!currentUser) {
    return (
      <div style={{
        minHeight: '100vh',
        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        padding: '20px',
        fontFamily: '"DM Sans", -apple-system, sans-serif'
      }}>
        <div style={{
          background: 'white',
          borderRadius: '24px',
          padding: '40px',
          maxWidth: '400px',
          width: '100%',
          boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
        }}>
          <div style={{ textAlign: 'center', marginBottom: '32px' }}>
            <div style={{
              width: '64px',
              height: '64px',
              background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
              borderRadius: '16px',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              margin: '0 auto 16px',
            }}>
              <Home size={32} color="white" />
            </div>
            <h1 style={{
              fontSize: '28px',
              fontWeight: '700',
              color: '#1a202c',
              margin: '0 0 8px 0',
            }}>Home Expenses</h1>
            <p style={{ color: '#718096', margin: 0 }}>Track and split household costs</p>
          </div>

          {authError && (
            <div style={{
              background: '#fee',
              color: '#c53030',
              padding: '12px',
              borderRadius: '8px',
              marginBottom: '20px',
              fontSize: '14px',
            }}>{authError}</div>
          )}

          <div style={{ marginBottom: '24px' }}>
            <div style={{
              display: 'flex',
              gap: '8px',
              marginBottom: '24px',
              background: '#f7fafc',
              padding: '4px',
              borderRadius: '12px',
            }}>
              <button
                onClick={() => setView('login')}
                style={{
                  flex: 1,
                  padding: '10px',
                  background: view === 'login' ? 'white' : 'transparent',
                  border: 'none',
                  borderRadius: '8px',
                  cursor: 'pointer',
                  fontWeight: '600',
                  color: view === 'login' ? '#667eea' : '#718096',
                  boxShadow: view === 'login' ? '0 2px 8px rgba(0,0,0,0.1)' : 'none',
                  transition: 'all 0.2s',
                }}
              >Login</button>
              <button
                onClick={() => setView('register')}
                style={{
                  flex: 1,
                  padding: '10px',
                  background: view === 'register' ? 'white' : 'transparent',
                  border: 'none',
                  borderRadius: '8px',
                  cursor: 'pointer',
                  fontWeight: '600',
                  color: view === 'register' ? '#667eea' : '#718096',
                  boxShadow: view === 'register' ? '0 2px 8px rgba(0,0,0,0.1)' : 'none',
                  transition: 'all 0.2s',
                }}
              >Register</button>
            </div>

            {view === 'register' && (
              <input
                type="text"
                placeholder="Full Name"
                value={authForm.name}
                onChange={(e) => setAuthForm({ ...authForm, name: e.target.value })}
                style={{
                  width: '100%',
                  padding: '14px',
                  border: '2px solid #e2e8f0',
                  borderRadius: '12px',
                  fontSize: '16px',
                  marginBottom: '12px',
                  boxSizing: 'border-box',
                  outline: 'none',
                }}
                onFocus={(e) => e.target.style.borderColor = '#667eea'}
                onBlur={(e) => e.target.style.borderColor = '#e2e8f0'}
              />
            )}

            <input
              type="email"
              placeholder="Email"
              value={authForm.email}
              onChange={(e) => setAuthForm({ ...authForm, email: e.target.value })}
              style={{
                width: '100%',
                padding: '14px',
                border: '2px solid #e2e8f0',
                borderRadius: '12px',
                fontSize: '16px',
                marginBottom: '12px',
                boxSizing: 'border-box',
                outline: 'none',
              }}
              onFocus={(e) => e.target.style.borderColor = '#667eea'}
              onBlur={(e) => e.target.style.borderColor = '#e2e8f0'}
            />

            <input
              type="password"
              placeholder="Password"
              value={authForm.password}
              onChange={(e) => setAuthForm({ ...authForm, password: e.target.value })}
              style={{
                width: '100%',
                padding: '14px',
                border: '2px solid #e2e8f0',
                borderRadius: '12px',
                fontSize: '16px',
                boxSizing: 'border-box',
                outline: 'none',
              }}
              onFocus={(e) => e.target.style.borderColor = '#667eea'}
              onBlur={(e) => e.target.style.borderColor = '#e2e8f0'}
            />
          </div>

          <button
            onClick={view === 'login' ? handleLogin : handleRegister}
            disabled={loading}
            style={{
              width: '100%',
              padding: '14px',
              background: loading ? '#ccc' : 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
              color: 'white',
              border: 'none',
              borderRadius: '12px',
              fontSize: '16px',
              fontWeight: '600',
              cursor: loading ? 'not-allowed' : 'pointer',
              boxShadow: '0 4px 12px rgba(102, 126, 234, 0.4)',
            }}
          >
            {loading ? 'Please wait...' : (view === 'login' ? 'Sign In' : 'Create Account')}
          </button>
        </div>
      </div>
    );
  }

  return (
    <div style={{
      minHeight: '100vh',
      background: 'linear-gradient(to bottom, #f8f9fa 0%, #e9ecef 100%)',
      fontFamily: '"DM Sans", -apple-system, sans-serif',
      paddingBottom: '80px',
    }}>
      {/* Header */}
      <div style={{
        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        padding: '20px',
        boxShadow: '0 4px 16px rgba(0,0,0,0.1)',
      }}>
        <div style={{
          maxWidth: '800px',
          margin: '0 auto',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
            <div style={{
              width: '40px',
              height: '40px',
              background: 'rgba(255,255,255,0.2)',
              borderRadius: '10px',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}>
              <Home size={24} color="white" />
            </div>
            <div>
              <h1 style={{ color: 'white', margin: 0, fontSize: '20px', fontWeight: '700' }}>
                Home Expenses
              </h1>
              <p style={{ color: 'rgba(255,255,255,0.8)', margin: 0, fontSize: '14px' }}>
                Welcome, {currentUser.name}
              </p>
            </div>
          </div>
          <button
            onClick={() => setShowMenu(!showMenu)}
            style={{
              background: 'rgba(255,255,255,0.2)',
              border: 'none',
              borderRadius: '10px',
              padding: '10px',
              cursor: 'pointer',
            }}
          >
            <Menu size={24} color="white" />
          </button>
        </div>
      </div>

      {/* Menu Dropdown */}
      {showMenu && (
        <div style={{
          position: 'fixed',
          top: '80px',
          right: '20px',
          background: 'white',
          borderRadius: '16px',
          boxShadow: '0 8px 24px rgba(0,0,0,0.15)',
          zIndex: 1000,
          minWidth: '200px',
        }}>
          <button
            onClick={() => { setView('household'); setShowMenu(false); }}
            style={{
              width: '100%',
              padding: '16px',
              background: 'none',
              border: 'none',
              borderBottom: '1px solid #e2e8f0',
              cursor: 'pointer',
              display: 'flex',
              alignItems: 'center',
              gap: '12px',
              fontSize: '15px',
            }}
          >
            <Users size={20} color="#667eea" />
            Household Members
          </button>
          <button
            onClick={() => { setView('history'); setShowMenu(false); }}
            style={{
              width: '100%',
              padding: '16px',
              background: 'none',
              border: 'none',
              borderBottom: '1px solid #e2e8f0',
              cursor: 'pointer',
              display: 'flex',
              alignItems: 'center',
              gap: '12px',
              fontSize: '15px',
            }}
          >
            <Clock size={20} color="#667eea" />
            Expense History
          </button>
          <button
            onClick={handleLogout}
            style={{
              width: '100%',
              padding: '16px',
              background: 'none',
              border: 'none',
              cursor: 'pointer',
              display: 'flex',
              alignItems: 'center',
              gap: '12px',
              fontSize: '15px',
              color: '#e53e3e',
            }}
          >
            <LogOut size={20} />
            Logout
          </button>
        </div>
      )}

      <div style={{ maxWidth: '800px', margin: '0 auto', padding: '20px' }}>
        {view === 'dashboard' && (
          <>
            {/* Stats Cards */}
            <div style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
              gap: '16px',
              marginBottom: '24px',
            }}>
              <div style={{
                background: 'white',
                borderRadius: '16px',
                padding: '20px',
                boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}>
                  <DollarSign size={20} color="#10b981" />
                  <span style={{ fontSize: '13px', color: '#718096', fontWeight: '600' }}>TOTAL</span>
                </div>
                <p style={{ fontSize: '24px', fontWeight: '700', color: '#1a202c', margin: 0 }}>
                  £{getTotalExpenses().toFixed(2)}
                </p>
              </div>

              <div style={{
                background: 'white',
                borderRadius: '16px',
                padding: '20px',
                boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}>
                  <TrendingUp size={20} color="#667eea" />
                  <span style={{ fontSize: '13px', color: '#718096', fontWeight: '600' }}>YOUR SHARE</span>
                </div>
                <p style={{ fontSize: '24px', fontWeight: '700', color: '#1a202c', margin: 0 }}>
                  £{getYourShare().toFixed(2)}
                </p>
              </div>

              <div style={{
                background: 'white',
                borderRadius: '16px',
                padding: '20px',
                boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}>
                  <Receipt size={20} color="#f59e0b" />
                  <span style={{ fontSize: '13px', color: '#718096', fontWeight: '600' }}>EXPENSES</span>
                </div>
                <p style={{ fontSize: '24px', fontWeight: '700', color: '#1a202c', margin: 0 }}>
                  {expenses.filter(e => !e.settled).length}
                </p>
              </div>
            </div>

            {/* Balances */}
            {balances.length > 0 && (
              <div style={{
                background: 'white',
                borderRadius: '16px',
                padding: '24px',
                marginBottom: '24px',
                boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
              }}>
                <div style={{
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  marginBottom: '16px',
                }}>
                  <h2 style={{ fontSize: '18px', fontWeight: '700', color: '#1a202c', margin: 0 }}>
                    Balances
                  </h2>
                  <button
                    onClick={() => setShowSettleUp(true)}
                    style={{
                      background: '#10b981',
                      color: 'white',
                      border: 'none',
                      borderRadius: '8px',
                      padding: '8px 16px',
                      fontSize: '14px',
                      fontWeight: '600',
                      cursor: 'pointer',
                    }}
                  >
                    Settle Up
                  </button>
                </div>
                {balances.map((balance, idx) => (
                  <div key={idx} style={{
                    padding: '12px 0',
                    borderBottom: idx < balances.length - 1 ? '1px solid #e2e8f0' : 'none',
                  }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                      <span style={{ fontSize: '15px', color: '#2d3748' }}>{balance.name}</span>
                      <span style={{
                        fontSize: '16px',
                        fontWeight: '700',
                        color: balance.balance > 0 ? '#10b981' : '#e53e3e',
                      }}>
                        {balance.balance > 0 ? '+' : ''}£{balance.balance.toFixed(2)}
                      </span>
                    </div>
                  </div>
                ))}
              </div>
            )}

            {/* Recent Expenses */}
            <div style={{
              background: 'white',
              borderRadius: '16px',
              padding: '24px',
              boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
            }}>
              <h2 style={{ fontSize: '18px', fontWeight: '700', color: '#1a202c', margin: '0 0 16px 0' }}>
                Recent Expenses
              </h2>
              {expenses.filter(e => !e.settled).slice(0, 5).length === 0 ? (
                <p style={{ color: '#718096', textAlign: 'center', padding: '20px' }}>
                  No expenses yet. Add one to get started!
                </p>
              ) : (
                expenses.filter(e => !e.settled).slice(0, 5).map(expense => {
                  const category = CATEGORIES.find(c => c.name === expense.category);
                  const paidByMember = household.find(m => m.id === expense.paid_by);
                  
                  return (
                    <div key={expense.id} style={{
                      padding: '16px',
                      borderBottom: '1px solid #e2e8f0',
                      display: 'flex',
                      gap: '12px',
                      alignItems: 'center',
                    }}>
                      <div style={{
                        width: '40px',
                        height: '40px',
                        background: `${category?.color}20`,
                        borderRadius: '10px',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        fontSize: '20px',
                      }}>
                        {category?.icon}
                      </div>
                      <div style={{ flex: 1 }}>
                        <div style={{ fontSize: '15px', fontWeight: '600', color: '#2d3748' }}>
                          {expense.description}
                        </div>
                        <div style={{ fontSize: '13px', color: '#718096', marginTop: '2px' }}>
                          {expense.merchant && `${expense.merchant} · `}Paid by {paidByMember?.name}
                        </div>
                      </div>
                      <div style={{ textAlign: 'right' }}>
                        <div style={{ fontSize: '16px', fontWeight: '700', color: '#1a202c' }}>
                          £{expense.amount.toFixed(2)}
                        </div>
                        <div style={{ fontSize: '12px', color: '#718096', marginTop: '2px' }}>
                          Split {expense.split_among.length} ways
                        </div>
                      </div>
                    </div>
                  );
                })
              )}
              {expenses.filter(e => !e.settled).length > 5 && (
                <button
                  onClick={() => setView('history')}
                  style={{
                    width: '100%',
                    padding: '12px',
                    background: 'none',
                    border: 'none',
                    color: '#667eea',
                    fontWeight: '600',
                    cursor: 'pointer',
                    marginTop: '8px',
                  }}
                >
                  View All
                </button>
              )}
            </div>
          </>
        )}

        {view === 'household' && (
          <div style={{
            background: 'white',
            borderRadius: '16px',
            padding: '24px',
            boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
          }}>
            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
              marginBottom: '20px',
            }}>
              <h2 style={{ fontSize: '20px', fontWeight: '700', color: '#1a202c', margin: 0 }}>
                Household Members
              </h2>
              <button
                onClick={() => setShowAddMember(true)}
                style={{
                  background: '#667eea',
                  color: 'white',
                  border: 'none',
                  borderRadius: '10px',
                  padding: '10px 16px',
                  fontSize: '14px',
                  fontWeight: '600',
                  cursor: 'pointer',
                  display: 'flex',
                  alignItems: 'center',
                  gap: '6px',
                }}
              >
                <Plus size={18} /> Add Member
              </button>
            </div>

            {household.map(member => (
              <div key={member.id} style={{
                padding: '16px',
                borderBottom: '1px solid #e2e8f0',
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                  <div style={{
                    width: '40px',
                    height: '40px',
                    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                    borderRadius: '50%',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    color: 'white',
                    fontWeight: '700',
                    fontSize: '16px',
                  }}>
                    {member.name.charAt(0).toUpperCase()}
                  </div>
                  <span style={{ fontSize: '16px', fontWeight: '600', color: '#2d3748' }}>
                    {member.name}
                  </span>
                </div>
                {household.length > 1 && (
                  <button
                    onClick={() => removeMember(member.id)}
                    disabled={loading}
                    style={{
                      background: '#fee',
                      color: '#e53e3e',
                      border: 'none',
                      borderRadius: '8px',
                      padding: '6px 12px',
                      fontSize: '13px',
                      cursor: loading ? 'not-allowed' : 'pointer',
                    }}
                  >
                    Remove
                  </button>
                )}
              </div>
            ))}

            <button
              onClick={() => setView('dashboard')}
              style={{
                width: '100%',
                padding: '14px',
                background: '#f7fafc',
                border: 'none',
                borderRadius: '12px',
                color: '#667eea',
                fontWeight: '600',
                cursor: 'pointer',
                marginTop: '20px',
              }}
            >
              Back to Dashboard
            </button>
          </div>
        )}

        {view === 'history' && (
          <div style={{
            background: 'white',
            borderRadius: '16px',
            padding: '24px',
            boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
          }}>
            <h2 style={{ fontSize: '20px', fontWeight: '700', color: '#1a202c', margin: '0 0 20px 0' }}>
              Expense History
            </h2>

            {expenses.map(expense => {
              const category = CATEGORIES.find(c => c.name === expense.category);
              const paidByMember = household.find(m => m.id === expense.paid_by);
              const date = new Date(expense.date);
              
              return (
                <div key={expense.id} style={{
                  padding: '16px',
                  borderBottom: '1px solid #e2e8f0',
                  opacity: expense.settled ? 0.5 : 1,
                }}>
                  <div style={{ display: 'flex', gap: '12px', alignItems: 'flex-start' }}>
                    <div style={{
                      width: '40px',
                      height: '40px',
                      background: `${category?.color}20`,
                      borderRadius: '10px',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      fontSize: '20px',
                    }}>
                      {category?.icon}
                    </div>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: '15px', fontWeight: '600', color: '#2d3748' }}>
                        {expense.description}
                      </div>
                      {expense.merchant && (
                        <div style={{ fontSize: '13px', color: '#667eea', marginTop: '2px' }}>
                          {expense.merchant}
                        </div>
                      )}
                      <div style={{ fontSize: '13px', color: '#718096', marginTop: '4px' }}>
                        {date.toLocaleDateString('en-GB')} · Paid by {paidByMember?.name}
                      </div>
                      <div style={{ fontSize: '13px', color: '#718096', marginTop: '2px' }}>
                        Split among: {expense.split_among.map(id => 
                          household.find(m => m.id === id)?.name
                        ).join(', ')}
                      </div>
                    </div>
                    <div style={{ textAlign: 'right' }}>
                      <div style={{ fontSize: '16px', fontWeight: '700', color: '#1a202c' }}>
                        £{expense.amount.toFixed(2)}
                      </div>
                      {expense.settled && (
                        <span style={{
                          fontSize: '12px',
                          color: '#10b981',
                          fontWeight: '600',
                        }}>
                          ✓ Settled
                        </span>
                      )}
                    </div>
                  </div>
                </div>
              );
            })}

            <button
              onClick={() => setView('dashboard')}
              style={{
                width: '100%',
                padding: '14px',
                background: '#f7fafc',
                border: 'none',
                borderRadius: '12px',
                color: '#667eea',
                fontWeight: '600',
                cursor: 'pointer',
                marginTop: '20px',
              }}
            >
              Back to Dashboard
            </button>
          </div>
        )}
      </div>

      {/* Add Expense Modal */}
      {showAddExpense && (
        <div style={{
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          background: 'rgba(0,0,0,0.5)',
          display: 'flex',
          alignItems: 'flex-end',
          justifyContent: 'center',
          zIndex: 1000,
        }} onClick={() => setShowAddExpense(false)}>
          <div style={{
            background: 'white',
            borderRadius: '24px 24px 0 0',
            padding: '24px',
            maxWidth: '600px',
            width: '100%',
            maxHeight: '80vh',
            overflowY: 'auto',
          }} onClick={(e) => e.stopPropagation()}>
            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
              marginBottom: '24px',
            }}>
              <h2 style={{ fontSize: '22px', fontWeight: '700', color: '#1a202c', margin: 0 }}>
                Add Expense
              </h2>
              <button
                onClick={() => setShowAddExpense(false)}
                style={{
                  background: '#e2e8f0',
                  border: 'none',
                  borderRadius: '8px',
                  padding: '8px',
                  cursor: 'pointer',
                }}
              >
                <X size={20} />
              </button>
            </div>

            <div style={{ marginBottom: '16px' }}>
              <label style={{ fontSize: '14px', fontWeight: '600', color: '#4a5568', display: 'block', marginBottom: '8px' }}>
                Description
              </label>
              <input
                type="text"
                value={expenseForm.description}
                onChange={(e) => setExpenseForm({ ...expenseForm, description: e.target.value })}
                placeholder="e.g., Weekly shopping"
                style={{
                  width: '100%',
                  padding: '12px',
                  border: '2px solid #e2e8f0',
                  borderRadius: '10px',
                  fontSize: '16px',
                  boxSizing: 'border-box',
                }}
              />
            </div>

            <div style={{ marginBottom: '16px', position: 'relative' }}>
              <label style={{ fontSize: '14px', fontWeight: '600', color: '#4a5568', display: 'block', marginBottom: '8px' }}>
                Store/Merchant (Optional)
              </label>
              <div style={{ position: 'relative' }}>
                <input
                  type="text"
                  value={merchantSearch}
                  onChange={(e) => handleMerchantSearch(e.target.value)}
                  onFocus={() => merchantSearch.length >= 2 && setShowMerchantDropdown(true)}
                  placeholder="e.g., Tesco, Sainsbury's"
                  style={{
                    width: '100%',
                    padding: '12px 12px 12px 40px',
                    border: '2px solid #e2e8f0',
                    borderRadius: '10px',
                    fontSize: '16px',
                    boxSizing: 'border-box',
                  }}
                />
                <Search size={18} color="#718096" style={{
                  position: 'absolute',
                  left: '12px',
                  top: '50%',
                  transform: 'translateY(-50%)',
                }} />
              </div>
              
              {showMerchantDropdown && merchantSuggestions.length > 0 && (
                <div style={{
                  position: 'absolute',
                  top: '100%',
                  left: 0,
                  right: 0,
                  background: 'white',
                  border: '2px solid #e2e8f0',
                  borderRadius: '10px',
                  marginTop: '4px',
                  maxHeight: '200px',
                  overflowY: 'auto',
                  zIndex: 100,
                  boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
                }}>
                  {merchantSuggestions.map(merchant => (
                    <button
                      key={merchant.id}
                      onClick={() => selectMerchant(merchant)}
                      style={{
                        width: '100%',
                        padding: '12px',
                        background: 'none',
                        border: 'none',
                        borderBottom: '1px solid #e2e8f0',
                        cursor: 'pointer',
                        textAlign: 'left',
                        display: 'flex',
                        justifyContent: 'space-between',
                      }}
                    >
                      <span style={{ fontWeight: '600' }}>{merchant.name}</span>
                      <span style={{ fontSize: '12px', color: '#718096' }}>{merchant.category}</span>
                    </button>
                  ))}
                </div>
              )}
            </div>

            <div style={{ marginBottom: '16px' }}>
              <label style={{ fontSize: '14px', fontWeight: '600', color: '#4a5568', display: 'block', marginBottom: '8px' }}>
                Amount (£)
              </label>
              <input
                type="number"
                step="0.01"
                value={expenseForm.amount}
                onChange={(e) => setExpenseForm({ ...expenseForm, amount: e.target.value })}
                placeholder="0.00"
                style={{
                  width: '100%',
                  padding: '12px',
                  border: '2px solid #e2e8f0',
                  borderRadius: '10px',
                  fontSize: '16px',
                  boxSizing: 'border-box',
                }}
              />
            </div>

            <div style={{ marginBottom: '16px' }}>
              <label style={{ fontSize: '14px', fontWeight: '600', color: '#4a5568', display: 'block', marginBottom: '8px' }}>
                Category
              </label>
              <div style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(3, 1fr)',
                gap: '8px',
              }}>
                {CATEGORIES.map(cat => (
                  <button
                    key={cat.name}
                    onClick={() => setExpenseForm({ ...expenseForm, category: cat.name })}
                    style={{
                      padding: '12px',
                      background: expenseForm.category === cat.name ? `${cat.color}20` : '#f7fafc',
                      border: expenseForm.category === cat.name ? `2px solid ${cat.color}` : '2px solid transparent',
                      borderRadius: '10px',
                      cursor: 'pointer',
                      display: 'flex',
                      flexDirection: 'column',
                      alignItems: 'center',
                      gap: '4px',
                    }}
                  >
                    <span style={{ fontSize: '24px' }}>{cat.icon}</span>
                    <span style={{ fontSize: '12px', fontWeight: '600' }}>{cat.name}</span>
                  </button>
                ))}
              </div>
            </div>

            <div style={{ marginBottom: '16px' }}>
              <label style={{ fontSize: '14px', fontWeight: '600', color: '#4a5568', display: 'block', marginBottom: '8px' }}>
                Paid By
              </label>
              <select
                value={expenseForm.paid_by}
                onChange={(e) => setExpenseForm({ ...expenseForm, paid_by: e.target.value })}
                style={{
                  width: '100%',
                  padding: '12px',
                  border: '2px solid #e2e8f0',
                  borderRadius: '10px',
                  fontSize: '16px',
                  boxSizing: 'border-box',
                }}
              >
                <option value="">Select member</option>
                {household.map(member => (
                  <option key={member.id} value={member.id}>{member.name}</option>
                ))}
              </select>
            </div>

            <div style={{ marginBottom: '24px' }}>
              <label style={{ fontSize: '14px', fontWeight: '600', color: '#4a5568', display: 'block', marginBottom: '8px' }}>
                Split Among
              </label>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                {household.map(member => (
                  <button
                    key={member.id}
                    onClick={() => toggleSplitMember(member.id)}
                    style={{
                      padding: '12px',
                      background: expenseForm.split_among.includes(member.id) ? '#667eea20' : '#f7fafc',
                      border: expenseForm.split_among.includes(member.id) ? '2px solid #667eea' : '2px solid #e2e8f0',
                      borderRadius: '10px',
                      cursor: 'pointer',
                      display: 'flex',
                      justifyContent: 'space-between',
                      alignItems: 'center',
                    }}
                  >
                    <span style={{ fontWeight: '600' }}>{member.name}</span>
                    {expenseForm.split_among.includes(member.id) && <Check size={20} color="#667eea" />}
                  </button>
                ))}
              </div>
            </div>

            <button
              onClick={addExpense}
              disabled={loading}
              style={{
                width: '100%',
                padding: '14px',
                background: loading ? '#ccc' : 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                color: 'white',
                border: 'none',
                borderRadius: '12px',
                fontSize: '16px',
                fontWeight: '600',
                cursor: loading ? 'not-allowed' : 'pointer',
              }}
            >
              {loading ? 'Adding...' : 'Add Expense'}
            </button>
          </div>
        </div>
      )}

      {/* Add Member Modal */}
      {showAddMember && (
        <div style={{
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          background: 'rgba(0,0,0,0.5)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          zIndex: 1000,
          padding: '20px',
        }} onClick={() => setShowAddMember(false)}>
          <div style={{
            background: 'white',
            borderRadius: '16px',
            padding: '24px',
            maxWidth: '400px',
            width: '100%',
          }} onClick={(e) => e.stopPropagation()}>
            <h3 style={{ fontSize: '18px', fontWeight: '700', marginBottom: '16px' }}>
              Add Household Member
            </h3>
            <input
              type="text"
              value={newMember}
              onChange={(e) => setNewMember(e.target.value)}
              placeholder="Member name"
              style={{
                width: '100%',
                padding: '12px',
                border: '2px solid #e2e8f0',
                borderRadius: '10px',
                fontSize: '16px',
                marginBottom: '16px',
                boxSizing: 'border-box',
              }}
            />
            <div style={{ display: 'flex', gap: '12px' }}>
              <button
                onClick={() => setShowAddMember(false)}
                style={{
                  flex: 1,
                  padding: '12px',
                  background: '#e2e8f0',
                  border: 'none',
                  borderRadius: '10px',
                  fontWeight: '600',
                  cursor: 'pointer',
                }}
              >
                Cancel
              </button>
              <button
                onClick={addHouseholdMember}
                disabled={loading}
                style={{
                  flex: 1,
                  padding: '12px',
                  background: loading ? '#ccc' : '#667eea',
                  color: 'white',
                  border: 'none',
                  borderRadius: '10px',
                  fontWeight: '600',
                  cursor: loading ? 'not-allowed' : 'pointer',
                }}
              >
                {loading ? 'Adding...' : 'Add'}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Settle Up Modal */}
      {showSettleUp && (
        <div style={{
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          background: 'rgba(0,0,0,0.5)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          zIndex: 1000,
          padding: '20px',
        }} onClick={() => setShowSettleUp(false)}>
          <div style={{
            background: 'white',
            borderRadius: '16px',
            padding: '24px',
            maxWidth: '400px',
            width: '100%',
          }} onClick={(e) => e.stopPropagation()}>
            <h3 style={{ fontSize: '18px', fontWeight: '700', marginBottom: '16px' }}>
              Settle All Expenses
            </h3>
            <p style={{ color: '#718096', marginBottom: '20px' }}>
              This will mark all current expenses as settled. Are you sure?
            </p>
            <div style={{ display: 'flex', gap: '12px' }}>
              <button
                onClick={() => setShowSettleUp(false)}
                style={{
                  flex: 1,
                  padding: '12px',
                  background: '#e2e8f0',
                  border: 'none',
                  borderRadius: '10px',
                  fontWeight: '600',
                  cursor: 'pointer',
                }}
              >
                Cancel
              </button>
              <button
                onClick={settleAllExpenses}
                disabled={loading}
                style={{
                  flex: 1,
                  padding: '12px',
                  background: loading ? '#ccc' : '#10b981',
                  color: 'white',
                  border: 'none',
                  borderRadius: '10px',
                  fontWeight: '600',
                  cursor: loading ? 'not-allowed' : 'pointer',
                }}
              >
                {loading ? 'Settling...' : 'Settle All'}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Floating Action Button */}
      {view === 'dashboard' && household.length > 0 && (
        <button
          onClick={() => setShowAddExpense(true)}
          style={{
            position: 'fixed',
            bottom: '24px',
            right: '24px',
            width: '60px',
            height: '60px',
            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
            border: 'none',
            borderRadius: '50%',
            cursor: 'pointer',
            boxShadow: '0 8px 24px rgba(102, 126, 234, 0.4)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            zIndex: 999,
          }}
        >
          <Plus size={28} color="white" />
        </button>
      )}
    </div>
  );
}