'use client';

import { useEffect, useMemo, useState, type ReactNode } from 'react';
import {
  Plus,
  RefreshCw,
  Search,
  Eye,
  CheckCircle2,
  Trash2,
  ShoppingCart,
  Barcode,
  Printer,
  FileText,
  User,
  MapPin,
} from 'lucide-react';
import { toast } from 'sonner';
import { format } from 'date-fns';
import { apiFetch } from '@/services/api/client';
import { SlideOver } from '@/components/ui/SlideOver';
import { CustomSelect } from '@/components/ui/CustomSelect';
import { TablePagination, useClientPagination } from '@/components/ui/TablePagination';

interface OrderItemDetail {
  product_id: string;
  variant_id: string;
  product_name: string;
  sku: string;
  unit_price: number;
  quantity: number;
  total_price: number;
}

interface StatusHistorySchema {
  previous_status: string | null;
  new_status: string;
  changed_by: string;
  reason: string | null;
  created_at: string;
}

interface AdminOrderDetailResponse {
  order_id: string;
  order_no: string;
  customer_id: string | null;
  customer_email: string | null;
  customer_name: string | null;
  total_amount: number;
  discount_amount: number;
  tax_amount: number;
  shipping_cost: number;
  final_amount: number;
  status: string;
  payment_status: string;
  fulfillment_status: string;
  shipping_address_json: string | null;
  billing_address_json: string | null;
  tracking_number: string | null;
  courier_name: string | null;
  created_at: string;
  items: OrderItemDetail[];
  history: StatusHistorySchema[];
}

function renderFormattedAddress(addressJsonStr: string | null | undefined): ReactNode {
  if (!addressJsonStr) return null;
  const str = String(addressJsonStr).trim();
  if (str.startsWith('{') && str.endsWith('}')) {
    try {
      const parsed = JSON.parse(str);
      if (parsed && typeof parsed === 'object') {
        const { full_name, phone, street_address, address_line1, address_line2, city, state, pincode, postal_code, country, address_type } = parsed;
        const street = street_address || address_line1 || address_line2 || '';
        const zip = pincode || postal_code || '';
        const name = full_name || '';
        const location = [street, city, state, zip, country].filter(Boolean).join(', ');

        return (
          <div className="space-y-0.5 text-[12px] leading-snug text-foreground">
            {name && <p className="font-semibold text-foreground">{name}</p>}
            {phone && <p className="text-muted-foreground text-[11px]">Phone: {phone}</p>}
            {location && <p className="text-muted-foreground">{location}</p>}
            {address_type && (
              <span className="inline-block mt-1 px-1.5 py-0.5 text-[9px] font-semibold uppercase bg-muted text-muted-foreground crm-radius-badge">
                {address_type}
              </span>
            )}
          </div>
        );
      }
    } catch {
      // fallback
    }
  }
  return <p className="text-[12px] text-muted-foreground whitespace-pre-wrap">{str}</p>;
}

interface AdminOrderListResponse {
  order_id: string;
  order_no: string;
  customer_email: string | null;
  customer_name?: string | null;
  customer_phone?: string | null;
  final_amount: number;
  status: string;
  payment_status: string;
  created_at: string;
}

type StatusFilter = 'all' | 'open' | 'shipped' | 'delivered' | 'cancelled';

function formatOrderDate(iso: string) {
  const normalized = iso.endsWith('Z') || iso.includes('+') ? iso : `${iso}Z`;
  const date = new Date(normalized);
  if (Number.isNaN(date.getTime())) return iso;
  return format(date, 'dd-MMM-yyyy HH:mm');
}

function statusKey(status?: string) {
  return (status || '').toUpperCase();
}

function isOpenStatus(status?: string) {
  const s = statusKey(status);
  return s === 'PENDING' || s === 'CONFIRMED' || s === 'PROCESSING';
}

function isShippedStatus(status?: string) {
  const s = statusKey(status);
  return s === 'SHIPPED' || s === 'OUT_FOR_DELIVERY';
}

function isDeliveredStatus(status?: string) {
  return statusKey(status) === 'DELIVERED';
}

function isCancelledStatus(status?: string) {
  return statusKey(status) === 'CANCELLED';
}

function statusBadgeClass(status?: string) {
  if (isDeliveredStatus(status)) return 'bg-success text-white';
  if (isCancelledStatus(status)) return 'bg-destructive text-white';
  if (isShippedStatus(status)) return 'bg-primary text-white';
  return 'bg-warning text-white';
}

export default function OrderIntelligencePage() {
  const [orders, setOrders] = useState<AdminOrderListResponse[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState('');
  const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');

  const [selectedOrderId, setSelectedOrderId] = useState<string | null>(null);
  const [detailData, setDetailData] = useState<AdminOrderDetailResponse | null>(null);
  const [detailLoading, setDetailLoading] = useState(false);

  const [barcodeInput, setBarcodeInput] = useState('');
  const [verifiedItems, setVerifiedItems] = useState<string[]>([]);
  const [showStatusForm, setShowStatusForm] = useState(false);
  const [newStatus, setNewStatus] = useState('PROCESSING');
  const [trackingNo, setTrackingNo] = useState('');
  const [courier, setCourier] = useState('');
  const [changeReason, setChangeReason] = useState('');
  const [updating, setUpdating] = useState(false);

  const [showCreateOrderModal, setShowCreateOrderModal] = useState(false);
  const [buyerName, setBuyerName] = useState('');
  const [buyerEmail, setBuyerEmail] = useState('');
  const [buyerPhone, setBuyerPhone] = useState('');
  const [shippingAddress, setShippingAddress] = useState('');
  const [productsList, setProductsList] = useState<any[]>([]);
  const [categoriesList, setCategoriesList] = useState<any[]>([]);
  const [brandsList, setBrandsList] = useState<any[]>([]);
  const [selectedCategoryId, setSelectedCategoryId] = useState('');
  const [selectedBrandId, setSelectedBrandId] = useState('');
  const [selectedProductId, setSelectedProductId] = useState('');
  const [skuOptions, setSkuOptions] = useState<any[]>([]);
  const [skuLoading, setSkuLoading] = useState(false);
  const [tempSkuId, setTempSkuId] = useState('');
  const [tempQty, setTempQty] = useState(1);
  const [tempPrice, setTempPrice] = useState(0);
  const [selectedItems, setSelectedItems] = useState<any[]>([]);
  const [paymentStatus, setPaymentStatus] = useState('PAID');
  const [paymentMethod, setPaymentMethod] = useState('CASH');
  const [digitalMethod, setDigitalMethod] = useState<'UPI' | 'CARD'>('UPI');
  const [cashPaidAmount, setCashPaidAmount] = useState<number>(0);
  const [posSuccessData, setPosSuccessData] = useState<any | null>(null);

  const effectiveItems = useMemo(() => {
    if (selectedItems.length > 0) return selectedItems;
    if (selectedProductId && tempSkuId) {
      const itemOpt = skuOptions.find((opt) => opt.variant_id === tempSkuId);
      if (itemOpt) {
        const prodObj = productsList.find((p) => p.product_id === selectedProductId);
        return [
          {
            variant_id: itemOpt.variant_id,
            product_name: prodObj?.name || itemOpt.product_name || 'Product item',
            sku: itemOpt.sku,
            quantity: Number(tempQty || 1),
            unit_price: Number(tempPrice || itemOpt.price || 0),
          },
        ];
      }
    }
    return [];
  }, [selectedItems, selectedProductId, tempSkuId, skuOptions, tempQty, tempPrice, productsList]);

  const calculateOrderTotalWithTax = useMemo(() => {
    const subtotal = effectiveItems.reduce((acc, item) => acc + item.quantity * item.unit_price, 0);
    const tax = (subtotal * 18) / 100;
    return subtotal + tax;
  }, [effectiveItems]);

  const calculatedDigitalAmount = useMemo(() => {
    if (paymentMethod === 'MIXED_PAYMENT') {
      return Math.max(0, calculateOrderTotalWithTax - Number(cashPaidAmount || 0));
    }
    if (paymentMethod === 'UPI' || paymentMethod === 'CARD') {
      return calculateOrderTotalWithTax;
    }
    return 0;
  }, [paymentMethod, calculateOrderTotalWithTax, cashPaidAmount]);

  const loadRazorpayScript = (): Promise<boolean> => {
    return new Promise((resolve) => {
      if ((window as any).Razorpay) {
        resolve(true);
        return;
      }
      const script = document.createElement('script');
      script.src = 'https://checkout.razorpay.com/v1/checkout.js';
      script.onload = () => resolve(true);
      script.onerror = () => resolve(false);
      document.body.appendChild(script);
    });
  };

  const fetchCatalogProductsAndSkus = async () => {
    setSkuLoading(true);
    try {
      const [catRes, skuRes, categoriesRes, brandsRes] = await Promise.all([
        apiFetch<any>('/api/v1/catalog/products/all?limit=200').catch(() => []),
        apiFetch<{ items: any[] }>('/api/v1/inventory/skus?limit=150').catch(() => ({ items: [] })),
        apiFetch<any>('/api/v1/catalog/categories/all').catch(() => []),
        apiFetch<any>('/api/v1/catalog/brands/all').catch(() => []),
      ]);

      const prodsList = Array.isArray(catRes) ? catRes : catRes?.products || [];
      setProductsList(prodsList);

      const catsList = Array.isArray(categoriesRes) ? categoriesRes : categoriesRes?.items || [];
      setCategoriesList(catsList);

      const brsList = Array.isArray(brandsRes) ? brandsRes : brandsRes?.items || [];
      setBrandsList(brsList);

      const itemsMap = new Map<string, any>();
      if (skuRes && skuRes.items) {
        skuRes.items.forEach((item: any) => {
          itemsMap.set(item.variant_id, item);
        });
      }

      prodsList.forEach((prod: any) => {
        if (prod.variants && prod.variants.length > 0) {
          prod.variants.forEach((v: any) => {
            if (!itemsMap.has(v.variant_id)) {
              const attrVals = (v.attributes || []).map((a: any) => a.attribute_value).join(' / ');
              itemsMap.set(v.variant_id, {
                variant_id: v.variant_id,
                product_id: prod.product_id,
                product_name: prod.name,
                variant_name: attrVals || v.sku,
                sku: v.sku,
                barcode: v.barcode || '',
                price: Number(v.price),
                available_stock: v.available_stock || 0,
              });
            }
          });
        }
      });

      setSkuOptions(Array.from(itemsMap.values()));
    } catch {
      toast.error('Failed to load sellable products catalog');
    } finally {
      setSkuLoading(false);
    }
  };

  const availableCategoriesOptions = useMemo(() => {
    if (categoriesList.length > 0) {
      return categoriesList.map((c) => ({
        value: c.category_id,
        label: c.name,
      }));
    }
    const map = new Map<string, string>();
    productsList.forEach((p) => {
      if (p.category_id) {
        map.set(p.category_id, p.category_name || p.category?.name || 'Category');
      }
    });
    return Array.from(map.entries()).map(([id, name]) => ({ value: id, label: name }));
  }, [categoriesList, productsList]);

  const availableBrandsOptions = useMemo(() => {
    const filteredProducts = selectedCategoryId
      ? productsList.filter((p) => p.category_id === selectedCategoryId)
      : productsList;

    const brandIdsInFilteredProducts = new Set(filteredProducts.map((p) => p.brand_id).filter(Boolean));

    if (brandsList.length > 0) {
      return brandsList
        .filter((b) => !selectedCategoryId || brandIdsInFilteredProducts.has(b.brand_id))
        .map((b) => ({
          value: b.brand_id,
          label: b.name,
        }));
    }

    const map = new Map<string, string>();
    filteredProducts.forEach((p) => {
      if (p.brand_id) {
        map.set(p.brand_id, p.brand_name || p.brand?.name || 'Brand');
      }
    });
    return Array.from(map.entries()).map(([id, name]) => ({ value: id, label: name }));
  }, [brandsList, productsList, selectedCategoryId]);

  const availableProductsOptions = useMemo(() => {
    let filtered = productsList;
    if (selectedCategoryId) {
      filtered = filtered.filter((p) => p.category_id === selectedCategoryId);
    }
    if (selectedBrandId) {
      filtered = filtered.filter((p) => p.brand_id === selectedBrandId);
    }
    return filtered.map((p) => ({
      value: p.product_id,
      label: p.name,
    }));
  }, [productsList, selectedCategoryId, selectedBrandId]);

  const availableVariantsForProduct = useMemo(() => {
    if (!selectedProductId) return [];
    return skuOptions.filter((opt) => opt.product_id === selectedProductId);
  }, [skuOptions, selectedProductId]);

  const handleAddOrderItem = () => {
    if (!selectedProductId) {
      toast.warning('Select a product first');
      return;
    }
    if (!tempSkuId) {
      toast.warning('Select a product variant');
      return;
    }

    const itemOpt = skuOptions.find((opt) => opt.variant_id === tempSkuId);
    if (!itemOpt) return;

    const existing = selectedItems.find((item) => item.variant_id === tempSkuId);
    if (existing) {
      toast.error('This variant is already on the order. Change the quantity instead.');
      return;
    }

    const prodObj = productsList.find((p) => p.product_id === selectedProductId);
    const prodName = prodObj?.name || itemOpt.product_name || 'Product item';

    setSelectedItems([
      ...selectedItems,
      {
        variant_id: itemOpt.variant_id,
        product_name: prodName,
        sku: itemOpt.sku,
        quantity: Number(tempQty),
        unit_price: Number(tempPrice),
        available_stock: itemOpt.available_stock,
      },
    ]);

    setTempSkuId('');
    setTempQty(1);
    setTempPrice(0);
  };

  const handleCreateOrderSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    let finalOrderItems = [...selectedItems];
    if (finalOrderItems.length === 0) {
      if (selectedProductId && tempSkuId) {
        const itemOpt = skuOptions.find((opt) => opt.variant_id === tempSkuId);
        if (itemOpt) {
          const prodObj = productsList.find((p) => p.product_id === selectedProductId);
          finalOrderItems = [
            {
              variant_id: itemOpt.variant_id,
              product_name: prodObj?.name || itemOpt.product_name || 'Product item',
              sku: itemOpt.sku,
              quantity: Number(tempQty || 1),
              unit_price: Number(tempPrice || itemOpt.price || 0),
              available_stock: itemOpt.available_stock,
            },
          ];
          setSelectedItems(finalOrderItems);
        }
      }
    }

    if (finalOrderItems.length === 0) {
      toast.error('Select a product and variant or click "+ Add item"');
      return;
    }

    setUpdating(true);
    try {
      const digitalAmt = calculatedDigitalAmount;
      const requiresDigitalRzp = (paymentMethod === 'UPI' || paymentMethod === 'CARD' || paymentMethod === 'MIXED_PAYMENT') && digitalAmt > 0;

      if (requiresDigitalRzp) {
        const loaded = await loadRazorpayScript();
        if (!loaded) {
          toast.error('Failed to load Razorpay checkout SDK');
          setUpdating(false);
          return;
        }

        // 1. Create Razorpay POS Order
        const rzpOrderRes = await apiFetch<any>('/api/v1/admin/orders/create-pos-razorpay-order', {
          method: 'POST',
          body: JSON.stringify({ amount: digitalAmt }),
        });

        // 2. Launch Razorpay Modal
        const options = {
          key: rzpOrderRes.key_id,
          amount: rzpOrderRes.amount_paise,
          currency: 'INR',
          name: 'iFixKart Walk-in Counter',
          description: `POS Store Order (${paymentMethod})`,
          order_id: rzpOrderRes.razorpay_order_id,
          prefill: {
            name: buyerName || 'Walk-in Guest',
            email: buyerEmail || 'guest@store.local',
            contact: buyerPhone || '',
          },
          handler: async function (response: any) {
            try {
              const res = await apiFetch<any>('/api/v1/admin/orders/create', {
                method: 'POST',
                body: JSON.stringify({
                  customer_name: buyerName || undefined,
                  customer_email: buyerEmail || undefined,
                  customer_phone: buyerPhone || undefined,
                  items: finalOrderItems.map((item) => ({
                    variant_id: item.variant_id,
                    quantity: item.quantity,
                    unit_price: item.unit_price,
                  })),
                  shipping_address: shippingAddress || undefined,
                  payment_status: 'PAID',
                  payment_method: paymentMethod,
                  cash_amount: paymentMethod === 'MIXED_PAYMENT' ? Number(cashPaidAmount || 0) : 0,
                  digital_amount: digitalAmt,
                  digital_method: paymentMethod === 'MIXED_PAYMENT' ? digitalMethod : paymentMethod,
                  razorpay_order_id: response.razorpay_order_id,
                  razorpay_payment_id: response.razorpay_payment_id,
                  razorpay_signature: response.razorpay_signature,
                }),
              });

              toast.success('Walk-in store order created with Razorpay payment');
              setPosSuccessData(res);
              fetchOrders();
            } catch (err: any) {
              toast.error(err.message || 'Failed to submit order after digital payment');
            } finally {
              setUpdating(false);
            }
          },
          modal: {
            ondismiss: function () {
              toast.info('Razorpay payment cancelled by cashier/customer');
              setUpdating(false);
            },
          },
          theme: { color: '#0f172a' },
        };

        const rzp = new (window as any).Razorpay(options);
        rzp.open();
        return;
      }

      // Pure Cash Order
      const res = await apiFetch<any>('/api/v1/admin/orders/create', {
        method: 'POST',
        body: JSON.stringify({
          customer_name: buyerName || undefined,
          customer_email: buyerEmail || undefined,
          customer_phone: buyerPhone || undefined,
          items: finalOrderItems.map((item) => ({
            variant_id: item.variant_id,
            quantity: item.quantity,
            unit_price: item.unit_price,
          })),
          shipping_address: shippingAddress || undefined,
          payment_status: paymentStatus,
          payment_method: paymentMethod,
          cash_amount: calculateOrderTotalWithTax,
          digital_amount: 0,
        }),
      });

      toast.success('Walk-in store order created');
      setPosSuccessData(res);
      fetchOrders();
    } catch (err: any) {
      toast.error(err.message || 'Failed to create offline store order');
    } finally {
      setUpdating(false);
    }
  };

  const clearCreateFormFields = () => {
    setBuyerName('');
    setBuyerEmail('');
    setBuyerPhone('');
    setShippingAddress('');
    setSelectedCategoryId('');
    setSelectedBrandId('');
    setSelectedProductId('');
    setTempSkuId('');
    setTempQty(1);
    setTempPrice(0);
    setSelectedItems([]);
    setPaymentStatus('PAID');
    setPaymentMethod('CASH');
    setDigitalMethod('UPI');
    setCashPaidAmount(0);
    setPosSuccessData(null);
  };

  const handleResetCreateOrderForm = () => {
    if (updating) return;
    clearCreateFormFields();
    setShowCreateOrderModal(false);
  };

  const fetchOrders = async () => {
    setLoading(true);
    try {
      const data = await apiFetch<AdminOrderListResponse[]>('/api/v1/admin/orders');
      setOrders(data);
    } catch (err: any) {
      toast.error(err.message || 'Failed to fetch customer orders');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchOrders();
    fetchCatalogProductsAndSkus();
  }, []);

  const handleInspectOrder = async (id: string) => {
    setSelectedOrderId(id);
    setDetailLoading(true);
    setDetailData(null);
    setVerifiedItems([]);
    setBarcodeInput('');
    setShowStatusForm(false);
    try {
      const data = await apiFetch<AdminOrderDetailResponse>(`/api/v1/admin/orders/${id}`);
      setDetailData(data);
    } catch (err: any) {
      toast.error(err.message || 'Failed to load order detailed view');
      setSelectedOrderId(null);
    } finally {
      setDetailLoading(false);
    }
  };

  const closeDetails = () => {
    if (updating) return;
    setSelectedOrderId(null);
    setDetailData(null);
    setShowStatusForm(false);
  };

  const handleOpenStatusForm = () => {
    if (!detailData) return;
    setNewStatus(detailData.status);
    setTrackingNo(detailData.tracking_number || '');
    setCourier(detailData.courier_name || '');
    setChangeReason('');
    setShowStatusForm(true);
  };

  const handleStatusSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!detailData) return;
    setUpdating(true);
    try {
      await apiFetch(`/api/v1/admin/orders/${detailData.order_id}/status`, {
        method: 'PUT',
        body: JSON.stringify({
          status: newStatus,
          tracking_number: trackingNo || null,
          courier_name: courier || null,
          reason: changeReason || null,
        }),
      });
      toast.success('Order status saved');
      setShowStatusForm(false);
      handleInspectOrder(detailData.order_id);
      fetchOrders();
    } catch (err: any) {
      toast.error(err.message || 'Failed to update order status');
    } finally {
      setUpdating(false);
    }
  };

  const handleBarcodeSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!detailData || !barcodeInput.trim()) return;

    const matchedItem = detailData.items.find(
      (item) => item.sku.toLowerCase() === barcodeInput.trim().toLowerCase()
    );
    if (matchedItem) {
      if (!verifiedItems.includes(matchedItem.sku)) {
        setVerifiedItems([...verifiedItems, matchedItem.sku]);
        toast.success(`Verified: ${matchedItem.product_name} (${matchedItem.sku})`);
      } else {
        toast.info(`Already verified: ${matchedItem.sku}`);
      }
    } else {
      toast.error(`SKU "${barcodeInput}" is not on this order`);
    }
    setBarcodeInput('');
  };

  const openCount = orders.filter((o) => isOpenStatus(o.status)).length;
  const shippedCount = orders.filter((o) => isShippedStatus(o.status)).length;
  const deliveredCount = orders.filter((o) => isDeliveredStatus(o.status)).length;
  const cancelledCount = orders.filter((o) => isCancelledStatus(o.status)).length;

  const filteredOrders = useMemo(() => {
    const q = searchQuery.trim().toLowerCase();
    return orders.filter((o) => {
      const statusMatch =
        statusFilter === 'all' ||
        (statusFilter === 'open' && isOpenStatus(o.status)) ||
        (statusFilter === 'shipped' && isShippedStatus(o.status)) ||
        (statusFilter === 'delivered' && isDeliveredStatus(o.status)) ||
        (statusFilter === 'cancelled' && isCancelledStatus(o.status));
      const searchMatch =
        !q ||
        o.order_no.toLowerCase().includes(q) ||
        (o.customer_email && o.customer_email.toLowerCase().includes(q)) ||
        (o.customer_name && o.customer_name.toLowerCase().includes(q)) ||
        (o.customer_phone && o.customer_phone.toLowerCase().includes(q)) ||
        o.status.toLowerCase().includes(q);
      return statusMatch && searchMatch;
    });
  }, [orders, searchQuery, statusFilter]);

  const pager = useClientPagination(filteredOrders);

  const dataCardShell =
    'crm-radius-section border border-border bg-card shadow-[0_1px_3px_rgba(16,24,40,0.06)] overflow-hidden min-w-0';
  const inputClass =
    'w-full h-9 px-3 bg-card border border-border crm-radius-control text-[13px] text-foreground focus:outline-none focus:border-primary';
  const labelClass = 'block text-[11px] font-semibold text-muted-foreground uppercase mb-1.5';
  const primaryButton =
    'inline-flex items-center justify-center gap-2 h-9 px-4 crm-radius-control bg-primary hover:bg-primary/90 text-white text-[13px] font-semibold cursor-pointer disabled:opacity-50';
  const secondaryButton =
    'inline-flex items-center justify-center gap-2 h-9 px-4 crm-radius-control border border-border bg-card text-foreground text-[13px] font-medium hover:bg-muted cursor-pointer disabled:opacity-50';

  const renderStatusBadge = (status: string) => (
    <span
      className={`inline-flex items-center px-2.5 py-1 crm-radius-badge text-[11px] font-semibold ${statusBadgeClass(status)}`}
    >
      {(status || 'Draft').replace('_', ' ')}
    </span>
  );

  const backendUrl = process.env.NEXT_PUBLIC_API_URL || '';

  return (
    <div className="flex flex-col gap-5 min-w-0">
      <div className="flex flex-wrap items-start justify-between gap-3 min-w-0">
        <div className="min-w-0">
          <div className="flex items-center gap-2">
            <h1 className="text-lg font-semibold text-foreground">Customer Store Orders</h1>
            <span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 crm-radius-toggle bg-primary/10 text-primary text-[11px] font-semibold leading-none">
              {orders.length}
            </span>
          </div>
        </div>

        <div className="flex items-center gap-2 shrink-0">
          <button
            type="button"
            onClick={fetchOrders}
            className="w-8 h-8 crm-radius-control border border-border bg-card text-muted-foreground hover:text-foreground hover:bg-muted cursor-pointer transition-colors flex items-center justify-center"
            title="Reload"
          >
            <RefreshCw className="w-3.5 h-3.5" />
          </button>
          <button
            type="button"
            onClick={() => {
              fetchCatalogProductsAndSkus();
              clearCreateFormFields();
              setShowCreateOrderModal(true);
            }}
            className={primaryButton}
          >
            <span className="w-[18px] h-[18px] rounded-full bg-white text-primary flex items-center justify-center">
              <Plus className="w-3 h-3" strokeWidth={3} />
            </span>
            Create order
          </button>
        </div>
      </div>

      <div className={dataCardShell}>
        <div className="px-5 pt-5">
          <div className="-mx-5 px-5 flex flex-wrap items-center justify-between gap-3 min-w-0 pb-4 border-b border-border">
            <div className="relative flex-1 min-w-[180px] max-w-[480px]">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none" />
              <input
                type="text"
                placeholder="Search"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full h-9 pl-9 pr-3 crm-radius-control border border-border bg-card text-[13px] text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary transition-colors"
              />
            </div>
            <div className="crm-radius-toggle inline-flex items-center gap-1 border border-border bg-card p-1 shrink-0 overflow-x-auto max-w-full">
              {(
                [
                  { id: 'all', label: `All (${orders.length})` },
                  { id: 'open', label: `Open (${openCount})` },
                  { id: 'shipped', label: `Shipped (${shippedCount})` },
                  { id: 'delivered', label: `Delivered (${deliveredCount})` },
                  { id: 'cancelled', label: `Cancelled (${cancelledCount})` },
                ] as { id: StatusFilter; label: string }[]
              ).map((tab) => (
                <button
                  key={tab.id}
                  type="button"
                  onClick={() => setStatusFilter(tab.id)}
                  className={`h-8 px-3 crm-radius-toggle text-[13px] font-medium cursor-pointer transition-colors whitespace-nowrap ${
                    statusFilter === tab.id ? 'bg-primary text-white' : 'text-foreground hover:bg-muted'
                  }`}
                >
                  {tab.label}
                </button>
              ))}
            </div>
          </div>
        </div>

        {loading ? (
          <div className="flex flex-col items-center justify-center py-16 gap-2.5">
            <RefreshCw className="w-6 h-6 text-primary animate-spin" />
            <span className="text-[13px] text-muted-foreground">Loading orders...</span>
          </div>
        ) : (
          <div className="overflow-x-auto">
            <table className="crm-data-table min-w-[860px]">
              <thead>
                <tr className="bg-gray-50 border-y border-gray-200">
                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Order no.</th>
                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Customer</th>
                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Total</th>
                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Date</th>
                  <th className="px-5 py-3 text-left text-[13px] font-semibold text-gray-700">Status</th>
                  <th className="px-5 py-3 text-center text-[13px] font-semibold text-gray-700">Action</th>
                </tr>
              </thead>
              <tbody className="bg-card">
                {filteredOrders.length === 0 ? (
                  <tr>
                    <td colSpan={6} className="text-center py-12 text-[13px] text-muted-foreground">
                      {searchQuery || statusFilter !== 'all' ? 'No orders match your search.' : 'No orders found.'}
                    </td>
                  </tr>
                ) : (
                  pager.items.map((order) => (
                    <tr
                      key={order.order_id}
                      className={`border-t border-border hover:bg-muted/10 cursor-pointer ${
                        selectedOrderId === order.order_id ? 'bg-muted/20' : ''
                      }`}
                      onClick={() => handleInspectOrder(order.order_id)}
                    >
                      <td className="px-5 py-3.5 text-[13px] font-semibold text-foreground font-mono">{order.order_no}</td>
                      <td className="px-5 py-3.5">
                        <p className="text-[13px] font-medium text-foreground">{order.customer_name || 'Walk-in guest'}</p>
                        <p className="text-[12px] text-muted-foreground mt-0.5">
                          {order.customer_phone && order.customer_phone !== 'N/A'
                            ? order.customer_phone
                            : order.customer_email && order.customer_email !== 'N/A'
                              ? order.customer_email
                              : '—'}
                        </p>
                      </td>
                      <td className="px-5 py-3.5 text-[13px] text-muted-foreground">₹{order.final_amount.toFixed(2)}</td>
                      <td className="px-5 py-3.5 text-[13px] text-muted-foreground">{formatOrderDate(order.created_at)}</td>
                      <td className="px-5 py-3.5">{renderStatusBadge(order.status)}</td>
                      <td className="px-5 py-3.5">
                        <div className="flex items-center justify-center">
                          <button
                            type="button"
                            onClick={(e) => {
                              e.stopPropagation();
                              handleInspectOrder(order.order_id);
                            }}
                            className="w-8 h-8 crm-radius-control border border-border text-muted-foreground hover:text-foreground hover:bg-muted cursor-pointer flex items-center justify-center"
                            aria-label="View order"
                          >
                            <Eye className="w-3.5 h-3.5" />
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>
        )}
        <TablePagination {...pager} />
      </div>

      <SlideOver
        open={!!selectedOrderId}
        onClose={closeDetails}
        title={detailData ? `Order ${detailData.order_no}` : 'Order details'}
        icon={<ShoppingCart className="w-4 h-4 text-primary shrink-0" />}
      >
        {detailLoading ? (
          <div className="flex flex-col items-center justify-center py-16 gap-2.5">
            <RefreshCw className="w-6 h-6 text-primary animate-spin" />
            <span className="text-[13px] text-muted-foreground">Loading order...</span>
          </div>
        ) : !detailData ? (
          <div className="px-5 py-12 text-center text-[13px] text-muted-foreground">Failed to load order details.</div>
        ) : (
          <div className="flex min-h-0 flex-1 flex-col">
            <div className="flex-1 min-h-0 overflow-y-auto px-5 py-4 space-y-5">
              <div className="flex items-start justify-between gap-3">
                <div>
                  <p className="text-[12px] text-muted-foreground">{formatOrderDate(detailData.created_at)}</p>
                  <div className="mt-2 flex flex-wrap items-center gap-2">
                    {renderStatusBadge(detailData.status)}
                    <span
                      className={`inline-flex items-center px-2.5 py-1 crm-radius-badge text-[11px] font-semibold ${
                        detailData.payment_status === 'PAID' || detailData.payment_status === 'PAYMENT_CAPTURED'
                          ? 'bg-success text-white'
                          : 'bg-warning text-white'
                      }`}
                    >
                      {(detailData.payment_status || 'UNPAID').replace('_', ' ')}
                    </span>
                  </div>
                </div>
                {!showStatusForm && (
                  <button type="button" onClick={handleOpenStatusForm} className={primaryButton}>
                    Update status
                  </button>
                )}
              </div>

              <div className="space-y-2">
                <div className="flex items-center gap-2 text-[13px] font-semibold text-foreground">
                  <User className="w-4 h-4 text-primary" />
                  {detailData.customer_name || 'Walk-in guest'}
                </div>
                {detailData.customer_email && (
                  <p className="text-[13px] text-muted-foreground pl-6">{detailData.customer_email}</p>
                )}
                {detailData.shipping_address_json && (
                  <div className="flex items-start gap-2 text-[13px] text-muted-foreground">
                    <MapPin className="w-4 h-4 text-primary shrink-0 mt-0.5" />
                    <div>
                      <p className="text-[11px] font-semibold uppercase text-muted-foreground mb-0.5">Shipping address</p>
                      {renderFormattedAddress(detailData.shipping_address_json)}
                    </div>
                  </div>
                )}
              </div>

              <div className="p-3 border border-border crm-radius-card bg-muted/10 space-y-1.5 text-[13px]">
                <div className="flex justify-between text-muted-foreground">
                  <span>Subtotal</span>
                  <span>₹{detailData.total_amount.toFixed(2)}</span>
                </div>
                {detailData.discount_amount > 0 && (
                  <div className="flex justify-between text-success">
                    <span>Discount</span>
                    <span>-₹{detailData.discount_amount.toFixed(2)}</span>
                  </div>
                )}
                <div className="flex justify-between text-muted-foreground">
                  <span>GST</span>
                  <span>₹{detailData.tax_amount.toFixed(2)}</span>
                </div>
                <div className="flex justify-between text-muted-foreground">
                  <span>Shipping</span>
                  <span>₹{detailData.shipping_cost.toFixed(2)}</span>
                </div>
                <div className="flex justify-between font-semibold text-foreground border-t border-border pt-1.5">
                  <span>Final amount</span>
                  <span>₹{detailData.final_amount.toFixed(2)}</span>
                </div>
              </div>

              {showStatusForm && (
                <form onSubmit={handleStatusSubmit} className="p-3 border border-border crm-radius-card space-y-3">
                  <p className="text-[13px] font-semibold text-foreground">Update status</p>
                  <div>
                    <label className={labelClass}>Status</label>
                    <CustomSelect
                      value={newStatus}
                      onChange={setNewStatus}
                      options={[
                        { value: 'PENDING', label: 'Pending' },
                        { value: 'CONFIRMED', label: 'Confirmed' },
                        { value: 'PROCESSING', label: 'Processing' },
                        { value: 'SHIPPED', label: 'Shipped' },
                        { value: 'OUT_FOR_DELIVERY', label: 'Out for delivery' },
                        { value: 'DELIVERED', label: 'Delivered' },
                        { value: 'CANCELLED', label: 'Cancelled' },
                      ]}
                    />
                  </div>
                  {newStatus === 'SHIPPED' && (
                    <>
                      <div>
                        <label className={labelClass}>Courier</label>
                        <input
                          type="text"
                          placeholder="e.g. BlueDart / Delhivery"
                          value={courier}
                          onChange={(e) => setCourier(e.target.value)}
                          className={inputClass}
                        />
                      </div>
                      <div>
                        <label className={labelClass}>Tracking number</label>
                        <input
                          type="text"
                          placeholder="AWB number"
                          value={trackingNo}
                          onChange={(e) => setTrackingNo(e.target.value)}
                          className={inputClass}
                        />
                      </div>
                    </>
                  )}
                  <div>
                    <label className={labelClass}>Reason</label>
                    <textarea
                      placeholder="Optional note"
                      value={changeReason}
                      onChange={(e) => setChangeReason(e.target.value)}
                      className={`${inputClass} h-20 py-2 resize-none`}
                      rows={2}
                    />
                  </div>
                  <div className="flex items-center justify-end gap-2">
                    <button
                      type="button"
                      onClick={() => setShowStatusForm(false)}
                      disabled={updating}
                      className={secondaryButton}
                    >
                      Cancel
                    </button>
                    <button type="submit" disabled={updating} className={primaryButton}>
                      {updating ? 'Saving...' : 'Save status'}
                    </button>
                  </div>
                </form>
              )}

              <div className="space-y-2">
                <div className="flex items-center justify-between gap-2">
                  <p className="text-[11px] font-semibold text-muted-foreground uppercase">
                    Items ({detailData.items.length})
                  </p>
                  <span className="text-[12px] text-muted-foreground">
                    Verified {verifiedItems.length} / {detailData.items.length}
                  </span>
                </div>
                <div className="space-y-2">
                  {detailData.items.map((item, idx) => {
                    const isVerified = verifiedItems.includes(item.sku);
                    return (
                      <div
                        key={`${item.sku}-${idx}`}
                        className="flex items-start justify-between gap-3 p-3 border border-border crm-radius-card"
                      >
                        <div className="min-w-0">
                          <p className="text-[13px] font-semibold text-foreground">{item.product_name}</p>
                          <p className="text-[12px] text-muted-foreground font-mono mt-0.5">
                            {item.sku} · Qty {item.quantity}
                          </p>
                        </div>
                        <div className="text-right shrink-0">
                          <p className="text-[13px] font-medium text-foreground">₹{item.total_price.toFixed(2)}</p>
                          {isVerified && (
                            <span className="inline-flex items-center gap-1 text-[11px] font-semibold text-success mt-1">
                              <CheckCircle2 className="w-3 h-3" />
                              Verified
                            </span>
                          )}
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>

              <form onSubmit={handleBarcodeSubmit} className="space-y-2">
                <label className={labelClass}>
                  <span className="inline-flex items-center gap-1.5">
                    <Barcode className="w-3.5 h-3.5" />
                    Verify barcode / SKU
                  </span>
                </label>
                <div className="flex gap-2">
                  <input
                    type="text"
                    placeholder="Scan or type SKU"
                    value={barcodeInput}
                    onChange={(e) => setBarcodeInput(e.target.value)}
                    className={inputClass}
                  />
                  <button type="submit" className={secondaryButton}>
                    Verify
                  </button>
                </div>
              </form>
            </div>
          </div>
        )}
      </SlideOver>

      <SlideOver
        open={showCreateOrderModal}
        onClose={handleResetCreateOrderForm}
        title={posSuccessData ? 'Order created' : 'Create store order'}
        icon={<ShoppingCart className="w-4 h-4 text-primary shrink-0" />}
      >
        {posSuccessData ? (
          <div className="flex min-h-0 flex-1 flex-col">
            <div className="flex-1 min-h-0 overflow-y-auto px-5 py-6 space-y-4">
              <div className="flex items-center gap-2 text-success">
                <CheckCircle2 className="w-5 h-5" />
                <p className="text-[15px] font-semibold text-foreground">Order and GST invoice created</p>
              </div>
              <div className="text-[13px] text-muted-foreground space-y-1">
                <p>
                  Order: <span className="font-semibold text-foreground font-mono">{posSuccessData.order_no}</span>
                </p>
                <p>
                  Invoice: <span className="font-semibold text-foreground">{posSuccessData.invoice_no}</span>
                </p>
                <p>
                  Customer: {posSuccessData.customer_name || 'Walk-in guest'} · ₹
                  {Number(posSuccessData.final_amount).toFixed(2)}
                </p>
              </div>
            </div>
            <div className="shrink-0 border-t border-border px-5 py-3 flex flex-wrap items-center justify-end gap-2 bg-card">
              <button
                type="button"
                onClick={() => window.open(`${backendUrl}/api/v1/admin/invoices/${posSuccessData.invoice_id}/download`, '_blank')}
                className={secondaryButton}
              >
                <FileText className="w-3.5 h-3.5" />
                View invoice
              </button>
              <button
                type="button"
                onClick={() =>
                  window.open(`${backendUrl}/api/v1/admin/invoices/${posSuccessData.invoice_id}/thermal-download`, '_blank')
                }
                className={secondaryButton}
              >
                <Printer className="w-3.5 h-3.5" />
                Print receipt
              </button>
              <button type="button" onClick={clearCreateFormFields} className={primaryButton}>
                <Plus className="w-3.5 h-3.5" />
                New order
              </button>
            </div>
          </div>
        ) : (
          <form onSubmit={handleCreateOrderSubmit} className="flex min-h-0 flex-1 flex-col">
            <div className="flex-1 min-h-0 overflow-y-auto px-5 py-4 space-y-5">
              <div className="space-y-3">
                <div className="flex items-center justify-between gap-2">
                  <p className="text-[11px] font-semibold text-muted-foreground uppercase">Customer</p>
                  <button
                    type="button"
                    onClick={() => {
                      setBuyerName('Walk-in Guest');
                      setBuyerEmail('guest@store.local');
                      setBuyerPhone('');
                    }}
                    className="text-[12px] font-semibold text-primary cursor-pointer"
                  >
                    Fill walk-in guest
                  </button>
                </div>
                <div>
                  <label className={labelClass}>Name</label>
                  <input
                    type="text"
                    value={buyerName}
                    onChange={(e) => setBuyerName(e.target.value)}
                    placeholder="e.g. Rahul Sharma"
                    className={inputClass}
                  />
                </div>
                <div>
                  <label className={labelClass}>Email</label>
                  <input
                    type="email"
                    value={buyerEmail}
                    onChange={(e) => setBuyerEmail(e.target.value)}
                    placeholder="e.g. rahul@example.com"
                    className={inputClass}
                  />
                </div>
                <div>
                  <label className={labelClass}>Phone</label>
                  <input
                    type="tel"
                    value={buyerPhone}
                    onChange={(e) => setBuyerPhone(e.target.value)}
                    placeholder="e.g. 9876543210"
                    className={inputClass}
                  />
                </div>
                <div>
                  <label className={labelClass}>Store / shipping location</label>
                  <input
                    type="text"
                    value={shippingAddress}
                    onChange={(e) => setShippingAddress(e.target.value)}
                    placeholder="e.g. Offline main store counter"
                    className={inputClass}
                  />
                </div>
              </div>

              <div className="space-y-3">
                <p className="text-[11px] font-semibold text-muted-foreground uppercase">Items</p>
                {skuLoading && <p className="text-[12px] text-muted-foreground">Loading catalog...</p>}
                
                <div className="grid grid-cols-2 gap-2">
                  <div>
                    <label className={labelClass}>Sales Category</label>
                    <CustomSelect
                      value={selectedCategoryId}
                      onChange={(value) => {
                        setSelectedCategoryId(value);
                        setSelectedBrandId('');
                        setSelectedProductId('');
                        setTempSkuId('');
                        setTempPrice(0);
                      }}
                      options={[
                        { value: '', label: 'Select Category' },
                        ...availableCategoriesOptions,
                      ]}
                      placeholder="Select Category"
                    />
                  </div>
                  <div>
                    <label className={labelClass}>Product Brand</label>
                    <CustomSelect
                      value={selectedBrandId}
                      disabled={!selectedCategoryId}
                      onChange={(value) => {
                        setSelectedBrandId(value);
                        setSelectedProductId('');
                        setTempSkuId('');
                        setTempPrice(0);
                      }}
                      options={[
                        { value: '', label: !selectedCategoryId ? 'Select Category first' : 'Select Brand' },
                        ...availableBrandsOptions,
                      ]}
                      placeholder={!selectedCategoryId ? 'Select Category first' : 'Select Brand'}
                    />
                  </div>
                </div>

                <div>
                  <label className={labelClass}>Product</label>
                  <CustomSelect
                    value={selectedProductId}
                    disabled={!selectedCategoryId || !selectedBrandId}
                    onChange={(value) => {
                      setSelectedProductId(value);
                      setTempSkuId('');
                      setTempPrice(0);
                    }}
                    options={[
                      {
                        value: '',
                        label: !selectedCategoryId
                          ? 'Select Category first'
                          : !selectedBrandId
                          ? 'Select Brand first'
                          : 'Select Product',
                      },
                      ...availableProductsOptions,
                    ]}
                    placeholder={
                      !selectedCategoryId
                        ? 'Select Category first'
                        : !selectedBrandId
                        ? 'Select Brand first'
                        : 'Select Product'
                    }
                  />
                </div>
                <div>
                  <label className={labelClass}>Variant</label>
                  <CustomSelect
                    value={tempSkuId}
                    disabled={!selectedProductId}
                    onChange={(value) => {
                      setTempSkuId(value);
                      const opt = availableVariantsForProduct.find((o) => o.variant_id === value);
                      if (opt) setTempPrice(opt.price);
                    }}
                    options={[
                      { value: '', label: !selectedProductId ? 'Select a product first' : 'Select variant' },
                      ...availableVariantsForProduct.map((opt) => ({
                        value: opt.variant_id,
                        label: `${opt.sku} ${opt.variant_name ? `(${opt.variant_name})` : ''} — ₹${opt.price} (Stock: ${opt.available_stock})`,
                      })),
                    ]}
                    placeholder={!selectedProductId ? 'Select a product first' : 'Select variant'}
                  />
                </div>
                <div className="grid grid-cols-2 gap-2">
                  <div>
                    <label className={labelClass}>Qty</label>
                    <input
                      type="number"
                      min={1}
                      value={tempQty}
                      onChange={(e) => setTempQty(Math.max(1, Number(e.target.value)))}
                      className={inputClass}
                    />
                  </div>
                  <div>
                    <label className={labelClass}>Unit price (₹)</label>
                    <input
                      type="number"
                      step="0.01"
                      value={tempPrice}
                      onChange={(e) => setTempPrice(Number(e.target.value))}
                      className={inputClass}
                    />
                  </div>
                </div>
                <button type="button" onClick={handleAddOrderItem} className={secondaryButton}>
                  <Plus className="w-3.5 h-3.5" />
                  Add item
                </button>

                {selectedItems.length > 0 ? (
                  <div className="space-y-2">
                    {selectedItems.map((item, idx) => (
                      <div key={`${item.variant_id}-${idx}`} className="flex items-start justify-between gap-2 p-3 border border-border crm-radius-card">
                        <div className="min-w-0">
                          <p className="text-[13px] font-semibold text-foreground">{item.product_name}</p>
                          <p className="text-[12px] text-muted-foreground font-mono mt-0.5">
                            {item.sku} · Qty {item.quantity} · ₹{item.unit_price}
                          </p>
                          <p className="text-[12px] text-foreground mt-0.5">
                            ₹{(item.quantity * item.unit_price).toFixed(2)}
                          </p>
                        </div>
                        <button
                          type="button"
                          onClick={() => setSelectedItems((prev) => prev.filter((_, i) => i !== idx))}
                          className="w-8 h-8 crm-radius-control border border-border text-muted-foreground hover:text-destructive hover:bg-muted cursor-pointer flex items-center justify-center"
                          aria-label="Remove item"
                        >
                          <Trash2 className="w-3.5 h-3.5" />
                        </button>
                      </div>
                    ))}
                  </div>
                ) : (
                  <p className="text-[12px] text-muted-foreground">No items added yet.</p>
                )}
              </div>

              <div className="space-y-3">
                <p className="text-[11px] font-semibold text-muted-foreground uppercase">Payment</p>
                <div>
                  <label className={labelClass}>Payment status</label>
                  <CustomSelect
                    value={paymentStatus}
                    onChange={setPaymentStatus}
                    options={[
                      { value: 'PAID', label: 'Paid' },
                      { value: 'PENDING', label: 'Pending' },
                    ]}
                  />
                </div>
                <div>
                  <label className={labelClass}>Payment method</label>
                  <CustomSelect
                    value={paymentMethod}
                    onChange={setPaymentMethod}
                    options={[
                      { value: 'CASH', label: 'Cash' },
                      { value: 'UPI', label: 'UPI (Razorpay QR / App)' },
                      { value: 'CARD', label: 'Card (Razorpay Online / POS)' },
                      { value: 'MIXED_PAYMENT', label: 'Mixed Payment (Cash + Digital)' },
                    ]}
                  />
                </div>

                {paymentMethod === 'MIXED_PAYMENT' && (
                  <div className="p-3 border border-border crm-radius-card bg-muted/30 space-y-3">
                    <p className="text-[12px] font-semibold text-foreground">Mixed Payment Breakdown</p>
                    <div>
                      <label className={labelClass}>Digital Payment Method</label>
                      <CustomSelect
                        value={digitalMethod}
                        onChange={(val) => setDigitalMethod(val as any)}
                        options={[
                          { value: 'UPI', label: 'UPI' },
                          { value: 'CARD', label: 'Card' },
                        ]}
                      />
                    </div>
                    <div className="grid grid-cols-2 gap-2">
                      <div>
                        <label className={labelClass}>Cash Paid Amount (₹)</label>
                        <input
                          type="number"
                          min={0}
                          step="0.01"
                          value={cashPaidAmount}
                          onChange={(e) => setCashPaidAmount(Math.max(0, Number(e.target.value)))}
                          className={inputClass}
                        />
                      </div>
                      <div>
                        <label className={labelClass}>Digital Amount (Razorpay) (₹)</label>
                        <div className="h-9 px-3 border border-border crm-radius-control bg-muted flex items-center text-[13px] font-semibold text-foreground font-mono">
                          ₹{calculatedDigitalAmount.toFixed(2)}
                        </div>
                      </div>
                    </div>
                  </div>
                )}

                {(paymentMethod === 'UPI' || paymentMethod === 'CARD' || paymentMethod === 'MIXED_PAYMENT') && calculatedDigitalAmount > 0 && (
                  <div className="p-3 border border-primary/20 bg-primary/5 crm-radius-card text-[12px] text-primary space-y-1">
                    <p className="font-semibold">Razorpay Digital Collection</p>
                    <p className="text-[11px] opacity-90">
                      Clicking <strong>Create order</strong> will launch the Razorpay Checkout popup for digital amount ₹
                      {calculatedDigitalAmount.toFixed(2)}.
                    </p>
                  </div>
                )}
              </div>
            </div>
            <div className="shrink-0 border-t border-border px-5 py-3 flex items-center justify-end gap-2 bg-card">
              <button type="button" onClick={handleResetCreateOrderForm} disabled={updating} className={secondaryButton}>
                Cancel
              </button>
              <button type="submit" disabled={updating || (selectedItems.length === 0 && (!selectedProductId || !tempSkuId))} className={primaryButton}>
                {updating ? 'Saving...' : 'Create order'}
              </button>
            </div>
          </form>
        )}
      </SlideOver>
    </div>
  );
}