"use client";

import { createContext, useContext, useState, useEffect, ReactNode, Suspense } from "react";
import { useSearchParams } from "next/navigation";

type LanguageContextType = {
  currentLanguage: string; // Changed from "default" | "translated" to string
  toggleLanguage: (lang?: string) => void;
  isInitialized: boolean;
  hasToggled: boolean;
};

const LanguageContext = createContext<LanguageContextType | undefined>(undefined);

/**
 * Reads `?lang=` from the URL and pushes it to the provider state.
 * Isolated in its own component so the `useSearchParams()` call is contained
 * inside a <Suspense> boundary, preventing the entire tree from de-opting to
 * client-side rendering (which previously caused a visible double-load flicker).
 */
function SearchParamsLanguageSync({
  currentLanguage,
  setCurrentLanguage,
  setIsInitialized,
}: {
  currentLanguage: string;
  setCurrentLanguage: (lang: string) => void;
  setIsInitialized: (v: boolean) => void;
}) {
  const searchParams = useSearchParams();

  useEffect(() => {
    const langParam = searchParams.get("lang") || searchParams.get("language");
    const initialLang = langParam || "default";

    if (initialLang !== currentLanguage) {
      setCurrentLanguage(initialLang);
    }

    setIsInitialized(true);
  }, [searchParams, currentLanguage, setCurrentLanguage, setIsInitialized]);

  return null;
}

export function LanguageProvider({ children }: { children: ReactNode }) {
  const [currentLanguage, setCurrentLanguage] = useState<string>("default");
  const [isClient, setIsClient] = useState(false);
  const [isInitialized, setIsInitialized] = useState(false);
  const [hasToggled, setHasToggled] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  // Add class to body (separate effect to avoid conflicts)
  useEffect(() => {
    if (!isClient) return; // Only run on client

    const body = document.body;
    // Remove the previous classes
    body.classList.remove("lang-default", "lang-translated");

    // If the language is anything other than "default", apply the translated class
    body.classList.add(
      currentLanguage !== "default"
        ? "lang-translated"
        : "lang-default"
    );
  }, [currentLanguage, isClient]);

  const toggleLanguage = (lang?: string) => {
    setHasToggled(true);
    setCurrentLanguage((prev) => {
      const newLanguage = lang || (prev === "default" ? "translated" : "default");
      console.log("[LanguageContext] toggleLanguage called, new state:", newLanguage);
      return newLanguage;
    });
  };

  return (
    <LanguageContext.Provider value={{ currentLanguage, toggleLanguage, isInitialized, hasToggled }}>
      <Suspense fallback={null}>
        <SearchParamsLanguageSync
          currentLanguage={currentLanguage}
          setCurrentLanguage={setCurrentLanguage}
          setIsInitialized={setIsInitialized}
        />
      </Suspense>
      {children}
    </LanguageContext.Provider>
  );
}

export function useLanguage() {
  const context = useContext(LanguageContext);
  if (context === undefined) {
    throw new Error("useLanguage must be used within a LanguageProvider");
  }
  return context;
}