"use client";

import { useState, useEffect, useRef } from "react";
import dynamic from "next/dynamic";
import { fetchWorkshopActivities } from "@/src/lib/actions/workshopAction";
import { useLanguage } from "@/src/lib/context/LanguageContext";
import type { GeneralSettings } from "@/src/lib/types/header";
import type { Activity } from "@/src/lib/services/workshopService";
import ActivitySkeleton from "../ui/skeletons/ActivitySkeleton";

const ClientAdditionalActivities = dynamic(
  () => import("../home/AdditionalActivities/Client"),
  {
    ssr: false,
    loading: () => <ActivitySkeleton />,
  }
);

interface AdditionalActivitiesProps {
  additionalActivities?: {
    mainHeading?: string;
  };
  generalSettings?: GeneralSettings;
}

export default function ActivitiesLazyWrapper({
  additionalActivities,
  generalSettings,
}: AdditionalActivitiesProps) {
  const ref = useRef<HTMLDivElement>(null);
  const [activitiesData, setActivitiesData] = useState<Activity[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [hasLoaded, setHasLoaded] = useState(false);
  const { currentLanguage, isInitialized } = useLanguage();
  const prevLanguageRef = useRef<string>(currentLanguage);

  // Handle language changes - refetch activities with new language
  useEffect(() => {
    if (!isInitialized) return;

    if (prevLanguageRef.current !== currentLanguage && hasLoaded) {
      prevLanguageRef.current = currentLanguage;
      setIsLoading(true);

      const params = new URLSearchParams(window.location.search);
      const franchiseeId = params.get("franchiseeId");

      // Get language code for API call
      const languageCode = currentLanguage === "default" ? null : currentLanguage;

      fetchWorkshopActivities(languageCode)
        .then((response) => {
          if (response.success && Array.isArray(response.data)) {
            console.log(`[ActivitiesLazyWrapper] Refetched activities with language: ${languageCode || "default"}`);
            setActivitiesData(response.data);
          }
        })
        .catch((error) => {
          console.error(
            "[ActivitiesLazyWrapper] Error refetching activities on language change:",
            error
          );
        })
        .finally(() => {
          setIsLoading(false);
        });
    }
  }, [currentLanguage, hasLoaded, isInitialized]);

  // Initial load
  useEffect(() => {
    if (!isInitialized || hasLoaded || isLoading) return;

    const currentRef = ref.current;
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting && !hasLoaded) {
          setIsLoading(true);

          const params = new URLSearchParams(window.location.search);
          const franchiseeId = params.get("franchiseeId");

          const languageCode = currentLanguage === "default" ? null : currentLanguage;

          fetchWorkshopActivities(languageCode)
            .then((response) => {
              if (response.success && Array.isArray(response.data)) {
                console.log(`[ActivitiesLazyWrapper] Initial load with language: ${languageCode || "default"}`);
                setActivitiesData(response.data);
                setHasLoaded(true);
                prevLanguageRef.current = currentLanguage;
              }
            })
            .catch((error) => {
              console.error(
                "[ActivitiesLazyWrapper] Failed to load activities:",
                error
              );
            })
            .finally(() => {
              setIsLoading(false);
            });

          if (ref.current) {
            observer.unobserve(ref.current);
          }
        }
      },
      { rootMargin: "200px" }
    );

    if (ref.current) {
      observer.observe(ref.current);
    }

    return () => {
      if (currentRef) {
        observer.unobserve(currentRef);
      }
      observer.disconnect();
    };
  }, [hasLoaded, isLoading, currentLanguage, isInitialized, additionalActivities]);

  return (
    <div ref={ref} style={{ minHeight: "200px" }}>
      {(activitiesData.length > 0 && !isLoading) || hasLoaded ? (
        <ClientAdditionalActivities data={activitiesData} mainHeading={additionalActivities?.mainHeading} />
      ) : (
        <ActivitySkeleton />
      )}
    </div>
  );
}