"use client";

import Hero from "./Hero";
import WhyYoungEngineersLazyWrapper from "./WhyYoungEngineers/WhyYoungEngineersLazyWrapper";
import ProgramsLazyWrapper from "../programs/ProgramsLazyWrapper";
import JoinFreeClass from "./Join-Free-Classes";
import DiscoverSlider from "./Discover-Slider";
import AdditionalActivities from "./AdditionalActivities";
import TestimonialsLazyWrapper from "./TestimonialsLazyWrapper";
import FooterForm from "../layout/FormLazyWrapper";
import Footer from "../layout/Footer";
import { useMemo } from "react";
import VideoSlider from "./videoSlider";

import staticData from "@/src/data/home.json";
import { useLanguage } from "@/src/lib/context/LanguageContext";
import { mergeContentWithTranslation } from "@/src/lib/utils/languageHelper";
import type {
  JoinFreeClassData,
  ProgramsSectionData,
  SliderItem,
} from "@/src/lib/types/home";
import type { HomepageDataWithTranslations } from "../../lib/services/homepageService";
import type { ProcessedHeaderFooterHomeData } from "@/src/lib/types/header";
import ProgramsSliderFooter from "../layout/ProgramsSlider-Footer";


interface HomePageClientProps {
  headerFooterHomeData: ProcessedHeaderFooterHomeData;
  homePageData: HomepageDataWithTranslations | { default: null; translated?: null };
}

export default function HomePageClient({
  headerFooterHomeData,
  homePageData,
}: HomePageClientProps) {
  const { currentLanguage } = useLanguage();

  // Helper to merge default and translated content
  const homeContent = useMemo(() => {
    const def = homePageData.default || {};
    const trans = homePageData.translated;
    
    // If we're on default language, just return default
    if (currentLanguage === "default" || !trans) {
      return def;
    }

    return mergeContentWithTranslation(def, trans);
  }, [homePageData, currentLanguage]);

  // Select banner based on current language
  // Priority: homeContent (franchise-specific) > headerFooterHomeData (global)
  const bannerData = homeContent?.banner || headerFooterHomeData.banner;

  /* ---------- PROGRAMS SECTION TEXT ---------- */
  const programSection: ProgramsSectionData = useMemo(() => ({
    heading: homeContent?.program?.heading || "Programs around you",
    ageRangeText:
      homeContent?.program?.ageRangeText || "Choose your child's age",
    ctaButtonText:
      homeContent?.program?.ctaButtonText || "See all programs",
  }), [homeContent?.program?.heading, homeContent?.program?.ageRangeText, homeContent?.program?.ctaButtonText]);

  /* ---------- JOIN FREE CLASS SECTION ---------- */
  const staticJoin = staticData.joinFreeClass;
  const apiJoin = homeContent?.joinFirstFreeClass;

  const joinFreeClassData: JoinFreeClassData = useMemo(() => {
    // photos: API sliderImages[] if present, else static JSON photos[]
    const apiSliderImages: string[] = apiJoin?.sliderImages
      ? JSON.parse(apiJoin.sliderImages)
      : [];

    const photos =
      apiSliderImages.length > 0
        ? apiSliderImages.map((src, index) => ({
          id: index + 1,
          src,
          alt: `Join free class photo ${index + 1}`,
        }))
        : staticJoin.photos;

    return {
      title: apiJoin?.mainTitle || apiJoin?.title || staticJoin.title,
      subtitle: apiJoin?.subTitle || apiJoin?.subtitle || staticJoin.subtitle,
      ctaText: apiJoin?.buttonText || apiJoin?.ctaText || staticJoin.ctaText,
      description:
        apiJoin?.description,
      background: apiJoin?.background || staticJoin.background,
      photos,
    };
  }, [apiJoin, staticJoin]);

  /* ---------- DISCOVER SECTION ---------- */
  const discoverSection = homeContent?.discoverSection;
  const staticDiscover = staticData.discover;

  const discoverSliderData: SliderItem[] = useMemo(() => {
    const apiSliders =
      discoverSection?.sliders && discoverSection.sliders.length
        ? JSON.parse(discoverSection.sliders)
        : [];

    // text from API, images from API or fallback to static JSON
    return apiSliders.map(
      (slide: {
        title: string;
        description: string;
        mainImage?: string;
        thumbnails?: string[] | string;
      }, index: number) => {
        const fallback = staticDiscover[index] || staticDiscover[0];

        // Parse thumbnails if it's a string
        let thumbnails: string[] = fallback.thumbnails;
        if (slide.thumbnails) {
          if (typeof slide.thumbnails === 'string') {
            try {
              thumbnails = JSON.parse(slide.thumbnails);
            } catch {
              thumbnails = [slide.thumbnails];
            }
          } else if (Array.isArray(slide.thumbnails)) {
            thumbnails = slide.thumbnails;
          }
        }

        return {
          id: index + 1,
          tabTitle: slide.title,
          contentTitle: slide.title,
          description: slide.description,
          mainImage: slide.mainImage || fallback.mainImage,
          thumbnails: thumbnails,
        };
      },
    );
  }, [discoverSection?.sliders, staticDiscover]);

  const discoverMainHeading = useMemo(
    () => discoverSection?.mainHeading || "How your child will discover the world with YE",
    [discoverSection?.mainHeading]
  );

  const discoverCtaText = useMemo(
    () => discoverSection?.ctaButtonText || "DISCOVER PROGRAMS",
    [discoverSection?.ctaButtonText]
  );

  /* ---------- SLIDER TEXTS ---------- */
  const apiSliderTexts = homeContent?.sliderTexts?.sliderTexts;
  const sliderTexts: string[] | undefined = useMemo(() => {
    if (!apiSliderTexts) return undefined;
    try {
      const parsed = JSON.parse(apiSliderTexts);
      if (Array.isArray(parsed) && parsed.length > 0) {
        return parsed.map((item: { text: string }) => item.text);
      }
      return undefined;
    } catch (e) {
      console.error("Error parsing sliderTexts", e);
      return undefined;
    }
  }, [apiSliderTexts]);

  /* ---------- TESTIMONIALS SECTION ---------- */
  const testimonialsSection = useMemo(() => {
    const trans = homePageData.translated;
    const translatedSection = Array.isArray(trans) ? undefined : trans?.testimonialsSection;
    
    return {
      default: homePageData.default?.testimonialsSection,
      translated: translatedSection || undefined,
    };
  }, [homePageData.default?.testimonialsSection, homePageData.translated]);

  /* ---------- ADDITIONAL ACTIVITIES SECTION ---------- */
  const additionalActivitiesSection = homeContent?.additionalActivities;

  /* ---------- VIDEO SLIDER SECTION ---------- */
  const videoSliderData = useMemo(() => {
    const apiVideoSlider = homeContent?.videoSlider;
    let parsedVideos: import("./videoSlider").VideoItem[] = [];

    if (apiVideoSlider?.videos) {
      try {
        const rawVideos = typeof apiVideoSlider.videos === 'string'
          ? JSON.parse(apiVideoSlider.videos)
          : apiVideoSlider.videos;

        if (Array.isArray(rawVideos) && rawVideos.length > 0) {
          parsedVideos = rawVideos.map((item: any, index: number) => ({
            id: index + 1,
            video: item.video_url,
            thumbnail: item.thumbnail,
            title: item.title,
          }));
        }
      } catch (e) {
        console.error("Failed to parse video slider data", e);
      }
    }
    return parsedVideos.length > 0 ? parsedVideos : undefined;
  }, [homeContent?.videoSlider]);

  return (
    <div className="overflow-x-hidden w-full">
      <Hero bannerData={bannerData} />
      <WhyYoungEngineersLazyWrapper initialData={homeContent} />
      <ProgramsLazyWrapper sectionData={programSection} generalSettings={headerFooterHomeData.general_settings} />
      <JoinFreeClass data={joinFreeClassData} />
      <DiscoverSlider
        data={discoverSliderData}
        mainHeading={discoverMainHeading}
        ctaText={discoverCtaText}
        sliderTexts={sliderTexts}
      />      
      <VideoSlider dynamicVideos={videoSliderData} />
      <AdditionalActivities additionalActivities={additionalActivitiesSection} generalSettings={headerFooterHomeData.general_settings} />
      <TestimonialsLazyWrapper testimonialsSection={testimonialsSection} generalSettings={headerFooterHomeData.general_settings} />
      <div className="scroll-mt-0" id="home-from"><FooterForm generalSettings={headerFooterHomeData.general_settings} tenant={headerFooterHomeData.tenant} /></div>
      <ProgramsSliderFooter bottomSliders={homeContent?.bottomSliders} />

      <Footer footerData={headerFooterHomeData} />
    </div>
  );
}