document.addEventListener('DOMContentLoaded', function() {
    // Theme toggle functionality
    const themeToggle = document.getElementById('theme-toggle');
    const html = document.documentElement;
    
    // Check for saved theme preference or use preferred color scheme
    const savedTheme = localStorage.getItem('theme') || 
                      (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
    html.classList.add(savedTheme);
    
    themeToggle.addEventListener('click', () => {
        html.classList.toggle('dark');
        const theme = html.classList.contains('dark') ? 'dark' : 'light';
        localStorage.setItem('theme', theme);
        feather.replace();
    });
    
    // Expense modal functionality
    const addExpenseBtn = document.getElementById('add-expense-btn');
    const expenseModal = document.getElementById('expense-modal');
    const closeModal = document.getElementById('close-modal');
    const expenseForm = document.getElementById('expense-form');
    
    addExpenseBtn.addEventListener('click', () => {
        expenseModal.classList.remove('hidden');
    });
    
    closeModal.addEventListener('click', () => {
        expenseModal.classList.add('hidden');
    });
    
    expenseModal.addEventListener('click', (e) => {
        if (e.target === expenseModal) {
            expenseModal.classList.add('hidden');
        }
    });
    
    expenseForm.addEventListener('submit', (e) => {
        e.preventDefault();
        
        // In a real app, you would send this data to your backend
        const description = document.getElementById('description').value;
        const amount = document.getElementById('amount').value;
        const paidBy = document.getElementById('paid-by').value;
        
        console.log('New expense:', { description, amount, paidBy });
        
        // Reset form and close modal
        expenseForm.reset();
        expenseModal.classList.add('hidden');
        
        // Show success message (in a real app, you would update the UI properly)
        alert('Expense added successfully!');
    });
    
    // Initialize feather icons
    feather.replace();
});