"use client";

import React from "react";
import Image from "next/image";
import { TextLink } from "@/app/components/button";
import {
  Suspense,
  lazy,
  useEffect,
  useState,
  useCallback,
  useMemo,
} from "react";
import { BtnLink } from "@/app/components/button";
import {AWS_CDN_URL } from "@/utils/staticValues";
import "@/app/components/co-creators/ccStyle.css";

const ProjectList = lazy(() => import("@/app/components/project/projectList"));
const CoCreatorsList = lazy(
  () => import("@/app/components/co-creation/cc-co-creators"),
);
const StoreThumbs = lazy(
  () => import("@/app/components/co-creation/cc-store-thumbs"),
);
const CCProfileSwiper = lazy(
  () => import("@/app/components/co-creators/profile-swiper"),
);
const DesignHouseCC = lazy(
  () => import("@/app/components/co-creation/cc-design-house"),
);

interface creatorDTO {
  id: any;
  name: any;
  hexcode_for_piece_bg: any;
  button_link: any;
  based_in_city: any;
  caption: any;
  button_text: any;
  co_creator_images: any;
  bio: any;
  font_color: string;
  primary_color: string;
  secondary_color: string;
  hlgtColor: string;
  hexcode_for_bg: string;
  hexcode_for_button: string;
  hero_bg_from: string;
  hero_bg_to: string;
  hero_bg_via: string;
  high_light_color: string;
  background_icon: string;
  symbol: string;
  interests?: string[] | string;
  slug: string;
  user_id_hash: string;
}

interface CoCreatorDetailsProps {
  params: {
    slug: string;
  };
}

export default function CoCreatorDetails(props: any) {
  const [creator, setCreator] = useState<creatorDTO>();
  const [products, setProducts] = useState([]);
  const [interestsItems, setInterestsItems] = useState<string[]>([]);
  const [otherCoCreator, setOtherCoCreator] = useState([]);
  const [isAllowed, setIsAllowed] = useState(false);
  const [totalPrice, setTotalPrice] = useState(0);

  const { initialData } = props;

  const allowedSlugs = useMemo(
    () => ["hardik-tuteja", "qasim-anwar", "shaurya-dhingra"],
    [],
  );

  useEffect(() => {
    if (initialData) {
      setCreator(initialData.data.creator);
      setProducts(initialData.data.products);
      setOtherCoCreator(initialData.data.other_creators);

      const items = initialData.data.creator?.interests || "";
      const interests: string[] = items
        .toString()
        .replace(/[\[\]']+/g, "")
        .replace(/"/g, "")
        .replace(/;/g, ",")
        .replace(/\s+/g, ",")
        .replace(/,+/g, ",")
        .replace(/,$/, "")
        .split(",")
        .map((item: string) => item.trim())
        .filter(Boolean);

      setInterestsItems(interests);
      setIsAllowed(allowedSlugs.includes(initialData.data.creator.slug));
    }
  }, [initialData, allowedSlugs]);

  const herobgfrom = creator?.hero_bg_from || "#F3F2D7";
  const herolbgvia = creator?.hero_bg_via || "#F3F2D7";
  const herolbgto = creator?.hero_bg_to || "#F3F2D7";
  const pageBg = creator?.hexcode_for_bg || "#F3F2D7";
  const fontColor = creator?.font_color || "#1A3234";
  const primaryColor = creator?.primary_color || "#F3F2D7";
  const secondaryColor = creator?.secondary_color || "#F3F2D7";
  const hlgtColor = creator?.high_light_color || "#F3F2D7";
  const btnColor = creator?.hexcode_for_button || "#F3F2D7";
  const piecgBg = creator?.hexcode_for_piece_bg || "#F3F2D7";
  const ccSymbool = creator?.symbol || "#000000";
  const pageIcon = creator?.background_icon || "#000000";


  return (
    <>
      <div
        className="ccMainWrap flex flex-col pt-12"
        style={
          {
            "--hero-bg-from": herobgfrom,
            "--hero-bg-via": herolbgvia,
            "--hero-bg-to": herolbgto,
            "--page-bg": pageBg,
            "--primary-color": primaryColor,
            "--secondary-color": secondaryColor,
            "--font-color": fontColor,
            "--btn-color": btnColor,
            "--hlgt-color": hlgtColor,
            "--piece-bg": piecgBg,
            "--cc-symbool": ccSymbool,
            "--cc-icon": pageIcon,
          } as React.CSSProperties
        }
      >
        <div className="cc-hero relative overflow-hidden">
          <div className="cc-mesh absolute top-0 left-0 z-1 flex h-[100%] w-[100%] items-center"></div>
          <div className="mob-noise absolute top-0 left-0 z-2 h-full w-full"></div>
          <div className="absolute -top-10 -right-10 z-10 h-30 w-30 overflow-hidden opacity-50 md:h-80 md:w-80">
            <div className="bg-dual-motif">
              <Image
                src={`${AWS_CDN_URL}/${pageIcon}`}
                width={512}
                height={512}
                alt="Co-creator brand logo"
                className="img-responsive inline-flex"
              />
            </div>
          </div>
          <div className="absolute -bottom-[2%] -left-[5%] z-10 h-60 w-60 overflow-hidden opacity-50 md:h-[40%] md:w-[40%]">
            <div className="bg-dual-motif">
              <Image
                src={`${AWS_CDN_URL}/${pageIcon}`}
                width={512}
                height={512}
                alt="Co-creator brand motif icon"
                className="img-responsive inline-flex"
              />
            </div>
          </div>
          <div className="relative z-30">
            <div className="wrapper">
              <div className="btnLink inline-flex py-4">
                <TextLink
                  id="link_view_all_design-house"
                  href="/co-creation"
                  label="View all Co-Creators"
                  color="gray"
                />
              </div>
              <div className="flex w-full pt-5 pb-15">
                <div className="mx-auto flex w-full flex-col md:w-[40%]">
                  <div className="relative flex w-full">
                    <div className="flex w-full flex-col items-center justify-center gap-4 text-center">
                      <div
                        className="mx-auto inline-flex h-16 w-16 items-center justify-center overflow-hidden align-middle md:h-32 md:w-32"
                        style={{
                          display: "inline-block",
                          backgroundColor: piecgBg,
                          WebkitMaskImage: `url(${AWS_CDN_URL}/${ccSymbool})`,
                          WebkitMaskRepeat: "no-repeat",
                          WebkitMaskSize: "contain",
                          WebkitMaskPosition: "center",
                          maskImage: `url(${AWS_CDN_URL}/${ccSymbool})`,
                          maskRepeat: "no-repeat",
                          maskSize: "contain",
                          maskPosition: "center",
                        }}
                      ></div>
                      <h1 className="titleText"> {creator?.name}</h1>
                      <div className="font-bogart text-md subTitleText align-middle">
                        <span className="top:0 relative mr-1 md:top-0.5">
                          <i className="icon-[bx--map]"></i>
                        </span>
                        {creator?.based_in_city}
                      </div>
                      <p className="font-bogart captionText text-xl font-light">
                        {creator?.caption}
                      </p>
                      <div className="flex flex-col gap-1">
                        <ul className="list-chips *:text-xs">
                          {interestsItems.map((item, index) => (
                            <li key={index}>{item}</li>
                          ))}
                        </ul>
                      </div>
                      <div className="mx-auto hidden w-full pt-5 md:flex md:w-[75%]">
                        <div className="btn-hairline relative flex w-full flex-col">
                          <span className="hairline absolute top-[6px] -left-[6px] z-2 inline-flex h-12 w-full"></span>
                          <button
                            className="relative z-20 flex h-12 w-full justify-center px-6 py-3 align-middle font-medium tracking-wider uppercase duration-300"
                            onClick={() => {
                              if (creator?.button_link) {
                                window.open(creator.button_link, "_blank");
                              }
                            }}
                          >
                            {creator?.button_text}
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="wrapper">
              <div className="relative grid grid-cols-1 overflow-hidden pt-5 pb-20 align-middle md:grid-cols-2">
                <div className="relative z-30 flex flex-col items-end justify-end">
                  <div className="flex w-full md:w-[80%]">
                    <Suspense>
                      <CCProfileSwiper
                        imgProfile={creator?.co_creator_images}
                      />
                    </Suspense>
                  </div>
                </div>
                <div className="bioWrapText flex h-full w-full flex-col py-10 md:py-0">
                  <div className="mx-auto flex h-full w-[90%] flex-col items-center justify-center gap-4 font-light md:w-[75%] md:gap-8 md:text-xl">
                    <div className="font-bogart text-2xl/6">{creator?.bio}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="project-bg-grad relative pt-20 pb-10">
          <div className="mob-noise absolute top-0 left-0 z-3 h-full w-full"></div>
          <div className="relative z-30">
            <div className="wrapper">
              <div className="flex flex-col gap-10">
                <div className="sectionHeading flex w-full flex-col gap-5 md:w-[60%]">
                  <h1>
                    Featured
                    <br />
                    Pieces
                  </h1>
                </div>
                <div
                  className={`grid gap-0 md:gap-20 ${isAllowed ? "md:grid-cols-2" : "grid-cols-1"} `}
                >
                  {isAllowed && (
                    <div className="relative w-full flex-col">
                      <Suspense fallback={<p>Loading projects...</p>}>
                        <ProjectList />
                      </Suspense>
                    </div>
                  )}
                  <div className="flex w-full flex-col">
                    <div
                      className={`grid grid-cols-1 gap-4 ${isAllowed ? "md:grid-cols-3" : "md:grid-cols-5"} `}
                    >
                      <Suspense>
                        <StoreThumbs products={products} />
                      </Suspense>
                    </div>
                    <div className="flex items-center justify-center py-8">
                      <div
                        className={`storeBtn mx-auto flex w-full items-center justify-center ${isAllowed ? "md:w-[50%]" : "md:w-[25%]"} `}
                      >
                        <BtnLink
                          id="link_cc_store"
                          href={`/category?CoCreator=${creator?.user_id_hash}`}
                          label="Go to store"
                          color="gray"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="cc-other-sec relative flex w-full flex-col py-10 md:py-20">
          <div className="mob-noise absolute top-0 left-0 z-1 h-full w-full"></div>
          <div className="wrapper relative z-10">
            <div className="heading-title">
              EXPLORE OTHER
              <br />
              Co-Creators
            </div>
            <Suspense fallback={<p>Loading co-creators...</p>}>
              <CoCreatorsList otherCoCreator={otherCoCreator} />
            </Suspense>
          </div>
        </div>
      </div>
    </>
  );
}