Enhance the performance, user experience and ui of ProductsPage just like how OrdersPage ui is beautiful.
instead of throw use toast.error... I'm using nextjs 14, tailwind and typescript... keep bg-red and bg-danger don't use bg-red-100 and so on...
ProductsPage.tsx:
"use client";
import React, {
  useState,
  useEffect,
  useCallback,
  useMemo,
  ChangeEvent,
} from "react";
import Head from "next/head";
import Image from "next/image";
import { Search, Grid, List, Plus, Edit, Trash2 } from "lucide-react";
import AddProductDialog from "@/components/AddProductDialog";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import debounce from "lodash/debounce";
import EditProduct from "@/components/EditProduct";
import { getToken } from "@/app/auth";

const formatDate = (dateString: string) => {
  const date = new Date(dateString);
  return date.toISOString().split("T")[0]; // This will give you 'yyyy-mm-dd'
};

interface Size {
  id: number;
  name: string;
  price: number;
  qty: number;
  sold: number;
  color_id: number | null;
  images: string[];
}

interface Color {
  id: number;
  name: string;
  price: number | null;
  qty: number | null;
  sold: number;
  sizes: Size[];
  images: string;
}

interface ImageType {
  id: number;
  url: string;
  color_id: number | null;
  size_id: number | null;
}

interface Category {
  id: number;
  name: string;
  main_category_id: number;
  main_category_name: string;
}

interface Product {
  id: number;
  name: string;
  description: string;
  brand_id: number;
  has_color: boolean;
  has_size: boolean;
  product_type: string;
  price: number | null;
  qty: number | null;
  sold: number;
  created_at: string;
  updated_at: string;
  categories: Category[];
  colors: Color[];
  sizes: Size[];
  images: ImageType[];
}

interface ApiResponse {
  totalPages: number;
  products: Product[];
  pagination: {
    currentPage: number;
    totalPages: number;
    totalProducts: number;
    limit: number;
  };
}

interface Brand {
  id: number;
  name: string;
}

const PRODUCTS_PER_PAGE = 10;

export default function ProductsPage() {
  const [products, setProducts] = useState<Product[]>([]);
  const [brands, setBrands] = useState<Brand[]>([]);
  const [brandMap, setBrandMap] = useState<{ [key: number]: string }>({});
  const [currentPage, setCurrentPage] = useState<number>(1);
  const [searchTerm, setSearchTerm] = useState<string>("");
  const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
  const [sortBy, setSortBy] = useState<keyof Product>("created_at");
  const [isAddProductDialogOpen, setIsAddProductDialogOpen] =
    useState<boolean>(false);
  const [isEditProductDialogOpen, setIsEditProductDialogOpen] =
    useState<boolean>(false);
  const [productToEdit, setProductToEdit] = useState<Product | null>(null);
  const [isDeleteConfirmOpen, setIsDeleteConfirmOpen] =
    useState<boolean>(false);
  const [productToDelete, setProductToDelete] = useState<Product | null>(null);
  const [isDeleting, setIsDeleting] = useState<boolean>(false);
  const [totalPages, setTotalPages] = useState<number>(1);
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [searchInput, setSearchInput] = useState<string>("");

  // Debounce the search input to prevent excessive API calls
  const debouncedSearch = useMemo(
    () =>
      debounce((term: string) => {
        setSearchTerm(term);
        setCurrentPage(1);
      }, 300),
    [],
  );

  useEffect(() => {
    debouncedSearch(searchInput);
    return () => {
      debouncedSearch.cancel();
    };
  }, [searchInput, debouncedSearch]);

  const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
    setSearchInput(e.target.value);
  };

  // Fetch Brand Details
  const fetchBrands = useCallback(async () => {
    const token = getToken(); // Retrieve the token from localStorage

    if (!token) {
      toast.error("You must be logged in.");
      return;
    }

    try {
      const response = await fetch(
        `http://localhost:4000/subcategories/brands`,
        {
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${token}`, // Include the token here
          },
        },
      );

      if (!response.ok) {
        throw new Error("Failed to fetch brands");
      }

      const data: Brand[] = await response.json();
      setBrands(data);

      // Create a mapping from brand_id to brand_name for easy lookup
      const map: { [key: number]: string } = {};
      data.forEach((brand) => {
        map[brand.id] = brand.name;
      });
      setBrandMap(map);
      console.log(brandMap);
    } catch (error) {
      console.error("Error fetching brands:", error);
      toast.error("Failed to fetch brands. Please try again.");
    }
  }, []);

  // Fetch Products
  const fetchProducts = useCallback(async () => {
    setIsLoading(true);
    const token = getToken(); // Retrieve the token from localStorage

    if (!token) {
      toast.error("You must be logged in.");
      setIsLoading(false);
      return;
    }
    try {
      const response = await fetch(
        `http://localhost:4000/products?page=${currentPage}&limit=${PRODUCTS_PER_PAGE}&search=${encodeURIComponent(
          searchTerm,
        )}`,
        {
          cache: "no-cache",
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${token}`, // Include the token here
          },
        },
      );
      if (!response.ok) {
        throw new Error("Failed to fetch products");
      }
      const data: ApiResponse = await response.json();
      setProducts(data.products);
      setTotalPages(data.totalPages);
    } catch (error) {
      console.error("Error fetching products:", error);
      toast.error("Failed to fetch products. Please try again.");
    } finally {
      setIsLoading(false);
    }
  }, [currentPage, searchTerm]);

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

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

  const filteredProducts = useMemo(() => {
    return products
      .filter((product) =>
        product.name.toLowerCase().includes(searchTerm.toLowerCase()),
      )
      .sort((a, b) => {
        if (a[sortBy] === null) return 1;
        if (b[sortBy] === null) return -1;
        return a[sortBy]!.toString().localeCompare(b[sortBy]!.toString());
      });
  }, [products, searchTerm, sortBy]);

  const handleEditClick = (product: Product) => {
    setProductToEdit(product);
    setIsEditProductDialogOpen(true);
  };

  const renderPagination = () => {
    const pageNumbers = [];
    const maxVisiblePages = 5;
    let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
    let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);

    if (endPage - startPage + 1 < maxVisiblePages) {
      startPage = Math.max(1, endPage - maxVisiblePages + 1);
    }

    for (let i = startPage; i <= endPage; i++) {
      pageNumbers.push(i);
    }

    const handlePageChange = (newPage: number) => {
      setCurrentPage(newPage);
      window.scrollTo({ top: 0, behavior: "smooth" });
    };

    return (
      <div className="mt-8 flex items-center justify-center space-x-2">
        <button
          className="rounded-md bg-gray-200 px-3 py-1 text-sm text-gray-700 disabled:opacity-50"
          onClick={() => handlePageChange(Math.max(currentPage - 1, 1))}
          disabled={currentPage === 1}
        >
          Previous
        </button>
        {startPage > 1 && (
          <>
            <button
              className="rounded-md px-3 py-1 text-sm text-gray-700"
              onClick={() => handlePageChange(1)}
            >
              1
            </button>
            {startPage > 2 && <span className="text-gray-500">...</span>}
          </>
        )}
        {pageNumbers.map((number) => (
          <button
            key={number}
            className={`rounded-md px-3 py-1 text-sm ${
              currentPage === number
                ? "bg-blue-500 text-white"
                : "bg-gray-200 text-gray-700"
            }`}
            onClick={() => handlePageChange(number)}
          >
            {number}
          </button>
        ))}
        {endPage < totalPages && (
          <>
            {endPage < totalPages - 1 && (
              <span className="text-gray-500">...</span>
            )}
            <button
              className="rounded-md px-3 py-1 text-sm text-gray-700"
              onClick={() => handlePageChange(totalPages)}
            >
              {totalPages}
            </button>
          </>
        )}
        <button
          className="rounded-md bg-gray-200 px-3 py-1 text-sm text-gray-700 disabled:opacity-50"
          onClick={() =>
            handlePageChange(Math.min(currentPage + 1, totalPages))
          }
          disabled={currentPage === totalPages}
        >
          Next
        </button>
      </div>
    );
  };

  const handleEditClose = () => {
    setIsEditProductDialogOpen(false);
    setProductToEdit(null);
    fetchProducts(); // Refresh the product list after editing
  };

  const handleDeleteClick = (product: Product) => {
    setProductToDelete(product);
    setIsDeleteConfirmOpen(true);
  };

  const handleDeleteConfirm = async () => {
    if (productToDelete) {
      setIsDeleting(true);
      const token = getToken(); // the token from localStorage

      if (!token) {
        toast.error("You must be logged in.");
        setIsDeleting(false);
        return;
      }
      try {
        const response = await fetch(
          `http://localhost:4000/products/${productToDelete.id}`,
          {
            method: "DELETE",
            headers: {
              "Content-Type": "application/json",
              Authorization: `Bearer ${token}`, // Include the token here
            },
          },
        );

        if (!response.ok) {
          throw new Error("Failed to delete product");
        }

        setProducts(products.filter((p) => p.id !== productToDelete.id));
        setIsDeleteConfirmOpen(false);
        toast.success("Product deleted successfully");
      } catch (error) {
        console.error("Error deleting product:", error);
        toast.error("Failed to delete product. Please try again.");
      } finally {
        setIsDeleting(false);
      }
    }
  };

  // Helper function to get the first color's first size information
  const getFirstColorSizeInfo = (product: Product) => {
    if (product.has_color && product.has_size) {
      const firstColor = product.colors[0];
      if (firstColor) {
        const sizesForColor = product.sizes.filter(
          (size) => size.color_id === firstColor.id,
        );
        const firstSize = sizesForColor[0];
        if (firstSize) {
          return {
            colorName: firstColor.name,
            sizeName: firstSize.name,
            price: firstSize.price,
            qty: firstSize.qty,
            sold: Math.abs(firstSize.sold), // Ensuring 'sold' is absolute
          };
        }
      }
    }
    return null;
  };

  // Updated helper functions to accommodate the new logic
  const getProductPrice = (product: Product): string => {
    const colorSizeInfo = getFirstColorSizeInfo(product);
    if (colorSizeInfo) {
      return `$${colorSizeInfo.price.toLocaleString()}`;
    }
    if (!product.has_color && !product.has_size && product.price !== null)
      return `$${product.price.toLocaleString()}`;
    if (product.colors.length > 0 && product.colors[0].price !== null)
      return `$${product.colors[0].price.toLocaleString()}`;
    if (product.sizes.length > 0)
      return `$${product.sizes[0].price.toLocaleString()}`;
    return "N/A";
  };

  const getProductQuantity = (product: Product): number | string => {
    const colorSizeInfo = getFirstColorSizeInfo(product);
    if (colorSizeInfo) {
      return colorSizeInfo.qty;
    }
    if (product.qty !== null && product.qty !== 0) return product.qty;
    if (product.colors.length > 0 && product.colors[0].qty !== null)
      return product.colors[0].qty;
    if (product.sizes.length > 0) return product.sizes[0].qty;
    return "N/A";
  };

  const getProductSold = (product: Product): number => {
    let total = 0;
    if (product.colors) {
      product.colors.forEach((color) => {
        if (color.sizes) {
          color.sizes.forEach((size) => (total += size.sold));
        } else {
          total += color.sold;
        }
      });
    }
    if (product.sizes) {
      product.sizes.forEach((size) => {
        total += size.sold;
      });
    }
    total += product.sold;
    return Math.abs(total);
  };

  return (
    <div className="min-h-screen bg-gray-100">
      <Head>
        <title>Products - Naay Store</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className="container mx-auto px-4 py-8">
        <div className="mb-8 flex items-center justify-between">
          <h1 className="text-3xl font-bold text-gray-900">All Products</h1>
          <button
            className="flex items-center rounded-md bg-green-500 px-4 py-2 text-white transition duration-300 hover:bg-green-600"
            onClick={() => setIsAddProductDialogOpen(true)}
          >
            <Plus className="mr-2" size={20} />
            Add Product
          </button>
        </div>

        <div className="mb-8 flex flex-col items-center justify-between md:flex-row">
          <div className="relative mb-4 w-full md:mb-0 md:w-96">
            <input
              type="text"
              placeholder="Search products..."
              className="w-full rounded-lg border border-gray-300 py-2 pl-10 pr-4 focus:outline-none focus:ring-2 focus:ring-blue-500"
              value={searchInput}
              onChange={handleSearchChange}
            />
            <Search className="absolute left-3 top-2.5 h-5 w-5 text-gray-400" />
          </div>

          <div className="flex items-center space-x-4">
            <select
              className="rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
              value={sortBy}
              onChange={(e) => setSortBy(e.target.value as keyof Product)}
            >
              <option value="name">Sort by Name</option>
              <option value="created_at">Sort by Created At</option>
              <option value="product_type">Sort by Product Type</option>
            </select>

            <button
              className={`rounded-md p-2 ${
                viewMode === "grid" ? "bg-blue-500 text-white" : "bg-gray-200"
              }`}
              onClick={() => setViewMode("grid")}
            >
              <Grid className="h-5 w-5" />
            </button>
            <button
              className={`rounded-md p-2 ${
                viewMode === "list" ? "bg-blue-500 text-white" : "bg-gray-200"
              }`}
              onClick={() => setViewMode("list")}
            >
              <List className="h-5 w-5" />
            </button>
          </div>
        </div>

        {isLoading ? (
          <p className="text-center text-gray-700">Loading...</p>
        ) : (
          <div
            className={`grid ${
              viewMode === "grid"
                ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
                : "grid-cols-1"
            } gap-6`}
          >
            {filteredProducts.map((product) => {
              const colorSizeInfo = getFirstColorSizeInfo(product);
              return (
                <div
                  key={product.id}
                  className={`overflow-hidden rounded-lg bg-white shadow-md ${
                    viewMode === "list" ? "flex" : ""
                  }`}
                >
                  <div
                    className={`${
                      viewMode === "list" ? "w-1/3" : "w-full"
                    } relative pb-[100%]`}
                  >
                    {product.images.length > 0 && (
                      <Image
                        src={`https://storage.naayiq.com/resources/${product.images[0].url}`}
                        alt={product.name}
                        fill={true}
                        className="object-cover"
                      />
                    )}
                  </div>
                  <div className={`p-4 ${viewMode === "list" ? "w-2/3" : ""}`}>
                    <h2 className="text-xl font-semibold text-gray-800">
                      {product.name}
                    </h2>
                    <p
                      className="mb-4 text-sm text-gray-700"
                      style={{ direction: "rtl" }}
                      dangerouslySetInnerHTML={{
                        __html: product.description.replace(/\n/g, "<br />"),
                      }}
                    />
                    <div className="mb-4">
                      {/* Display Price */}
                      <p className="text-sm text-gray-600">
                        <span className="font-semibold">Price:</span>{" "}
                        {getProductPrice(product)}
                      </p>
                      {/* Display Quantity */}
                      <p className="text-sm text-gray-600">
                        <span className="font-semibold">Quantity:</span>{" "}
                        {getProductQuantity(product)}
                      </p>
                      {/* Display Sold */}
                      <p className="text-sm text-gray-600">
                        <span className="font-semibold">Sold:</span>{" "}
                        {getProductSold(product)}
                      </p>
                      {/* Display Created At */}
                      <p className="text-sm text-gray-600">
                        <span className="font-semibold">Created at:</span>{" "}
                        {formatDate(product.created_at)}
                      </p>
                      {/* Display Has Color */}
                      <p className="text-sm text-gray-600">
                        <span className="font-semibold">Has Color:</span>{" "}
                        {product.has_color ? "Yes" : "No"}
                      </p>
                      {/* Display Has Size */}
                      <p className="text-sm text-gray-600">
                        <span className="font-semibold">Has Size:</span>{" "}
                        {product.has_size ? "Yes" : "No"}
                      </p>
                      {/* Display Product Type */}
                      <p className="text-sm text-gray-600">
                        <span className="font-semibold">Product Type:</span>{" "}
                        {product.product_type}
                      </p>
                      {/* ===== New Labels ===== */}
                      {/* Display Brand */}
                      <p className="text-sm text-gray-600">
                        <span className="font-semibold">Brand:</span>{" "}
                        {brandMap[product.brand_id] ||
                          `ID: ${product.brand_id}`}
                      </p>
                      {/* Display Categories */}
                      <p className="text-sm text-gray-600">
                        <span className="font-semibold">Category:</span>{" "}
                        {product.categories
                          .map((category) => category.name)
                          .join(", ")}
                      </p>
                      {/* ===== End of New Labels ===== */}
                      {/* ===== Display First Color's First Size Information ===== */}
                      {colorSizeInfo && (
                        <div className="mt-2">
                          <p className="text-sm text-gray-600">
                            <span className="font-semibold">Color:</span>{" "}
                            {colorSizeInfo.colorName}
                          </p>
                          <p className="text-sm text-gray-600">
                            <span className="font-semibold">Size:</span>{" "}
                            {colorSizeInfo.sizeName}
                          </p>
                          <p className="text-sm text-gray-600">
                            <span className="font-semibold">Size Price:</span> $
                            {colorSizeInfo.price.toLocaleString()}
                          </p>
                          <p className="text-sm text-gray-600">
                            <span className="font-semibold">
                              Size Quantity:
                            </span>{" "}
                            {colorSizeInfo.qty}
                          </p>
                          <p className="text-sm text-gray-600">
                            <span className="font-semibold">Size Sold:</span>{" "}
                            {colorSizeInfo.sold}
                          </p>
                        </div>
                      )}
                      {/* ===== End of Color's Size Info ===== */}
                    </div>
                    <div className="space-x-2">
                      <button
                        className="rounded-md bg-blue-500 px-4 py-2 text-white transition duration-300 hover:bg-blue-600"
                        onClick={() => {
                          console.log(product);
                          handleEditClick(product);
                        }}
                      >
                        <Edit className="mr-1 inline-block" size={16} />
                        Edit
                      </button>
                      <button
                        className="rounded-md bg-red px-4 py-2 text-white transition duration-300 hover:bg-danger"
                        onClick={() => handleDeleteClick(product)}
                      >
                        <Trash2 className="mr-1 inline-block" size={16} />
                        Delete
                      </button>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        )}

        {renderPagination()}
      </main>

      {isAddProductDialogOpen && (
        <AddProductDialog
          isOpen={isAddProductDialogOpen}
          onClose={() => setIsAddProductDialogOpen(false)}
        />
      )}

      {isDeleteConfirmOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
          <div className="rounded-lg bg-white p-8">
            <h2 className="mb-4 text-xl font-semibold text-gray-800">
              Confirm Delete
            </h2>
            <p className="mb-8 text-gray-600">
              Are you sure you want to delete{" "}
              <span className="font-semibold">
                {productToDelete?.name ?? "this product"}
              </span>
              ?
            </p>
            <div className="space-x-4">
              <button
                className="rounded-md bg-red px-4 py-2 text-white transition duration-300 hover:bg-danger"
                onClick={handleDeleteConfirm}
                disabled={isDeleting}
              >
                {isDeleting ? "Deleting..." : "Yes, Delete"}
              </button>
              <button
                className="rounded-md bg-gray-300 px-4 py-2 text-gray-700 transition duration-300 hover:bg-gray-400"
                onClick={() => setIsDeleteConfirmOpen(false)}
                disabled={isDeleting}
              >
                Cancel
              </button>
            </div>
          </div>
        </div>
      )}
      {isEditProductDialogOpen && productToEdit && (
        <EditProduct
          isOpen={isEditProductDialogOpen}
          onClose={handleEditClose}
          // @ts-ignore
          product={productToEdit}
        />
      )}

      <ToastContainer />
    </div>
  );
}
make the design robust and user friendly...
this is the orders page take a look at it:
"use client";

import React, {
  useState,
  useEffect,
  useCallback,
  useMemo,
  useRef,
} from "react";
import DefaultLayout from "@/components/Layouts/DefaultLayout";
import {
  Trash2,
  Search,
  ChevronDown,
  ChevronUp,
  ChevronLeft,
  ChevronRight,
  EyeOff,
  Eye,
} from "lucide-react";
import { toast, ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import Image from "next/image";
import { getToken } from "@/app/auth";
import LoadingSpinner from "@/components/LoadingSpinner"; // Importing the spinner

const API_BASE_URL = "https://api2.naayiq.com";

// Interfaces (As Consolidated Above)

interface OrderItem {
  price: string;
  id: number;
  cart_id: number;
  product_id: number;
  size_id?: number | null;
  color_id?: number | null;
  quantity: number;
}

interface CartWithItems {
  id: number;
  user_id?: number | null;
  status: string;
  notes?: string;
  full_name?: string;
  governorate?: string;
  city?: string;
  address?: string;
  closest_point?: string;
  phone_number?: string;
  type?: string;
  created_at: string;
  coupon?: Coupon | null;
  updated_at: string;
  items: OrderItem[];
}

interface Product {
  id: number;
  name: string;
  description?: string;
  brand_id?: number;
  has_color: boolean;
  has_size: boolean;
  product_type: string;
  price: string;
  qty: number | null;
  created_at: string;
  updated_at: string;
  categories: Array<{ id: number; name: string }>;
  colors: Array<{ id: number; name: string }>;
  sizes: Array<{
    id: number;
    name: string;
    price: string;
    qty: number;
    color_id: number | null;
    images: string[];
  }>;
  images: Array<{
    id: number;
    url: string;
    color_id: number | null;
    size_id: number | null;
  }>;
}

interface Coupon {
  id: number;
  code: string;
  name: string;
  description: string;
  discount_amount: string | null;
  discount_percentage: string | null;
  start_date: string;
  end_date: string;
  usage_limit: number;
  min_purchase_amount: string;
  max_discount_amount: string;
  is_active: boolean;
}

interface OrderDetails {
  totalPrice: number;
  discountedPrice: number;
  deliveryCost: number;
}

interface OrderDetailsProps {
  order: CartWithItems;
  onUpdateStatus: (orderId: number, newStatus: string) => void;
  onDeleteOrder: (orderId: number) => void;
  fetchProduct: (productId: number) => Promise<{ product: Product } | null>;
  fetchCoupon?: (couponId: number) => Promise<Coupon | null>;
  products: { [key: number]: Product };
  excludedItems: Set<number>; // Track excluded product IDs
  onToggleExclude: (orderId: number, productId: number) => void; // Handler to toggle exclude
}

interface OrderItemProps {
  item: OrderItem;
  fetchProduct: (productId: number) => Promise<{ product: Product } | null>;
  product?: Product;
  isExcluded: boolean;
  onToggleExclude: () => void;
}

// Utility Functions

const formatPrice = (price: number) => {
  return `${price.toLocaleString()} IQD`;
};

const getStatusColor = (status: string) => {
  switch (status) {
    case "Pending":
      return "bg-orange-100 text-orange-800";
    case "On Way":
      return "bg-indigo-100 text-indigo-800";
    case "Ordered":
      return "bg-emerald-100 text-emerald-800";
    case "Rejected":
      return "bg-danger text-white"; // Retaining bg-danger as per user request
    default:
      return "bg-gray-100 text-gray-800";
  }
};

// Main Component

const OrdersPage: React.FC = () => {
  // State Variables
  const [orders, setOrders] = useState<CartWithItems[]>([]);
  const [products, setProducts] = useState<{ [key: number]: Product }>({});
  const productsRef = useRef<{ [key: number]: Product }>({});
  const [coupons, setCoupons] = useState<{ [key: number]: Coupon }>({});
  const [error, setError] = useState<string | null>(null);
  const [searchTerm, setSearchTerm] = useState("");
  const [first, setFirst] = useState(true);
  const [currentPage, setCurrentPage] = useState(1);
  const ordersPerPage = 10;
  const [statusFilter, setStatusFilter] = useState<string>("all");
  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc");
  const [isInitialLoading, setIsInitialLoading] = useState<boolean>(true); // Track initial loading

  // Excluded Items State: { [orderId]: Set<productId> }
  const [excludedItems, setExcludedItems] = useState<{
    [key: number]: Set<number>;
  }>({});

  // Ref to track ongoing fetches to prevent duplicate requests
  const ongoingFetches = useRef<{
    [key: number]: Promise<{ product: Product } | null>;
  }>({});

  // Ref to track existing order IDs for detecting new orders
  const existingOrderIdsRef = useRef<Set<number>>(new Set());

  // Sync productsRef with products state
  useEffect(() => {
    productsRef.current = products;
  }, [products]);

  // Fetch Orders

  const fetchOrders = useCallback(async () => {
    try {
      const token = getToken(); // Retrieve the token from localStorage

      if (!token) {
        toast.error("You must be logged in.");
        return;
      }
      const response = await fetch(`${API_BASE_URL}/cart`, {
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`, // Include the token here
        },
        cache: "no-cache",
      });
      if (!response.ok) throw new Error("Failed to fetch orders");
      const data: CartWithItems[] = await response.json();

      if (first) {
        // Initial Fetch
        setOrders(data);
        existingOrderIdsRef.current = new Set(data.map((order) => order.id));
        setFirst(false);
        setIsInitialLoading(false);
      } else {
        // Subsequent Fetches (Polling)
        const newOrders = data.filter(
          (order) => !existingOrderIdsRef.current.has(order.id),
        );
        if (newOrders.length > 0) {
          // Prepend new orders to the existing list
          setOrders((prevOrders) => [...newOrders, ...prevOrders]);
          // Update the existingOrderIdsRef
          newOrders.forEach((order) =>
            existingOrderIdsRef.current.add(order.id),
          );
          // Show toast notification
          toast.success(`Received ${newOrders.length} new order(s)!`);
        }
      }
    } catch (error) {
      console.error("Error fetching orders:", error);
      setError("Failed to fetch orders. Please try again.");
      setIsInitialLoading(false);
    }
  }, [first]);

  // Fetch Product

  const fetchProduct = useCallback(
    async (productId: number): Promise<{ product: Product } | null> => {
      // Check if product is already fetched
      if (productsRef.current[productId]) {
        return { product: productsRef.current[productId] };
      }

      // Check if there's an ongoing fetch for this product
      if (await ongoingFetches.current[productId]) {
        return await ongoingFetches.current[productId];
      }

      // Start fetching the product and store the promise
      const fetchPromise = (async () => {
        try {
          const token = getToken();
          if (!token) {
            toast.error("You must be logged in.");
            return null;
          }
          const response = await fetch(
            `${API_BASE_URL}/products/${productId}`,
            {
              headers: {
                "Content-Type": "application/json",
                Authorization: `Bearer ${token}`,
              },
            },
          );
          if (!response.ok) throw new Error("Failed to fetch product");
          const data = await response.json();
          setProducts((prev) => ({
            ...prev,
            [productId]: data.product,
          }));
          return data;
        } catch (error) {
          console.error(`Error fetching product ${productId}:`, error);
          return null;
        } finally {
          // Remove the promise from ongoing fetches
          delete ongoingFetches.current[productId];
        }
      })();

      ongoingFetches.current[productId] = fetchPromise;
      return fetchPromise;
    },
    [],
  );

  // Fetch Coupon

  const fetchCoupon = useCallback(
    async (couponId: number): Promise<Coupon | null> => {
      if (coupons[couponId]) {
        return coupons[couponId];
      }
      try {
        const token = getToken(); // Retrieve the token from localStorage

        if (!token) {
          toast.error("You must be logged in.");
          return null;
        }
        const response = await fetch(`${API_BASE_URL}/coupons/${couponId}`, {
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${token}`, // Include the token here
          },
        });
        if (!response.ok) throw new Error("Failed to fetch coupon");
        const data: Coupon = await response.json();
        setCoupons((prev) => ({ ...prev, [couponId]: data }));
        return data;
      } catch (error) {
        console.error(`Error fetching coupon ${couponId}:`, error);
        return null;
      }
    },
    [coupons],
  );

  // Initial Fetch and Polling

  useEffect(() => {
    fetchOrders();
    const intervalId = setInterval(fetchOrders, 30000); // Poll every 30 seconds
    return () => clearInterval(intervalId);
  }, [fetchOrders]);

  // Filtering, Sorting, and Pagination

  const filteredAndSortedOrders = useMemo(() => {
    return orders
      .filter((order) => {
        const matchesSearch =
          order.full_name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
          order.id.toString().includes(searchTerm);
        const matchesStatus =
          statusFilter === "all" || order.status === statusFilter;
        return matchesSearch && matchesStatus;
      })
      .sort((a, b) => {
        const dateA = new Date(a.created_at).getTime();
        const dateB = new Date(b.created_at).getTime();
        return sortOrder === "asc" ? dateA - dateB : dateB - dateA;
      });
  }, [orders, searchTerm, statusFilter, sortOrder]);

  const totalPages = Math.ceil(filteredAndSortedOrders.length / ordersPerPage);

  const currentOrders = useMemo(() => {
    const indexOfLastOrder = currentPage * ordersPerPage;
    const indexOfFirstOrder = indexOfLastOrder - ordersPerPage;
    return filteredAndSortedOrders.slice(indexOfFirstOrder, indexOfLastOrder);
  }, [filteredAndSortedOrders, currentPage, ordersPerPage]);

  const paginate = (pageNumber: number) => {
    setCurrentPage(Math.max(1, Math.min(pageNumber, totalPages)));
  };

  // Scroll to Top on Page Change
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [currentPage]);

  // Update Order Status

  const handleUpdateStatus = useCallback(
    async (orderId: number, newStatus: string) => {
      const oldStatus =
        orders.find((order) => order.id === orderId)?.status || "";

      // Optimistically update the UI
      setOrders((prevOrders) =>
        prevOrders.map((order) =>
          order.id === orderId ? { ...order, status: newStatus } : order,
        ),
      );

      try {
        const token = getToken();
        if (!token) {
          toast.error("You must be logged in.");
          throw new Error("Not logged in");
        }

        const response = await fetch(`${API_BASE_URL}/cart/carts/${orderId}`, {
          method: "PUT",
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${token}`,
          },
          body: JSON.stringify({ status: newStatus }),
        });

        const result = await response.json();
        if (!response.ok) {
          throw new Error(result.message);
        }

        toast.success(result.message);
      } catch (error) {
        console.error("Error updating order status:", error);
        // Revert the status if the update failed
        setOrders((prevOrders) =>
          prevOrders.map((order) =>
            order.id === orderId ? { ...order, status: oldStatus } : order,
          ),
        );
        toast.error("Failed to update order status. Please try again.");
      }
    },
    [orders],
  );

  // Delete Order

  const handleDeleteOrder = useCallback(
    async (orderId: number) => {
      const isConfirmed = window.confirm(
        "Are you sure you want to delete this order?",
      );

      if (isConfirmed) {
        try {
          const token = getToken(); // Retrieve the token from localStorage
          if (!token) {
            toast.error("You must be logged in.");
            return;
          }
          const response = await fetch(
            `${API_BASE_URL}/cart/carts/${orderId}`,
            {
              method: "DELETE",
              headers: {
                "Content-Type": "application/json",
                Authorization: `Bearer ${token}`, // Include the token here
              },
            },
          );
          const result = await response.json();
          if (!response.ok) {
            toast.error(result.message);
            throw new Error(result.message);
          } else {
            toast.success(result.message);
          }
          await fetchOrders();
        } catch (error) {
          console.error("Error deleting order:", error);
          setError("Failed to delete order. Please try again.");
        }
      }
    },
    [fetchOrders],
  );

  // Fetch products for current orders (without duplications)

  useEffect(() => {
    const fetchProductsForCurrentOrders = async () => {
      const productIds = new Set(
        currentOrders.flatMap((order) =>
          order.items.map((item) => item.product_id),
        ),
      );
      const fetchPromises: Promise<void>[] = [];

      productIds.forEach((productId) => {
        if (
          !productsRef.current[productId] &&
          !ongoingFetches.current[productId]
        ) {
          const promise = fetchProduct(productId).then(() => {});
          fetchPromises.push(promise);
        }
      });

      await Promise.all(fetchPromises);
    };

    fetchProductsForCurrentOrders();
  }, [currentOrders, fetchProduct]);

  // Handle Reset Pagination on Filter/Search Change
  useEffect(() => {
    setCurrentPage(1);
  }, [searchTerm, statusFilter]);

  // Handler to toggle exclude for a product in an order
  const handleToggleExclude = useCallback(
    (orderId: number, productId: number) => {
      setExcludedItems((prev) => {
        const orderExcluded = new Set(prev[orderId] || []);
        if (orderExcluded.has(productId)) {
          orderExcluded.delete(productId);
        } else {
          orderExcluded.add(productId);
        }
        return { ...prev, [orderId]: orderExcluded };
      });
    },
    [],
  );

  // Render

  return (
    <DefaultLayout>
      <div className="container mx-auto p-6">
        <h1 className="mb-6 text-3xl font-bold text-gray-800">Orders</h1>
        {/* Search and Filters */}
        <div className="mb-6 flex flex-col space-y-4 md:flex-row md:items-center md:justify-between md:space-y-0">
          <div className="flex items-center space-x-4">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
              <input
                type="text"
                placeholder="Search orders..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="w-64 rounded-md border border-gray-300 px-10 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
              />
            </div>
            <select
              value={statusFilter}
              onChange={(e) => setStatusFilter(e.target.value)}
              className="rounded-md border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
            >
              <option value="all">All Statuses</option>
              <option value="Pending">Pending</option>
              <option value="On Way">On Way</option>
              <option value="Ordered">Ordered</option>
              <option value="Rejected">Rejected</option>
            </select>
            <select
              value={sortOrder}
              onChange={(e) => setSortOrder(e.target.value as "asc" | "desc")}
              className="rounded-md border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
            >
              <option value="desc">Newest First</option>
              <option value="asc">Oldest First</option>
            </select>
          </div>
          {/* Add New Order Button (Optional) */}
          {/* <Link href="/orders/new">
            <button className="rounded bg-indigo-600 px-4 py-2 text-white hover:bg-indigo-700">
              Add New Order
            </button>
          </Link> */}
        </div>

        {/* Orders List */}
        {isInitialLoading ? (
          <LoadingSpinner />
        ) : (
          <div className="space-y-6">
            {currentOrders.map((order) => (
              <OrderDetails
                key={order.id}
                order={order}
                onUpdateStatus={handleUpdateStatus}
                onDeleteOrder={handleDeleteOrder}
                fetchProduct={fetchProduct}
                fetchCoupon={fetchCoupon}
                products={products}
                excludedItems={excludedItems[order.id] || new Set()}
                onToggleExclude={handleToggleExclude}
              />
            ))}
            {currentOrders.length === 0 && (
              <p className="text-center text-gray-500">No orders found.</p>
            )}
          </div>
        )}

        {/* Pagination Controls */}
        {totalPages > 1 && !isInitialLoading && (
          <div className="mt-6 flex items-center justify-center space-x-2">
            <button
              onClick={() => paginate(currentPage - 1)}
              disabled={currentPage === 1}
              className={`rounded bg-gray-200 p-2 transition-colors hover:bg-gray-300 ${
                currentPage === 1 ? "cursor-not-allowed opacity-50" : ""
              }`}
            >
              <ChevronLeft size={20} />
            </button>
            <span className="text-gray-700">
              Page {currentPage} of {totalPages}
            </span>
            <button
              onClick={() => paginate(currentPage + 1)}
              disabled={currentPage === totalPages}
              className={`rounded bg-gray-200 p-2 transition-colors hover:bg-gray-300 ${
                currentPage === totalPages
                  ? "cursor-not-allowed opacity-50"
                  : ""
              }`}
            >
              <ChevronRight size={20} />
            </button>
          </div>
        )}
        <ToastContainer />
      </div>
    </DefaultLayout>
  );
};

// OrderDetails Component

const OrderDetails: React.FC<OrderDetailsProps> = React.memo(
  ({
    order,
    onUpdateStatus,
    onDeleteOrder,
    fetchProduct,
    fetchCoupon,
    products,
    excludedItems,
    onToggleExclude,
  }) => {
    const [isExpanded, setIsExpanded] = useState(false);
    const [orderDetails, setOrderDetails] = useState<OrderDetails>({
      totalPrice: 0,
      discountedPrice: 0,
      deliveryCost: 0,
    });
    const [couponDetails, setCouponDetails] = useState<Coupon | null>(null); // To store detailed coupon info

    useEffect(() => {
      const calculateOrderDetails = async () => {
        let total = 0;
        for (const item of order.items) {
          if (excludedItems.has(item.product_id)) {
            continue; // Exclude this item
          }

          let product = products[item.product_id];
          if (!product) {
            const productData = await fetchProduct(item.product_id);
            if (productData && productData.product) {
              product = productData.product;
            }
          }
          if (product) {
            const size = product.sizes.find((s) => s.id === item.size_id);
            const itemPrice = size
              ? parseFloat(size.price)
              : parseFloat(product.price);
            total += itemPrice * item.quantity;
          }
        }

        let discountedPrice = total;
        let couponDetail: Coupon | null = null;

        if (order.coupon) {
          try {
            couponDetail = fetchCoupon
              ? await fetchCoupon(order.coupon.id)
              : null;
          } catch (e) {
            console.error("Error fetching coupon details:", e);
          }

          let discount = 0;
          if (order.coupon.discount_percentage) {
            const discountPerc = parseFloat(order.coupon.discount_percentage);
            if (!isNaN(discountPerc)) {
              discount = total * (discountPerc / 100);
            }
          } else if (order.coupon.discount_amount) {
            const discountAmt = parseFloat(order.coupon.discount_amount);
            if (!isNaN(discountAmt)) {
              discount = discountAmt;
            }
          }
          if (order.coupon.max_discount_amount) {
            const maxDiscount = parseFloat(order.coupon.max_discount_amount);
            if (!isNaN(maxDiscount)) {
              discount = Math.min(discount, maxDiscount);
            }
          }
          discountedPrice = total - discount;
        }

        const deliveryCost =
          total >= 100000 ||
          (order.governorate && order.governorate.toLowerCase() === "karbala")
            ? 0
            : 5000;

        setOrderDetails({ totalPrice: total, discountedPrice, deliveryCost });
        setCouponDetails(couponDetail);
      };

      calculateOrderDetails();
    }, [order, fetchProduct, products, fetchCoupon, excludedItems]);

    const finalTotal = orderDetails.discountedPrice + orderDetails.deliveryCost;

    const handleStatusChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
      const newStatus = e.target.value;
      onUpdateStatus(order.id, newStatus);
    };

    return (
      <div className="rounded-lg bg-white p-6 shadow-md transition-transform hover:scale-105">
        {/* Order Header */}
        <div className="mb-4 flex items-center justify-between">
          <h2 className="text-xl font-semibold">Order #{order.id}</h2>
          <div className="flex items-center space-x-2">
            <select
              value={order.status}
              onChange={handleStatusChange}
              className={`rounded px-2 py-1 text-sm ${getStatusColor(order.status)}`}
            >
              <option value="Pending">Pending</option>
              <option value="On Way">On Way</option>
              <option value="Ordered">Ordered</option>
              <option value="Rejected">Rejected</option>
            </select>
            <button
              onClick={() => onDeleteOrder(order.id)}
              className="hover:bg-red-700 rounded bg-danger p-1 text-white transition-colors"
            >
              <Trash2 size={16} />
            </button>
          </div>
        </div>

        {/* Order Information */}
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
          <div>
            <p className="text-gray-700">
              <strong>Customer Name:</strong> {order.full_name || "N/A"}
            </p>
            <p className="text-gray-700">
              <strong>Status:</strong>{" "}
              <span
                className={`rounded px-2 py-1 text-sm ${getStatusColor(order.status)}`}
              >
                {order.status}
              </span>
            </p>
            <p className="text-gray-700">
              <strong>Created At:</strong>{" "}
              {new Date(order.created_at).toLocaleString()}
            </p>
            {/* Additional Information */}
            <p className="capitalize text-gray-700">
              <strong>Place:</strong> {order.type || "N/A"}
            </p>
            <p className="text-gray-700">
              <strong>Delivery Instructions:</strong> {order.notes || "N/A"}
            </p>
          </div>
          <div>
            <p className="text-gray-700">
              <strong>Address:</strong> {order.address || "N/A"}
            </p>
            <p className="text-gray-700">
              <strong>Closest Point:</strong> {order.closest_point || "N/A"}
            </p>
            <p className="text-gray-700">
              <strong>Phone Number:</strong> {order.phone_number || "N/A"}
            </p>
            <p className="text-gray-700">
              <strong>Governorate:</strong> {order.governorate || "N/A"}
            </p>
          </div>
        </div>

        {/* Items Toggle */}
        <div className="mt-4">
          <button
            onClick={() => setIsExpanded(!isExpanded)}
            className="flex items-center text-blue-500 hover:text-blue-700 focus:outline-none"
          >
            <h3 className="mr-2 text-lg font-semibold">Items:</h3>
            {isExpanded ? <ChevronUp size={20} /> : <ChevronDown size={20} />}
          </button>
          {isExpanded && (
            <ul className="mt-2 space-y-4">
              {order.items.map((item) => (
                <OrderItem
                  key={item.id}
                  item={item}
                  fetchProduct={fetchProduct}
                  product={products[item.product_id]}
                  isExcluded={excludedItems.has(item.product_id)}
                  onToggleExclude={() =>
                    onToggleExclude(order.id, item.product_id)
                  }
                />
              ))}
            </ul>
          )}
        </div>

        {/* Pricing Summary */}
        <div className="mt-4 border-t border-gray-200 pt-4">
          <div className="flex justify-between text-gray-700">
            <span>Total Price:</span>
            <span>{formatPrice(orderDetails.totalPrice)}</span>
          </div>
          {couponDetails && (
            <>
              <div className="flex justify-between text-gray-700">
                <span>Coupon Applied:</span>
                <span>
                  {couponDetails.code} ({couponDetails.name})
                </span>
              </div>
              <div className="flex justify-between text-gray-700">
                <span>Discount:</span>
                <span>
                  {couponDetails.discount_percentage
                    ? `${couponDetails.discount_percentage}%`
                    : formatPrice(
                        parseFloat(couponDetails.discount_amount || "0"),
                      )}
                  {couponDetails.discount_percentage &&
                    couponDetails.max_discount_amount &&
                    ` Max: ${formatPrice(parseFloat(couponDetails.max_discount_amount))}`}
                </span>
              </div>
              <div className="flex justify-between font-semibold text-green-600">
                <span>Discounted Price:</span>
                <span>{formatPrice(orderDetails.discountedPrice)}</span>
              </div>
            </>
          )}
          <div className="flex justify-between text-gray-700">
            <span>Delivery Cost:</span>
            <span>
              {orderDetails.deliveryCost === 0
                ? "Free"
                : formatPrice(orderDetails.deliveryCost)}
            </span>
          </div>
          <div className="flex justify-between text-xl font-bold">
            <span>Final Total:</span>
            <span>{formatPrice(finalTotal)}</span>
          </div>
          <div
            className={`mt-4 rounded bg-danger p-4 text-white ${excludedItems.size > 0 ? "opacity-100" : "opacity-0"}`}
          >
            <p>
              <strong>Warning:</strong> You have excluded {excludedItems.size}{" "}
              product{excludedItems.size > 1 ? "s" : ""} from this order. The
              total price and discounts have been adjusted accordingly. You can
              re-include them if needed.
            </p>
          </div>
        </div>
      </div>
    );
  },
);

OrderDetails.displayName = "OrderDetails";

// OrderItem Component

const OrderItem: React.FC<OrderItemProps> = React.memo(
  ({
    item,
    fetchProduct,
    product: initialProduct,
    isExcluded,
    onToggleExclude,
  }) => {
    const product = initialProduct || null;
    const [isLoading, setIsLoading] = useState(!product);

    useEffect(() => {
      let isMounted = true;

      if (!product) {
        setIsLoading(true);
        fetchProduct(item.product_id).then((data) => {
          if (data && data.product && isMounted) {
            // Product is already added to the cache in fetchProduct
          }
          if (isMounted) setIsLoading(false);
        });
      }

      return () => {
        isMounted = false;
      };
    }, [item.product_id, fetchProduct, product]);

    if (isLoading) {
      return (
        <li className="flex animate-pulse items-center space-x-4 rounded-md bg-gray-50 p-4">
          <div className="h-16 w-16 flex-shrink-0 rounded-md bg-gray-200"></div>
          <div className="flex-grow space-y-2">
            <div className="h-4 w-3/4 rounded bg-gray-200"></div>
            <div className="h-3 w-1/2 rounded bg-gray-200"></div>
            <div className="h-3 w-1/3 rounded bg-gray-200"></div>
          </div>
          <button onClick={onToggleExclude} className="ml-4">
            <span className="sr-only">Toggle Exclude</span>
            {isExcluded ? (
              <Eye size={20} color="#d32f2f" /> // bg-danger color
            ) : (
              <EyeOff size={20} color="#d32f2f" />
            )}
          </button>
        </li>
      );
    }

    if (!product) {
      return <li className="text-red-500">Error loading product.</li>;
    }

    const size = product.sizes.find((s) => s.id === item.size_id);
    const color = product.colors.find((c) => c.id === item.color_id);
    const itemPrice = size ? parseFloat(size.price) : parseFloat(product.price);
    const totalItemPrice = itemPrice * item.quantity;

    const image =
      product.images.find(
        (img) =>
          (img.size_id === item.size_id || img.color_id === item.color_id) &&
          (img.size_id === null || img.color_id === null),
      ) || product.images[0];

    return (
      <li className="flex items-center space-x-4 rounded-md bg-gray-50 p-4">
        <div
          className={`h-16 w-16 flex-shrink-0 overflow-hidden rounded-md border ${
            isExcluded ? "border-red-400" : "border-gray-200"
          }`}
        >
          {image ? (
            <Image
              src={`https://storage.naayiq.com/resources/${image.url}`}
              alt={product.name}
              width={64}
              height={64}
              className={`h-full w-full object-cover object-center ${
                isExcluded ? "opacity-50 grayscale" : ""
              }`}
              loading="lazy" // Lazy loading for better performance
            />
          ) : (
            <div className="flex h-full w-full items-center justify-center bg-gray-100 text-gray-400">
              No image
            </div>
          )}
        </div>
        <div className="flex-grow">
          <div className="flex items-center justify-between">
            <h4 className="font-medium text-gray-800">{product.name}</h4>
            <button onClick={onToggleExclude} className="ml-4">
              <span className="sr-only">Toggle Exclude</span>
              {isExcluded ? (
                <Eye size={20} color="#d32f2f" /> // bg-danger color
              ) : (
                <EyeOff size={20} color="#d32f2f" />
              )}
            </button>
          </div>
          <p className="text-sm text-gray-500">
            {size && `Size: ${size.name}`} {color && `| Color: ${color.name}`}
          </p>
          <p className="text-sm text-gray-600">
            {item.quantity} x {formatPrice(itemPrice)} ={" "}
            {formatPrice(totalItemPrice)}
          </p>
          {isExcluded && (
            <p className="text-red-500 text-xs italic">Excluded from total</p>
          )}
        </div>
      </li>
    );
  },
);

OrderItem.displayName = "OrderItem";

export default OrdersPage;