"use client";
import Image from "next/image";
import CCStyle from "@/app/components/co-creators/ccTheme";
import { TextLink } from "@/app/components/button";
import { LinkButton } from "@/app/components/form/forms";
import { Suspense, lazy, useEffect, useState } from "react";
import { BtnLink } from "@/app/components/button";


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
}

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 [totalPrice, setTotalPrice] = useState(0);

  useEffect(() => {
    getProductList();
  }, []);

  async function getProductList() {
    try {
      const response = await fetch(`${process.env.API_BASE_URL}/creator-detail`, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
        },
      });

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

      const data = await response.json();
     
      setCreator(data.data.creator);
      setProducts(data.data.products)
      setOtherCoCreator(data.data.other_creators);

      const items = data.data.creator?.interests || "";
      // Split the items by comma, trim spaces, and filter out empty items
      const interests: string[] = items
          .toString() // Ensure it's a string
          .replace(/[\[\]']+/g, "") // Remove square brackets and single quotes
          .replace(/"/g, "") // Remove double quotes
          .replace(/;/g, ",") // Replace semicolons with commas
          .replace(/,/g, ",") // Replace commas with commas (redundant but for clarity)
          .replace(/\s+/g, ",") // Replace multiple spaces with a single comma
          .replace(/,,+/g, ",") // Replace multiple commas with a single comma
          .replace(/^\s+|\s+$/g, "") // Trim leading/trailing spaces
          .replace(/,+/g, ",") // Replace multiple commas with a single comma
          .replace(/,$/, "") // Remove trailing comma if exists
          .replace(/^\s+|\s+$/g, "") // Trim leading/trailing spaces
          .split(",")
          .map((item: string) => item.trim()) // remove leading/trailing spaces
          .filter((item: string) => item);

      setInterestsItems(interests);
            

      return data; // Return the data if needed
    } catch (error) {
      console.error("Error fetching category list:", error);
    }
  }

  const ccTheme = {
    herobgfrom: creator?.hero_bg_from || "#014E44",
    herolbgvia: creator?.hero_bg_via || "#F5F565",
    herolbgto: creator?.hero_bg_to || "#28EBA7",
    pageBg: creator?.hexcode_for_bg || "#EBFEF8",
    fontColor: creator?.font_color || "#1A3234",
    primaryColor: creator?.primary_color || "#194458",
    secondaryColor: creator?.secondary_color || "#CDADF1",
    hlgtColor: creator?.high_light_color || "#17194A",
  };
console.log('creator',creator);
  return (
    <>
      {props.children}
      {/* <style jsx global>
        {CCStyle}
      </style> */}
      <div className="flex flex-col pt-12">
        <div className="cc-hero relative overflow-hidden">
          <div className="absolute flex items-center left-0 top-0 h-[100%] w-[100%] z-1 scale-320 cc-mesh"></div>
          <div className="mob-noise absolute z-2 top-0 left-0 h-full w-full"></div>
          <div className="icon-big-open-flower absolute top-0 right-0 z-10 h-30 w-30 bg-teal-600 opacity-50 md:h-60 md:w-60"></div>
          <div className="relative z-30">
            <div className="icon-big-open-flower absolute -bottom-5 -left-[5%] z-10 h-60 w-60 bg-teal-600 opacity-50 md:h-100 md:w-100"></div>
            <div className="wrapper">
              <div className="flex w-full py-4">
                <TextLink
                  id="link_view_all_design-house"
                  href="/co-creators"
                  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="icon-bud-flower-thread mx-auto h-14.5 w-15 items-center justify-center bg-teal-300 md:h-24 md:w-25" style={{background:creator?.hexcode_for_piece_bg}}></div>
                      <h1> {creator?.name}</h1>
                      <div className="font-bogart text-md 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 text-xl font-light">
                       {creator?.caption}
                      </p>
                      <div className="flex flex-col gap-1">
                        <p className="label">Interests</p>
                        <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={creator?.button_link} style={{background:creator?.hexcode_for_button}}>
                          {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 fallback={<p>Loading showcases...</p>}>
                      <CCProfileSwiper imgProfile={creator?.co_creator_images}/>
                    </Suspense>
                  </div>
                </div>
                <div className="flex h-full w-full flex-col py-10 md:py-0">
                  <div className="font-bogart text-md 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">
                    <p>{creator?.bio}</p>
                    
                  </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="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 w-full flex-col gap-20 md:flex-row">
                <div className="relative flex-col md:flex md:w-[60%] md:pt-20">
                  <div>
                    <div className="flex w-full flex-col gap-5 md:w-[60%]">
                      <h1>
                        Featured
                        <br />
                        Projects
                      </h1>
                      <p className="font-bogart text-xl font-light">
                        Welcome to the heart and soul of Hardik Tuteja{"'"}s
                        creative universe: our Design Houses, where your visions
                        become reality.
                      </p>
                    </div>
                  </div>
                  <Suspense fallback={<p>Loading projects...</p>}>
                    <ProjectList/>
                  </Suspense>
                </div>
                <div className="top-[64px] flex w-full flex-col md:sticky md:h-screen md:w-[40%]">
                  <Suspense fallback={<p>Loading products...</p>}>
                    <StoreThumbs products={products}/>
                  </Suspense>

                  <div className="flex w-full py-8">
                    <BtnLink
                      id="link_cc_store"
                      href="/category"
                      label="Go to store"
                      color="gray"
                    />
                  </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>
       {/* Dynamic Inline CSS with JSX */}
      <style jsx>{`
         body {
    background: ${ccTheme.pageBg};
    color: ${ccTheme.fontColor};
  }
  .cc-hero{
    background: ${ccTheme.pageBg};
  }
  .cc-mesh{
    background-image:
    radial-gradient(at 40% 20%, ${ccTheme.herobgfrom} 0px, transparent 40%),
    radial-gradient(at 80% 0%, ${ccTheme.herolbgvia} 0px, transparent 80%),
    radial-gradient(at 0% 50%, ${ccTheme.herolbgto} 0px, transparent 50%);
  }
  
  .cc-other-sec{
    background: linear-gradient(180deg, ${ccTheme.pageBg}, ${ccTheme.primaryColor} 80%, ${ccTheme.primaryColor} 100%) ;
  }

  .icon-big-open-flower{
    background: ${ccTheme.primaryColor};
  }
  .icon-bud-flower-thread{
    background: ${ccTheme.primaryColor};
    }
  .linkBtn{
    color: ${ccTheme.fontColor};
  }
  .linkBtn:hover{
    color: ${ccTheme.hlgtColor};
  }
  .list-chips li{
    border:1px dashed ${ccTheme.hlgtColor};
    color: ${ccTheme.fontColor};
    transaction: ease .25s all;
  }
  .sec-swiper{
  background: ${ccTheme.secondaryColor};
  }
  .list-chips li:hover{
    color: ${ccTheme.pageBg};
    background: ${ccTheme.hlgtColor};
  }
  .hairline-12{
    background: ${ccTheme.hlgtColor};
  }
  .showcase-sec{
    background: ${ccTheme.secondaryColor}
  }
  .dh-bullet .swiper-pagination-bullet{
    background: ${ccTheme.fontColor};
  }
  .dh-bullet .swiper-pagination-bullet-active{
    background: ${ccTheme.hlgtColor};
  }
  .btn-hairline .hairline{
      background: ${ccTheme.pageBg};
  }
  .btn-hairline button{
    background: ${ccTheme.hlgtColor};
    color: ${ccTheme.pageBg};
  }
  .btn-hairline:hover button{
    background: ${ccTheme.primaryColor};
    color: ${ccTheme.pageBg};
  }
  .sec-dh-team{
    background: ${ccTheme.secondaryColor};
  }
  .team-heading, .team-role{
    color: ${ccTheme.hlgtColor};
  }
  .team-card{
    background: ${ccTheme.primaryColor};
  }
  .team-card-wrap{
    background: ${ccTheme.secondaryColor};
  }
  .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 300px;
  }
  .project-bg-grad{
    background-color: ${ccTheme.secondaryColor};
    background-image: radial-gradient(circle at 5% 1%, ${ccTheme.pageBg} 20%, transparent 80%);
    background-blend-mode: normal;
  }
      `}</style>
    </>
  );
}