"use client";

import { useAppDispatch, useAppSelector } from "@/app/store/hooks";
import DataNotFound from "@/components/common/DataNotFound";
import Loader from "@/components/common/Loader";
import MobilePageHeader from "@/components/common/MobilePageHeader";
import RouteLoader from "@/components/common/RouteLoader";
import BuyerOrderCard from "@/components/order/BuyerCard";
import Pagination from "@/components/Pagination/Paginate";
import {
  getImageUrl,
  getOtherAttributeImageUrl,
  getMobileNumberSmallImageUrl,
  getVehiclePlateSmallImageUrl,
} from "@/hooks/useImageUrl";
import { indexOrders } from "@/lib/actions/orderActions";
import { checkAuthErrorGet } from "@/lib/checkAuthError";
import { formatDateWithLocale, ORDER_STATUS } from "@/lib/formTypes";
import { getStoredLocale } from "@/lib/getLocale";
import { useTranslations } from "next-intl";
import { useRouter, useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";
import { toast } from "react-toastify";
import { MobileNumber, VehicleNumber } from "../../../../types/common-types";
import { isArabicText } from "../listing/create/VehicleForm";
import {
  IBuyerOrderCard,
  upsertBuyerOrders,
} from "@/app/store/slices/orders/buyerOrderSlice";

export function getVehicleDisplayNumber(attr: VehicleNumber, locale: string) {
  if (!attr) return "";
  const translated = attr.numberTranslated;
  const original = attr.number;

  let final = "";

  // Number
  if (locale === "en") {
    final += isArabicText(translated) ? original : translated;
  } else {
    final += isArabicText(translated) ? translated : original;
  }

  final += " - ";
  // Charcater
  if (locale === "en") {
    final += isArabicText(attr.textTranslated)
      ? attr.text
      : attr.textTranslated;
  } else {
    final += isArabicText(attr.textTranslated)
      ? attr.textTranslated
      : attr.text;
  }

  return final;
}

export default function Orders() {
  const { user } = useAppSelector((state) => state?.auth);
  const locale = getStoredLocale();

  const t = useTranslations();
  const dispatch = useAppDispatch();
  const router = useRouter();

  const [isLoading, setIsLoading] = useState<boolean>(false);

  const [orders, setOrders] = useState<IBuyerOrderCard[]>([]);
  const [totalPages, setTotalPages] = useState<number>(1);
  const [currentPage, setCurrentPage] = useState<number>(1);

  const params = useSearchParams();

  const handleBack = () => {
    window.history.back();
  };

  const transformOrdersToCards = (orders: any[]): IBuyerOrderCard[] => {
    return orders.map((order) => {
      const product = order.product;
      const seller = order.seller;
      const buyer = order.buyer;
      const otherAttr = product?.otherAttribute || null;

      let title = "";
      if (otherAttr) {
        if (otherAttr.valueType === "vehicle_number_plate") {
          let vehicleAttr = otherAttr.content[0] as VehicleNumber;
          title += getVehicleDisplayNumber(vehicleAttr, locale);
        } else if (otherAttr.valueType === "mobile_number") {
          let mobileAttr = otherAttr.content[0] as MobileNumber;
          title += mobileAttr.number;
        }

        title += " | ";
      }

      title += product?.title?.toString() || "No Title";

      const description = `${t("order_received.price")}: ${
        product?.negotiatePrice || 0
      } | ${t("order_received.actual_price")}: ${product?.price}`;

      let imageUrl = product.otherAttribute
        ? getOtherAttributeImageUrl(product)
        : product?.filePath;

      imageUrl = getImageUrl(imageUrl);
      if (
        product.otherAttribute &&
        product?.otherAttribute?.valueType === "mobile_number"
      ) {
        imageUrl = getImageUrl(
          getMobileNumberSmallImageUrl(
            product.otherAttribute.content[0].operator,
          ),
        );
      } else if (
        product.otherAttribute &&
        product?.otherAttribute?.valueType === "vehicle_number_plate"
      ) {
        imageUrl = getImageUrl(
          getVehiclePlateSmallImageUrl(
            product.otherAttribute.content[0] as VehicleNumber,
          ),
        );
      }

      const sellerObj = {
        name:
          [seller?.first_name, seller?.middle_name, seller?.last_name]
            .filter(Boolean)
            .join(" ") || t("order_received.unknown_seller"),
        imageUrl: seller?.profile_image
          ? `${process.env.NEXT_PUBLIC_API}/${seller.profile_image}`
          : "/default-user.png",
        sellerId: seller?._id || order.sellerId || "",
        isFollowing: order.isFollowingSeller || false,
        sellerAverageRating: order.sellerRating || 0,
      };
      const buyerObj = buyer
        ? {
            name:
              [buyer?.first_name, buyer?.middle_name, buyer?.last_name]
                .filter(Boolean)
                .join(" ") || "Unknown Buyer",
            imageUrl: buyer?.profile_image
              ? `${process.env.NEXT_PUBLIC_API}/${buyer.profile_image}`
              : "/default-user.png",
            buyerId: buyer?._id || order.buyerId || "",
          }
        : undefined;

      // Format the date nicely
      const dateObj = new Date(order.createdAt);
      const dateText = formatDateWithLocale(dateObj, locale);

      const updatedAt = new Date(order.updatedAt);
      const currentDate = new Date();
      const threeDaysAgo = new Date();
      threeDaysAgo.setDate(currentDate.getDate() - 3);
      const sevenDaysAgo = new Date();
      sevenDaysAgo.setDate(currentDate.getDate() - 7);

      const isWithinLastThreeDays =
        updatedAt >= threeDaysAgo && updatedAt <= currentDate;
      const isWithinLastSevenDays =
        updatedAt >= sevenDaysAgo && updatedAt <= currentDate;

      return {
        productId: product?.productId || "",
        id: order._id,
        status: order.status,
        dateText: `${t("order_received.ordered_on")} ${dateText}`,
        title,
        description,
        imageUrl,
        seller: sellerObj,
        buyer: buyerObj,
        hasBuyerRated: order.hasRated ?? false,
        // avgSellerRating: order.sellerRating ?? 0,
        avgSellerRating: order.hasRated ? order.buyerRatedSeller : 0,
        isDisputed: order.isDisputed || false,
        hasActiveDispute: order.hasActiveDispute || false,
        isWithinLastThreeDays,
        isWithinLastSevenDays,
        isDelivered: order.isDelivered || false,
        isReturned: order.isReturned || false,
        paymentReleaseStatus: order.paymentReleaseStatus || "",
        isPaymentReleased: order.isPaymentReleased || false,
        isOtherattribute: product.otherAttribute ? true : false,
        otherAttribute: product.otherAttribute || null,
        expectedDelivery: formatDateWithLocale(
          new Date(
            dateObj.setDate(dateObj.getDate() + order.expectedDeliveryDays),
          ).toString(),
          locale,
        ),
        hasDeliveryExtensionRequest:
          Object.keys(order?.deliveryExtensionRequestsSafe).length > 0
            ? order?.deliveryExtensionRequestsSafe
            : null,
      };
    });
  };

  const getAllOrders = async () => {
    setIsLoading(true);
    try {
      const response: any = await indexOrders(user.token, {
        conversationId: params.get("id"),
        page: currentPage,
      });

      if (response.success) {
        setTotalPages(response.data?.pagination.totalPages);
        const orderData = transformOrdersToCards(response.data?.orders);
        dispatch(upsertBuyerOrders(orderData));

        setOrders(orderData);
      }
    } catch (error: any) {
      if (checkAuthErrorGet(error, dispatch, router)) return;
      toast.error(error?.response?.data?.message || t("validation.error_msg"));
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    if (!user?.token) return;

    getAllOrders();
  }, [user?.token, locale]);

  useEffect(() => {
    getAllOrders();
  }, [currentPage]);

  // update all orders if a order is cancel
  const updateCancelOrder = (orderId: string) => {
    const cancelOrder = ORDER_STATUS.find((obj) =>
      obj.value.includes("cancel"),
    );
    const filteredOrders = orders.map((order) => {
      if (order.id === orderId && cancelOrder) {
        order.status = cancelOrder.value;
      }
      return order;
    });
    setOrders(filteredOrders);
  };

  // update follow/unfollow status
  const updateFollowUnFollow = ({
    sellerId,
    flag,
  }: {
    sellerId: string;
    flag: boolean;
  }) => {
    // find all the orders where seller.selelrId is sellerId
    const filteredOrders = orders.filter((order) => {
      if (order.seller.sellerId === sellerId) {
        order.seller.isFollowing = flag;
      }
      return order;
    });

    setOrders(filteredOrders);
  };
  const updateOrderStatusInParent = (
    orderId: string,
    updatedData: { hasBuyerRated?: number; avgSellerRating?: number },
  ) => {
    setOrders((prevOrders) =>
      prevOrders.map((order) =>
        order.id === orderId ? { ...order, ...updatedData } : order,
      ),
    );
  };

  if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <Loader />
      </div>
    );
  }

  return (
    <RouteLoader>
      <MobilePageHeader
        title={t("menuItems.my_orders.title")}
        onBack={handleBack}
      />
      <main className="flex-1 max-md:px-0">
        <h1 className="text-lg font-bold text-neutrals900 mb-6 dark:text-white max-md:hidden">
          {t("menuItems.my_orders.title")}
        </h1>

        {orders.length > 0 && (
          <div className="grid grid-cols-2 gap-4 max-lg:grid-cols-1 gap-y-0">
            {orders.map((ele) => (
              <BuyerOrderCard
                productId={ele.productId}
                key={ele.id}
                orderId={ele.id}
              />
            ))}
          </div>
        )}

        {orders.length === 0 && <DataNotFound />}

        {!isLoading && totalPages > 1 && (
          <div className="!mt-10">
            <Pagination
              pageCount={totalPages}
              currentPage={currentPage}
              onPageChange={({ selected }) => setCurrentPage(selected + 1)}
            />
          </div>
        )}
      </main>
    </RouteLoader>
  );
}