"use client";
import React, { useState, useEffect } from "react";
import Image from "next/image";
import { TextLink } from "../button";
import { pdpInfo } from "../types";
import { AWS_CDN_URL } from "@/utils/staticValues";

export default function ProductInfo({
  vibes,
  product_description,
  fabric,
  care,
  technique,
  artworks,
  hoverImage,
  designHouseProfile,
  coCreatorProfile,
}: pdpInfo) {
  const [activeId, setActiveId] = useState<string | null>(null);
  const [isMobile, setIsMobile] = useState(false);
  const [silhouetteImage, setSilhouetteImage] = useState("");

  useEffect(() => {
    const checkMobile = () => {
      setIsMobile(window.innerWidth < 640); // Tailwind 'sm' breakpoint
    };
    checkMobile();
    window.addEventListener("resize", checkMobile);
    return () => window.removeEventListener("resize", checkMobile);
  }, []);

  const handleInteraction = (id: string) => {
    if (isMobile) {
      setActiveId((prev) => (prev === id ? null : id));
    } else {
      setActiveId(id);
    }
  };

  const handleLeave = () => {
    if (!isMobile) {
      setActiveId(null);
    }
  };

  useEffect(() => {
    console.log("hoverImage", hoverImage?.silhouette_image, AWS_CDN_URL);

    if (hoverImage) {
      setSilhouetteImage(`${AWS_CDN_URL}/${hoverImage.silhouette_image}`);
    }
  }, [hoverImage]);

  console.log("hoverImage", hoverImage?.silhouette_image, AWS_CDN_URL);

  const BaseStyle =
    "absolute top-8 left-4 z-10 h-auto w-32 max-w-32 md:w-44 md:max-w-44 border-1 border-gray-950 bg-gray-100 p-2";

  return (
    <div className="flex flex-col gap-10 py-10 md:pt-5">
      <div className="flex w-full flex-col justify-between gap-10 border-b-1 border-gray-100 pb-5 md:flex-row md:gap-25">
        <div className="flex w-full flex-col md:w-2/3">
          <div className="flex w-full text-xs/5 font-normal">
            {product_description?.description}
          </div>
        </div>
        <div className="flex w-full md:w-1/3">
          <div className="flex flex-col gap-8 text-sm">
            <div className="grid grid-cols-2 gap-5 md:grid-cols-1">
              {product_description?.user?.name && (
                <div className="flex w-full flex-col">
                  <p className="font-macropolo text-sm font-medium tracking-widest uppercase">
                    Co-Creator
                  </p>
                  <TextLink
                    id="sdddsd"
                    href={`/co-creators/${coCreatorProfile?.slug}` || "#"}
                    label={product_description?.user?.name}
                    color="gray"
                  />
                </div>
              )}
              {product_description?.design_house?.name && (
                <div className="flex w-full flex-col">
                  <p className="font-macropolo text-sm font-medium tracking-widest uppercase">
                    Design House
                  </p>
                  <div className="flex items-center gap-5">
                    <TextLink
                      id="sdddsd2"
                      href={`/design-houses/${designHouseProfile?.slug}`}
                      label={designHouseProfile?.name}
                      color="gray"
                    />
                  </div>
                </div>
              )}
              {product_description?.sku && (
                <div className="flex w-full flex-col gap-1">
                  <p className="font-macropolo text-sm font-medium tracking-widest uppercase">
                    SKU ID
                  </p>
                  <p className="uppercase">{product_description?.sku}</p>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
      <div className="flex w-full flex-col border-b-1 border-gray-300 pb-5">
        <h4>Specifications</h4>
        <div className="grid grid-cols-2 gap-4 md:grid-cols-3 md:gap-10">
          {product_description?.product_silhouette &&
            product_description?.product_silhouette.length > 0 && (
              <>
                <div
                  className="relative flex w-full flex-col p-1"
                  onMouseEnter={() => handleInteraction("item_silhouette")}
                  onMouseLeave={handleLeave}
                  onClick={() => handleInteraction("item_silhouette")}
                >
                  <p className="font-macropolo text-sm font-medium tracking-widest uppercase">
                    Silhouette -
                  </p>

                  <div className="text-xs font-medium">
                    <ul>
                      {product_description?.product_silhouette.map(
                        (item: any) => (
                          <li key={`product_silhouette_key_${item.id}`}>
                            {item.name}
                          </li>
                        ),
                      )}
                    </ul>
                  </div>

                  {activeId === "item_silhouette" && hoverImage && (
                    <div className={`${BaseStyle}`}>
                      <div className="hoverImageTest">
                        <Image
                          src={silhouetteImage}
                          alt={hoverImage?.silhouette_image}
                          width={200}
                          height={300}
                          className="img-responsive"
                        />
                      </div>
                    </div>
                  )}
                </div>
              </>
            )}
          {fabric && fabric?.length > 0 && (
            <div
              className="relative flex w-full flex-col p-1"
              onMouseEnter={() => handleInteraction("item_materials")}
              onMouseLeave={handleLeave}
              onClick={() => handleInteraction("item_materials")}
            >
              <p className="font-macropolo text-sm font-medium tracking-widest uppercase">
                Materials
              </p>
              <ul className="mt-2 flex flex-col gap-4">
                <li className="flex flex-wrap items-center gap-1 align-middle">
                  <p className="text-xs/3 font-medium">Fabric:</p>
                  <p className="flex flex-wrap gap-1 text-xs">
                    {fabric.map((item: any, index: any) => (
                      <span
                        key={`${item}_${index}`}
                        className="rounded-full font-medium"
                      >
                        {item.material_website_display}
                      </span>
                    ))}
                  </p>
                </li>
              </ul>
              {activeId === "item_materials" && (
                <div className={`${BaseStyle}`}>
                  <div className="">
                    <Image
                      src={`${AWS_CDN_URL}/${hoverImage?.material_image}`}
                      alt={`${AWS_CDN_URL}/${hoverImage?.material_image}`}
                      width={200}
                      height={300}
                      className="img-responsive"
                    />
                  </div>
                </div>
              )}
            </div>
          )}
          {vibes && vibes.length > 0 && (
            <div
              className="relative flex w-full flex-col p-1"
              onMouseEnter={() => handleInteraction("item_vibe")}
              onMouseLeave={handleLeave}
              onClick={() => handleInteraction("item_vibe")}
            >
              <p className="font-macropolo text-sm font-medium tracking-widest uppercase">
                Vibe
              </p>

              <div className="text-xs font-medium">
                {vibes
                  .split(",")
                  .slice(0, 3)
                  .map((v: string) => v.trim())
                  .join(", ")}
              </div>
              {/* {activeId === "item_vibe" && (
                <div className={`${BaseStyle}`}>
                  <div className="">
                    <Image
                      src={`${AWS_CDN_URL}/${hoverImage?.vibe_image}`}
                      alt={`${AWS_CDN_URL}/${hoverImage?.vibe_image}`}
                      width={200}
                      height={300}
                      className="img-responsive"
                    />
                  </div>
                </div>
              )} */}
            </div>
          )}
          {technique && technique.length > 0 && hoverImage?.techniques && (
            <div
              className="relative flex w-full flex-col p-1"
              onMouseEnter={() => handleInteraction("item_technique")}
              onMouseLeave={handleLeave}
              onClick={() => handleInteraction("item_technique")}
            >
              <p className="font-macropolo text-sm font-medium tracking-widest uppercase">
                Technique
              </p>
              <div className="text-xs font-medium">{technique}</div>
              {activeId === "item_technique" && (
                <div className={`${BaseStyle}`}>
                  <div className="">
                    <Image
                      src={`${AWS_CDN_URL}/${hoverImage?.techniques}`}
                      alt={`${AWS_CDN_URL}/${hoverImage?.techniques}`}
                      width={200}
                      height={300}
                      className="img-responsive"
                    />
                  </div>
                </div>
              )}
            </div>
          )}
          {Array.isArray(artworks) &&
            artworks.length > 0 &&
            artworks.some((item) => item?.source && hoverImage?.art_image) && (
              <div
                className="relative flex w-full flex-col p-1"
                onMouseEnter={() => handleInteraction("item_artwork")}
                onMouseLeave={handleLeave}
                onClick={() => handleInteraction("item_artwork")}
              >
                <p className="font-macropolo text-sm font-medium tracking-widest uppercase">
                  Artwork
                </p>
                <ul className="flex flex-col gap-4 text-xs">
                  {artworks &&
                    artworks.map((item: any, index: any) => (
                      <li key={`art_work_key_${index}`} className="text-xs">
                        {item.name} by{" "}
                        <span className="font-semibold">
                          {item.artist_name}
                        </span>
                        <br />
                        Source:{" "}
                        <span className="font-semibold">{item.source}</span>
                      </li>
                    ))}
                </ul>
                {activeId === "item_artwork" && (
                  <div className={`${BaseStyle}`}>
                    <div className="">
                      <Image
                        src={`${AWS_CDN_URL}/${hoverImage?.art_image}`}
                        alt={`${AWS_CDN_URL}/${hoverImage?.art_image}`}
                        width={200}
                        height={300}
                        className="img-responsive"
                      />
                    </div>
                  </div>
                )}
              </div>
            )}
        </div>
      </div>
      {care && (
        <div className="flex w-full flex-col border-b-1 border-gray-300 pb-5">
          <h4>Care Instructions</h4>
          <div
            className="flex w-full text-xs/5 font-normal"
            dangerouslySetInnerHTML={{ __html: care }}
          ></div>
        </div>
      )}
    </div>
  );
}