import React, { useState, useMemo, useEffect, useCallback, useRef } from 'react';
import { Search, Plus, Minus, Trash2, Receipt, X, Tag, QrCode, CreditCard, PieChart, Barcode, ShoppingCart, User, RefreshCcw, Save, Download, ChevronRight, Zap, Wallet, Smartphone, AlertCircle } from 'lucide-react';
import { useFiestaStockStatement, FIESTA_TENANT_ID } from '../services/fiestaQueries';
import { num as fnum, str as fstr, type Row } from '../services/fiestaApi';

interface PosViewProps {
  locationid?: number;
  tenantId?: number;
}

interface CartItem {
  id: string;
  name: string;
  sku: string;
  price: number;
  qty: number;
  maxQty: number;
  discountPerItem: number;
  couponCode?: string;
  unit: string;
  isRefund?: boolean;
  promoDiscount?: number;
  hasBogo?: boolean;
}

export default function PosView({ locationid, tenantId = FIESTA_TENANT_ID }: PosViewProps) {
  const stockQ = useFiestaStockStatement({ tenantid: tenantId, locationid: locationid ?? 0, pagesize: 200 });

  const [search, setSearch] = useState('');
  const [cart, setCart] = useState<CartItem[]>([]);

  const [showPayment, setShowPayment] = useState(false);
  const [showReceipt, setShowReceipt] = useState(false);
  const [showReport, setShowReport] = useState(false);
  const [showManualSearch, setShowManualSearch] = useState(false);
  const [payMethod, setPayMethod] = useState<'cash' | 'upi' | 'card' | 'store_credit'>('cash');
  const [cashReceived, setCashReceived] = useState('');

  const [discountPromptItem, setDiscountPromptItem] = useState<string | null>(null);
  const [couponCodeInput, setCouponCodeInput] = useState('');
  const [discountAmountInput, setDiscountAmountInput] = useState('');
  const couponInputRef = useRef<HTMLInputElement>(null);
  const searchInputRef = useRef<HTMLInputElement>(null);

  const [dailyReport, setDailyReport] = useState({ sales: 0, tx: 0, gst: 0, cash: 0, upi: 0, card: 0, products: {} as Record<string, number> });

  const [isRefundMode, setIsRefundMode] = useState(false);

  const [customer, setCustomer] = useState<{ phone: string; points: number; name: string } | null>(null);
  const [showCustomerPrompt, setShowCustomerPrompt] = useState(false);
  const [customerPhoneInput, setCustomerPhoneInput] = useState('');
  const [customerNameInput, setCustomerNameInput] = useState('');
  const [isNewCustomer, setIsNewCustomer] = useState(false);

  const [parkedCarts, setParkedCarts] = useState<{ id: string; cart: CartItem[]; time: number; customer: any }[]>([]);
  const [showParkedPrompt, setShowParkedPrompt] = useState(false);

  const inventory = useMemo(() => {
    return (stockQ.data ?? []).map((r: Row, i: number) => {
      const isWeighable = i % 4 === 0;
      return {
        id: fstr(r.productid),
        name: fstr(r.productname) || 'Unnamed product',
        sku: fstr(r.sku) || `SKU-${fstr(r.productid)}`,
        closing: fnum(r.closing) ?? 0,
        price: Math.floor(Math.random() * 500) + 50,
        unit: isWeighable ? 'kg' : 'pc',
      };
    });
  }, [stockQ.data]);

  const handleProductScanned = useCallback(
    (product: any) => {
      if (product.closing <= 0 && !isRefundMode) return;
      setCart((prev) => {
        const existing = prev.find((item) => item.id === product.id && !!item.isRefund === isRefundMode);
        if (existing) {
          if (!isRefundMode && existing.qty >= product.closing) return prev;
          return prev.map((item) =>
            item.id === product.id && !!item.isRefund === isRefundMode ? { ...item, qty: item.qty + 1 } : item
          );
        }
        return [
          {
            id: product.id,
            name: product.name,
            sku: product.sku,
            price: product.price,
            qty: product.unit === 'kg' ? 1.0 : 1,
            maxQty: product.closing,
            discountPerItem: 0,
            unit: product.unit,
            isRefund: isRefundMode,
          },
          ...prev,
        ];
      });
      setSearch('');
    },
    [isRefundMode]
  );

  const updateCartQty = (id: string, newQty: number) => {
    setCart((prev) =>
      prev
        .map((item) => {
          if (item.id === id) {
            if (newQty <= 0) return { ...item, qty: 0 };
            if (newQty > item.maxQty) return item;
            return { ...item, qty: newQty };
          }
          return item;
        })
        .filter((item) => item.qty > 0)
    );
  };

  const removeCartItem = (id: string) => {
    setCart((prev) => prev.filter((item) => item.id !== id));
  };

  const clearCart = () => setCart([]);

  const applyDiscountToItem = () => {
    if (!discountPromptItem) return;
    const amt = parseFloat(discountAmountInput) || 0;
    const code = couponCodeInput.trim().toUpperCase() || undefined;
    setCart((prev) =>
      prev.map((item) => (item.id === discountPromptItem ? { ...item, discountPerItem: amt, couponCode: code } : item))
    );
    setDiscountPromptItem(null);
    setCouponCodeInput('');
    setDiscountAmountInput('');
    setTimeout(() => searchInputRef.current?.focus(), 100);
  };

  const removeCoupon = (id: string) => {
    setCart((prev) =>
      prev.map((item) => (item.id === id ? { ...item, discountPerItem: 0, couponCode: undefined } : item))
    );
  };

  const cartWithPromos = useMemo(() => {
    return cart.map((item) => {
      if (item.isRefund) return { ...item, promoDiscount: 0, hasBogo: false };
      let promoDiscount = 0;
      let hasBogo = false;
      if (item.unit !== 'kg' && item.qty >= 3) {
        const freeItems = Math.floor(item.qty / 3);
        promoDiscount = freeItems * item.price;
        hasBogo = true;
      }
      return { ...item, promoDiscount, hasBogo };
    });
  }, [cart]);

  const subtotal = cartWithPromos.reduce((sum, item) => sum + item.price * item.qty * (item.isRefund ? -1 : 1), 0);
  const totalDiscount = cartWithPromos.reduce(
    (sum, item) => sum + (item.discountPerItem * item.qty + (item.promoDiscount || 0)),
    0
  );
  const taxableAmount = Math.max(0, subtotal - totalDiscount);
  const cgst = taxableAmount * 0.09;
  const sgst = taxableAmount * 0.09;
  const packagingCharge = cart.length > 0 && subtotal > 0 ? 10 : 0;
  const grandTotal = subtotal < 0 ? subtotal : taxableAmount + cgst + sgst + packagingCharge;

  const parkCart = () => {
    if (cart.length === 0) return;
    setParkedCarts((prev) => [
      ...prev,
      { id: `CART-${Date.now().toString().slice(-4)}`, cart, time: Date.now(), customer },
    ]);
    setCart([]);
    setCustomer(null);
    setIsRefundMode(false);
  };

  const retrieveCart = (pc: any) => {
    setCart(pc.cart);
    setCustomer(pc.customer);
    setParkedCarts((prev) => prev.filter((p) => p.id !== pc.id));
    setShowParkedPrompt(false);
  };

  useEffect(() => {
    let barcode = '';
    let lastKeyTime = Date.now();
    const handleKeyDown = (e: KeyboardEvent) => {
      if (
        showPayment ||
        showReceipt ||
        showReport ||
        discountPromptItem ||
        showManualSearch ||
        showCustomerPrompt ||
        showParkedPrompt
      )
        return;
      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
      const currentTime = Date.now();
      if (currentTime - lastKeyTime > 100) barcode = '';
      lastKeyTime = currentTime;
      if (e.key === 'Enter') {
        if (barcode.length > 0) {
          const product = inventory.find((p) => p.sku === barcode || p.id === barcode);
          if (product) handleProductScanned(product);
          barcode = '';
          e.preventDefault();
        }
      } else if (e.key.length === 1) {
        barcode += e.key;
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [
    inventory,
    handleProductScanned,
    showPayment,
    showReceipt,
    showReport,
    discountPromptItem,
    showManualSearch,
    showCustomerPrompt,
    showParkedPrompt,
  ]);

  const handleSearchKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      const val = search.trim();
      if (val) {
        const product = inventory.find(
          (p) => p.sku === val || p.id === val || p.name.toLowerCase() === val.toLowerCase()
        );
        if (product) {
          handleProductScanned(product);
        } else {
          alert('Product not found in inventory.');
        }
      }
    }
  };

  const getTodayKey = () => new Date().toISOString().split('T')[0];

  const checkDailyReset = useCallback(() => {
    const savedDate = localStorage.getItem('nearly_pos_date');
    const today = getTodayKey();
    if (savedDate !== today) {
      localStorage.setItem('nearly_pos_date', today);
      const initialReport = { sales: 0, tx: 0, gst: 0, cash: 0, upi: 0, card: 0, products: {} };
      localStorage.setItem('nearly_pos_report', JSON.stringify(initialReport));
      setDailyReport(initialReport);
    } else {
      const rep = localStorage.getItem('nearly_pos_report');
      if (rep) setDailyReport(JSON.parse(rep));
    }
  }, []);

  useEffect(() => {
    checkDailyReset();
  }, [checkDailyReset]);

  const recordSale = () => {
    checkDailyReset();
    const rep = JSON.parse(localStorage.getItem('nearly_pos_report') || '{}');
    rep.sales = (rep.sales || 0) + grandTotal;
    rep.tx = (rep.tx || 0) + 1;
    rep.gst = (rep.gst || 0) + cgst + sgst;
    rep[payMethod] = (rep[payMethod] || 0) + grandTotal;
    if (!rep.products) rep.products = {};
    cart.forEach((item) => {
      rep.products[item.name] = (rep.products[item.name] || 0) + item.qty;
    });
    localStorage.setItem('nearly_pos_report', JSON.stringify(rep));
    setDailyReport(rep);
  };

  const handleCheckoutBtn = () => {
    if (cart.length === 0) return;
    setCashReceived('');
    setPayMethod(grandTotal < 0 ? 'store_credit' : 'cash');
    setShowPayment(true);
  };

  const confirmPayment = () => {
    recordSale();
    setShowPayment(false);
    setShowReceipt(true);
  };

  const resetPos = () => {
    setCart([]);
    setCustomer(null);
    setIsRefundMode(false);
    setShowReceipt(false);
    setSearch('');
    setTimeout(() => searchInputRef.current?.focus(), 100);
  };

  const changeAmt = Math.max(0, (parseFloat(cashReceived) || 0) - grandTotal);

  const checkCustomerPhone = () => {
    if (customerPhoneInput.length >= 10) {
      const db = JSON.parse(localStorage.getItem('nearly_pos_customers') || '{}');
      if (db[customerPhoneInput]) {
        // Existing customer
        setCustomer({
          phone: customerPhoneInput,
          name: db[customerPhoneInput].name,
          points: db[customerPhoneInput].points || Math.floor(Math.random() * 500) + 50,
        });
        closeCustomerPrompt();
      } else {
        // New customer
        setIsNewCustomer(true);
      }
    }
  };

  const saveNewCustomer = () => {
    if (customerNameInput.trim()) {
      const db = JSON.parse(localStorage.getItem('nearly_pos_customers') || '{}');
      const newCustomer = {
        name: customerNameInput.trim(),
        points: 50, // Starting points
      };
      db[customerPhoneInput] = newCustomer;
      localStorage.setItem('nearly_pos_customers', JSON.stringify(db));
      
      setCustomer({
        phone: customerPhoneInput,
        name: newCustomer.name,
        points: newCustomer.points,
      });
      closeCustomerPrompt();
    }
  };

  const closeCustomerPrompt = () => {
    setShowCustomerPrompt(false);
    setCustomerPhoneInput('');
    setCustomerNameInput('');
    setIsNewCustomer(false);
  };

  const cashDenominations = [10, 20, 50, 100, 200, 500, 2000];
  const now = new Date();
  const timeString = now.toLocaleTimeString('en-IN', { hour: '2-digit', minute: '2-digit' });
  const dateString = now.toLocaleDateString('en-IN', { day: '2-digit', month: 'short', year: 'numeric' });

  return (
    <div className="flex flex-col lg:flex-row h-full bg-slate-100 print:p-0 print:bg-white print:h-auto">
      <style>{`
        .hide-spin-button::-webkit-inner-spin-button,
        .hide-spin-button::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
        .hide-spin-button { -moz-appearance: textfield; }
        .pos-scan-glow { box-shadow: 0 0 0 3px rgba(16,185,129,0.15), 0 1px 3px rgba(0,0,0,0.08); }
        .pos-scan-glow-red { box-shadow: 0 0 0 3px rgba(239,68,68,0.15), 0 1px 3px rgba(0,0,0,0.08); }
        @keyframes scan-pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
        .scan-pulse { animation: scan-pulse 1.8s ease-in-out infinite; }
      `}</style>

      {/* ── LEFT PANEL: Cart Items ─────────────────────────────────────── */}
      <div className="flex-1 flex flex-col min-h-0 overflow-hidden print:hidden">

        {/* Action Bar */}
        <div className={`flex items-center justify-between gap-3 px-5 py-3 border-b border-slate-200 ${isRefundMode ? 'bg-red-600' : 'bg-white'} transition-colors duration-300`}>
          <div className="flex items-center gap-3">
            <div className="flex items-center gap-2">
              <Barcode className={`w-5 h-5 ${isRefundMode ? 'text-white/70' : 'text-slate-400'}`} />
              <span className={`font-bold text-sm tracking-wide ${isRefundMode ? 'text-white' : 'text-slate-900'}`}>POS Terminal</span>
            </div>
            {isRefundMode && (
              <span className="flex items-center gap-1.5 bg-white/20 text-white text-[11px] font-bold uppercase tracking-widest px-2.5 py-1 rounded-full border border-white/30">
                <AlertCircle className="w-3 h-3" /> Refund Mode
              </span>
            )}
          </div>
          <div className="flex items-center gap-1.5">
            <button
              onClick={() => setShowManualSearch(true)}
              className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-bold rounded-lg border transition-colors ${isRefundMode ? 'bg-white/10 hover:bg-white/20 text-white border-white/15' : 'bg-slate-50 hover:bg-slate-100 text-slate-700 border-slate-200'}`}
            >
              <Search className="w-3.5 h-3.5" /> Browse
            </button>
            <button
              onClick={() => setIsRefundMode(!isRefundMode)}
              className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-bold rounded-lg border transition-colors ${isRefundMode ? 'bg-white text-red-600 border-white' : 'bg-slate-50 hover:bg-slate-100 text-slate-700 border-slate-200'}`}
            >
              <RefreshCcw className="w-3.5 h-3.5" /> Refund
            </button>
            <button
              onClick={parkCart}
              disabled={cart.length === 0}
              className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-bold rounded-lg border transition-colors disabled:opacity-40 ${isRefundMode ? 'bg-white/10 hover:bg-white/20 text-white border-white/15' : 'bg-slate-50 hover:bg-slate-100 text-slate-700 border-slate-200'}`}
            >
              <Save className="w-3.5 h-3.5" /> Park
            </button>
            <button
              onClick={() => setShowParkedPrompt(true)}
              className={`relative flex items-center gap-1.5 px-3 py-1.5 text-xs font-bold rounded-lg border transition-colors ${isRefundMode ? 'bg-white/10 hover:bg-white/20 text-white border-white/15' : 'bg-slate-50 hover:bg-slate-100 text-slate-700 border-slate-200'}`}
            >
              <Download className="w-3.5 h-3.5" /> Retrieve
              {parkedCarts.length > 0 && (
                <span className="absolute -top-1.5 -right-1.5 w-4 h-4 bg-amber-400 text-slate-900 rounded-full text-[9px] font-black flex items-center justify-center">
                  {parkedCarts.length}
                </span>
              )}
            </button>
            <button
              onClick={() => { checkDailyReset(); setShowReport(true); }}
              className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-bold rounded-lg border transition-colors ${isRefundMode ? 'bg-white/10 hover:bg-white/20 text-white border-white/15' : 'bg-slate-50 hover:bg-slate-100 text-slate-700 border-slate-200'}`}
            >
              <PieChart className="w-3.5 h-3.5" /> Report
            </button>
          </div>
        </div>

        {/* Scan Bar */}
        <div className="px-5 pt-4 pb-3 bg-white border-b border-slate-200">
          <div className={`flex items-center gap-4 rounded-xl border-2 px-5 py-3.5 transition-all duration-200 ${isRefundMode ? 'border-red-400 bg-red-50 pos-scan-glow-red' : 'border-emerald-400 bg-emerald-50/40 pos-scan-glow'}`}>
            <div className={`scan-pulse ${isRefundMode ? 'text-red-400' : 'text-emerald-500'}`}>
              <Barcode className="w-7 h-7" />
            </div>
            <input
              ref={searchInputRef}
              type="text"
              placeholder={isRefundMode ? 'Scan item to refund…' : 'Scan barcode or type SKU…'}
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              onKeyDown={handleSearchKeyDown}
              className="flex-1 bg-transparent border-none outline-none font-bold text-xl text-slate-800 placeholder:font-normal placeholder:text-slate-400"
              autoFocus
            />
            {search && (
              <button onClick={() => setSearch('')} className="text-slate-400 hover:text-slate-600">
                <X className="w-4 h-4" />
              </button>
            )}
            {!search && (
              <span className="text-[11px] font-bold text-slate-400 uppercase tracking-widest hidden md:block">
                Press Enter
              </span>
            )}
          </div>
        </div>

        {/* Cart Table */}
        <div className="flex-1 overflow-y-auto bg-white">
          {stockQ.isLoading ? (
            <div className="h-full flex flex-col items-center justify-center gap-3 text-slate-400">
              <div className="w-8 h-8 border-2 border-emerald-500 border-t-transparent rounded-full animate-spin" />
              <p className="text-sm font-semibold">Initializing inventory…</p>
            </div>
          ) : cart.length === 0 ? (
            <div className="h-full flex flex-col items-center justify-center gap-5 text-slate-300 select-none">
              <div className="w-24 h-24 rounded-3xl bg-slate-100 flex items-center justify-center">
                <ShoppingCart className="w-12 h-12 text-slate-300" />
              </div>
              <div className="text-center">
                <p className="font-bold text-slate-400 text-lg">Cart is empty</p>
                <p className="text-sm text-slate-400 mt-1">Scan a barcode or browse products to add items</p>
              </div>
              <button
                onClick={() => setShowManualSearch(true)}
                className="flex items-center gap-2 px-5 py-2.5 bg-slate-900 text-white text-sm font-bold rounded-xl hover:bg-slate-800 transition-colors"
              >
                <Search className="w-4 h-4" /> Browse Products
              </button>
            </div>
          ) : (
            <div className="w-full overflow-x-auto custom-scrollbar">
              <table className="w-full text-left border-collapse min-w-[500px]">
              <thead className="sticky top-0 z-10 bg-slate-50 border-b border-slate-200">
                <tr>
                  <th className="px-5 py-3 text-[11px] font-bold uppercase tracking-wider text-slate-500">Product</th>
                  <th className="px-4 py-3 text-[11px] font-bold uppercase tracking-wider text-slate-500 text-center">Qty</th>
                  <th className="px-4 py-3 text-[11px] font-bold uppercase tracking-wider text-slate-500 text-right">Rate</th>
                  <th className="px-4 py-3 text-[11px] font-bold uppercase tracking-wider text-slate-500 text-right">Disc.</th>
                  <th className="px-4 py-3 text-[11px] font-bold uppercase tracking-wider text-slate-500 text-right">Amount</th>
                  <th className="px-5 py-3 text-[11px] font-bold uppercase tracking-wider text-slate-500 text-center w-20"></th>
                </tr>
              </thead>
              <tbody>
                {cartWithPromos.map((item, idx) => (
                  <tr
                    key={item.id}
                    className={`group border-b border-slate-100 hover:bg-slate-50/80 transition-colors ${item.isRefund ? 'bg-red-50/50' : ''}`}
                  >
                    <td className="px-5 py-3.5">
                      <div className="flex items-start gap-3">
                        <div className="w-8 h-8 rounded-lg bg-slate-100 flex items-center justify-center shrink-0 mt-0.5">
                          <span className="text-[10px] font-black text-slate-500">{idx + 1}</span>
                        </div>
                        <div>
                          <div className="flex items-center gap-2">
                            {item.isRefund && (
                              <span className="px-1.5 py-0.5 bg-red-100 text-red-600 text-[9px] uppercase font-black rounded tracking-wider">
                                Refund
                              </span>
                            )}
                            <span className="font-bold text-slate-900 text-[14px] leading-snug">{item.name}</span>
                          </div>
                          <div className="text-[11px] text-slate-400 font-mono mt-0.5">{item.sku}</div>
                        </div>
                      </div>
                    </td>
                    <td className="px-4 py-3.5 text-center">
                      <div className="inline-flex items-center bg-slate-100 rounded-lg overflow-hidden border border-slate-200">
                        <button
                          onClick={() => updateCartQty(item.id, item.qty - 1)}
                          className="w-8 h-8 flex items-center justify-center text-slate-500 hover:bg-red-50 hover:text-red-500 transition-colors"
                        >
                          <Minus className="w-3.5 h-3.5" />
                        </button>
                        <div className="flex items-center gap-0.5 px-1">
                          <input
                            type="number"
                            step={item.unit === 'kg' ? '0.001' : '1'}
                            value={item.qty}
                            onChange={(e) => updateCartQty(item.id, parseFloat(e.target.value) || 0)}
                            className="w-12 text-center text-sm font-bold text-slate-900 bg-transparent border-none outline-none hide-spin-button"
                          />
                          <span className="text-[10px] font-bold text-slate-400">{item.unit}</span>
                        </div>
                        <button
                          onClick={() => updateCartQty(item.id, item.qty + 1)}
                          disabled={item.qty >= item.maxQty}
                          className="w-8 h-8 flex items-center justify-center text-slate-500 hover:bg-emerald-50 hover:text-emerald-600 transition-colors disabled:opacity-30"
                        >
                          <Plus className="w-3.5 h-3.5" />
                        </button>
                      </div>
                    </td>
                    <td className="px-4 py-3.5 text-right">
                      <span className="font-bold text-slate-700 text-sm">₹{item.price.toFixed(2)}</span>
                      <span className="block text-[10px] text-slate-400">/{item.unit}</span>
                    </td>
                    <td className="px-4 py-3.5 text-right">
                      {item.discountPerItem > 0 || item.hasBogo ? (
                        <div className="flex flex-col items-end gap-1">
                          {item.discountPerItem > 0 && (
                            <span className="text-emerald-600 font-bold text-sm">
                              -₹{(item.discountPerItem * item.qty).toFixed(2)}
                            </span>
                          )}
                          {item.hasBogo && (
                            <span className="text-amber-500 font-bold text-sm">
                              -₹{(item.promoDiscount || 0).toFixed(2)}
                            </span>
                          )}
                          <div className="flex gap-1 flex-wrap justify-end">
                            {item.discountPerItem > 0 && (
                              <span className="flex items-center gap-0.5 text-[9px] font-black text-emerald-700 bg-emerald-100 px-1.5 py-0.5 rounded-md uppercase tracking-wide">
                                {item.couponCode || 'MANUAL'}
                                <button onClick={() => removeCoupon(item.id)} className="ml-0.5 hover:text-red-500">
                                  <X className="w-2.5 h-2.5" />
                                </button>
                              </span>
                            )}
                            {item.hasBogo && (
                              <span className="text-[9px] font-black text-amber-700 bg-amber-100 px-1.5 py-0.5 rounded-md uppercase tracking-wide">
                                BOGO
                              </span>
                            )}
                          </div>
                        </div>
                      ) : (
                        <span className="text-slate-300 text-sm">—</span>
                      )}
                    </td>
                    <td className={`px-4 py-3.5 text-right font-bold text-[15px] ${item.isRefund ? 'text-red-600' : 'text-slate-900'}`}>
                      {item.isRefund ? '-' : ''}₹
                      {(
                        item.price * item.qty -
                        item.discountPerItem * item.qty -
                        (item.promoDiscount || 0)
                      ).toFixed(2)}
                    </td>
                    <td className="px-5 py-3.5 text-center">
                      <div className="flex items-center justify-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                        <button
                          onClick={() => {
                            setDiscountPromptItem(item.id);
                            setCouponCodeInput(item.couponCode || '');
                            setDiscountAmountInput(item.discountPerItem > 0 ? item.discountPerItem.toString() : '');
                          }}
                          className="w-8 h-8 flex items-center justify-center rounded-lg bg-blue-50 text-blue-500 hover:bg-blue-100 transition-colors"
                          title="Apply Discount"
                        >
                          <Tag className="w-3.5 h-3.5" />
                        </button>
                        <button
                          onClick={() => removeCartItem(item.id)}
                          className="w-8 h-8 flex items-center justify-center rounded-lg bg-red-50 text-red-500 hover:bg-red-100 transition-colors"
                          title="Remove"
                        >
                          <Trash2 className="w-3.5 h-3.5" />
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
            </div>
          )}
        </div>

        {/* Cart Footer Summary (visible on mobile) */}
        {cart.length > 0 && (
          <div className="px-5 py-2.5 bg-slate-50 border-t border-slate-200 flex items-center justify-between text-sm lg:hidden">
            <span className="text-slate-500 font-medium">{cart.length} item{cart.length !== 1 ? 's' : ''}</span>
            <span className="font-black text-slate-900 text-lg">₹{grandTotal.toFixed(2)}</span>
          </div>
        )}
      </div>

      {/* ── RIGHT PANEL: Billing ───────────────────────────────────────── */}
      <div className="w-full lg:w-[360px] xl:w-[400px] flex flex-col bg-white border-l border-slate-200 shadow-xl overflow-hidden flex-shrink-0 print:hidden">

        {/* Panel Header */}
        <div className="bg-white border-b border-slate-200 px-5 pt-5 pb-4 text-slate-900">
          <div className="flex items-center justify-between mb-4">
            <div>
              <h2 className="font-black text-lg tracking-tight">Checkout</h2>
              <p className="text-slate-500 text-xs mt-0.5">{dateString} · {timeString}</p>
            </div>
            <div className="flex items-center gap-2">
              {customer ? (
                <div className="bg-slate-50 border border-slate-200 rounded-xl px-3 py-2 text-right">
                  <div className="flex items-center gap-1.5 justify-end">
                    <User className="w-3 h-3 text-blue-500" />
                    <span className="text-xs font-bold text-slate-900">{customer.name || customer.phone}</span>
                    <button onClick={() => setCustomer(null)} className="text-slate-400 hover:text-slate-600 ml-1">
                      <X className="w-3 h-3" />
                    </button>
                  </div>
                  <div className="text-[10px] font-bold text-amber-500 mt-0.5 flex items-center justify-end gap-1">
                    <Zap className="w-2.5 h-2.5" /> {customer.points} pts
                  </div>
                </div>
              ) : (
                <button
                  onClick={() => setShowCustomerPrompt(true)}
                  className="flex items-center gap-1.5 bg-slate-50 hover:bg-slate-100 border border-slate-200 text-slate-700 text-xs font-bold px-3 py-2 rounded-xl transition-colors"
                >
                  <Plus className="w-3.5 h-3.5" /> Customer
                </button>
              )}
            </div>
          </div>

          {/* Item Count */}
          <div className="flex items-center gap-2 text-slate-500 text-xs">
            <ShoppingCart className="w-3.5 h-3.5" />
            <span>{cart.length} item{cart.length !== 1 ? 's' : ''} in cart</span>
          </div>
        </div>

        {/* Order Breakdown */}
        <div className="flex-1 overflow-y-auto px-5 py-5 space-y-1">

          <div className="flex justify-between items-center py-2.5 border-b border-slate-100">
            <span className="text-sm text-slate-600">Subtotal</span>
            <span className="font-bold text-slate-900">₹{subtotal.toFixed(2)}</span>
          </div>

          {totalDiscount > 0 && (
            <div className="flex justify-between items-center py-2.5 border-b border-slate-100">
              <div className="flex items-center gap-1.5 text-emerald-600">
                <Tag className="w-3.5 h-3.5" />
                <span className="text-sm font-bold">Discounts</span>
              </div>
              <span className="font-bold text-emerald-600">-₹{totalDiscount.toFixed(2)}</span>
            </div>
          )}

          <div className="flex justify-between items-center py-2.5 border-b border-slate-100">
            <span className="text-sm text-slate-500">CGST (9%)</span>
            <span className="text-sm font-medium text-slate-700">₹{cgst.toFixed(2)}</span>
          </div>
          <div className="flex justify-between items-center py-2.5 border-b border-slate-100">
            <span className="text-sm text-slate-500">SGST (9%)</span>
            <span className="text-sm font-medium text-slate-700">₹{sgst.toFixed(2)}</span>
          </div>
          <div className="flex justify-between items-center py-2.5">
            <span className="text-sm text-slate-500">Packaging</span>
            <span className="text-sm font-medium text-slate-700">₹{packagingCharge.toFixed(2)}</span>
          </div>

          {cart.length === 0 && (
            <div className="pt-8 text-center text-slate-300">
              <p className="text-xs font-medium">Add items to see totals</p>
            </div>
          )}
        </div>

        {/* Grand Total + Pay */}
        <div className="px-5 pt-4 pb-5 border-t border-slate-200 bg-slate-50 space-y-4">
          <div className="bg-white border border-slate-200 rounded-2xl px-5 py-4 flex items-center justify-between shadow-sm">
            <div>
              <p className="text-slate-500 text-[11px] font-bold uppercase tracking-widest">Grand Total</p>
              <p className="text-slate-900 text-3xl font-black tracking-tight mt-0.5">₹{grandTotal.toFixed(2)}</p>
            </div>
            {grandTotal < 0 && (
              <div className="bg-red-50 text-red-600 text-[10px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-lg border border-red-200">
                Refund Due
              </div>
            )}
          </div>

          <div className="flex gap-2">
            <button
              onClick={clearCart}
              disabled={cart.length === 0}
              className="w-12 h-12 flex items-center justify-center bg-white border border-slate-200 hover:bg-red-50 hover:border-red-200 text-slate-500 hover:text-red-500 rounded-xl transition-all disabled:opacity-40"
            >
              <Trash2 className="w-5 h-5" />
            </button>
            <button
              onClick={handleCheckoutBtn}
              disabled={cart.length === 0 || !customer}
              className="flex-1 h-12 bg-emerald-600 hover:bg-emerald-700 disabled:bg-slate-200 disabled:text-slate-400 text-white rounded-xl font-black text-lg transition-all shadow-lg shadow-emerald-600/25 disabled:shadow-none flex items-center justify-center gap-2 active:scale-[0.98]"
            >
              PAY <ChevronRight className="w-5 h-5" />
            </button>
          </div>
        </div>
      </div>

      {/* ── MODAL: Manual Product Search ──────────────────────────────── */}
      {showManualSearch && (
        <div className="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-50 flex items-center justify-center p-4 print:hidden">
          <div className="bg-white rounded-2xl shadow-2xl overflow-hidden flex flex-col max-h-[85vh] animate-in zoom-in-95 duration-200" style={{ width: '100%', maxWidth: '500px' }}>
            <div className="flex items-center justify-between px-5 py-4 border-b border-slate-100">
              <h3 className="font-bold text-slate-900 flex items-center gap-2">
                <Search className="w-5 h-5 text-indigo-500" /> Product Search
              </h3>
              <button onClick={() => setShowManualSearch(false)} className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-100 text-slate-400">
                <X className="w-4 h-4" />
              </button>
            </div>
            <div className="px-5 py-3 border-b border-slate-100">
              <input
                type="text"
                placeholder="Search by name, SKU…"
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                autoFocus
                className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm font-medium text-slate-800 outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-400/20 transition-all"
              />
            </div>
            <div className="flex-1 overflow-y-auto">
              {inventory
                .filter(
                  (p) =>
                    !search ||
                    p.name.toLowerCase().includes(search.toLowerCase()) ||
                    p.sku.toLowerCase().includes(search.toLowerCase())
                )
                .map((product) => (
                  <button
                    key={product.id}
                    disabled={product.closing <= 0}
                    onClick={() => { handleProductScanned(product); setSearch(''); }}
                    className="w-full text-left px-5 py-3.5 flex justify-between items-center border-b border-slate-100 hover:bg-slate-50 transition-colors disabled:opacity-40 disabled:cursor-not-allowed group"
                  >
                    <div>
                      <p className="font-bold text-slate-900 text-sm">{product.name}</p>
                      <p className="text-[11px] text-slate-400 font-mono mt-0.5">SKU: {product.sku}</p>
                    </div>
                    <div className="text-right">
                      <p className="font-bold text-emerald-600 text-sm">₹{product.price.toFixed(2)}/{product.unit}</p>
                      <p className={`text-[11px] font-bold mt-0.5 ${product.closing <= 5 ? 'text-amber-500' : 'text-slate-400'}`}>
                        {product.closing <= 0 ? 'Out of stock' : `${product.closing} in stock`}
                      </p>
                    </div>
                  </button>
                ))}
            </div>
          </div>
        </div>
      )}

      {/* ── MODAL: Customer CRM ───────────────────────────────────────── */}
      {showCustomerPrompt && (
        <div className="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-50 flex items-center justify-center p-4 print:hidden">
          <div className="bg-white rounded-2xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200" style={{ width: '100%', maxWidth: '400px' }}>
            <div className="px-6 pt-6 pb-5">
              <div className="flex justify-between items-start mb-5">
                <div className="w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center">
                  <User className="w-6 h-6 text-blue-500" />
                </div>
                <button onClick={closeCustomerPrompt} className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-100 text-slate-400">
                  <X className="w-4 h-4" />
                </button>
              </div>
              <h3 className="font-bold text-xl text-slate-900 mb-1">{isNewCustomer ? 'New Customer' : 'Attach Customer'}</h3>
              <p className="text-sm text-slate-500 mb-5">{isNewCustomer ? "Please enter the customer's name." : 'Enter mobile number to retrieve loyalty profile.'}</p>
              
              <input
                type="tel"
                placeholder="e.g. 9876543210"
                value={customerPhoneInput}
                onChange={(e) => setCustomerPhoneInput(e.target.value)}
                onKeyDown={(e) => e.key === 'Enter' && !isNewCustomer && checkCustomerPhone()}
                disabled={isNewCustomer}
                className={`w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl font-bold text-slate-800 outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-400/20 transition-all ${isNewCustomer ? 'opacity-50 mb-3' : 'mb-4'}`}
                autoFocus={!isNewCustomer}
              />

              {isNewCustomer && (
                <input
                  type="text"
                  placeholder="Customer Name"
                  value={customerNameInput}
                  onChange={(e) => setCustomerNameInput(e.target.value)}
                  onKeyDown={(e) => e.key === 'Enter' && saveNewCustomer()}
                  className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl font-bold text-slate-800 outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-400/20 transition-all mb-4"
                  autoFocus
                />
              )}

              {isNewCustomer ? (
                <button
                  onClick={saveNewCustomer}
                  disabled={!customerNameInput.trim()}
                  className="w-full py-3 bg-blue-600 hover:bg-blue-700 disabled:bg-slate-200 disabled:text-slate-400 text-white rounded-xl font-bold transition-colors"
                >
                  Save & Attach
                </button>
              ) : (
                <button
                  onClick={checkCustomerPhone}
                  disabled={customerPhoneInput.length < 10}
                  className="w-full py-3 bg-blue-600 hover:bg-blue-700 disabled:bg-slate-200 disabled:text-slate-400 text-white rounded-xl font-bold transition-colors"
                >
                  Find & Attach
                </button>
              )}
            </div>
          </div>
        </div>
      )}

      {/* ── MODAL: Parked Carts ───────────────────────────────────────── */}
      {showParkedPrompt && (
        <div className="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-50 flex items-center justify-center p-4 print:hidden">
          <div className="bg-white rounded-2xl shadow-2xl overflow-hidden flex flex-col max-h-[80vh] animate-in zoom-in-95 duration-200" style={{ width: '100%', maxWidth: '450px' }}>
            <div className="flex items-center justify-between px-5 py-4 border-b border-slate-100">
              <h3 className="font-bold text-slate-900 flex items-center gap-2">
                <Download className="w-5 h-5 text-blue-500" /> Parked Sales
              </h3>
              <button onClick={() => setShowParkedPrompt(false)} className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-100 text-slate-400">
                <X className="w-4 h-4" />
              </button>
            </div>
            <div className="flex-1 overflow-y-auto p-4 space-y-2">
              {parkedCarts.length === 0 ? (
                <div className="text-center py-12 text-slate-400">
                  <Save className="w-10 h-10 mx-auto mb-3 opacity-30" />
                  <p className="text-sm font-medium">No parked sales</p>
                </div>
              ) : (
                parkedCarts.map((pc) => (
                  <div key={pc.id} className="bg-slate-50 border border-slate-200 rounded-xl p-4 flex justify-between items-center hover:border-blue-200 transition-colors">
                    <div>
                      <p className="font-bold text-slate-900 text-sm">{pc.id}</p>
                      <p className="text-xs text-slate-500 mt-0.5">
                        {new Date(pc.time).toLocaleTimeString()} · {pc.cart.length} items · {pc.customer ? pc.customer.phone : 'Guest'}
                      </p>
                    </div>
                    <button
                      onClick={() => retrieveCart(pc)}
                      className="px-4 py-2 bg-blue-600 text-white text-sm font-bold rounded-lg hover:bg-blue-700 transition-colors"
                    >
                      Retrieve
                    </button>
                  </div>
                ))
              )}
            </div>
          </div>
        </div>
      )}

      {/* ── MODAL: Discount ───────────────────────────────────────────── */}
      {discountPromptItem && (
        <div className="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-50 flex items-center justify-center p-4 print:hidden">
          <div className="bg-white rounded-2xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200" style={{ width: '100%', maxWidth: '400px' }}>
            <div className="px-6 pt-6 pb-5">
              <div className="flex justify-between items-start mb-5">
                <div className="w-12 h-12 bg-emerald-50 rounded-xl flex items-center justify-center">
                  <Tag className="w-6 h-6 text-emerald-600" />
                </div>
                <button onClick={() => setDiscountPromptItem(null)} className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-100 text-slate-400">
                  <X className="w-4 h-4" />
                </button>
              </div>
              <h3 className="font-bold text-xl text-slate-900 mb-1">Apply Discount</h3>
              <p className="text-sm text-slate-500 mb-5">Enter a manual discount or attach a coupon code.</p>
              <div className="space-y-3 mb-5">
                <div>
                  <label className="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">
                    Discount Amount (₹)
                  </label>
                  <input
                    type="number"
                    placeholder="0.00"
                    value={discountAmountInput}
                    onChange={(e) => setDiscountAmountInput(e.target.value)}
                    onKeyDown={(e) => e.key === 'Enter' && applyDiscountToItem()}
                    className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl font-bold text-slate-800 outline-none focus:border-emerald-400 focus:ring-2 focus:ring-emerald-400/20 transition-all"
                    autoFocus
                  />
                </div>
                <div>
                  <label className="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">
                    Coupon Code (optional)
                  </label>
                  <input
                    type="text"
                    placeholder="e.g. OFF10"
                    value={couponCodeInput}
                    onChange={(e) => setCouponCodeInput(e.target.value.toUpperCase())}
                    onKeyDown={(e) => e.key === 'Enter' && applyDiscountToItem()}
                    className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl font-bold text-slate-800 uppercase outline-none focus:border-emerald-400 focus:ring-2 focus:ring-emerald-400/20 transition-all"
                  />
                </div>
              </div>
              <button
                onClick={applyDiscountToItem}
                className="w-full py-3 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl font-bold transition-colors"
              >
                Confirm Discount
              </button>
            </div>
          </div>
        </div>
      )}

      {/* ── MODAL: Payment ────────────────────────────────────────────── */}
      {showPayment && (
        <div className="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-50 flex items-center justify-center p-4 print:hidden">
          <div className="bg-white rounded-2xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200" style={{ width: '100%', maxWidth: '450px' }}>
            {/* Header */}
            <div className="bg-white border-b border-slate-200 px-6 py-5 text-slate-900 flex items-start justify-between">
              <div>
                <p className="text-slate-500 text-xs font-bold uppercase tracking-widest mb-1">
                  {grandTotal < 0 ? 'Refund Due' : 'Amount Due'}
                </p>
                <p className="text-4xl font-black tracking-tight text-slate-900">₹{Math.abs(grandTotal).toFixed(2)}</p>
              </div>
              <button onClick={() => setShowPayment(false)} className="w-8 h-8 flex items-center justify-center rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-500 mt-1">
                <X className="w-4 h-4" />
              </button>
            </div>

            <div className="p-6 space-y-5">
              {/* Payment Method Tabs */}
              <div>
                <p className="text-[11px] font-bold text-slate-400 uppercase tracking-wider mb-2.5">Payment Method</p>
                <div className="grid grid-cols-3 gap-2">
                  {(grandTotal >= 0 ? ['cash', 'upi', 'card'] : ['cash', 'store_credit']).map((m) => {
                    const icons: Record<string, React.ReactNode> = {
                      cash: <Wallet className="w-4 h-4" />,
                      upi: <Smartphone className="w-4 h-4" />,
                      card: <CreditCard className="w-4 h-4" />,
                      store_credit: <User className="w-4 h-4" />,
                    };
                    const labels: Record<string, string> = {
                      cash: 'Cash', upi: 'UPI', card: 'Card', store_credit: 'Store Credit',
                    };
                    return (
                      <button
                        key={m}
                        onClick={() => setPayMethod(m as any)}
                        className={`flex flex-col items-center gap-1.5 py-3 rounded-xl border-2 font-bold text-sm transition-all ${
                          payMethod === m
                            ? 'border-emerald-500 bg-emerald-50 text-emerald-700'
                            : 'border-slate-200 bg-slate-50 text-slate-500 hover:border-slate-300'
                        }`}
                      >
                        {icons[m]}
                        <span className="text-[11px]">{labels[m]}</span>
                      </button>
                    );
                  })}
                </div>
              </div>

              {/* Cash Payment */}
              {payMethod === 'cash' && grandTotal >= 0 && (
                <div className="space-y-4 animate-in slide-in-from-bottom-2 duration-200">
                  <div>
                    <label className="block text-[11px] font-bold text-slate-400 uppercase tracking-wider mb-2">
                      Cash Received
                    </label>
                    <input
                      type="number"
                      value={cashReceived}
                      onChange={(e) => setCashReceived(e.target.value)}
                      className="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl font-black text-2xl text-slate-900 outline-none focus:border-emerald-400 focus:ring-2 focus:ring-emerald-400/20 transition-all text-right"
                      placeholder="0.00"
                      autoFocus
                    />
                  </div>
                  {/* Quick denominations */}
                  <div>
                    <p className="text-[11px] font-bold text-slate-400 uppercase tracking-wider mb-2">Quick Select</p>
                    <div className="flex flex-wrap gap-1.5">
                      {cashDenominations
                        .filter((d) => d >= grandTotal * 0.5)
                        .slice(0, 6)
                        .map((d) => (
                          <button
                            key={d}
                            onClick={() => setCashReceived(d.toString())}
                            className={`px-3 py-1.5 rounded-lg text-xs font-bold border transition-colors ${
                              parseFloat(cashReceived) === d
                                ? 'bg-slate-900 text-white border-slate-900'
                                : 'bg-slate-50 text-slate-700 border-slate-200 hover:border-slate-400'
                            }`}
                          >
                            ₹{d}
                          </button>
                        ))}
                      <button
                        onClick={() => setCashReceived(Math.ceil(grandTotal).toString())}
                        className="px-3 py-1.5 rounded-lg text-xs font-bold border bg-emerald-50 text-emerald-700 border-emerald-200 hover:bg-emerald-100"
                      >
                        Exact
                      </button>
                    </div>
                  </div>
                  {cashReceived && parseFloat(cashReceived) >= grandTotal && (
                    <div className="flex justify-between items-center bg-emerald-50 border border-emerald-100 rounded-xl px-4 py-3">
                      <span className="text-sm font-bold text-emerald-700">Change Due</span>
                      <span className="text-2xl font-black text-emerald-700">₹{changeAmt.toFixed(2)}</span>
                    </div>
                  )}
                </div>
              )}

              {/* Cash Refund */}
              {payMethod === 'cash' && grandTotal < 0 && (
                <div className="text-center p-6 border-2 border-dashed border-red-200 bg-red-50 rounded-xl animate-in slide-in-from-bottom-2 duration-200">
                  <p className="text-sm font-bold text-red-600 mb-1">Return Cash to Customer</p>
                  <p className="text-3xl font-black text-red-700">₹{Math.abs(grandTotal).toFixed(2)}</p>
                </div>
              )}

              {/* Store Credit */}
              {payMethod === 'store_credit' && grandTotal < 0 && (
                <div className="animate-in slide-in-from-bottom-2 duration-200">
                  {customer ? (
                    <div className="text-center p-5 border-2 border-dashed border-blue-200 bg-blue-50 rounded-xl">
                      <User className="w-8 h-8 text-blue-500 mx-auto mb-2" />
                      <p className="text-sm font-bold text-blue-700">Credit to: <span className="text-blue-900">{customer.phone}</span></p>
                    </div>
                  ) : (
                    <div className="text-center p-5 border-2 border-dashed border-red-200 bg-red-50 rounded-xl">
                      <AlertCircle className="w-8 h-8 text-red-500 mx-auto mb-2" />
                      <p className="text-sm font-bold text-red-600 mb-3">Attach a customer to issue Store Credit</p>
                      <button
                        onClick={() => { setShowPayment(false); setShowCustomerPrompt(true); }}
                        className="px-4 py-2 bg-red-600 text-white rounded-lg text-sm font-bold hover:bg-red-700"
                      >
                        Add Customer
                      </button>
                    </div>
                  )}
                </div>
              )}

              {/* UPI */}
              {payMethod === 'upi' && grandTotal >= 0 && (
                <div className="text-center space-y-3 animate-in slide-in-from-bottom-2 duration-200">
                  <div className="w-36 h-36 bg-slate-100 rounded-2xl mx-auto border-2 border-dashed border-slate-300 flex items-center justify-center">
                    <QrCode className="w-14 h-14 text-slate-400" />
                  </div>
                  <p className="text-sm font-bold text-slate-600">Scan QR Code to Pay</p>
                  <p className="text-xs text-slate-400">Awaiting payment confirmation…</p>
                </div>
              )}

              {/* Card */}
              {payMethod === 'card' && grandTotal >= 0 && (
                <div className="text-center p-8 border-2 border-dashed border-slate-200 rounded-xl animate-in slide-in-from-bottom-2 duration-200">
                  <CreditCard className="w-12 h-12 text-slate-300 mx-auto mb-3" />
                  <p className="font-bold text-slate-600">Tap, swipe or insert card</p>
                  <p className="text-xs text-slate-400 mt-1">Waiting for terminal…</p>
                </div>
              )}

              <button
                onClick={confirmPayment}
                disabled={payMethod === 'store_credit' && !customer}
                className="w-full py-4 bg-emerald-600 hover:bg-emerald-700 disabled:bg-slate-200 disabled:text-slate-400 text-white rounded-xl font-black text-lg transition-all shadow-lg shadow-emerald-600/25 disabled:shadow-none"
              >
                Confirm {grandTotal < 0 ? 'Refund' : 'Payment'}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* ── MODAL: Receipt ────────────────────────────────────────────── */}
      {showReceipt && (
        <div className="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-50 flex items-center justify-center p-4 print:static print:bg-white print:block print:p-0">
          <div className="bg-white rounded-2xl shadow-2xl overflow-hidden print:shadow-none print:max-w-none print:w-[300px]" style={{ width: '100%', maxWidth: '400px' }}>
            <div className="px-5 py-4 border-b border-slate-100 flex justify-between items-center bg-slate-50 print:hidden">
              <h3 className="font-bold text-slate-900 flex items-center gap-2">
                <Receipt className="w-4 h-4" /> Receipt
              </h3>
              <button onClick={resetPos} className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-100 text-slate-400">
                <X className="w-4 h-4" />
              </button>
            </div>

            <div className="p-6 font-mono text-sm text-black print:p-0">
              <div className="text-center mb-6">
                <h2 className="text-lg font-black">Departmental Store</h2>
                <p className="text-xs text-slate-500 mt-1">GSTIN: 29ABCDE1234F1Z5</p>
                <p className="text-xs text-slate-500">{new Date().toLocaleString('en-IN')}</p>
              </div>
              <div className="border-t border-dashed border-slate-300 my-4" />
              <div className="space-y-3">
                {cartWithPromos.map((item) => (
                  <div key={item.id} className="text-xs">
                    <div className="font-bold text-sm flex items-center gap-1">
                      {item.isRefund && <span className="text-red-600">REFUND</span>} {item.name}
                    </div>
                    <div className="flex justify-between text-slate-600 mt-0.5">
                      <span>{item.qty} {item.unit} × ₹{item.price.toFixed(2)}</span>
                      <span className={item.isRefund ? 'text-red-600' : ''}>{item.isRefund ? '-' : ''}₹{(item.price * item.qty).toFixed(2)}</span>
                    </div>
                    {(item.discountPerItem > 0 || item.hasBogo) && (
                      <div className="flex justify-between font-bold">
                        <span>Discount {item.couponCode ? `(${item.couponCode})` : item.hasBogo ? '(BOGO)' : ''}</span>
                        <span>-₹{((item.discountPerItem * item.qty) + (item.promoDiscount || 0)).toFixed(2)}</span>
                      </div>
                    )}
                  </div>
                ))}
              </div>
              <div className="border-t border-dashed border-slate-300 my-4" />
              <div className="space-y-1 text-xs">
                <div className="flex justify-between"><span>Subtotal</span><span>₹{subtotal.toFixed(2)}</span></div>
                <div className="flex justify-between"><span>Discounts</span><span>-₹{totalDiscount.toFixed(2)}</span></div>
                <div className="flex justify-between"><span>CGST (9%)</span><span>₹{cgst.toFixed(2)}</span></div>
                <div className="flex justify-between"><span>SGST (9%)</span><span>₹{sgst.toFixed(2)}</span></div>
                <div className="flex justify-between"><span>Packaging</span><span>₹{packagingCharge.toFixed(2)}</span></div>
                <div className="flex justify-between font-bold text-sm mt-2 pt-2 border-t border-dashed border-slate-300">
                  <span>Grand Total</span><span>₹{grandTotal.toFixed(2)}</span>
                </div>
                <div className="flex justify-between mt-1">
                  <span>{grandTotal < 0 ? 'Refund via' : 'Paid via'}</span>
                  <span className="uppercase font-bold">{payMethod.replace('_', ' ')}</span>
                </div>
              </div>
              <div className="border-t border-dashed border-slate-300 my-4" />
              <div className="text-center text-xs font-bold">Thank you for shopping! 🛍</div>
            </div>

            <div className="px-5 py-4 border-t border-slate-100 bg-slate-50 flex gap-3 print:hidden">
              <button onClick={resetPos} className="flex-1 py-3 bg-white border border-slate-200 text-slate-700 rounded-xl font-bold hover:bg-slate-50 transition-colors">
                New Sale
              </button>
              <button
                onClick={() => window.print()}
                className="flex-1 py-3 bg-slate-900 text-white rounded-xl font-bold flex items-center justify-center gap-2 hover:bg-slate-800 transition-colors"
              >
                <Receipt className="w-4 h-4" /> Print
              </button>
            </div>
          </div>
        </div>
      )}

      {/* ── MODAL: Daily Report ───────────────────────────────────────── */}
      {showReport && (
        <div className="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-50 flex items-center justify-center p-4 print:hidden">
          <div className="bg-white rounded-2xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200" style={{ width: '100%', maxWidth: '450px' }}>
            <div className="flex items-center justify-between px-5 py-4 border-b border-slate-100">
              <h3 className="font-bold text-slate-900 flex items-center gap-2">
                <PieChart className="w-5 h-5 text-emerald-500" /> Daily Sales Report
              </h3>
              <button onClick={() => setShowReport(false)} className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-100 text-slate-400">
                <X className="w-4 h-4" />
              </button>
            </div>

            <div className="p-5 max-h-[70vh] overflow-y-auto space-y-5">
              <div className="grid grid-cols-3 gap-3">
                <div className="col-span-3 bg-white border border-slate-200 rounded-xl px-4 py-3 flex items-center justify-between shadow-sm">
                  <span className="text-slate-500 text-[11px] font-bold uppercase tracking-wider">Total Revenue</span>
                  <span className="text-slate-900 text-2xl font-black">₹{dailyReport.sales.toFixed(2)}</span>
                </div>
                <div className="bg-slate-50 rounded-xl px-3 py-3 border border-slate-100">
                  <p className="text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1">Transactions</p>
                  <p className="text-xl font-black text-slate-900">{dailyReport.tx}</p>
                </div>
                <div className="bg-slate-50 rounded-xl px-3 py-3 border border-slate-100">
                  <p className="text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1">GST</p>
                  <p className="text-xl font-black text-slate-900">₹{dailyReport.gst.toFixed(2)}</p>
                </div>
                <div className="bg-slate-50 rounded-xl px-3 py-3 border border-slate-100">
                  <p className="text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1">Avg. Bill</p>
                  <p className="text-xl font-black text-slate-900">
                    ₹{dailyReport.tx > 0 ? (dailyReport.sales / dailyReport.tx).toFixed(0) : '0'}
                  </p>
                </div>
              </div>

              <div>
                <p className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2.5">Payment Split</p>
                {dailyReport.sales > 0 ? (
                  <>
                    <div className="h-2.5 rounded-full flex overflow-hidden bg-slate-100 mb-3">
                      {dailyReport.cash > 0 && (
                        <div style={{ width: `${(dailyReport.cash / dailyReport.sales) * 100}%` }} className="bg-emerald-500" />
                      )}
                      {dailyReport.upi > 0 && (
                        <div style={{ width: `${(dailyReport.upi / dailyReport.sales) * 100}%` }} className="bg-blue-500" />
                      )}
                      {dailyReport.card > 0 && (
                        <div style={{ width: `${(dailyReport.card / dailyReport.sales) * 100}%` }} className="bg-amber-500" />
                      )}
                    </div>
                    <div className="grid grid-cols-3 gap-2">
                      {[
                        { key: 'cash', label: 'Cash', color: 'bg-emerald-500', val: dailyReport.cash },
                        { key: 'upi', label: 'UPI', color: 'bg-blue-500', val: dailyReport.upi },
                        { key: 'card', label: 'Card', color: 'bg-amber-500', val: dailyReport.card },
                      ].map((p) => (
                        <div key={p.key} className="bg-slate-50 rounded-lg p-2.5 border border-slate-100">
                          <div className={`w-2.5 h-2.5 rounded-full ${p.color} mb-1.5`} />
                          <p className="text-[10px] font-bold text-slate-500 uppercase">{p.label}</p>
                          <p className="font-black text-slate-900 text-sm">₹{p.val.toFixed(0)}</p>
                        </div>
                      ))}
                    </div>
                  </>
                ) : (
                  <div className="text-center py-4 text-slate-400 text-sm bg-slate-50 rounded-xl">
                    No transactions recorded today.
                  </div>
                )}
              </div>

              <div>
                <p className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2.5">Top Products</p>
                {Object.keys(dailyReport.products || {}).length > 0 ? (
                  <div className="space-y-1.5 max-h-48 overflow-y-auto">
                    {Object.entries(dailyReport.products)
                      .sort(([, a], [, b]) => (b as number) - (a as number))
                      .map(([name, qty]) => (
                        <div key={name} className="flex justify-between items-center bg-slate-50 border border-slate-100 rounded-lg px-3.5 py-2.5">
                          <span className="text-sm font-medium text-slate-700 truncate pr-3">{name}</span>
                          <span className="font-bold text-emerald-700 text-sm shrink-0 bg-emerald-50 px-2 py-0.5 rounded-md">
                            {Number(qty).toFixed(2)} sold
                          </span>
                        </div>
                      ))}
                  </div>
                ) : (
                  <div className="text-center py-4 text-slate-400 text-sm bg-slate-50 rounded-xl">
                    No products sold yet.
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
