import { useLayout } from "@/lib/hooks/useLayout";
import { useProduct } from "@/context/helpers/product";
import { useRouter } from "next/router";
import { useEffect, useMemo } from "react";
import ProductDetailsSkeleton from "@/features/product/skeletons/ProductDetailsSkeleton";
import ProductDescriptionSkeleton from "@/features/product/skeletons/ProductDescriptionSkeleton";
import RelatedProductsSkeleton from "@/features/product/skeletons/RelatedProductsSkeleton";
import Layout1Product from "@/layouts/layout-1/pages/Product";
import Layout2Product from "@/layouts/layout-2/pages/Product";
import Layout3Product from "@/layouts/layout-3/pages/Product";
import Layout5Product from "@/layouts/layout-5/pages/Product";
import Layout4Product from "@/layouts/layout-4/pages/Product";
import Layout6Product from "@/layouts/layout-6/pages/Product";
import Layout7Product from "@/layouts/layout-7/pages/Product";

/**
 * Layout-aware Product Page wrapper
 *
 * Dynamically loads the correct Product Page component based on the active layout.
 * Each layout can have its own Product Page implementation with different UI design.
 */
export default function ProductPage() {
  const { layout } = useLayout();
  const { getProductDetails, isLoading } = useProduct();
  const router = useRouter();

  // Fetch product details when route changes
  useEffect(() => {
    if (router.query.id) {
      const getDetails = async () => {
        await getProductDetails(router.query.id);
      };
      getDetails();
    }
  }, [router.query.id, getProductDetails]);

  // Dynamically load the layout-specific Product Page component
  const ProductPageComponent = useMemo(() => {
    switch (layout) {
      case 1:
      default:
        return Layout1Product;
      // Future layouts can be added here
      case 2:
        return Layout2Product;
      case 3:
        return Layout3Product;
      case 4:
        return Layout4Product;
      case 5:
        return Layout5Product;
      case 6:
        return Layout6Product;
      case 7:
        return Layout7Product;
    }
  }, [layout]);

  // Show loading skeleton while data is loading
  if (isLoading) {
    return (
      <main className="container flex flex-col max-w-screen-xl gap-8 px-5 py-8 mx-auto xl:px-0">
        <ProductDetailsSkeleton />
        <ProductDescriptionSkeleton />
        <RelatedProductsSkeleton />
      </main>
    );
  }

  // Render the layout-specific Product Page
  return <ProductPageComponent />;
}