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

export default function ProductGrid() {
  const [fproducts, setFproducts] = React.useState<ProductVariant[]>([]);
  const [lProducts, setLproducts] = React.useState<ProductVariant[]>([]);

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

  useEffect(() => {
    const fetchFProducts = async () => {
      const response = await fetch("/api/specialProducts");

      if (response.status == 200) {
        const data = await response.json();
        setFproducts(data.variants);
        setLproducts(data.latestProducts);
      }
    };

    fetchFProducts();
  }, []);

  const addToWishList = async (uuid: string) => {
    if (session?.user.uuid) {
      dispatch(addWishlistItemToBackend(uuid));
    } else {
      toast.error("Please login to add items to wishlist");
    }
  };

  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");
  };

  if (!fproducts.length && !lProducts.length) {
    return <Loader />;
  }

  const ProductCard = ({ product, type }: { product: ProductVariant, type: String }) => (
    <div
      className="group relative rounded-2xl border border-gray-100 bg-white/60 p-6 shadow-md 
                 transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl 
                 dark:border-gray-800 dark:bg-gray-900/60 backdrop-blur"
      aria-labelledby={`product-${product.id}-title`}
    >
      {/* Image */}
      <div className="relative h-56 w-full overflow-hidden rounded-xl">
        <Link href={`/products/${product.uuid}`} passHref>
          <Image
            src={product.variant_images?.[0]?.file_url}
            alt={product.name}
            fill
            className="object-contain transition-transform duration-300 group-hover:scale-105"
            sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
          />
        </Link>
      </div>

      {/* Details */}
      <div className="pt-6">
        <div className="mb-4 flex items-center justify-between gap-4">
          <span className="rounded bg-gradient-to-r from-pink-100 to-orange-100 px-3 py-1 text-xs font-semibold text-pink-700">
            {type}
          </span>
          <button
            type="button"
            onClick={() => addToWishList(product.uuid)}
            className="rounded-full p-2 text-gray-500 transition hover:bg-gray-100 hover:text-red-500 dark:hover:bg-gray-800"
            aria-label={`Add ${product.name} to favorites`}
          >
            <Heart className="h-5 w-5" />
          </button>
        </div>

        {/* Product Name */}
        <Link
          href={`/products/${product.uuid}`}
          passHref
          id={`product-${product.uuid}-title`}
          className="line-clamp-2 text-lg font-semibold leading-snug text-gray-900 hover:underline dark:text-gray-100"
        >
          {product.name}
        </Link>

        {/* Price + Add to Cart */}
        <div className="mt-6 flex items-center justify-between">
          <p className="text-2xl font-extrabold text-gray-900 dark:text-gray-50 text-lg text-pink-600">
            <PriceDisplay price={product.special_price} />
          </p>

          <button
            type="button"
            onClick={() => addToCart(product)}
            className="inline-flex items-center rounded-xl bg-gradient-to-r from-pink-500 to-orange-500 
                       px-5 py-2.5 text-sm font-medium text-white shadow-md transition 
                       hover:from-pink-600 hover:to-orange-600 focus:outline-none focus:ring-4 focus:ring-pink-200"
            aria-label={`Add ${product.name} to cart`}
          >
            <ShoppingCart className="-ms-2 me-2 h-5 w-5" />
            Add to cart
          </button>
        </div>
      </div>
    </div>
  );

  return (
    <>
      {/* Trending */}
      <section className="py-12">
        <div className="mx-auto max-w-screen-xl px-4 2xl:px-0">
          <div className="mb-10 text-center">
            <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
              TRENDING PRODUCTS
            </h2>
            <p className="mt-2 text-gray-500">
              Handpicked bestsellers loved by our customers
            </p>
          </div>

          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
            {fproducts.map((product) => (
              <ProductCard key={product.id} product={product} type={'Trending'}/>
            ))}
          </div>
        </div>
      </section>

      {/* Latest */}
      <section className="py-12 bg-gray-50 dark:bg-gray-950">
        <div className="mx-auto max-w-screen-xl px-4 2xl:px-0">
          <div className="mb-10 text-center">
            <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
              LATEST PRODUCTS
            </h2>
            <p className="mt-2 text-gray-500">
              Fresh arrivals updated just for you
            </p>
          </div>

          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
            {lProducts.map((product) => (
              <ProductCard key={product.id} product={product} type={'NEW'}/>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}