import Image from "next/image";
import Breadcrumb from "@/app/components/product/breadcrumb";
import LikeBtn from "@/app/components/cards/like-btn";
import ProductGallery from "@/app/components/product/product-gallery";
import ProductInfo from "@/app/components/product/product-info";
import ScrollLink from "@/app/components/scrollLink";
import PDPBulkOrder from "../../components/product/BulkOrder";
import PdpRecommedation from "@/app/components/product/PdpRecommedation";
import ProductActions from "./ProductActions";
import ProductPriceDisplay from "./ProductPriceDisplay";
import { getImageUrl } from "@/utils/imageHelper";
import ScrollToTop from "@/app/components/ScrollToTop";

interface ProductViewProps {
  data: any;
}

export default function ProductView({ data }: ProductViewProps) {
  const product = data?.product;
  const tags = data?.tags || [];
  const vibes = data?.vibes;
  const fabric = data?.fabric;
  const variations = data?.variations || [];
  const sizes = data?.size || [];
  const fabricCare = data?.fabric_care;
  const technique = data?.techniques;
  const bulkOrder = data?.product?.product_costings;
  const primaryImg = data?.first_image;
  const artwork = data?.art_works || [];
  const hoverImage = data?.hover_image;
  const designHouseProfile = data?.desig_house_profile;
  const coCreatorProfile = data?.co_creator;

  const initialPrice = product?.price ? parseInt(product.price) : 0;
  const initialGalleryImages = product?.main_item_images || [];

  // Generate structured data for SEO
  const generateProductJsonLd = () => {
    if (!product) return null;

    const primaryImage =
      product.main_item_images?.[0]?.image_url ||
      product.main_item_image?.image_url;

    const structuredData = {
      "@context": "https://schema.org",
      "@type": "Product",
      name: product.product_name,
      image: primaryImage ? getImageUrl(primaryImage) : undefined,
      description: `${product.product_name} - ${product.category?.name || "Fashion"} item available at Morni`,
      brand: {
        "@type": "Brand",
        name: "Morni",
      },
      category: product.category?.name,
      offers: {
        "@type": "Offer",
        price: initialPrice,
        priceCurrency: "USD",
        availability: "https://schema.org/InStock",
        seller: {
          "@type": "Organization",
          name: "Morni",
        },
      },
    };

    // Add design house if available
    if (product.design_house?.name) {
      structuredData.brand = {
        "@type": "Brand",
        name: product.design_house.name,
      };
    }

    // Add additional images
    if (product.main_item_images && product.main_item_images.length > 1) {
      structuredData.image = product.main_item_images
        .filter((img: any) => img.image_url)
        .map((img: any) => getImageUrl(img.image_url));
    }

    return structuredData;
  };

  if (!product) {
    return (
      <div className="wrapper py-20 text-center">
        <h1 className="text-2xl font-bold">Product not found</h1>
      </div>
    );
  }

  return (
    <>
      <ScrollToTop />
      {/* Structured Data for SEO */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(generateProductJsonLd()),
        }}
      />

      <div className="relative flex w-full flex-col pt-14 md:pt-10">
        <div className="flex w-full flex-col">
          <div className="flex w-full overflow-hidden md:hidden">
            <div className="relative flex w-screen overflow-hidden">
              <div className="relative flex w-full flex-row gap-0.5 overflow-x-auto">
                <ProductGallery gallery_image={initialGalleryImages} />
                <div className="absolute right-1 bottom-1 z-40">
                  <div className="rounded-full bg-white/50">
                    <LikeBtn productId={product?.id} wishType="PRODUCT" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="wrapper my-3 md:hidden">
            <div className="flex w-full items-center justify-between gap-4 align-middle">
              <p className="font-bogart capitalize">{product?.product_name}</p>
              <ProductPriceDisplay initialPrice={initialPrice} className="font-bogart text-lg/5 uppercase" />
            </div>
            <ScrollLink id="show_description_mobile">
              More Product Information
            </ScrollLink>
          </div>
        </div>

        <div className="wrapper">
          <div className="grid grid-cols-1 pb-4 md:grid-cols-16 md:gap-10">
            <div className="col-span-11">
              <div className="hidden w-full flex-col md:flex">
                <ProductGallery gallery_image={initialGalleryImages} />
                <div
                  className="hidden w-full flex-col md:flex"
                  id="show_description"
                >
                  <ProductInfo
                    vibes={vibes}
                    product_description={product}
                    fabric={fabric}
                    care={fabricCare}
                    technique={technique}
                    artworks={artwork}
                    hoverImage={hoverImage}
                    designHouseProfile={designHouseProfile}
                    coCreatorProfile={coCreatorProfile}
                  />
                </div>
              </div>
            </div>

            <div className="relative col-span-5">
              <div className="top-12 flex w-full flex-col bg-gray-100 md:sticky">
                <div className="grid w-full grid-cols-1">
                  <div className="hidden md:flex">
                    <div className="flex w-full flex-col gap-2">
                      <Breadcrumb
                        category={product?.category?.name}
                        sub_category={product?.sub_category?.name}
                      />

                      <div className="flex w-full flex-row items-center justify-between gap-4">
                        <div className="flex w-full flex-col">
                          <p className="font-bogart capitalize">
                            {product?.product_name}
                          </p>
                          <ProductPriceDisplay initialPrice={initialPrice} className="font-bogart hidden text-lg uppercase md:block" />
                        </div>
                        <div className="hidden md:flex">
                          <LikeBtn productId={product?.id} wishType="PRODUCT" />
                        </div>
                      </div>
                    </div>
                  </div>

                  <ProductActions
                    product={product}
                    variations={variations}
                    sizes={sizes}
                    primaryImg={primaryImg}
                    initialPrice={initialPrice}
                    initialGalleryImages={initialGalleryImages}
                  />
                </div>
                {bulkOrder && (
                  <PDPBulkOrder
                    bulkOrderData={bulkOrder}
                    showButtonOnly={false}
                  />
                )}
              </div>
            </div>
          </div>

          <div
            className="w-full flex-col md:hidden"
            id="show_description_mobile"
          >
            <ProductInfo
              vibes={vibes}
              product_description={product}
              fabric={fabric}
              care={fabricCare}
              technique={technique}
              artworks={artwork}
              hoverImage={hoverImage}
              designHouseProfile={designHouseProfile}
              coCreatorProfile={coCreatorProfile}
            />
          </div>
        </div>
        {product?.more_like_product && product.more_like_product.length > 0 && (
          <div className="wrapper">
            <PdpRecommedation relatedProducts={product?.more_like_product} />
          </div>
        )}
      </div>
    </>
  );
}