"use client";

import { useMemo, useState, useEffect } from "react";
import { useLanguage } from "@/src/lib/context/LanguageContext";
import Enrichment from "./Enrichment";
import InspiringYounMinds from "./Inspiring";
import Teachers from "./MeetOurTeachers";
import ProgramsLazyWrapper from "./ProgramsLazyWrapper";
import AllPrograms from "./AllPrograms";
import FooterForm from "../layout/FormLazyWrapper";
import Footer from "../layout/Footer";
import type { ProgramsSectionData } from "@/src/lib/types/home";
import type { ProgramsPageContent } from "../../lib/services/programsPageService";
import type { ProcessedHeaderFooterHomeData } from "@/src/lib/types/header";
import ProgramsSliderFooter from "../layout/ProgramsSlider-Footer";
import { mergeContentWithTranslation } from "../../lib/utils/languageHelper";
import { getProgramsAction } from "@/src/lib/actions/programsAction";
import { ProcessedProgram } from "@/src/lib/types/programs";
import { usePrograms } from "@/src/lib/context/ProgramsContext";

interface ProgramsPageClientProps {
  headerFooterHomeData: ProcessedHeaderFooterHomeData;
  programsPageData: { default: ProgramsPageContent | null; translated?: ProgramsPageContent | null };
}

export default function ProgramsPageClient({
  headerFooterHomeData,
  programsPageData,
}: ProgramsPageClientProps) {
  const { currentLanguage, isInitialized } = useLanguage();
  const globalPrograms = usePrograms().programs;
  
  const [programs, setPrograms] = useState<ProcessedProgram[]>([]);
  const [isProgramsLoading, setIsProgramsLoading] = useState(true);

  // Centralized program fetching - fetch once per language change
  useEffect(() => {
    // Wait for language context to be ready (synced with URL)
    if (!isInitialized) return;

    if (globalPrograms.length > 0) {
      setPrograms(globalPrograms);
      setIsProgramsLoading(false);
      return;
    }

    const fetchAllPrograms = async () => {
      try {
        setIsProgramsLoading(true);
        const params = new URLSearchParams(window.location.search);
        const franchiseeId = params.get("franchiseeId");
        
        // Resolve the effective language code for the API
        const effectiveLanguage = currentLanguage === "translated" && headerFooterHomeData.general_settings?.language_code
          ? headerFooterHomeData.general_settings.language_code
          : (currentLanguage === "default" ? "default" : currentLanguage);

        const result = await getProgramsAction(franchiseeId, effectiveLanguage);
        
        if (result.success && Array.isArray(result.data)) {
          setPrograms(result.data);
        }
      } catch (error) {
        console.error("[ProgramsPageClient] Error in centralized programs fetch:", error);
      } finally {
        setIsProgramsLoading(false);
      }
    };

    fetchAllPrograms();
  }, [currentLanguage, isInitialized, headerFooterHomeData.general_settings?.language_code, globalPrograms]);

  // Select content based on current language
  const programsContent = useMemo(() => {
    const def = programsPageData.default || {} as any;
    const trans = programsPageData.translated;
    
    // If we're on default language, just return default
    if (currentLanguage === "default" || !trans) {
      return def;
    }

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

  // Extract banner data
  const bannerData = useMemo(() => programsContent.banner || {}, [programsContent.banner]);

  // Extract program section data
  const programSectionData: ProgramsSectionData = useMemo(
    () => ({
      heading: programsContent.program?.heading || "Programs around you",
      ageRangeText: programsContent.program?.ageRangeText || "Choose your child age",
      ctaButtonText: programsContent.program?.ctaButtonText || "View All programs",
    }),
    [programsContent.program?.heading, programsContent.program?.ageRangeText, programsContent.program?.ctaButtonText]
  );

  return (
    <>
      <main className="overflow-x-hidden">
        <Enrichment 
          bannerData={bannerData} 
          generalSettings={headerFooterHomeData.general_settings}
          programs={programs}
          isLoading={isProgramsLoading}
        />
        <InspiringYounMinds inspiringMindData={programsContent.inspiringMind} />
        <Teachers teacherData={programsContent.teacher} />
        <div className="programe-all-block">
        <ProgramsLazyWrapper 
          sectionData={programSectionData} 
          generalSettings={headerFooterHomeData.general_settings}
          programs={programs}
          isLoading={isProgramsLoading}
        />
        </div>
        <AllPrograms 
          allProgramData={programsContent.allProgram} 
          generalSettings={headerFooterHomeData.general_settings}
          programs={programs}
          isLoading={isProgramsLoading}
        />
        <div className="scroll-mt-80" id="program-from">
          <FooterForm 
            page="programs" 
            generalSettings={headerFooterHomeData.general_settings} 
            tenant={headerFooterHomeData.tenant} 
          />
        </div>
        <ProgramsSliderFooter bottomSliders={programsContent?.bottomSliders} />
        <Footer footerData={headerFooterHomeData} />
      </main>
    </>
  );
}