"use client";
import React, { useCallback, useEffect, useState } from "react";
import axois from "axios";
import Image from "next/image";
import { useRouter } from "next/navigation";
import { Heart, Star, ShoppingCart } from "lucide-react";
import { addItemToBackendCart, addItemToCart } from "@/redux/slices/cartSlice";
import { useDispatch } from "react-redux";
import { AppDispatch } from "@/redux/store";
import { useSession } from "next-auth/react";
import { toast } from "react-toastify";
import Link from "next/link";
import PriceDisplay from "@/components/ui/formattedPrice";
import { addWishlistItemToBackend } from "@/redux/slices/wishlistSlice";

const VariantsClient = () => {
  const router = useRouter();

  const [variants, setVariants] = useState<ProductVariant[] | []>([]);

  const dispatch = useDispatch<AppDispatch>();
  const { data: session } = useSession();

  const fetchProducts = async () => {
    const url = "/api/variants";
    const response = await axois.get(url, {
      headers: {
        'Cache-Control': 'no-store'
      }
    });
    if (response.status == 200) {
      setVariants(response.data.mssg);
      console.log(response.data);
    }
  }

  const navigateProductDetailsPage = (uuid: string) => {
    router.push(`/products/${uuid}`);
  };

  const addToCart = (variant: ProductVariant) => {

    if (session?.user.uuid) {
      dispatch(addItemToBackendCart(parseInt(variant.id)));
    }
    else {
      dispatch(addItemToCart(variant));
    }
    toast.success("Item has been added to cart");
  }

  useEffect(() => {
    fetchProducts();
  }, []);

  const renderStars = useCallback((rating: number) => {
    return Array(5)
      .fill(0)
      .map((_, i) => (
        <Star
          key={i}
          className="h-4 w-4 text-yellow-400"
          fill={i < Math.floor(rating) ? "currentColor" : "none"}
          aria-hidden="true"
        />
      ));
  }, []);

  const addToWishList = async (uuid: string) => {
    if (session?.user.uuid) {

      dispatch(addWishlistItemToBackend(uuid))


    }
    else {
      toast.error("Please login to add items to wishlist")
    }
  }

  return (
    <div className="flex w-full p-2">
      <div className="flex flex-col border p-2 w-1/6">
        <h3>Product Filter</h3>
      </div>

      <div className="flex flex-col w-full px-2">
        <div className="border p-2 m-2 w-full flex justify-between">
          <h3>Products</h3>
          <div>
            Sort by:
            <select name="" id="" className="border mx-1 p-1">
              <option value="">Default</option>
              <option value="lowToHigh">Price (Low to High)</option>
              <option value="highToLow">Price (High to Low)</option>
            </select>
          </div>
        </div>

        <div className="mx-auto max-w-screen-xl px-4 2xl:px-0">
          <div className="flex flex-row flex-wrap">
            {variants &&
              variants.map((variant) => (
                <div
                  key={variant.uuid}
                  className="m-2 flex flex-col items-center justify-center border rounded p-2 w-[330px] h-[450px]"
                >
                  <div
                    onClick={() => navigateProductDetailsPage(variant.uuid)}
                    className="flex h-1/2 cursor-pointer"
                  >
                    <Image
                      className="h-full"
                      src={variant?.variant_images?.[0]?.file_url}
                      width={200}
                      height={200}
                      alt="error"
                    />
                  </div>

                  <div className="flex flex-col h-1/2 justify-end w-full p-1">
                    <div className="flex justify-between w-full">
                      <span className="me-2 rounded bg-primary-100 px-2.5 py-0.5 text-xs font-medium text-primary-800">
                        0% off
                      </span>

                      <button
                        type="button"
                        className="rounded-lg p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900"
                        aria-label={`Add ${variant.name} to favorites`}
                        onClick={() => addToWishList(variant.uuid)}
                      >
                        <Heart className="h-5 w-5" />
                      </button>
                    </div>

                    <h4 onClick={()=> navigateProductDetailsPage(variant.uuid)} className="font-bold hover:underline cursor-pointer">{variant.name}</h4>
                    <h4>
                      Special Price:{" "}
                      <span className="text-red-500">
                        <PriceDisplay price={variant.special_price} />
                      </span>
                    </h4>
                    <h4>
                      Regular Price:{" "}
                      <span className="line-through text-red-500">
                        <PriceDisplay price={variant.regular_price} />
                      </span>
                    </h4>

                    <div className="mt-2 flex items-center gap-2">
                      <div
                        className="flex items-center"
                        aria-label={`Rating: 4.5 out of 5`}
                      >
                        {renderStars(4.5)}
                        <span className="sr-only">Rating: 4.5 out of 5</span>
                      </div>
                      <p className="text-sm font-medium text-gray-900">5</p>
                      <p className="text-sm font-medium text-gray-500">
                        160 reviews
                      </p>
                    </div>

                    {variant.quantity && variant.quantity > 0 ? (<button onClick={() => addToCart(variant)} className="text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800 font-medium rounded text-sm px-5 py-2 text-center me-2 mb-2 my-2 w-full">
                      Add to cart
                    </button>) : (
                      <button disabled className="text-white bg-gray-400 cursor-not-allowed font-medium rounded text-sm px-5 py-2 text-center me-2 mb-2 my-2 w-full">
                        Out of Stock</button>
                    )}


                  </div>
                </div>
              ))}
          </div>
        </div>


      </div>
    </div>
  );
};

export default VariantsClient;