"use client";
export const dynamic = "force-dynamic";

import { useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import { useSearchParams } from "next/navigation";
import { useSession } from "next-auth/react";
import { Heart } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { toast } from "react-toastify";
import PriceDisplay from "@/components/ui/formattedPrice";
import { addItemToBackendCart, addItemToCart } from "@/redux/slices/cartSlice";
import { AppDispatch } from "@/redux/store";
import { addWishlistItemToBackend } from "@/redux/slices/wishlistSlice";

export default function SearchClient() {
  const [results, setResults] = useState<ProductVariant[]>([]);
  const [loading, setLoading] = useState(true);
  const [page, setPage] = useState(1);
  const [limit, setLimit] = useState(20);
  const [totalPages, setTotalPages] = useState(0);

  const searchParams = useSearchParams();
  const query = searchParams.get("q")?.trim() || "";
  const dispatch = useDispatch<AppDispatch>();
  const { data: session } = useSession();

  useEffect(() => {
    const fetchResults = async () => {
      try {
        setLoading(true);
        const res = await fetch(
          `/api/search?q=${encodeURIComponent(query)}&page=${page}&limit=${limit}`
        );
        const data = await res.json();

        setTotalPages(Math.ceil(data.totalCount / limit));
        setResults(data.results);
      } catch (err) {
        toast.error("Error loading search results");
      } finally {
        setLoading(false);
      }
    };

    if (query) fetchResults();
  }, [query, page, limit]);

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

  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="p-6 max-w-7xl mx-auto">
      <h1 className="text-2xl font-extrabold mb-6 text-gray-800">
        Search results for:{" "}
        <span className="text-transparent bg-clip-text bg-gradient-to-r from-pink-500 to-orange-500">
          {query || "All Products"}
        </span>
      </h1>

      {loading ? (
        <div className="text-center mt-10 text-gray-500 animate-pulse">
          Loading...
        </div>
      ) : results.length === 0 ? (
        <div className="text-center mt-20 text-gray-500 text-lg">
          No products found for{" "}
          <strong className="text-black">&quot;{query}&quot;</strong>
        </div>
      ) : (
        <>
          {/* Product Grid */}
          <div className="grid gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
            {results.map((variant) => (
              <div
                key={variant.uuid}
                className="group relative bg-white border rounded-xl shadow-sm hover:shadow-xl transition-all duration-300 p-4 flex flex-col items-center"
              >
                {/* Product Image */}
                <Link
                  href={`/products/${variant.uuid}`}
                  className="flex h-60 w-full overflow-hidden rounded-xl"
                >
                  <Image
                    src={variant?.variant_images?.[0]?.file_url || "/placeholder.png"}
                    alt={variant.name}
                    width={300}
                    height={300}
                    className="object-cover w-full group-hover:scale-105 transition-transform duration-300"
                  />
                </Link>

                {/* Details */}
                <div className="flex flex-col w-full mt-4">
                  <div className="flex justify-between items-center mb-2">
                    <span className="text-xs font-medium bg-gradient-to-r from-orange-100 to-pink-100 text-orange-600 px-2 py-0.5 rounded-full">
                      0% off
                    </span>
                    <button
                      onClick={() => addToWishList(variant.uuid)}
                      className="p-2 hover:bg-gray-100 rounded-full transition"
                    >
                      <Heart className="h-5 w-5 text-gray-500 hover:text-red-500" />
                    </button>
                  </div>

                  <Link
                    href={`/products/${variant.uuid}`}
                    className="hover:text-pink-600 transition font-semibold text-lg line-clamp-1"
                  >
                    {variant.name}
                  </Link>

                  <p className="text-sm text-red-600 mt-1">
                    Special Price: <PriceDisplay price={variant.special_price} />
                  </p>
                  <p className="text-sm line-through text-gray-500">
                    Regular Price: <PriceDisplay price={variant.regular_price} />
                  </p>

                  <button
                    onClick={() => addToCart(variant)}
                    className="mt-4 text-white bg-gradient-to-r from-pink-500 to-orange-400 hover:from-orange-400 hover:to-pink-500 font-medium rounded-xl px-5 py-2 w-full text-sm shadow-md hover:shadow-lg transition"
                  >
                    Add to cart
                  </button>
                </div>
              </div>
            ))}
          </div>

          {/* Pagination */}
          <div className="flex justify-center items-center mt-10 space-x-2">
            <button
              onClick={() => setPage((p) => Math.max(1, p - 1))}
              disabled={page === 1}
              className="px-4 py-2 rounded-lg bg-gray-200 text-sm font-medium disabled:opacity-50 hover:bg-gray-300 transition"
            >
              Previous
            </button>

            {Array.from({ length: totalPages }, (_, i) => i + 1).map((num) => (
              <button
                key={num}
                onClick={() => setPage(num)}
                className={`px-4 py-2 rounded-lg text-sm font-medium transition ${
                  page === num
                    ? "bg-gradient-to-r from-pink-500 to-orange-400 text-white shadow-md"
                    : "bg-gray-100 hover:bg-gray-200"
                }`}
              >
                {num}
              </button>
            ))}

            <button
              onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
              disabled={page === totalPages}
              className="px-4 py-2 rounded-lg bg-gray-200 text-sm font-medium disabled:opacity-50 hover:bg-gray-300 transition"
            >
              Next
            </button>
          </div>
        </>
      )}
    </div>
  );
}