import React, { useState, useEffect, useRef, createContext, useContext } from 'react';
import { 
  Menu, X, ShoppingCart, Package, BarChart2, User, Users, Settings, LogOut, 
  Plus, Minus, Trash2, Edit, Eye, EyeOff, Search, Filter, Download, Printer,
  Save, AlertTriangle, Clock, DollarSign, CreditCard, FileText, Calendar,
  ChevronRight, ChevronDown, ChevronLeft, Check, RefreshCw, Lock, Unlock,
  ArrowRight, ArrowLeft, Home, Bell, Moon, Sun, HelpCircle
} from 'lucide-react';

// Firebase imports would go here in a real implementation
// import { initializeApp } from 'firebase/app';
// import { getAuth, signInWithEmailAndPassword, signOut, onAuthStateChanged } from 'firebase/auth';
// import { getDatabase, ref, set, get, update, remove, onValue, push } from 'firebase/database';
// import { getStorage, ref as storageRef, uploadBytes, getDownloadURL } from 'firebase/storage';

// Mock Firebase for demo purposes
const mockFirebase = {
  auth: {
    currentUser: null,
    signInWithEmailAndPassword: (email, password) => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          if (email === 'admin@example.com' && password === 'admin123') {
            mockFirebase.auth.currentUser = { uid: '1', email, displayName: 'Admin User', role: 'admin' };
            resolve({ user: mockFirebase.auth.currentUser });
          } else if (email === 'cashier@example.com' && password === 'cashier123') {
            mockFirebase.auth.currentUser = { uid: '2', email, displayName: 'Cashier User', role: 'cashier' };
            resolve({ user: mockFirebase.auth.currentUser });
          } else if (email === 'manager@example.com' && password === 'manager123') {
            mockFirebase.auth.currentUser = { uid: '3', email, displayName: 'Manager User', role: 'manager' };
            resolve({ user: mockFirebase.auth.currentUser });
          } else {
            reject(new Error('Invalid email or password'));
          }
        }, 1000);
      });
    },
    signOut: () => {
      return new Promise((resolve) => {
        setTimeout(() => {
          mockFirebase.auth.currentUser = null;
          resolve();
        }, 500);
      });
    },
    onAuthStateChanged: (callback) => {
      callback(mockFirebase.auth.currentUser);
      return () => {};
    }
  },
  database: {
    data: {
      products: [
        { id: '1', name: 'T-Shirt', price: 19.99, category: 'Clothing', stock: 45, barcode: '123456789', description: 'Cotton t-shirt', expires: false },
        { id: '2', name: 'Jeans', price: 49.99, category: 'Clothing', stock: 30, barcode: '223456789', description: 'Blue denim jeans', expires: false },
        { id: '3', name: 'Milk', price: 3.99, category: 'Dairy', stock: 25, barcode: '323456789', description: 'Fresh milk', expires: true, expiryDate: '2023-12-30' },
        { id: '4', name: 'Bread', price: 2.99, category: 'Bakery', stock: 15, barcode: '423456789', description: 'Whole wheat bread', expires: true, expiryDate: '2023-12-25' },
        { id: '5', name: 'Notebook', price: 4.99, category: 'Stationery', stock: 100, barcode: '523456789', description: 'Lined notebook', expires: false },
        { id: '6', name: 'Yogurt', price: 1.99, category: 'Dairy', stock: 20, barcode: '623456789', description: 'Greek yogurt', expires: true, expiryDate: '2023-12-28' },
        { id: '7', name: 'Water Bottle', price: 14.99, category: 'Accessories', stock: 40, barcode: '723456789', description: 'Stainless steel water bottle', expires: false },
        { id: '8', name: 'Headphones', price: 89.99, category: 'Electronics', stock: 15, barcode: '823456789', description: 'Wireless headphones', expires: false },
      ],
      categories: ['Clothing', 'Dairy', 'Bakery', 'Stationery', 'Accessories', 'Electronics'],
      customers: [
        { id: '1', name: 'John Doe', email: 'john@example.com', phone: '123-456-7890', address: '123 Main St', creditLimit: 500, creditUsed: 200 },
        { id: '2', name: 'Jane Smith', email: 'jane@example.com', phone: '234-567-8901', address: '456 Oak Ave', creditLimit: 1000, creditUsed: 750 },
        { id: '3', name: 'Bob Johnson', email: 'bob@example.com', phone: '345-678-9012', address: '789 Pine Rd', creditLimit: 300, creditUsed: 0 },
        { id: '4', name: 'Alice Brown', email: 'alice@example.com', phone: '456-789-0123', address: '321 Cedar Ln', creditLimit: 800, creditUsed: 400 },
      ],
      staff: [
        { id: '1', name: 'Admin User', email: 'admin@example.com', role: 'admin', phone: '123-456-7890' },
        { id: '2', name: 'Cashier User', email: 'cashier@example.com', role: 'cashier', phone: '234-567-8901' },
        { id: '3', name: 'Manager User', email: 'manager@example.com', role: 'manager', phone: '345-678-9012' },
      ],
      sales: [
        { 
          id: '1', 
          date: '2023-12-15T10:30:00', 
          items: [
            { productId: '1', name: 'T-Shirt', price: 19.99, quantity: 2 },
            { productId: '5', name: 'Notebook', price: 4.99, quantity: 1 }
          ],
          subtotal: 44.97,
          tax: 3.15,
          total: 48.12,
          paymentMethod: 'cash',
          customerId: '1',
          customerName: 'John Doe',
          staffId: '2',
          staffName: 'Cashier User',
          status: 'completed'
        },
        { 
          id: '2', 
          date: '2023-12-16T14:45:00', 
          items: [
            { productId: '3', name: 'Milk', price: 3.99, quantity: 2 },
            { productId: '4', name: 'Bread', price: 2.99, quantity: 1 },
            { productId: '6', name: 'Yogurt', price: 1.99, quantity: 3 }
          ],
          subtotal: 18.94,
          tax: 1.33,
          total: 20.27,
          paymentMethod: 'credit',
          customerId: '2',
          customerName: 'Jane Smith',
          staffId: '2',
          staffName: 'Cashier User',
          status: 'completed'
        },
        { 
          id: '3', 
          date: '2023-12-17T16:20:00', 
          items: [
            { productId: '8', name: 'Headphones', price: 89.99, quantity: 1 }
          ],
          subtotal: 89.99,
          tax: 6.30,
          total: 96.29,
          paymentMethod: 'credit_account',
          customerId: '2',
          customerName: 'Jane Smith',
          staffId: '3',
          staffName: 'Manager User',
          status: 'completed'
        },
      ],
      settings: {
        businessName: 'My POS Store',
        address: '123 Business St, City, State, ZIP',
        phone: '(123) 456-7890',
        email: 'contact@myposstore.com',
        taxRate: 7,
        currency: 'USD',
        receiptFooter: 'Thank you for your business!',
        lowStockThreshold: 10,
        theme: 'light'
      }
    },
    ref: (path) => ({
      path,
      set: (data) => {
        return new Promise((resolve) => {
          setTimeout(() => {
            const pathParts = path.split('/');
            let current = mockFirebase.database.data;
            
            for (let i = 0; i < pathParts.length - 1; i++) {
              if (!current[pathParts[i]]) {
                current[pathParts[i]] = {};
              }
              current = current[pathParts[i]];
            }
            
            current[pathParts[pathParts.length - 1]] = data;
            resolve();
          }, 500);
        });
      },
      update: (data) => {
        return new Promise((resolve) => {
          setTimeout(() => {
            const pathParts = path.split('/');
            let current = mockFirebase.database.data;
            
            for (let i = 0; i < pathParts.length - 1; i++) {
              if (!current[pathParts[i]]) {
                current[pathParts[i]] = {};
              }
              current = current[pathParts[i]];
            }
            
            if (!current[pathParts[pathParts.length - 1]]) {
              current[pathParts[pathParts.length - 1]] = {};
            }
            
            Object.assign(current[pathParts[pathParts.length - 1]], data);
            resolve();
          }, 500);
        });
      },
      push: () => {
        const newId = Math.random().toString(36).substring(2, 15);
        return {
          key: newId,
          set: (data) => {
            return new Promise((resolve) => {
              setTimeout(() => {
                const pathParts = path.split('/');
                let current = mockFirebase.database.data;
                
                for (let i = 0; i < pathParts.length; i++) {
                  if (!current[pathParts[i]]) {
                    current[pathParts[i]] = {};
                  }
                  current = current[pathParts[i]];
                }
                
                if (!Array.isArray(current)) {
                  current = mockFirebase.database.data[pathParts[0]] = [];
                }
                
                current.push({ ...data, id: newId });
                resolve();
              }, 500);
            });
          }
        };
      },
      remove: () => {
        return new Promise((resolve) => {
          setTimeout(() => {
            const pathParts = path.split('/');
            let current = mockFirebase.database.data;
            
            for (let i = 0; i < pathParts.length - 1; i++) {
              if (!current[pathParts[i]]) {
                return resolve();
              }
              current = current[pathParts[i]];
            }
            
            if (pathParts.length === 1) {
              delete mockFirebase.database.data[pathParts[0]];
            } else {
              delete current[pathParts[pathParts.length - 1]];
            }
            resolve();
          }, 500);
        });
      },
      onValue: (callback) => {
        setTimeout(() => {
          const pathParts = path.split('/');
          let data = mockFirebase.database.data;
          
          for (let i = 0; i < pathParts.length; i++) {
            if (!data[pathParts[i]]) {
              data = null;
              break;
            }
            data = data[pathParts[i]];
          }
          
          callback({ val: () => data });
        }, 500);
        
        return () => {};
      },
      get: () => {
        return new Promise((resolve) => {
          setTimeout(() => {
            const pathParts = path.split('/');
            let data = mockFirebase.database.data;
            
            for (let i = 0; i < pathParts.length; i++) {
              if (!data[pathParts[i]]) {
                data = null;
                break;
              }
              data = data[pathParts[i]];
            }
            
            resolve({ val: () => data });
          }, 500);
        });
      }
    })
  }
};

// Create context for global state
const AppContext = createContext();

// Main POS Application
export default function POSSystem() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [isDemo, setIsDemo] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const [activeView, setActiveView] = useState('dashboard');
  const [darkMode, setDarkMode] = useState(false);
  const [settings, setSettings] = useState(null);
  const [notification, setNotification] = useState(null);

  // Initialize app and check authentication
  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 settings
    loadSettings();
    
    setIsLoading(false);
  }, []);

  // Load settings from Firebase
  const loadSettings = async () => {
    try {
      const settingsRef = mockFirebase.database.ref('settings');
      const snapshot = await settingsRef.get();
      const settingsData = snapshot.val();
      
      if (settingsData) {
        setSettings(settingsData);
        setDarkMode(settingsData.theme === 'dark');
      }
    } catch (error) {
      console.error('Error loading settings:', error);
    }
  };

  // Handle login
  const handleLogin = (userData, demo = false) => {
    setUser(userData);
    setIsAuthenticated(true);
    setIsDemo(demo);
    
    // Save to localStorage
    localStorage.setItem('posUser', JSON.stringify(userData));
    localStorage.setItem('posIsDemo', demo.toString());
    
    // Show welcome notification
    showNotification(`Welcome, ${userData.displayName || userData.email}!`, 'success');
  };

  // Handle logout
  const handleLogout = async () => {
    try {
      await mockFirebase.auth.signOut();
      setUser(null);
      setIsAuthenticated(false);
      
      // Clear from localStorage
      localStorage.removeItem('posUser');
      localStorage.removeItem('posIsDemo');
      
      showNotification('You have been logged out successfully', 'info');
    } catch (error) {
      console.error('Error signing out:', error);
      showNotification('Error signing out', 'error');
    }
  };

  // Show notification
  const showNotification = (message, type = 'info', duration = 3000) => {
    setNotification({ message, type });
    
    if (duration) {
      setTimeout(() => {
        setNotification(null);
      }, duration);
    }
  };

  // Toggle dark mode
  const toggleDarkMode = async () => {
    const newMode = !darkMode;
    setDarkMode(newMode);
    
    // Update settings in Firebase
    if (settings) {
      const updatedSettings = { ...settings, theme: newMode ? 'dark' : 'light' };
      setSettings(updatedSettings);
      
      try {
        await mockFirebase.database.ref('settings').update(updatedSettings);
      } catch (error) {
        console.error('Error updating theme setting:', error);
      }
    }
  };

  // Context value
  const contextValue = {
    user,
    isDemo,
    settings,
    darkMode,
    showNotification,
    toggleDarkMode
  };

  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-screen bg-gray-50">
        <div className="text-center">
          <div className="w-16 h-16 border-4 border-t-indigo-600 border-indigo-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} />;
  }

  return (
    <AppContext.Provider value={contextValue}>
      <div className={`flex flex-col h-screen ${darkMode ? 'bg-gray-900 text-white' : 'bg-gray-50 text-gray-900'}`}>
        {/* Header */}
        <header className={`${darkMode ? 'bg-gray-800' : 'bg-indigo-600'} text-white p-4 shadow-md`}>
          <div className="container mx-auto flex justify-between items-center">
            <div className="flex items-center">
              <button 
                onClick={() => setMenuOpen(!menuOpen)}
                className="mr-4 p-1 rounded-full hover:bg-opacity-20 hover:bg-white"
              >
                {menuOpen ? <X size={24} /> : <Menu size={24} />}
              </button>
              <h1 className="text-xl font-bold">{settings?.businessName || 'POS System'} {isDemo && <span className="text-xs bg-yellow-500 text-black px-2 py-1 rounded ml-2">DEMO MODE</span>}</h1>
            </div>
            <div className="flex items-center space-x-4">
              <button 
                onClick={toggleDarkMode}
                className="p-1 rounded-full hover:bg-opacity-20 hover:bg-white"
                aria-label={darkMode ? 'Switch to light mode' : 'Switch to dark mode'}
              >
                {darkMode ? <Sun size={20} /> : <Moon size={20} />}
              </button>
              <button 
                onClick={() => setActiveView('notifications')}
                className="p-1 rounded-full hover:bg-opacity-20 hover:bg-white relative"
              >
                <Bell size={20} />
                <span className="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
              </button>
              <div className="flex items-center space-x-2">
                <User size={20} />
                <span className="hidden md:inline">{user.displayName || user.email}</span>
              </div>
              <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 className="hidden md:inline">Logout</span>
              </button>
            </div>
          </div>
        </header>

        {/* Main Content with Slide Menu */}
        <div className="flex flex-1 overflow-hidden">
          {/* Slide Menu */}
          <div 
            className={`fixed md:relative z-20 h-full ${darkMode ? 'bg-gray-800' : 'bg-white'} shadow-lg transition-all duration-300 ease-in-out ${
              menuOpen ? 'w-64 left-0' : 'w-0 md:w-16 -left-64 md:left-0'
            }`}
          >
            <nav className="h-full flex flex-col">
              <div className="flex-1 overflow-y-auto">
                <ul className="py-4">
                  <MenuItem 
                    icon={<Home size={20} />} 
                    label="Dashboard" 
                    onClick={() => { setActiveView('dashboard'); setMenuOpen(false); }}
                    active={activeView === 'dashboard'}
                    collapsed={!menuOpen}
                  />
                  <MenuItem 
                    icon={<ShoppingCart size={20} />} 
                    label="Point of Sale" 
                    onClick={() => { setActiveView('pos'); setMenuOpen(false); }}
                    active={activeView === 'pos'}
                    collapsed={!menuOpen}
                  />
                  <MenuItem 
                    icon={<Package size={20} />} 
                    label="Products" 
                    onClick={() => { setActiveView('products'); setMenuOpen(false); }}
                    active={activeView === 'products'}
                    collapsed={!menuOpen}
                  />
                  <MenuItem 
                    icon={<User size={20} />} 
                    label="Customers" 
                    onClick={() => { setActiveView('customers'); setMenuOpen(false); }}
                    active={activeView === 'customers'}
                    collapsed={!menuOpen}
                  />
                  <MenuItem 
                    icon={<FileText size={20} />} 
                    label="Invoices" 
                    onClick={() => { setActiveView('invoices'); setMenuOpen(false); }}
                    active={activeView === 'invoices'}
                    collapsed={!menuOpen}
                  />
                  <MenuItem 
                    icon={<BarChart2 size={20} />} 
                    label="Reports" 
                    onClick={() => { setActiveView('reports'); setMenuOpen(false); }}
                    active={activeView === 'reports'}
                    collapsed={!menuOpen}
                  />
                  <MenuItem 
                    icon={<Users size={20} />} 
                    label="Staff" 
                    onClick={() => { setActiveView('staff'); setMenuOpen(false); }}
                    active={activeView === 'staff'}
                    collapsed={!menuOpen}
                    disabled={user.role !== 'admin'}
                  />
                  <MenuItem 
                    icon={<Settings size={20} />} 
                    label="Settings" 
                    onClick={() => { setActiveView('settings'); setMenuOpen(false); }}
                    active={activeView === 'settings'}
                    collapsed={!menuOpen}
                    disabled={user.role !== 'admin' && user.role !== 'manager'}
                  />
                  <MenuItem 
                    icon={<HelpCircle size={20} />} 
                    label="Help" 
                    onClick={() => { setActiveView('help'); setMenuOpen(false); }}
                    active={activeView === 'help'}
                    collapsed={!menuOpen}
                  />
                </ul>
              </div>
              <div className={`p-4 ${darkMode ? 'text-gray-400' : 'text-gray-500'} text-xs`}>
                {menuOpen && (
                  <div>
                    <p>Version 1.0.0</p>
                    <p>© 2023 POS System</p>
                  </div>
                )}
              </div>
            </nav>
          </div>

          {/* Overlay for mobile menu */}
          {menuOpen && (
            <div 
              className="fixed inset-0 bg-black bg-opacity-50 z-10 md:hidden"
              onClick={() => setMenuOpen(false)}
            ></div>
          )}

          {/* Main Content Area */}
          <main className="flex-1 overflow-hidden">
            <div className="h-full overflow-y-auto p-4">
              {activeView === 'dashboard' && <DashboardView />}
              {activeView === 'pos' && <POSView />}
              {activeView === 'products' && <ProductsView />}
              {activeView === 'customers' && <CustomersView />}
              {activeView === 'invoices' && <InvoicesView />}
              {activeView === 'reports' && <ReportsView />}
              {activeView === 'staff' && <StaffView />}
              {activeView === 'settings' && <SettingsView />}
              {activeView === 'help' && <HelpView />}
              {activeView === 'notifications' && <NotificationsView />}
            </div>
          </main>
        </div>

        {/* Notification Toast */}
        {notification && (
          <div className={`fixed bottom-4 right-4 p-4 rounded-lg shadow-lg max-w-md z-50 ${
            notification.type === 'success' ? 'bg-green-500 text-white' :
            notification.type === 'error' ? 'bg-red-500 text-white' :
            notification.type === 'warning' ? 'bg-yellow-500 text-white' :
            'bg-blue-500 text-white'
          }`}>
            <div className="flex items-center">
              {notification.type === 'success' && <Check className="mr-2" size={20} />}
              {notification.type === 'error' && <AlertTriangle className="mr-2" size={20} />}
              {notification.type === 'warning' && <AlertTriangle className="mr-2" size={20} />}
              {notification.type === 'info' && <Bell className="mr-2" size={20} />}
              <p>{notification.message}</p>
              <button 
                onClick={() => setNotification(null)}
                className="ml-auto p-1 hover:bg-white hover:bg-opacity-20 rounded-full"
              >
                <X size={16} />
              </button>
            </div>
          </div>
        )}
      </div>
    </AppContext.Provider>
  );
}

// Menu Item Component
function MenuItem({ icon, label, onClick, active, collapsed, disabled = false }) {
  const { darkMode } = useContext(AppContext);
  
  return (
    <li>
      <button
        onClick={onClick}
        disabled={disabled}
        className={`w-full flex items-center px-4 py-3 ${
          active 
            ? darkMode 
              ? 'bg-indigo-900 text-white' 
              : 'bg-indigo-100 text-indigo-800'
            : darkMode
              ? 'text-gray-300 hover:bg-gray-700'
              : 'text-gray-700 hover:bg-gray-100'
        } ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'} transition-colors duration-200`}
      >
        <span className={`${active ? 'text-indigo-600' : ''} ${darkMode && active ? 'text-indigo-300' : ''}`}>
          {icon}
        </span>
        {!collapsed && <span className="ml-4">{label}</span>}
      </button>
    </li>
  );
}

// Login Screen Component
function LoginScreen({ onLogin }) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [showPassword, setShowPassword] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    // Simple validation
    if (!email || !password) {
      setError('Please enter both email and password');
      return;
    }
    
    setIsLoading(true);
    setError('');
    
    try {
      // Sign in with Firebase Auth
      const result = await mockFirebase.auth.signInWithEmailAndPassword(email, password);
      onLogin(result.user, false);
    } catch (error) {
      console.error('Error signing in:', error);
      setError(error.message);
    } finally {
      setIsLoading(false);
    }
  };

  const handleDemoLogin = async () => {
    setIsLoading(true);
    
    try {
      // Use admin credentials for demo
      const result = await mockFirebase.auth.signInWithEmailAndPassword('admin@example.com', 'admin123');
      onLogin(result.user, true);
    } catch (error) {
      console.error('Error signing in to demo:', error);
      setError(error.message);
    } finally {
      setIsLoading(false);
    }
  };

  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>
        
        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
          <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={email}
                onChange={(e) => setEmail(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-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
                placeholder="Email address"
              />
            </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-indigo-500 focus:border-indigo-500 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 && (
            <div className="text-red-600 text-sm text-center">
              {error}
            </div>
          )}

          <div>
            <button
              type="submit"
              disabled={isLoading}
              className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:bg-indigo-400 disabled:cursor-not-allowed"
            >
              {isLoading ? (
                <span className="flex items-center">
                  <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                  </svg>
                  Signing in...
                </span>
              ) : (
                'Sign in'
              )}
            </button>
          </div>
          
          <div className="text-center">
            <p className="text-sm text-gray-500 mb-2">
              Demo 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>admin@example.com</p>
                <p>admin123</p>
              </div>
              <div>
                <p className="font-semibold">Manager</p>
                <p>manager@example.com</p>
                <p>manager123</p>
              </div>
              <div>
                <p className="font-semibold">Cashier</p>
                <p>cashier@example.com</p>
                <p>cashier123</p>
              </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}
              disabled={isLoading}
              className="mt-4 w-full flex justify-center py-2 px-4 border border-indigo-600 text-sm font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {isLoading ? 'Loading...' : 'Try Demo Mode'}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

// Dashboard View
function DashboardView() {
  const { darkMode, isDemo, settings } = useContext(AppContext);
  const [salesData, setSalesData] = useState([]);
  const [products, setProducts] = useState([]);
  const [customers, setCustomers] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  
  useEffect(() => {
    const loadDashboardData = async () => {
      try {
        // Fetch sales data
        const salesRef = mockFirebase.database.ref('sales');
        const salesSnapshot = await salesRef.get();
        const salesData = salesSnapshot.val() || [];
        setSalesData(salesData);
        
        // Fetch products
        const productsRef = mockFirebase.database.ref('products');
        const productsSnapshot = await productsRef.get();
        const productsData = productsSnapshot.val() || [];
        setProducts(productsData);
        
        // Fetch customers
        const customersRef = mockFirebase.database.ref('customers');
        const customersSnapshot = await customersRef.get();
        const customersData = customersSnapshot.val() || [];
        setCustomers(customersData);
        
        setIsLoading(false);
      } catch (error) {
        console.error('Error loading dashboard data:', error);
        setIsLoading(false);
      }
    };
    
    loadDashboardData();
  }, []);
  
  // Calculate dashboard metrics
  const calculateDailyTotal = () => {
    const today = new Date().toISOString().split('T')[0];
    return salesData
      .filter(sale => sale.date.startsWith(today))
      .reduce((sum, sale) => sum + sale.total, 0);
  };

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

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

  const calculateLowStockItems = () => {
    const threshold = settings?.lowStockThreshold || 10;
    return products.filter(product => product.stock < threshold).length;
  };
  
  const calculateTotalCustomers = () => {
    return customers.length;
  };
  
  const calculateTotalCredit = () => {
    return customers.reduce((sum, customer) => sum + (customer.creditUsed || 0), 0);
  };
  
  const calculateExpiringItems = () => {
    const today = new Date();
    const nextWeek = new Date();
    nextWeek.setDate(today.getDate() + 7);
    
    return products.filter(product => {
      if (!product.expires || !product.expiryDate) return false;
      const expiryDate = new Date(product.expiryDate);
      return expiryDate > today && expiryDate <= nextWeek;
    }).length;
  };
  
  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-full">
        <div className="text-center">
          <div className="w-12 h-12 border-4 border-t-indigo-600 border-indigo-200 rounded-full animate-spin mx-auto"></div>
          <p className="mt-4 text-lg">Loading dashboard data...</p>
        </div>
      </div>
    );
  }
  
  return (
    <div className="container mx-auto">
      <div className="mb-6">
        <h2 className="text-2xl font-semibold mb-2">Dashboard</h2>
        <p className={`${darkMode ? 'text-gray-400' : 'text-gray-600'}`}>
          Welcome back! Here's an overview of your business.
        </p>
      </div>
      
      {/* Dashboard Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <DashboardCard 
          title="Today's Sales" 
          value={`$${calculateDailyTotal().toFixed(2)}`} 
          icon={<DollarSign size={24} />} 
          color="indigo"
        />
        
        <DashboardCard 
          title="Average Order" 
          value={`$${calculateAverageOrderValue().toFixed(2)}`} 
          icon={<ShoppingCart size={24} />} 
          color="green"
        />
        
        <DashboardCard 
          title="Low Stock Items" 
          value={calculateLowStockItems()} 
          icon={<AlertTriangle size={24} />} 
          color={calculateLowStockItems() > 0 ? "amber" : "green"}
        />
        
        <DashboardCard 
          title="Total Customers" 
          value={calculateTotalCustomers()} 
          icon={<User size={24} />} 
          color="blue"
        />
      </div>
      
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        {/* Recent Sales */}
        <div className={`${darkMode ? 'bg-gray-800' : 'bg-white'} rounded-lg shadow-sm overflow-hidden`}>
          <div className={`px-6 py-4 border-b ${darkMode ? 'border-gray-700' : 'border-gray-200'}`}>
            <h3 className="text-lg font-medium">Recent Sales</h3>
          </div>
          
          {salesData.length === 0 ? (
            <div className="text-center py-10">
              <ShoppingCart size={48} className={`mx-auto ${darkMode ? 'text-gray-600' : 'text-gray-300'} mb-4`} />
              <p className={darkMode ? 'text-gray-400' : 'text-gray-500'}>No sales data available yet</p>
            </div>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead className={darkMode ? 'bg-gray-700' : '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">Customer</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">Total</th>
                  </tr>
                </thead>
                <tbody className={`divide-y ${darkMode ? 'divide-gray-700' : 'divide-gray-200'}`}>
                  {salesData.slice(0, 5).map(sale => (
                    <tr key={sale.id}>
                      <td className="px-6 py-4 whitespace-nowrap text-sm">
                        {new Date(sale.date).toLocaleDateString()}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm">{sale.customerName || 'Walk-in'}</td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm">{sale.items.length}</td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                        ${sale.total.toFixed(2)}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
          
          <div className="px-6 py-3 border-t text-right">
            <button className="text-indigo-600 hover:text-indigo-900 text-sm font-medium">
              View All Sales
            </button>
          </div>
        </div>
        
        {/* Low Stock Items */}
        <div className={`${darkMode ? 'bg-gray-800' : 'bg-white'} rounded-lg shadow-sm overflow-hidden`}>
          <div className={`px-6 py-4 border-b ${darkMode ? 'border-gray-700' : 'border-gray-200'}`}>
            <h3 className="text-lg font-medium">Low Stock Items</h3>
          </div>
          
          {products.filter(product => product.stock < (settings?.lowStockThreshold || 10)).length === 0 ? (
            <div className="text-center py-10">
              <Package size={48} className={`mx-auto ${darkMode ? 'text-gray-600' : 'text-gray-300'} mb-4`} />
              <p className={darkMode ? 'text-gray-400' : 'text-gray-500'}>No low stock items</p>
            </div>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead className={darkMode ? 'bg-gray-700' : '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={`divide-y ${darkMode ? 'divide-gray-700' : 'divide-gray-200'}`}>
                  {products
                    .filter(product => product.stock < (settings?.lowStockThreshold || 10))
                    .slice(0, 5)
                    .map(product => (
                      <tr key={product.id}>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm font-medium">{product.name}</div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm">{product.category}</td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm">{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 className="px-6 py-3 border-t text-right">
            <button className="text-indigo-600 hover:text-indigo-900 text-sm font-medium">
              View All Low Stock
            </button>
          </div>
        </div>
      </div>
      
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Credit Alerts */}
        <div className={`${darkMode ? 'bg-gray-800' : 'bg-white'} rounded-lg shadow-sm overflow-hidden`}>
          <div className={`px-6 py-4 border-b ${darkMode ? 'border-gray-700' : 'border-gray-200'}`}>
            <h3 className="text-lg font-medium">Credit Alerts</h3>
          </div>
          
          {customers.filter(customer => (customer.creditUsed || 0) > (customer.creditLimit * 0.8)).length === 0 ? (
            <div className="text-center py-10">
              <CreditCard size={48} className={`mx-auto ${darkMode ? 'text-gray-600' : 'text-gray-300'} mb-4`} />
              <p className={darkMode ? 'text-gray-400' : 'text-gray-500'}>No credit alerts</p>
            </div>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead className={darkMode ? 'bg-gray-700' : 'bg-gray-50'}>
                  <tr>
                    <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">Credit Used</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Credit Limit</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={`divide-y ${darkMode ? 'divide-gray-700' : 'divide-gray-200'}`}>
                  {customers
                    .filter(customer => (customer.creditUsed || 0) > (customer.creditLimit * 0.8))
                    .slice(0, 5)
                    .map(customer => (
                      <tr key={customer.id}>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm font-medium">{customer.name}</div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm">${customer.creditUsed.toFixed(2)}</td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm">${customer.creditLimit.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 ${
                            customer.creditUsed >= customer.creditLimit
                              ? 'bg-red-100 text-red-800' 
                              : 'bg-yellow-100 text-yellow-800'
                          }`}>
                            {customer.creditUsed >= customer.creditLimit ? 'Limit Reached' : 'Near Limit'}
                          </span>
                        </td>
                      </tr>
                    ))}
                </tbody>
              </table>
            </div>
          )}
          
          <div className="px-6 py-3 border-t text-right">
            <button className="text-indigo-600 hover:text-indigo-900 text-sm font-medium">
              View All Credit Alerts
            </button>
          </div>
        </div>
        
        {/* Expiring Products */}
        <div className={`${darkMode ? 'bg-gray-800' : 'bg-white'} rounded-lg shadow-sm overflow-hidden`}>
          <div className={`px-6 py-4 border-b ${darkMode ? 'border-gray-700' : 'border-gray-200'}`}>
            <h3 className="text-lg font-medium">Expiring Products</h3>
          </div>
          
          {products.filter(product => {
            if (!product.expires || !product.expiryDate) return false;
            const expiryDate = new Date(product.expiryDate);
            const today = new Date();
            const nextWeek = new Date();
            nextWeek.setDate(today.getDate() + 7);
            return expiryDate > today && expiryDate <= nextWeek;
          }).length === 0 ? (
            <div className="text-center py-10">
              <Clock size={48} className={`mx-auto ${darkMode ? 'text-gray-600' : 'text-gray-300'} mb-4`} />
              <p className={darkMode ? 'text-gray-400' : 'text-gray-500'}>No products expiring soon</p>
            </div>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead className={darkMode ? 'bg-gray-700' : '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">Expiry Date</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={`divide-y ${darkMode ? 'divide-gray-700' : 'divide-gray-200'}`}>
                  {products
                    .filter(product => {
                      if (!product.expires || !product.expiryDate) return false;
                      const expiryDate = new Date(product.expiryDate);
                      const today = new Date();
                      const nextWeek = new Date();
                      nextWeek.setDate(today.getDate() + 7);
                      return expiryDate > today && expiryDate <= nextWeek;
                    })
                    .slice(0, 5)
                    .map(product => {
                      const expiryDate = new Date(product.expiryDate);
                      const today = new Date();
                      const daysUntilExpiry = Math.ceil((expiryDate - today) / (1000 * 60 * 60 * 24));
                      
                      return (
                        <tr key={product.id}>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <div className="text-sm font-medium">{product.name}</div>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm">{product.category}</td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm">{new Date(product.expiryDate).toLocaleDateString()}</td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
                              daysUntilExpiry <= 3
                                ? 'bg-red-100 text-red-800' 
                                : 'bg-yellow-100 text-yellow-800'
                            }`}>
                              {daysUntilExpiry <= 3 ? 'Critical' : `${daysUntilExpiry} days left`}
                            </span>
                          </td>
                        </tr>
                      );
                    })}
                </tbody>
              </table>
            </div>
          )}
          
          <div className="px-6 py-3 border-t text-right">
            <button className="text-indigo-600 hover:text-indigo-900 text-sm font-medium">
              View All Expiring Products
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

// Dashboard Card Component
function DashboardCard({ title, value, icon, color }) {
  const { darkMode } = useContext(AppContext);
  
  const getColorClasses = () => {
    if (darkMode) {
      switch (color) {
        case 'indigo': return 'bg-indigo-900 text-indigo-200';
        case 'green': return 'bg-green-900 text-green-200';
        case 'amber': return 'bg-amber-900 text-amber-200';
        case 'blue': return 'bg-blue-900 text-blue-200';
        case 'red': return 'bg-red-900 text-red-200';
        default: return 'bg-gray-800 text-gray-200';
      }
    } else {
      switch (color) {
        case 'indigo': return 'bg-indigo-100 text-indigo-600';
        case 'green': return 'bg-green-100 text-green-600';
        case 'amber': return 'bg-amber-100 text-amber-600';
        case 'blue': return 'bg-blue-100 text-blue-600';
        case 'red': return 'bg-red-100 text-red-600';
        default: return 'bg-gray-100 text-gray-600';
      }
    }
  };
  
  return (
    <div className={`${darkMode ? 'bg-gray-800' : 'bg-white'} rounded-lg shadow-sm p-6 border ${darkMode ? 'border-gray-700' : 'border-gray-200'}`}>
      <div className="flex items-center">
        <div className={`p-3 rounded-full mr-4 ${getColorClasses()}`}>
          {icon}
        </div>
        <div>
          <h3 className={`text-sm font-medium ${darkMode ? 'text-gray-400' : 'text-gray-500'} mb-1`}>{title}</h3>
          <p className="text-2xl font-bold">{value}</p>
        </div>
      </div>
    </div>
  );
}

// POS View
function POSView() {
  const { darkMode, isDemo, settings, showNotification } = useContext(AppContext);
  const [products, setProducts] = useState([]);
  const [categories, setCategories] = useState([]);
  const [customers, setCustomers] = useState([]);
  const [cart, setCart] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('all');
  const [showCheckoutModal, setShowCheckoutModal] = useState(false);
  const [paymentMethod, setPaymentMethod] = useState('cash');
  const [amountReceived, setAmountReceived] = useState('');
  const [selectedCustomer, setSelectedCustomer] = useState(null);
  const [showCustomerModal, setShowCustomerModal] = useState(false);
  const [showReceiptModal, setShowReceiptModal] = useState(false);
  const [currentReceipt, setCurrentReceipt] = useState(null);
  const [barcodeInput, setBarcodeInput] = useState('');
  const barcodeInputRef = useRef(null);
  
  useEffect(() => {
    const loadPOSData = async () => {
      try {
        // Fetch products
        const productsRef = mockFirebase.database.ref('products');
        const productsSnapshot = await productsRef.get();
        const productsData = productsSnapshot.val() || [];
        setProducts(productsData);
        
        // Fetch categories
        const categoriesRef = mockFirebase.database.ref('categories');
        const categoriesSnapshot = await categoriesRef.get();
        const categoriesData = categoriesSnapshot.val() || [];
        setCategories(categoriesData);
        
        // Fetch customers
        const customersRef = mockFirebase.database.ref('customers');
        const customersSnapshot = await customersRef.get();
        const customersData = customersSnapshot.val() || [];
        setCustomers(customersData);
        
        setIsLoading(false);
      } catch (error) {
        console.error('Error loading POS data:', error);
        setIsLoading(false);
      }
    };
    
    loadPOSData();
  }, []);
  
  // Focus on barcode input when component mounts
  useEffect(() => {
    if (barcodeInputRef.current) {
      barcodeInputRef.current.focus();
    }
  }, []);
  
  // Handle barcode input
  const handleBarcodeSubmit = (e) => {
    e.preventDefault();
    
    if (!barcodeInput) return;
    
    const product = products.find(p => p.barcode === barcodeInput);
    
    if (product) {
      addToCart(product);
      setBarcodeInput('');
    } else {
      showNotification(`Product with barcode ${barcodeInput} not found`, 'error');
      setBarcodeInput('');
    }
  };
  
  // Add product to cart
  const addToCart = (product) => {
    if (product.stock <= 0) {
      showNotification(`${product.name} is out of stock`, 'error');
      return;
    }
    
    const existingItem = cart.find(item => item.id === product.id);
    
    if (existingItem) {
      if (existingItem.quantity >= product.stock) {
        showNotification(`Cannot add more ${product.name}. Only ${product.stock} in stock.`, 'warning');
        return;
      }
      
      setCart(cart.map(item => 
        item.id === product.id 
          ? { ...item, quantity: item.quantity + 1 } 
          : item
      ));
    } else {
      setCart([...cart, { 
        id: product.id, 
        name: product.name, 
        price: product.price, 
        quantity: 1,
        stock: product.stock
      }]);
    }
    
    showNotification(`${product.name} added to cart`, 'success');
  };
  
  // Update cart item quantity
  const updateCartItemQuantity = (productId, newQuantity) => {
    const product = products.find(p => p.id === productId);
    
    if (newQuantity <= 0) {
      removeFromCart(productId);
      return;
    }
    
    if (newQuantity > product.stock) {
      showNotification(`Cannot add more ${product.name}. Only ${product.stock} in stock.`, 'warning');
      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));
  };
  
  // Clear cart
  const clearCart = () => {
    if (cart.length === 0) return;
    
    if (confirm('Are you sure you want to clear the cart?')) {
      setCart([]);
      setSelectedCustomer(null);
      showNotification('Cart cleared', 'info');
    }
  };
  
  // Calculate cart subtotal
  const calculateSubtotal = () => {
    return cart.reduce((total, item) => total + (item.price * item.quantity), 0);
  };
  
  // Calculate tax
  const calculateTax = () => {
    const taxRate = settings?.taxRate || 7;
    return calculateSubtotal() * (taxRate / 100);
  };
  
  // Calculate total
  const calculateTotal = () => {
    return calculateSubtotal() + calculateTax();
  };
  
  // Process checkout
  const processCheckout = async () => {
    if (cart.length === 0) return;
    
    try {
      const subtotal = calculateSubtotal();
      const tax = calculateTax();
      const total = calculateTotal();
      const change = paymentMethod === 'cash' ? parseFloat(amountReceived) - total : 0;
      
      // Check if customer has enough credit limit for credit_account payment
      if (paymentMethod === 'credit_account') {
        if (!selectedCustomer) {
          showNotification('Please select a customer for credit account payment', 'error');
          return;
        }
        
        const customer = customers.find(c => c.id === selectedCustomer.id);
        const newCreditUsed = (customer.creditUsed || 0) + total;
        
        if (newCreditUsed > customer.creditLimit) {
          showNotification(`This purchase exceeds ${customer.name}'s credit limit`, 'error');
          return;
        }
      }
      
      // Create receipt
      const receipt = {
        id: Date.now().toString(),
        date: new Date().toISOString(),
        items: cart.map(item => ({
          productId: item.id,
          name: item.name,
          price: item.price,
          quantity: item.quantity
        })),
        subtotal,
        tax,
        total,
        paymentMethod,
        amountReceived: paymentMethod === 'cash' ? parseFloat(amountReceived) : total,
        change,
        customerId: selectedCustomer?.id || null,
        customerName: selectedCustomer?.name || 'Walk-in Customer',
        staffId: mockFirebase.auth.currentUser.uid,
        staffName: mockFirebase.auth.currentUser.displayName || mockFirebase.auth.currentUser.email,
        status: 'completed'
      };
      
      // Update inventory and sales
      if (isDemo) {
        // Update demo data in memory only
        updateDemoData(receipt);
      } else {
        // Update real data in Firebase
        await updateRealData(receipt);
      }
      
      // Show receipt
      setCurrentReceipt(receipt);
      setShowReceiptModal(true);
      setShowCheckoutModal(false);
      
      // Clear cart and reset
      setCart([]);
      setAmountReceived('');
      setSelectedCustomer(null);
      
      showNotification('Sale completed successfully', 'success');
    } catch (error) {
      console.error('Error processing checkout:', error);
      showNotification('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 customer credit if payment method is credit_account
    if (receipt.paymentMethod === 'credit_account' && receipt.customerId) {
      const updatedCustomers = customers.map(customer => {
        if (customer.id === receipt.customerId) {
          return { 
            ...customer, 
            creditUsed: (customer.creditUsed || 0) + receipt.total 
          };
        }
        return customer;
      });
      setCustomers(updatedCustomers);
    }
  };
  
  // Update real data in Firebase
  const updateRealData = async (receipt) => {
    try {
      // Add sale to Firebase
      const salesRef = mockFirebase.database.ref('sales');
      await salesRef.push().set(receipt);
      
      // Update product stock
      for (const item of cart) {
        const productRef = mockFirebase.database.ref(`products/${item.id}`);
        const productSnapshot = await productRef.get();
        const product = productSnapshot.val();
        
        if (product) {
          await productRef.update({
            stock: product.stock - item.quantity
          });
        }
      }
      
      // Update customer credit if payment method is credit_account
      if (receipt.paymentMethod === 'credit_account' && receipt.customerId) {
        const customerRef = mockFirebase.database.ref(`customers/${receipt.customerId}`);
        const customerSnapshot = await customerRef.get();
        const customer = customerSnapshot.val();
        
        if (customer) {
          await customerRef.update({
            creditUsed: (customer.creditUsed || 0) + receipt.total
          });
        }
      }
    } catch (error) {
      console.error('Error updating data in Firebase:', error);
      throw error;
    }
  };
  
  // 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;
  });
  
  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-full">
        <div className="text-center">
          <div className="w-12 h-12 border-4 border-t-indigo-600 border-indigo-200 rounded-full animate-spin mx-auto"></div>
          <p className="mt-4 text-lg">Loading POS data...</p>
        </div>
      </div>
    );
  }
  
  return (
    <div className="h-full flex flex-col">
      <div className="mb-4">
        <h2 className="text-2xl font-semibold mb-2">Point of Sale</h2>
        <p className={`${darkMode ? 'text-gray-400' : 'text-gray-600'}`}>
          Process sales and manage transactions.
        </p>
      </div>
      
      <div className="flex-1 flex flex-col md:flex-row overflow-hidden">
        {/* Product Catalog */}
        <div className="w-full md:w-2/3 flex flex-col overflow-hidden">
          {/* Search and Filter */}
          <div className="p-4 border-b">
            <form onSubmit={handleBarcodeSubmit} className="mb-4">
              <div className="relative">
                <input
                  type="text"
                  ref={barcodeInputRef}
                  value={barcodeInput}
                  onChange={(e) => setBarcodeInput(e.target.value)}
                  placeholder="Scan barcode..."
                  className={`w-full pl-10 pr-4 py-2 border ${darkMode ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400' : 'bg-white border-gray-300 text-gray-900 placeholder-gray-500'} rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500`}
                />
                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                  <Search size={18} className={darkMode ? 'text-gray-400' : 'text-gray-500'} />
                </div>
                <button 
                  type="submit"
                  className="absolute inset-y-0 right-0 pr-3 flex items-center text-indigo-600 hover:text-indigo-800"
                >
                  <ArrowRight size={18} />
                </button>
              </div>
            </form>
            
            <div className="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-4">
              <div className="relative flex-1">
                <Search className={`absolute left-3 top-1/2 transform -translate-y-1/2 ${darkMode ? 'text-gray-400' : 'text-gray-500'}`} size={18} />
                <input
                  type="text"
                  placeholder="Search products..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className={`w-full pl-10 pr-4 py-2 border ${darkMode ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400' : 'bg-white border-gray-300 text-gray-900 placeholder-gray-500'} rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500`}
                />
              </div>
              <select
                value={selectedCategory}
                onChange={(e) => setSelectedCategory(e.target.value)}
                className={`border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 ${
                  darkMode 
                    ? 'bg-gray-700 border-gray-600 text-white' 
                    : 'bg-white border-gray-300 text-gray-900'
                }`}
              >
                <option value="all">All Categories</option>
                {categories.map(category => (
                  <option key={category} value={category}>{category}</option>
                ))}
              </select>
            </div>
          </div>
          
          {/* Products Grid */}
          <div className="flex-1 overflow-y-auto p-4">
            {filteredProducts.length === 0 ? (
              <div className="text-center py-10">
                <Package size={48} className={`mx-auto ${darkMode ? 'text-gray-600' : 'text-gray-300'} mb-4`} />
                <p className={darkMode ? 'text-gray-400' : 'text-gray-500'}>No products found</p>
              </div>
            ) : (
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                {filteredProducts.map(product => (
                  <div 
                    key={product.id} 
                    className={`${darkMode ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'} rounded-lg shadow-sm border overflow-hidden hover:shadow-md transition-shadow cursor-pointer`}
                    onClick={() => addToCart(product)}
                  >
                    <div className="p-4">
                      <div className="flex justify-between items-start">
                        <h3 className="text-lg font-medium">{product.name}</h3>
                        <span className="text-lg font-semibold">${product.price.toFixed(2)}</span>
                      </div>
                      <p className={`text-sm ${darkMode ? 'text-gray-400' : 'text-gray-500'} mt-1`}>{product.category}</p>
                      <div className="flex justify-between items-center mt-4">
                        <span className={`text-sm ${
                          product.stock > 10 
                            ? darkMode ? 'text-green-400' : 'text-green-600' 
                            : darkMode ? 'text-red-400' : 'text-red-600'
                        }`}>
                          Stock: {product.stock}
                        </span>
                        <button
                          onClick={(e) => {
                            e.stopPropagation();
                            addToCart(product);
                          }}
                          disabled={product.stock <= 0}
                          className={`px-3 py-1 rounded-lg ${
                            product.stock > 0 
                              ? 'bg-indigo-600 hover:bg-indigo-700 text-white' 
                              : `${darkMode ? 'bg-gray-700 text-gray-500' : 'bg-gray-300 text-gray-500'} cursor-not-allowed`
                          }`}
                        >
                          Add
                        </button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
        
        {/* Shopping Cart */}
        <div className={`w-full md:w-1/3 ${darkMode ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'} border-t md:border-t-0 md:border-l flex flex-col`}>
          <div className="p-4 border-b flex justify-between items-center">
            <h2 className="text-xl font-semibold">Shopping Cart</h2>
            <div className="flex space-x-2">
              <button
                onClick={() => setShowCustomerModal(true)}
                className={`px-3 py-1 rounded-lg ${darkMode ? 'bg-gray-700 hover:bg-gray-600' : 'bg-gray-100 hover:bg-gray-200'} flex items-center`}
              >
                <User size={16} className="mr-1" />
                <span>{selectedCustomer ? selectedCustomer.name : 'Customer'}</span>
              </button>
              <button
                onClick={clearCart}
                disabled={cart.length === 0}
                className={`px-3 py-1 rounded-lg ${
                  cart.length > 0
                    ? 'bg-red-600 hover:bg-red-700 text-white'
                    : `${darkMode ? 'bg-gray-700 text-gray-500' : 'bg-gray-300 text-gray-500'} cursor-not-allowed`
                }`}
              >
                <Trash2 size={16} />
              </button>
            </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 ${darkMode ? 'text-gray-600' : 'text-gray-300'} mb-4`} />
                <p className={darkMode ? 'text-gray-400' : '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 ${darkMode ? 'bg-gray-700' : 'bg-gray-50'} p-3 rounded-lg`}
                  >
                    <div className="flex-1">
                      <h3 className="font-medium">{item.name}</h3>
                      <p className={`text-sm ${darkMode ? 'text-gray-400' : '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 ${darkMode ? 'bg-gray-600 hover:bg-gray-500' : '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 ${darkMode ? 'bg-gray-600 hover:bg-gray-500' : 'bg-gray-200 hover:bg-gray-300'}`}
                        disabled={item.quantity >= item.stock}
                      >
                        <Plus size={16} />
                      </button>
                      <button 
                        onClick={() => removeFromCart(item.id)}
                        className={`p-1 rounded-full ${darkMode ? 'bg-red-900 text-red-300 hover:bg-red-800' : 'bg-red-100 text-red-600 hover:bg-red-200'} ml-2`}
                      >
                        <Trash2 size={16} />
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
          
          <div className={`p-4 border-t ${darkMode ? 'border-gray-700' : 'border-gray-200'}`}>
            <div className="flex justify-between mb-2">
              <span className={darkMode ? 'text-gray-400' : 'text-gray-600'}>Subtotal:</span>
              <span className="font-medium">${calculateSubtotal().toFixed(2)}</span>
            </div>
            <div className="flex justify-between mb-4">
              <span className={darkMode ? 'text-gray-400' : 'text-gray-600'}>Tax ({settings?.taxRate || 7}%):</span>
              <span className="font-medium">${calculateTax().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().toFixed(2)}</span>
            </div>
            <button
              onClick={() => setShowCheckoutModal(true)}
              disabled={cart.length === 0}
              className={`w-full py-3 rounded-lg ${
                cart.length > 0 
                  ? 'bg-indigo-600 hover:bg-indigo-700 text-white' 
                  : `${darkMode ? 'bg-gray-700 text-gray-500' : 'bg-gray-300 text-gray-500'} cursor-not-allowed`
              }`}
            >
              Checkout
            </button>
          </div>
        </div>
      </div>
      
      {/* Customer Selection Modal */}
      {showCustomerModal && (
        <CustomerSelectionModal 
          customers={customers} 
          selectedCustomer={selectedCustomer}
          onSelectCustomer={(customer) => {
            setSelectedCustomer(customer);
            setShowCustomerModal(false);
          }}
          onClose={() => setShowCustomerModal(false)}
        />
      )}
      
      {/* Checkout Modal */}
      {showCheckoutModal && (
        <CheckoutModal 
          cart={cart}
          subtotal={calculateSubtotal()}
          tax={calculateTax()}
          total={calculateTotal()}
          paymentMethod={paymentMethod}
          setPaymentMethod={setPaymentMethod}
          amountReceived={amountReceived}
          setAmountReceived={setAmountReceived}
          selectedCustomer={selectedCustomer}
          onCheckout={processCheckout}
          onClose={() => setShowCheckoutModal(false)}
        />
      )}
      
      {/* Receipt Modal */}
      {showReceiptModal && currentReceipt && (
        <ReceiptModal 
          receipt={currentReceipt}
          settings={settings}
          onClose={() => setShowReceiptModal(false)}
        />
      )}
    </div>
  );
}

// Customer Selection Modal
function CustomerSelectionModal({ customers, selectedCustomer, onSelectCustomer, onClose }) {
  const { darkMode } = useContext(AppContext);
  const [searchQuery, setSearchQuery] = useState('');
  
  const filteredCustomers = customers.filter(customer => 
    customer.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
    customer.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
    customer.phone.includes(searchQuery)
  );
  
  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className={`${darkMode ? 'bg-gray-800' : 'bg-white'} rounded-lg shadow-lg w-full max-w-2xl`}>
        <div className="flex justify-between items-center p-6 border-b">
          <h2 className="text-xl font-semibold">Select Customer</h2>
          <button onClick={onClose} className={darkMode ? 'text-gray-400 hover:text-gray-300' : 'text-gray-500 hover:text-gray-700'}>
            <X size={24} />
          </button>
        </div>
        
        <div className="p-6">
          <div className="mb-6">
            <div className="relative">
              <Search className={`absolute left-3 top-1/2 transform -translate-y-1/2 ${darkMode ? 'text-gray-400' : 'text-gray-500'}`} size={20} />
              <input
                type="text"
                placeholder="Search customers..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className={`w-full pl-10 pr-4 py-2 border ${darkMode ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400' : 'bg-white border-gray-300 text-gray-900 placeholder-gray-500'} rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500`}
              />
            </div>
          </div>
          
          <div className="max-h-96 overflow-y-auto">
            <table className="w-full">
              <thead className={darkMode ? 'bg-gray-700' : '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">Credit</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
                </tr>
              </thead>
              <tbody className={`divide-y ${darkMode ? 'divide-gray-700' : 'divide-gray-200'}`}>
                <tr>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <div className="text-sm font-medium">Walk-in Customer</div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <div className="text-sm">N/A</div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <div className="text-sm">N/A</div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <button
                      onClick={() => onSelectCustomer(null)}
                      className={`px-3 py-1 rounded-lg ${
                        selectedCustomer === null
                          ? 'bg-indigo-600 text-white'
                          : darkMode ? 'bg-gray-700 hover:bg-gray-600 text-white' : 'bg-gray-100 hover:bg-gray-200 text-gray-800'
                      }`}
                    >
                      Select
                    </button>
                  </td>
                </tr>
                {filteredCustomers.map(customer => (
                  <tr key={customer.id}>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <div className="text-sm font-medium">{customer.name}</div>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <div className="text-sm">{customer.phone}</div>
                      <div className="text-sm text-gray-500">{customer.email}</div>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <div className="text-sm">
                        <span className={`${
                          (customer.creditUsed || 0) > customer.creditLimit * 0.8
                            ? darkMode ? 'text-red-400' : 'text-red-600'
                            : ''
                        }`}>
                          ${(customer.creditUsed || 0).toFixed(2)}
                        </span>
                        {' / '}
                        ${customer.creditLimit.toFixed(2)}
                      </div>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <button
                        onClick={() => onSelectCustomer(customer)}
                        className={`px-3 py-1 rounded-lg ${
                          selectedCustomer?.id === customer.id
                            ? 'bg-indigo-600 text-white'
                            : darkMode ? 'bg-gray-700 hover:bg-gray-600 text-white' : 'bg-gray-100 hover:bg-gray-200 text-gray-800'
                        }`}
                      >
                        Select
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          
          <div className="mt-6 flex justify-end">
            <button
              onClick={onClose}
              className={`px-4 py-2 rounded-lg ${darkMode ? 'bg-gray-700 hover:bg-gray-600 text-white' : 'bg-gray-100 hover:bg-gray-200 text-gray-800'}`}
            >
              Cancel
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

// Checkout Modal
function CheckoutModal({ 
  cart, 
  subtotal, 
  tax, 
  total, 
  paymentMethod, 
  setPaymentMethod, 
  amountReceived, 
  setAmountReceived, 
  selectedCustomer,
  onCheckout, 
  onClose 
}) {
  const { darkMode } = useContext(AppContext);
  
  const handleSubmit = (e) => {
    e.preventDefault();
    onCheckout();
  };
  
  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className={`${darkMode ? 'bg-gray-800' : 'bg-white'} rounded-lg shadow-lg w-full max-w-md`}>
        <div className="flex justify-between items-center p-6 border-b">
          <h2 className="text-xl font-semibold">Checkout</h2>
          <button onClick={onClose} className={darkMode ? 'text-gray-400 hover:text-gray-300' : 'text-gray-500 hover:text-gray-700'}>
            <X size={24} />
          </button>
        </div>
        
        <form onSubmit={handleSubmit} className="p-6">
          <div className="mb-6">
            <h3 className="text-lg font-medium 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={darkMode ? 'text-gray-300' : '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 pt-4 space-y-2 ${darkMode ? 'border-gray-700' : 'border-gray-200'}`}>
              <div className="flex justify-between">
                <span className={darkMode ? 'text-gray-400' : 'text-gray-600'}>Subtotal</span>
                <span className="font-medium">${subtotal.toFixed(2)}</span>
              </div>
              <div className="flex justify-between">
                <span className={darkMode ? 'text-gray-400' : 'text-gray-600'}>Tax</span>
                <span className="font-medium">${tax.toFixed(2)}</span>
              </div>
              <div className="flex justify-between text-lg font-semibold">
                <span>Total</span>
                <span>${total.toFixed(2)}</span>
              </div>
            </div>
          </div>
          
          <div className="mb-6">
            <h3 className="text-lg font-medium mb-4">Payment Method</h3>
            <div className="grid grid-cols-3 gap-4">
              <button
                type="button"
                onClick={() => setPaymentMethod('cash')}
                className={`py-3 rounded-lg border ${
                  paymentMethod === 'cash' 
                    ? 'bg-indigo-600 text-white border-indigo-600' 
                    : darkMode 
                      ? 'bg-gray-700 text-white border-gray-600 hover:bg-gray-600' 
                      : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'
                }`}
              >
                Cash
              </button>
              <button
                type="button"
                onClick={() => setPaymentMethod('credit')}
                className={`py-3 rounded-lg border ${
                  paymentMethod === 'credit' 
                    ? 'bg-indigo-600 text-white border-indigo-600' 
                    : darkMode 
                      ? 'bg-gray-700 text-white border-gray-600 hover:bg-gray-600' 
                      : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'
                }`}
              >
                Card
              </button>
              <button
                type="button"
                onClick={() => setPaymentMethod('credit_account')}
                disabled={!selectedCustomer}
                className={`py-3 rounded-lg border ${
                  paymentMethod === 'credit_account' 
                    ? 'bg-indigo-600 text-white border-indigo-600' 
                    : !selectedCustomer
                      ? darkMode 
                        ? 'bg-gray-800 text-gray-500 border-gray-700 cursor-not-allowed' 
                        : 'bg-gray-100 text-gray-400 border-gray-300 cursor-not-allowed'
                      : darkMode 
                        ? 'bg-gray-700 text-white border-gray-600 hover:bg-gray-600' 
                        : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'
                }`}
              >
                Credit
              </button>
            </div>
            {paymentMethod === 'credit_account' && !selectedCustomer && (
              <p className="mt-2 text-sm text-red-500">
                Please select a customer to use credit account payment.
              </p>
            )}
          </div>
          
          {paymentMethod === 'cash' && (
            <div className="mb-6">
              <label className={`block text-sm font-medium ${darkMode ? 'text-gray-300' : '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={darkMode ? 'text-gray-400' : 'text-gray-500'} />
                </div>
                <input
                  type="number"
                  step="0.01"
                  value={amountReceived}
                  onChange={(e) => setAmountReceived(e.target.value)}
                  className={`pl-10 pr-4 py-2 w-full border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 ${
                    darkMode 
                      ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400' 
                      : 'bg-white border-gray-300 text-gray-900 placeholder-gray-500'
                  }`}
                  placeholder="0.00"
                />
              </div>
              {parseFloat(amountReceived) > 0 && (
                <div className="mt-2 text-right">
                  <span className={`text-sm ${darkMode ? 'text-gray-400' : 'text-gray-600'}`}>
                    Change: ${Math.max(0, parseFloat(amountReceived) - total).toFixed(2)}
                  </span>
                </div>
              )}
            </div>
          )}
          
          {paymentMethod === 'credit_account' && selectedCustomer && (
            <div className="mb-6 p-4 rounded-lg bg-blue-50 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
              <h4 className="font-medium mb-2">Credit Account Information</h4>
              <p className="text-sm mb-1">Customer: {selectedCustomer.name}</p>
              <p className="text-sm mb-1">Credit Limit: ${selectedCustomer.creditLimit.toFixed(2)}</p>
              <p className="text-sm mb-1">Credit Used: ${(selectedCustomer.creditUsed || 0).toFixed(2)}</p>
              <p className="text-sm mb-1">Available Credit: ${(selectedCustomer.creditLimit - (selectedCustomer.creditUsed || 0)).toFixed(2)}</p>
              <p className="text-sm mt-2">
                New Balance After Purchase: ${((selectedCustomer.creditUsed || 0) + total).toFixed(2)}
              </p>
            </div>
          )}
          
          <button
            type="submit"
            disabled={
              (paymentMethod === 'cash' && (parseFloat(amountReceived) < total || !amountReceived)) ||
              (paymentMethod === 'credit_account' && !selectedCustomer) ||
              (paymentMethod === 'credit_account' && selectedCustomer && (selectedCustomer.creditUsed || 0) + total > selectedCustomer.creditLimit)
            }
            className={`w-full py-3 rounded-lg ${
              (paymentMethod === 'credit' || 
               (paymentMethod === 'cash' && parseFloat(amountReceived) >= total) ||
               (paymentMethod === 'credit_account' && selectedCustomer && (selectedCustomer.creditUsed || 0) + total <= selectedCustomer.creditLimit))
                ? 'bg-indigo-600 hover:bg-indigo-700 text-white' 
                : `${darkMode ? 'bg-gray-700 text-gray-500' : 'bg-gray-300 text-gray-500'} cursor-not-allowed`
            }`}
          >
            Complete Purchase
          </button>
        </form>
      </div>
    </div>
  );
}

// Receipt Modal
function ReceiptModal({ receipt, settings, onClose }) {
  const { darkMode } = useContext(AppContext);
  const receiptRef = useRef(null);
  
  const handlePrint = () => {
    const printContent = receiptRef.current.innerHTML;
    const originalContent = document.body.innerHTML;
    
    document.body.innerHTML = `
      <style>
        body {
          font-family: Arial, sans-serif;
          margin: 0;
          padding: 20px;
          color: #000;
          background-color: #fff;
        }
        .receipt-container {
          max-width: 300px;
          margin: 0 auto;
        }
        .text-center { text-align: center; }
        .font-bold { font-weight: bold; }
        .text-sm { font-size: 0.875rem; }
        .mb-2 { margin-bottom: 0.5rem; }
        .mb-4 { margin-bottom: 1rem; }
        .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
        .border-t { border-top: 1px solid #ddd; }
        .border-b { border-bottom: 1px solid #ddd; }
        .flex { display: flex; }
        .justify-between { justify-content: space-between; }
        .w-16 { width: 4rem; }
        .text-right { text-align: right; }
        @media print {
          body { margin: 0; padding: 0; }
        }
      </style>
      <div class="receipt-container">
        ${printContent}
      </div>
    `;
    
    window.print();
    document.body.innerHTML = originalContent;
  };
  
  const handleDownload = () => {
    // In a real implementation, this would generate a PDF
    alert('PDF download functionality would be implemented here.');
  };
  
  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className={`${darkMode ? 'bg-gray-800' : 'bg-white'} rounded-lg shadow-lg w-full max-w-md`}>
        <div className="flex justify-between items-center p-6 border-b">
          <h2 className="text-xl font-semibold">Receipt</h2>
          <div className="flex space-x-2">
            <button 
              onClick={handlePrint}
              className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"
              title="Print Receipt"
            >
              <Printer size={20} className={darkMode ? 'text-gray-300' : 'text-gray-600'} />
            </button>
            <button 
              onClick={handleDownload}
              className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"
              title="Download PDF"
            >
              <Download size={20} className={darkMode ? 'text-gray-300' : 'text-gray-600'} />
            </button>
            <button 
              onClick={onClose} 
              className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"
              title="Close"
            >
              <X size={20} className={darkMode ? 'text-gray-300' : 'text-gray-600'} />
            </button>
          </div>
        </div>
        
        <div className="p-6">
          <div ref={receiptRef}>
            <div className="text-center mb-6">
              <h3 className="text-xl font-bold mb-2">{settings?.businessName || 'My POS Store'}</h3>
              <p className={`text-sm ${darkMode ? 'text-gray-400' : 'text-gray-500'}`}>{settings?.address || '123 Business St, City, State, ZIP'}</p>
              <p className={`text-sm ${darkMode ? 'text-gray-400' : 'text-gray-500'}`}>Tel: {settings?.phone || '(123) 456-7890'}</p>
            </div>
            
            <div className="mb-4">
              <div className={`flex justify-between text-sm ${darkMode ? 'text-gray-400' : 'text-gray-600'} mb-2`}>
                <span>Receipt #:</span>
                <span>{receipt.id}</span>
              </div>
              <div className={`flex justify-between text-sm ${darkMode ? 'text-gray-400' : 'text-gray-600'}`}>
                <span>Date:</span>
                <span>{new Date(receipt.date).toLocaleString()}</span>
              </div>
              <div className={`flex justify-between text-sm ${darkMode ? 'text-gray-400' : 'text-gray-600'}`}>
                <span>Cashier:</span>
                <span>{receipt.staffName}</span>
              </div>
              <div className={`flex justify-between text-sm ${darkMode ? 'text-gray-400' : 'text-gray-600'}`}>
                <span>Customer:</span>
                <span>{receipt.customerName}</span>
              </div>
            </div>
            
            <div className={`border-t border-b py-4 mb-4 ${darkMode ? 'border-gray-700' : 'border-gray-200'}`}>
              <div className={`flex justify-between text-sm font-medium ${darkMode ? 'text-gray-300' : '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>
              {receipt.items.map(item => (
                <div key={item.productId} className={`flex justify-between text-sm ${darkMode ? 'text-gray-400' : '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 ${darkMode ? 'text-gray-400' : 'text-gray-600'}`}>
                <span>Subtotal</span>
                <span>${receipt.subtotal.toFixed(2)}</span>
              </div>
              <div className={`flex justify-between text-sm ${darkMode ? 'text-gray-400' : 'text-gray-600'}`}>
                <span>Tax</span>
                <span>${receipt.tax.toFixed(2)}</span>
              </div>
              <div className="flex justify-between text-lg font-semibold">
                <span>Total</span>
                <span>${receipt.total.toFixed(2)}</span>
              </div>
              
              {receipt.paymentMethod === 'cash' && (
                <>
                  <div className={`flex justify-between text-sm ${darkMode ? 'text-gray-400' : 'text-gray-600'}`}>
                    <span>Amount Received</span>
                    <span>${parseFloat(receipt.amountReceived).toFixed(2)}</span>
                  </div>
                  <div className={`flex justify-between text-sm ${darkMode ? 'text-gray-400' : 'text-gray-600'}`}>
                    <span>Change</span>
                    <span>${receipt.change.toFixed(2)}</span>
                  </div>
                </>
              )}
              
              <div className={`flex justify-between text-sm ${darkMode ? 'text-gray-400' : 'text-gray-600'} pt-2 border-t ${darkMode ? 'border-gray-700' : 'border-gray-200'}`}>
                <span>Payment Method</span>
                <span>
                  {receipt.paymentMethod === 'cash' ? 'Cash' : 
                   receipt.paymentMethod === 'credit' ? 'Credit Card' : 
                   'Credit Account'}
                </span>
              </div>
            </div>
            
            <div className={`text-center text-sm ${darkMode ? 'text-gray-400' : 'text-gray-500'}`}>
              <p>{settings?.receiptFooter || 'Thank you for your business!'}</p>
              <p>Please come again</p>
            </div>
          </div>
          
          <div className="mt-6">
            <button
              onClick={onClose}
              className="w-full py-3 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white"
            >
              Close
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

// Products View
function ProductsView() {
  const { darkMode, showNotification } = useContext(AppContext);
  const [products, setProducts] = useState([]);
  const [categories, setCategories] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('all');
  const [showAddProductModal, setShowAddProductModal] = useState(false);
  const [showEditProductModal, setShowEditProductModal] = useState(false);
  const [currentProduct, setCurrentProduct] = useState(null);
  const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false);
  const [productToDelete, setProductToDelete] = useState(null);
  const [showExpiringOnly, setShowExpiringOnly] = useState(false);
  const [showLowStockOnly, setShowLowStockOnly] = useState(false);
  
  useEffect(() => {
    const loadProductsData = async () => {
      try {
        // Fetch products
        const productsRef = mockFirebase.database.ref('products');
        const productsSnapshot = await productsRef.get();
        const productsData = productsSnapshot.val() || [];
        setProducts(productsData);
        
        // Fetch categories
        const categoriesRef = mockFirebase.database.ref('categories');
        const categoriesSnapshot = await categoriesRef.get();
        const categoriesData = categoriesSnapshot.val() || [];
        setCategories(categoriesData);
        
        setIsLoading(false);
      } catch (error) {
        console.error('Error loading products data:', error);
        setIsLoading(false);
      }
    };
    
    loadProductsData();
  }, []);
  
  // Handle adding a new product
  const handleAddProduct = async (productData) => {
    try {
      // Generate a new ID
      const newId = Date.now().toString();
      const newProduct = { ...productData, id: newId };
      
      // Add to products array
      const updatedProducts = [...products, newProduct];
      setProducts(updatedProducts);
      
      // Save to Firebase
      const productRef = mockFirebase.database.ref(`products/${newId}`);
      await productRef.set(newProduct);
      
      showNotification('Product added successfully', 'success');
    } catch (error) {
      console.error('Error adding product:', error);
      showNotification('Error adding product', 'error');
    }
  };
  
  // Handle editing a product
  const handleEditProduct = async (productData) => {
    try {
      // Update in products array
      const updatedProducts = products.map(product => 
        product.id === productData.id ? productData : product
      );
      setProducts(updatedProducts);
      
      // Save to Firebase
      const productRef = mockFirebase.database.ref(`products/${productData.id}`);
      await productRef.update(productData);
      
      showNotification('Product updated successfully', 'success');
    } catch (error) {
      console.error('Error updating product:', error);
      showNotification('Error updating product', 'error');
    }
  };
  
  // Handle deleting a product
  const handleDeleteProduct = async (productId) => {
    try {
      // Remove from products array
      const updatedProducts = products.filter(product => product.id !== productId);
      setProducts(updatedProducts);
      
      // Remove from Firebase
      const productRef = mockFirebase.database.ref(`products/${productId}`);
      await productRef.remove();
      
      showNotification('Product deleted successfully', 'success');
    } catch (error) {
      console.error('Error deleting product:', error);
      showNotification('Error deleting product', 'error');
    }
  };
  
  // Filter products based on search, category, and other filters
  const filteredProducts = products.filter(product => {
    const matchesSearch = 
      product.name.toLowerCase().includes(searchQuery.toLowerCase()) || 
      (product.barcode && product.barcode.includes(searchQuery)) ||
      (product.description && product.description.toLowerCase().includes(searchQuery.toLowerCase()));
    
    const matchesCategory = selectedCategory === 'all' || product.category === selectedCategory;
    
    const matchesExpiring = !showExpiringOnly || (product.expires && product.expiryDate);
    
    const matchesLowStock = !showLowStockOnly || product.stock < 10;
    
    return matchesSearch && matchesCategory && matchesExpiring && matchesLowStock;
  });
  
  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-full">
        <div className="text-center">
          <div className="w-12 h-12 border-4 border-t-indigo-600 border-indigo-200 rounded-full animate-spin mx-auto"></div>
          <p className="mt-4 text-lg">Loading products data...</p>
        </div>
      </div>
    );
  }
  
  return (
    <div className="container mx-auto">
      <div className="mb-6">
        <h2 className="text-2xl font-semibold mb-2">Products</h2>
        <p className={`${darkMode ? 'text-gray-400' : 'text-gray-600'}`}>
          Manage your product inventory.
        </p>
      </div>
      
      <div className="mb-6 flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0">
        <div className="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-4">
          <div className="relative">
            <Search className={`absolute left-3 top-1/2 transform -translate-y-1/2 ${darkMode ? 'text-gray-400' : 'text-gray-500'}`} size={18} />
            <input
              type="text"
              placeholder="Search products..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className={`pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 ${
                darkMode 
                  ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400' 
                  : 'bg-white border-gray-300 text-gray-900 placeholder-gray-500'
              }`}
            />
          </div>
          
          <select
            value={selectedCategory}
            onChange={(e) => setSelectedCategory(e.target.value)}
            className={`border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 ${
              darkMode 
                ? 'bg-gray-700 border-gray-600 text-white' 
                : 'bg-white border-gray-300 text-gray-900'
            }`}
          >
            <option value="all">All Categories</option>
            {categories.map(category => (
              <option key={category} value={category}>{category}</option>
            ))}
          </select>
        </div>
        
        <div className="flex space-x-2">
          <button
            onClick={() => setShowExpiringOnly(!showExpiringOnly)}
            className={`px-3 py-2 rounded-lg flex items-center ${
              showExpiringOnly
                ? 'bg-amber-600 text-white'
                : darkMode 
                  ? 'bg-gray-700 text-white hover:bg-gray-600' 
                  : 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50'
            }`}
          >
            <Clock size={16} className="mr-2" />
            <span>Expiring</span>
          </button>
          
          <button
            onClick={() => setShowLowStockOnly(!showLowStockOnly)}
            className={`px-3 py-2 rounded-lg flex items-center ${
              showLowStockOnly
                ? 'bg-red-600 text-white'
                : darkMode 
                  ? 'bg-gray-700 text-white hover:bg-gray-600' 
                  : 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50'
            }`}
          >
            <AlertTriangle size={16} className="mr-2" />
            <span>Low Stock</span>
          </button>
          
          <button
            onClick={() => {
              setCurrentProduct(null);
              setShowAddProductModal(true);
            }}
            className="px-3 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white flex items-center"
          >
            <Plus size={16} className="mr-2" />
            <span>Add Product</span>
          </button>
        </div>
      </div>
      
      <div className={`${darkMode ? 'bg-gray-800' : 'bg-white'} rounded-lg shadow-sm overflow-hidden`}>
        {filteredProducts.length === 0 ? (
          <div className="text-center py-10">
            <Package size={48} className={`mx-auto ${darkMode ? 'text-gray-600' : 'text-gray-300'} mb-4`} />
            <p className={darkMode ? 'text-gray-400' : 'text-gray-500'}>No products found</p>
            <button
              onClick={() => {
                setCurrentProduct(null);
                setShowAddProductModal(true);
              }}
              className="mt-4 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg"
            >
              Add Your First Product
            </button>
          </div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead className={darkMode ? 'bg-gray-700' : '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">Expiry</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={`divide-y ${darkMode ? 'divide-gray-700' : 'divide-gray-200'}`}>
                {filteredProducts.map(product => (
                  <tr key={product.id}>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <div className="text-sm font-medium">{product.name}</div>
                      <div className={`text-sm ${darkMode ? 'text-gray-400' : 'text-gray-500'}`}>{product.barcode}</div>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm">{product.category}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm">${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 
                          ? darkMode ? 'bg-green-900 text-green-200' : 'bg-green-100 text-green-800' 
                          : product.stock > 0 
                            ? darkMode ? 'bg-yellow-900 text-yellow-200' : 'bg-yellow-100 text-yellow-800' 
                            : darkMode ? 'bg-red-900 text-red-200' : 'bg-red-100 text-red-800'
                      }`}>
                        {product.stock}
                      </span>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm">
                      {product.expires ? (
                        <span className={`${
                          new Date(product.expiryDate) < new Date() 
                            ? darkMode ? 'text-red-400' : 'text-red-600'
                            : ''
                        }`}>
                          {new Date(product.expiryDate).toLocaleDateString()}
                        </span>
                      ) : (
                        <span className={darkMode ? 'text-gray-400' : 'text-gray-500'}>N/A</span>
                      )}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                      <button 
                        onClick={() => {
                          setCurrentProduct(product);
                          setShowEditProductModal(true);
                        }}
                        className={`text-indigo-600 hover:text-indigo-900 mr-3 ${darkMode ? 'hover:text-indigo-400' : 'hover:text-indigo-900'}`}
                      >
                        Edit
                      </button>
                      <button 
                        onClick={() => {
                          setProductToDelete(product);
                          setShowDeleteConfirmation(true);
                        }}
                        className={`text-red-600 ${darkMode ? 'hover:text-red-400' : 'hover:text-red-900'}`}
                      >
                        Delete
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
      
      {/* Add/Edit Product Modal */}
      {(showAddProductModal || showEditProductModal) && (
        <ProductFormModal 
          product={currentProduct}
          categories={categories}
          onSave={showAddProductModal ? handleAddProduct : handleEditProduct}
          onClose={() => {
            setShowAddProductModal(false);
            setShowEditProductModal(false);
            setCurrentProduct(null);
          }}
          isEdit={showEditProductModal}
        />
      )}
      
      {/* Delete Confirmation Modal */}
      {showDeleteConfirmation && (
        <ConfirmationModal
          title="Delete Product"
          message={`Are you sure you want to delete ${productToDelete.name}? This action cannot be undone.`}
          confirmText="Delete"
          cancelText="Cancel"
          onConfirm={() => {
            handleDeleteProduct(productToDelete.id);
            setShowDeleteConfirmation(false);
            setProductToDelete(null);
          }}
          onCancel={() => {
            setShowDeleteConfirmation(false);
            setProductToDelete(null);
          }}
          confirmButtonClass="bg-red-600 hover:bg-red-700"
        />
      )}
    </div>
  );
}

// Product Form Modal
function ProductFormModal({ product, categories, onSave, onClose, isEdit }) {
  const { darkMode } = useContext(AppContext);
  const [formData, setFormData] = useState(
    product ? { ...product } : {
      name: '',
      price: '',
      category: '',
      stock: '',
      barcode: '',
      description: '',
      expires: false,
      expiryDate: ''
    }
  );
  
  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData({
      ...formData,
      [name]: type === 'checkbox' ? checked : value
    });
  };
  
  const handleSubmit = (e) => {
    e.preventDefault();
    
    // Validate form
    if (!formData.name || !formData.price || !formData.category || !formData.stock) {
      alert('Please fill in all required fields');
      return;
    }
    
    // Convert price and stock to numbers
    const processedData = {
      ...formData,
      price: parseFloat(formData.price),
      stock: parseInt(formData.stock)
    };
    
    onSave(processedData);
    onClose();
  };
  
  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className={`${darkMode ? 'bg-gray-800' : 'bg-white'} rounded-lg shadow-lg w-full max-w-2xl`}>
        <div<ant_artifact identifier="POS_App_Integration" title="Updated POS System with Modals">
import React, { useState, useEffect } from 'react';
import { Search, ShoppingCart, Package, BarChart2, User, LogOut, Plus, Minus, Trash2, X, Check, DollarSign, Eye, EyeOff } from 'lucide-react';

// 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' },
    { username: 'cashier', password: 'cashier123', role: 'cashier' },
    { username: 'manager', password: 'manager123', role: 'manager' }
  ]);
  const [showRegisterModal, setShowRegisterModal] = useState(false);
  const [newUser, setNewUser] = useState({
    username: '',
    password: '',
    confirmPassword: '',
    role: 'cashier'
  });

  // 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
    loadData();
  }, [isAuthenticated, isDemo]);

  // Load data function
  const loadData = async () => {
    try {
      if (isAuthenticated) {
        if (isDemo) {
          // Load demo data
          loadDemoData();
        } else {
          // Load real data from API or localStorage
          await fetchProducts();
          await fetchSales();
          await fetchCategories();
        }
      }
      
      setIsLoading(false);
    } catch (error) {
      console.error('Error loading data:', 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);
  };

  // Fetch products from API or localStorage
  const fetchProducts = async () => {
    try {
      // Check if we have products in localStorage
      const savedProducts = localStorage.getItem(`posProducts_${user.username}`);
      
      if (savedProducts) {
        setProducts(JSON.parse(savedProducts));
      } else {
        // If no saved products, we could fetch from API
        // For now, initialize with empty array
        setProducts([]);
        localStorage.setItem(`posProducts_${user.username}`, JSON.stringify([]));
      }
    } catch (error) {
      console.error('Error fetching products:', error);
    }
  };

  // Fetch sales from API or localStorage
  const fetchSales = async () => {
    try {
      // Check if we have sales in localStorage
      const savedSales = localStorage.getItem(`posSales_${user.username}`);
      
      if (savedSales) {
        setSales(JSON.parse(savedSales));
      } else {
        // If no saved sales, we could fetch from API
        // For now, initialize with empty array
        setSales([]);
        localStorage.setItem(`posSales_${user.username}`, JSON.stringify([]));
      }
    } catch (error) {
      console.error('Error fetching sales:', error);
    }
  };

  // Fetch categories from API or localStorage
  const fetchCategories = async () => {
    try {
      // Check if we have categories in localStorage
      const savedCategories = localStorage.getItem(`posCategories_${user.username}`);
      
      if (savedCategories) {
        setCategories(JSON.parse(savedCategories));
      } else {
        // If no saved categories, initialize with default categories
        const defaultCategories = ['Clothing', 'Footwear', 'Accessories', 'Electronics', 'Stationery'];
        setCategories(defaultCategories);
        localStorage.setItem(`posCategories_${user.username}`, JSON.stringify(defaultCategories));
      }
    } catch (error) {
      console.error('Error fetching categories:', error);
    }
  };

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

  // Handle logout
  const handleLogout = () => {
    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 change = paymentMethod === 'cash' ? parseFloat(amountReceived) - total : 0;
      
      // Create receipt
      const receipt = {
        _id: Date.now().toString(),
        date: new Date().toISOString(),
        items: cart,
        total: total,
        paymentMethod: paymentMethod,
        amountReceived: paymentMethod === 'cash' ? parseFloat(amountReceived) : total,
        change: change
      };
      
      // Update inventory and sales
      if (isDemo) {
        // Update demo data in memory only
        updateDemoData(receipt);
      } else {
        // Update real data in localStorage or API
        await updateRealData(receipt);
      }
      
      // Show receipt
      setCurrentReceipt(receipt);
      setShowReceiptModal(true);
      setShowCheckoutModal(false);
      
      // Clear cart
      setCart([]);
      setAmountReceived('');
      
    } 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: receipt._id, 
      date: receipt.date, 
      total: receipt.total, 
      items: cart.reduce((sum, item) => sum + item.quantity, 0),
      paymentMethod: receipt.paymentMethod
    };
    setSales([...sales, newSale]);
  };

  // Update real data
  const updateRealData = async (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);
    
    // Save updated products to localStorage
    localStorage.setItem(`posProducts_${user.username}`, JSON.stringify(updatedProducts));
    
    // Update sales
    const newSale = { 
      _id: receipt._id, 
      date: receipt.date, 
      total: receipt.total, 
      items: cart.reduce((sum, item) => sum + item.quantity, 0),
      paymentMethod: receipt.paymentMethod
    };
    const updatedSales = [...sales, newSale];
    setSales(updatedSales);
    
    // Save updated sales to localStorage
    localStorage.setItem(`posSales_${user.username}`, JSON.stringify(updatedSales));
    
    // In a real app, you would also make API calls here
    // await fetch('https://www.sitebrew.ai/api/eNqleS/sales', {
    //   method: 'POST',
    //   headers: { 'Content-Type': 'application/json' },
    //   body: JSON.stringify({ document: receipt })
    // });
    
    // For each product in cart, update inventory
    // cart.forEach(async (item) => {
    //   const updatedProduct = products.find(p => p._id === item._id);
    //   await fetch(`https://www.sitebrew.ai/api/eNqleS/products`, {
    //     method: 'PUT',
    //     headers: { 'Content-Type': 'application/json' },
    //     body: JSON.stringify({ document: updatedProduct })
    //   });
    // });
  };

  // Add new product
  const handleAddProduct = async () => {
    try {
      const productToAdd = {
        ...newProduct,
        _id: Date.now().toString(),
        price: parseFloat(newProduct.price),
        stock: parseInt(newProduct.stock)
      };
      
      if (isDemo) {
        // Add to demo products
        setProducts([...products, productToAdd]);
      } else {
        // Add to real products
        const updatedProducts = [...products, productToAdd];
        setProducts(updatedProducts);
        
        // Save to localStorage
        localStorage.setItem(`posProducts_${user.username}`, JSON.stringify(updatedProducts));
        
        // In a real app, you would also make API call here
        // await fetch('https://www.sitebrew.ai/api/eNqleS/products', {
        //   method: 'POST',
        //   headers: { 'Content-Type': 'application/json' },
        //   body: JSON.stringify({ document: productToAdd })
        // });
      }
      
      // Reset form
      setNewProduct({
        name: '',
        price: '',
        category: '',
        stock: '',
        barcode: '',
        description: ''
      });
      
      setShowAddProductModal(false);
    } catch (error) {
      console.error('Error adding product:', error);
    }
  };

  // Register new user
  const handleRegisterUser = () => {
    // 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;
    }
    
    // Create new user object
    const userToAdd = {
      username: newUser.username,
      password: newUser.password,
      role: newUser.role
    };
    
    // Add to registered users
    const updatedUsers = [...registeredUsers, userToAdd];
    setRegisteredUsers(updatedUsers);
    
    // Save to localStorage
    localStorage.setItem('posRegisteredUsers', JSON.stringify(updatedUsers));
    
    // Reset form and close modal
    setNewUser({
      username: '',
      password: '',
      confirmPassword: '',
      role: 'cashier'
    });
    
    setShowRegisterModal(false);
  };

  // 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} />;
  }

  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={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('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>

      {/* 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 => (
                      <option key={category} 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>
              </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 (7%):</span>
                  <span className="font-medium">${(calculateTotal() * 0.07).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.07).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 => (
                      <option key={category} 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 === '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">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">
                            <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' 
                                : 'bg-blue-100 text-blue-800'
                            }`}>
                              {sale.paymentMethod === 'cash' ? 'Cash' : 'Credit Card'}
                            </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 (7%)</span>
                    <span className="font-medium">${(calculateTotal() * 0.07).toFixed(2)}</span>
                  </div>
                  <div className="flex justify-between text-lg font-semibold">
                    <span>Total</span>
                    <span>${(calculateTotal() * 1.07).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="flex space-x-4">
                  <button
                    onClick={() => setPaymentMethod('cash')}
                    className={`flex-1 py-3 rounded-lg border ${
                      paymentMethod === 'cash' 
                        ? 'bg-[#4fd1c5] text-white border-[#4fd1c5]' 
                        : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'
                    }`}
                  >
                    Cash
                  </button>
                  <button
                    onClick={() => setPaymentMethod('credit')}
                    className={`flex-1 py-3 rounded-lg border ${
                      paymentMethod === 'credit' 
                        ? 'bg-[#4fd1c5] text-white border-[#4fd1c5]' 
                        : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'
                    }`}
                  >
                    Credit Card
                  </button>
                </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.07)).toFixed(2)}
                      </span>
                    </div>
                  )}
                </div>
              )}
              
              <button
                onClick={processCheckout}
                disabled={paymentMethod === 'cash' && (parseFloat(amountReceived) < calculateTotal() * 1.07 || !amountReceived)}
                className={`w-full py-3 rounded-lg ${
                  (paymentMethod === 'credit' || (paymentMethod === 'cash' && parseFloat(amountReceived) >= calculateTotal() * 1.07))
                    ? '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>
              <button onClick={() => setShowReceiptModal(false)} className="text-gray-500 hover:text-gray-700">
                <X size={24} />
              </button>
            </div>
            
            <div className="p-6">
              <div className="text-center mb-6">
                <h3 className="text-xl font-bold text-gray-800">Your Business Name</h3>
                <p className="text-gray-500">123 Main Street, City, State</p>
                <p className="text-gray-500">Tel: (123) 456-7890</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">
                  <span>Date:</span>
                  <span>{new Date(currentReceipt.date).toLocaleString()}</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.total).toFixed(2)}</span>
                </div>
                <div className="flex justify-between text-sm text-gray-600">
                  <span>Tax (7%)</span>
                  <span>${(currentReceipt.total * 0.07).toFixed(2)}</span>
                </div>
                <div className="flex justify-between text-lg font-semibold">
                  <span>Total</span>
                  <span>${(currentReceipt.total * 1.07).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' : 'Credit Card'}</span>
                </div>
              </div>
              
              <div className="text-center text-sm text-gray-500">
                <p>Thank you for your purchase!</p>
                <p>Please come again</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 => (
                      <option key={category} 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>
      )}

      {/* 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">
                    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.password !== newUser.confirmPassword}
                  className={`flex-1 py-2 rounded-lg ${
                    newUser.username && newUser.password && newUser.confirmPassword && 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>
      )}
    </div>
  );
}

// Login Screen Component
function LoginScreen({ onLogin, registeredUsers }) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [showPassword, setShowPassword] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    
    // Simple validation
    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>
        
        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
          <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 && (
            <div className="text-red-600 text-sm text-center">
              {error}
            </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>
          
          <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 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="mt-4 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>
          </div>
        </form>
      </div>
    </div>
  );
}