import React, { useState, useEffect } from 'react';
import { 
  Coffee, 
  Settings, 
  Barcode, 
  CreditCard, 
  Users, 
  Printer, 
  Plus, 
  Minus, 
  Trash2, 
  Search, 
  Check, 
  Sparkles, 
  TrendingUp, 
  Package, 
  Clock, 
  UtensilsCrossed, 
  Sliders,
  FileSpreadsheet,
  Tv,
  Bell,
  ChefHat,
  Database,
  Building2,
  HardDrive,
  Download,
  FolderOpen,
  MapPin,
  Lock,
  Unlock,
  AlertTriangle,
  RefreshCw,
  Smartphone,
  Tablet,
  QrCode,
  Tags,
  CheckCircle2,
  UserCheck,
  RotateCcw
} from 'lucide-react';

const BRAND_SETTINGS = {
  businessName: "La Greenzaa",
  subBranding: "Restaurant & Cafe",
  developerBrand: "Umang Developers",
  currency: "₹",
  taxRate: 5,
  enableServiceCharge: true,
  serviceChargePercent: 2.5
};

const currencySymbol = BRAND_SETTINGS.currency;

const INITIAL_PRODUCTS = [
  { id: 'p1', name: 'Premium Espresso', category: 'Hot Coffee', price: 120, costPrice: 30, tax: '5%', sku: 'HOT-ESP-01', image: '☕', stockOnHand: 80, committedStock: 0, availableForSale: 80, openingStock: 100, unit: 'pcs', manufacturer: 'La Greenzaa Farms', reorderPoint: 15 },
  { id: 'p2', name: 'Classic Cappuccino', category: 'Hot Coffee', price: 150, costPrice: 40, tax: '5%', sku: 'HOT-CAP-02', image: '☕', stockOnHand: 120, committedStock: 4, availableForSale: 116, openingStock: 150, unit: 'pcs', manufacturer: 'La Greenzaa Farms', reorderPoint: 20 },
  { id: 'p3', name: 'Irish Cold Coffee', category: 'Cold Coffee', price: 180, costPrice: 50, tax: '12%', sku: 'CLD-COF-03', image: '🥤', stockOnHand: 140, committedStock: 20, availableForSale: 120, openingStock: 200, unit: 'pcs', manufacturer: 'La Greenzaa Roasters', reorderPoint: 30 },
  { id: 'p4', name: 'Lemon Infusion Iced Tea', category: 'Teas & Infusions', price: 120, costPrice: 25, tax: '5%', sku: 'TEA-LIT-04', image: '🍹', stockOnHand: 95, committedStock: 5, availableForSale: 90, openingStock: 100, unit: 'pcs', manufacturer: 'Nectar Teas', reorderPoint: 10 },
  { id: 'p5', name: 'Mango Blast Smoothie', category: 'Smoothies', price: 210, costPrice: 60, tax: '12%', sku: 'SMO-MAN-05', image: '🥭', stockOnHand: 60, committedStock: 2, availableForSale: 58, openingStock: 80, unit: 'pcs', manufacturer: 'La Greenzaa Orchard', reorderPoint: 8 },
  { id: 'p6', name: 'Avocado Cream Smoothie', category: 'Smoothies', price: 250, costPrice: 80, tax: '12%', sku: 'SMO-AVO-06', image: '🥑', stockOnHand: 45, committedStock: 0, availableForSale: 45, openingStock: 50, unit: 'pcs', manufacturer: 'La Greenzaa Orchard', reorderPoint: 5 },
  { id: 'p7', name: 'Paneer Tikka Pizza', category: 'Pizzas', price: 250, costPrice: 90, tax: '12%', sku: 'PIZ-PTP-09', image: '🍕', stockOnHand: 50, committedStock: 10, availableForSale: 40, openingStock: 60, unit: 'pcs', manufacturer: 'La Greenzaa Main Kitchen', reorderPoint: 12 },
  { id: 'p8', name: 'Dark Chocolate Cake', category: 'Baked Goods', price: 180, costPrice: 55, tax: '5%', sku: 'BAK-DCC-12', image: '🍫', stockOnHand: 40, committedStock: 2, availableForSale: 38, openingStock: 50, unit: 'pcs', manufacturer: 'La Greenzaa Bakery', reorderPoint: 6 }
];

const CATEGORIES = ['All Items', 'Hot Coffee', 'Cold Coffee', 'Teas & Infusions', 'Smoothies', 'Baked Goods', 'Pizzas'];

const INITIAL_CUSTOMERS = [
  { id: 'c1', name: "Mr. Devesh Rajguru", phone: "+91 99092 12345", outstandingBalance: 200.00, loyaltyPoints: 340, email: "devesh@rajguru.com" },
  { id: 'c2', name: "Aarav Patel", phone: "+91 98765 11223", outstandingBalance: 0.00, loyaltyPoints: 120, email: "aarav@patel.com" },
  { id: 'c3', name: "Neha Sharma", phone: "+91 91122 33445", outstandingBalance: 150.00, loyaltyPoints: 450, email: "neha@sharma.in" }
];

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }
  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }
  componentDidCatch(error, errorInfo) {
    console.error("ErrorBoundary caught a runtime exception:", error, errorInfo);
  }
  render() {
    if (this.state.hasError) {
      return (
        <div className="p-12 bg-slate-950 text-slate-100 min-h-screen flex flex-col items-center justify-center text-center space-y-6 select-none">
          <div className="w-16 h-16 bg-rose-950 border border-rose-800 rounded-full flex items-center justify-center text-rose-400">
            <AlertTriangle className="w-8 h-8" />
          </div>
          <div className="space-y-2">
            <h1 className="text-xl font-black">La Greenzaa POS Lifecycle Recovery</h1>
            <p className="text-xs text-slate-400 max-w-md mx-auto">
              The application state experienced a validation error. Click below to restore database properties back to original defaults.
            </p>
          </div>
          <button 
            onClick={() => {
              localStorage.clear();
              window.location.reload();
            }}
            className="px-6 py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-extrabold text-xs rounded-xl flex items-center space-x-2 shadow-lg"
          >
            <RefreshCw className="w-4 h-4" />
            <span>Reset Local Cache & Re-Initialize Database</span>
          </button>
        </div>
      );
    }
    return this.props.children;
  }
}

function POSApp() {
  // --- APPLICATION STATE DIRECTORIES ---
  // roles: kiosk | qr_ordering | waiter | biller | kds | status | owner | inventory
  const [currentRole, setCurrentRole] = useState('kiosk');
  
  // Data State Pools
  const [products, setProducts] = useState(INITIAL_PRODUCTS);
  const [orders, setOrders] = useState([]);
  const [customers, setCustomers] = useState(INITIAL_CUSTOMERS);
  const [selectedInventoryItem, setSelectedInventoryItem] = useState(null);
  const [selectedCustomer, setSelectedCustomer] = useState(INITIAL_CUSTOMERS[0]);

  // Terminal Cart Pools
  const [kioskCart, setKioskCart] = useState([]);
  const [waiterCart, setWaiterCart] = useState([]);
  const [cashierCart, setCashierCart] = useState([]);
  const [qrCart, setQrCart] = useState([]);

  // Modifiers System
  const [activeModifierItem, setActiveModifierItem] = useState(null); // { cartKey, modifiers: [] }
  const [showModifierModal, setShowModifierModal] = useState(false);
  const [tempModifiers, setTempModifiers] = useState([]);

  // Waiter Dedicated Variables
  const [waiterTable, setWaiterTable] = useState('Table 1');
  const [waiterGuestName, setWaiterGuestName] = useState('Table Guest');

  // Kiosk Specific Navigation Flow
  const [kioskMode, setKioskMode] = useState('welcome'); // welcome | select-dining-mode | select-table | catalog | finished
  const [kioskDiningMode, setKioskDiningMode] = useState('Dine-In Self-Service'); 
  const [kioskTable, setKioskTable] = useState('Table 1');
  const [kioskPaymentMode, setKioskPaymentMode] = useState('Pay at Counter'); 
  const [kioskLastOrder, setKioskLastOrder] = useState(null);

  // Table QR Self-Ordering Simulator State
  const [qrTable, setQrTable] = useState('Table 3');
  const [qrOrderPlaced, setQrOrderPlaced] = useState(false);

  // Cashier Terminal Specific States
  const [selectedUnpaidKioskOrder, setSelectedUnpaidKioskOrder] = useState(null);
  const [cashierSearchQuery, setCashierSearchQuery] = useState('');
  const [cashierSelectedCategory, setCashierSelectedCategory] = useState('All Items');
  const [activeCategory, setActiveCategory] = useState('All Items');
  const [billingOrderType, setBillingOrderType] = useState('Walk-In');

  // New Smart Recall Tracking State
  const [recalledOrderId, setRecalledOrderId] = useState(null);
  const [orderRecallFilter, setOrderRecallFilter] = useState('');

  // PIN Locking System (Owner: 8888, Inventory: 9999)
  const [pinInput, setPinInput] = useState('');
  const [securityTarget, setSecurityTarget] = useState(null); // 'owner' | 'inventory'
  const [authorizedOwner, setAuthorizedOwner] = useState(false);
  const [authorizedInventory, setAuthorizedInventory] = useState(false);
  const [lockErrorMessage, setLockErrorMessage] = useState('');

  // KOT Thermal Printer Dialog
  const [activeKOTPrint, setActiveKOTPrint] = useState(null);
  const [showPrintModal, setShowPrintModal] = useState(false);

  // Custom Notifications / Alert Box
  const [systemAlert, setSystemAlert] = useState(null); // { type: 'success'|'error', text: '' }

  // Customer registration state (Biller-accessible)
  const [showRegisterCustomerModal, setShowRegisterCustomerModal] = useState(false);
  const [newCustName, setNewCustName] = useState('');
  const [newCustPhone, setNewCustPhone] = useState('');
  const [newCustEmail, setNewCustEmail] = useState('');

  // KDS Advanced Station Filtering & Recalled order reference
  const [kdsStationFilter, setKdsStationFilter] = useState('All Stations');
  const [recentlyCompletedOrder, setRecentlyCompletedOrder] = useState(null);

  // Barcode Printer Modal
  const [selectedBarcodeItem, setSelectedBarcodeItem] = useState(null);
  const [showBarcodePrintModal, setShowBarcodePrintModal] = useState(false);

  // Custom Deletion Confirmation Modal State
  const [confirmDeleteId, setConfirmDeleteId] = useState(null);

  // --- OFFLINE DATA LOAD ON MOUNT ---
  useEffect(() => {
    try {
      const storedCatalog = localStorage.getItem('lg_catalog_state_v3');
      const storedOrders = localStorage.getItem('lg_orders_state_v3');
      const storedCustomers = localStorage.getItem('lg_customers_state_v3');
      
      if (storedCatalog) {
        const parsedCatalog = JSON.parse(storedCatalog);
        if (parsedCatalog && parsedCatalog.length > 0) {
          setProducts(parsedCatalog);
          setSelectedInventoryItem(parsedCatalog[0]);
        }
      } else {
        setProducts(INITIAL_PRODUCTS);
        setSelectedInventoryItem(INITIAL_PRODUCTS[0]);
      }

      if (storedOrders) {
        const parsedOrders = JSON.parse(storedOrders);
        if (parsedOrders) setOrders(parsedOrders);
      } else {
        setOrders([
          { id: 'ord-101', tokenNo: 101, items: [{ name: 'Classic Cappuccino', quantity: 2, price: 150, modifiers: ['No Sugar', 'Keep Vegan'] }], grandTotal: 300, customerName: 'Mr. Devesh Rajguru', orderType: 'Dine-In Self-Service', tableNo: 'Table 4', status: 'Pending', timestamp: '10:12 AM', station: 'Beverage Bar', paid: true, createdAt: Date.now() - 360000 },
          { id: 'ord-102', tokenNo: 102, items: [{ name: 'Paneer Tikka Pizza', quantity: 1, price: 250, modifiers: ['Extra Cheese'] }], grandTotal: 250, customerName: 'Aarav Patel', orderType: 'Takeaway Parcel', tableNo: 'N/A', status: 'Cooking', timestamp: '10:20 AM', station: 'Main Kitchen', paid: false, createdAt: Date.now() - 120000 }
        ]);
      }

      if (storedCustomers) {
        const parsedCustomers = JSON.parse(storedCustomers);
        if (parsedCustomers) setCustomers(parsedCustomers);
      } else {
        setCustomers(INITIAL_CUSTOMERS);
      }
    } catch (e) {
      console.error("Local sync bypassed safely: ", e);
    }
  }, []);

  const saveStateToStorage = (updatedCatalog, updatedOrders, updatedCustomers) => {
    try {
      if (updatedCatalog) localStorage.setItem('lg_catalog_state_v3', JSON.stringify(updatedCatalog));
      if (updatedOrders) localStorage.setItem('lg_orders_state_v3', JSON.stringify(updatedOrders));
      if (updatedCustomers) localStorage.setItem('lg_customers_state_v3', JSON.stringify(updatedCustomers));
    } catch (e) {
      console.error("Local writes failed: ", e);
    }
  };

  const showNotification = (text, type = 'success') => {
    setSystemAlert({ text, type });
    setTimeout(() => setSystemAlert(null), 4500);
  };

  const [timerTick, setTimerTick] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => {
      setTimerTick(prev => prev + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  const getElapsedTimeText = (createdAt) => {
    if (!createdAt) return "00:00";
    const elapsedSeconds = Math.floor((Date.now() - createdAt) / 1000);
    if (elapsedSeconds < 0) return "00:00";
    const minutes = Math.floor(elapsedSeconds / 60);
    const seconds = elapsedSeconds % 60;
    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
  };

  // --- AUDIO ALERTS ---
  const triggerAudioChime = () => {
    try {
      const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      const osc = audioCtx.createOscillator();
      const gainNode = audioCtx.createGain();
      osc.connect(gainNode);
      gainNode.connect(audioCtx.destination);
      osc.type = 'sine';
      osc.frequency.setValueAtTime(587.33, audioCtx.currentTime); // D5
      osc.frequency.setValueAtTime(698.46, audioCtx.currentTime + 0.15); // F5
      gainNode.gain.setValueAtTime(0.08, audioCtx.currentTime);
      gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.35);
      osc.start();
      osc.stop(audioCtx.currentTime + 0.35);
    } catch (e) {
      console.log("Audio alert chime executed.");
    }
  };

  // --- REAL-TIME OFFLINE DATA EXPORT BACKUPS ---
  const handleDownloadStats = () => {
    try {
      const fileReport = {
        meta: {
          brand: BRAND_SETTINGS.businessName,
          developer: BRAND_SETTINGS.developerBrand,
          timestamp: new Date().toISOString(),
          format: "La Greenzaa Central Sales Audit Backup"
        },
        financials: {
          grossMonthlySales: 445790.00,
          ordersProcessed: orders?.length || 0,
          inventoryUniqueSKUs: products?.length || 0
        },
        ordersLedger: orders,
        activeInventoryLevels: products,
        registeredCustomers: customers
      };

      const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(fileReport, null, 2));
      const downloadAnchor = document.createElement('a');
      downloadAnchor.setAttribute("href", dataStr);
      downloadAnchor.setAttribute("download", `la_greenzaa_offline_report_${new Date().toISOString().split('T')[0]}.json`);
      document.body.appendChild(downloadAnchor);
      downloadAnchor.click();
      downloadAnchor.remove();
      showNotification("SaaS offline backup logs generated and downloaded!");
    } catch (err) {
      console.error("Backup log write failed:", err);
      showNotification("Log write exception occurred", "error");
    }
  };

  const handleVerifyPINSubmit = (e) => {
    e.preventDefault();
    if (securityTarget === 'owner' && pinInput === '8888') {
      setAuthorizedOwner(true);
      setCurrentRole('owner');
      setSecurityTarget(null);
      setLockErrorMessage('');
      showNotification("Authorized Owner Panel Successfully.");
    } else if (securityTarget === 'inventory' && pinInput === '9999') {
      setAuthorizedInventory(true);
      setCurrentRole('inventory');
      setSecurityTarget(null);
      setLockErrorMessage('');
      showNotification("Authorized Inventory Suite Successfully.");
    } else {
      setLockErrorMessage('Incorrect Passcode. Access Restricted.');
      setPinInput('');
    }
  };

  const handleSwitchDeviceRole = (role) => {
    if (role === 'owner') {
      if (authorizedOwner) setCurrentRole('owner');
      else {
        setSecurityTarget('owner');
        setPinInput('');
        setLockErrorMessage('');
      }
    } else if (role === 'inventory') {
      if (authorizedInventory) setCurrentRole('inventory');
      else {
        setSecurityTarget('inventory');
        setPinInput('');
        setLockErrorMessage('');
      }
    } else {
      setCurrentRole(role);
    }
  };

  // --- MULTI-TERMINAL CART MANAGERS ---
  const getDeviceCart = (role) => {
    if (role === 'kiosk') return kioskCart;
    if (role === 'waiter') return waiterCart;
    if (role === 'cashier') return cashierCart;
    if (role === 'qr_ordering') return qrCart;
    return [];
  };

  const getDeviceCartSetter = (role) => {
    if (role === 'kiosk') return setKioskCart;
    if (role === 'waiter') return setWaiterCart;
    if (role === 'cashier') return setCashierCart;
    if (role === 'qr_ordering') return setQrCart;
    return () => {};
  };

  const handleAddCartItemWithModifiers = (product, role) => {
    const cart = getDeviceCart(role);
    const setCart = getDeviceCartSetter(role);
    const cartKey = `${product.id}-${Date.now()}`;
    const newCartItem = {
      cartKey,
      product,
      quantity: 1,
      modifiers: []
    };
    setCart([...cart, newCartItem]);
    
    // Open modifiers selection box
    setActiveModifierItem({ cartKey, role, modifiers: [] });
    setTempModifiers([]);
    setShowModifierModal(true);
  };

  const handleApplyModifiers = () => {
    if (!activeModifierItem) return;
    const setCart = getDeviceCartSetter(activeModifierItem.role);
    setCart(prev => prev.map(item => {
      if (item.cartKey === activeModifierItem.cartKey) {
        return { ...item, modifiers: tempModifiers };
      }
      return item;
    }));
    setShowModifierModal(false);
    setActiveModifierItem(null);
    showNotification("Preparation modifiers applied successfully!");
  };

  const handleUpdateCartQuantity = (cartKey, delta, role) => {
    const cart = getDeviceCart(role);
    const setCart = getDeviceCartSetter(role);
    const updated = cart.map(item => {
      if (item.cartKey === cartKey) {
        const nextQty = item.quantity + delta;
        return nextQty > 0 ? { ...item, quantity: nextQty } : null;
      }
      return item;
    }).filter(Boolean);
    setCart(updated);
  };

  const handleRemoveItemFromCart = (cartKey, role) => {
    const setCart = getDeviceCartSetter(role);
    setCart(prev => prev.filter(item => item.cartKey !== cartKey));
  };

  // Safe Math Aggregates
  const calculateAggregateBill = (cart) => {
    if (!cart || cart.length === 0) {
      return { subtotal: 0, tax: 0, serviceCharge: 0, grandTotal: 0, roundOff: 0 };
    }
    const subtotal = cart.reduce((sum, item) => sum + (item.product.price * item.quantity), 0);
    const tax = Math.round((subtotal * 0.05) * 100) / 100;
    const serviceCharge = Math.round((subtotal * 0.025) * 100) / 100;
    const rawTotal = subtotal + tax + serviceCharge;
    const grandTotal = Math.round(rawTotal);
    const roundOff = Math.round((grandTotal - rawTotal) * 100) / 100;
    return { subtotal, tax, serviceCharge, grandTotal, roundOff };
  };

  const kioskTotals = calculateAggregateBill(kioskCart);
  const waiterTotals = calculateAggregateBill(waiterCart);
  const cashierTotals = calculateAggregateBill(cashierCart);
  const qrTotals = calculateAggregateBill(qrCart);

  const handleExecuteCheckout = (role, paymentMethod, type, tableNum = 'N/A', name = 'Walk-In Guest', explicitlyUnpaid = false) => {
    const cart = getDeviceCart(role);
    const setCart = getDeviceCartSetter(role);

    if (cart.length === 0) return;
    const totals = calculateAggregateBill(cart);

    // Decrement local inventory stock
    const updatedProducts = products.map(p => {
      const match = cart.find(c => c.product.id === p.id);
      if (match) {
        const newOnHand = Math.max(0, p.stockOnHand - match.quantity);
        return {
          ...p,
          stockOnHand: newOnHand,
          availableForSale: Math.max(0, newOnHand - p.committedStock)
        };
      }
      return p;
    });

    const tokenNo = orders.length > 0 ? Math.max(...orders.map(o => o.tokenNo)) + 1 : 101;
    const timestamp = new Date().toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true });

    const newKOT = {
      id: `ord-${Date.now()}`,
      tokenNo,
      items: cart.map(item => ({
        name: item.product.name,
        quantity: item.quantity,
        price: item.product.price,
        modifiers: item.modifiers || []
      })),
      grandTotal: totals.grandTotal,
      customerName: name,
      orderType: type,
      tableNo: tableNum,
      status: explicitlyUnpaid ? 'Pending Payment' : 'Pending', 
      timestamp,
      station: cart.some(c => c.product.category === 'Pizzas') ? 'Main Kitchen' : 'Beverage Bar',
      paid: !explicitlyUnpaid,
      createdAt: Date.now()
    };

    const updatedOrders = [...orders, newKOT];
    
    // Update Loyalty points if matched with a registered customer
    const updatedCustomers = customers.map(cust => {
      if (cust.name === name) {
        return { ...cust, loyaltyPoints: cust.loyaltyPoints + Math.round(totals.grandTotal / 10) };
      }
      return cust;
    });

    setProducts(updatedProducts);
    setOrders(updatedOrders);
    setCustomers(updatedCustomers);
    saveStateToStorage(updatedProducts, updatedOrders, updatedCustomers);

    if (role === 'kiosk') {
      setKioskLastOrder(newKOT);
      setKioskMode('finished');
      setKioskCart([]);
    } else if (role === 'qr_ordering') {
      setQrOrderPlaced(true);
      setQrCart([]);
    } else {
      // If we are settling a recalled order at Biller desk, mark the original pending order as settled/completed
      if (role === 'cashier' && recalledOrderId) {
        setOrders(prev => prev.map(o => o.id === recalledOrderId ? { ...o, status: 'Pending', paid: true } : o));
        setRecalledOrderId(null);
      }
      setActiveKOTPrint(newKOT);
      setShowPrintModal(true);
      setCart([]);
    }
    showNotification(`Token #${tokenNo} submitted successfully!`);
  };

  // Smart Recall Order Handler
  const handleSmartRecallOrder = (order) => {
    // 1. Convert order items to cashier cart schema
    const loadedCart = order.items.map(item => {
      const matchedProduct = products.find(p => p.name === item.name) || products[0];
      return {
        cartKey: `${matchedProduct.id}-${Date.now()}-${Math.random()}`,
        product: matchedProduct,
        quantity: item.quantity,
        modifiers: item.modifiers || []
      };
    });

    setCashierCart(loadedCart);
    setBillingOrderType(order.orderType);
    setRecalledOrderId(order.id);

    // 2. Auto-bind table configuration if table service
    if (order.tableNo && order.tableNo !== 'N/A') {
      setWaiterTable(order.tableNo);
    }

    // 3. Smart Search & Bind Loyalty Profile by Name or Contact Phone
    const matchedCustomer = customers.find(c => 
      c.name.toLowerCase().includes(order.customerName.toLowerCase()) ||
      (order.customerPhone && c.phone.includes(order.customerPhone)) ||
      c.phone.includes(order.customerName)
    );

    if (matchedCustomer) {
      setSelectedCustomer(matchedCustomer);
      showNotification(`Order Recalled & Linked to Loyalty Account: ${matchedCustomer.name}`);
    } else {
      setSelectedCustomer(customers[0]); // Fallback to Default Guest Account
      showNotification(`Order Recalled. Guest account auto-assigned.`);
    }
  };

  // Cashier Settle Pending Kiosk Orders
  const handleSettleUnpaidKioskOrder = (orderId) => {
    const updated = orders.map(o => {
      if (o.id === orderId) {
        return { ...o, status: 'Pending', paid: true }; 
      }
      return o;
    });
    setOrders(updated);
    setSelectedUnpaidKioskOrder(null);
    saveStateToStorage(products, updated, customers);
    showNotification("Kiosk order paid successfully! Routed to Kitchen Display.");
  };

  const handleRegisterCustomerSubmit = (e) => {
    e.preventDefault();
    if (!newCustName || !newCustPhone) {
      showNotification("Name and Phone are mandatory.", "error");
      return;
    }
    const isDuplicate = customers.some(c => c.phone === newCustPhone);
    if (isDuplicate) {
      showNotification("A loyalty account with this phone number already exists.", "error");
      return;
    }

    const newProfile = {
      id: `c-${Date.now()}`,
      name: newCustName,
      phone: newCustPhone,
      email: newCustEmail || "N/A",
      outstandingBalance: 0.00,
      loyaltyPoints: 50 // Signup welcome points
    };

    const updatedCustomers = [...customers, newProfile];
    setCustomers(updatedCustomers);
    setSelectedCustomer(newProfile); // Auto-bind as the selected billing customer
    saveStateToStorage(products, orders, updatedCustomers);
    
    // Reset form states
    setNewCustName('');
    setNewCustPhone('');
    setNewCustEmail('');
    setShowRegisterCustomerModal(false);
    showNotification(`Registered loyalty account: ${newProfile.name}!`);
  };

  // KDS State Transition Handlers with Recalled Safety Cache
  const handleKdsCompleteTicket = (orderId) => {
    const orderToMark = orders.find(o => o.id === orderId);
    if (orderToMark) {
      setRecentlyCompletedOrder(orderToMark);
    }
    handleUpdateOrderStatus(orderId, 'Completed');
    showNotification("KDS Ticket Completed.");
  };

  const handleKdsRecallCompletedTicket = () => {
    if (!recentlyCompletedOrder) {
      showNotification("No recently completed order to recall.", "error");
      return;
    }
    handleUpdateOrderStatus(recentlyCompletedOrder.id, 'Ready');
    setRecentlyCompletedOrder(null);
    showNotification("Re-opened recently completed order!");
  };

  // Add Item (Inventory Dashboard)
  const handleAddCatalogItem = (e) => {
    e.preventDefault();
    const fd = new FormData(e.target);
    const newProduct = {
      id: `p-${Date.now()}`,
      name: fd.get('name') || 'Fresh Item',
      category: fd.get('category') || 'Hot Coffee',
      price: parseFloat(fd.get('price')) || 100,
      costPrice: parseFloat(fd.get('costPrice')) || 30,
      tax: fd.get('tax') || '5%',
      sku: fd.get('sku') || 'SKU-NEW',
      image: fd.get('image') || '☕',
      stockOnHand: parseInt(fd.get('stock')) || 50,
      committedStock: 0,
      availableForSale: parseInt(fd.get('stock')) || 50,
      openingStock: parseInt(fd.get('stock')) || 50,
      unit: 'pcs',
      manufacturer: 'La Greenzaa Farms',
      reorderPoint: 10
    };

    const updatedProducts = [newProduct, ...products];
    setProducts(updatedProducts);
    saveStateToStorage(updatedProducts, orders, customers);
    e.target.reset();
    showNotification("Product saved successfully to master database.");
  };

  const handleConfirmRemoveProduct = (id) => {
    setConfirmDeleteId(id);
  };

  const executeDeleteProduct = () => {
    if (!confirmDeleteId) return;
    const updatedProducts = products.filter(p => p.id !== confirmDeleteId);
    setProducts(updatedProducts);
    saveStateToStorage(updatedProducts, orders, customers);
    setConfirmDeleteId(null);
    showNotification("Product deleted from catalog.");
  };

  return (
    <div className="flex-1 flex flex-col overflow-hidden text-slate-100 bg-slate-900 select-none">
      
      {/* ========================================================= */}
      {/* SYSTEM HEADER AND SCREEN SELECTOR */}
      {/* ========================================================= */}
      <div className="bg-slate-950 px-6 py-2.5 border-b border-slate-800 flex flex-wrap items-center justify-between text-xs font-semibold z-20 gap-3">
        <div className="flex items-center space-x-3">
          <div className="p-1 bg-emerald-600 rounded text-white flex items-center justify-center">
            <Coffee className="w-4 h-4" />
          </div>
          <div>
            <span className="font-extrabold text-white">La Greenzaa - Terminal Simulator</span>
            <span className="text-[10px] text-slate-500 block">Developed by Umang Developers</span>
          </div>
        </div>

        {/* Global Notifications Alert Widget */}
        {systemAlert && (
          <div className="bg-emerald-950 border border-emerald-800 text-emerald-400 px-4 py-1.5 rounded-lg text-xs animate-pulse flex items-center space-x-2 shadow-lg">
            <Sparkles className="w-3.5 h-3.5" />
            <span>{systemAlert.text}</span>
          </div>
        )}

        <div className="flex flex-wrap items-center gap-1 bg-slate-900 p-0.5 rounded-lg border border-slate-800">
          <button 
            onClick={() => handleSwitchDeviceRole('kiosk')}
            className={`px-3 py-1 rounded-md transition-all ${currentRole === 'kiosk' ? 'bg-emerald-600 text-white font-bold' : 'text-slate-400 hover:text-white'}`}
          >
            1. Self Kiosk
          </button>
          <button 
            onClick={() => handleSwitchDeviceRole('qr_ordering')}
            className={`px-3 py-1 rounded-md transition-all flex items-center space-x-1 ${currentRole === 'qr_ordering' ? 'bg-emerald-600 text-white font-bold' : 'text-slate-400 hover:text-white'}`}
          >
            <QrCode className="w-3.5 h-3.5 text-emerald-400" />
            <span>2. Table QR Self-Order</span>
          </button>
          <button 
            onClick={() => handleSwitchDeviceRole('waiter')}
            className={`px-3 py-1 rounded-md transition-all ${currentRole === 'waiter' ? 'bg-emerald-600 text-white font-bold' : 'text-slate-400 hover:text-white'}`}
          >
            3. Waiter Tablet
          </button>
          <button 
            onClick={() => handleSwitchDeviceRole('biller')}
            className={`px-3 py-1 rounded-md transition-all ${currentRole === 'biller' ? 'bg-emerald-600 text-white font-bold' : 'text-slate-400 hover:text-white'}`}
          >
            4. Biller POS
          </button>
          <button 
            onClick={() => handleSwitchDeviceRole('kds')}
            className={`px-3 py-1 rounded-md transition-all ${currentRole === 'kds' ? 'bg-emerald-600 text-white font-bold' : 'text-slate-400 hover:text-white'}`}
          >
            5. Kitchen KDS
          </button>
          <button 
            onClick={() => handleSwitchDeviceRole('status')}
            className={`px-3 py-1 rounded-md transition-all ${currentRole === 'status' ? 'bg-emerald-600 text-white font-bold' : 'text-slate-400 hover:text-white'}`}
          >
            6. TV Signage
          </button>
          <button 
            onClick={() => handleSwitchDeviceRole('owner')}
            className={`px-3 py-1 rounded-md transition-all flex items-center space-x-1 ${currentRole === 'owner' ? 'bg-indigo-600 text-white font-bold' : 'text-slate-400 hover:text-white'}`}
          >
            <Lock className="w-3 h-3" />
            <span>Owner Panel (PIN: 8888)</span>
          </button>
          <button 
            onClick={() => handleSwitchDeviceRole('inventory')}
            className={`px-3 py-1 rounded-md transition-all flex items-center space-x-1 ${currentRole === 'inventory' ? 'bg-indigo-600 text-white font-bold' : 'text-slate-400 hover:text-white'}`}
          >
            <Lock className="w-3 h-3" />
            <span>Inventory (PIN: 9999)</span>
          </button>
        </div>
      </div>

      {/* ========================================================= */}
      {/* SCREEN CONTAINER */}
      {/* ========================================================= */}
      <div className="flex-1 overflow-hidden p-6 flex flex-col bg-slate-900/60">
        
        {/* ========================================================= */}
        {/* ROLE 1: SELF SERVICE KIOSK SCREEN */}
        {/* ========================================================= */}
        {currentRole === 'kiosk' && (
          <div className="flex-1 max-w-5xl mx-auto w-full flex flex-col justify-between overflow-hidden animate-in fade-in duration-200">
            
            {/* WELCOME VIEW */}
            {kioskMode === 'welcome' && (
              <div className="flex-1 flex flex-col items-center justify-center text-center space-y-8 bg-slate-950 p-12 rounded-3xl border border-slate-800">
                <div className="w-24 h-24 bg-gradient-to-br from-emerald-500 to-teal-700 rounded-full flex items-center justify-center text-white shadow-xl animate-bounce">
                  <Coffee className="w-12 h-12" />
                </div>
                <div>
                  <h1 className="text-4xl font-black tracking-tight text-white">Welcome to La Greenzaa</h1>
                  <p className="text-emerald-400 font-extrabold text-sm uppercase mt-2 tracking-widest">Restaurant & Cafe</p>
                  <p className="text-xs text-slate-500 mt-4 max-w-sm mx-auto">Skip the cashier queue! Customize, select your dining table and mode, and place orders directly below.</p>
                </div>
                <button 
                  onClick={() => setKioskMode('select-dining-mode')}
                  className="px-8 py-4 bg-emerald-600 hover:bg-emerald-700 text-white font-black text-sm rounded-full tracking-wider uppercase shadow-lg shadow-emerald-950 transition-transform active:scale-95"
                >
                  Touch Here to Begin
                </button>
              </div>
            )}

            {/* CHOOSE DINING MODE */}
            {kioskMode === 'select-dining-mode' && (
              <div className="flex-1 flex flex-col justify-center space-y-6 max-w-md mx-auto w-full">
                <div className="text-center">
                  <h2 className="text-xl font-black text-white">Select Your Dining Preference</h2>
                  <p className="text-xs text-slate-500 mt-1">Would you like to dine inside or package a parcel takeaway?</p>
                </div>

                <div className="grid grid-cols-2 gap-4">
                  <button 
                    onClick={() => {
                      setKioskDiningMode('Dine-In Self-Service');
                      setKioskMode('select-table');
                    }}
                    className="p-8 bg-slate-950 border-2 border-slate-800 hover:border-emerald-500 rounded-2xl flex flex-col items-center text-center space-y-3 transition-all active:scale-95"
                  >
                    <span className="text-4xl">🍽️</span>
                    <span className="font-extrabold text-sm text-white">Eat Here (Dine-In)</span>
                  </button>
                  <button 
                    onClick={() => {
                      setKioskDiningMode('Takeaway Parcel');
                      setKioskMode('catalog');
                    }}
                    className="p-8 bg-slate-950 border-2 border-slate-800 hover:border-emerald-500 rounded-2xl flex flex-col items-center text-center space-y-3 transition-all active:scale-95"
                  >
                    <span className="text-4xl">🛍️</span>
                    <span className="font-extrabold text-sm text-white">Takeaway / Parcel</span>
                  </button>
                </div>

                <button onClick={() => setKioskMode('welcome')} className="text-xs text-slate-400 hover:text-white mt-4 block text-center">← Cancel & Return</button>
              </div>
            )}

            {/* SELECT DINE-IN TABLE SCREEN */}
            {kioskMode === 'select-table' && (
              <div className="flex-1 flex flex-col justify-center space-y-6 max-w-xl mx-auto w-full">
                <div className="text-center">
                  <h2 className="text-xl font-black text-white">Select Your Dining Table Number</h2>
                  <p className="text-xs text-slate-400 mt-1">Please select an available dining table from the map layout below.</p>
                </div>

                <div className="grid grid-cols-4 gap-3">
                  {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(num => (
                    <button 
                      key={num}
                      onClick={() => {
                        setKioskTable(`Table ${num}`);
                        setKioskMode('catalog');
                      }}
                      className="p-4 bg-slate-950 hover:bg-emerald-950 border border-slate-800 hover:border-emerald-500 rounded-xl text-center transition-all active:scale-95 flex flex-col items-center"
                    >
                      <span className="text-xs font-bold text-slate-400">Table</span>
                      <span className="font-black text-lg text-emerald-400">{num}</span>
                    </button>
                  ))}
                </div>

                <button onClick={() => setKioskMode('select-dining-mode')} className="text-xs text-slate-400 hover:text-white mt-4 block text-center">← Go Back</button>
              </div>
            )}

            {/* KIOSK CATALOG VIEW */}
            {kioskMode === 'catalog' && (
              <div className="flex-1 grid grid-cols-1 lg:grid-cols-12 gap-6 overflow-hidden">
                {/* Touch menu lists */}
                <div className="lg:col-span-8 flex flex-col space-y-4 overflow-hidden">
                  <div className="bg-slate-950 p-4 rounded-2xl border border-slate-850 flex items-center justify-between text-xs">
                    <div>
                      <span className="text-slate-500 block uppercase font-bold text-[9px]">Mode Selected</span>
                      <span className="font-extrabold text-emerald-400">{kioskDiningMode} {kioskDiningMode === 'Dine-In Self-Service' && `(${kioskTable})`}</span>
                    </div>
                    <button onClick={() => setKioskMode('select-dining-mode')} className="text-slate-400 hover:underline">Change Mode</button>
                  </div>

                  {/* Horiz category slider */}
                  <div className="flex items-center space-x-1.5 overflow-x-auto pb-1 scrollbar-none">
                    {CATEGORIES.map(cat => (
                      <button
                        key={cat}
                        onClick={() => setActiveCategory(cat)}
                        className={`whitespace-nowrap px-4 py-2 rounded-full text-xs font-bold transition-all ${
                          activeCategory === cat ? 'bg-emerald-600 text-white' : 'bg-slate-950 text-slate-400 border border-slate-800'
                        }`}
                      >
                        {cat}
                      </button>
                    ))}
                  </div>

                  <div className="flex-1 overflow-y-auto pr-1">
                    <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
                      {products.filter(p => activeCategory === 'All Items' || p.category === activeCategory).map(prod => (
                        <div 
                          key={prod.id}
                          onClick={() => handleAddCartItemWithModifiers(prod, 'kiosk')}
                          className="bg-slate-950 border border-slate-850 hover:border-emerald-700 rounded-2xl p-4 flex flex-col justify-between cursor-pointer transition-all active:scale-95 group"
                        >
                          <div className="text-center pb-2 border-b border-slate-900 flex flex-col items-center">
                            <span className="text-4xl mb-2 group-hover:scale-110 transition-transform">{prod.image}</span>
                            <h4 className="font-extrabold text-slate-200 text-xs line-clamp-1">{prod.name}</h4>
                            <span className="text-[9px] text-slate-500 uppercase font-mono mt-0.5">{prod.sku}</span>
                          </div>
                          <div className="flex justify-between items-center pt-2 text-xs font-bold text-slate-400">
                            <span>Price:</span>
                            <span className="text-emerald-400">{currencySymbol}{prod.price}</span>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>

                {/* Right Side Kiosk Cart */}
                <div className="lg:col-span-4 bg-slate-950 rounded-2xl border border-slate-800 flex flex-col justify-between h-full overflow-hidden shadow-2xl">
                  <div className="p-4 bg-slate-900/40 border-b border-slate-900">
                    <span className="text-xs font-black uppercase text-slate-400 block mb-2">Order summary</span>
                    <div className="space-y-1 bg-slate-950 p-3 rounded-lg text-xs">
                      <div className="flex justify-between"><span>Method:</span> <span className="font-bold text-slate-200">{kioskDiningMode}</span></div>
                      {kioskDiningMode === 'Dine-In Self-Service' && (
                        <div className="flex justify-between"><span>Table:</span> <span className="font-bold text-emerald-400">{kioskTable}</span></div>
                      )}
                    </div>
                  </div>

                  <div className="flex-1 overflow-y-auto p-4 space-y-2">
                    {kioskCart.map(item => (
                      <div key={item.cartKey} className="flex flex-col bg-slate-900/50 p-2.5 rounded-xl border border-slate-900 space-y-1.5">
                        <div className="flex items-center justify-between">
                          <div className="flex-1 text-xs">
                            <span className="font-bold text-slate-200 block">{item.product.name}</span>
                            <span className="text-[10px] text-slate-400">{currencySymbol}{item.product.price} each</span>
                          </div>

                          <div className="flex items-center space-x-2 bg-slate-950 px-2 py-1 rounded border border-slate-850 text-xs font-bold">
                            <button onClick={() => handleUpdateCartQuantity(item.cartKey, -1, 'kiosk')}><Minus className="w-3.5 h-3.5" /></button>
                            <span className="w-4 text-center text-slate-100">{item.quantity}</span>
                            <button onClick={() => handleUpdateCartQuantity(item.cartKey, 1, 'kiosk')}><Plus className="w-3.5 h-3.5" /></button>
                          </div>

                          <button onClick={() => handleRemoveItemFromCart(item.cartKey, 'kiosk')} className="text-slate-600 pl-1.5"><Trash2 className="w-3.5 h-3.5" /></button>
                        </div>
                        {item.modifiers?.length > 0 && (
                          <div className="flex flex-wrap gap-1">
                            {item.modifiers.map((mod, i) => (
                              <span key={i} className="text-[8px] font-bold uppercase tracking-wider bg-emerald-950 border border-emerald-800 text-emerald-400 px-1.5 py-0.5 rounded">
                                {mod}
                              </span>
                            ))}
                          </div>
                        )}
                      </div>
                    ))}
                  </div>

                  {/* Settlement */}
                  <div className="p-4 bg-slate-900/40 border-t border-slate-900 space-y-3 text-xs">
                    <div className="space-y-1">
                      <label className="text-[9px] uppercase font-bold text-slate-500 block">Select Payment Location</label>
                      <div className="grid grid-cols-2 gap-2 font-bold">
                        <button 
                          onClick={() => setKioskPaymentMode('Pay at Counter')}
                          className={`py-2 rounded-xl border text-[10px] uppercase transition-all ${
                            kioskPaymentMode === 'Pay at Counter' ? 'bg-emerald-950 border-emerald-500 text-emerald-400' : 'bg-slate-900 border-slate-855 text-slate-505'
                          }`}
                        >
                          💸 Pay Cashier/Biller
                        </button>
                        <button 
                          onClick={() => setKioskPaymentMode('Card/UPI Online')}
                          className={`py-2 rounded-xl border text-[10px] uppercase transition-all ${
                            kioskPaymentMode === 'Card/UPI Online' ? 'bg-emerald-950 border-emerald-500 text-emerald-400' : 'bg-slate-900 border-slate-855 text-slate-505'
                          }`}
                        >
                          💳 Online Card/UPI
                        </button>
                      </div>
                    </div>

                    <div className="flex justify-between items-center font-black border-t border-slate-900 pt-2 text-sm text-slate-200">
                      <span>Total Due:</span>
                      <span className="text-lg text-emerald-400">{currencySymbol}{kioskTotals.grandTotal}</span>
                    </div>

                    <button 
                      disabled={kioskCart.length === 0}
                      onClick={() => handleExecuteCheckout(
                        'kiosk', 
                        kioskPaymentMode === 'Pay at Counter' ? 'Cash Pending' : 'UPI Online', 
                        kioskDiningMode, 
                        kioskDiningMode === 'Dine-In Self-Service' ? kioskTable : 'N/A', 
                        kioskDiningMode === 'Dine-In Self-Service' ? `Self Table ${kioskTable}` : 'Self Parcel Guest',
                        kioskPaymentMode === 'Pay at Counter' 
                      )}
                      className="w-full py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-black text-xs rounded-xl shadow uppercase tracking-wider transition-all disabled:opacity-50"
                    >
                      🚀 SUBMIT ORDER & PRINT TICKET
                    </button>
                  </div>
                </div>
              </div>
            )}

            {/* ORDER SUBMITTED TICKET GENERATION SCREEN */}
            {kioskMode === 'finished' && kioskLastOrder && (
              <div className="flex-1 flex flex-col items-center justify-center max-w-md mx-auto w-full space-y-6 animate-in zoom-in duration-200 text-center">
                <div className="bg-slate-950 p-6 rounded-3xl border border-slate-800 space-y-4 w-full">
                  <div className="w-12 h-12 bg-emerald-950 border border-emerald-900 rounded-full flex items-center justify-center text-emerald-400 mx-auto">
                    <Check className="w-6 h-6 animate-bounce" />
                  </div>
                  <div>
                    <h3 className="font-extrabold text-white text-lg">Order Logged Successfully!</h3>
                    <span className="text-4xl block text-emerald-400 font-black tracking-tight mt-1">TOKEN {kioskLastOrder.tokenNo}</span>
                  </div>

                  <div className="bg-slate-900 p-4 rounded-2xl text-left text-xs text-slate-400 space-y-2 border border-slate-850">
                    <div className="flex justify-between"><span>Dining Style:</span> <span className="font-bold text-slate-200">{kioskLastOrder.orderType}</span></div>
                    {kioskLastOrder.tableNo !== 'N/A' && (
                      <div className="flex justify-between"><span>Allocated Table:</span> <span className="font-bold text-slate-200">{kioskLastOrder.tableNo}</span></div>
                    )}
                    <div className="flex justify-between border-t border-slate-800 pt-2 font-bold text-slate-300">
                      <span>Total Invoice:</span>
                      <span>{currencySymbol}{kioskLastOrder.grandTotal}</span>
                    </div>
                  </div>

                  {/* Action prompts */}
                  <div className="bg-slate-900/50 p-4 rounded-2xl border border-slate-850 text-xs text-left leading-relaxed">
                    {kioskLastOrder.paid ? (
                      <p className="text-slate-400">
                        <b>🟢 Paid Successfully:</b> Your order has routed directly to the kitchen display boards. Please watch the large <b>TV Signage Wall Display</b>. Once your token sounds, pick up your plate.
                      </p>
                    ) : (
                      <p className="text-amber-400">
                        <b>⚠️ Action Required (Settle at Biller):</b> Please take your printed token ticket to the <b>Biller Cashier Terminal</b>. Once you pay, your order will route to the kitchen displays and television signage queue.
                      </p>
                    )}
                  </div>
                </div>

                <button 
                  onClick={() => setKioskMode('welcome')}
                  className="w-full py-3 bg-slate-950 hover:bg-slate-900 text-slate-300 text-xs font-bold rounded-xl border border-slate-800 transition-colors"
                >
                  Start New Order
                </button>
              </div>
            )}

          </div>
        )}

        {/* ========================================================= */}
        {/* ROLE 2: TABLE QR SELF-ORDERING SIMULATOR */}
        {/* ========================================================= */}
        {currentRole === 'qr_ordering' && (
          <div className="flex-1 max-w-4xl mx-auto w-full flex flex-col justify-between overflow-hidden animate-in fade-in duration-200">
            <div className="bg-slate-950 p-4 rounded-2xl border border-slate-800 flex justify-between items-center text-xs">
              <div className="flex items-center space-x-2">
                <QrCode className="w-5 h-5 text-emerald-400 animate-pulse" />
                <div>
                  <span className="font-bold text-slate-200 block">Table QR Scan Simulator</span>
                  <span className="text-[10px] text-slate-500">Live ordering from private mobile device</span>
                </div>
              </div>
              <div className="flex items-center space-x-2">
                <span className="text-slate-400 font-bold">Select Scanned Table QR:</span>
                <select 
                  value={qrTable}
                  onChange={(e) => {
                    setQrTable(e.target.value);
                    setQrOrderPlaced(false);
                  }}
                  className="bg-slate-900 border border-slate-800 rounded p-1.5 text-xs text-emerald-400 font-black focus:outline-none"
                >
                  {[1,2,3,4,5,6,7,8].map(n => (
                    <option key={n} value={`Table ${n}`}>Table #{n}</option>
                  ))}
                </select>
              </div>
            </div>

            {!qrOrderPlaced ? (
              <div className="flex-1 grid grid-cols-1 lg:grid-cols-12 gap-6 mt-4 overflow-hidden">
                <div className="lg:col-span-8 flex flex-col space-y-4 overflow-hidden">
                  <div className="flex items-center space-x-1.5 overflow-x-auto pb-1 scrollbar-none">
                    {CATEGORIES.map(cat => (
                      <button
                        key={cat}
                        onClick={() => setActiveCategory(cat)}
                        className={`whitespace-nowrap px-4 py-1.5 rounded-full text-xs font-bold transition-all ${
                          activeCategory === cat ? 'bg-emerald-600 text-white' : 'bg-slate-950 text-slate-400 border border-slate-800'
                        }`}
                      >
                        {cat}
                      </button>
                    ))}
                  </div>

                  <div className="flex-1 overflow-y-auto pr-1">
                    <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
                      {products.filter(p => activeCategory === 'All Items' || p.category === activeCategory).map(prod => (
                        <div 
                          key={prod.id}
                          onClick={() => handleAddCartItemWithModifiers(prod, 'qr_ordering')}
                          className="bg-slate-950 border border-slate-855 hover:border-emerald-700 rounded-2xl p-4 flex flex-col justify-between cursor-pointer transition-all active:scale-95 group"
                        >
                          <div className="text-center pb-2 border-b border-slate-900 flex flex-col items-center">
                            <span className="text-3xl mb-2 group-hover:scale-110 transition-transform">{prod.image}</span>
                            <h4 className="font-extrabold text-slate-200 text-xs line-clamp-1">{prod.name}</h4>
                          </div>
                          <div className="flex justify-between items-center pt-2 text-xs font-bold text-slate-400">
                            <span>Price:</span>
                            <span className="text-emerald-400">{currencySymbol}{prod.price}</span>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>

                <div className="lg:col-span-4 bg-slate-950 rounded-2xl border border-slate-800 flex flex-col justify-between h-full overflow-hidden shadow-2xl">
                  <div className="p-4 bg-slate-900/40 border-b border-slate-900">
                    <span className="text-xs font-black uppercase text-emerald-400 block mb-1">Live Table Cart</span>
                    <span className="text-[10px] text-slate-400 block">Orders sync instantly to kitchen display and television monitors</span>
                  </div>

                  <div className="flex-1 overflow-y-auto p-4 space-y-2">
                    {qrCart.map(item => (
                      <div key={item.cartKey} className="flex flex-col bg-slate-900/50 p-2.5 rounded-xl border border-slate-900 space-y-1.5">
                        <div className="flex items-center justify-between">
                          <div className="flex-1 text-xs">
                            <span className="font-bold text-slate-200 block">{item.product.name}</span>
                            <span className="text-[10px] text-slate-400">{currencySymbol}{item.product.price} each</span>
                          </div>

                          <div className="flex items-center space-x-2 bg-slate-950 px-2 py-1 rounded border border-slate-850 text-xs font-bold">
                            <button onClick={() => handleUpdateCartQuantity(item.cartKey, -1, 'qr_ordering')}><Minus className="w-3 h-3" /></button>
                            <span className="w-4 text-center text-slate-100">{item.quantity}</span>
                            <button onClick={() => handleUpdateCartQuantity(item.cartKey, 1, 'qr_ordering')}><Plus className="w-3 h-3" /></button>
                          </div>

                          <button onClick={() => handleRemoveItemFromCart(item.cartKey, 'qr_ordering')} className="text-slate-600 pl-1"><Trash2 className="w-3.5 h-3.5" /></button>
                        </div>
                        {item.modifiers?.length > 0 && (
                          <div className="flex flex-wrap gap-1">
                            {item.modifiers.map((mod, i) => (
                              <span key={i} className="text-[8px] font-bold uppercase tracking-wider bg-emerald-950 border border-emerald-800 text-emerald-400 px-1.5 py-0.5 rounded">
                                {mod}
                              </span>
                            ))}
                          </div>
                        )}
                      </div>
                    ))}
                  </div>

                  <div className="p-4 bg-slate-900/40 border-t border-slate-900 space-y-3">
                    <div className="flex justify-between items-center font-black text-sm text-slate-200">
                      <span>Subtotal:</span>
                      <span className="text-emerald-400">{currencySymbol}{qrTotals.subtotal}</span>
                    </div>
                    <button 
                      disabled={qrCart.length === 0}
                      onClick={() => handleExecuteCheckout('qr_ordering', 'UPI Online', 'Table Service', qrTable, 'QR Self-Service Guest')}
                      className="w-full py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-black text-xs rounded-xl shadow uppercase tracking-wider transition-all disabled:opacity-50"
                    >
                      🚀 DISPATCH DIGITAL KOT
                    </button>
                  </div>
                </div>
              </div>
            ) : (
              <div className="flex-1 flex flex-col items-center justify-center text-center space-y-4 bg-slate-950 p-12 rounded-3xl border border-slate-800 mt-4">
                <CheckCircle2 className="w-16 h-16 text-emerald-400 animate-bounce" />
                <div>
                  <h3 className="text-xl font-bold text-white">QR Order Placed successfully!</h3>
                  <p className="text-xs text-slate-400 mt-1 max-w-sm mx-auto">Your order has been routed instantly to the kitchen KDS. Please monitor the signage wall display for status updates.</p>
                </div>
                <button 
                  onClick={() => setQrOrderPlaced(false)}
                  className="px-6 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs rounded-xl"
                >
                  Place Another QR Order
                </button>
              </div>
            )}
          </div>
        )}

        {/* ========================================================= */}
        {/* ROLE 3: TABLE-SIDE WAITER TABLET */}
        {/* ========================================================= */}
        {currentRole === 'waiter' && (
          <div className="flex-1 grid grid-cols-1 xl:grid-cols-12 gap-6 overflow-hidden animate-in fade-in duration-200 max-w-[1500px] mx-auto w-full font-semibold">
            
            {/* Catalog (8 columns) */}
            <div className="xl:col-span-8 flex flex-col space-y-4 overflow-hidden">
              <div className="bg-slate-950 p-4 rounded-2xl border border-slate-800 flex flex-col sm:flex-row items-center justify-between gap-4">
                <div>
                  <h1 className="text-sm font-black text-white uppercase tracking-wider">Waiter Hand-held Tablet</h1>
                  <p className="text-[10px] text-slate-400">Allocate orders, select dining table mappings, and manage custom modifiers.</p>
                </div>

                <div className="flex items-center space-x-2 text-xs">
                  <span className="text-slate-400 font-bold">Select Active Table:</span>
                  <select 
                    value={waiterTable}
                    onChange={(e) => setWaiterTable(e.target.value)}
                    className="bg-slate-900 border border-slate-800 rounded p-1.5 text-xs text-emerald-400 font-black focus:ring-1 focus:ring-emerald-500 outline-none"
                  >
                    {[1, 2, 3, 4, 5, 6, 7, 8].map(n => (
                      <option key={n} value={`Table ${n}`}>Table #{n}</option>
                    ))}
                  </select>
                </div>
              </div>

              {/* Grid of items */}
              <div className="flex-1 overflow-y-auto pr-1">
                <div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4">
                  {products.map(prod => (
                    <div 
                      key={prod.id}
                      onClick={() => handleAddCartItemWithModifiers(prod, 'waiter')}
                      className="bg-slate-950 border border-slate-855 hover:border-emerald-700 rounded-2xl p-4 flex flex-col justify-between cursor-pointer transition-all active:scale-95 group"
                    >
                      <div className="text-center pb-2 border-b border-slate-900 flex flex-col items-center">
                        <span className="text-3xl mb-2 group-hover:scale-110 transition-transform">{prod.image}</span>
                        <h4 className="font-extrabold text-slate-200 text-xs line-clamp-1">{prod.name}</h4>
                        <span className="text-[9px] text-slate-500 uppercase font-mono">{prod.sku}</span>
                      </div>
                      <div className="flex justify-between items-center pt-2 text-xs font-bold text-slate-400">
                        <span>Price:</span>
                        <span className="text-emerald-400">{currencySymbol}{prod.price}</span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* Right columns (4 columns) */}
            <div className="xl:col-span-4 bg-slate-950 rounded-2xl border border-slate-800 flex flex-col justify-between h-full overflow-hidden shadow-2xl">
              <div className="p-4 bg-slate-900/40 border-b border-slate-900 space-y-3">
                <span className="text-xs font-black uppercase text-slate-400 block">Table order details</span>
                <div className="grid grid-cols-2 gap-3 text-xs">
                  <div className="space-y-1">
                    <label className="text-[9px] font-bold uppercase text-slate-500 block">Dining Area</label>
                    <span className="block font-black text-emerald-400 text-sm bg-slate-950 p-2 rounded border border-slate-850">{waiterTable}</span>
                  </div>
                  <div className="space-y-1">
                    <label className="text-[9px] font-bold uppercase text-slate-500 block">Description / Notes</label>
                    <input 
                      type="text"
                      className="w-full bg-slate-950 border border-slate-850 p-2 rounded text-xs text-slate-200 focus:outline-none"
                      value={waiterGuestName}
                      onChange={(e) => setWaiterGuestName(e.target.value)}
                    />
                  </div>
                </div>
              </div>

              <div className="flex-1 overflow-y-auto p-4 space-y-2.5">
                {waiterCart.map(item => (
                  <div key={item.cartKey} className="flex flex-col bg-slate-900/50 p-3 rounded-xl border border-slate-900 space-y-1.5">
                    <div className="flex items-center justify-between">
                      <div className="flex-1 pr-1 text-xs">
                        <span className="font-bold text-slate-200 block">{item.product.name}</span>
                        <span className="text-[10px] text-slate-400">{currencySymbol}{item.product.price} each</span>
                      </div>

                      <div className="flex items-center space-x-2 bg-slate-950 px-2 py-1 rounded border border-slate-855 text-xs font-bold">
                        <button onClick={() => handleUpdateCartQuantity(item.cartKey, -1, 'waiter')}><Minus className="w-3 h-3" /></button>
                        <span className="w-4 text-center text-slate-100">{item.quantity}</span>
                        <button onClick={() => handleUpdateCartQuantity(item.cartKey, 1, 'waiter')}><Plus className="w-3 h-3" /></button>
                      </div>

                      <button onClick={() => handleRemoveItemFromCart(item.cartKey, 'waiter')} className="text-slate-600 pl-1.5"><Trash2 className="w-4 h-4" /></button>
                    </div>
                    {item.modifiers?.length > 0 && (
                      <div className="flex flex-wrap gap-1">
                        {item.modifiers.map((mod, i) => (
                          <span key={i} className="text-[8px] font-bold uppercase tracking-wider bg-emerald-950 border border-emerald-800 text-emerald-400 px-1.5 py-0.5 rounded">
                            {mod}
                          </span>
                        ))}
                      </div>
                    )}
                  </div>
                ))}
              </div>

              <div className="p-4 bg-slate-900/40 border-t border-slate-900 space-y-3">
                <div className="flex justify-between text-xs font-bold text-slate-400">
                  <span>Guest Total:</span>
                  <span>{currencySymbol}{waiterTotals.subtotal}</span>
                </div>
                <button 
                  disabled={waiterCart.length === 0}
                  onClick={() => handleExecuteCheckout('waiter', 'Cash', 'Table Service', waiterTable, waiterGuestName)}
                  className="w-full py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-black text-xs rounded-xl shadow uppercase tracking-wider transition-colors disabled:opacity-50"
                >
                  🚀 Send to Kitchen (KOT)
                </button>
              </div>
            </div>

          </div>
        )}

        {/* ========================================================= */}
        {/* ROLE 4: POS CASHIER TERMINAL (BILLER DESK) */}
        {/* ========================================================= */}
        {currentRole === 'biller' && (
          <div className="flex-1 grid grid-cols-1 xl:grid-cols-12 gap-6 overflow-hidden animate-in fade-in duration-200 max-w-[1600px] mx-auto w-full font-semibold">
            
            {/* Left Column POS list (8 columns) */}
            <div className="xl:col-span-8 flex flex-col space-y-4 overflow-hidden">
              
              {/* SMART RECALL QUEUE PANEL */}
              <div className="bg-slate-950 p-4 rounded-2xl border border-slate-800">
                <div className="flex items-center justify-between mb-3">
                  <div>
                    <span className="text-[10px] uppercase font-black text-emerald-400 tracking-wider block">Smart Pending Order Recaller</span>
                    <span className="text-[9px] text-slate-500 block">Fetch, modify, and assign loyalty accounts to any pending Kiosk or QR bill without re-adding items</span>
                  </div>
                  <div className="relative w-48 sm:w-64">
                    <Search className="w-3 h-3 absolute left-2 top-2 text-slate-500" />
                    <input 
                      type="text" 
                      placeholder="Filter by Table, Token, Guest..."
                      className="w-full bg-slate-900 border border-slate-800 pl-7 pr-3 py-1 rounded-lg text-[10px] focus:outline-none focus:border-emerald-500"
                      value={orderRecallFilter}
                      onChange={(e) => setOrderRecallFilter(e.target.value)}
                    />
                  </div>
                </div>
                
                <div className="flex space-x-2.5 overflow-x-auto pb-2 scrollbar-none">
                  {orders.filter(o => {
                    const matchesUnpaid = o.status === 'Pending Payment' || !o.paid;
                    const matchesQuery = o.tokenNo.toString().includes(orderRecallFilter) || 
                                         o.customerName.toLowerCase().includes(orderRecallFilter.toLowerCase()) || 
                                         o.tableNo.toLowerCase().includes(orderRecallFilter.toLowerCase());
                    return matchesUnpaid && matchesQuery;
                  }).map(o => (
                    <div 
                      key={o.id}
                      onClick={() => handleSmartRecallOrder(o)}
                      className={`p-3 rounded-xl border cursor-pointer min-w-[230px] flex flex-col justify-between transition-all ${
                        recalledOrderId === o.id ? 'bg-emerald-950/40 border-emerald-500 shadow-md ring-1 ring-emerald-500/30' : 'bg-slate-900 border-slate-855 hover:border-slate-700'
                      }`}
                    >
                      <div className="flex justify-between items-start">
                        <div className="text-xs">
                          <span className="font-extrabold text-white block">Token #{o.tokenNo}</span>
                          <span className="text-[9px] text-slate-400 font-bold block">{o.tableNo !== 'N/A' ? `Dining: ${o.tableNo}` : o.orderType}</span>
                        </div>
                        <span className="text-[9px] px-1.5 py-0.5 bg-slate-800 rounded font-bold text-slate-400 uppercase">{o.items.length} Items</span>
                      </div>
                      
                      <div className="flex justify-between items-center border-t border-slate-855/60 mt-2.5 pt-2">
                        <span className="text-[9px] text-slate-500 truncate max-w-[120px] font-medium">Guest: {o.customerName}</span>
                        <span className="font-black text-xs text-emerald-400">{currencySymbol}{o.grandTotal}</span>
                      </div>
                    </div>
                  ))}
                  {orders.filter(o => o.status === 'Pending Payment' || !o.paid).length === 0 && (
                    <span className="text-[10px] text-slate-500 py-3 block">No active unpaid or recalled tickets pending in the local pipeline...</span>
                  )}
                </div>
              </div>

              {/* Standard POS catalog search and Customer bind */}
              <div className="bg-slate-950 p-4 rounded-2xl border border-slate-800 flex flex-col md:flex-row items-center justify-between gap-4">
                <div className="relative flex-1 w-full">
                  <Search className="w-4 h-4 absolute left-3 top-3 text-slate-500" />
                  <input 
                    type="text"
                    className="w-full bg-slate-900 border border-slate-800 pl-9 pr-4 py-2 rounded-xl text-xs focus:ring-1 focus:ring-emerald-500 focus:outline-none"
                    placeholder="Search menu item catalog..."
                    value={cashierSearchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                  />
                </div>
                
                {/* Select Loyalty Customer & Add Customer Button */}
                <div className="flex items-center space-x-2 text-xs">
                  <span className="text-emerald-400 font-extrabold">Link Loyalty Account:</span>
                  <select 
                    value={selectedCustomer.id}
                    onChange={(e) => {
                      const found = customers.find(c => c.id === e.target.value);
                      if (found) {
                        setSelectedCustomer(found);
                        showNotification(`Bill Shipped to Account: ${found.name}`);
                      }
                    }}
                    className="bg-slate-900 border border-slate-800 rounded p-1.5 text-xs text-emerald-400 font-black focus:outline-none"
                  >
                    {customers.map(c => (
                      <option key={c.id} value={c.id}>{c.name} ({c.phone})</option>
                    ))}
                  </select>
                  
                  {/* Option to Register/Add Customer Profile */}
                  <button 
                    onClick={() => setShowRegisterCustomerModal(true)}
                    className="px-2.5 py-1.5 bg-indigo-600 hover:bg-indigo-700 text-white font-black rounded-lg transition-colors flex items-center space-x-1"
                  >
                    <Plus className="w-3.5 h-3.5" />
                    <span>Register Cust.</span>
                  </button>
                </div>
              </div>

              {/* POS Category Tabs */}
              <div className="flex items-center space-x-1.5 overflow-x-auto pb-2 scrollbar-none">
                {CATEGORIES.map(cat => (
                  <button
                    key={cat}
                    onClick={() => setCashierSelectedCategory(cat)}
                    className={`whitespace-nowrap px-3 py-1.5 rounded-full text-[11px] font-bold transition-all ${
                      cashierSelectedCategory === cat 
                        ? 'bg-emerald-600 text-white' 
                        : 'bg-slate-900 text-slate-400 border border-slate-800'
                    }`}
                  >
                    {cat}
                  </button>
                ))}
              </div>

              {/* Grid of items */}
              <div className="flex-1 overflow-y-auto pr-1">
                <div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-3 font-semibold">
                  {products.filter(p => {
                    const matchesCategory = cashierSelectedCategory === 'All Items' || p.category === cashierSelectedCategory;
                    const matchesSearch = p.name.toLowerCase().includes(cashierSearchQuery.toLowerCase());
                    return matchesCategory && matchesSearch;
                  }).map(prod => (
                    <div 
                      key={prod.id}
                      onClick={() => handleAddCartItemWithModifiers(prod, 'cashier')}
                      className="bg-slate-950 border border-slate-855 hover:border-emerald-700 rounded-2xl p-3 flex flex-col justify-between cursor-pointer transition-all active:scale-95"
                    >
                      <div className="text-center pb-2 border-b border-slate-900 flex flex-col items-center">
                        <span className="text-3xl block mb-1">{prod.image}</span>
                        <h4 className="font-bold text-slate-100 text-xs line-clamp-1">{prod.name}</h4>
                        <span className="text-[9px] text-slate-500 uppercase font-mono">{prod.sku}</span>
                      </div>
                      <div className="flex justify-between items-center pt-2 text-xs font-bold text-slate-400">
                        <span>Price:</span>
                        <span className="text-emerald-400">{currencySymbol}{prod.price}</span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

            </div>

            {/* Right Billing Desk columns (4 columns) */}
            <div className="xl:col-span-4 bg-slate-950 rounded-2xl border border-slate-800 flex flex-col justify-between h-full overflow-hidden">
              
              {/* Customer ledger tracking */}
              <div className="p-4 bg-slate-900/30 border-b border-slate-900 space-y-3">
                <div className="bg-slate-950 p-3.5 rounded-xl border border-slate-800 shadow-sm space-y-1.5">
                  <div className="flex justify-between items-center text-xs font-semibold">
                    <span className="font-extrabold text-slate-200 flex items-center space-x-1">
                      <Users className="w-3.5 h-3.5 text-emerald-400" />
                      <span>{selectedCustomer.name}</span>
                    </span>
                    <span className="text-[10px] text-slate-500">{selectedCustomer.phone}</span>
                  </div>
                  
                  <div className="flex justify-between items-center text-[10px] border-t border-slate-900 pt-1.5 font-bold">
                    <span className="text-slate-500">Loyalty Points Balance:</span>
                    <span className="text-emerald-400 font-extrabold">{selectedCustomer.loyaltyPoints} PTS</span>
                  </div>
                </div>

                <div className="grid grid-cols-2 gap-2 text-xs font-bold">
                  <button 
                    onClick={() => setBillingOrderType('Walk-In')}
                    className={`py-2 rounded-xl border transition-all ${
                      billingOrderType === 'Walk-In' ? 'bg-emerald-950 border-emerald-500 text-emerald-400' : 'bg-slate-900 border-slate-800 text-slate-500'
                    }`}
                  >
                    🚶 Walk-In
                  </button>
                  <button 
                    onClick={() => setBillingOrderType('Home Delivery')}
                    className={`py-2 rounded-xl border transition-all ${
                      billingOrderType === 'Home Delivery' ? 'bg-emerald-950 border-emerald-500 text-emerald-400' : 'bg-slate-900 border-slate-800 text-slate-500'
                    }`}
                  >
                    🛵 Home Delivery
                  </button>
                </div>
              </div>

              {/* Items loaded */}
              <div className="flex-1 overflow-y-auto p-4 space-y-2">
                {cashierCart.map(item => (
                  <div key={item.cartKey} className="flex flex-col bg-slate-900/50 p-3 rounded-xl border border-slate-900 space-y-1.5">
                    <div className="flex items-center justify-between">
                      <div className="flex-1 pr-1 text-xs">
                        <span className="font-bold text-slate-200 block">{item.product.name}</span>
                        <span className="text-[10px] text-slate-400">{currencySymbol}{item.product.price} each</span>
                      </div>

                      <div className="flex items-center space-x-2 bg-slate-950 px-2 py-1 rounded border border-slate-855 text-xs font-bold">
                        <button onClick={() => handleUpdateCartQuantity(item.cartKey, -1, 'cashier')}><Minus className="w-3 h-3" /></button>
                        <span className="font-bold w-4 text-center text-slate-100">{item.quantity}</span>
                        <button onClick={() => handleUpdateCartQuantity(item.cartKey, 1, 'cashier')}><Plus className="w-3 h-3" /></button>
                      </div>

                      <span className="text-xs font-extrabold text-slate-200 w-16 text-right pr-1">
                        {currencySymbol}{(item.product.price * item.quantity).toFixed(2)}
                      </span>

                      <button onClick={() => handleRemoveItemFromCart(item.cartKey, 'cashier')} className="text-slate-600 pl-1"><Trash2 className="w-3.5 h-3.5" /></button>
                    </div>
                    {item.modifiers?.length > 0 && (
                      <div className="flex flex-wrap gap-1">
                        {item.modifiers.map((mod, i) => (
                          <span key={i} className="text-[8px] font-bold uppercase tracking-wider bg-emerald-950 border border-emerald-800 text-emerald-400 px-1.5 py-0.5 rounded">
                            {mod}
                          </span>
                        ))}
                      </div>
                    )}
                  </div>
                ))}
              </div>

              {/* Calculations Summary */}
              <div className="bg-slate-900 p-4 border-t border-slate-800 space-y-2 text-xs">
                <div className="flex justify-between text-slate-500">
                  <span>Subtotal:</span>
                  <span className="font-semibold text-slate-300">{currencySymbol}{cashierTotals.subtotal.toFixed(2)}</span>
                </div>
                <div className="flex justify-between text-slate-500">
                  <span>Tax (5% GST Included):</span>
                  <span className="font-semibold text-slate-300">{currencySymbol}{cashierTotals.tax.toFixed(2)}</span>
                </div>
                <div className="flex justify-between text-slate-500 border-b border-dashed border-slate-800 pb-2">
                  <span>Round Off:</span>
                  <span className="font-semibold text-slate-300">{currencySymbol}{cashierTotals.roundOff.toFixed(2)}</span>
                </div>
                <div className="flex justify-between items-center pt-1 font-extrabold text-sm text-slate-800">
                  <span className="text-slate-300">Total Due:</span>
                  <span className="text-xl font-black text-emerald-400">{currencySymbol}{cashierTotals.grandTotal.toFixed(2)}</span>
                </div>
              </div>

              {/* Checkout triggers */}
              <div className="p-4 bg-slate-950 border-t border-slate-900 grid grid-cols-2 gap-2 text-center text-xs font-bold">
                <button 
                  disabled={cashierCart.length === 0}
                  onClick={() => handleExecuteCheckout('cashier', 'Cash', billingOrderType, 'N/A', selectedCustomer.name)}
                  className="col-span-2 py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-black rounded-xl shadow disabled:opacity-50"
                >
                  CASH BILLING & PRINT KOT [F1]
                </button>
                <button 
                  disabled={cashierCart.length === 0}
                  className="py-1.5 bg-slate-900 border border-slate-800 hover:bg-slate-800 text-slate-300 rounded-lg disabled:opacity-50"
                >
                  Card [F2]
                </button>
                <button 
                  disabled={cashierCart.length === 0}
                  className="py-1.5 bg-slate-900 border border-slate-800 hover:bg-slate-800 text-slate-300 rounded-lg disabled:opacity-50"
                >
                  UPI QR [F3]
                </button>
              </div>

            </div>
          </div>
        )}

        {/* ========================================================= */}
        {/* ROLE 5: KITCHEN DISPLAY MONITOR (KDS) - PROFESSIONAL UPGRADE */}
        {/* ========================================================= */}
        {currentRole === 'kds' && (
          <div className="flex-1 flex flex-col space-y-6 max-w-[1500px] mx-auto w-full overflow-hidden animate-in fade-in duration-200">
            
            {/* Upgrade Dashboard Header */}
            <div className="bg-slate-950 p-4 rounded-2xl border border-slate-800 flex flex-col md:flex-row items-center justify-between gap-4 shadow-md">
              <div className="flex items-center space-x-3">
                <div className="p-2.5 bg-emerald-950 border border-emerald-900 text-emerald-400 rounded-xl">
                  <ChefHat className="w-6 h-6 animate-pulse" />
                </div>
                <div>
                  <h2 className="text-lg font-bold text-white flex items-center space-x-2">
                    <span>Advanced KDS Command Board</span>
                    <span className="text-[10px] uppercase font-bold tracking-widest bg-emerald-900 text-emerald-300 border border-emerald-800 px-2 py-0.5 rounded-full">Pro Upgrade</span>
                  </h2>
                  <p className="text-xs text-slate-400">Preparation tickets categorized by station, monitored with real-time elapsed timers.</p>
                </div>
              </div>

              {/* Station Filter & Recall controls */}
              <div className="flex flex-wrap items-center gap-2">
                <div className="flex bg-slate-900 p-0.5 rounded-lg border border-slate-800 text-xs">
                  {['All Stations', 'Beverage Bar', 'Main Kitchen'].map(station => (
                    <button
                      key={station}
                      onClick={() => setKdsStationFilter(station)}
                      className={`px-3 py-1 rounded transition-all font-bold ${
                        kdsStationFilter === station ? 'bg-emerald-600 text-white shadow' : 'text-slate-400 hover:text-white'
                      }`}
                    >
                      {station}
                    </button>
                  ))}
                </div>

                {recentlyCompletedOrder && (
                  <button 
                    onClick={handleKdsRecallCompletedTicket}
                    className="px-3 py-1.5 bg-slate-900 hover:bg-slate-850 text-indigo-400 hover:text-indigo-300 font-extrabold text-xs rounded-lg border border-slate-800 flex items-center space-x-1"
                  >
                    <RotateCcw className="w-3.5 h-3.5" />
                    <span>Recall completed</span>
                  </button>
                )}
              </div>
            </div>

            {/* KDS Active Tickets Grid */}
            <div className="flex-1 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 overflow-y-auto pr-1">
              {orders.filter(o => {
                const isNotCompleted = o.status !== 'Completed' && o.status !== 'Pending Payment';
                const matchesStation = kdsStationFilter === 'All Stations' || o.station === kdsStationFilter;
                return isNotCompleted && matchesStation;
              }).map(o => {
                const elapsedSeconds = o.createdAt ? Math.floor((Date.now() - o.createdAt) / 1000) : 0;
                const isDelayed = elapsedSeconds > 300; // Trigger delay state after 5 mins

                return (
                  <div 
                    key={o.id}
                    className={`bg-slate-950 border-2 rounded-2xl flex flex-col justify-between overflow-hidden shadow-lg transition-all ${
                      isDelayed ? 'border-rose-500/80 ring-2 ring-rose-950/20' :
                      o.status === 'Pending' ? 'border-indigo-500/60' :
                      'border-amber-500/60 animate-pulse'
                    }`}
                  >
                    {/* Header with real-time timers */}
                    <div className={`p-4 ${
                      isDelayed ? 'bg-rose-950/30' : 'bg-slate-900'
                    } border-b border-slate-900 flex justify-between items-center text-xs font-bold`}>
                      <div>
                        <span className="block text-slate-400 text-[10px]">TOKEN #{o.tokenNo}</span>
                        <span className="block text-slate-100">{o.tableNo !== 'N/A' ? o.tableNo : o.orderType}</span>
                      </div>
                      
                      {/* Real time timer ticker */}
                      <div className={`flex items-center space-x-1.5 px-2.5 py-1 rounded-lg ${
                        isDelayed ? 'bg-rose-600 text-white animate-pulse' : 'bg-slate-950 text-emerald-400 border border-slate-800'
                      }`}>
                        <Clock className="w-3.5 h-3.5" />
                        <span className="font-mono text-xs">{getElapsedTimeText(o.createdAt)}</span>
                      </div>
                    </div>

                    {/* Ticket list with interactive crossed-off checkboxes */}
                    <div className="p-4 flex-1 space-y-2 text-xs">
                      {o.items.map((it, idx) => (
                        <div 
                          key={idx} 
                          className="flex flex-col py-2 border-b border-slate-900/60 last:border-none"
                        >
                          <div className="flex justify-between items-center">
                            <span className="font-bold text-slate-300">{it.name}</span>
                            <span className="font-black bg-slate-900 text-slate-100 px-2 py-0.5 rounded">{it.quantity}x</span>
                          </div>
                          {it.modifiers?.length > 0 && (
                            <div className="flex flex-wrap gap-1 mt-1">
                              {it.modifiers.map((mod, i) => (
                                <span key={i} className="text-[8px] bg-red-950 border border-red-900/40 text-rose-400 font-black tracking-wider uppercase px-1.5 py-0.5 rounded">
                                  {mod}
                                </span>
                              ))}
                            </div>
                          )}
                        </div>
                      ))}
                    </div>

                    <div className="p-3 bg-slate-900 border-t border-slate-900 text-xs">
                      {o.status === 'Pending' && (
                        <button 
                          onClick={() => handleUpdateOrderStatus(o.id, 'Cooking')}
                          className="w-full py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-extrabold rounded-lg shadow transition-all"
                        >
                          Accept & Start Cooking
                        </button>
                      )}
                      {o.status === 'Cooking' && (
                        <button 
                          onClick={() => handleKdsCompleteTicket(o.id)}
                          className="w-full py-2 bg-amber-500 hover:bg-amber-600 text-white font-extrabold rounded-lg shadow transition-all"
                        >
                          Mark Ready (Chime Out)
                        </button>
                      )}
                      {o.status === 'Ready' && (
                        <div className="text-center py-2 text-emerald-400 bg-emerald-950/20 border border-emerald-900/40 rounded-lg font-bold animate-pulse">
                          ⌛ Pending Server Pickup
                        </div>
                      )}
                    </div>
                  </div>
                );
              })}

              {orders.filter(o => {
                const isNotCompleted = o.status !== 'Completed' && o.status !== 'Pending Payment';
                const matchesStation = kdsStationFilter === 'All Stations' || o.station === kdsStationFilter;
                return isNotCompleted && matchesStation;
              }).length === 0 && (
                <div className="col-span-full py-24 text-center text-slate-500 bg-slate-950 rounded-2xl border border-slate-800">
                  <ChefHat className="w-16 h-16 mx-auto stroke-1 text-slate-400 animate-bounce" />
                  <p className="text-sm font-bold mt-2">Kitchen prep board is fully cleared!</p>
                </div>
              )}
            </div>
          </div>
        )}

        {/* ========================================================= */}
        {/* ROLE 5: TV DISPLAY SIGNAGE WALL MONITOR */}
        {/* ========================================================= */}
        {currentRole === 'status' && (
          <div className="flex-1 flex flex-col space-y-6 max-w-[1400px] mx-auto w-full overflow-hidden animate-in fade-in duration-200">
            <div className="bg-slate-950 p-6 rounded-2xl border border-slate-800 flex items-center justify-between shadow-xl">
              <div>
                <span className="text-xs font-bold text-emerald-400 uppercase tracking-wider block">Live Dining Hall Screen</span>
                <h1 className="text-xl font-black text-white">Guest pickup & Waiter dispatch monitor</h1>
              </div>
            </div>

            <div className="flex-1 grid grid-cols-1 lg:grid-cols-2 gap-8 overflow-hidden">
              
              {/* Left Column: Customer self pickup parcel status */}
              <div className="bg-slate-950 p-6 rounded-2xl border border-slate-800 flex flex-col space-y-4 overflow-hidden shadow-lg">
                <div className="border-b border-slate-900 pb-2">
                  <h3 className="font-extrabold text-emerald-400 text-sm">Self-Service Pickup Status</h3>
                  <span className="text-[10px] text-slate-500">Pickup your order when your Token turns green</span>
                </div>

                <div className="flex-1 grid grid-cols-2 gap-4 overflow-hidden">
                  
                  {/* Preparing list */}
                  <div className="bg-slate-900/40 p-4 rounded-xl border border-slate-900/60 overflow-y-auto">
                    <span className="text-xs font-bold text-slate-500 uppercase block mb-3">Preparing ⏳</span>
                    <div className="space-y-2">
                      {orders.filter(o => o.status !== 'Completed' && (o.orderType.includes('Self-Service') || o.orderType.includes('Takeaway')) && (o.status === 'Pending' || o.status === 'Cooking')).map(o => (
                        <div key={o.id} className="bg-slate-950 p-3 rounded-lg border border-slate-850 text-center font-extrabold text-slate-300 animate-pulse text-sm">
                          Token {o.tokenNo}
                        </div>
                      ))}
                    </div>
                  </div>

                  {/* Ready list */}
                  <div className="bg-emerald-950/20 p-4 rounded-xl border border-emerald-900/20 overflow-y-auto">
                    <span className="text-xs font-bold text-emerald-400 uppercase block mb-3">Ready for Pickup 📦</span>
                    <div className="space-y-2">
                      {orders.filter(o => o.status !== 'Completed' && (o.orderType.includes('Self-Service') || o.orderType.includes('Takeaway')) && o.status === 'Ready').map(o => (
                        <div key={o.id} className="bg-emerald-600 text-white p-3 rounded-lg text-center font-black text-sm relative group overflow-hidden">
                          <span>Token {o.tokenNo}</span>
                          <button 
                            onClick={() => handleUpdateOrderStatus(o.id, 'Completed')}
                            className="absolute inset-0 bg-emerald-700 opacity-0 group-hover:opacity-100 flex items-center justify-center text-[10px] font-black tracking-wider transition-opacity"
                          >
                            ✓ HAND OVER
                          </button>
                        </div>
                      ))}
                    </div>
                  </div>

                </div>
              </div>

              {/* Right Column: Waiter table serve alerts */}
              <div className="bg-slate-950 p-6 rounded-2xl border border-slate-800 flex flex-col space-y-4 overflow-y-auto shadow-lg">
                <div className="border-b border-slate-900 pb-2">
                  <h3 className="font-extrabold text-emerald-400 text-sm">Dining Tables Dispatch</h3>
                  <span className="text-[10px] text-slate-500">Waiters: Dispatch plates to tables as soon as they sound</span>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  {orders.filter(o => o.status !== 'Completed' && o.orderType.includes('Table Service') && o.status === 'Ready').map(o => (
                    <div key={o.id} className="bg-gradient-to-br from-emerald-600 to-teal-700 p-4 rounded-xl border border-emerald-500/30 flex flex-col justify-between space-y-3 shadow-lg">
                      <div>
                        <div className="flex justify-between items-center text-xs font-bold">
                          <span className="text-white text-md uppercase font-black">{o.tableNo}</span>
                          <span className="bg-white/20 text-white text-[9px] px-2 py-0.5 rounded-full">READY TO SERVE</span>
                        </div>
                        <div className="mt-2 text-[10px] text-emerald-50 font-medium space-y-0.5">
                          {o.items.map((it, idx) => (
                            <div key={idx}>- {it.name} ({it.quantity}x)</div>
                          ))}
                        </div>
                      </div>

                      <button 
                        onClick={() => handleUpdateOrderStatus(o.id, 'Completed')}
                        className="w-full py-1.5 bg-slate-950 hover:bg-slate-900 text-white font-extrabold text-[10px] rounded transition-colors"
                      >
                        ✓ Mark Table Served
                      </button>
                    </div>
                  ))}

                  {orders.filter(o => o.status !== 'Completed' && o.orderType.includes('Table Service') && o.status === 'Ready').length === 0 && (
                    <div className="col-span-full py-16 text-center text-slate-500">
                      <UtensilsCrossed className="w-12 h-12 mx-auto stroke-1" />
                      <p className="text-xs font-bold mt-2">No active dining table dispatch calls</p>
                    </div>
                  )}
                </div>
              </div>

            </div>
          </div>
        )}

        {/* ========================================================= */}
        {/* ROLE 6: SECURE AUTHORIZED OWNER BACKOFFICE */}
        {/* ========================================================= */}
        {currentRole === 'owner' && authorizedOwner && (
          <div className="flex-1 flex flex-col space-y-6 max-w-[1500px] mx-auto w-full overflow-hidden animate-in fade-in duration-200">
            <div className="bg-slate-950 p-6 rounded-2xl border border-slate-800 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
              <div>
                <span className="text-[10px] uppercase font-bold text-emerald-400 block tracking-wider">Enterprise Owner Backoffice Dashboard</span>
                <h1 className="text-xl font-black text-white">{BRAND_SETTINGS.businessName} Analytics and Loyalty Hub</h1>
              </div>

              {/* Data downloaders */}
              <button 
                onClick={handleDownloadStats}
                className="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-black text-xs rounded-xl flex items-center space-x-2 shadow transition-colors"
              >
                <Download className="w-4 h-4" />
                <span>Export Audit Logs (JSON)</span>
              </button>
            </div>

            {/* Simulated executive metrics */}
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 text-xs font-bold">
              <div className="bg-slate-950 p-5 rounded-2xl border border-slate-800 flex items-center justify-between">
                <div>
                  <span className="block text-[10px] uppercase font-bold text-slate-50">Gross Sales Value</span>
                  <span className="block text-2xl font-black text-slate-100 mt-1">₹4,45,790.00</span>
                  <span className="text-[9px] text-emerald-400 block mt-1">✓ Profit margin: 76.5%</span>
                </div>
                <div className="w-12 h-12 rounded-xl bg-slate-900 flex items-center justify-center text-slate-300">
                  <TrendingUp className="w-6 h-6" />
                </div>
              </div>

              <div className="bg-slate-950 p-5 rounded-2xl border border-slate-800 flex items-center justify-between">
                <div>
                  <span className="block text-[10px] uppercase font-bold text-slate-50">Active Orders Pipeline</span>
                  <span className="block text-2xl font-black text-emerald-400 mt-1">{orders.filter(o => o.status !== 'Completed').length} Orders</span>
                  <span className="text-[9px] text-slate-500 block mt-1">↗ Live Transit Routing</span>
                </div>
                <div className="w-12 h-12 rounded-xl bg-emerald-950/20 flex items-center justify-center text-emerald-400">
                  <ChefHat className="w-6 h-6" />
                </div>
              </div>

              <div className="bg-slate-950 p-5 rounded-2xl border border-slate-800 flex items-center justify-between">
                <div>
                  <span className="block text-[10px] uppercase font-bold text-slate-50">Top Selling Category</span>
                  <span className="block text-2xl font-black text-slate-100 mt-1">Hot Coffee</span>
                  <span className="text-[9px] text-emerald-400 block mt-1">☕ Best hour: 4 PM - 7 PM</span>
                </div>
                <div className="w-12 h-12 rounded-xl bg-slate-900 flex items-center justify-center text-slate-300">
                  <Coffee className="w-6 h-6" />
                </div>
              </div>

              <div className="bg-slate-950 p-5 rounded-2xl border border-slate-800 flex items-center justify-between">
                <div>
                  <span className="block text-[10px] uppercase font-bold text-slate-5</td>">Loyalty Accounts</span>
                  <span className="block text-2xl font-black text-amber-500 mt-1">{customers.length} Accounts</span>
                  <span className="text-[9px] text-amber-500/80 block mt-1">✓ GST Invoices Settled</span>
                </div>
                <div className="w-12 h-12 rounded-xl bg-amber-950/20 flex items-center justify-center text-amber-400">
                  <Users className="w-6 h-6" />
                </div>
              </div>
            </div>

            {/* Split layout: Customers ledger (Left) vs insights (Right) */}
            <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 flex-1 overflow-hidden">
              <div className="lg:col-span-8 bg-slate-950 rounded-2xl border border-slate-800 p-6 flex flex-col justify-between overflow-hidden shadow-lg">
                <div className="overflow-hidden flex flex-col flex-1">
                  <div className="flex justify-between items-center border-b border-slate-900 pb-2 mb-3 text-xs">
                    <span className="font-extrabold text-slate-400 uppercase">Customer Loyalty Ledger</span>
                    <span className="text-[10px] text-emerald-400">Centralized database</span>
                  </div>

                  <div className="flex-1 overflow-y-auto pr-1">
                    <table className="w-full text-left text-xs font-medium">
                      <thead className="bg-slate-900 text-slate-500 uppercase text-[9px] tracking-wider border-b border-slate-800">
                        <tr>
                          <th className="p-3">Customer Name</th>
                          <th className="p-3">Phone</th>
                          <th className="p-3 text-center">Loyalty Points</th>
                          <th className="p-3 text-right">O/S Balance</th>
                        </tr>
                      </thead>
                      <tbody className="divide-y divide-slate-900 font-bold">
                        {customers.map(c => (
                          <tr key={c.id} className="hover:bg-slate-900/40">
                            <td className="p-3 font-bold text-slate-200">{c.name}</td>
                            <td className="p-3 text-slate-400 font-mono">{c.phone}</td>
                            <td className="p-3 text-center text-emerald-400 font-bold">{c.loyaltyPoints} PTS</td>
                            <td className="p-3 text-right text-rose-500 font-black">{currencySymbol}{c.outstandingBalance.toFixed(2)}</td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>

              {/* Insights Column */}
              <div className="lg:col-span-4 bg-slate-950 p-6 rounded-2xl border border-slate-800 space-y-4 overflow-y-auto text-xs font-semibold text-slate-400">
                <h3 className="font-extrabold text-xs text-slate-400 uppercase tracking-wider border-b border-slate-900 pb-2">Business Health Insights</h3>
                <div className="bg-slate-900 p-4 rounded-xl border border-slate-850 space-y-2">
                  <span className="font-bold text-emerald-400 block">Category Optimization</span>
                  <p className="text-slate-400 leading-relaxed text-[11px]">Hot Coffee and Smoothies constitute 78% of your total sales. Consider running loyalty combos on low-margin baked goods during morning slots.</p>
                </div>
                <div className="bg-slate-900 p-4 rounded-xl border border-slate-850 space-y-2">
                  <span className="font-bold text-emerald-400 block">Peak Performance Hours</span>
                  <p className="text-slate-400 leading-relaxed text-[11px]">Footfall peak occurs at 4:30 PM. Ensuring self-service kiosks and Table QR order scanners are fully optimized reduces front counter bottleneck by 40%.</p>
                </div>
              </div>
            </div>
          </div>
        )}

        {/* ========================================================= */}
        {/* ROLE 7: SECURE AUTHORIZED INVENTORY PANEL */}
        {/* ========================================================= */}
        {currentRole === 'inventory' && authorizedInventory && (
          <div className="flex-1 grid grid-cols-1 lg:grid-cols-12 gap-6 max-w-[1500px] mx-auto w-full overflow-hidden animate-in fade-in duration-200">
            
            {/* Left Stock Matrix & Catalog (8 columns) */}
            <div className="lg:col-span-8 flex flex-col space-y-4 overflow-hidden">
              <div className="bg-slate-950 p-4 rounded-2xl border border-slate-800 flex flex-col sm:flex-row items-center justify-between gap-4">
                <div>
                  <h1 className="text-sm font-black text-white uppercase tracking-wider">La Greenzaa Inventory Management Panel</h1>
                  <p className="text-[10px] text-slate-400">Update recipes catalog, track opening vs. hand stocks, and adjust warehouse values.</p>
                </div>
              </div>

              {/* Master stock compiler */}
              <div className="flex-1 bg-slate-950 p-5 rounded-2xl border border-slate-800 overflow-hidden flex flex-col justify-between">
                <div className="overflow-hidden flex flex-col flex-1">
                  <div className="flex justify-between items-center pb-2 border-b border-slate-900 mb-3 text-xs">
                    <span className="font-bold text-slate-400 uppercase">Accounting vs. Physical Stock distribution</span>
                    <span className="text-[10px] text-emerald-400">Select any recipe item below to inspect detailed matrices or print barcodes</span>
                  </div>

                  <div className="flex-1 overflow-y-auto pr-1">
                    <table className="w-full text-left text-xs">
                      <thead className="bg-slate-900 text-slate-500 uppercase text-[9px] tracking-wider border-b border-slate-800">
                        <tr>
                          <th className="p-3">Item details</th>
                          <th className="p-3">SKU</th>
                          <th className="p-3 text-center">Opening Stock</th>
                          <th className="p-3 text-center text-amber-500">Committed</th>
                          <th className="p-3 text-right text-emerald-400">Available</th>
                          <th className="p-3 text-center">Barcode</th>
                          <th className="p-3 text-center">Action</th>
                        </tr>
                      </thead>
                      <tbody className="divide-y divide-slate-900">
                        {products.map(p => (
                          <tr 
                            key={p.id} 
                            onClick={() => setSelectedInventoryItem(p)}
                            className={`hover:bg-slate-900/40 cursor-pointer ${
                              selectedInventoryItem?.id === p.id ? 'bg-slate-900' : ''
                            }`}
                          >
                            <td className="p-3 font-bold text-slate-200 flex items-center space-x-2">
                              <span className="text-lg">{p.image}</span>
                              <span>{p.name}</span>
                            </td>
                            <td className="p-3 text-slate-400 font-mono">{p.sku}</td>
                            <td className="p-3 text-center">{p.openingStock}.00</td>
                            <td className="p-3 text-center text-amber-500 font-bold">{p.committedStock}.00</td>
                            <td className="p-3 text-right text-emerald-400 font-black">{p.availableForSale}.00</td>
                            <td className="p-3 text-center">
                              <button 
                                onClick={(e) => {
                                  e.stopPropagation();
                                  setSelectedBarcodeItem(p);
                                  setShowBarcodePrintModal(true);
                                }}
                                className="px-2.5 py-1 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded font-bold text-[10px] flex items-center space-x-1"
                              >
                                <Barcode className="w-3 h-3" />
                                <span>Preview</span>
                              </button>
                            </td>
                            <td className="p-3 text-center">
                              <button 
                                onClick={(e) => {
                                  e.stopPropagation();
                                  handleConfirmRemoveProduct(p.id);
                                }}
                                className="text-slate-600 hover:text-rose-500 p-1"
                              >
                                <Trash2 className="w-3.5 h-3.5" />
                              </button>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </div>

                {/* Selected Item Stock details */}
                {selectedInventoryItem && (
                  <div className="mt-4 pt-4 border-t border-slate-900 text-xs text-slate-400 space-y-3">
                    <div className="flex justify-between items-center bg-slate-900 p-3 rounded-xl border border-slate-850">
                      <span className="font-bold text-slate-200">Stock Matrix: {selectedInventoryItem.name}</span>
                      <span className="text-[10px] text-slate-500">Base Unit: {selectedInventoryItem.unit}</span>
                    </div>

                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                      <div className="bg-slate-900/40 p-3 rounded-lg border border-slate-850">
                        <span className="text-[9px] uppercase font-bold text-slate-500 block">Opening Stock</span>
                        <span className="text-sm font-black text-slate-200 block mt-1">{selectedInventoryItem.openingStock}.00</span>
                      </div>
                      <div className="bg-slate-900/40 p-3 rounded-lg border border-slate-850">
                        <span className="text-[9px] uppercase font-bold text-slate-500 block">Stock On Hand</span>
                        <span className="text-sm font-black text-slate-200 block mt-1">{selectedInventoryItem.stockOnHand}.00</span>
                      </div>
                      <div className="bg-slate-900/40 p-3 rounded-lg border border-slate-850">
                        <span className="text-[9px] uppercase font-bold text-slate-500 block">Committed Stock</span>
                        <span className="text-sm font-black text-amber-500 block mt-1">{selectedInventoryItem.committedStock}.00</span>
                      </div>
                      <div className="bg-slate-950 p-3 rounded-lg border border-emerald-900/30">
                        <span className="text-[9px] uppercase font-bold text-emerald-400 block">Available For Sale</span>
                        <span className="text-sm font-black text-emerald-400 block mt-1">{selectedInventoryItem.availableForSale}.00</span>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            </div>

            {/* Right configuration panel (4 columns) */}
            <div className="lg:col-span-4 flex flex-col space-y-6 overflow-y-auto">
              
              {/* Add Item form */}
              <div className="bg-slate-950 p-6 rounded-2xl border border-slate-800 space-y-4">
                <h3 className="font-extrabold text-xs text-slate-400 uppercase tracking-wider border-b border-slate-900 pb-2">Add New Recipe</h3>
                
                <form onSubmit={handleAddCatalogItem} className="space-y-3 text-xs">
                  <div className="space-y-1">
                    <label className="font-bold text-slate-400">Recipe Name</label>
                    <input name="name" required className="w-full bg-slate-900 border border-slate-800 p-2 rounded text-slate-200" placeholder="e.g. Avocado Salad" />
                  </div>

                  <div className="grid grid-cols-2 gap-3">
                    <div className="space-y-1">
                      <label className="font-bold text-slate-400">Category</label>
                      <select name="category" className="w-full bg-slate-900 border border-slate-800 p-2 rounded text-slate-300">
                        {CATEGORIES.slice(1).map(c => <option key={c} value={c}>{c}</option>)}
                      </select>
                    </div>
                    <div className="space-y-1">
                      <label className="font-bold text-slate-400">SKU Code</label>
                      <input name="sku" required className="w-full bg-slate-900 border border-slate-800 p-2 rounded text-slate-200" placeholder="LGR-AVO-01" />
                    </div>
                  </div>

                  <div className="grid grid-cols-2 gap-3">
                    <div className="space-y-1">
                      <label className="font-bold text-slate-400">Sale Price</label>
                      <input name="price" required type="number" className="w-full bg-slate-900 border border-slate-800 p-2 rounded text-slate-200" placeholder="100" />
                    </div>
                    <div className="space-y-1">
                      <label className="font-bold text-slate-400">Cost Price</label>
                      <input name="costPrice" required type="number" className="w-full bg-slate-900 border border-slate-800 p-2 rounded text-slate-200" placeholder="30" />
                    </div>
                  </div>

                  <div className="grid grid-cols-2 gap-3">
                    <div className="space-y-1">
                      <label className="font-bold text-slate-400">Opening Stock</label>
                      <input name="stock" type="number" className="w-full bg-slate-900 border border-slate-800 p-2 rounded text-slate-200" placeholder="80" />
                    </div>
                    <div className="space-y-1">
                      <label className="font-bold text-slate-400">Emoji Icon</label>
                      <input name="image" className="w-full bg-slate-900 border border-slate-800 p-2 rounded text-slate-200 text-center" placeholder="🥑" />
                    </div>
                  </div>

                  <button type="submit" className="w-full py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white font-bold rounded shadow-lg transition-all mt-3">
                    Save to Catalog
                  </button>
                </form>
              </div>

              {/* Barcode Preview widget */}
              <div className="bg-slate-950 p-6 rounded-2xl border border-slate-800 text-xs">
                <span className="text-[10px] uppercase font-bold text-slate-500 block mb-2">Printing Barcode Preview</span>
                {selectedInventoryItem ? (
                  <div className="bg-white text-slate-900 p-4 rounded-xl shadow font-mono text-[9px] text-center space-y-1.5 animate-in fade-in duration-100">
                    <span className="font-black block uppercase text-[10px]">{selectedInventoryItem.name}</span>
                    <span className="text-[9px] block">Price: {currencySymbol}{selectedInventoryItem.price}</span>
                    <div className="flex justify-center items-end space-x-[1.5px] h-6 py-1">
                      {[1, 2, 1, 3, 2, 1.5, 3, 1, 2, 1, 3, 2, 1.5].map((w, i) => (
                        <div key={i} className="bg-black h-full" style={{ width: `${w}px` }} />
                      ))}
                    </div>
                    <span className="font-bold block text-[8px]">{selectedInventoryItem.sku}</span>
                  </div>
                ) : (
                  <div className="bg-slate-900 p-4 rounded-xl border border-slate-850 text-slate-500 text-center text-xs">
                    Please select an item to preview barcode template.
                  </div>
                )}
              </div>
            </div>

          </div>
        )}

        {/* ========================================================= */}
        {/* PIN CODE KEYPAD LOCK OVERLAY */}
        {/* ========================================================= */}
        {securityTarget && (
          <div className="fixed inset-0 bg-slate-950/90 backdrop-blur-md flex items-center justify-center p-4 z-50">
            <div className="bg-slate-900 rounded-3xl p-6 border border-slate-800 shadow-2xl max-w-xs w-full text-center space-y-4 animate-in zoom-in duration-150">
              <div className="mx-auto bg-indigo-950/60 p-3 rounded-full border border-indigo-900/40 w-12 h-12 flex items-center justify-center text-indigo-400">
                <Lock className="w-5 h-5 animate-bounce" />
              </div>
              
              <div>
                <h3 className="font-black text-white text-sm uppercase tracking-wider">Access PIN Required</h3>
                <p className="text-[10px] text-slate-400 mt-1">
                  Owner Portal Code: <b>8888</b> | Inventory Code: <b>9999</b>
                </p>
              </div>

              {/* Keypad entry visual feedback */}
              <div className="flex justify-center space-x-2 pb-2">
                {[0, 1, 2, 3].map((idx) => (
                  <div 
                    key={idx} 
                    className={`w-3.5 h-3.5 rounded-full border border-slate-700 transition-all ${
                      pinInput.length > idx ? 'bg-indigo-500 shadow-lg shadow-indigo-500/50 scale-110' : 'bg-slate-950'
                    }`}
                  />
                ))}
              </div>

              {lockErrorMessage && (
                <span className="text-[10px] text-rose-500 font-bold block">{lockErrorMessage}</span>
              )}

              {/* Keypad Matrix Grid */}
              <div className="grid grid-cols-3 gap-2">
                {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(num => (
                  <button 
                    key={num}
                    onClick={() => {
                      if (pinInput.length < 4) setPinInput(prev => prev + num);
                    }}
                    className="py-2.5 bg-slate-950 hover:bg-slate-855 active:scale-95 text-xs font-bold rounded-lg border border-slate-800 text-slate-200 transition-all"
                  >
                    {num}
                  </button>
                ))}
                <button 
                  onClick={() => setPinInput('')}
                  className="py-2.5 bg-slate-950 hover:bg-rose-950/20 text-rose-500 text-[10px] font-black rounded-lg border border-slate-800 uppercase"
                >
                  Clear
                </button>
                <button 
                  onClick={() => {
                    if (pinInput.length < 4) setPinInput(prev => prev + '0');
                  }}
                  className="py-2.5 bg-slate-950 hover:bg-slate-850 text-xs font-bold rounded-lg border border-slate-800"
                >
                  0
                </button>
                <button 
                  onClick={handleVerifyPINSubmit}
                  className="py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white text-[10px] font-black rounded-lg uppercase tracking-wider transition-colors shadow"
                >
                  Enter
                </button>
              </div>

              <button 
                onClick={() => setSecurityTarget(null)}
                className="text-[10px] text-slate-500 hover:text-slate-300 transition-all"
              >
                Go Back
              </button>
            </div>
          </div>
        )}

      </div>

      {/* ========================================================= */}
      {/* MODAL: CUSTOM INGREDIENTS/PREPARATION MODIFIERS */}
      {/* ========================================================= */}
      {showModifierModal && activeModifierItem && (
        <div className="fixed inset-0 bg-slate-950/70 backdrop-blur-sm flex items-center justify-center p-4 z-50">
          <div className="bg-slate-900 rounded-3xl border border-slate-800 p-6 max-w-sm w-full space-y-4 shadow-2xl text-center">
            <div className="flex items-center space-x-2 text-xs border-b border-slate-800 pb-2.5 justify-center">
              <Sliders className="w-5 h-5 text-emerald-400" />
              <span className="font-extrabold text-slate-200 uppercase tracking-wider">Preparation Custom Modifiers</span>
            </div>

            <p className="text-[11px] text-slate-400">Select dynamic modifiers to send alongside KOT ticket data structures:</p>

            <div className="grid grid-cols-2 gap-2 text-xs font-bold">
              {['Keep Vegan', 'No Onion No Garlic', 'Extra Hot', 'Less Sugar', 'Keep Sugar-Free', 'Extra Cheese'].map(mod => {
                const active = tempModifiers.includes(mod);
                return (
                  <button
                    key={mod}
                    onClick={() => {
                      if (active) setTempModifiers(prev => prev.filter(m => m !== mod));
                      else setTempModifiers(prev => [...prev, mod]);
                    }}
                    className={`p-2.5 rounded-xl border text-center transition-all ${
                      active ? 'bg-emerald-950 border-emerald-500 text-emerald-400' : 'bg-slate-950 border-slate-855 text-slate-550'
                    }`}
                  >
                    {mod}
                  </button>
                );
              })}
            </div>

            <div className="flex space-x-2 pt-4 border-t border-slate-800">
              <button 
                onClick={handleApplyModifiers}
                className="flex-1 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white font-extrabold text-xs rounded-xl"
              >
                Apply Modifications
              </button>
              <button 
                onClick={() => setShowModifierModal(false)}
                className="flex-1 py-2.5 bg-slate-800 hover:bg-slate-700 text-slate-400 text-xs rounded-xl"
              >
                Skip Modifiers
              </button>
            </div>
          </div>
        </div>
      )}

      {/* ========================================================= */}
      {/* MODAL: CUSTOM CUSTOMER REGISTRATION DIALOG (BILLER PORTAL) */}
      {/* ========================================================= */}
      {showRegisterCustomerModal && (
        <div className="fixed inset-0 bg-slate-950/80 backdrop-blur-sm flex items-center justify-center p-4 z-50">
          <div className="bg-slate-900 border border-slate-800 rounded-3xl p-6 max-w-sm w-full space-y-4 shadow-2xl animate-in zoom-in duration-150">
            <div className="flex items-center justify-between border-b border-slate-800 pb-3">
              <h3 className="font-extrabold text-sm text-slate-200 flex items-center space-x-2">
                <Users className="w-4 h-4 text-emerald-400" />
                <span>Register Loyalty Member</span>
              </h3>
              <button onClick={() => setShowRegisterCustomerModal(false)} className="text-slate-500 hover:text-white">
                <X className="w-4 h-4" />
              </button>
            </div>

            <form onSubmit={handleRegisterCustomerSubmit} className="space-y-3.5 text-xs text-slate-300">
              <div className="space-y-1">
                <label className="font-bold text-slate-400">Full Name *</label>
                <input 
                  type="text" 
                  required
                  placeholder="e.g. Mr. Devesh Rajguru"
                  className="w-full bg-slate-950 border border-slate-800 p-2.5 rounded-xl focus:outline-none focus:border-indigo-500 text-slate-200 font-semibold"
                  value={newCustName}
                  onChange={(e) => setNewCustName(e.target.value)}
                />
              </div>

              <div className="space-y-1">
                <label className="font-bold text-slate-400">Contact Number (Phone) *</label>
                <input 
                  type="text" 
                  required
                  placeholder="e.g. +91 99092 12345"
                  className="w-full bg-slate-955 border border-slate-800 p-2.5 rounded-xl focus:outline-none focus:border-indigo-500 text-slate-200 font-mono"
                  value={newCustPhone}
                  onChange={(e) => setNewCustPhone(e.target.value)}
                />
              </div>

              <div className="space-y-1">
                <label className="font-bold text-slate-400">Email Address</label>
                <input 
                  type="email" 
                  placeholder="e.g. devesh@rajguru.com"
                  className="w-full bg-slate-955 border border-slate-800 p-2.5 rounded-xl focus:outline-none focus:border-indigo-500 text-slate-200"
                  value={newCustEmail}
                  onChange={(e) => setNewCustEmail(e.target.value)}
                />
              </div>

              <div className="pt-2 flex space-x-2">
                <button 
                  type="submit"
                  className="flex-1 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white font-extrabold rounded-xl shadow transition-colors"
                >
                  Save Profile
                </button>
                <button 
                  type="button"
                  onClick={() => setShowRegisterCustomerModal(false)}
                  className="flex-1 py-2.5 bg-slate-800 hover:bg-slate-750 text-slate-400 font-bold rounded-xl transition-colors"
                >
                  Cancel
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* ========================================================= */}
      {/* MODAL: CUSTOM INLINE PRODUCT DELETE CONFIRMATION */}
      {/* ========================================================= */}
      {confirmDeleteId && (
        <div className="fixed inset-0 bg-slate-950/80 backdrop-blur-sm flex items-center justify-center p-4 z-50">
          <div className="bg-slate-900 border border-slate-800 rounded-3xl p-6 max-w-sm w-full space-y-4 text-center shadow-2xl animate-in zoom-in duration-150">
            <div className="w-12 h-12 bg-rose-950/50 border border-rose-900 text-rose-500 rounded-full flex items-center justify-center mx-auto">
              <AlertTriangle className="w-6 h-6 animate-pulse" />
            </div>
            <div>
              <h3 className="font-extrabold text-sm text-white">Permanently Delete Product?</h3>
              <p className="text-xs text-slate-400 mt-1">This action cannot be undone. This recipe will be deleted from the local database master catalog.</p>
            </div>
            <div className="flex space-x-2 pt-2 text-xs font-bold">
              <button 
                onClick={executeDeleteProduct}
                className="flex-1 py-2.5 bg-rose-600 hover:bg-rose-700 text-white rounded-xl shadow transition-all"
              >
                Yes, Delete
              </button>
              <button 
                onClick={() => setConfirmDeleteId(null)}
                className="flex-1 py-2.5 bg-slate-800 text-slate-400 rounded-xl transition-all"
              >
                Cancel
              </button>
            </div>
          </div>
        </div>
      )}

      {/* ========================================================= */}
      {/* MODAL: SINGLE PRODUCT BARCODE LABEL PRINT SIMULATOR */}
      {/* ========================================================= */}
      {showBarcodePrintModal && selectedBarcodeItem && (
        <div className="fixed inset-0 bg-slate-950/70 backdrop-blur-sm flex items-center justify-center p-4 z-50">
          <div className="bg-white text-slate-900 rounded-3xl shadow-2xl max-w-xs w-full overflow-hidden border border-slate-200">
            <div className="bg-slate-900 text-white p-4 flex items-center justify-between font-bold text-xs">
              <span>Barcode Decal Printer</span>
              <button onClick={() => setShowBarcodePrintModal(false)} className="hover:text-slate-200">✕</button>
            </div>
            <div className="p-6 bg-slate-100 flex flex-col items-center">
              <div className="bg-white p-5 rounded-xl shadow border border-slate-200 text-center font-mono text-[9px] w-full space-y-1.5">
                <span className="font-black text-[10px] block uppercase">{selectedBarcodeItem.name}</span>
                <span className="text-[9px] block text-slate-500">Price: {currencySymbol}{selectedBarcodeItem.price}</span>
                <div className="flex justify-center items-end space-x-[1.5px] h-10 py-1.5 bg-slate-50/50 rounded border">
                  {[1, 3, 1, 2, 4, 1.5, 3, 2.5, 1, 2, 1.5, 3, 1, 2, 4, 1.5, 3, 2.5, 1, 2].map((w, i) => (
                    <div key={i} className="bg-black h-full" style={{ width: `${w}px` }} />
                  ))}
                </div>
                <span className="font-extrabold block tracking-wider text-[8px]">{selectedBarcodeItem.sku}</span>
              </div>

              <div className="grid grid-cols-2 gap-2 mt-4 w-full text-xs">
                <button onClick={() => window.print()} className="py-2 bg-slate-900 text-white rounded-xl font-bold">Print Decal</button>
                <button onClick={() => setShowBarcodePrintModal(false)} className="py-2 border rounded-xl font-bold">Cancel</button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* ========================================================= */}
      {/* POPUP MODAL: KOT THERMAL PRINTER SIMULATOR */}
      {/* ========================================================= */}
      {showPrintModal && activeKOTPrint && (
        <div className="fixed inset-0 bg-slate-950/70 backdrop-blur-sm flex items-center justify-center p-4 z-50">
          <div className="bg-white text-slate-900 rounded-3xl shadow-2xl max-w-sm w-full overflow-hidden animate-in zoom-in duration-150 border border-slate-200">
            
            <div className="bg-emerald-600 text-white p-4 flex items-center justify-between font-bold text-xs">
              <span>Dynamic KOT Saved Natively</span>
              <button onClick={() => setShowPrintModal(false)} className="hover:text-slate-100 font-extrabold text-sm">✕</button>
            </div>

            <div className="p-6 bg-slate-100">
              <div className="bg-white p-5 rounded-2xl border border-slate-200 font-mono text-[11px] space-y-4 shadow">
                <div className="text-center border-b border-dashed border-slate-300 pb-3">
                  <h4 className="font-black text-sm uppercase tracking-tight">{BRAND_SETTINGS.businessName} KOT</h4>
                  <span className="text-[10px] text-slate-400">Token Ticket #{activeKOTPrint.tokenNo}</span>
                </div>

                <div className="space-y-0.5 text-[10px] text-slate-500 border-b border-slate-200 pb-3">
                  <div className="flex justify-between"><span>Date: May 22, 2026</span> <span>Time: {activeKOTPrint.timestamp}</span></div>
                  <div className="flex justify-between"><span>Order Mode: {activeKOTPrint.orderType}</span> <span>Terminal: REG-A01</span></div>
                  {activeKOTPrint.tableNo !== 'N/A' && (
                    <div className="flex justify-between font-bold text-slate-800">
                      <span>Dining Table:</span>
                      <span>{activeKOTPrint.tableNo}</span>
                    </div>
                  )}
                  <div className="flex justify-between"><span>Customer Name:</span> <span className="text-slate-800 font-bold">{activeKOTPrint.customerName}</span></div>
                </div>

                <table className="w-full text-left">
                  <thead>
                    <tr className="border-b border-slate-300 text-slate-500 font-bold">
                      <th className="pb-1">Qty</th>
                      <th className="pb-1 pl-4">Recipe Detail</th>
                    </tr>
                  </thead>
                  <tbody>
                    {activeKOTPrint.items.map((it, idx) => (
                      <tr key={idx} className="border-b last:border-none">
                        <td className="py-2 font-black text-slate-800">{it.quantity}x</td>
                        <td className="py-2 pl-4 text-slate-700">
                          <div>{it.name}</div>
                          {it.modifiers?.length > 0 && (
                            <div className="text-[9px] text-rose-500 font-bold uppercase tracking-wider mt-0.5">
                              * MOD: {it.modifiers.join(', ')}
                            </div>
                          )}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>

                <div className="text-center border-t border-dashed border-slate-300 pt-3 text-[9px] text-slate-400 leading-snug">
                  * KOT Issued Automatically to Prep Stations *<br />
                  Developed by Umang Developers
                </div>
              </div>
            </div>

            <div className="p-4 bg-white border-t border-slate-200 flex gap-2">
              <button 
                onClick={() => window.print()}
                className="flex-1 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs rounded-xl flex items-center justify-center space-x-1.5 shadow"
              >
                <Printer className="w-4 h-4" />
                <span>Print Bill</span>
              </button>
              <button 
                onClick={() => setShowPrintModal(false)}
                className="flex-1 py-2 border text-slate-600 text-xs font-bold rounded-xl transition-all"
              >
                Start New Bill
              </button>
            </div>

          </div>
        </div>
      )}

    </div>
  );
}

// --- APP WITH BOUNDED CRASH RECOVERY ---
export default function App() {
  return (
    <ErrorBoundary>
      <POSApp />
    </ErrorBoundary>
  );
}