"use client";
import React, { useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import { AppDispatch } from "@/store/store";
import { cartReset, updateCart } from "@/store/actions/user/userAction";
import DashboardLayout from "@/components/layout/DashboardLayout";
import { useRouter } from "next/navigation";
import apis, { BUCKET_ROOT } from "@/utils/apis";
import dayjs from "dayjs";
import {
  Pagination,
  PaginationContent,
  PaginationLink,
  PaginationItem,
  PaginationPrevious,
  PaginationNext,
  PaginationEllipsis,
} from "@/components/ui/pagination";
import { Button } from "@/components/ui/button";
import { currency, getTodayClosingTime, isWithinOperatingHours, getValidImage } from "@/lib/utils";
import { useGlobalContext } from "@/context/Provider";
import { Clock, MapPin, RefreshCcw, XCircle } from "lucide-react";

const statusOrder: any = {
  upcomming: "Upcoming",
  order_placed: "Order Placed",
  order_confirmed: "Order Confirmed",
  ready_for_pickup: "Ready For Pickup",
  out_for_delivery: "Out For Delivery",
  delivered: "Delivered",
  cancelled: "Cancelled",
  pending: "Pending",
  preparing: "Preparing",
  picked_up: "Picked Up",
  on_the_way: "On The Way",
};

const getStatusStyle = (status: string) => {
  switch (status) {
    case "delivered":
      return "bg-green-50 text-green-700 border-green-200";
    case "cancelled":
      return "bg-red-50 text-red-700 border-red-200";
    case "upcomming":
    case "order_placed":
    case "preparing":
      return "bg-blue-50 text-blue-700 border-blue-200";
    case "out_for_delivery":
    case "on_the_way":
      return "bg-brand-50 text-primary border-brand-200";
    default:
      return "bg-gray-50 text-gray-700 border-gray-200";
  }
};

const CategoryCard = ({ image, data, onCancel, onRepeat, filter, isRepeating }: any) => {
  const statusLabel = statusOrder?.[data?.order_status] || data?.order_status;
  const statusClass = getStatusStyle(data?.order_status);

  const restaurantStatus = data?.restaurant?.status;
  const workingDays = data?.restaurant?.working_day;
  const closingTime = getTodayClosingTime(workingDays);
  const isOperatingNow = isWithinOperatingHours(closingTime);
  const isOffline = restaurantStatus === "offline";
  const isRepeatDisabled = isOffline || !isOperatingNow;

  return (
    <div className="group bg-white rounded-2xl shadow-sm hover:shadow-lg transition-all duration-300 border border-gray-100 overflow-hidden flex flex-col h-full relative">
      <div className="p-5 flex-1 flex flex-col">
        {/* Header */}
        <div className="flex justify-between items-start mb-4 gap-3">
          <div className="flex gap-3 items-start overflow-hidden">
            <div className="h-14 w-14 rounded-xl overflow-hidden bg-gray-100 flex-shrink-0 border border-gray-100">
              {image ? (
                <img
                  src={image}
                  alt="Restaurant Logo"
                  className="h-full w-full object-cover group-hover:scale-110 transition-transform duration-500"
                />
              ) : (
                <div className="h-full w-full flex items-center justify-center text-gray-400 text-[10px] font-medium">
                  No Image
                </div>
              )}
            </div>
            <div className="flex flex-col overflow-hidden">
              <h3 className="font-bold text-gray-900 text-lg leading-tight truncate pr-2">
                {data?.restaurant?.restaurant_name || "Home Cooked Meal"}
              </h3>
              <div className="flex items-center text-gray-500 text-xs mt-1 truncate">
                <MapPin className="w-3 h-3 mr-1 flex-shrink-0" />
                <span className="truncate">
                  {data?.restaurant?.address?.name}, {data?.restaurant?.address?.city}
                </span>
              </div>
              <div className="flex items-center text-gray-400 text-xs mt-1">
                <Clock className="w-3 h-3 mr-1 flex-shrink-0" />
                <span>
                  {dayjs(data?.order_placed_at).format("DD MMM, hh:mm a")}
                </span>
              </div>
            </div>
          </div>
        </div>

        {/* Status Badge */}
        <div className="mb-4">
          <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${statusClass}`}>
            {statusLabel}
          </span>
        </div>

        {/* Divider */}
        <div className="border-t border-dashed border-gray-200 my-2"></div>

        {/* Items List */}
        <div className="space-y-2 mb-4 flex-1">
          {(data?.other_cart_items?.length > 0 ? data?.other_cart_items : data?.cart_items)?.slice(0, 2).map((item: any) => {
            const addOnTotal = (item?.add_ons || []).reduce(
              (sum: number, ao: any) => sum + (ao?.price || 0),
              0
            );
            const toppingTotal = (item?.toppings || []).reduce(
              (sum: number, tp: any) => sum + (tp?.price || 0),
              0
            );
            const variantPrice =
              (item?.quantity?.add_price || 0) +
              (item?.pieces?.add_price || 0) +
              (item?.size?.add_price || 0);

            // Use total_price if available, otherwise use priceQuantity if available, otherwise calculate
            const totalPrice = Number(
              item?.total_price ||
              (item?.priceQuantity ? parseFloat(item.priceQuantity) : null) ||
              ((parseFloat(item?.price || 0) + addOnTotal + toppingTotal + variantPrice) *
                (item?.no_of_quantity || 0))
            );

            return (
              <div className="flex justify-between text-sm items-start" key={item.food_id || item.item_id}>
                <div className="flex items-center gap-2 text-gray-700">
                  <span className="bg-gray-100 text-gray-600 px-1.5 py-0.5 rounded text-xs font-medium min-w-[20px] text-center">
                    {item?.no_of_quantity}x
                  </span>
                  <span className="line-clamp-1">{item?.name}</span>
                </div>
                <span className="font-medium text-gray-900 whitespace-nowrap">
                  {currency}{totalPrice?.toFixed(2)}
                </span>
              </div>
            );
          })}
          {(data?.other_cart_items?.length > 0 ? data?.other_cart_items : data?.cart_items)?.length > 2 && (
            <div className="text-xs text-primary font-medium pl-8">
              +{(data?.other_cart_items?.length > 0 ? data?.other_cart_items : data?.cart_items)?.length - 2} more items
            </div>
          )}
        </div>

        {/* Total Bill */}
        <div className="flex justify-between items-center pt-3 mt-auto border-t border-gray-100">
          <span className="text-gray-500 font-medium text-sm">Total Bill</span>
          <span className="text-lg font-bold text-gray-900">
            {currency}{data?.total_amount?.toFixed(2)}
          </span>
        </div>
      </div>

      {/* Actions */}
      {data?.order_status === "upcomming" && (
        <div className="bg-gray-50 px-5 py-3 border-t border-gray-100 flex justify-end">
          <Button
            variant="destructive"
            size="sm"
            className="w-full sm:w-auto flex items-center gap-2 bg-red-600 hover:bg-red-700 text-white"
            onClick={(e) => {
              e.stopPropagation();
              onCancel(data._id);
            }}
          >
            <XCircle className="w-4 h-4" /> Cancel Order
          </Button>
        </div>
      )}

      {data?.order_status === "delivered" && filter !== "upcoming" && (
        <div 
          className="bg-gray-50 px-5 py-3 border-t border-gray-100 flex justify-end"
          onClick={(e) => e.stopPropagation()}
        >
          <Button
            variant="outline"
            disabled={isRepeatDisabled || isRepeating}
            className="w-full sm:w-auto flex items-center justify-center gap-2 border-primary text-primary py-2 px-4 rounded-lg hover:bg-brand-50 hover:text-primary transition font-medium text-sm disabled:opacity-60"
            onClick={(e) => {
              e.stopPropagation();
              onRepeat(data);
            }}
          >
            <RefreshCcw className={`w-4 h-4 ${isRepeating ? "animate-spin" : ""}`} />
            {isRepeating ? "Updating Cart..." : "Repeat Order"}
          </Button>
        </div>
      )}
    </div>
  );
};

const MyOrders = () => {
  const router = useRouter();
  const dispatch: AppDispatch = useDispatch();
  const [list, setList] = useState<any[]>([]);
  const { Toast } = useGlobalContext();
  const [filter, setFilter] = useState<string>("past");
  const [pageNumber, setPageNumber] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [parentCategories, setParentCategories] = useState<any[]>([]);
  const [repeatingOrderId, setRepeatingOrderId] = useState<string | null>(null);
  const limitItems = 9;

  useEffect(() => {
    const fetchParentCategories = async () => {
      try {
        const response = await apis.ParentCategory.getParnetCategory();
        const categories = response?.data || [];
        const filtered = categories.filter(
          (cat: any) =>
            cat.slug?.toLowerCase() !== "food" &&
            cat.type?.toLowerCase() !== "food" &&
            cat.name?.toLowerCase() !== "food"
        );
        setParentCategories(filtered);
      } catch (error) {
        console.error("Error fetching categories:", error);
      }
    };
    fetchParentCategories();
  }, []);

  const getOrders = async () => {
    try {
      const urlSearchParam = new URLSearchParams();
      urlSearchParam.set("page", String(pageNumber));
      urlSearchParam.set("limit", String(limitItems));

      if (filter === "upcoming") {
        urlSearchParam.set("order_status", "upcomming");
      } else if (filter !== "past") {
        urlSearchParam.set("order_type", filter);
      }

      const apiRes = await apis.Orders.get(urlSearchParam?.toString());
      setList(apiRes?.data || []);
      setTotalPages(Math.ceil(apiRes?.count / limitItems));
    } catch (error) {
      Toast.error(error);
    }
  };

  useEffect(() => {
    setPageNumber(1);
  }, [filter]);

  useEffect(() => {
    getOrders();
  }, [pageNumber, filter]);

  const handleCancelOrder = async (orderId: string) => {
    try {
      await apis.Subscriptions.cancelSubscription(orderId);
      getOrders();
    } catch (error) {
      Toast.error(error);
    }
  };

  const handleRepeatOrder = async (order: any) => {
    const orderId = order?._id;
    if (orderId) setRepeatingOrderId(orderId);

    try {
      const restaurantId = order?.restaurant?._id;
      const isGroceryOrOther =
        filter !== "past" &&
        (order?.order_type === "grocery" ||
        (order?.order_type && order?.order_type !== "food" && order?.order_type !== "home-cooked-meal") ||
        (order?.other_cart_items && order?.other_cart_items.length > 0));

      const itemsToRepeat = (order?.other_cart_items?.length > 0
        ? order?.other_cart_items
        : order?.cart_items) || [];

      // Fetch live restaurant menu/items to ensure we use up-to-date pricing and active discount status
      const liveItemsMap = new Map<string, any>();
      if (restaurantId) {
        try {
          const menuRes = await apis.restaurant.getOrders(restaurantId, "");
          let categories = menuRes?.data || [];
          if ((!categories || categories.length === 0) && isGroceryOrOther) {
            const groceryRes = await apis.Grocery.getGroupedByCategory(`page=1&limit=100&store_id=${restaurantId}`);
            if (groceryRes?.data) categories = groceryRes.data;
          }
          if (Array.isArray(categories)) {
            categories.forEach((cat: any) => {
              const itemsList = cat.food_items || cat.items || cat.grocery_items || [];
              itemsList.forEach((liveItem: any) => {
                const key = String(liveItem._id || liveItem.id || liveItem.food_id || liveItem.item_id);
                if (key) liveItemsMap.set(key, liveItem);
              });
            });
          }
        } catch (err) {
          console.error("Error fetching live menu for repeat order:", err);
        }
      }

      let discountsChanged = false;

      if (isGroceryOrOther && restaurantId) {
        if (typeof window !== "undefined") {
          localStorage.setItem("restoId", JSON.stringify(restaurantId));
          localStorage.setItem(
            "distance",
            JSON.stringify(order?.restaurant?.address)
          );
          if (order?.order_type) {
            localStorage.setItem("restaurant_type", order.order_type);
          }
          if (order?.restaurant) {
            localStorage.setItem("restaurant_delivery_info", JSON.stringify(order.restaurant));
          }

          const groceryItems = itemsToRepeat.map((cartItem: any) => {
            const itemId = String(cartItem.item_id || cartItem.food_id || cartItem._id);
            const liveItem = liveItemsMap.get(itemId);
            const qty = cartItem.no_of_quantity || cartItem.quantity || 1;

            let hasDiscount = false;
            let priceVal = 0;
            let origPriceVal: number | undefined = undefined;

            if (liveItem) {
              const wasDiscountedInPast = !!(cartItem.discounted_price && Number(cartItem.discounted_price) > 0);
              hasDiscount = (liveItem.is_discount_active !== false) &&
                liveItem.discounted_price !== undefined &&
                liveItem.discounted_price !== null &&
                Number(liveItem.discounted_price) > 0 &&
                Number(liveItem.discounted_price) < Number(liveItem.price);

              if (wasDiscountedInPast && !hasDiscount) {
                discountsChanged = true;
              }

              priceVal = hasDiscount
                ? Number(liveItem.discounted_price)
                : Number(liveItem.price || liveItem.base_price || liveItem.original_price || 0);

              origPriceVal = hasDiscount ? Number(liveItem.price) : undefined;
            } else {
              hasDiscount = cartItem.discounted_price && Number(cartItem.discounted_price) > 0 && Number(cartItem.discounted_price) < Number(cartItem.price);
              priceVal = hasDiscount
                ? Number(cartItem.discounted_price)
                : Number(cartItem.price || (cartItem.priceQuantity ? cartItem.priceQuantity / qty : 0));
              origPriceVal = hasDiscount ? Number(cartItem.price || cartItem.original_price || cartItem.base_price) : undefined;
            }

            const priceStr = `${currency}${priceVal.toFixed(2)}`;
            const origPriceStr = (origPriceVal && origPriceVal > priceVal) ? `${currency}${origPriceVal.toFixed(2)}` : undefined;

            return {
              id: itemId,
              name: liveItem?.name || cartItem.name,
              weight: `${cartItem.quantity || liveItem?.quantity || ''} ${cartItem.unit || liveItem?.unit || ''}`.trim(),
              price: priceStr,
              originalPrice: origPriceStr,
              image: getValidImage(liveItem?.imageUrl || liveItem?.image?.[0] || cartItem.imageUrl || cartItem.image),
              quantity: qty,
              restaurantId: restaurantId,
              totalStock: liveItem?.stock,
            };
          });

          localStorage.setItem("groceryCartItems", JSON.stringify(groceryItems));
          localStorage.setItem("vendorCartNotification", "true");
        }

        if (discountsChanged) {
          Toast.success("Item prices updated as vendor discounts have changed or expired.");
        }

        router.push(`/grocery/${restaurantId}?type=${order?.order_type || filter || "grocery"}`);
        return;
      }

      if (typeof window !== "undefined") {
        localStorage.setItem("restoId", JSON.stringify(order?.restaurant?._id));
        localStorage.setItem(
          "distance",
          JSON.stringify(order?.restaurant?.address)
        );
        if (order?.order_type) {
          localStorage.setItem("restaurant_type", order.order_type);
        }
      }

      const newCartItems = itemsToRepeat.map((item: any) => {
        const itemId = String(item.food_id || item.item_id || item._id);
        const liveItem = liveItemsMap.get(itemId);
        const quantity = item.no_of_quantity || item.quantity || 1;

        let hasDiscount = false;
        let liveUnitPrice = 0;
        let liveBasePrice = 0;

        if (liveItem) {
          const wasDiscountedInPast = !!(item.discounted_price && Number(item.discounted_price) > 0) || (item.original_price && Number(item.price) < Number(item.original_price));
          hasDiscount = (liveItem.is_discount_active !== false) &&
            liveItem.discounted_price !== undefined &&
            liveItem.discounted_price !== null &&
            Number(liveItem.discounted_price) > 0 &&
            Number(liveItem.discounted_price) < Number(liveItem.price);

          if (wasDiscountedInPast && !hasDiscount) {
            discountsChanged = true;
          }

          liveUnitPrice = hasDiscount
            ? Number(liveItem.discounted_price)
            : Number(liveItem.price || liveItem.base_price || liveItem.original_price || 0);

          liveBasePrice = Number(liveItem.price || liveItem.base_price || liveItem.original_price || 0);
        } else {
          liveUnitPrice = item.priceQuantity
            ? parseFloat(item.priceQuantity) / quantity
            : parseFloat(item.price || 0);
          liveBasePrice = parseFloat(item.base_price || item.original_price || item.price || 0);
        }

        const addOnsTotal = (item?.add_ons || []).reduce(
          (sum: number, ao: any) => sum + parseFloat(ao?.price || ao?.additional_price || 0),
          0
        );
        const toppingsTotal = (item?.toppings || []).reduce(
          (sum: number, tp: any) => sum + parseFloat(tp?.price || tp?.additional_price || 0),
          0
        );
        const otherAddOnsTotal = (item?.other_add_ons || []).reduce(
          (sum: number, oao: any) => sum + parseFloat(oao?.price || oao?.additional_price || 0),
          0
        );
        const variantObj = item?.size || item?.quantity || item?.pieces;
        const variantAddPrice = parseFloat(variantObj?.add_price || 0);

        const finalUnitPrice = liveUnitPrice + addOnsTotal + toppingsTotal + otherAddOnsTotal + variantAddPrice;
        const priceQuantity = Number((finalUnitPrice * quantity).toFixed(2));

        return {
          ...item,
          food_id: itemId,
          item_id: itemId,
          id: itemId,
          name: liveItem?.name || item.name,
          no_of_quantity: quantity,
          quantity: quantity,
          unit: item.unit || liveItem?.unit || "",
          base_price: liveBasePrice,
          original_price: liveBasePrice,
          has_discount: hasDiscount,
          price: Number(finalUnitPrice.toFixed(2)),
          priceQuantity: priceQuantity,
          imageUrl: getValidImage(liveItem?.image?.[0] || liveItem?.imageUrl || item.imageUrl || item.image),
        };
      });

      if (typeof window !== "undefined") {
        localStorage.setItem("cartItems", JSON.stringify(newCartItems));
      }

      dispatch(cartReset());
      dispatch(updateCart(newCartItems));

      if (discountsChanged) {
        Toast.success("Item prices updated as vendor discounts have changed or expired.");
      }

      router.push("/checkout");
    } catch (err) {
      console.error("Repeat order error:", err);
      Toast.error("Failed to process repeat order.");
    } finally {
      setRepeatingOrderId(null);
    }
  };

  const getPaginationRange = () => {
    const start = Math.floor((pageNumber - 1) / 3) * 3 + 1;
    const end = Math.min(start + 2, totalPages);
    return { start, end };
  };

  const { start, end } = getPaginationRange();

  return (
    <div className="w-full min-h-screen bg-gray-50/50 p-4 md:p-8">
      <div className="max-w-7xl mx-auto">
        <div className="flex flex-col md:flex-row justify-between items-center mb-8 gap-4">
          <h2 className="text-3xl font-bold text-gray-900 tracking-tight">Your Orders</h2>

          {/* Toggle Tabs */}
          <div className="bg-white p-1 rounded-xl shadow-sm border border-gray-100 inline-flex flex-wrap gap-1">
            {[
              // { key: "upcoming", label: "Upcoming" },
              { key: "past", label: "Orders" },
              ...parentCategories.map((cat: any) => ({
                key: cat.type,
                label: (cat.name || cat.type).replace(/_/g, ' ').replace(/\b\w/g, (c: string) => c.toUpperCase())
              }))
            ].map((item) => (
              <button
                key={item.key}
                onClick={() => setFilter(item.key)}
                className={`px-6 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${filter === item.key
                  ? "bg-primary text-white shadow-md transform scale-105"
                  : "text-gray-500 hover:text-gray-700 hover:bg-gray-50"
                  }`}
              >
                {item.label}
              </button>
            ))}
          </div>
        </div>

        {/* Orders List */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
          {list?.length > 0 ? (
            list.map((order: any) => (
              <div
                key={order._id}
                className="cursor-pointer h-full"
                onClick={() => {
                  if (filter === "upcoming") return;

                  if (order?.order_status === "delivered" || order?.order_status === "cancelled" || order?.order_status === "pos" || order?.order_type === "pos") {
                    router.push(`/summary?id=${order._id}`);
                  } else {
                    router.push(`/orderDetail?id=${order._id}`);
                  }
                }}
              >
                <CategoryCard
                  key={order._id}
                  image={
                    order?.restaurant?.image
                      ? BUCKET_ROOT + order?.restaurant?.image
                      : ""
                  }
                  data={order}
                  filter={filter}
                  onCancel={handleCancelOrder}
                  onRepeat={handleRepeatOrder}
                  isRepeating={repeatingOrderId === order._id}
                />
              </div>
            ))
          ) : (
            <div className="col-span-full flex flex-col justify-center items-center text-gray-500 py-20 bg-white rounded-2xl border border-dashed border-gray-200">
              <div className="w-16 h-16 bg-gray-50 rounded-full flex items-center justify-center mb-4">
                <RefreshCcw className="w-8 h-8 text-gray-300" />
              </div>
              <p className="text-lg font-medium">No {
                filter === "upcoming" ? "upcoming orders" :
                filter === "past" ? "orders" :
                `${parentCategories.find(c => c.type === filter)?.name || (filter.charAt(0).toUpperCase() + filter.slice(1))} orders`
              } found</p>
              <p className="text-sm text-gray-400 mt-1">Looks like you haven't placed any orders yet.</p>
            </div>
          )}
        </div>

        {/* Pagination */}
        {totalPages > 1 && (
          <div className="pagination-container">
            <Pagination>
              <PaginationPrevious
                onClick={() => setPageNumber((prev) => Math.max(prev - 1, 1))}
                className="pagination-btn"
              />
              <PaginationContent>
                {[...Array(end - start + 1)].map((_, index) => (
                  <PaginationItem key={index}>
                    <PaginationLink
                      isActive={pageNumber === start + index}
                      onClick={() => setPageNumber(start + index)}
                      className={
                        pageNumber === start + index
                          ? "pagination-link-active"
                          : "pagination-link"
                      }
                    >
                      {start + index}
                    </PaginationLink>
                  </PaginationItem>
                ))}
                {end < totalPages && (
                  <PaginationEllipsis>
                    <span>...</span>
                  </PaginationEllipsis>
                )}
              </PaginationContent>
              <PaginationNext
                onClick={() =>
                  setPageNumber((prev) => Math.min(prev + 1, totalPages))
                }
                className="pagination-btn"
              />
            </Pagination>
          </div>
        )}
      </div>
    </div>
  );
};

export default function MyOrdersPage() {
  return (
    <DashboardLayout>
      <MyOrders />
    </DashboardLayout>
  );
}