"use client";

import { useMemo, useEffect, useRef } from "react";
import { useLanguage } from "@/src/lib/context/LanguageContext";

interface WorkshopDetailClientProps {
  defaultContent: React.ReactNode;
  translatedContent: React.ReactNode | null;
}

/**
 * Client component that handles language switching for workshop detail pages
 * Wraps the detail page content and provides language-aware rendering
 * Only reloads when user explicitly toggles language from navbar, NOT on initial hydration or cookie loading
 */
export default function WorkshopDetailClient({
  defaultContent,
  translatedContent,
}: WorkshopDetailClientProps) {
  const { currentLanguage, hasToggled } = useLanguage();
  const reloadTimeoutRef = useRef<NodeJS.Timeout | null>(null);
  const RELOAD_DEBOUNCE_MS = 500;

  // Switch content based on selected language
  const displayContent = useMemo(() => {
    return currentLanguage === "translated" && translatedContent
      ? translatedContent
      : defaultContent;
  }, [currentLanguage, defaultContent, translatedContent]);

  // Only reload on explicit USER-initiated language changes
  useEffect(() => {
    // Only reload if the user manually clicked the toggle switch
    if (!hasToggled) {
      return;
    }

    console.log(
      `[WorkshopDetailClient] USER changed language to: ${currentLanguage}, scheduling reload...`
    );

    // Cancel any pending reload
    if (reloadTimeoutRef.current) {
      clearTimeout(reloadTimeoutRef.current);
    }

    // Debounce the reload
    reloadTimeoutRef.current = setTimeout(() => {
      console.log(
        `[WorkshopDetailClient] Initiating page reload for language: ${currentLanguage}`
      );
      window.location.reload();
    }, RELOAD_DEBOUNCE_MS);
  }, [currentLanguage, hasToggled]);

  return <>{displayContent}</>;
}