"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { useAppDispatch, useAppSelector } from "@/app/store/hooks";
import WishlistCard from "@/components/WishlistCard";
import {
  removeFromWishlistThunk,
  selectWishlistState,
} from "@/app/store/slices/wishlistSlice";
import { fetchProductsByIds } from "@/lib/actions/wishlistActions";
import { checkAuthErrorGet } from "@/lib/checkAuthError";
import { useTranslations } from "next-intl";

import { getImageUrl, getOtherAttributeImageUrl } from "@/hooks/useImageUrl";
import Link from "next/link";
import { IoIosArrowForward } from "react-icons/io";
import MobilePageHeader from "@/components/common/MobilePageHeader";
import BreadCrumb from "@/components/Breadcrumb";
import DataNotFound from "@/components/common/DataNotFound";
import RouteLoader from "@/components/common/RouteLoader";
import Loader from "@/components/common/Loader";

const processProductForCard = (product: any) => {
  // const productImage = product.file_url
  //   ? getImageUrl(product.file_url)
  //   : "/products/product-01.png";

  const productImage = getImageUrl(getOtherAttributeImageUrl(product));

  const creatorImage = product.creator?.profile_image
    ? getImageUrl(product.creator.profile_image, true)
    : "/default-avatar.png";

  return {
    ...product,
    file_url: productImage,
    views: product?.totalNumberofViews ?? 0,
    productType: product?.otherAttribute ? product?.otherAttribute?.valueType : "product",
    creator: product.creator
      ? {
          ...product.creator,
          profile_image: creatorImage,
        }
      : null,
  };
};

export default function Wishlist() {
  const t = useTranslations();
  const router = useRouter();
  const dispatch = useAppDispatch();
  const { user } = useAppSelector((state) => state.auth);
  const { productIds, isLoading, error } = useAppSelector(selectWishlistState);

  const [products, setProducts] = useState<any[]>([]);
  const [isLoadingProducts, setIsLoadingProducts] = useState(false);

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

  const handleRemoveFromWishlist = async (productId: string) => {
    try {
      const result = await dispatch(
        removeFromWishlistThunk({
          productId,
          token: user?.token || null,
        })
      );

      if (result.meta.requestStatus === "fulfilled") {
        setProducts((prev) =>
          prev.filter((p: any) => String(p.productId) !== productId)
        );
      } else if (result.meta.requestStatus === "rejected") {
        if (user?.token) {
          const payload = result.payload as any;
          if (payload?.isAuthError && payload?.status === 401) {
            if (checkAuthErrorGet(payload.originalError, dispatch, router))
              return;
          }
        }
      }
    } catch (error: any) {
      if (user?.token && checkAuthErrorGet(error, dispatch, router)) return;
    }
  };

  useEffect(() => {
    const fetchProducts = async () => {
      if (productIds.length === 0) {
        setProducts([]);
        return;
      }

      setIsLoadingProducts(true);
      try {
        const response = await fetchProductsByIds(
          productIds,
          user?.token || null
        );
        if (response.status && response.data?.data) {
          // Normalize productId to string to align with Redux state (string[])
          setProducts(
            response.data.data.map((p: any) => ({
              ...p,
              productId: String(p.productId),
            }))
          );
        } else {
          setProducts([]);
        }
      } catch (error: any) {
        if (user?.token && checkAuthErrorGet(error, dispatch, router)) {
          return;
        }
        setProducts([]);
      } finally {
        setIsLoadingProducts(false);
      }
    };

    fetchProducts();
  }, [productIds, user?.token, dispatch, router]);

  useEffect(() => {
    if (error && user?.token) {
      checkAuthErrorGet(error, dispatch, router);
    }
  }, [error, user?.token, dispatch, router]);

  if (isLoading || isLoadingProducts) {
    return (
      <section className="p-6">
        <div className="max-w-w1660 mx-auto relative">
          <div className="fixed z-50 md:z-0 w-full md:relative top-0 left-0 py-3.5 px-6 md:shadow-none md:p-0 max-md:bg-white max-md:dark:bg-darkbg dark:text-white">
            <h1 className="text-2xl md:text-xl text-neutrals800 font-bold mb-0 md:mb-3 dark:text-white max-md:text-xl">
              {t("wishlist_page.my_wishlist")}
            </h1>
          </div>
          <p className="text-sm text-neutrals800 font-semibold pb-2.5 mb-2.5 border-b border-neutrals100 dark:text-neutrals400 dark:border-darkborder dark:text-white">
            {t("home_page.loading_products")}
          </p>

          <div className="grid grid-cols-3 xl:grid-cols-5 2xl:grid-cols-6 gap-5 pb-10 sm-pb-8 max-lg:grid-cols-3 max-md:grid-cols-2 max-[600px]:grid-cols-1 max-md:pb-6 max-lg:pb-7">
            {[1, 2, 3, 4].map((i) => (
              <div
                key={i}
                className="animate-pulse bg-gray-200 dark:bg-gray-700 rounded-lg h-64"
              ></div>
            ))}
          </div>
        </div>
      </section>
    );
  }

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

  return (
    <RouteLoader>
      {/* <MobilePageHeader
        title={t("header.wishlist") || "Wishlist"}
        onBack={handleBack}
      /> */}
      <section className="p-6">
        <div className="max-w-w1660 mx-auto relative">
          <BreadCrumb
            items={[
              { title: t("header.home"), href: "/" },
              { title: t("header.wishlist") },
            ]}
          />
          {products.length > 0 && (
            <p className="text-sm text-neutrals800 font-semibold pb-2.5 mb-2.5 border-b border-neutrals100 dark:text-neutrals400 dark:border-darkborder dark:text-white">
              {products.length} {t("wishlist_page.product_count")}
            </p>
          )}

          {products.length === 0 ? (
            <DataNotFound />
          ) : (
            <div className="grid grid-cols-3 xl:grid-cols-5 2xl:grid-cols-6 gap-5 pb-10 sm-pb-8 max-lg:grid-cols-3 max-md:grid-cols-2 max-[600px]:grid-cols-1 max-md:pb-6 max-lg:pb-7">
              {products.map((product) => {
                const processedProduct = processProductForCard(product);
                return (
                  <WishlistCard
                    key={processedProduct.productId}
                    product={{
                      ...processedProduct,
                      isWishlisted: true,
                    }}
                    onRemove={handleRemoveFromWishlist}
                  />
                );
              })}
            </div>
          )}
        </div>
      </section>
    </RouteLoader>
  );
}