why the size price is 0 for an object like this:
{
	"product": {
		"id": 1285,
		"name": "‏Mavala Double Eyelash Nutritional Care",
		"description": "سيروم الرموش و الحواجب من ماڤالا \r\nيحتوي على خلاصة طبيعية غنية بالفيتامينات والبروتينات التي تقوي  وتغذي وتحمي الرموش والحواجب ستصبح أطول وأكثر مقاومة. \r\nيساعد على إطالة الرموش  و الحواجب وتكثيفها \r\nوتجعل ملمس رموشك ناعمة\r\nوتصبح حواجبك أكثر جمالاً",
		"brand_id": 77,
		"has_color": false,
		"has_size": true,
		"product_type": "size",
		"price": 0,
		"qty": 0,
		"sold": 6,
		"created_at": "2024-09-30T17:36:03.560Z",
		"updated_at": "2024-09-30T17:36:03.560Z",
		"categories": [
			{
				"id": 158,
				"name": "Lash Serum",
				"main_category_id": 4,
				"main_category_name": "Eye Care"
			}
		],
		"colors": [],
		"sizes": [
			{
				"id": 3077,
				"name": "10 ml",
				"price": 20000,
				"qty": 0,
				"sold": 6,
				"color_id": null,
				"images": [
					"3117.jpeg"
				]
			}
		],
		"images": [
			{
				"id": 629,
				"url": "3117.jpeg",
				"color_id": null,
				"size_id": 3077
			}
		]
	}
}
while it is not for object like this:
{"product":{"id":173,"name":"‏Beauty of Joseon Relief Sun Rice Probiotics Spf50","description":"واقي الشمس من Beauty of Joseon\r\nكريم خفيف الوزن: تركيبة كريمية بدون لمعان أو لون أبيض.\r\nغني بمكونات مهدئة ومشرقة للبشرة. غني بمستخلص نخالة الأرز (30٪) ومركب خلاصة تخمير الحبوب. يرطب ويغذي البشرة بعمق دون اللزوجة\r\nواقي الشمس الكيميائي الجديد من بيوتي اوف جوسون ، الذي يوضع بلطف على الجلد ، أو الزهر الأبيض. مناسبة للبشرة الحساسة. اس بي اف 50 معتمد من مختبرين منفصلين في كوريا وإسبانيا.","brand_id":115,"has_color":false,"has_size":true,"product_type":"size","price":0,"qty":0,"sold":1,"created_at":"2024-08-25T21:25:48.958Z","updated_at":"2024-10-01T20:10:19.659Z","categories":[{"id":173,"name":"Face Sunscreens","main_category_id":1,"main_category_name":"Face Care"}],"colors":[],"sizes":[{"id":1832,"name":"50 ml","price":25000,"qty":67,"sold":1,"color_id":null,"images":["1225.webp"]}],"images":[{"id":732,"url":"1225.webp","color_id":null,"size_id":1832}]}}
orders/page.jsx:
// src/pages/orders/page.tsx

"use client";

import React, { useState, useEffect, useCallback, 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";

// Base API URL
const API_BASE_URL = process.env.NEXT_PUBLIC_API;

// Interfaces

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_id: number | null; // Added coupon_id
  coupon?: Coupon | null; // Optional coupon object
  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 | null;
  is_active: boolean;
  coupon_image: string;
  created_at: string;
  updated_at: string;
}

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;
  isDeleting: boolean;
}

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 [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);

  // 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>;
  }>({});

  // State for pagination
  const [totalOrders, setTotalOrders] = useState(0);
  const totalPages = Math.ceil(totalOrders / ordersPerPage);

  // State to track deleting orders
  const [deletingOrders, setDeletingOrders] = useState<Set<number>>(new Set());

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

  // Fetch Coupon based on ID
  const fetchCoupon = useCallback(
    async (couponId: number): Promise<Coupon | null> => {
      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();
        return data;
      } catch (error) {
        console.error(`Error fetching coupon ${couponId}:`, error);
        return null;
      }
    },
    [],
  );

  // Function to fetch all unique coupons
  const fetchAllCoupons = useCallback(
    async (couponIds: Set<number>) => {
      const fetchedCoupons: { [key: number]: Coupon } = {};

      await Promise.all(
        Array.from(couponIds).map(async (id) => {
          const coupon = await fetchCoupon(id);
          if (coupon) {
            fetchedCoupons[id] = coupon;
          }
        }),
      );

      setCoupons((prev) => ({ ...prev, ...fetchedCoupons }));
    },
    [fetchCoupon],
  );
  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 Orders with Pagination
  const fetchOrders = useCallback(async () => {
    try {
      const token = getToken(); // Retrieve the token from localStorage

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

      // Prepare query parameters
      const params = new URLSearchParams({
        page: currentPage.toString(),
        limit: ordersPerPage.toString(),
      });

      if (statusFilter !== "all") {
        params.append("status", statusFilter);
      }

      if (searchTerm) {
        params.append("search", searchTerm);
      }

      // Assuming the backend supports filtering and sorting via query params
      const response = await fetch(
        `${API_BASE_URL}/cart/all?${params.toString()}`,
        {
          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 = await response.json();

      const { carts, total } = data as {
        carts: CartWithItems[];
        total: number;
      };

      setOrders(carts);
      setTotalOrders(total);

      // Extract unique coupon IDs
      const uniqueCouponIds = new Set<number>();
      carts.forEach((cart) => {
        if (cart.coupon_id !== null) {
          uniqueCouponIds.add(cart.coupon_id);
        }
      });

      // Fetch all unique coupons
      await fetchAllCoupons(uniqueCouponIds);

      setIsInitialLoading(false);
    } catch (error) {
      console.error("Error fetching orders:", error);
      setError("Failed to fetch orders. Please try again.");
      setIsInitialLoading(false);
    }
  }, [currentPage, ordersPerPage, statusFilter, searchTerm, fetchAllCoupons]);

  // Initial Fetch and Fetch on Dependency Changes
  useEffect(() => {
    setIsInitialLoading(true);
    fetchOrders();
  }, [fetchOrders]);

  // Fetch products for current orders (without duplications)
  useEffect(() => {
    const fetchProductsForCurrentOrders = async () => {
      const productIds = new Set(
        orders.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();
  }, [orders, fetchProduct]);

  // Map coupons to orders
  useEffect(() => {
    setOrders((prevOrders) =>
      prevOrders.map((order) => ({
        ...order,
        coupon: order.coupon_id ? coupons[order.coupon_id] : null,
      })),
    );
  }, [coupons]);

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

  // Fetch Product based on ID

  // 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/${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],
  );

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

      if (isConfirmed) {
        // Find the order to be deleted
        const orderToDelete = orders.find((order) => order.id === orderId);
        if (!orderToDelete) {
          toast.error("Order not found.");
          return;
        }

        // Optimistically remove the order from the UI
        setOrders((prevOrders) =>
          prevOrders.filter((order) => order.id !== orderId),
        );
        setTotalOrders((prevTotal) => prevTotal - 1);
        setDeletingOrders((prev) => new Set(prev).add(orderId));

        try {
          const token = getToken(); // Retrieve the token from localStorage
          if (!token) {
            throw new Error("You must be logged in.");
          }

          const response = await fetch(`${API_BASE_URL}/cart/${orderId}`, {
            method: "DELETE",
            headers: {
              "Content-Type": "application/json",
              Authorization: `Bearer ${token}`, // Include the token here
            },
          });
          const result = await response.json();
          if (!response.ok) {
            throw new Error(result.message || "Failed to delete order.");
          }

          // Optionally, display a success toast
          toast.success(result.message || "Order deleted successfully.");
        } catch (error) {
          console.error("Error deleting order:", error);
          // Restore the order in case of an error
          setOrders((prevOrders) => [orderToDelete, ...prevOrders]);
          setTotalOrders((prevTotal) => prevTotal + 1);
          toast.error(
            error instanceof Error
              ? error.message
              : "Failed to delete order. Please try again.",
          );
        } finally {
          setDeletingOrders((prev) => {
            const newSet = new Set(prev);
            newSet.delete(orderId);
            return newSet;
          });
        }
      }
    },
    [orders],
  );

  // 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 };
      });
    },
    [],
  );

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

  // 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>
        </div>

        {/* Orders List */}
        {isInitialLoading ? (
          <LoadingSpinner />
        ) : (
          <div className="space-y-6">
            {orders.length > 0 ? (
              orders.map((order) => (
                <OrderDetails
                  key={order.id}
                  order={order}
                  onUpdateStatus={handleUpdateStatus}
                  onDeleteOrder={handleDeleteOrder}
                  fetchProduct={fetchProduct}
                  products={products}
                  excludedItems={excludedItems[order.id] || new Set()}
                  onToggleExclude={handleToggleExclude}
                  isDeleting={deletingOrders.has(order.id)}
                />
              ))
            ) : (
              <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,
    products,
    excludedItems,
    onToggleExclude,
    isDeleting,
  }) => {
    const [isExpanded, setIsExpanded] = useState(false);
    const [orderDetails, setOrderDetails] = useState<OrderDetails>({
      totalPrice: 0,
      discountedPrice: 0,
      deliveryCost: 0,
    });

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

          const product = products[item.product_id];
          if (!product) continue;

          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;

        if (order.coupon) {
          const minPurchase = parseFloat(order.coupon.min_purchase_amount);
          if (total >= minPurchase) {
            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;
          } else {
            // If total is less than min_purchase_amount, no discount
            discountedPrice = total;
          }
        }

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

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

      calculateOrderDetails();
    }, [order, products, 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,
              )}`}
              disabled={isDeleting}
            >
              <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={`rounded bg-red p-1 text-white transition-colors hover:bg-danger ${
                isDeleting ? "cursor-not-allowed opacity-50" : ""
              }`}
              disabled={isDeleting}
            >
              {isDeleting ? <LoadingSpinner /> : <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>
          {order.coupon && (
            <div className="flex justify-between text-gray-700">
              <span>Coupon Applied:</span>
              <span>
                {order.coupon.code} ({order.coupon.name})
              </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>
          {order.coupon &&
            orderDetails.discountedPrice !== orderDetails.totalPrice && (
              <div className="mt-2 flex justify-between text-green-600">
                <span>Discount Applied:</span>
                <span>
                  -
                  {formatPrice(
                    orderDetails.totalPrice - orderDetails.discountedPrice,
                  )}
                </span>
              </div>
            )}
          <div
            className={`mt-4 rounded bg-red 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 has 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"
            />
          ) : (
            <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;