"use client";

import { Suspense, use, useCallback } from "react";
import { useRouter } from "next/navigation";
import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import { useProductDetail } from "@/hooks/useProductDetail";

function ProductDetailContent({ id }: { id: string }) {
  const router = useRouter();
  const { product, isLoading, error } = useProductDetail(id);

  const handleAddToCart = useCallback(() => {
    console.log("Product added to cart:", product);
  }, [product]);

  if (isLoading) {
    return <div className="text-center py-12">Loading product details...</div>;
  }

  if (error || !product) {
    return (
      <div className="text-center py-12">
        <p className="text-red-600">Product not found</p>
        <button
          onClick={() => router.push("/shop")}
          className="mt-4 px-4 py-2 bg-blue-600 text-white rounded"
        >
          Back to Shop
        </button>
      </div>
    );
  }

  return (
    <div className="py-12 px-4">
      <div className="max-w-4xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12">
        <div>
          {product.imageSrc && (
            <img
              src={product.imageSrc}
              alt={product.name}
              className="w-full rounded-lg shadow-lg"
            />
          )}
        </div>
        <div>
          <h1 className="text-4xl font-bold text-gray-900 mb-4">{product.name}</h1>
          <p className="text-3xl text-gray-700 font-semibold mb-6">${product.price}</p>
          <button
            onClick={handleAddToCart}
            className="w-full bg-blue-600 text-white font-semibold py-3 px-6 rounded hover:bg-blue-700 transition"
          >
            Add to Cart
          </button>
          <button
            onClick={() => router.push("/shop")}
            className="w-full mt-4 px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700 transition"
          >
            Back to Shop
          </button>
        </div>
      </div>
    </div>
  );
}

export default function ProductDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = use(params);
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Blog", id: "/blog" },
    { name: "Shop", id: "/shop" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="medium"
      background="circleGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleFullscreen navItems={navItems} />
        </div>
        <Suspense fallback={<div className="text-center py-12">Loading...</div>}>
          <ProductDetailContent id={id} />
        </Suspense>
      </ReactLenis>
    </ThemeProvider>
  );
}
