import NoDataFound from "@/components/widgets/NoDataFound";
import { placeHolderImage } from "@/components/widgets/Placeholder";
import { useCompareState } from "@/states";
import { compareSlider } from "@/data/sliderSetting/SliderSetting";
import Btn from "@/elements/buttons/Btn";
import { CompareAPI } from "@/utils/constants";
import { ModifyString } from "@/utils/customFunctions/ModifyString";
import { useGetCompare, useGetProducts } from "@/utils/api";
import Loader from "@/layout/loader";
import Cookies from "js-cookie";

import useDelete from "@/utils/hooks/useDelete";
import Image from "next/image";
import Link from "next/link";
import { useEffect, useMemo, useState } from "react";
import { RiCloseLine } from "react-icons/ri";
import Slider from "react-slick";
import CompareAction from "./CompareAction";
import CompareWrapper from "./CompareWrapper";

const formatAttributeValues = (product, attributeName) => {
  const attribute = product?.attributes?.find(
    (attr) => attr?.name?.toLowerCase() === attributeName.toLowerCase()
  );
  return attribute?.attribute_values?.map((value) => value?.value).filter(Boolean).join(", ") || "-";
};

const formatPrice = (product) => {
  const salePrice = parseFloat(product?.sale_price);
  const regularPrice = parseFloat(product?.price);
  const unitPrice = parseFloat(product?.unit_price);

  // Use sale_price only if it's greater than 0, otherwise use regular price
  const price = salePrice > 0 ? salePrice : (regularPrice > 0 ? regularPrice : unitPrice);

  return price && price > 0 ? `${price} ${product?.currency || "AED"}` : "-";
};

const getAttributeValueById = (attribute, valueId) => {
  if (!attribute || !valueId) return null;
  return attribute.attribute_values?.find((value) => value.id === Number(valueId));
};

// Helper to get variants array (API may return as 'variants' or 'variations')
const getVariants = (product) => {
  return product?.variants || product?.variations || [];
};

// Find variant image based on selected color
const getVariantImageByColor = (product, colorAttrId) => {
  const variants = getVariants(product);
  if (!variants.length || !colorAttrId) return null;

  // Find a variant that has the selected color
  const variantWithColor = variants.find((variant) => {
    const attrValues = variant.attribute_values || variant.attributeValues || [];
    return attrValues.some((av) => {
      const attrSlug = (av.attribute?.slug || av.attribute?.name || "").toLowerCase();
      return attrSlug === "color" && av.id === Number(colorAttrId);
    });
  });

  // Check multiple possible image fields
  return variantWithColor?.variation_image?.original_url
    || variantWithColor?.image_url
    || variantWithColor?.image
    || variantWithColor?.main_image;
};

const CompareData = () => {
  const { compareState, compareList, removeFromCompare: removeFromCompareState, setCompareState, compareAttributeSelections, setCompareAttributeSelection, initCompare } = useCompareState();
  const [guestProductsData, setGuestProductsData] = useState([]);

  // Check if user is logged in
  const isLoggedIn = !!Cookies.get("uat");

  // Initialize compare from localStorage on mount
  useEffect(() => {
    initCompare();
  }, []);

  // Get product IDs from localStorage for guests
  const guestProductIds = useMemo(() => {
    if (isLoggedIn) return [];
    const ids = (compareList || []).map(p => p.id).filter(Boolean);
    return ids;
  }, [compareList, isLoggedIn]);

  // Fetch full product details for guests
  const { data: guestProductsApiData, isLoading: guestProductsLoading } = useGetProducts(
    { ids: guestProductIds.join(','), paginate: 10 },
    {
      enabled: !isLoggedIn && guestProductIds.length > 0,
      refetchOnWindowFocus: false,
      staleTime: 60000, // Cache for 1 minute
    }
  );

  // Update guest products data when API returns
  useEffect(() => {
    if (!isLoggedIn && guestProductsApiData?.data) {
      setGuestProductsData(guestProductsApiData.data);
    }
  }, [guestProductsApiData?.data, isLoggedIn]);

  // Fetch compare data from API only for logged-in users
  const { data: compareApiData, refetch: apiRefetch, isLoading: apiLoading } = useGetCompare(
    {},
    {
      enabled: isLoggedIn, // Only fetch if logged in
      refetchOnWindowFocus: false,
      staleTime: 0,
    }
  );

  const { data, mutate: compareMutate, isLoading: compareLoading } = useDelete(CompareAPI, `/compare`);

  // Sync API data to Zustand state when it arrives (only for logged-in users)
  useEffect(() => {
    if (isLoggedIn && compareApiData?.data && Array.isArray(compareApiData.data)) {
      setCompareState(compareApiData.data);
    }
  }, [compareApiData?.data, setCompareState, isLoggedIn]);

  // Refetch after delete (only for logged-in users)
  useEffect(() => {
    if (isLoggedIn && (data?.status == 200 || data?.status == 201)) {
      apiRefetch();
    }
  }, [compareLoading, data?.status, apiRefetch, isLoggedIn]);

  // Use API data for logged-in users, fetched product data for guests
  const displayData = useMemo(() => {
    if (isLoggedIn && compareApiData?.data && Array.isArray(compareApiData.data)) {
      return compareApiData.data;
    }
    // For guests, use fetched full product data if available, otherwise fallback to basic data
    if (guestProductsData.length > 0) {
      // Merge fetched data with localStorage order (maintain order from compareList)
      return (compareList || []).map(localProduct => {
        const fullProduct = guestProductsData.find(p => p.id === localProduct.id);
        return fullProduct || localProduct;
      });
    }
    return compareList || compareState || [];
  }, [compareApiData?.data, compareState, compareList, isLoggedIn, guestProductsData]);

  const removeFromCompare = (productObj) => {
    // Call API to delete from backend only if logged in
    if (isLoggedIn && productObj?.compare_item_id) {
      compareMutate(`${productObj.compare_item_id}`);
    }
    // Update local state immediately using the state's method
    removeFromCompareState(productObj?.id);
  };

  const handleAttributeChange = (productId, attributeSlug, valueId) => {
    setCompareAttributeSelection(productId, attributeSlug, valueId);
  };

  const getSelectedVariant = (product, attributeSelection) => {
    const variants = getVariants(product);
    if (!variants.length || !Object.keys(attributeSelection).length) return null;

    return variants.find((variant) => {
      const attrValues = variant.attribute_values || variant.attributeValues || [];
      // Check if all selected attributes match this variant
      return Object.entries(attributeSelection).every(([slug, attrId]) => {
        if (!attrId) return false; // Skip empty selections
        return attrValues.some((av) => {
          const attrSlug = (av.attribute?.slug || av.attribute?.name || "").toLowerCase();
          return attrSlug === slug && av.id === Number(attrId);
        });
      });
    });
  };

  // Get image URL from variant with all possible field checks
  const getVariantImage = (variant) => {
    if (!variant) return null;
    return variant.variation_image?.original_url
      || variant.image_url
      || variant.image
      || variant.main_image
      || null;
  };

  // Show loader while fetching data
  if ((isLoggedIn && apiLoading) || (!isLoggedIn && guestProductsLoading && guestProductIds.length > 0)) {
    return <Loader />;
  }

  let settings = compareSlider(displayData.length);

  return (
    <>
      <div className="compare-page-banner">
        <Image
          src="/assets/images/theme/fashion_one/compare banner.webp"
          alt="Compare page banner"
          width={1600}
          height={380}
          className="compare-page-banner__img"
          sizes="(max-width: 768px) 100vw, (max-width: 1400px) 90vw, 1600px"
          style={{ width: "100%", height: "auto" }}
        />
      </div>
      {displayData?.length > 0 ? (
        <div className="slide-4 no-arrow compare-box">
          <Slider {...settings}>
            {displayData?.map((product, i) => {
              const attributeSelection = compareAttributeSelections?.[String(product.id)] || {};
              const hasAttributes = (product.attributes?.length || 0) > 0;
              const selectedVariant = getSelectedVariant(product, attributeSelection);
              const readyToShowPrice = !hasAttributes || (Object.keys(attributeSelection).length === (product.attributes?.length || 0) && selectedVariant);
              const readyToAddToCart = readyToShowPrice;
              const colorAttribute = product.attributes?.find(
                (attr) => (attr?.slug || attr?.name)?.toLowerCase() === "color"
              );
              const sizeAttribute = product.attributes?.find(
                (attr) => (attr?.slug || attr?.name)?.toLowerCase() === "size"
              );
              const colorSlug = (colorAttribute?.slug || "color").toLowerCase();
              const sizeSlug = (sizeAttribute?.slug || "size").toLowerCase();
              const colorValue = getAttributeValueById(colorAttribute, attributeSelection[colorSlug]);

              // Get variant image - priority: selected variant > color variant > product thumbnail
              const selectedVariantImage = getVariantImage(selectedVariant);
              const colorVariantImage = getVariantImageByColor(product, attributeSelection[colorSlug]);

              const displayImageUrl = selectedVariantImage
                || colorVariantImage
                || product.product_thumbnail?.original_url
                || placeHolderImage;

              return (
              <div className="compare-part" key={i}>
                <Btn color="primary" onClick={() => removeFromCompare(product)} className="close-btn ">
                  <RiCloseLine />
                </Btn>
                <div className="img-section">
                  <div>{displayImageUrl && <Image src={displayImageUrl} className="img-fluid" alt={product.name} height={176} width={176} />}</div>
                  <Link href={`/product/${product?.slug}`}>
                    <h5 className="text-title">{product?.name}</h5>
                  </Link>
                </div>
                <CompareWrapper data={{ title: "Discount", value: product?.discount ? product?.discount : "-" }} />
                <CompareWrapper data={{ title: "Price" }}>
                  <p>
                    {readyToShowPrice ? formatPrice(selectedVariant || product) : "Select color and size to show price"}
                  </p>
                </CompareWrapper>
                <CompareWrapper data={{ title: "Availability", value: product?.stock_status ? ModifyString(product?.stock_status) : "-" }} />
                {colorAttribute && (
                  <CompareWrapper data={{ title: "Color" }}>
                    <select
                      className="compare-attribute-select"
                      value={attributeSelection[colorSlug] || ""}
                      onChange={(event) => handleAttributeChange(product.id, colorSlug, event.target.value)}
                    >
                      <option value="">Select color</option>
                      {colorAttribute?.attribute_values?.map((color) => (
                        <option value={color.id} key={color.id}>
                          {color.value}
                        </option>
                      ))}
                    </select>
                  </CompareWrapper>
                )}
                {sizeAttribute && (
                  <CompareWrapper data={{ title: "Size" }}>
                    <select
                      className="compare-attribute-select"
                      value={attributeSelection[sizeSlug] || ""}
                      onChange={(event) => handleAttributeChange(product.id, sizeSlug, event.target.value)}
                    >
                      <option value="">Select size</option>
                      {sizeAttribute?.attribute_values?.map((size) => (
                        <option value={size.id} key={size.id}>
                          {size.value}
                        </option>
                      ))}
                    </select>
                  </CompareWrapper>
                )}
                <CompareWrapper data={{ title: "SKU" }}>
                  <p>{selectedVariant?.sku || product?.sku || "-"}</p>
                </CompareWrapper>
                <CompareAction product={product} selectedVariant={selectedVariant} readyToAdd={readyToAddToCart} />
              </div>
            );
            })}
          </Slider>
        </div>
      ) : (
        <NoDataFound customClass="no-data-added" imageUrl={"/assets/svg/empty-items.svg"} title="NoItemsAdded" description="NoCompareItemsAddedDescription" height="230" width="270" />
      )}
    </>
  );
};

export default CompareData;