import React, { useState, useMemo, useEffect } from 'react';
import { Head, router, usePage } from '@inertiajs/react';
import { Category, Product, Customer, PageProps } from '@/types';
import {
  Search, Plus, Minus, Trash2, UserPlus, CreditCard, Banknote, Receipt,
  Sparkles, Tag, X, ShoppingBag, Grid, List, ChevronRight, User,
  ShoppingCart, CheckCircle2, Loader2
} from '@/Components/AnimatedIcons';
import axios from 'axios';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { PosProvider, usePosContext } from '@/Contexts/PosContext';
import { useNotification } from '@/Contexts/NotificationContext';
import { PaymentStatusBanner } from '@/Components/PaymentStatusBanner';
import { PaymentStatus } from '@/types/notifications';

interface Props {
  categories: Category[];
  products: Product[];
  cashierDiscountLimit: number;
  gstEnabled: boolean;
  gstPercentage: number;
}

interface PaymentRow {
  method: 'CASH' | 'UPI' | 'CARD';
  amount: number;
  reference: string;
}

const getFallbackImage = (name: string, categoryName: string = ''): string => {
  const n = name.toLowerCase();
  const c = categoryName.toLowerCase();
  if (n.includes('chocolate') || c.includes('chocolate')) return 'https://images.unsplash.com/photo-1578985545062-69928b1d9587?w=500&q=80';
  if (n.includes('strawberry') || n.includes('berry')) return 'https://images.unsplash.com/photo-1565958011703-44f9829ba187?w=500&q=80';
  if (n.includes('vanilla') || n.includes('white')) return 'https://images.unsplash.com/photo-1535141192574-5d4897c12636?w=500&q=80';
  if (n.includes('candle') || c.includes('candle')) return 'https://images.unsplash.com/photo-1603006905003-be475563bc59?w=500&q=80';
  return 'https://images.unsplash.com/photo-1578985545062-69928b1d9587?w=500&q=80';
};

const PosIndexContent = ({ categories, products, cashierDiscountLimit, gstEnabled, gstPercentage }: Props) => {
  const { auth } = usePage<PageProps>().props;
  const user = auth.user;
  const { toast } = useNotification();

  const [accentColor, setAccentColor] = useState<'pink' | 'seagreen'>(() => {
    if (typeof window !== 'undefined') {
      const saved = localStorage.getItem('admin_accent_color');
      if (saved === 'pink' || saved === 'seagreen') return saved;
    }
    return 'pink';
  });

  useEffect(() => {
    const handleThemeChange = () => {
      const saved = localStorage.getItem('admin_accent_color');
      if (saved === 'pink' || saved === 'seagreen') setAccentColor(saved);
    };
    window.addEventListener('theme_accent_changed', handleThemeChange);
    return () => window.removeEventListener('theme_accent_changed', handleThemeChange);
  }, []);

  const isPink = accentColor === 'pink';
  const accentBgClass = isPink ? 'bg-[#FF0D8F]' : 'bg-[#0CA996]';
  const accentHoverBgClass = isPink ? 'hover:bg-[#E0067B]' : 'hover:bg-[#098777]';
  const accentTextClass = isPink ? 'text-[#FF0D8F]' : 'text-[#0CA996]';
  const accentBorderClass = isPink ? 'border-[#FF0D8F]' : 'border-[#0CA996]';
  const accentLightBgClass = isPink ? 'bg-[#FFF0F7]' : 'bg-[#E6F6F4]';
  const accentFocusClass = isPink ? 'focus:ring-[#FF0D8F] focus:border-[#FF0D8F]' : 'focus:ring-[#0CA996] focus:border-[#0CA996]';
  const accentShadowClass = isPink ? 'shadow-[#FF0D8F]/20' : 'shadow-[#0CA996]/20';
  const accentHoverBorderClass = isPink ? 'hover:border-[#FFC1E1]' : 'hover:border-[#0CA996]/40';
  const accentGroupHoverTextClass = isPink ? 'group-hover:text-[#FF0D8F]' : 'group-hover:text-[#0CA996]';
  const accentGroupHoverBgClass = isPink ? 'group-hover:bg-[#FF0D8F]' : 'group-hover:bg-[#0CA996]';

  const {
    showCart, setShowCart,
    searchQuery, setSearchQuery,
    selectedCategory, setSelectedCategory,
    cart, addToCart, updateQuantity, removeFromCart, clearCart
  } = usePosContext();

  const [sortOption, setSortOption] = useState<'popular'|'price_low'|'price_high'>('popular');
  const [viewMode, setViewMode] = useState<'grid'|'list'>('grid');

  // Customer State
  const [customer, setCustomer] = useState<Customer | null>(null);
  const [customerMobile, setCustomerMobile] = useState('');
  const [showAddCustomerModal, setShowAddCustomerModal] = useState(false);
  const [newCustomerName, setNewCustomerName] = useState('');
  const [newCustomerEmail, setNewCustomerEmail] = useState('');
  const [savingCustomer, setSavingCustomer] = useState(false);
  const [customerError, setCustomerError] = useState('');
  const [customerSearchResults, setCustomerSearchResults] = useState<Customer[]>([]);
  const [isSearchingCustomer, setIsSearchingCustomer] = useState(false);
  const [showCustomerDropdown, setShowCustomerDropdown] = useState(false);

  // Discount / Payment State
  const [discountType, setDiscountType] = useState<'fixed'|'percentage'>('percentage');
  const [discountValue, setDiscountValue] = useState<number>(0);
  const [cashReceived, setCashReceived] = useState<number>(0);
  const [orderNote, setOrderNote] = useState('');
  
  const [processingOrder, setProcessingOrder] = useState(false);
  const [paymentStatus, setPaymentStatus] = useState<PaymentStatus>('IDLE');
  const [showPaymentModal, setShowPaymentModal] = useState(false);
  const [paymentMethod, setPaymentMethod] = useState<'CASH'|'UPI'|'CARD'|'MIXED'|'RAZORPAY'>('CASH');
  const [mixedPayments, setMixedPayments] = useState<{method: 'CASH'|'UPI'|'CARD', amount: number, reference?: string}[]>([{method: 'CASH', amount: 0}]);
  const [paymentReference, setPaymentReference] = useState('');
  const [idempotencyKey, setIdempotencyKey] = useState('');


  const filteredProducts = useMemo(() => {
    let list = products.filter((p) => {
      const matchCat = selectedCategory ? p.category_id === selectedCategory : true;
      const matchSearch = p.name.toLowerCase().includes(searchQuery.toLowerCase()) || p.sku.toLowerCase().includes(searchQuery.toLowerCase());
      return matchCat && matchSearch;
    });
    if (sortOption === 'price_low') list.sort((a, b) => Number(a.selling_price) - Number(b.selling_price));
    else if (sortOption === 'price_high') list.sort((a, b) => Number(b.selling_price) - Number(a.selling_price));
    return list;
  }, [products, selectedCategory, searchQuery, sortOption]);

  const subtotal = cart.reduce((sum, item) => sum + (Number(item.product.selling_price) * item.quantity), 0);
  const discountAmount = discountType === 'percentage' ? subtotal * (discountValue / 100) : discountValue;
  const tax = gstEnabled ? (subtotal - discountAmount) * (gstPercentage / 100) : 0;
  const grandTotal = subtotal - discountAmount + tax;

  const handleProceedToPayment = () => {
    if (cart.length === 0) {
      toast('warning', 'Cart is empty', 'Please add items before proceeding to payment.');
      return;
    }
    if (discountType === 'percentage' && discountValue > cashierDiscountLimit) {
      toast('error', 'Discount limit exceeded', `Your cashier limit is ${cashierDiscountLimit}%. Please reduce the discount.`);
      return;
    }
    setPaymentStatus('IDLE');
    setIdempotencyKey(crypto.randomUUID());
    setShowPaymentModal(true);
  };

  const handleCheckout = async () => {
    if (cart.length === 0) {
      toast('warning', 'Cart is empty', 'Please add items before proceeding to payment.');
      return;
    }

    // Prevent duplicate submission
    if (processingOrder) return;

    setProcessingOrder(true);
    setPaymentStatus('INITIATING');

    let payments: {method: string; amount: number; reference?: string}[] = [];
    let isGateway = false;

    if (paymentMethod === 'RAZORPAY') {
      isGateway = true;
      setPaymentStatus('PAYMENT_PENDING');
    } else if (paymentMethod === 'MIXED') {
      payments = mixedPayments.map(mp => ({ method: mp.method, amount: mp.amount, reference: mp.reference }));
    } else {
      payments = [{ method: paymentMethod, amount: grandTotal, reference: paymentReference || undefined }];
    }

    const payload: Record<string, unknown> = {
      customer_id: customer?.id || null,
      customer_name: customer ? customer.name : 'Walk-in Customer',
      customer_mobile: customerMobile || null,
      items: cart.map((item) => ({ product_id: item.product.id, quantity: item.quantity })),
      discount_type: discountType,
      discount_value: discountValue,
      received_amount: paymentMethod === 'CASH' ? cashReceived : grandTotal,
      is_gateway: isGateway || undefined,
    };
    if (!isGateway) {
      payload.payments = payments;
    }

    try {
      const { data } = await axios.post('/api/v1/invoices', payload, {
        headers: {
          'X-Idempotency-Key': idempotencyKey,
          Accept: 'application/json',
        },
      });

      if (isGateway) {
        // Razorpay gateway flow — do not confirm from client side
        setPaymentStatus('VERIFYING');
        toast('info', 'Payment verification in progress', 'Please wait while we confirm your payment.');
        setShowPaymentModal(false);
      } else {
        setPaymentStatus('SETTLED');
        const invoiceId = data?.data?.id;
        toast('success', 'Payment complete!', `Invoice created successfully.`);
        setShowPaymentModal(false);
        clearCart();
        // Navigate to invoice
        if (invoiceId) {
          setTimeout(() => router.visit(`/invoices/${invoiceId}`), 800);
        }
      }
    } catch (err: any) {
      setPaymentStatus('FAILED');
      setProcessingOrder(false);
      const msg = err?.response?.data?.error?.message
        || err?.response?.data?.message
        || (err?.response?.data?.errors ? Object.values(err.response.data.errors)[0] as string : null)
        || 'Payment failed. Please try again.';
      toast('error', 'Payment failed', msg);
    } finally {
      if (paymentStatus !== 'SETTLED' && paymentStatus !== 'VERIFYING') {
        setProcessingOrder(false);
      }
    }
  };

  const handleAddCustomer = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!newCustomerName || !customerMobile) return;
    setSavingCustomer(true);
    setCustomerError('');
    try {
      const res = await axios.post(route('customers.store'), {
        name: newCustomerName,
        mobile: customerMobile,
        email: newCustomerEmail
      });
      setCustomer(res.data.customer);
      setShowAddCustomerModal(false);
    } catch (err: any) {
      if (err.response?.status === 422) {
        setCustomerError(err.response.data.message || 'Validation failed.');
        // Auto-attach if already exists
        if (err.response.data.customer) {
          setCustomer(err.response.data.customer);
          setShowAddCustomerModal(false);
        }
      } else {
        setCustomerError('An unexpected error occurred.');
      }
    } finally {
      setSavingCustomer(false);
    }
  };

  const handleCustomerSearch = async (val: string) => {
    setCustomerMobile(val);
    if (val.length < 3) {
      setCustomerSearchResults([]);
      setShowCustomerDropdown(false);
      return;
    }
    setIsSearchingCustomer(true);
    setShowCustomerDropdown(true);
    try {
      const res = await axios.get(route('customers.search', { mobile: val }));
      setCustomerSearchResults(res.data.customers || []);
    } catch (err) {
      console.error(err);
    } finally {
      setIsSearchingCustomer(false);
    }
  };

  return (
    <>
      <Head title="POS Billing Terminal - Laya's Cakes & Candles" />

      {/* SEARCH AND FILTERS ROW */}
      <div className="flex flex-col md:flex-row items-center gap-4 bg-white dark:bg-slate-900 p-4 mb-6 rounded-2xl shadow-sm border border-slate-100 dark:border-slate-800">
        <div className="relative w-full md:w-96 flex-shrink-0">
          <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
            <Search className="w-5 h-5 text-slate-400" />
          </div>
          <input
            id="pos-search-input"
            type="text"
            className={`w-full pl-11 pr-4 py-3 bg-slate-50/50 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 rounded-2xl text-sm dark:text-slate-200 focus:ring-2 ${accentFocusClass} transition-all`}
            placeholder="Search products or scan barcode... (Ctrl+K)"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
        </div>
        
        <div className="flex items-center justify-center space-x-2 overflow-x-auto pb-1 flex-1 hide-scrollbar">
          <button
            onClick={() => setSelectedCategory(null)}
            className={`whitespace-nowrap px-4 py-2 rounded-xl text-sm font-bold transition-all ${
              selectedCategory === null
                ? 'bg-slate-800 dark:bg-slate-700 text-white shadow-md'
                : 'bg-slate-50 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 border border-slate-200 dark:border-slate-700'
            }`}
          >
            All Items
          </button>
          {categories.map((c) => (
            <button
              key={c.id}
              onClick={() => setSelectedCategory(c.id)}
              className={`whitespace-nowrap px-4 py-2 rounded-xl text-sm font-bold transition-all ${
                selectedCategory === c.id
                  ? `${isPink ? 'bg-gradient-to-r from-[#FF0D8F] to-[#FF4DB8]' : 'bg-gradient-to-r from-[#0CA996] to-[#20C997]'} text-white shadow-md ${accentShadowClass}`
                  : 'bg-slate-50 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 border border-slate-200 dark:border-slate-700'
              }`}
            >
              {c.name}
            </button>
          ))}
        </div>

        <div className="flex items-center space-x-2 border-l border-slate-200 dark:border-slate-700 pl-4">
          <button onClick={() => setViewMode('grid')} className={`p-2 rounded-xl transition-colors ${viewMode === 'grid' ? `${accentBgClass} text-white shadow-sm` : 'bg-slate-50 dark:bg-slate-800 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700'}`}><Grid className="w-4 h-4" /></button>
          <button onClick={() => setViewMode('list')} className={`p-2 rounded-xl transition-colors ${viewMode === 'list' ? `${accentBgClass} text-white shadow-sm` : 'bg-slate-50 dark:bg-slate-800 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700'}`}><List className="w-4 h-4" /></button>
          <button 
            type="button"
            onClick={() => setShowCart(true)} 
            className={`flex items-center space-x-2 ${accentBgClass} ${accentHoverBgClass} text-white px-3.5 py-2 rounded-xl text-sm font-bold shadow-md ${accentShadowClass} transition-all hover:scale-[1.02]`}
          >
            <ShoppingCart className="w-4 h-4" />
            <span>Cart</span>
            {cart.length > 0 && (
              <span className={`bg-white ${accentTextClass} text-xs px-1.5 py-0.5 rounded-full font-black`}>
                {cart.reduce((s, i) => s + i.quantity, 0)}
              </span>
            )}
          </button>
        </div>
      </div>

      {/* PRODUCTS GRID */}
      <div className={`grid gap-4 flex-1 pb-20 ${viewMode === 'grid' ? 'grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5' : 'grid-cols-1 md:grid-cols-2'}`}>
        {filteredProducts.map((p, i) => (
          <div
            key={p.id}
            onClick={() => addToCart(p)}
            className={`group bg-white dark:bg-slate-900 rounded-3xl overflow-hidden shadow-sm border border-slate-100 dark:border-slate-800 hover:shadow-xl ${accentHoverBorderClass} transition-all duration-300 cursor-pointer flex flex-col`}
          >
            <div className="relative h-40 overflow-hidden bg-slate-100 dark:bg-slate-800">
              <img src={getFallbackImage(p.name, p.category?.name)} alt={p.name} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
              <div className="absolute inset-0 bg-black/5 group-hover:bg-black/0 transition-colors" />
            </div>
            <div className="p-4 flex flex-col flex-1">
              <div className="text-[10px] font-extrabold tracking-wider uppercase text-slate-400 mb-1">{p.category?.name}</div>
              <h3 className={`text-sm font-bold text-slate-800 dark:text-slate-100 leading-tight mb-2 flex-1 ${accentGroupHoverTextClass} transition-colors line-clamp-2`}>{p.name}</h3>
              <div className="flex items-center justify-between mt-auto pt-2 border-t border-slate-50 dark:border-slate-800">
                <div className="flex flex-col">
                  <span className="text-xs font-bold text-slate-400 line-through">₹{Number(p.selling_price * 1.2).toFixed(2)}</span>
                  <span className={`text-lg font-extrabold ${accentTextClass} leading-none`}>₹{Number(p.selling_price).toFixed(2)}</span>
                </div>
                <div className={`w-8 h-8 rounded-full ${accentLightBgClass} flex items-center justify-center ${accentGroupHoverBgClass} transition-colors`}>
                  <Plus className={`w-4 h-4 ${accentTextClass} group-hover:text-white`} />
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* SLIDE-IN CART OVERLAY */}
      {showCart && (
        <>
          <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-sm z-40 transition-opacity" onClick={() => setShowCart(false)} />
          <div className="fixed top-0 right-0 h-full w-[400px] max-w-full bg-white dark:bg-slate-900 shadow-2xl z-50 flex flex-col border-l border-slate-200 dark:border-slate-800 transform transition-transform duration-300">
            {/* Header */}
            <div className="flex items-center justify-between p-5 border-b border-slate-100 dark:border-slate-800">
              <h2 className="text-lg font-bold text-slate-900 dark:text-white flex items-center gap-2">
                <ShoppingCart className={`w-5 h-5 ${accentTextClass}`} /> Current Order
              </h2>
              <button onClick={() => setShowCart(false)} className="p-2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800">
                <X className="w-5 h-5" />
              </button>
            </div>

            {/* Cart Items */}
            <div className="flex-1 overflow-y-auto p-5 space-y-3 bg-slate-50/50 dark:bg-slate-900/50">
              {cart.map((item) => (
                <div key={item.product.id} className="flex gap-3 bg-white dark:bg-slate-800 p-3 rounded-2xl shadow-sm border border-slate-100 dark:border-slate-700">
                  <img src={getFallbackImage(item.product.name, item.product.category?.name)} className="w-16 h-16 rounded-xl object-cover" />
                  <div className="flex-1 flex flex-col">
                    <span className="text-sm font-bold text-slate-800 dark:text-slate-100 line-clamp-1">{item.product.name}</span>
                    <span className={`text-xs ${accentTextClass} font-bold mt-1`}>₹{Number(item.product.selling_price).toFixed(2)}</span>
                    <div className="flex items-center justify-between mt-auto pt-2">
                      <div className="flex items-center bg-slate-50 dark:bg-slate-900 text-slate-800 dark:text-slate-200 rounded-lg p-0.5 border border-slate-200 dark:border-slate-700">
                        <button onClick={() => updateQuantity(item.product.id, -1)} className="p-1 hover:bg-white dark:hover:bg-slate-800 rounded-md text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200"><Minus className="w-3 h-3" /></button>
                        <span className="w-8 text-center text-xs font-bold">{item.quantity}</span>
                        <button onClick={() => updateQuantity(item.product.id, 1)} className="p-1 hover:bg-white dark:hover:bg-slate-800 rounded-md text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200"><Plus className="w-3 h-3" /></button>
                      </div>
                      <button onClick={() => removeFromCart(item.product.id)} className="p-1.5 text-rose-400 hover:text-rose-600 hover:bg-rose-50 rounded-lg"><Trash2 className="w-4 h-4" /></button>
                    </div>
                  </div>
                </div>
              ))}
              {cart.length === 0 && (
                <div className="text-center text-slate-500 dark:text-slate-400 py-10 text-sm font-medium">Cart is empty.<br/>Add products to see them here.</div>
              )}
            </div>

            {/* Totals & Checkout */}
            <div className="p-5 bg-white dark:bg-slate-900 border-t border-slate-100 dark:border-slate-800 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
              {/* Customer Selector Minimal */}
              <div className="flex items-center gap-2 mb-4 bg-slate-50 dark:bg-slate-800 p-2.5 rounded-xl border border-slate-200 dark:border-slate-700">
                <User className="w-4 h-4 text-slate-400" />
                {customer ? (
                  <div className="flex-1 flex items-center justify-between">
                    <span className="text-xs font-bold text-slate-700 dark:text-slate-200">{customer.name}</span>
                    <button onClick={() => setCustomer(null)} className="text-[10px] text-rose-500 hover:underline">Remove</button>
                  </div>
                ) : (
                  <div className="flex-1 flex gap-2 relative">
                    <input 
                      type="text" 
                      placeholder="Search Name or Mobile No." 
                      className="flex-1 bg-white dark:bg-slate-900 border-none text-slate-800 dark:text-slate-200 placeholder-slate-400 text-xs rounded p-1 focus:ring-0" 
                      value={customerMobile} 
                      onChange={e => handleCustomerSearch(e.target.value)}
                      onFocus={() => { if(customerSearchResults.length > 0) setShowCustomerDropdown(true); }}
                      onBlur={() => setTimeout(() => setShowCustomerDropdown(false), 200)}
                    />
                    {isSearchingCustomer && (
                      <div className="absolute right-12 top-1.5">
                        <Loader2 className="w-4 h-4 animate-spin text-slate-400" />
                      </div>
                    )}
                    <button onClick={() => setShowAddCustomerModal(true)} className="px-2 py-1 bg-slate-200 dark:bg-slate-700 hover:bg-slate-300 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-300 text-xs font-bold rounded">New</button>

                    {showCustomerDropdown && customerSearchResults.length > 0 && (
                      <div className="absolute top-full left-0 right-0 mt-1 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg shadow-lg z-50 overflow-hidden">
                        {customerSearchResults.map(c => (
                          <button
                            key={c.id}
                            className="w-full text-left px-3 py-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 border-b border-slate-100 dark:border-slate-700 last:border-b-0"
                            onClick={() => {
                              setCustomer(c);
                              setShowCustomerDropdown(false);
                              setCustomerMobile('');
                              setCustomerSearchResults([]);
                            }}
                          >
                            <div className="text-xs font-bold text-slate-800 dark:text-slate-200">{c.name}</div>
                            <div className="text-[10px] text-slate-500">{c.mobile}</div>
                          </button>
                        ))}
                      </div>
                    )}
                  </div>
                )}
              </div>

              <div className="space-y-2 mb-4 text-sm">
                <div className="flex justify-between text-slate-500 dark:text-slate-400"><span className="font-medium">Subtotal</span><span className="font-bold text-slate-700 dark:text-slate-300">₹{subtotal.toFixed(2)}</span></div>
                {discountAmount > 0 && <div className="flex justify-between text-[#00C8B2]"><span className="font-medium">Discount</span><span className="font-bold">-₹{discountAmount.toFixed(2)}</span></div>}
                <div className="flex justify-between text-slate-500 dark:text-slate-400"><span className="font-medium">{gstEnabled ? `Tax (${gstPercentage}%)` : 'Tax (Disabled)'}</span><span className="font-bold text-slate-700 dark:text-slate-300">₹{tax.toFixed(2)}</span></div>
                <div className="flex justify-between items-end pt-3 border-t border-slate-100 dark:border-slate-800">
                  <span className="text-sm font-bold text-slate-800 dark:text-slate-200">Grand Total</span>
                  <span className={`text-2xl font-extrabold ${accentTextClass}`}>₹{grandTotal.toFixed(2)}</span>
                </div>
              </div>

              <button 
                onClick={handleProceedToPayment} 
                disabled={processingOrder || cart.length === 0} 
                className={`w-full ${accentBgClass} ${accentHoverBgClass} text-white font-bold py-3.5 rounded-2xl shadow-lg ${accentShadowClass} disabled:opacity-50 transition-transform active:scale-95 flex items-center justify-center gap-2`}
              >
                <CheckCircle2 className="w-5 h-5" /> Proceed to Payment
              </button>
            </div>
          </div>
        </>
      )}

      
      {/* PAYMENT MODAL */}
      {showPaymentModal && (
        <div className="fixed inset-0 z-[60] bg-slate-950/60 backdrop-blur-sm flex items-center justify-center p-4">
          <div className="bg-white dark:bg-slate-900 rounded-2xl w-full max-w-lg p-6 space-y-5 shadow-2xl border border-slate-200 dark:border-slate-800 overflow-hidden flex flex-col max-h-[90vh]">
            <div className="p-5 border-b border-slate-100 dark:border-slate-800 flex items-center justify-between bg-slate-50 dark:bg-slate-800">
              <h3 className="text-xl font-extrabold text-slate-800 dark:text-slate-100">Payment Details</h3>
              <button onClick={() => setShowPaymentModal(false)} className="p-2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700">
                <X className="w-5 h-5" />
              </button>
            </div>
            
            <div className="p-5 overflow-y-auto flex-1">
              {/* Order Summary */}
              <div className="bg-slate-50 dark:bg-slate-800 p-4 rounded-xl border border-slate-200 dark:border-slate-700 mb-6">
                <div className="flex justify-between text-slate-500 mb-1"><span className="text-sm">Subtotal</span><span className="font-bold">₹{subtotal.toFixed(2)}</span></div>
                {discountAmount > 0 && <div className="flex justify-between text-[#00C8B2] mb-1"><span className="text-sm">Discount</span><span className="font-bold">-₹{discountAmount.toFixed(2)}</span></div>}
                <div className="flex justify-between text-slate-500 mb-3"><span className="text-sm">{gstEnabled ? `Tax (${gstPercentage}%)` : 'Tax (Disabled)'}</span><span className="font-bold">₹{tax.toFixed(2)}</span></div>
                <div className="flex justify-between items-center pt-3 border-t border-slate-200">
                  <span className="font-bold text-slate-800">Grand Total</span>
                  <span className={`text-2xl font-extrabold ${accentTextClass}`}>₹{grandTotal.toFixed(2)}</span>
                </div>
              </div>

              {/* Payment Methods */}
              <div className="mb-4">
                <label className="text-sm font-bold text-slate-700 block mb-2">Select Payment Method</label>
                <div className="grid grid-cols-3 gap-2 mb-2">
                  {['CASH', 'UPI', 'CARD'].map(m => (
                    <button key={m} onClick={() => setPaymentMethod(m as any)} className={`py-2 rounded-xl text-sm font-bold border ${paymentMethod === m ? `${accentLightBgClass} ${accentBorderClass} ${accentTextClass}` : 'bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800'}`}>
                      {m}
                    </button>
                  ))}
                </div>
                <div className="grid grid-cols-2 gap-2">
                  <button onClick={() => setPaymentMethod('MIXED')} className={`py-2 rounded-xl text-sm font-bold border ${paymentMethod === 'MIXED' ? `${accentLightBgClass} ${accentBorderClass} ${accentTextClass}` : 'bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800'}`}>
                    MIXED SPLIT
                  </button>
                  <button onClick={() => setPaymentMethod('RAZORPAY')} className={`py-2 rounded-xl text-sm font-bold border ${paymentMethod === 'RAZORPAY' ? `${accentLightBgClass} ${accentBorderClass} ${accentTextClass}` : 'bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800'}`}>
                    ONLINE (RAZORPAY)
                  </button>
                </div>
              </div>

              {/* Method Specific UI */}
              <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl p-4">
                {paymentMethod === 'CASH' && (
                  <div>
                    <label className="text-sm font-bold text-slate-700 block mb-2">Cash Received (₹)</label>
                    <input type="number" min={grandTotal} value={cashReceived || ''} onChange={e => setCashReceived(Number(e.target.value))} className={`w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-3 font-bold text-lg text-slate-900 dark:text-white placeholder:text-slate-400 focus:ring-2 ${accentFocusClass}`} placeholder={grandTotal.toFixed(2)} />
                    {cashReceived > grandTotal && (
                      <div className="mt-3 flex justify-between items-center p-3 bg-emerald-50 text-emerald-700 rounded-lg border border-emerald-100">
                        <span className="font-bold text-sm">Change to Return:</span>
                        <span className="font-extrabold text-lg">₹{(cashReceived - grandTotal).toFixed(2)}</span>
                      </div>
                    )}
                  </div>
                )}
                
                {(paymentMethod === 'UPI' || paymentMethod === 'CARD') && (
                  <div>
                    <label className="text-sm font-bold text-slate-700 block mb-2">Reference Number (Optional)</label>
                    <input type="text" value={paymentReference} onChange={e => setPaymentReference(e.target.value)} className={`w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-3 text-sm text-slate-900 dark:text-white placeholder:text-slate-400 focus:ring-2 ${accentFocusClass}`} placeholder="Txn ID / Last 4 Digits" />
                  </div>
                )}

                {paymentMethod === 'MIXED' && (
                  <div className="space-y-3">
                    {mixedPayments.map((mp, idx) => (
                      <div key={idx} className="flex gap-2 items-center">
                        <select value={mp.method} onChange={e => {
                          const newM = [...mixedPayments];
                          newM[idx].method = e.target.value as any;
                          setMixedPayments(newM);
                        }} className="flex-1 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-2 text-sm font-bold text-slate-900 dark:text-white">
                          <option value="CASH">CASH</option>
                          <option value="UPI">UPI</option>
                          <option value="CARD">CARD</option>
                        </select>
                        <input type="number" value={mp.amount || ''} onChange={e => {
                          const newM = [...mixedPayments];
                          newM[idx].amount = Number(e.target.value);
                          setMixedPayments(newM);
                        }} className="flex-1 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-2 text-sm font-bold text-slate-900 dark:text-white placeholder:text-slate-400" placeholder="Amount" />
                        <button onClick={() => {
                          const newM = [...mixedPayments];
                          newM.splice(idx, 1);
                          setMixedPayments(newM);
                        }} className="p-2 text-rose-500 hover:bg-rose-50 dark:hover:bg-rose-900/30 rounded-lg"><Trash2 className="w-4 h-4" /></button>
                      </div>
                    ))}
                    <button onClick={() => setMixedPayments([...mixedPayments, {method: 'UPI', amount: 0}])} className={`text-sm font-bold ${accentTextClass} flex items-center gap-1 mt-2`}>
                      <Plus className="w-4 h-4" /> Add Payment Row
                    </button>
                    
                    {(() => {
                      const sum = mixedPayments.reduce((acc, curr) => acc + (Number(curr.amount) || 0), 0);
                      const diff = grandTotal - sum;
                      return (
                        <div className={`mt-4 p-3 rounded-lg border flex justify-between font-bold text-sm ${diff > 0 ? 'bg-amber-50 dark:bg-amber-900/30 border-amber-200 dark:border-amber-700/50 text-amber-700 dark:text-amber-400' : diff < 0 ? 'bg-emerald-50 dark:bg-emerald-900/30 border-emerald-200 dark:border-emerald-700/50 text-emerald-700 dark:text-emerald-400' : 'bg-slate-50 dark:bg-slate-800 border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300'}`}>
                          <span>Total Entered: ₹{sum.toFixed(2)}</span>
                          <span>{diff > 0 ? `Remaining: ₹${diff.toFixed(2)}` : diff < 0 ? `Overpaid: ₹${Math.abs(diff).toFixed(2)}` : 'Exact Amount'}</span>
                        </div>
                      );
                    })()}
                  </div>
                )}

                {paymentMethod === 'RAZORPAY' && (
                  <div className="text-center p-4">
                    <Sparkles className={`w-8 h-8 ${accentTextClass} mx-auto mb-2`} />
                    <p className="text-sm text-slate-600 dark:text-slate-400 font-medium">Customer will pay online via Razorpay Gateway.</p>
                    <p className="text-xs text-slate-400 mt-1">A secure checkout popup will appear.</p>
                  </div>
                )}
              </div>
            </div>

            <div className="p-5 bg-white dark:bg-slate-900 border-t border-slate-100 dark:border-slate-800 flex flex-col gap-3">
              {/* Payment lifecycle — PaymentStatusBanner is the authoritative UI signal */}
              {paymentStatus !== 'IDLE' && (
                <PaymentStatusBanner
                  status={paymentStatus}
                  onDismiss={paymentStatus === 'FAILED' || paymentStatus === 'CANCELLED'
                    ? () => setPaymentStatus('IDLE')
                    : undefined}
                />
              )}
              <button
                id="pos-checkout-submit"
                onClick={handleCheckout}
                disabled={
                  processingOrder ||
                  (paymentMethod === 'CASH' && cashReceived < grandTotal) ||
                  (paymentMethod === 'MIXED' && mixedPayments.reduce((acc, curr) => acc + (Number(curr.amount) || 0), 0) < grandTotal)
                }
                aria-busy={processingOrder}
                aria-label={processingOrder ? 'Processing payment' : paymentMethod === 'RAZORPAY' ? 'Initiate online payment' : 'Finalize invoice and receipt'}
                className={`w-full ${accentBgClass} ${accentHoverBgClass} text-white font-bold py-3.5 rounded-2xl shadow-lg ${accentShadowClass} disabled:opacity-50 transition-transform active:scale-95 flex items-center justify-center gap-2`}
              >
                {processingOrder
                  ? <><Loader2 className="w-4 h-4 animate-spin" aria-hidden="true" /> Processing…</>
                  : paymentMethod === 'RAZORPAY'
                    ? 'Initiate Online Payment'
                    : 'Finalize Invoice & Receipt'}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* CUSTOMER ADD MODAL */}
      {showAddCustomerModal && (
        <div className="fixed inset-0 z-[60] bg-slate-950/60 backdrop-blur-sm flex items-center justify-center p-4">
          <div className="bg-white dark:bg-slate-900 rounded-2xl max-w-sm w-full p-6 space-y-5 shadow-2xl border border-slate-200 dark:border-slate-800 relative">
            <h3 className="text-lg font-bold text-slate-800 dark:text-slate-100 mb-4">Register Customer</h3>
            {customerError && <div className="mb-4 text-xs text-rose-600 dark:text-rose-400 bg-rose-50 dark:bg-rose-900/30 p-3 rounded-lg border border-rose-200 dark:border-rose-800 font-bold">{customerError}</div>}
            <form onSubmit={handleAddCustomer} className="space-y-4">
              <div><label className="text-xs font-bold text-slate-700">Name *</label><input type="text" required value={newCustomerName} onChange={e=>setNewCustomerName(e.target.value)} className="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-2.5 text-sm text-slate-900 dark:text-white placeholder:text-slate-400" /></div>
              <div><label className="text-xs font-bold text-slate-700">Mobile *</label><input type="text" required value={customerMobile} onChange={e=>setCustomerMobile(e.target.value)} className="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-2.5 text-sm text-slate-900 dark:text-white placeholder:text-slate-400" /></div>
              <div><label className="text-xs font-bold text-slate-700">Email</label><input type="email" value={newCustomerEmail} onChange={e=>setNewCustomerEmail(e.target.value)} className="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-2.5 text-sm text-slate-900 dark:text-white placeholder:text-slate-400" /></div>
              <div className="flex gap-3 pt-2">
                <button type="button" onClick={() => setShowAddCustomerModal(false)} className="flex-1 py-2.5 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 font-bold rounded-xl text-sm">Cancel</button>
                <button type="submit" disabled={savingCustomer} className={`flex-1 py-2.5 ${accentBgClass} text-white font-bold rounded-xl text-sm shadow-md disabled:opacity-50`}>{savingCustomer ? 'Saving...' : 'Save Customer'}</button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* FLOATING CART BAR (IF CLOSED AND HAS ITEMS) */}
      {cart.length > 0 && !showCart && (
        <div className="fixed bottom-6 right-6 z-30">
          <button
            type="button"
            onClick={() => setShowCart(true)}
            className={`flex items-center space-x-3 ${accentBgClass} ${accentHoverBgClass} text-white px-5 py-3.5 rounded-2xl shadow-xl ${accentShadowClass} font-bold transition-all hover:scale-105 active:scale-95 cursor-pointer`}
          >
            <div className="relative">
              <ShoppingCart className="w-5 h-5 text-white" />
              <span className={`absolute -top-2 -right-2 bg-white ${accentTextClass} text-[10px] font-black w-4 h-4 rounded-full flex items-center justify-center shadow-xs`}>
                {cart.reduce((s, i) => s + i.quantity, 0)}
              </span>
            </div>
            <span>View Cart ({cart.reduce((s, i) => s + i.quantity, 0)} items)</span>
            <span className="bg-white/20 px-2 py-0.5 rounded-lg text-xs font-black">₹{grandTotal.toFixed(2)}</span>
          </button>
        </div>
      )}
    </>
  );
};

export default function PosIndex(props: Props) {
  return <PosIndexContent {...props} />;
}

PosIndex.layout = (page: any) => (
  <PosProvider initialCart={page.props.initialCart}>
    <AuthenticatedLayout>{page}</AuthenticatedLayout>
  </PosProvider>
);