"use client";

import React, { useCallback, useEffect, useState } from "react";
import LikeBtn from "@/app/components/cards/like-btn";
import Breadcrumb from "@/app/components/product/breadcrumb";
import ProductGallery from "@/app/components/product/product-gallery";
import { FormButton } from "@/app/components/form/forms";
import {AWS_CDN_URL } from "@/utils/staticValues";
import Cookies from "js-cookie";
import PdpRecommedation from "@/app/components/product/PdpRecommedation";
import ScoreCircle from "@/app/components/common/ScoreCircle";
import PDPBulkOrder from "../../components/product/BulkOrder";
import CoCreationChoiceModal from "@/app/components/modal/CoCreationChoiceModal";
import { userIdKey } from "@/utils/helper";
import { useRouter } from "next/navigation";
import ScrollToTop from "@/app/components/ScrollToTop";

interface ProductInterface {
  id: string;
  productId: string;
  production_lead_time_days: string;

  product: {
    product_name: string;
    price: string;
    category: {
      name: string;
    };
  };
  main_item_image: {
    image_url: string;
  };
  design_house: {
    name: string;
  };
  product_name: string;
  price: any;
  main_item_images: any;
  category: {
    name: string;
  };
  sub_category: {
    name: string;
  };
  more_like_product: any;
}

interface ProductClientProps {
  initialData?: any;
  slug: string;
}

interface GalleryImage {
  id: number;
  image_url: string | null;
  alt_text: string | null;
}

export default function SilhouetteDetailClient({
  slug,
  initialData,
}: ProductClientProps) {
  const [product, setProduct] = useState<ProductInterface | null>(
    initialData?.data?.product || null,
  );

  const router = useRouter();

  const [bulkOrder, setBulkOrder] = useState<ProductInterface | null>(null);

  const [silhouetteData, setSilhouetteData] = useState<any>(initialData?.data?.silhouette || null);
  const [relatedProducts, setRelatedProducts] = useState<any>(initialData?.data?.related_product || []);

  const [galleryImage, setGalleryImage] = useState<GalleryImage[]>(initialData?.data?.gallery || []);
  const [isCoCreationModalOpen, setIsCoCreationModalOpen] = useState(false);

  const handleModalClose = () => {
    setIsCoCreationModalOpen(false);
  };

  const handleCoCreationChoice = useCallback(
    async (choice: string) => {
      try {
        console.log("User selected:", choice);

        const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/silhouette-co-creation`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            ...(Cookies.get("token") && {
              Authorization: `Bearer ${Cookies.get("token")}`,
            }),
          },
          body: JSON.stringify({
            silhouette_id: silhouetteData?.id,
            creation_type: choice,
            slug,
            user_id: userIdKey(),
          }),
        });

        if (!response.ok) {
          throw new Error(`Error: ${response.status} - ${response.statusText}`);
        }

        const data = await response.json();
        console.log("Co-creation response:", data);

        sessionStorage.setItem("session_id", data.data.session_id);

        const token = Cookies.get("token_client");

        if (!token && typeof window !== "undefined") {
          router.push(
            `/auth/login?redirect=${encodeURIComponent(data.data.url)}`,
          );
        } else {
          window.location.href = data.data.url;
        }
      } catch (error) {
        console.error("Error creating co-creation:", error);
      }
    },
    [silhouetteData?.id, slug, router],
  );

  const handleCustomizeClick = useCallback(async () => {
    const isSingleCompatible = true;
    const isCoordCompatible = silhouetteData?.is_coord_compatible || false;
    const isSuitCompatible = silhouetteData?.is_suit_compatible || false;

    if (isSingleCompatible && !isCoordCompatible && !isSuitCompatible) {
      handleCoCreationChoice("single");
      return;
    }

    if (isCoordCompatible || isSuitCompatible) {
      setIsCoCreationModalOpen(true);
    } else {
      handleCoCreationChoice("single");
    }
  }, [silhouetteData, handleCoCreationChoice]);

  const handleEnquirySubmit = async (
    e: React.MouseEvent<HTMLButtonElement>,
  ) => {};

  const getProductList = useCallback(async () => {
    // Only fetch if we don't have initial data
    if (initialData) return;
    
    try {
      const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/silhouette/${slug}`, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
        },
      });

      if (!response.ok) {
        throw new Error(`Error: ${response.status} - ${response.statusText}`);
      }

      const data = await response.json();
      setRelatedProducts(data?.data?.related_product || null);
      setSilhouetteData(data?.data?.silhouette || null);
      setGalleryImage(data?.data?.gallery || []);

      return data;
    } catch (error) {
      console.error("Error fetching category list:", error);
    }
  }, [slug, initialData]);

  useEffect(() => {
    // Only fetch if we don't have initial data
    if (!initialData) {
      getProductList();
    }
  }, [slug, getProductList, initialData]);

  return (
    <>
      <ScrollToTop/>
      <div className="wrapper">
        <div className="grid grid-cols-1 md:grid-cols-3">
          <div className="col-span-2">
            <div className="flex w-full overflow-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={galleryImage} />
                  <div className="absolute right-1 bottom-1 z-40">
                    <div className="rounded-full bg-white/50">
                      {product && (
                        <LikeBtn
                          productId={silhouetteData?.id}
                          wishType="SILHOUETTES"
                        />
                      )}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="hidden flex-col gap-8 md:flex">
              {silhouetteData?.description && (
                <div className="text-xs">{silhouetteData?.description}</div>
              )}
            </div>
            <div className="flex w-full flex-col gap-4 py-12">
              <h4 className="med">
                Vibes score <span className="font-mono text-sm">out of 10</span>
              </h4>
              <div className="flex w-full flex-wrap gap-4 md:gap-12">
                {silhouetteData?.vibes_arr &&
                  silhouetteData.vibes_arr.length > 0 &&
                  silhouetteData.vibes_arr.map((item: any, index: number) => (
                    <ScoreCircle
                      key={`${item.id}_${index}`}
                      score={item.score}
                      label={item.label}
                      maxScore={10}
                    />
                  ))}
              </div>
            </div>
          </div>
          <div className="col-span-1 pl-0 md:pl-8">
            <div className="flex flex-col gap-2">
              <div>
                <div className="hidden md:flex">
                  <Breadcrumb
                    category={silhouetteData?.shop_category?.name}
                    sub_category={silhouetteData?.shop_sub_category?.name}
                  />
                </div>
                <div className="flex flex-row items-center justify-between align-middle">
                  <div>
                    <h1 className="productTitle mt-4 md:mt-0">
                      {silhouetteData?.name}
                    </h1>
                  </div>
                  <div>
                    <div className="hidden md:flex">
                      {product && (
                        <LikeBtn
                          productId={product?.id}
                          wishType="SILHOUETTES"
                        />
                      )}
                    </div>
                  </div>
                </div>
              </div>
              <div className="flex flex-col [&>div]:border-b-1 [&>div]:border-dashed [&>div]:border-gray-950/25 [&>div]:py-4">
                <div className="flex flex-col text-sm capitalize">
                  <div className="text-xs capitalize">Gender</div>
                  {silhouetteData?.gender
                    .map((gender: any) => gender)
                    .join(", ")}
                </div>
                {silhouetteData?.shop_category?.name && (
                  <div className="flex flex-col">
                    <div className="text-xs capitalize">Category</div>
                    <div className="grid grid-cols-2 gap-1">
                      <div className="text-sm">
                        {silhouetteData?.shop_category?.name}
                        {silhouetteData?.shop_sub_category?.name ? (
                          <>
                            <i className="icon-[solar--arrow-right-broken] relative top-[3px] ml-1"></i>{" "}
                            {silhouetteData.shop_sub_category.name}
                          </>
                        ) : (
                          ""
                        )}
                      </div>
                    </div>
                  </div>
                )}
              </div>
              <div className="flex flex-col gap-4">
                <div>
                  <FormButton
                    id="btn_design_buy"
                    label="Start Co-Creation"
                    type="button"
                    color="gray"
                    hairline="amber"
                    onClick={handleCustomizeClick}
                  />
                </div>
                <div className="flex w-full flex-col">
                  <PDPBulkOrder
                    bulkOrderData={bulkOrder}
                    showButtonOnly={true}
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="wrapper flex flex-col md:hidden">
        <div className="my-8 flex flex-col gap-8">
          {silhouetteData?.description && (
            <div className="text-xs">{silhouetteData?.description}</div>
          )}
        </div>
        <div className="flex w-full flex-col gap-4 py-12">
          <h4 className="med">
            Vibes score <span className="font-mono text-sm">out of 10</span>
          </h4>
          <div className="flex w-full flex-wrap gap-4 md:gap-12">
            {silhouetteData?.vibes_arr &&
              silhouetteData?.vibes_arr.length > 0 &&
              silhouetteData.vibes_arr.map((item: any, index: number) => (
                <ScoreCircle
                  key={`${item.id}_${index}`}
                  score={item.score}
                  label={item.label}
                  maxScore={10}
                />
              ))}
          </div>
        </div>
      </div>

      {Array.isArray(relatedProducts) && relatedProducts.length > 0 && (
        <div className="wrapper">
          <PdpRecommedation
            relatedProducts={relatedProducts}
            heading_name={silhouetteData?.name}
          />
        </div>
      )}

      {/* Co-Creation Choice Modal */}
      <CoCreationChoiceModal
        isOpen={isCoCreationModalOpen}
        onClose={handleModalClose}
        onSubmit={handleCoCreationChoice}
        subCategoryName={silhouetteData?.shop_sub_category?.name || "item"}
        isCoordCompatible={silhouetteData?.is_coord_compatible || false}
        isSuitCompatible={silhouetteData?.is_suit_compatible || false}
      />
    </>
  );
}