"use client";

import { useAppDispatch, useAppSelector } from "@/app/store/hooks";
import MobilePageHeader from "@/components/common/MobilePageHeader";
import SellerOrderCard from "@/components/order/SellerCard";
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 } from "next/navigation";
import { useEffect, useState } from "react";
import { toast } from "react-toastify";
import DataNotFound from "@/components/common/DataNotFound";
import RouteLoader from "@/components/common/RouteLoader";
import Loader from "@/components/common/Loader";
import { MobileNumber, VehicleNumber } from "../../../../types/common-types";
import { getVehicleDisplayNumber } from "../my-orders/MyOrders";
import {
  ISellerOrderCard,
  upsertSellerOrders,
} from "@/app/store/slices/orders/sellerOrderSlice";

interface OrderCardData {
  productId: string;
  id: string;
  status: string;
  dateText: string;
  title: string;
  description: string;
  imageUrl: string;
  seller: {
    name: string;
    imageUrl: string;
    sellerId: string;
    isFollowing: boolean;
  };
  buyer?: {
    name: string;
    imageUrl: string;
    buyerId: string;
  };
  isDisputed?: boolean;
  hasActiveDispute?: boolean;
  hasBuyerRated?: number | boolean;
  avgSellerRating?: number;
  isDelivered?: boolean;
  isReturned?: boolean;
  isOtherAttribute?: boolean;
  otherAttribute?: any;
  expectedDelivery?: string;
}

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<OrderCardData[]>([]);
  const [totalPages, setTotalPages] = useState<number>(1);
  const [currentPage, setCurrentPage] = useState<number>(1);

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

  // Order structure creation
  const transformOrdersToCards = (orders: any[]): ISellerOrderCard[] => {
    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() || t("order_received.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(" ") || t("order_received.unknown_buyer"),
            imageUrl: buyer?.profile_image
              ? `${process.env.NEXT_PUBLIC_API}/${buyer.profile_image}`
              : "/default-user.png",
            buyerId: buyer?._id || order.buyerId || "",
          }
        : undefined;

      const dateObj = new Date(order.createdAt);
      const dateText = formatDateWithLocale(dateObj, locale);

      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.buyerRating ?? 0,
        avgSellerRating: order.hasRated ? order.buyerRatedSeller : 0,
        isDisputed: order.isDisputed || false,
        hasActiveDispute: order.hasActiveDispute || false,
        isDelivered: order.isDelivered || false,
        isReturned: order.isReturned || false,
        isOtherAttribute: order.otherAttribute ? true : false,
        otherAttribute: order.otherAttribute,
        expectedDelivery: formatDateWithLocale(
          new Date(
            dateObj.setDate(dateObj.getDate() + order.expectedDeliveryDays),
          ).toString(),
          locale,
        ),
        hasDeliveryExtensionRequest:
          Object.keys(order?.deliveryExtensionRequestsSafe).length > 0
            ? order?.deliveryExtensionRequestsSafe
            : null,
        evidenceInfo: order?.orderEvidenceInfo,
      };
    });
  };

  const getAllOrders = async () => {
    setIsLoading(true);
    try {
      const response: any = await indexOrders(user.token, {
        page: currentPage,
        userType: "seller",
      });
      if (response.success) {
        setTotalPages(response.data?.pagination.totalPages);
        const orderData = transformOrdersToCards(response.data?.orders);
        dispatch(upsertSellerOrders(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;
      status?: string;
    },
  ) => {
    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("order_received.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("order_received.title")}
        </h1>

        {orders.length > 0 && (
          <div className="grid grid-cols-2 gap-4 max-lg:grid-cols-1 gap-y-0">
            {orders.map((ele) => (
              <SellerOrderCard
                key={ele.id}
                productId={ele.productId}
                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>
  );
}