import React, { useState, useEffect } from 'react';
import { Search, ShoppingCart, Package, BarChart2, User, LogOut, Plus, Minus, Trash2, X, Check, DollarSign, Eye, EyeOff, Settings, Printer, Clock, CreditCard, Smartphone, Database, RefreshCw } from 'lucide-react';
import { initializeApp } from 'firebase/app';
import { getDatabase, ref, set, get, push, remove, update, onValue, off } from 'firebase/database';
import { getAuth, signInWithEmailAndPassword, createUserWithEmailAndPassword, signOut } from 'firebase/auth';

// Firebase configuration
const firebaseConfig = {
  apiKey: "AIzaSyB23QNvvyZ6TqKlk_nJ3CpSecbCuT8lc1A",
  authDomain: "cacid01.firebaseapp.com",
  databaseURL: "https://cacid01-default-rtdb.firebaseio.com",
  projectId: "cacid01",
  storageBucket: "cacid01.firebasestorage.app",
  messagingSenderId: "1051604944772",
  appId: "1:1051604944772:web:0f3fbdaa45498285093fd1",
  measurementId: "G-6RJT513ZRV"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const database = getDatabase(app);
const auth = getAuth(app);

// Main POS Application
export default function POSSystem() {
  // State management
  const [activeTab, setActiveTab] = useState('pos');
  const [products, setProducts] = useState([]);
  const [cart, setCart] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState('');
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [user, setUser] = useState(null);
  const [sales, setSales] = useState([]);
  const [showCheckoutModal, setShowCheckoutModal] = useState(false);
  const [paymentMethod, setPaymentMethod] = useState('cash');
  const [amountReceived, setAmountReceived] = useState('');
  const [showReceiptModal, setShowReceiptModal] = useState(false);
  const [currentReceipt, setCurrentReceipt] = useState(null);
  const [categories, setCategories] = useState([]);
  const [selectedCategory, setSelectedCategory] = useState('all');
  const [showAddProductModal, setShowAddProductModal] = useState(false);
  const [newProduct, setNewProduct] = useState({
    name: '',
    price: '',
    category: '',
    stock: '',
    barcode: '',
    description: ''
  });
  const [isDemo, setIsDemo] = useState(false);
  const [registeredUsers, setRegisteredUsers] = useState([
    { username: 'admin', password: 'admin123', role: 'admin', email: 'admin@example.com' },
    { username: 'cashier', password: 'cashier123', role: 'cashier', email: 'cashier@example.com' },
    { username: 'manager', password: 'manager123', role: 'manager', email: 'manager@example.com' }
  ]);
  const [showRegisterModal, setShowRegisterModal] = useState(false);
  const [newUser, setNewUser] = useState({
    username: '',
    password: '',
    confirmPassword: '',
    email: '',
    role: 'cashier'
  });
  const [customers, setCustomers] = useState([]);
  const [selectedCustomer, setSelectedCustomer] = useState(null);
  const [showAddCustomerModal, setShowAddCustomerModal] = useState(false);
  const [newCustomer, setNewCustomer] = useState({
    name: '',
    phone: '',
    email: '',
    address: '',
    balance: 0
  });
  const [showSettingsModal, setShowSettingsModal] = useState(false);
  const [storeSettings, setStoreSettings] = useState({
    name: 'Your Business Name',
    address: '123 Main Street, City, State',
    phone: '(123) 456-7890',
    email: 'business@example.com',
    taxRate: 7,
    currency: 'USD',
    receiptFooter: 'Thank you for your purchase!'
  });
  const [isSyncing, setIsSyncing] = useState(false);
  const [syncStatus, setSyncStatus] = useState('');
  const [loginEmail, setLoginEmail] = useState('');
  const [loginPassword, setLoginPassword] = useState('');
  const [loginError, setLoginError] = useState('');
  const [showCustomerWalletModal, setShowCustomerWalletModal] = useState(false);
  const [walletTransaction, setWalletTransaction] = useState({
    amount: '',
    type: 'deposit',
    note: ''
  });

  // Load data on component mount
  useEffect(() => {
    // Check for existing session
    const savedUser = localStorage.getItem('posUser');
    const savedIsDemo = localStorage.getItem('posIsDemo');
    
    if (savedUser) {
      setUser(JSON.parse(savedUser));
      setIsAuthenticated(true);
      setIsDemo(savedIsDemo === 'true');
    }
    
    // Load registered users from localStorage if available
    const savedUsers = localStorage.getItem('posRegisteredUsers');
    if (savedUsers) {
      setRegisteredUsers(JSON.parse(savedUsers));
    } else {
      // Save default users to localStorage
      localStorage.setItem('posRegisteredUsers', JSON.stringify(registeredUsers));
    }
    
    // Load data based on authentication status
    if (isAuthenticated) {
      loadData();
    } else {
      setIsLoading(false);
    }
  }, [isAuthenticated]);

  // Load data function
  const loadData = async () => {
    try {
      setIsLoading(true);
      
      if (isDemo) {
        // Load demo data
        loadDemoData();
        setIsLoading(false);
      } else {
        // Load real data from Firebase
        await fetchDataFromFirebase();
      }
    } catch (error) {
      console.error('Error loading data:', error);
      setIsLoading(false);
    }
  };

  // Fetch data from Firebase
  const fetchDataFromFirebase = async () => {
    try {
      // Set up listeners for real-time updates
      const productsRef = ref(database, 'products');
      const salesRef = ref(database, 'sales');
      const categoriesRef = ref(database, 'categories');
      const customersRef = ref(database, 'customers');
      const settingsRef = ref(database, 'settings');
      
      // Products listener
      onValue(productsRef, (snapshot) => {
        const data = snapshot.val();
        if (data) {
          const productsArray = Object.entries(data).map(([key, value]) => ({
            _id: key,
            ...value
          }));
          setProducts(productsArray);
        } else {
          setProducts([]);
        }
      });
      
      // Sales listener
      onValue(salesRef, (snapshot) => {
        const data = snapshot.val();
        if (data) {
          const salesArray = Object.entries(data).map(([key, value]) => ({
            _id: key,
            ...value
          }));
          setSales(salesArray);
        } else {
          setSales([]);
        }
      });
      
      // Categories listener
      onValue(categoriesRef, (snapshot) => {
        const data = snapshot.val();
        if (data) {
          setCategories(data);
        } else {
          // Initialize with default categories
          const defaultCategories = ['Clothing', 'Footwear', 'Accessories', 'Electronics', 'Stationery'];
          setCategories(defaultCategories);
          // Save default categories to Firebase
          set(categoriesRef, defaultCategories);
        }
      });
      
      // Customers listener
      onValue(customersRef, (snapshot) => {
        const data = snapshot.val();
        if (data) {
          const customersArray = Object.entries(data).map(([key, value]) => ({
            _id: key,
            ...value
          }));
          setCustomers(customersArray);
        } else {
          setCustomers([]);
        }
      });
      
      // Settings listener
      onValue(settingsRef, (snapshot) => {
        const data = snapshot.val();
        if (data) {
          setStoreSettings(data);
        } else {
          // Save default settings to Firebase
          set(settingsRef, storeSettings);
        }
      });
      
      setIsLoading(false);
      
      // Clean up listeners on unmount
      return () => {
        off(productsRef);
        off(salesRef);
        off(categoriesRef);
        off(customersRef);
        off(settingsRef);
      };
    } catch (error) {
      console.error('Error fetching data from Firebase:', error);
      setIsLoading(false);
    }
  };

  // Load demo data
  const loadDemoData = () => {
    // Load demo products
    const demoProducts = [
      { _id: '1', name: 'T-Shirt', price: 19.99, category: 'Clothing', stock: 45, barcode: '123456789', description: 'Cotton t-shirt' },
      { _id: '2', name: 'Jeans', price: 49.99, category: 'Clothing', stock: 30, barcode: '223456789', description: 'Blue denim jeans' },
      { _id: '3', name: 'Sneakers', price: 79.99, category: 'Footwear', stock: 25, barcode: '323456789', description: 'Running shoes' },
      { _id: '4', name: 'Coffee Mug', price: 12.99, category: 'Accessories', stock: 50, barcode: '423456789', description: 'Ceramic coffee mug' },
      { _id: '5', name: 'Notebook', price: 4.99, category: 'Stationery', stock: 100, barcode: '523456789', description: 'Lined notebook' },
      { _id: '6', name: 'Backpack', price: 39.99, category: 'Accessories', stock: 20, barcode: '623456789', description: 'School backpack' },
      { _id: '7', name: 'Water Bottle', price: 14.99, category: 'Accessories', stock: 40, barcode: '723456789', description: 'Stainless steel water bottle' },
      { _id: '8', name: 'Headphones', price: 89.99, category: 'Electronics', stock: 15, barcode: '823456789', description: 'Wireless headphones' },
    ];
    setProducts(demoProducts);
    
    // Load demo sales
    const demoSales = [
      { _id: '1', date: '2023-06-01', total: 149.95, items: 3, paymentMethod: 'credit' },
      { _id: '2', date: '2023-06-02', total: 89.97, items: 2, paymentMethod: 'cash' },
      { _id: '3', date: '2023-06-03', total: 199.96, items: 4, paymentMethod: 'credit' },
      { _id: '4', date: '2023-06-04', total: 59.98, items: 2, paymentMethod: 'cash' },
      { _id: '5', date: '2023-06-05', total: 129.95, items: 3, paymentMethod: 'credit' },
    ];
    setSales(demoSales);
    
    // Load demo categories
    const demoCategories = ['Clothing', 'Footwear', 'Accessories', 'Electronics', 'Stationery'];
    setCategories(demoCategories);
    
    // Load demo customers
    const demoCustomers = [
      { _id: '1', name: 'John Doe', phone: '555-123-4567', email: 'john@example.com', address: '123 Main St', balance: 50.00 },
      { _id: '2', name: 'Jane Smith', phone: '555-987-6543', email: 'jane@example.com', address: '456 Oak Ave', balance: 25.75 },
      { _id: '3', name: 'Bob Johnson', phone: '555-555-5555', email: 'bob@example.com', address: '789 Pine Rd', balance: 0.00 },
    ];
    setCustomers(demoCustomers);
  };

  // Handle Firebase authentication
  const handleFirebaseLogin = async (email, password) => {
    try {
      setLoginError('');
      const userCredential = await signInWithEmailAndPassword(auth, email, password);
      const firebaseUser = userCredential.user;
      
      // Get user role from database
      const userRef = ref(database, `users/${firebaseUser.uid}`);
      const snapshot = await get(userRef);
      
      if (snapshot.exists()) {
        const userData = snapshot.val();
        return {
          uid: firebaseUser.uid,
          username: userData.username,
          role: userData.role,
          email: firebaseUser.email
        };
      } else {
        // Create user data if it doesn't exist
        const newUserData = {
          username: email.split('@')[0],
          role: 'cashier',
          email: email
        };
        
        await set(userRef, newUserData);
        
        return {
          uid: firebaseUser.uid,
          username: newUserData.username,
          role: newUserData.role,
          email: newUserData.email
        };
      }
    } catch (error) {
      console.error('Firebase login error:', error);
      setLoginError(error.message);
      return null;
    }
  };

  // Register user in Firebase
  const registerFirebaseUser = async (email, password, username, role) => {
    try {
      const userCredential = await createUserWithEmailAndPassword(auth, email, password);
      const firebaseUser = userCredential.user;
      
      // Save user data to database
      const userRef = ref(database, `users/${firebaseUser.uid}`);
      await set(userRef, {
        username,
        role,
        email
      });
      
      return {
        uid: firebaseUser.uid,
        username,
        role,
        email
      };
    } catch (error) {
      console.error('Firebase registration error:', error);
      throw error;
    }
  };

  // Handle login
  const handleLogin = async (userData, demo = false) => {
    setUser(userData);
    setIsAuthenticated(true);
    setIsDemo(demo);
    
    // Save to localStorage
    localStorage.setItem('posUser', JSON.stringify(userData));
    localStorage.setItem('posIsDemo', demo.toString());
    
    // Load data
    await loadData();
  };

  // Handle logout
  const handleLogout = async () => {
    if (!isDemo) {
      try {
        await signOut(auth);
      } catch (error) {
        console.error('Firebase logout error:', error);
      }
    }
    
    setUser(null);
    setIsAuthenticated(false);
    setCart([]);
    
    // Clear from localStorage
    localStorage.removeItem('posUser');
    localStorage.removeItem('posIsDemo');
  };

  // Add product to cart
  const addToCart = (product) => {
    const existingItem = cart.find(item => item._id === product._id);
    
    if (existingItem) {
      setCart(cart.map(item => 
        item._id === product._id 
          ? { ...item, quantity: item.quantity + 1 } 
          : item
      ));
    } else {
      setCart([...cart, { ...product, quantity: 1 }]);
    }
  };

  // Update cart item quantity
  const updateCartItemQuantity = (productId, newQuantity) => {
    if (newQuantity <= 0) {
      removeFromCart(productId);
      return;
    }
    
    setCart(cart.map(item => 
      item._id === productId 
        ? { ...item, quantity: newQuantity } 
        : item
    ));
  };

  // Remove item from cart
  const removeFromCart = (productId) => {
    setCart(cart.filter(item => item._id !== productId));
  };

  // Calculate cart total
  const calculateTotal = () => {
    return cart.reduce((total, item) => total + (item.price * item.quantity), 0);
  };

  // Process checkout
  const processCheckout = async () => {
    if (cart.length === 0) return;
    
    try {
      const total = calculateTotal();
      const taxRate = storeSettings.taxRate / 100;
      const taxAmount = total * taxRate;
      const totalWithTax = total + taxAmount;
      const change = paymentMethod === 'cash' ? parseFloat(amountReceived) - totalWithTax : 0;
      
      // Create receipt
      const receipt = {
        date: new Date().toISOString(),
        items: cart,
        subtotal: total,
        taxRate: storeSettings.taxRate,
        taxAmount: taxAmount,
        total: totalWithTax,
        paymentMethod: paymentMethod,
        amountReceived: paymentMethod === 'cash' ? parseFloat(amountReceived) : totalWithTax,
        change: change,
        customer: selectedCustomer ? {
          _id: selectedCustomer._id,
          name: selectedCustomer.name
        } : null
      };
      
      // Update inventory and sales
      if (isDemo) {
        // Update demo data in memory only
        updateDemoData(receipt);
      } else {
        // Update real data in Firebase
        await updateFirebaseData(receipt);
      }
      
      // Show receipt
      setCurrentReceipt(receipt);
      setShowReceiptModal(true);
      setShowCheckoutModal(false);
      
      // Clear cart and selected customer
      setCart([]);
      setAmountReceived('');
      setSelectedCustomer(null);
      
    } catch (error) {
      console.error('Error processing checkout:', error);
    }
  };

  // Update demo data
  const updateDemoData = (receipt) => {
    // Update products stock
    const updatedProducts = products.map(product => {
      const cartItem = cart.find(item => item._id === product._id);
      if (cartItem) {
        return { ...product, stock: product.stock - cartItem.quantity };
      }
      return product;
    });
    setProducts(updatedProducts);
    
    // Update sales
    const newSale = { 
      _id: Date.now().toString(), 
      date: receipt.date, 
      total: receipt.total, 
      items: cart.reduce((sum, item) => sum + item.quantity, 0),
      paymentMethod: receipt.paymentMethod,
      customer: receipt.customer
    };
    setSales([...sales, newSale]);
    
    // Update customer balance if using wallet
    if (receipt.paymentMethod === 'wallet' && selectedCustomer) {
      const updatedCustomers = customers.map(customer => {
        if (customer._id === selectedCustomer._id) {
          return { ...customer, balance: customer.balance - receipt.total };
        }
        return customer;
      });
      setCustomers(updatedCustomers);
    }
  };

  // Update Firebase data
  const updateFirebaseData = async (receipt) => {
    try {
      // Add sale to Firebase
      const salesRef = ref(database, 'sales');
      const newSaleRef = push(salesRef);
      const saleId = newSaleRef.key;
      
      const saleData = {
        date: receipt.date,
        subtotal: receipt.subtotal,
        taxAmount: receipt.taxAmount,
        total: receipt.total,
        items: cart.reduce((sum, item) => sum + item.quantity, 0),
        paymentMethod: receipt.paymentMethod,
        customer: receipt.customer,
        itemsDetail: cart.map(item => ({
          productId: item._id,
          name: item.name,
          price: item.price,
          quantity: item.quantity
        }))
      };
      
      await set(newSaleRef, saleData);
      
      // Update product stock
      for (const item of cart) {
        const productRef = ref(database, `products/${item._id}`);
        const snapshot = await get(productRef);
        
        if (snapshot.exists()) {
          const product = snapshot.val();
          const newStock = product.stock - item.quantity;
          
          await update(productRef, { stock: newStock });
        }
      }
      
      // Update customer balance if using wallet
      if (receipt.paymentMethod === 'wallet' && selectedCustomer) {
        const customerRef = ref(database, `customers/${selectedCustomer._id}`);
        const snapshot = await get(customerRef);
        
        if (snapshot.exists()) {
          const customer = snapshot.val();
          const newBalance = customer.balance - receipt.total;
          
          await update(customerRef, { balance: newBalance });
          
          // Add transaction to customer history
          const transactionRef = ref(database, `customers/${selectedCustomer._id}/transactions`);
          const newTransactionRef = push(transactionRef);
          
          await set(newTransactionRef, {
            date: receipt.date,
            amount: -receipt.total,
            type: 'purchase',
            saleId: saleId,
            balance: newBalance
          });
        }
      }
      
      // Set receipt ID
      receipt._id = saleId;
      
    } catch (error) {
      console.error('Error updating Firebase data:', error);
      throw error;
    }
  };

  // Add new product
  const handleAddProduct = async () => {
    try {
      const productToAdd = {
        name: newProduct.name,
        price: parseFloat(newProduct.price),
        category: newProduct.category,
        stock: parseInt(newProduct.stock),
        barcode: newProduct.barcode,
        description: newProduct.description
      };
      
      if (isDemo) {
        // Add to demo products
        const productWithId = {
          ...productToAdd,
          _id: Date.now().toString()
        };
        setProducts([...products, productWithId]);
      } else {
        // Add to Firebase
        const productsRef = ref(database, 'products');
        const newProductRef = push(productsRef);
        
        await set(newProductRef, productToAdd);
      }
      
      // Reset form
      setNewProduct({
        name: '',
        price: '',
        category: '',
        stock: '',
        barcode: '',
        description: ''
      });
      
      setShowAddProductModal(false);
    } catch (error) {
      console.error('Error adding product:', error);
    }
  };

  // Add new customer
  const handleAddCustomer = async () => {
    try {
      const customerToAdd = {
        name: newCustomer.name,
        phone: newCustomer.phone,
        email: newCustomer.email,
        address: newCustomer.address,
        balance: parseFloat(newCustomer.balance) || 0
      };
      
      if (isDemo) {
        // Add to demo customers
        const customerWithId = {
          ...customerToAdd,
          _id: Date.now().toString()
        };
        setCustomers([...customers, customerWithId]);
      } else {
        // Add to Firebase
        const customersRef = ref(database, 'customers');
        const newCustomerRef = push(customersRef);
        
        await set(newCustomerRef, customerToAdd);
      }
      
      // Reset form
      setNewCustomer({
        name: '',
        phone: '',
        email: '',
        address: '',
        balance: 0
      });
      
      setShowAddCustomerModal(false);
    } catch (error) {
      console.error('Error adding customer:', error);
    }
  };

  // Register new user
  const handleRegisterUser = async () => {
    // Validate form
    if (newUser.password !== newUser.confirmPassword) {
      alert("Passwords don't match");
      return;
    }
    
    if (registeredUsers.some(user => user.username === newUser.username)) {
      alert("Username already exists");
      return;
    }
    
    try {
      if (isDemo) {
        // Create new user object
        const userToAdd = {
          username: newUser.username,
          password: newUser.password,
          email: newUser.email,
          role: newUser.role
        };
        
        // Add to registered users
        const updatedUsers = [...registeredUsers, userToAdd];
        setRegisteredUsers(updatedUsers);
        
        // Save to localStorage
        localStorage.setItem('posRegisteredUsers', JSON.stringify(updatedUsers));
      } else {
        // Register user in Firebase
        await registerFirebaseUser(newUser.email, newUser.password, newUser.username, newUser.role);
      }
      
      // Reset form and close modal
      setNewUser({
        username: '',
        password: '',
        confirmPassword: '',
        email: '',
        role: 'cashier'
      });
      
      setShowRegisterModal(false);
    } catch (error) {
      console.error('Error registering user:', error);
      alert(`Registration failed: ${error.message}`);
    }
  };

  // Update store settings
  const handleUpdateSettings = async () => {
    try {
      if (!isDemo) {
        // Update settings in Firebase
        const settingsRef = ref(database, 'settings');
        await set(settingsRef, storeSettings);
      }
      
      setShowSettingsModal(false);
    } catch (error) {
      console.error('Error updating settings:', error);
    }
  };

  // Process wallet transaction
  const handleWalletTransaction = async () => {
    if (!selectedCustomer || !walletTransaction.amount) return;
    
    try {
      const amount = parseFloat(walletTransaction.amount);
      const transactionType = walletTransaction.type;
      const newBalance = transactionType === 'deposit' 
        ? selectedCustomer.balance + amount 
        : selectedCustomer.balance - amount;
      
      if (transactionType === 'withdraw' && amount > selectedCustomer.balance) {
        alert('Insufficient balance for withdrawal');
        return;
      }
      
      if (isDemo) {
        // Update customer in demo mode
        const updatedCustomers = customers.map(customer => {
          if (customer._id === selectedCustomer._id) {
            return { ...customer, balance: newBalance };
          }
          return customer;
        });
        setCustomers(updatedCustomers);
        setSelectedCustomer({ ...selectedCustomer, balance: newBalance });
      } else {
        // Update customer in Firebase
        const customerRef = ref(database, `customers/${selectedCustomer._id}`);
        await update(customerRef, { balance: newBalance });
        
        // Add transaction to customer history
        const transactionRef = ref(database, `customers/${selectedCustomer._id}/transactions`);
        const newTransactionRef = push(transactionRef);
        
        await set(newTransactionRef, {
          date: new Date().toISOString(),
          amount: transactionType === 'deposit' ? amount : -amount,
          type: transactionType,
          note: walletTransaction.note,
          balance: newBalance
        });
      }
      
      // Reset form
      setWalletTransaction({
        amount: '',
        type: 'deposit',
        note: ''
      });
      
      setShowCustomerWalletModal(false);
    } catch (error) {
      console.error('Error processing wallet transaction:', error);
    }
  };

  // Sync data with Firebase
  const syncWithFirebase = async () => {
    if (isDemo) {
      try {
        setIsSyncing(true);
        setSyncStatus('Syncing data with Firebase...');
        
        // Sync products
        setSyncStatus('Syncing products...');
        const productsRef = ref(database, 'products');
        await remove(productsRef);
        
        for (const product of products) {
          const newProductRef = push(productsRef);
          const { _id, ...productData } = product;
          await set(newProductRef, productData);
        }
        
        // Sync sales
        setSyncStatus('Syncing sales...');
        const salesRef = ref(database, 'sales');
        await remove(salesRef);
        
        for (const sale of sales) {
          const newSaleRef = push(salesRef);
          const { _id, ...saleData } = sale;
          await set(newSaleRef, saleData);
        }
        
        // Sync categories
        setSyncStatus('Syncing categories...');
        const categoriesRef = ref(database, 'categories');
        await set(categoriesRef, categories);
        
        // Sync customers
        setSyncStatus('Syncing customers...');
        const customersRef = ref(database, 'customers');
        await remove(customersRef);
        
        for (const customer of customers) {
          const newCustomerRef = push(customersRef);
          const { _id, ...customerData } = customer;
          await set(newCustomerRef, customerData);
        }
        
        // Sync settings
        setSyncStatus('Syncing settings...');
        const settingsRef = ref(database, 'settings');
        await set(settingsRef, storeSettings);
        
        setSyncStatus('Sync completed successfully!');
        setTimeout(() => {
          setIsSyncing(false);
          setSyncStatus('');
        }, 2000);
      } catch (error) {
        console.error('Error syncing with Firebase:', error);
        setSyncStatus(`Sync failed: ${error.message}`);
        setTimeout(() => {
          setIsSyncing(false);
          setSyncStatus('');
        }, 3000);
      }
    }
  };

  // Filter products based on search and category
  const filteredProducts = products.filter(product => {
    const matchesSearch = product.name.toLowerCase().includes(searchQuery.toLowerCase()) || 
                         (product.barcode && product.barcode.includes(searchQuery));
    const matchesCategory = selectedCategory === 'all' || product.category === selectedCategory;
    
    return matchesSearch && matchesCategory;
  });

  // Calculate dashboard metrics
  const calculateDailyTotal = () => {
    const today = new Date().toISOString().split('T')[0];
    return sales
      .filter(sale => sale.date.startsWith(today))
      .reduce((sum, sale) => sum + sale.total, 0);
  };

  const calculateTotalSales = () => {
    return sales.reduce((sum, sale) => sum + sale.total, 0);
  };

  const calculateAverageOrderValue = () => {
    if (sales.length === 0) return 0;
    return calculateTotalSales() / sales.length;
  };

  const calculateLowStockItems = () => {
    return products.filter(product => product.stock < 10).length;
  };

  // Check if user has admin privileges
  const isAdmin = user && (user.role === 'admin' || user.role === 'manager');

  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-screen bg-slate-50">
        <div className="text-center">
          <div className="w-16 h-16 border-4 border-t-blue-600 border-blue-200 rounded-full animate-spin mx-auto"></div>
          <p className="mt-4 text-lg text-gray-700">Loading POS System...</p>
        </div>
      </div>
    );
  }

  if (!isAuthenticated) {
    return <LoginScreen 
      onLogin={handleLogin} 
      registeredUsers={registeredUsers} 
      handleFirebaseLogin={handleFirebaseLogin}
      loginEmail={loginEmail}
      setLoginEmail={setLoginEmail}
      loginPassword={loginPassword}
      setLoginPassword={setLoginPassword}
      loginError={loginError}
    />;
  }

  return (
    <div className="flex flex-col h-screen bg-slate-50">
      {/* Header */}
      <header className="bg-[#1a365d] text-white p-4 shadow-md">
        <div className="container mx-auto flex justify-between items-center">
          <h1 className="text-2xl font-bold">POS System {isDemo && <span className="text-sm bg-yellow-500 text-black px-2 py-1 rounded ml-2">DEMO MODE</span>}</h1>
          <div className="flex items-center space-x-4">
            <div className="flex items-center space-x-2">
              <User size={20} />
              <span>{user.username} ({user.role})</span>
            </div>
            {isAdmin && (
              <>
                <button 
                  onClick={() => setShowRegisterModal(true)}
                  className="flex items-center space-x-1 bg-[#4fd1c5] hover:bg-[#38b2ac] px-3 py-1 rounded"
                >
                  <Plus size={16} />
                  <span>Add User</span>
                </button>
                <button 
                  onClick={() => setShowSettingsModal(true)}
                  className="flex items-center space-x-1 bg-[#4fd1c5] hover:bg-[#38b2ac] px-3 py-1 rounded"
                >
                  <Settings size={16} />
                  <span>Settings</span>
                </button>
              </>
            )}
            {isDemo && (
              <button 
                onClick={syncWithFirebase}
                disabled={isSyncing}
                className="flex items-center space-x-1 bg-[#4fd1c5] hover:bg-[#38b2ac] px-3 py-1 rounded"
              >
                <Database size={16} />
                <span>{isSyncing ? 'Syncing...' : 'Sync to Firebase'}</span>
              </button>
            )}
            <button 
              onClick={handleLogout}
              className="flex items-center space-x-1 bg-red-600 hover:bg-red-700 px-3 py-1 rounded"
            >
              <LogOut size={16} />
              <span>Logout</span>
            </button>
          </div>
        </div>
      </header>

      {/* Navigation */}
      <nav className="bg-white shadow-sm">
        <div className="container mx-auto">
          <ul className="flex">
            <li>
              <button 
                onClick={() => setActiveTab('pos')}
                className={`flex items-center space-x-2 px-6 py-4 ${activeTab === 'pos' ? 'border-b-2 border-[#ff6b6b] text-[#1a365d] font-medium' : 'text-gray-600'}`}
              >
                <ShoppingCart size={20} />
                <span>Point of Sale</span>
              </button>
            </li>
            <li>
              <button 
                onClick={() => setActiveTab('inventory')}
                className={`flex items-center space-x-2 px-6 py-4 ${activeTab === 'inventory' ? 'border-b-2 border-[#ff6b6b] text-[#1a365d] font-medium' : 'text-gray-600'}`}
              >
                <Package size={20} />
                <span>Inventory</span>
              </button>
            </li>
            <li>
              <button 
                onClick={() => setActiveTab('customers')}
                className={`flex items-center space-x-2 px-6 py-4 ${activeTab === 'customers' ? 'border-b-2 border-[#ff6b6b] text-[#1a365d] font-medium' : 'text-gray-600'}`}
              >
                <User size={20} />
                <span>Customers</span>
              </button>
            </li>
            <li>
              <button 
                onClick={() => setActiveTab('reports')}
                className={`flex items-center space-x-2 px-6 py-4 ${activeTab === 'reports' ? 'border-b-2 border-[#ff6b6b] text-[#1a365d] font-medium' : 'text-gray-600'}`}
              >
                <BarChart2 size={20} />
                <span>Reports</span>
              </button>
            </li>
          </ul>
        </div>
      </nav>

      {/* Sync Status */}
      {syncStatus && (
        <div className="bg-blue-50 text-blue-700 px-4 py-2 text-center">
          {syncStatus}
        </div>
      )}

      {/* Main Content */}
      <main className="flex-1 overflow-hidden">
        {activeTab === 'pos' && (
          <div className="h-full flex">
            {/* Product Catalog */}
            <div className="w-2/3 p-6 overflow-y-auto">
              <div className="mb-6">
                <div className="flex space-x-4 mb-4">
                  <div className="relative flex-1">
                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
                    <input
                      type="text"
                      placeholder="Search products by name or barcode..."
                      value={searchQuery}
                      onChange={(e) => setSearchQuery(e.target.value)}
                      className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4fd1c5]"
                    />
                  </div>
                  <select
                    value={selectedCategory}
                    onChange={(e) => setSelectedCategory(e.target.value)}
                    className="border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-[#4fd1c5]"
                  >
                    <option value="all">All Categories</option>
                    {categories.map((category, index) => (
                      <option key={index} value={category}>{category}</option>
                    ))}
                  </select>
                </div>
              </div>

              {filteredProducts.length === 0 ? (
                <div className="text-center py-10">
                  <Package size={48} className="mx-auto text-gray-300 mb-4" />
                  <p className="text-gray-500">No products found</p>
                  {products.length === 0 && (
                    <button
                      onClick={() => setShowAddProductModal(true)}
                      className="mt-4 px-4 py-2 bg-[#4fd1c5] hover:bg-[#38b2ac] text-white rounded-lg"
                    >
                      Add Your First Product
                    </button>
                  )}
                </div>
              ) : (
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                  {filteredProducts.map(product => (
                    <div 
                      key={product._id} 
                      className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow"
                    >
                      <div className="p-4">
                        <div className="flex justify-between items-start">
                          <h3 className="text-lg font-medium text-gray-800">{product.name}</h3>
                          <span className="text-lg font-semibold text-[#1a365d]">${product.price.toFixed(2)}</span>
                        </div>
                        <p className="text-sm text-gray-500 mt-1">{product.category}</p>
                        <p className="text-sm text-gray-600 mt-2">{product.description}</p>
                        <div className="flex justify-between items-center mt-4">
                          <span className={`text-sm ${product.stock > 10 ? 'text-green-600' : 'text-red-600'}`}>
                            Stock: {product.stock}
                          </span>
                          <button
                            onClick={() => addToCart(product)}
                            disabled={product.stock <= 0}
                            className={`px-4 py-2 rounded-lg ${
                              product.stock > 0 
                                ? 'bg-[#ff6b6b] hover:bg-[#ff5252] text-white' 
                                : 'bg-gray-300 text-gray-500 cursor-not-allowed'
                            }`}
                          >
                            Add to Cart
                          </button>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>

            {/* Shopping Cart */}
            <div className="w-1/3 bg-white border-l border-gray-200 flex flex-col">
              <div className="p-6 border-b border-gray-200">
                <h2 className="text-xl font-semibold text-gray-800">Shopping Cart</h2>
                {customers.length > 0 && (
                  <div className="mt-4">
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Customer (Optional)
                    </label>
                    <div className="flex space-x-2">
                      <select
                        value={selectedCustomer ? selectedCustomer._id : ''}
                        onChange={(e) => {
                          const customerId = e.target.value;
                          if (customerId) {
                            const customer = customers.find(c => c._id === customerId);
                            setSelectedCustomer(customer);
                          } else {
                            setSelectedCustomer(null);
                          }
                        }}
                        className="flex-1 border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#4fd1c5]"
                      >
                        <option value="">Select a customer</option>
                        {customers.map(customer => (
                          <option key={customer._id} value={customer._id}>
                            {customer.name} {customer.balance > 0 ? `($${customer.balance.toFixed(2)})` : ''}
                          </option>
                        ))}
                      </select>
                      <button
                        onClick={() => setShowAddCustomerModal(true)}
                        className="p-2 bg-[#4fd1c5] hover:bg-[#38b2ac] text-white rounded-lg"
                      >
                        <Plus size={20} />
                      </button>
                    </div>
                    {selectedCustomer && (
                      <div className="mt-2 p-2 bg-blue-50 rounded-lg">
                        <div className="flex justify-between items-center">
                          <div>
                            <p className="text-sm font-medium">{selectedCustomer.name}</p>
                            <p className="text-xs text-gray-500">{selectedCustomer.phone}</p>
                          </div>
                          <div className="text-right">
                            <p className="text-sm font-medium">Wallet Balance</p>
                            <p className={`text-sm ${selectedCustomer.balance > 0 ? 'text-green-600' : 'text-gray-600'}`}>
                              ${selectedCustomer.balance.toFixed(2)}
                            </p>
                          </div>
                        </div>
                        <div className="flex justify-end mt-2">
                          <button
                            onClick={() => setShowCustomerWalletModal(true)}
                            className="text-xs text-blue-600 hover:text-blue-800"
                          >
                            Manage Wallet
                          </button>
                        </div>
                      </div>
                    )}
                  </div>
                )}
              </div>
              
              <div className="flex-1 overflow-y-auto p-4">
                {cart.length === 0 ? (
                  <div className="text-center py-10">
                    <ShoppingCart size={48} className="mx-auto text-gray-300 mb-4" />
                    <p className="text-gray-500">Your cart is empty</p>
                  </div>
                ) : (
                  <div className="space-y-4">
                    {cart.map(item => (
                      <div key={item._id} className="flex items-center justify-between bg-gray-50 p-3 rounded-lg">
                        <div className="flex-1">
                          <h3 className="font-medium">{item.name}</h3>
                          <p className="text-sm text-gray-500">${item.price.toFixed(2)} each</p>
                        </div>
                        <div className="flex items-center space-x-2">
                          <button 
                            onClick={() => updateCartItemQuantity(item._id, item.quantity - 1)}
                            className="p-1 rounded-full bg-gray-200 hover:bg-gray-300"
                          >
                            <Minus size={16} />
                          </button>
                          <span className="w-8 text-center">{item.quantity}</span>
                          <button 
                            onClick={() => updateCartItemQuantity(item._id, item.quantity + 1)}
                            className="p-1 rounded-full bg-gray-200 hover:bg-gray-300"
                            disabled={item.quantity >= products.find(p => p._id === item._id).stock}
                          >
                            <Plus size={16} />
                          </button>
                          <button 
                            onClick={() => removeFromCart(item._id)}
                            className="p-1 rounded-full bg-red-100 text-red-600 hover:bg-red-200 ml-2"
                          >
                            <Trash2 size={16} />
                          </button>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </div>
              
              <div className="p-6 border-t border-gray-200">
                <div className="flex justify-between mb-2">
                  <span className="text-gray-600">Subtotal:</span>
                  <span className="font-medium">${calculateTotal().toFixed(2)}</span>
                </div>
                <div className="flex justify-between mb-4">
                  <span className="text-gray-600">Tax ({storeSettings.taxRate}%):</span>
                  <span className="font-medium">${(calculateTotal() * (storeSettings.taxRate / 100)).toFixed(2)}</span>
                </div>
                <div className="flex justify-between mb-6">
                  <span className="text-lg font-semibold">Total:</span>
                  <span className="text-lg font-semibold">${(calculateTotal() * (1 + storeSettings.taxRate / 100)).toFixed(2)}</span>
                </div>
                <button
                  onClick={() => setShowCheckoutModal(true)}
                  disabled={cart.length === 0}
                  className={`w-full py-3 rounded-lg ${
                    cart.length > 0 
                      ? 'bg-[#4fd1c5] hover:bg-[#38b2ac] text-white' 
                      : 'bg-gray-300 text-gray-500 cursor-not-allowed'
                  }`}
                >
                  Checkout
                </button>
              </div>
            </div>
          </div>
        )}

        {activeTab === 'inventory' && (
          <div className="container mx-auto p-6">
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-2xl font-semibold text-gray-800">Inventory Management</h2>
              <button
                onClick={() => setShowAddProductModal(true)}
                className="bg-[#4fd1c5] hover:bg-[#38b2ac] text-white px-4 py-2 rounded-lg flex items-center"
              >
                <Plus size={20} className="mr-2" />
                Add Product
              </button>
            </div>
            
            <div className="bg-white rounded-lg shadow-sm overflow-hidden">
              <div className="p-4 border-b border-gray-200">
                <div className="flex space-x-4">
                  <div className="relative flex-1">
                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
                    <input
                      type="text"
                      placeholder="Search products..."
                      value={searchQuery}
                      onChange={(e) => setSearchQuery(e.target.value)}
                      className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4fd1c5]"
                    />
                  </div>
                  <select
                    value={selectedCategory}
                    onChange={(e) => setSelectedCategory(e.target.value)}
                    className="border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-[#4fd1c5]"
                  >
                    <option value="all">All Categories</option>
                    {categories.map((category, index) => (
                      <option key={index} value={category}>{category}</option>
                    ))}
                  </select>
                </div>
              </div>
              
              {products.length === 0 ? (
                <div className="text-center py-10">
                  <Package size={48} className="mx-auto text-gray-300 mb-4" />
                  <p className="text-gray-500">No products found</p>
                  <button
                    onClick={() => setShowAddProductModal(true)}
                    className="mt-4 px-4 py-2 bg-[#4fd1c5] hover:bg-[#38b2ac] text-white rounded-lg"
                  >
                    Add Your First Product
                  </button>
                </div>
              ) : (
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead className="bg-gray-50">
                      <tr>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Stock</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Barcode</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                      </tr>
                    </thead>
                    <tbody className="bg-white divide-y divide-gray-200">
                      {filteredProducts.map(product => (
                        <tr key={product._id}>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <div className="text-sm font-medium text-gray-900">{product.name}</div>
                            <div className="text-sm text-gray-500">{product.description}</div>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{product.category}</td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${product.price.toFixed(2)}</td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
                              product.stock > 10 
                                ? 'bg-green-100 text-green-800' 
                                : product.stock > 0 
                                  ? 'bg-yellow-100 text-yellow-800' 
                                  : 'bg-red-100 text-red-800'
                            }`}>
                              {product.stock}
                            </span>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{product.barcode}</td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <button className="text-[#4fd1c5] hover:text-[#38b2ac] mr-3">Edit</button>
                            <button className="text-red-600 hover:text-red-900">Delete</button>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
            </div>
          </div>
        )}

        {activeTab === 'customers' && (
          <div className="container mx-auto p-6">
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-2xl font-semibold text-gray-800">Customer Management</h2>
              <button
                onClick={() => setShowAddCustomerModal(true)}
                className="bg-[#4fd1c5] hover:bg-[#38b2ac] text-white px-4 py-2 rounded-lg flex items-center"
              >
                <Plus size={20} className="mr-2" />
                Add Customer
              </button>
            </div>
            
            <div className="bg-white rounded-lg shadow-sm overflow-hidden">
              <div className="p-4 border-b border-gray-200">
                <div className="relative">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
                  <input
                    type="text"
                    placeholder="Search customers..."
                    className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4fd1c5]"
                  />
                </div>
              </div>
              
              {customers.length === 0 ? (
                <div className="text-center py-10">
                  <User size={48} className="mx-auto text-gray-300 mb-4" />
                  <p className="text-gray-500">No customers found</p>
                  <button
                    onClick={() => setShowAddCustomerModal(true)}
                    className="mt-4 px-4 py-2 bg-[#4fd1c5] hover:bg-[#38b2ac] text-white rounded-lg"
                  >
                    Add Your First Customer
                  </button>
                </div>
              ) : (
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead className="bg-gray-50">
                      <tr>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contact</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Address</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Wallet Balance</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                      </tr>
                    </thead>
                    <tbody className="bg-white divide-y divide-gray-200">
                      {customers.map(customer => (
                        <tr key={customer._id}>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <div className="text-sm font-medium text-gray-900">{customer.name}</div>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <div className="text-sm text-gray-500">{customer.phone}</div>
                            <div className="text-sm text-gray-500">{customer.email}</div>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{customer.address}</td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
                              customer.balance > 0 
                                ? 'bg-green-100 text-green-800' 
                                : 'bg-gray-100 text-gray-800'
                            }`}>
                              ${customer.balance.toFixed(2)}
                            </span>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <button 
                              onClick={() => {
                                setSelectedCustomer(customer);
                                setShowCustomerWalletModal(true);
                              }}
                              className="text-[#4fd1c5] hover:text-[#38b2ac] mr-3"
                            >
                              Wallet
                            </button>
                            <button className="text-[#4fd1c5] hover:text-[#38b2ac] mr-3">Edit</button>
                            <button className="text-red-600 hover:text-red-900">Delete</button>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
            </div>
          </div>
        )}

        {activeTab === 'reports' && (
          <div className="container mx-auto p-6">
            <h2 className="text-2xl font-semibold text-gray-800 mb-6">Reports & Analytics</h2>
            
            {/* Dashboard Cards */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
              <div className="bg-white rounded-lg shadow-sm p-6 border border-gray-200">
                <h3 className="text-gray-500 text-sm font-medium mb-2">Today's Sales</h3>
                <p className="text-3xl font-bold text-gray-800">${calculateDailyTotal().toFixed(2)}</p>
              </div>
              
              <div className="bg-white rounded-lg shadow-sm p-6 border border-gray-200">
                <h3 className="text-gray-500 text-sm font-medium mb-2">Total Sales</h3>
                <p className="text-3xl font-bold text-gray-800">${calculateTotalSales().toFixed(2)}</p>
              </div>
              
              <div className="bg-white rounded-lg shadow-sm p-6 border border-gray-200">
                <h3 className="text-gray-500 text-sm font-medium mb-2">Average Order Value</h3>
                <p className="text-3xl font-bold text-gray-800">${calculateAverageOrderValue().toFixed(2)}</p>
              </div>
              
              <div className="bg-white rounded-lg shadow-sm p-6 border border-gray-200">
                <h3 className="text-gray-500 text-sm font-medium mb-2">Low Stock Items</h3>
                <p className="text-3xl font-bold text-gray-800">{calculateLowStockItems()}</p>
              </div>
            </div>
            
            {/* Sales History */}
            <div className="bg-white rounded-lg shadow-sm overflow-hidden mb-8">
              <div className="px-6 py-4 border-b border-gray-200">
                <h3 className="text-lg font-medium text-gray-800">Recent Sales</h3>
              </div>
              
              {sales.length === 0 ? (
                <div className="text-center py-10">
                  <BarChart2 size={48} className="mx-auto text-gray-300 mb-4" />
                  <p className="text-gray-500">No sales data available yet</p>
                </div>
              ) : (
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead className="bg-gray-50">
                      <tr>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Transaction ID</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Items</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Payment Method</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total</th>
                      </tr>
                    </thead>
                    <tbody className="bg-white divide-y divide-gray-200">
                      {sales.map(sale => (
                        <tr key={sale._id}>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {new Date(sale.date).toLocaleDateString()}
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{sale._id}</td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{sale.items}</td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {sale.customer ? sale.customer.name : '-'}
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            <span className={`px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${
                              sale.paymentMethod === 'cash' 
                                ? 'bg-green-100 text-green-800' 
                                : sale.paymentMethod === 'credit'
                                  ? 'bg-blue-100 text-blue-800'
                                  : 'bg-purple-100 text-purple-800'
                            }`}>
                              {sale.paymentMethod === 'cash' 
                                ? 'Cash' 
                                : sale.paymentMethod === 'credit'
                                  ? 'Credit Card'
                                  : 'Wallet'}
                            </span>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                            ${sale.total.toFixed(2)}
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
            </div>
            
            {/* Low Stock Items */}
            <div className="bg-white rounded-lg shadow-sm overflow-hidden">
              <div className="px-6 py-4 border-b border-gray-200">
                <h3 className="text-lg font-medium text-gray-800">Low Stock Items</h3>
              </div>
              
              {products.filter(product => product.stock < 10).length === 0 ? (
                <div className="text-center py-10">
                  <Package size={48} className="mx-auto text-gray-300 mb-4" />
                  <p className="text-gray-500">No low stock items</p>
                </div>
              ) : (
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead className="bg-gray-50">
                      <tr>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Current Stock</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                      </tr>
                    </thead>
                    <tbody className="bg-white divide-y divide-gray-200">
                      {products.filter(product => product.stock < 10).map(product => (
                        <tr key={product._id}>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <div className="text-sm font-medium text-gray-900">{product.name}</div>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{product.category}</td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{product.stock}</td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
                              product.stock > 5 
                                ? 'bg-yellow-100 text-yellow-800' 
                                : 'bg-red-100 text-red-800'
                            }`}>
                              {product.stock > 5 ? 'Low Stock' : 'Critical'}
                            </span>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
            </div>
          </div>
        )}
      </main>

      {/* Checkout Modal */}
      {showCheckoutModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg shadow-lg w-full max-w-md">
            <div className="flex justify-between items-center p-6 border-b border-gray-200">
              <h2 className="text-xl font-semibold text-gray-800">Checkout</h2>
              <button onClick={() => setShowCheckoutModal(false)} className="text-gray-500 hover:text-gray-700">
                <X size={24} />
              </button>
            </div>
            
            <div className="p-6">
              <div className="mb-6">
                <h3 className="text-lg font-medium text-gray-800 mb-4">Order Summary</h3>
                <div className="space-y-2 mb-4">
                  {cart.map(item => (
                    <div key={item._id} className="flex justify-between">
                      <span className="text-gray-600">{item.name} x {item.quantity}</span>
                      <span className="font-medium">${(item.price * item.quantity).toFixed(2)}</span>
                    </div>
                  ))}
                </div>
                <div className="border-t border-gray-200 pt-4 space-y-2">
                  <div className="flex justify-between">
                    <span className="text-gray-600">Subtotal</span>
                    <span className="font-medium">${calculateTotal().toFixed(2)}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-600">Tax ({storeSettings.taxRate}%)</span>
                    <span className="font-medium">${(calculateTotal() * (storeSettings.taxRate / 100)).toFixed(2)}</span>
                  </div>
                  <div className="flex justify-between text-lg font-semibold">
                    <span>Total</span>
                    <span>${(calculateTotal() * (1 + storeSettings.taxRate / 100)).toFixed(2)}</span>
                  </div>
                </div>
              </div>
              
              <div className="mb-6">
                <h3 className="text-lg font-medium text-gray-800 mb-4">Payment Method</h3>
                <div className="grid grid-cols-3 gap-4">
                  <button
                    onClick={() => setPaymentMethod('cash')}
                    className={`py-3 rounded-lg border flex flex-col items-center justify-center ${
                      paymentMethod === 'cash' 
                        ? 'bg-[#4fd1c5] text-white border-[#4fd1c5]' 
                        : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'
                    }`}
                  >
                    <DollarSign size={20} className="mb-1" />
                    <span className="text-sm">Cash</span>
                  </button>
                  <button
                    onClick={() => setPaymentMethod('credit')}
                    className={`py-3 rounded-lg border flex flex-col items-center justify-center ${
                      paymentMethod === 'credit' 
                        ? 'bg-[#4fd1c5] text-white border-[#4fd1c5]' 
                        : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'
                    }`}
                  >
                    <CreditCard size={20} className="mb-1" />
                    <span className="text-sm">Credit Card</span>
                  </button>
                  {selectedCustomer && selectedCustomer.balance >= calculateTotal() * (1 + storeSettings.taxRate / 100) && (
                    <button
                      onClick={() => setPaymentMethod('wallet')}
                      className={`py-3 rounded-lg border flex flex-col items-center justify-center ${
                        paymentMethod === 'wallet' 
                          ? 'bg-[#4fd1c5] text-white border-[#4fd1c5]' 
                          : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'
                      }`}
                    >
                      <Smartphone size={20} className="mb-1" />
                      <span className="text-sm">Wallet</span>
                    </button>
                  )}
                </div>
                
                {selectedCustomer && selectedCustomer.balance > 0 && selectedCustomer.balance < calculateTotal() * (1 + storeSettings.taxRate / 100) && (
                  <div className="mt-2 text-sm text-yellow-600">
                    Customer wallet balance (${selectedCustomer.balance.toFixed(2)}) is insufficient for the total amount.
                  </div>
                )}
              </div>
              
              {paymentMethod === 'cash' && (
                <div className="mb-6">
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Amount Received
                  </label>
                  <div className="relative">
                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                      <DollarSign size={16} className="text-gray-400" />
                    </div>
                    <input
                      type="number"
                      value={amountReceived}
                      onChange={(e) => setAmountReceived(e.target.value)}
                      className="pl-10 pr-4 py-2 w-full border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4fd1c5]"
                      placeholder="0.00"
                    />
                  </div>
                  {parseFloat(amountReceived) > 0 && (
                    <div className="mt-2 text-right">
                      <span className="text-sm text-gray-600">
                        Change: ${Math.max(0, parseFloat(amountReceived) - (calculateTotal() * (1 + storeSettings.taxRate / 100))).toFixed(2)}
                      </span>
                    </div>
                  )}
                </div>
              )}
              
              <button
                onClick={processCheckout}
                disabled={
                  (paymentMethod === 'cash' && (parseFloat(amountReceived) < calculateTotal() * (1 + storeSettings.taxRate / 100) || !amountReceived)) ||
                  (paymentMethod === 'wallet' && (!selectedCustomer || selectedCustomer.balance < calculateTotal() * (1 + storeSettings.taxRate / 100)))
                }
                className={`w-full py-3 rounded-lg ${
                  (paymentMethod === 'credit' || 
                   (paymentMethod === 'cash' && parseFloat(amountReceived) >= calculateTotal() * (1 + storeSettings.taxRate / 100)) ||
                   (paymentMethod === 'wallet' && selectedCustomer && selectedCustomer.balance >= calculateTotal() * (1 + storeSettings.taxRate / 100)))
                    ? 'bg-[#ff6b6b] hover:bg-[#ff5252] text-white' 
                    : 'bg-gray-300 text-gray-500 cursor-not-allowed'
                }`}
              >
                Complete Purchase
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Receipt Modal */}
      {showReceiptModal && currentReceipt && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg shadow-lg w-full max-w-md">
            <div className="flex justify-between items-center p-6 border-b border-gray-200">
              <h2 className="text-xl font-semibold text-gray-800">Receipt</h2>
              <div className="flex space-x-2">
                <button className="text-gray-500 hover:text-gray-700">
                  <Printer size={20} />
                </button>
                <button onClick={() => setShowReceiptModal(false)} className="text-gray-500 hover:text-gray-700">
                  <X size={20} />
                </button>
              </div>
            </div>
            
            <div className="p-6">
              <div className="text-center mb-6">
                <h3 className="text-xl font-bold text-gray-800">{storeSettings.name}</h3>
                <p className="text-gray-500">{storeSettings.address}</p>
                <p className="text-gray-500">Tel: {storeSettings.phone}</p>
              </div>
              
              <div className="mb-4">
                <div className="flex justify-between text-sm text-gray-600 mb-2">
                  <span>Receipt #:</span>
                  <span>{currentReceipt._id}</span>
                </div>
                <div className="flex justify-between text-sm text-gray-600 mb-2">
                  <span>Date:</span>
                  <span>{new Date(currentReceipt.date).toLocaleString()}</span>
                </div>
                {currentReceipt.customer && (
                  <div className="flex justify-between text-sm text-gray-600">
                    <span>Customer:</span>
                    <span>{currentReceipt.customer.name}</span>
                  </div>
                )}
              </div>
              
              <div className="border-t border-b border-gray-200 py-4 mb-4">
                <div className="flex justify-between text-sm font-medium text-gray-800 mb-2">
                  <span>Item</span>
                  <div className="flex">
                    <span className="w-16 text-right">Qty</span>
                    <span className="w-20 text-right">Price</span>
                    <span className="w-24 text-right">Total</span>
                  </div>
                </div>
                {currentReceipt.items.map(item => (
                  <div key={item._id} className="flex justify-between text-sm text-gray-600 mb-2">
                    <span>{item.name}</span>
                    <div className="flex">
                      <span className="w-16 text-right">{item.quantity}</span>
                      <span className="w-20 text-right">${item.price.toFixed(2)}</span>
                      <span className="w-24 text-right">${(item.price * item.quantity).toFixed(2)}</span>
                    </div>
                  </div>
                ))}
              </div>
              
              <div className="space-y-2 mb-6">
                <div className="flex justify-between text-sm text-gray-600">
                  <span>Subtotal</span>
                  <span>${currentReceipt.subtotal.toFixed(2)}</span>
                </div>
                <div className="flex justify-between text-sm text-gray-600">
                  <span>Tax ({currentReceipt.taxRate}%)</span>
                  <span>${currentReceipt.taxAmount.toFixed(2)}</span>
                </div>
                <div className="flex justify-between text-lg font-semibold">
                  <span>Total</span>
                  <span>${currentReceipt.total.toFixed(2)}</span>
                </div>
                
                {currentReceipt.paymentMethod === 'cash' && (
                  <>
                    <div className="flex justify-between text-sm text-gray-600">
                      <span>Amount Received</span>
                      <span>${parseFloat(currentReceipt.amountReceived).toFixed(2)}</span>
                    </div>
                    <div className="flex justify-between text-sm text-gray-600">
                      <span>Change</span>
                      <span>${currentReceipt.change.toFixed(2)}</span>
                    </div>
                  </>
                )}
                
                <div className="flex justify-between text-sm text-gray-600 pt-2 border-t border-gray-200">
                  <span>Payment Method</span>
                  <span>
                    {currentReceipt.paymentMethod === 'cash' 
                      ? 'Cash' 
                      : currentReceipt.paymentMethod === 'credit'
                        ? 'Credit Card'
                        : 'Customer Wallet'}
                  </span>
                </div>
              </div>
              
              <div className="text-center text-sm text-gray-500">
                <p>{storeSettings.receiptFooter}</p>
              </div>
              
              <div className="mt-6">
                <button
                  onClick={() => setShowReceiptModal(false)}
                  className="w-full py-3 rounded-lg bg-[#4fd1c5] hover:bg-[#38b2ac] text-white"
                >
                  Close
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Add Product Modal */}
      {showAddProductModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg shadow-lg w-full max-w-md">
            <div className="flex justify-between items-center p-6 border-b border-gray-200">
              <h2 className="text-xl font-semibold text-gray-800">Add New Product</h2>
              <button onClick={() => setShowAddProductModal(false)} className="text-gray-500 hover:text-gray-700">
                <X size={24} />
              </button>
            </div>
            
            <div className="p-6">
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Product Name
                  </label>
                  <input
                    type="text"
                    value={newProduct.name}
                    onChange={(e) => setNewProduct({...newProduct, name: e.target.value})}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4fd1c5]"
                    placeholder="Enter product name"
                  />
                </div>
                
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Price
                    </label>
                    <div className="relative">
                      <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <DollarSign size={16} className="text-gray-400" />
                      </div>
                      <input
                        type="number"
                        value={newProduct.price}
                        onChange={(e) => setNewProduct({...newProduct, price: e.target.value})}
                        className="pl-10 pr-4 py-2 w-full border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4fd1c5]"
                        placeholder="0.00"
                        step="0.01"
                      />
                    </div>
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Stock Quantity
                    </label>
                    <input
                      type="number"
                      value={newProduct.stock}
                      onChange={(e) => setNewProduct({...newProduct, stock: e.target.value})}
                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4fd1c5]"
                      placeholder="Enter quantity"
                    />
                  </div>
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Category
                  </label>
                  <select
                    value={newProduct.category}
                    onChange={(e) => setNewProduct({...newProduct, category: e.target.value})}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4fd1c5]"
                  >
                    <option value="">Select a category</option>
                    {categories.map((category, index) => (
                      <option key={index} value={category}>{category}</option>
                    ))}
                  </select>
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Barcode
                  </label>
                  <input
                    type="text"
                    value={newProduct.barcode}
                    onChange={(e) => setNewProduct({...newProduct, barcode: e.target.value})}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4fd1c5]"
                    placeholder="Enter barcode"
                  />
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Description
                  </label>
                  <textarea
                    value={newProduct.description}
                    onChange={(e) => setNewProduct({...newProduct, description: e.target.value})}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4fd1c5]"
                    placeholder="Enter product description"
                    rows="3"
                  ></textarea>
                </div>
              </div>
              
              <div className="mt-6 flex space-x-4">
                <button
                  onClick={() => setShowAddProductModal(false)}
                  className="flex-1 py-2 border border-gray-300 rounded-lg text-gray-700 bg-white hover:bg-gray-50"
                >
                  Cancel
                </button>
                <button
                  onClick={handleAddProduct}
                  disabled={!newProduct.name || !newProduct.price || !newProduct.category || !newProduct.stock}
                  className={`flex-1 py-2 rounded-lg ${
                    newProduct.name && newProduct.price && newProduct.category && newProduct.stock
                      ? 'bg-[#4fd1c5] hover:bg-[#38b2ac] text-white' 
                      : 'bg-gray-300 text-gray-500 cursor-not-allowed'
                  }`}
                >
                  Add Product
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Add Customer Modal */}
      {showAddCustomerModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg shadow-lg w-full max-w-md">
            <div className="flex justify-between items-center p-6 border-b border-gray-200">
              <h2 className="text-xl font-semibold text-gray-800">Add New Customer</h2>
              <button onClick={() => setShowAddCustomerModal(false)} className="text-gray-500 hover:text-gray-700">
                <X size={24} />
              </button>
            </div>
            
            <div className="p-6">
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Customer Name
                  </label>
                  <input
                    type="text"
                    value={newCustomer.name}
                    onChange={(e) => setNewCustomer({...newCustomer, name: e.target.value})}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4fd1c5]"
                    placeholder="Enter customer name"
                  />
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Phone Number
                  </label>
                  <input
                    type="text"
                    value={newCustomer.phone}
                    onChange={(e) => setNewCustomer({...newCustomer, phone: e.target.value})}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4fd1c5]"
                    placeholder="Enter phone number"
                  />
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Email
                  </label>
                  <input
                    type="email"
                    value={newCustomer.email}
                    onChange={(e) => setNewCustomer({...newCustomer, email: e.target.value})}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4fd1c5]"
                    placeholder="Enter email address"
                  />
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Address
                  </label>
                  <textarea
                    value={newCustomer.address}
                    onChange={(e) => setNewCustomer({...newCustomer, address: e.target.value})}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4fd1c5]"
                    placeholder="Enter address"
                    rows="2"
                  ></textarea>
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Initial Wallet Balance
                  </label>
                  <div className="relative">
                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                      <DollarSign size={16} className="text-gray-400" />
                    </div>
                    <input
                      type="number"
                      value={newCustomer.balance}
                      onChange={(e) => setNewCustomer({...newCustomer, balance: e.target.value})}
                      className="pl-10 pr-4 py-2 w-full border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4fd1c5]"
                      placeholder="0.00"
                      step="0.01"
                    />
                  </div>
                </div>
              </div>
              
              <div className="mt-6 flex space-x-4">
                <button
                  onClick={() => setShowAddCustomerModal(false)}
                  className="flex-1 py-2 border border-gray-300 rounded-lg text-gray-700 bg-white hover:bg-gray-50"
                >
                  Cancel
                </button>
                <button
                  onClick={handleAddCustomer}
                  disabled={!newCustomer.name}
                  className={`flex-1 py-2 rounded-lg ${
                    newCustomer.name
                      ? 'bg-[#4fd1c5] hover:bg-[#38b2ac] text-white' 
                      : 'bg-gray-300 text-gray-500 cursor-not-allowed'
                  }`}
                >
                  Add Customer
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Register User Modal */}
      {showRegisterModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg shadow-lg w-full max-w-md">
            <div className="flex justify-between items-center p-6 border-b border-gray-200">
              <h2 className="text-xl font-semibold text-gray-800">Register New User</h2>
              <button onClick={() => setShowRegisterModal(false)} className="text-gray-500 hover:text-gray-700">
                <X size={24} />
              </button>
            </div>
            
            <div className="p-6">
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Username
                  </label>
                  <input
                    type="text"
                    value={newUser.username}
                    onChange={(e) => setNewUser({...newUser, username: e.target.value})}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4fd1c5]"
                    placeholder="Enter username"
                  />
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Email
                  </label>
                  <input
                    type="email"
                    value={newUser.email}
                    onChange={(e) => setNewUser({...newUser, email: e.target.value})}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4fd1c5]"
                    placeholder="Enter email address"
                  />
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Password
                  </label>
                  <div className="relative">
                    <input
                      type="password"
                      value={newUser.password}
                      onChange={(e) => setNewUser({...newUser, password: e.target.value})}
                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4fd1c5]"
                      placeholder="Enter password"
                    />
                  </div>
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Confirm Password
                  </label>
                  <div className="relative">
                    <input
                      type="password"
                      value={newUser.confirmPassword}
                      onChange={(e) => setNewUser({...newUser, confirmPassword: e.target.value})}
                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4fd1c5]"
                      placeholder="Confirm password"
                    />
                  </div>
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Role
                  </label>
                  <select
                    value={newUser.role}
                    onChange={(e) => setNewUser({...newUser, role: e.target.value})}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4fd1c5]"
                  >
                    <option value="cashier">Cashier</option>
                    <option value="manager">Manager</option>
                    <option value="admin">Admin</option>
                  </select>
                </div>
              </div>
              
              <div className="mt-6 flex space-x-4">
                <button
                  onClick={() => setShowRegisterModal(false)}
                  className="flex-1 py-2 border border-gray-300 rounded-lg text-gray-700 bg-white hover:bg-gray-50"
                >
                  Cancel
                </button>
                <button
                  onClick={handleRegisterUser}
                  disabled={!newUser.username || !newUser.password || !newUser.confirmPassword || !newUser.email || newUser.password !== newUser.confirmPassword}
                  className={`flex-1 py-2 rounded-lg ${
                    newUser.username && newUser.password && newUser.confirmPassword && newUser.email && newUser.password === newUser.confirmPassword
                      ? 'bg-[#4fd1c5] hover:bg-[#38b2ac] text-white' 
                      : 'bg-gray-300 text-gray-500 cursor-not-allowed'
                  }`}
                >
                  Register User
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Settings Modal */}
      {showSettingsModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg shadow-lg w-full max-w-md">
            <div className="flex justify-between items-center p-6 border-b border-gray-200">
              <h2 className="text-xl font-semibold text-gray-800">Store Settings</h2>
              <button onClick={() => setShowSettingsModal(false)} className="text-gray-500 hover:text-gray-700">
                <X size={24} />
              </button>
            </div>
            
            <div className="p-6">
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Store Name
                  </label>
                  <input
                    type="text"
                    value={storeSettings.name}
                    onChange={(e) => setStoreSettings({...storeSettings, name: e.target.value})}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4fd1c5]"
                    placeholder="Enter store name"
                  />
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Address
                  </label>
                  <input
                    type="text"
                    value={storeSettings.address}
                    onChange={(e) => setStoreSettings({...storeSettings, address: e.target.value})}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4fd1c5]"
                    placeholder="Enter store address"
                  />
                </div>
                
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Phone
                    </label>
                    <input
                      type="text"
                      value={storeSettings.phone}
                      onChange={(e) => setStoreSettings({...storeSettings, phone: e.target.value})}
                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4fd1c5]"
                      placeholder="Enter phone number"
                    />
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Email
                    </label>
                    <input
                      type="email"
                      value={storeSettings.email}
                      onChange={(e) => setStoreSettings({...storeSettings, email: e.target.value})}
                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4fd1c5]"
                      placeholder="Enter email address"
                    />
                  </div>
                </div>
                
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Tax Rate (%)
                    </label>
                    <input
                      type="number"
                      value={storeSettings.taxRate}
                      onChange={(e) => setStoreSettings({...storeSettings, taxRate: parseFloat(e.target.value)})}
                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4fd1c5]"
                      placeholder="Enter tax rate"
                      step="0.1"
                    />
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Currency
                    </label>
                    <select
                      value={storeSettings.currency}
                      onChange={(e) => setStoreSettings({...storeSettings, currency: e.target.value})}
                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4fd1c5]"
                    >
                      <option value="USD">USD ($)</option>
                      <option value="EUR">EUR (€)</option>
                      <option value="GBP">GBP (£)</option>
                      <option value="JPY">JPY (¥)</option>
                      <option value="CAD">CAD ($)</option>
                      <option value="AUD">AUD ($)</option>
                    </select>
                  </div>
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Receipt Footer
                  </label>
                  <textarea
                    value={storeSettings.receiptFooter}
                    onChange={(e) => setStoreSettings({...storeSettings, receiptFooter: e.target.value})}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4fd1c5]"
                    placeholder="Enter receipt footer text"
                    rows="2"
                  ></textarea>
                </div>
              </div>
              
              <div className="mt-6 flex space-x-4">
                <button
                  onClick={() => setShowSettingsModal(false)}
                  className="flex-1 py-2 border border-gray-300 rounded-lg text-gray-700 bg-white hover:bg-gray-50"
                >
                  Cancel
                </button>
                <button
                  onClick={handleUpdateSettings}
                  className="flex-1 py-2 rounded-lg bg-[#4fd1c5] hover:bg-[#38b2ac] text-white"
                >
                  Save Settings
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Customer Wallet Modal */}
      {showCustomerWalletModal && selectedCustomer && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg shadow-lg w-full max-w-md">
            <div className="flex justify-between items-center p-6 border-b border-gray-200">
              <h2 className="text-xl font-semibold text-gray-800">Customer Wallet</h2>
              <button onClick={() => setShowCustomerWalletModal(false)} className="text-gray-500 hover:text-gray-700">
                <X size={24} />
              </button>
            </div>
            
            <div className="p-6">
              <div className="mb-6">
                <div className="flex justify-between items-center mb-4">
                  <div>
                    <h3 className="text-lg font-medium text-gray-800">{selectedCustomer.name}</h3>
                    <p className="text-sm text-gray-500">{selectedCustomer.phone}</p>
                  </div>
                  <div className="text-right">
                    <p className="text-sm text-gray-500">Current Balance</p>
                    <p className="text-2xl font-bold text-gray-800">${selectedCustomer.balance.toFixed(2)}</p>
                  </div>
                </div>
                
                <div className="bg-gray-50 p-4 rounded-lg">
                  <h4 className="text-sm font-medium text-gray-700 mb-3">Add Transaction</h4>
                  
                  <div className="space-y-4">
                    <div className="flex space-x-4">
                      <button
                        onClick={() => setWalletTransaction({...walletTransaction, type: 'deposit'})}
                        className={`flex-1 py-2 rounded-lg border ${
                          walletTransaction.type === 'deposit' 
                            ? 'bg-green-600 text-white border-green-600' 
                            : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'
                        }`}
                      >
                        Deposit
                      </button>
                      <button
                        onClick={() => setWalletTransaction({...walletTransaction, type: 'withdraw'})}
                        className={`flex-1 py-2 rounded-lg border ${
                          walletTransaction.type === 'withdraw' 
                            ? 'bg-red-600 text-white border-red-600' 
                            : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'
                        }`}
                      >
                        Withdraw
                      </button>
                    </div>
                    
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">
                        Amount
                      </label>
                      <div className="relative">
                        <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                          <DollarSign size={16} className="text-gray-400" />
                        </div>
                        <input
                          type="number"
                          value={walletTransaction.amount}
                          onChange={(e) => setWalletTransaction({...walletTransaction, amount: e.target.value})}
                          className="pl-10 pr-4 py-2 w-full border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4fd1c5]"
                          placeholder="0.00"
                          step="0.01"
                        />
                      </div>
                    </div>
                    
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">
                        Note (Optional)
                      </label>
                      <input
                        type="text"
                        value={walletTransaction.note}
                        onChange={(e) => setWalletTransaction({...walletTransaction, note: e.target.value})}
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4fd1c5]"
                        placeholder="Enter transaction note"
                      />
                    </div>
                    
                    <button
                      onClick={handleWalletTransaction}
                      disabled={!walletTransaction.amount || parseFloat(walletTransaction.amount) <= 0 || (walletTransaction.type === 'withdraw' && parseFloat(walletTransaction.amount) > selectedCustomer.balance)}
                      className={`w-full py-2 rounded-lg ${
                        walletTransaction.amount && parseFloat(walletTransaction.amount) > 0 && (walletTransaction.type !== 'withdraw' || parseFloat(walletTransaction.amount) <= selectedCustomer.balance)
                          ? walletTransaction.type === 'deposit' 
                            ? 'bg-green-600 hover:bg-green-700 text-white' 
                            : 'bg-red-600 hover:bg-red-700 text-white'
                          : 'bg-gray-300 text-gray-500 cursor-not-allowed'
                      }`}
                    >
                      {walletTransaction.type === 'deposit' ? 'Add Funds' : 'Withdraw Funds'}
                    </button>
                  </div>
                </div>
              </div>
              
              <div className="mt-4">
                <button
                  onClick={() => setShowCustomerWalletModal(false)}
                  className="w-full py-2 border border-gray-300 rounded-lg text-gray-700 bg-white hover:bg-gray-50"
                >
                  Close
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// Login Screen Component
function LoginScreen({ onLogin, registeredUsers, handleFirebaseLogin, loginEmail, setLoginEmail, loginPassword, setLoginPassword, loginError }) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [isFirebaseLogin, setIsFirebaseLogin] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    if (isFirebaseLogin) {
      // Firebase login
      const user = await handleFirebaseLogin(loginEmail, loginPassword);
      if (user) {
        onLogin(user, false);
      }
    } else {
      // Simple validation for local login
      if (!username || !password) {
        setError('Please enter both username and password');
        return;
      }
      
      // Check if user exists
      const user = registeredUsers.find(u => u.username === username && u.password === password);
      
      if (user) {
        // Real login
        onLogin({ username: user.username, role: user.role }, false);
      } else {
        setError('Invalid username or password');
      }
    }
  };

  const handleDemoLogin = () => {
    // Demo login
    onLogin({ username: 'demo', role: 'admin' }, true);
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-md w-full space-y-8">
        <div>
          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
            POS System Login
          </h2>
          <p className="mt-2 text-center text-sm text-gray-600">
            Enter your credentials to access the system
          </p>
        </div>
        
        <div className="flex justify-center space-x-4 mb-4">
          <button
            onClick={() => setIsFirebaseLogin(false)}
            className={`px-4 py-2 rounded-lg ${!isFirebaseLogin ? 'bg-[#1a365d] text-white' : 'bg-gray-200 text-gray-700'}`}
          >
            Local Login
          </button>
          <button
            onClick={() => setIsFirebaseLogin(true)}
            className={`px-4 py-2 rounded-lg ${isFirebaseLogin ? 'bg-[#1a365d] text-white' : 'bg-gray-200 text-gray-700'}`}
          >
            Firebase Login
          </button>
        </div>
        
        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
          {isFirebaseLogin ? (
            <div className="rounded-md shadow-sm -space-y-px">
              <div>
                <label htmlFor="email" className="sr-only">Email</label>
                <input
                  id="email"
                  name="email"
                  type="email"
                  required
                  value={loginEmail}
                  onChange={(e) => setLoginEmail(e.target.value)}
                  className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-[#4fd1c5] focus:border-[#4fd1c5] focus:z-10 sm:text-sm"
                  placeholder="Email address"
                />
              </div>
              <div className="relative">
                <label htmlFor="firebase-password" className="sr-only">Password</label>
                <input
                  id="firebase-password"
                  name="password"
                  type={showPassword ? "text" : "password"}
                  required
                  value={loginPassword}
                  onChange={(e) => setLoginPassword(e.target.value)}
                  className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-[#4fd1c5] focus:border-[#4fd1c5] focus:z-10 sm:text-sm pr-10"
                  placeholder="Password"
                />
                <button
                  type="button"
                  className="absolute inset-y-0 right-0 pr-3 flex items-center"
                  onClick={() => setShowPassword(!showPassword)}
                >
                  {showPassword ? <EyeOff size={16} className="text-gray-400" /> : <Eye size={16} className="text-gray-400" />}
                </button>
              </div>
            </div>
          ) : (
            <div className="rounded-md shadow-sm -space-y-px">
              <div>
                <label htmlFor="username" className="sr-only">Username</label>
                <input
                  id="username"
                  name="username"
                  type="text"
                  required
                  value={username}
                  onChange={(e) => setUsername(e.target.value)}
                  className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-[#4fd1c5] focus:border-[#4fd1c5] focus:z-10 sm:text-sm"
                  placeholder="Username"
                />
              </div>
              <div className="relative">
                <label htmlFor="password" className="sr-only">Password</label>
                <input
                  id="password"
                  name="password"
                  type={showPassword ? "text" : "password"}
                  required
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-[#4fd1c5] focus:border-[#4fd1c5] focus:z-10 sm:text-sm pr-10"
                  placeholder="Password"
                />
                <button
                  type="button"
                  className="absolute inset-y-0 right-0 pr-3 flex items-center"
                  onClick={() => setShowPassword(!showPassword)}
                >
                  {showPassword ? <EyeOff size={16} className="text-gray-400" /> : <Eye size={16} className="text-gray-400" />}
                </button>
              </div>
            </div>
          )}

          {(error || loginError) && (
            <div className="text-red-600 text-sm text-center">
              {error || loginError}
            </div>
          )}

          <div>
            <button
              type="submit"
              className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-[#1a365d] hover:bg-[#0f2a4a] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#4fd1c5]"
            >
              Sign in
            </button>
          </div>
          
          {!isFirebaseLogin && (
            <div className="text-center">
              <p className="text-sm text-gray-500 mb-2">
                Default accounts:
              </p>
              <div className="grid grid-cols-3 gap-2 text-xs text-gray-500 mb-4">
                <div>
                  <p className="font-semibold">Admin</p>
                  <p>Username: admin</p>
                  <p>Password: admin123</p>
                </div>
                <div>
                  <p className="font-semibold">Manager</p>
                  <p>Username: manager</p>
                  <p>Password: manager123</p>
                </div>
                <div>
                  <p className="font-semibold">Cashier</p>
                  <p>Username: cashier</p>
                  <p>Password: cashier123</p>
                </div>
              </div>
            </div>
          )}
          
          <div className="relative">
            <div className="absolute inset-0 flex items-center">
              <div className="w-full border-t border-gray-300"></div>
            </div>
            <div className="relative flex justify-center text-sm">
              <span className="px-2 bg-gray-50 text-gray-500">Or</span>
            </div>
          </div>
          
          <button
            type="button"
            onClick={handleDemoLogin}
            className="w-full flex justify-center py-2 px-4 border border-[#4fd1c5] text-sm font-medium rounded-md text-[#4fd1c5] bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#4fd1c5]"
          >
            Try Demo Mode
          </button>
        </form>
      </div>
    </div>
  );
}