import { useState, useEffect, useMemo } from "react";
import Offcanvas from "../../components/Offcanvas";
import Select from "react-select";
import Button from "../../components/Buttons";
import Swal from 'sweetalert2';
import IconUser from "../../components/Icon/IconUser";
import IconPlus from "../../components/Icon/IconPlus";
import IconTrashLines from "../../components/Icon/IconTrashLines";
import IconCircleCheck from "../../components/Icon/IconCircleCheck";
import { productApi } from "../../api/productApi";
import { orderApi } from "../../api/orderApi";

const selectStyles = {
  control: (base: any, state: any) => ({
    ...base,
    transition: "all 0.2s ease",
    backgroundColor: "#FBF6ED",
    borderColor: state.isFocused ? "#CF8F42" : "#ECE2D2",
    boxShadow: state.isFocused
      ? "0 0 0 3px rgba(207, 143, 66, 0.15)"
      : "none",
    borderRadius: "10px",
    padding: "2px 6px",
    minHeight: "40px",
    fontSize: "13px",
    color: "#3B2F28",
    "&:hover": {
      borderColor: "#CF8F42",
    },
  }),
  valueContainer: (base: any) => ({
    ...base,
    padding: "2px 6px",
  }),
  input: (base: any) => ({
    ...base,
    color: "#3B2F28",
  }),
  placeholder: (base: any) => ({
    ...base,
    color: "#9A8F86",
    fontSize: "13px",
  }),
  singleValue: (base: any) => ({
    ...base,
    color: "#3B2F28",
    fontSize: "13px",
    fontWeight: "500",
  }),
  menu: (base: any) => ({
    ...base,
    borderRadius: "10px",
    overflow: "hidden",
    marginTop: 6,
    backgroundColor: "#ffffff",
    border: "1px solid #ECE2D2",
    zIndex: 999999,
    boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
  }),
  menuPortal: (base: any) => ({
    ...base,
    zIndex: 999999,
  }),
  option: (base: any, state: any) => ({
    ...base,
    fontSize: "13px",
    backgroundColor: state.isFocused
      ? "#FBF6ED"
      : state.isSelected
        ? "#F3E3C7"
        : "#fff",
    color: "#3B2F28",
    cursor: "pointer",
  }),
  dropdownIndicator: (base: any) => ({
    ...base,
    color: "#3B2F28",
    "&:hover": {
      color: "#CF8F42",
    },
  }),
  indicatorSeparator: () => ({
    display: "none",
  }),
};

interface OrderItemRow {
  productId: number | string;
  productName: string;
  price: number;
  qty: number;
  stock: number;
  imageUrl?: string;
  sku?: string;
}

export default function ConfirmOrder({ open, setOpen, patron, orderStatuses = [], paymentStatuses = [], onSuccess }: any) {
  const [productsRaw, setProductsRaw] = useState<any[]>([]);
  const [items, setItems] = useState<OrderItemRow[]>([]);
  const [paymentStatus, setPaymentStatus] = useState<string>("Paid");
  const [orderStatus, setOrderStatus] = useState<string>("Processing");
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [selectedProductType, setSelectedProductType] = useState<string>("");
  const [selectedCategory, setSelectedCategory] = useState<string>("");
  const [inStockOnly, setInStockOnly] = useState<boolean>(false);

  const channelKey = (patron?.channel || 'whatsapp').toLowerCase();
  const channelLabel = channelKey === 'whatsapp' ? 'WhatsApp' : (channelKey === 'instagram' ? 'Instagram' : 'Website');

  // Distinct categories (handling comma-separated / arrays / trim)
  const categories = useMemo(() => {
    const catSet = new Set<string>();
    productsRaw.forEach((p) => {
      if (!p.category) return;
      if (Array.isArray(p.category)) {
        p.category.forEach((c: any) => {
          if (typeof c === 'string' && c.trim()) catSet.add(c.trim());
          else if (c && c.name && typeof c.name === 'string' && c.name.trim()) catSet.add(c.name.trim());
        });
      } else if (typeof p.category === 'string') {
        p.category.split(',').forEach((c: string) => {
          if (c.trim()) catSet.add(c.trim());
        });
      }
    });
    return Array.from(catSet).sort((a, b) => a.localeCompare(b));
  }, [productsRaw]);

  // Filtered product options for dropdown
  const filteredProductOptions = useMemo(() => {
    return productsRaw
      .filter((p) => {
        if (selectedProductType) {
          const isVariable = p.type === 'variable' || (p.variants && p.variants.length > 0);
          const prodType = isVariable ? 'variable' : 'single';
          if (prodType !== selectedProductType) {
            return false;
          }
        }
        if (selectedCategory) {
          const target = selectedCategory.trim().toLowerCase();
          const productCat = (p.category || '').toString().toLowerCase();
          const matchesCat = productCat
            .split(',')
            .map((c: string) => c.trim())
            .some((c: string) => c === target || c.includes(target) || target.includes(c));

          if (!matchesCat) {
            return false;
          }
        }
        const orderChStock =
          channelKey === 'whatsapp'
            ? Number(p.wa_qty) || 0
            : channelKey === 'instagram'
              ? Number(p.ig_qty) || 0
              : Number(p.web_qty) || 0;

        if (inStockOnly && orderChStock <= 0) {
          return false;
        }
        return true;
      })
      .map((p) => {
        const orderChStock =
          channelKey === 'whatsapp'
            ? Number(p.wa_qty) || 0
            : channelKey === 'instagram'
              ? Number(p.ig_qty) || 0
              : Number(p.web_qty) || 0;

        return {
          label: `${p.name} — ₹${Number(p.price).toLocaleString()} (${orderChStock > 0 ? `${orderChStock} in ${channelLabel} stock` : `0 in ${channelLabel} stock - Out of Stock`})`,
          value: p.id,
          price: Number(p.price) || 0,
          stock: orderChStock,
          displayStock: orderChStock,
          name: p.name,
          imageUrl: p.image_url,
          sku: p.sku,
          category: p.category,
        };
      });
  }, [productsRaw, selectedCategory, inStockOnly, channelKey, channelLabel]);

  useEffect(() => {
    if (open) {
      setSelectedProductType("");
      setSelectedCategory("");
      setInStockOnly(false);

      productApi.getAllProducts().then((res) => {
        if (res.success) {
          setProductsRaw(res.data);
          const rawList = res.data;

          // Initial item if patron has product or default to empty first row
          if (patron?.productId) {
            const matched = rawList.find((p: any) => p.id === patron.productId);
            if (matched) {
              const matchedOrderStock =
                channelKey === 'whatsapp'
                  ? Number(matched.wa_qty) || 0
                  : channelKey === 'instagram'
                    ? Number(matched.ig_qty) || 0
                    : Number(matched.web_qty) || 0;

              setItems([{
                productId: matched.id,
                productName: matched.name,
                price: Number(matched.price) || 0,
                qty: Math.min(patron.qty || 1, Math.max(1, matchedOrderStock)),
                stock: matchedOrderStock,
                imageUrl: matched.image_url,
                sku: matched.sku,
              }]);
            } else {
              setItems([{ productId: "", productName: "", price: 0, qty: 1, stock: 0 }]);
            }
          } else {
            setItems([{ productId: "", productName: "", price: 0, qty: 1, stock: 0 }]);
          }
        }
      });
      setPaymentStatus("Paid");
      setOrderStatus("Confirmed");
    } else {
      setItems([]);
    }
  }, [open, patron, channelKey, channelLabel]);

  const handleAddItem = () => {
    setItems((prev) => [...prev, { productId: "", productName: "", price: 0, qty: 1, stock: 0 }]);
  };

  const handleRemoveItem = (index: number) => {
    setItems((prev) => prev.filter((_, i) => i !== index));
  };

  const handleProductSelect = (index: number, option: any) => {
    setItems((prev) => {
      const next = [...prev];
      if (option) {
        next[index] = {
          productId: option.value,
          productName: option.name,
          price: option.price,
          qty: 1,
          stock: option.stock,
          imageUrl: option.imageUrl,
          sku: option.sku,
        };
      } else {
        next[index] = { productId: "", productName: "", price: 0, qty: 1, stock: 0 };
      }
      return next;
    });
  };

  const handleQtyChange = (index: number, delta: number) => {
    setItems((prev) => {
      const next = [...prev];
      const current = next[index];
      const newQty = current.qty + delta;
      if (newQty >= 1) {
        if (current.stock > 0 && newQty > current.stock) {
          Swal.fire({
            icon: 'warning',
            title: 'Stock Limit Reached',
            text: `Only ${current.stock} units available in ${channelLabel} stock.`,
            toast: true,
            position: 'top-end',
            timer: 2500,
            showConfirmButton: false,
          });
          return next;
        }
        next[index] = { ...current, qty: newQty };
      }
      return next;
    });
  };

  const totalAmount = items.reduce((sum, item) => sum + (item.price * item.qty), 0);
  const totalUnits = items.reduce((sum, item) => sum + item.qty, 0);
  const validItems = items.filter(i => i.productId !== "");

  const handleConfirmPlacement = async () => {
    if (validItems.length === 0) {
      Swal.fire({
        icon: 'warning',
        title: 'Select at least 1 product',
        text: 'Please choose jewellery product items before confirming.',
        toast: true,
        position: 'top-end',
        timer: 3000,
        showConfirmButton: false,
      });
      return;
    }

    const outOfStockItems = validItems.filter(i => i.stock <= 0 || i.qty > i.stock);
    if (outOfStockItems.length > 0) {
      Swal.fire({
        icon: 'error',
        title: `Insufficient ${channelLabel} Stock`,
        text: `"${outOfStockItems[0].productName}" only has ${outOfStockItems[0].stock} units in ${channelLabel} stock. Please allocate stock to ${channelLabel} in Inventory first.`,
        toast: true,
        position: 'top-end',
        timer: 4000,
        showConfirmButton: false,
      });
      return;
    }

    setIsSubmitting(true);
    Swal.fire({
      title: 'Confirming Order...',
      allowOutsideClick: false,
      didOpen: () => {
        Swal.showLoading();
      }
    });

    try {
      const formattedItems = validItems.map(i => ({
        product_id: i.productId,
        product_name: i.productName,
        price: i.price,
        qty: i.qty,
        total: i.price * i.qty,
      }));

      const primaryProduct = validItems[0];
      const productSummary = validItems.map(i => `${i.productName} (${i.qty})`).join(', ');

      await orderApi.updateOrder(patron.dbId, {
        status: orderStatus,
        payment_status: paymentStatus,
        qty: totalUnits,
        amount: totalAmount,
        product_id: primaryProduct.productId,
        product_name: productSummary,
        items: formattedItems,
      });

      Swal.fire({ icon: 'success', title: 'Order Confirmed & Placed!', toast: true, position: 'top-end', showConfirmButton: false, timer: 3000 });
      setOpen(false);
      if (onSuccess) onSuccess();
    } catch (e) {
      console.error(e);
      Swal.fire({ icon: 'error', title: 'Failed to confirm', text: 'Please try again.', toast: true, position: 'top-end', showConfirmButton: false, timer: 3000 });
    }
    setIsSubmitting(false);
  };

  const paymentOptions = paymentStatuses.filter((p: any) => p.name?.toLowerCase() !== 'pending').length > 0
    ? paymentStatuses.filter((p: any) => p.name?.toLowerCase() !== 'pending').map((p: any) => p.name)
    : ["Paid", "Unpaid", "Refunded"];

  const orderStatusOptions = orderStatuses.length > 0
    ? orderStatuses.map((s: any) => s.name)
    : ["Confirmed", "Processing", "Packed", "Shipped", "Delivered"];

  return (
    <Offcanvas
      isOpen={open}
      width={560}
      onClose={() => setOpen(false)}
      header={
        <div className="flex justify-between items-center">
          <div className="flex items-center gap-2">
            <span className="p-1.5 rounded-lg bg-[#461901]/10 text-[#461901]">
              <IconCircleCheck />
            </span>
            <div>
              <h2 className="font-bold text-base text-[#461901] dark:text-amber-200">
                Confirm & Place Order
              </h2>
              <p className="text-[11px] text-slate-500">
                Assign products, quantities & update order/payment status
              </p>
            </div>
          </div>
          <button
            onClick={() => setOpen(false)}
            className="p-1.5 rounded-lg text-slate-400 hover:text-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800 transition"
          >
            ✕
          </button>
        </div>
      }
      footer={
        <div className="flex items-center justify-between gap-3 w-full">
          <div>
            <span className="text-[10px] text-slate-400 font-bold block uppercase">Grand Total</span>
            <span className="text-lg font-black text-[#461901] dark:text-amber-300 font-mono">
              ₹{totalAmount.toLocaleString('en-IN')}
            </span>
          </div>
          <div className="flex gap-2">
            <button
              type="button"
              onClick={() => setOpen(false)}
              className="px-4 py-2 text-xs font-semibold text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-xl transition cursor-pointer"
            >
              Cancel
            </button>
            <Button
              type="button"
              onClick={handleConfirmPlacement}
              size="sm"
              disabled={isSubmitting || validItems.length === 0}
              children={isSubmitting ? 'Confirming...' : 'Confirm Placement'}
              variant="primary"
              styleType="filled"
            />
          </div>
        </div>
      }
    >
      <div className="space-y-4 text-left">
        {/* Patron Coordinates Summary */}
        <div className="p-3.5 bg-amber-50/70 dark:bg-slate-800 border border-[#ECE2D2] dark:border-slate-700 rounded-2xl space-y-2">
          <div className="flex items-center justify-between border-b border-[#ECE2D2]/60 pb-1.5">
            <div className="flex items-center gap-1.5">
              <span className="text-xs font-bold text-slate-800 dark:text-slate-100">{patron?.name || 'Customer'}</span>
              <span className="text-[9px] font-extrabold uppercase px-2 py-0.5 rounded-full bg-[#461901]/10 text-[#461901] dark:bg-amber-900/40 dark:text-amber-200">
                {patron?.channel || 'whatsapp'}
              </span>
            </div>
            <span className="text-[10px] font-mono text-slate-500 font-bold">{patron?.id}</span>
          </div>
          <div className="grid grid-cols-2 gap-2 text-xs text-slate-600 dark:text-slate-300">
            <div>
              <span className="text-[10px] text-slate-400 block font-medium">Phone</span>
              <span className="font-semibold">{patron?.phone || '-'}</span>
            </div>
            <div>
              <span className="text-[10px] text-slate-400 block font-medium">Email</span>
              <span className="font-semibold truncate block">{patron?.email || '-'}</span>
            </div>
            <div className="col-span-2">
              <span className="text-[10px] text-slate-400 block font-medium">Shipping Address</span>
              <span className="font-medium text-[11px] leading-relaxed block">{patron?.address || '-'}</span>
            </div>
          </div>
        </div>

        {/* Multiple Product Items Selection */}
        <div className="space-y-3">
          <div className="flex items-center justify-between">
            <label className="text-xs font-bold text-slate-800 dark:text-slate-200 uppercase tracking-wider">
              Select Products & Quantities ({items.length})
            </label>
            <button
              type="button"
              onClick={handleAddItem}
              className="inline-flex items-center gap-1 text-xs font-bold text-[#461901] dark:text-amber-300 hover:text-amber-800 bg-amber-100/60 dark:bg-amber-900/30 hover:bg-amber-100 px-2.5 py-1 rounded-lg transition cursor-pointer border border-amber-200 dark:border-amber-800"
            >
              <IconPlus /> Add Product
            </button>
          </div>

          {/* Filters: Product Type, Category, In-Stock */}
          <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-2.5 p-2.5 bg-[#FDFBF7] dark:bg-slate-800/80 rounded-xl border border-[#ECE2D2] dark:border-slate-700">
            <div className="flex flex-col sm:flex-row items-center gap-2 flex-1">
              <div className="w-full sm:w-1/2">
                <select
                  value={selectedProductType}
                  onChange={(e) => setSelectedProductType(e.target.value)}
                  className="w-full px-3 py-1.5 bg-white dark:bg-slate-900 border border-[#ECE2D2] dark:border-slate-700 rounded-lg text-xs font-bold text-slate-700 dark:text-slate-200 focus:outline-none focus:ring-2 focus:ring-amber-500/20 focus:border-[#CF8F42] transition cursor-pointer"
                >
                  <option value="">All Product Types</option>
                  <option value="single">Single Product</option>
                  <option value="variable">Variation Product</option>
                </select>
              </div>
              <div className="w-full sm:w-1/2">
                <select
                  value={selectedCategory}
                  onChange={(e) => setSelectedCategory(e.target.value)}
                  className="w-full px-3 py-1.5 bg-white dark:bg-slate-900 border border-[#ECE2D2] dark:border-slate-700 rounded-lg text-xs font-bold text-slate-700 dark:text-slate-200 focus:outline-none focus:ring-2 focus:ring-amber-500/20 focus:border-[#CF8F42] transition cursor-pointer"
                >
                  <option value="">All Categories</option>
                  {categories.map((cat) => (
                    <option key={cat} value={cat}>
                      {cat}
                    </option>
                  ))}
                </select>
              </div>
            </div>

            <label className="flex items-center gap-2 cursor-pointer text-xs font-bold text-slate-600 dark:text-slate-300 select-none shrink-0">
              <input
                type="checkbox"
                checked={inStockOnly}
                onChange={(e) => setInStockOnly(e.target.checked)}
                className="w-4 h-4 rounded text-amber-600 focus:ring-amber-500 border-slate-300 cursor-pointer accent-amber-700"
              />
              <span className="whitespace-nowrap">In-Stock Only ({channelLabel})</span>
            </label>
          </div>

          <div className="space-y-3">
            {items.map((item, idx) => {
              const selectedOpt =
                filteredProductOptions.find((o) => o.value === item.productId) ||
                (item.productId
                  ? {
                    label: `${item.productName} — ₹${item.price.toLocaleString()}`,
                    value: item.productId,
                    name: item.productName,
                    price: item.price,
                    stock: item.stock,
                    imageUrl: item.imageUrl,
                    sku: item.sku,
                  }
                  : null);

              return (
                <div
                  key={idx}
                  className="p-3.5 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl shadow-xs space-y-2.5 transition"
                >
                  <div className="flex items-center justify-between gap-2">
                    <span className="text-[10px] font-black uppercase text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/40 px-2 py-0.5 rounded border border-amber-200 dark:border-amber-900">
                      Item #{idx + 1}
                    </span>
                    {items.length > 1 && (
                      <button
                        type="button"
                        onClick={() => handleRemoveItem(idx)}
                        className="text-rose-500 hover:text-rose-700 hover:bg-rose-50 dark:hover:bg-rose-950/50 p-1 rounded-md transition cursor-pointer"
                        title="Remove product"
                      >
                        <IconTrashLines />
                      </button>
                    )}
                  </div>

                  <div className="w-full">
                    <Select
                      options={filteredProductOptions}
                      styles={selectStyles}
                      menuPortalTarget={typeof document !== 'undefined' ? document.body : undefined}
                      menuPosition="fixed"
                      placeholder="Search & choose product..."
                      value={selectedOpt || null}
                      onChange={(val: any) => handleProductSelect(idx, val)}
                    />
                  </div>

                  {item.productId && (
                    <div className="flex items-center justify-between pt-1 border-t border-slate-100 dark:border-slate-700/60 gap-3">
                      <div className="flex items-center gap-2 min-w-0">
                        {item.imageUrl ? (
                          <img
                            src={item.imageUrl}
                            alt=""
                            className="w-8 h-8 rounded-lg object-cover border border-slate-200 shrink-0"
                          />
                        ) : null}
                        <div className="min-w-0">
                          <span className="text-[11px] font-bold text-slate-700 dark:text-slate-200 block truncate">
                            ₹{item.price.toLocaleString('en-IN')} each
                          </span>
                          <span className={`text-[10px] font-semibold ${item.stock > 0 ? 'text-emerald-600' : 'text-rose-600'}`}>
                            {item.stock > 0 ? `${item.stock} in ${channelLabel} stock` : `Out of ${channelLabel} Stock`}
                          </span>
                        </div>
                      </div>

                      {/* Qty Controls */}
                      <div className="flex items-center gap-2 shrink-0">
                        <div className="flex items-center border border-[#ECE2D2] dark:border-slate-700 rounded-lg overflow-hidden bg-[#FBF6ED] dark:bg-slate-900">
                          <button
                            type="button"
                            disabled={item.qty <= 1}
                            onClick={() => handleQtyChange(idx, -1)}
                            className="w-7 h-7 flex items-center justify-center text-slate-600 dark:text-slate-300 hover:bg-amber-100 disabled:opacity-40 font-bold cursor-pointer"
                          >
                            -
                          </button>
                          <span className="w-8 text-center text-xs font-bold text-slate-800 dark:text-slate-100">
                            {item.qty}
                          </span>
                          <button
                            type="button"
                            disabled={item.stock > 0 && item.qty >= item.stock}
                            onClick={() => handleQtyChange(idx, 1)}
                            className="w-7 h-7 flex items-center justify-center text-slate-600 dark:text-slate-300 hover:bg-amber-100 disabled:opacity-40 font-bold cursor-pointer"
                          >
                            +
                          </button>
                        </div>

                        <div className="text-right min-w-[70px]">
                          <span className="text-xs font-black text-[#461901] dark:text-amber-300 font-mono block">
                            ₹{(item.price * item.qty).toLocaleString('en-IN')}
                          </span>
                        </div>
                      </div>
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>

        {/* Payment Status Selector (High Contrast & Clean Colors) */}
        <div className="space-y-1.5 pt-1">
          <label className="text-xs font-bold text-slate-800 dark:text-slate-200 uppercase tracking-wider">
            Payment Status
          </label>
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
            {paymentOptions.map((p: any) => {
              const active = paymentStatus.toLowerCase() === p.toLowerCase();

              const colorMaps: Record<string, { active: string; inactive: string }> = {
                paid: {
                  active: "bg-emerald-600 text-white border-emerald-700 shadow-sm ring-2 ring-emerald-500/30",
                  inactive: "bg-emerald-50 text-emerald-800 border-emerald-200 hover:bg-emerald-100 dark:bg-emerald-950/30 dark:text-emerald-300 dark:border-emerald-800",
                },
                unpaid: {
                  active: "bg-amber-600 text-white border-amber-700 shadow-sm ring-2 ring-amber-500/30",
                  inactive: "bg-amber-50 text-amber-800 border-amber-200 hover:bg-amber-100 dark:bg-amber-950/30 dark:text-amber-300 dark:border-amber-800",
                },
                pending: {
                  active: "bg-slate-700 text-white border-slate-800 shadow-sm ring-2 ring-slate-500/30",
                  inactive: "bg-slate-100 text-slate-700 border-slate-200 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:border-slate-700",
                },
                refunded: {
                  active: "bg-rose-600 text-white border-rose-700 shadow-sm ring-2 ring-rose-500/30",
                  inactive: "bg-rose-50 text-rose-800 border-rose-200 hover:bg-rose-100 dark:bg-rose-950/30 dark:text-rose-300 dark:border-rose-800",
                },
              };

              const styleConfig = colorMaps[p.toLowerCase()] || {
                active: "bg-[#461901] text-white border-amber-900",
                inactive: "bg-slate-100 text-slate-700 border-slate-200",
              };

              return (
                <button
                  key={p}
                  type="button"
                  onClick={() => {
                    setPaymentStatus(p);
                    if (p.toLowerCase() === 'paid') {
                      const processingMatch = orderStatuses.find((s: any) => s.name?.toLowerCase() === 'processing' || s.name?.toLowerCase() === 'process');
                      setOrderStatus(processingMatch ? processingMatch.name : 'Processing');
                    }
                  }}
                  className={`py-2 px-2.5 text-xs font-black rounded-xl border text-center transition cursor-pointer select-none uppercase tracking-wide ${active ? styleConfig.active : styleConfig.inactive
                    }`}
                >
                  {p}
                </button>
              );
            })}
          </div>
        </div>

        {/* Order Status Selector (High Contrast & Clean Colors) */}
        <div className="space-y-1.5 pt-1">
          <label className="text-xs font-bold text-slate-800 dark:text-slate-200 uppercase tracking-wider">
            Order Status
          </label>
          <div className="flex flex-wrap gap-2">
            {orderStatusOptions.map((s: any) => {
              const active = orderStatus.toLowerCase() === s.toLowerCase();

              const statusColorMaps: Record<string, { active: string; inactive: string }> = {
                pending: {
                  active: "bg-slate-700 text-white border-slate-800 ring-2 ring-slate-500/20",
                  inactive: "bg-slate-100 text-slate-700 border-slate-200 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300",
                },
                confirmed: {
                  active: "bg-emerald-600 text-white border-emerald-700 ring-2 ring-emerald-500/20",
                  inactive: "bg-emerald-50 text-emerald-800 border-emerald-200 hover:bg-emerald-100 dark:bg-emerald-950/30 dark:text-emerald-300 dark:border-emerald-800",
                },
                processing: {
                  active: "bg-blue-600 text-white border-blue-700 ring-2 ring-blue-500/20",
                  inactive: "bg-blue-50 text-blue-800 border-blue-200 hover:bg-blue-100 dark:bg-blue-950/30 dark:text-blue-300 dark:border-blue-800",
                },
                packed: {
                  active: "bg-purple-600 text-white border-purple-700 ring-2 ring-purple-500/20",
                  inactive: "bg-purple-50 text-purple-800 border-purple-200 hover:bg-purple-100 dark:bg-purple-950/30 dark:text-purple-300 dark:border-purple-800",
                },
                shipped: {
                  active: "bg-cyan-600 text-white border-cyan-700 ring-2 ring-cyan-500/20",
                  inactive: "bg-cyan-50 text-cyan-800 border-cyan-200 hover:bg-cyan-100 dark:bg-cyan-950/30 dark:text-cyan-300 dark:border-cyan-800",
                },
                delivered: {
                  active: "bg-teal-600 text-white border-teal-700 ring-2 ring-teal-500/20",
                  inactive: "bg-teal-50 text-teal-800 border-teal-200 hover:bg-teal-100 dark:bg-teal-950/30 dark:text-teal-300 dark:border-teal-800",
                },
              };

              const styleConfig = statusColorMaps[s.toLowerCase()] || {
                active: "bg-[#461901] text-white border-amber-900",
                inactive: "bg-slate-100 text-slate-700 border-slate-200",
              };

              return (
                <button
                  key={s}
                  type="button"
                  onClick={() => setOrderStatus(s)}
                  className={`py-1.5 px-3 text-xs font-extrabold rounded-xl border text-center transition cursor-pointer select-none uppercase tracking-wider ${active ? styleConfig.active : styleConfig.inactive
                    }`}
                >
                  {s}
                </button>
              );
            })}
          </div>
        </div>
      </div>
    </Offcanvas>
  );
}