"use client";

import { useMemo, useState, useEffect } from "react";
import Image from "next/image";
import LanguageAwareLink from "@/src/lib/utils/LanguageAwareLink";

import { withCDN } from "@/src/lib/utils";
import { useLanguage } from "@/src/lib/context/LanguageContext";
import { useWorkshops } from "@/src/lib/context/WorkshopsContext";
import type { WorkshopContent, Activity } from "../../lib/services/workshopService";
import type { ProcessedHeaderFooterHomeData } from "@/src/lib/types/header";
import Footer from "../layout/Footer";
import FooterForm from "../layout/FormLazyWrapper";
import WorkshopTab from "./WorkshopTab";
import AllWorkshop from "./AllWorkshop";
import Breadcrumbs from "../layout/Breadcrumbs";
import BackButton from "../layout/BackButton";
import ClickableImage from "../ui/ClickableImage";
import ProgramsSliderFooter from "../layout/ProgramsSlider-Footer";
import { mapActivitiesToWorkshopCards } from "../../lib/utils/workshopMapper";
import { mergeContentWithTranslation } from "../../lib/utils/languageHelper";
import { detailHref } from "../../lib/utils/detailHref";
import { fetchWorkshopActivities } from "../../lib/actions/workshopAction";

interface BannerStat {
  number: string;
  label: string;
}

const STAT_ICONS = [
  "/programs-page/programs-advantage.svg",
  "/programs-page/programs-advantage-3.svg",
  "/Workshop/programs%20advantage.png",
];

// Mapping icons for the banner based on workshop category/slug
const BANNER_WORKSHOP_ICONS: Record<string, string> = {
  "BIRTHDAY_PARTIES": "/workshop-logo/logo_birthday.svg",
  "BUILD_UP": "/workshop-logo/logo_build_up.svg",
  "SUMMER_CAMP": "/workshop-logo/logo_camps.svg",
  "PRO": "/workshop-logo/logo_pro.svg",
  "GOLDEN_AGE": "/workshop-logo/logo_golden_age.svg",
  "MECHANICS_CAMPS": "/workshop-logo/logo_camps.svg",
  "CODING_CAMPS": "/workshop-logo/logo_camps.svg",
};

interface WorkshopPageClientProps {
  headerFooterHomeData: ProcessedHeaderFooterHomeData;
  workshopPageData: {
    default: WorkshopContent | null;
    translated?: WorkshopContent | null;
  };
}

export default function WorkshopPageClient({
  headerFooterHomeData,
  workshopPageData,
}: WorkshopPageClientProps) {
  const { currentLanguage, isInitialized } = useLanguage();
  const { workshops } = useWorkshops();

  // Switch content based on selected language
  const workshopContent = useMemo(() => {
    const def = workshopPageData.default || {} as any;
    const trans = workshopPageData.translated;

    return mergeContentWithTranslation(def, trans);
  }, [currentLanguage, workshopPageData.default, workshopPageData.translated]);

  // Use workshop mapper to get valid workshop items from API
  const mappedWorkshops = useMemo(() => {
    return mapActivitiesToWorkshopCards(workshops);
  }, [workshops]);

  const bannerData = workshopContent.banner;

  // Parse stats
  const stats = useMemo<BannerStat[]>(() => {
    try {
      if (bannerData?.stats) {
        const parsed =
          typeof bannerData.stats === "string"
            ? JSON.parse(bannerData.stats)
            : bannerData.stats;
        return Array.isArray(parsed) ? parsed : [];
      }
      return [];
    } catch {
      return [];
    }
  }, [bannerData?.stats]);

  const heading = bannerData?.heading || "Workshops";
  const subHeading =
    bannerData?.subHeading ||
    "Whether you're 5 or 55+, build, learn, and connect through engineering, coding, and creative challenges.";
  const ctaText = bannerData?.ctaText || "Discover workshops";
  const ctaLink = bannerData?.ctaLink || "#allWorkshop";

  return (
    <main className="overflow-x-hidden workshop-main">
      {/*==============Hero-banner================*/}
      <section
        className="relative w-full overflow-hidden  py-10 md:py-16 lg:py-25
    min-h-[700px] md:min-h-[700px] lg:min-h-[760px] xl:min-h-[760px]
    px-4 md:px-8 lg:px-18 xl:px-10 sm:p b-0 pb-[80px]"
      >
        {/* Background */}
        <div className="absolute inset-0 -z-10">
          <div
            className="block md:hidden w-full h-full bg-cover bg-bottom"
            style={{ backgroundImage: `url('${withCDN("/enrichmentMobile.png")}')` }}
          />
          <div
            className="hidden md:block w-full h-full bg-cover bg-bottom"
            style={{ backgroundImage: `url('${withCDN("/enrichmentMobile.png")}')` }}
          />
        </div>

        {/*========main-content=========*/}
        <div className="relative z-10 mx-auto  md:flex flex-col justify-center lg:py-[24px] lg:pt-[8px] lg:py-2 md:py-[12px] max-[767px]:pt-[48px]">
          <BackButton className="mb-4" />
          <Breadcrumbs />

          {/*===========main-card===============*/}
          <div className="hidden md:block">
            <div className="relative z-10 max-w-[1300px] mx-auto w-full bg-white rounded-[30px]">
            <div className="relative z-10 max-w-[1300px] mx-auto w-full bg-white rounded-[30px] grid grid-cols-1 sm:grid-cols-12 gap-10 px-[15px] sm:px-[50px] xl:pr-[30px] mt-[20px] lg:mt-[30px] workshop-block">
              <div className="sm:col-span-6 xl:col-span-5 pt-[10px] sm:pt-[30px] pl-0">
                <h1 className="text-[30px] xl:text-[50px] text-[#0097DC] uppercase font-bold">
                  {heading}
                </h1>
                <p className="text-[14px] xl:text-[18px]  text-[#58585A] font-light">
                  {subHeading}
                </p>
                <div className="grid grid-cols-1 sm:grid-cols-12 gap-5 md:gap-3 lg:gap-5 mt-0 lg:mt-4 mb-[0px] w-full 2xl:w-[460px] lg:w-[440px] xl:!gap-y-5 workshop-logos">
                  {mappedWorkshops.map((workshop) => {
                    const iconSrc = workshop.iconSrc || BANNER_WORKSHOP_ICONS[workshop.workshopType];
                    if (!iconSrc) return null;
                    const finalIconSrc = iconSrc.startsWith("http") ? iconSrc : withCDN(iconSrc);

                    return (
                      <LanguageAwareLink
                        key={workshop.id}
                        href={detailHref("/workshops", workshop.id, workshop.workshopType)}
                        className="sm:col-span-4 w-[120px] h-[75px] md:w-full lg:w-[110px] xl:w-[140px] 2xl:w-[150px] xl:h-[110px] flex items-center justify-center shadow-[8px_9px_12px_#00000010] rounded-[20px] hover:!shadow-[10px_10px_14px_rgba(0,0,0,0.15)] hover:scale-[1.02] transition-transform bg-white cursor-pointer"
                      >
                        <Image
                          src={finalIconSrc}
                          alt={workshop.title}
                          width={140}
                          height={82}
                          className="object-cover w-full h-[55px] xl:h-[110px]"
                        />
                      </LanguageAwareLink>
                    );
                  })}
                </div>


              
              </div>

              <div className="sm:col-span-6 xl:col-span-7 workshop-right">
                <div className="relative w-full h-[250px] xl:h-[434px] lg:w-[90%] lg:ml-auto xl:w-full lg:mb-[48px] mt-[-35px] xl:mt-[-45px] 2xl:mt-[-20px] workshop-img">
                  <ClickableImage src={withCDN("/discover/photo%20(6)%20(3).png")} alt="image" className="object-cover rounded-[30px]" />
                </div>
              </div>

            </div>


          <div className="flex items-center justify-between gap-5 pb-10 px-[30px] md:mt-[33px] lg:mt-0">
                {/* Button */}
                <LanguageAwareLink
                  href={ctaLink}
                  className="flex items-center justify-center cursor-pointer gap-4 font-[Noto_Sans] font-light md:gap-3 bg-[#0097DC] rounded-full py-2 md:py-3 lg:py-9  px-6 md:px-4 lg:px-8 hover:bg-[#0097DC] hover:shadow-[10px_14px_14px_#0000000D] cursor-pointer active:bg-[#0097DC] active:shadow-[10px_14px_14px_#0000000D] transition-all w-fit md:h-11 2xl:h-[60px] whitespace-nowrap"                >
                  <Image src={withCDN("/gear.png")} alt="Gear" width={20} height={20} className="w-5.5 h-5.5 2xl:h-6 2xl:w-6 md:w-6 md:h-6" priority />
                  <span className="text-white text-[15px] xl:text-[24px] sm:text-[15px] tracking-wide uppercase font-regular">
                    {ctaText}
                  </span>
                </LanguageAwareLink>

                {/*======icon-bottom======*/}
                <div className="flex gap-[5px] min-[1600px]:!gap-[32px] w-full md:w-[62%] md:pr-5 lg:pr-0 md:ml-[-80px] xl:ml-0 xl:w-[60%] workshop-right-icon">
                  {stats.slice(0, 3).map((stat, idx) => (
                    <div key={idx} className="flex gap-[10px] w-[33%] ws-icon-box">
                      <Image src={withCDN(STAT_ICONS[idx])} alt={stat.number} width={40} height={40} className="w-[40px] h-[40px]  min-[1600px]:!w-[45px]  min-[1600px]:!h-[45px] object-contain" priority />
                      <div className="relative">
                        <h3 className="text-[18px] md:text-[16px] xl:text-[24px] min-[1600px]:!text-[25px] text-[#58585A] font-bold leading-none mb-2">{stat.number}</h3>
                        <p className="text-[8px] xl:text-[11px] text-[#58585A] font-light uppercase">{stat.label}</p>
                      </div>
                    </div>
                  ))}
                </div>
               </div>
               </div>
          </div>

          {/*=========Mobile-layout=============*/}
          <div className="block md:hidden">
            <div className="relative z-10 mx-auto bg-white rounded-[30px] grid grid-cols-1 md:grid-cols-12 gap-0 px-[15px] sm:px-[50px] py-5 mt-5  mb-10">
              <h1 className="text-[30px] xl:text-[50px] text-[#0097DC] uppercase font-bold">{heading}</h1>
              <p className="text-[14px] xl:text-[18px]  text-[#58585A] font-light">{subHeading}</p>
              <div className="relative w-full h-[193px] my-4 mob-img">
                <ClickableImage src={withCDN("/discover/photo%20(6)%20(3).png")} alt="image" className="object-cover rounded-[30px]" />
              </div>
              {/*======logo======*/}
              <div className="flex flex-nowrap overflow-x-auto no-scrollbar pb-5 gap-[10px] justify-start">
                {mappedWorkshops.map((workshop) => {
                  const iconSrc = workshop.iconSrc || BANNER_WORKSHOP_ICONS[workshop.workshopType];
                  if (!iconSrc) return null;

                  return (
                    <LanguageAwareLink
                      key={workshop.id}
                      href={detailHref("/workshops", workshop.id, workshop.workshopType)}
                      className="w-[85px] flex-[0_0_auto] w-[85px] h-[60px] xl:w-[140px] xl:h-[110px] flex items-center justify-center shadow-[13px_8px_23px_#00000026] rounded-[20px] bg-white cursor-pointer"
                    >
                      <Image
                        src={withCDN(iconSrc)}
                        alt={workshop.title}
                        width={140}
                        height={82}
                        className="object-cover w-full h-[50px] xl:h-[100px]"
                      />
                    </LanguageAwareLink>
                  );
                })}
              </div>
              {/*======icon-bottom======*/}
              <div className="mt-[20px] mdb-5 flex gap-[10px] w-full md:w-[400px] md:ml-[-80px] xl:ml-0 xl:w-full flex-wrap items-center max-[767px]:justify:between">
                {stats.slice(0, 3).map((stat, idx) => (
                  <div key={idx} className={`flex gap-[10px] icon-wrap ${idx === 2 ? "w-[100%]" : "w-[48%]"} items-start justify-center`}>
                    <Image src={withCDN(STAT_ICONS[idx])} alt={stat.number} width={40} height={40} className="w-[40px] h-[40px] object-contain" priority />
                    <div className="relative">
                      <h3 className="text-[17px] md:text-[16px] xl:text-[24px] text-[#58585A] font-bold leading-none mb-1 icon-box-heading">{stat.number}</h3>
                      <p className="text-[9px] xl:text-[10px] font-light uppercase icon-box-text">{stat.label}</p>
                    </div>
                  </div>
                ))}
              </div>

              {/* Button */}
              <LanguageAwareLink
                href={ctaLink}
                className="flex items-center mx-auto  mt-5 justify-center gap-4 font-[Noto_Sans] font-light md:gap-3 bg-[#0097DC] rounded-full py-2 md:py-3 px-6 md:px-8 hover:bg-[#0097DC] transition-all w-fit md:h-11 2xl:h-[60px] whitespace-nowrap"
              >
                <Image src={withCDN("/gear.png")} alt="Gear" width={20} height={20} className="w-5.5 h-5.5 2xl:h-8 2xl:w-8 md:w-6 md:h-6" priority />
                <span className="text-white text-[15px] xl:text-[24px] sm:text-[15px] tracking-wide uppercase font-regular">
                  {ctaText}
                </span>
              </LanguageAwareLink>
            </div>
          </div>
        </div>
      </section>

      <section
        className="relative w-full overflow-hidden  py-10 md:py-16 lg:py-25
    min-h-[700px] md:min-h-[700px] lg:min-h-[760px] xl:min-h-[760px]
    px-4 md:px-8 lg:px-18 xl:px-10 sm:p b-0 pb-[0px] sm:pb-[80px] mt-[-90px] sm:mt-[-120px]"
      >
        {/* Background */}
        <div className="absolute inset-0 -z-10">
          <div
            className="block md:hidden w-full h-full bg-cover bg-[position:32%_50%]"
            style={{ backgroundImage: `url('${withCDN("/home/bg-mobile.png")}')` }}
          />
          <div
            className="hidden md:block w-full h-full bg-cover bg-top"
            style={{ backgroundImage: `url('${withCDN("/home/bg-desktop.png")}')` }}
          />
        </div>
        {/* Pass current-language whyWorkshop section to WorkshopTab */}
        <WorkshopTab whyWorkshopData={workshopContent.whyWorkshop} />
      </section>

      <section id="allWorkshop">
        <AllWorkshop
          allWorkshopData={workshopContent.allProgram}
          generalSettings={headerFooterHomeData.general_settings}
          activities={workshops}
          isLoading={false}
        />
      </section>

      <section className="mb-[-150px] md:mb-[0px] flex flex-col gap-12 mt-[300px] sm:mt-[100px] sm:mt-[310px] lg:mt-[270px] work-form">
        <div className="workshop-footer-form">
            <FooterForm page="workshop" generalSettings={headerFooterHomeData.general_settings} tenant={headerFooterHomeData.tenant}/>
        </div>
        <ProgramsSliderFooter bottomSliders={workshopContent?.bottomSliders} />
        <Footer footerData={headerFooterHomeData} />
      </section>
    </main>
  );
}