import React from "react";
import { getProductDetails, searchProducts } from "@/lib/product-actions";
import { formatCurrency } from "@/lib/format";
import { ProductPageGallery } from "@/components/productpage/ProductPageGallery";
import { ProductVariantSelector } from "@/components/productpage/ProductVariantSelector";
import CategoryBreadcrumb from "@/components/productpage/CategoryBreadcrumb";
import ProductDetailsAccordion from "@/components/productpage/ProductDetailsAccordion";
import { ProductRecommendationCarousel } from "@/components/showcase/ProductRecommendationCarousel";
import { BuyBox } from "@/components/productpage/BuyBox";
import { ProductAvailability } from "@/components/productpage/ProductAvailability";
import { Separator } from "@/components/ui/separator";
import { ProductDetails, StructuredData } from "@/types/product";

type Variant = {
  color: string;
  size: string;
  pieces: string;
  product_id: string;
};

const ProductDetailPage = async ({
  params,
}: {
  params: Promise<{ product_id: string }>;
}) => {
  const { product_id } = await params;

  /**
   * ⚡ Optimization: Parallel Data Fetching
   * Awaiting both the product details and recommendations in parallel using Promise.all
   * reduces the page's TTFB and initial render delay by the duration of one network round-trip.
   * Expected Impact: ~100-200ms reduction in server response time.
   */
  const [detailsResponse, searchResponse] =
    await Promise.all([
      getProductDetails(product_id),
      searchProducts({ page: 1, pageSize: 10, requestType: "display", sortOrder: "ASC" }),
    ]);

  if (!detailsResponse.success) {
    return <div className="container mx-auto p-10 text-center">Produkt nicht gefunden.</div>;
  }

  const productDetails = detailsResponse.data;
  const recommendedProducts = searchResponse.success ? searchResponse.data.documents : [];

  const variants: Variant[] =
    typeof productDetails.variants === "string"
      ? JSON.parse(productDetails.variants)
      : productDetails.variants || [];

  const attributes: Variant =
    typeof productDetails.variant === "string"
      ? JSON.parse(productDetails.variant)
      : productDetails.variant || {};

  const structuredData: StructuredData[] =
    typeof productDetails.structured_data === "string"
      ? JSON.parse(productDetails.structured_data)
      : productDetails.structured_data || [];

  const images: string[] =
    typeof productDetails.images === "string"
      ? JSON.parse(productDetails.images)
      : productDetails.images || [];

  return (
    <>
      <div className="mx-auto max-w-screen-xl mt-4">
        <div className="flex">
          <div>
            <ProductPageGallery images={images} />
          </div>
          <div className="pl-8 w-1/3">
            <div className="mb-1 mt-2.5">
              {productDetails.category_names && productDetails.category_ids && (
                <CategoryBreadcrumb
                  categoryNames={productDetails.category_names}
                  categoryIds={productDetails.category_ids}
                />
              )}
            </div>
            <h1 className="text-2xl lg:text-3xl font-bold text-gray-900 pr-12">
              {productDetails.title}
            </h1>
            <p className="mt-4 text-xl lg:text-2xl font-bold text-gray-900">
              {formatCurrency(productDetails.price)}
            </p>
            <p className="text-xs text-gray-700">inkl. MwSt.</p>

            <ProductVariantSelector
              variants={variants}
              attributes={attributes}
            />

            <ProductAvailability productDetails={productDetails} />

            <BuyBox
              product={{
                id: productDetails.id,
                name: productDetails.title as string,
                price: Number(productDetails.price),
                image: images[0], // Assuming the first image is the main product image
              }}
            />
          </div>
        </div>
        <Separator className="my-8" />
        <div className="container mx-auto px-4 my-4">
          <ProductRecommendationCarousel initialProducts={recommendedProducts} />
        </div>
        <Separator className="my-8" />
        <div>
          <ProductDetailsAccordion
            description={productDetails.description as string}
            manufacturerInfo={productDetails.eu_responsible_person || "Informationen zur verantwortlichen Person für die EU liegen für dieses Produkt nicht vor."}
            structuredData={structuredData}
          />
        </div>
        <Separator className="my-8" />
        <div className="m-4">
          <ProductRecommendationCarousel initialProducts={recommendedProducts} />
        </div>
        <div className="m-4">
          <ProductRecommendationCarousel initialProducts={recommendedProducts} />
        </div>
        <Separator className="my-8" />
      </div>
    </>
  );
};

export default ProductDetailPage;