"use client";

import { createContext, useContext, useEffect, useMemo, useState } from "react";

type TranslationAlternates = Record<string, string>;

const TranslationAlternatesContext = createContext<{
  alternates: TranslationAlternates;
  setAlternates: (alternates: TranslationAlternates) => void;
}>({
  alternates: {},
  setAlternates: () => {
    // no-op default — overridden by TranslationAlternatesProvider value
  },
});

/**
 * Root provider - placed in the layout so the Header/LanguageSwitcher
 * can access alternates set by any page.
 */
export function TranslationAlternatesProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  const [alternates, setAlternates] = useState<TranslationAlternates>({});
  const value = useMemo(() => ({ alternates, setAlternates }), [alternates]);

  return (
    <TranslationAlternatesContext.Provider value={value}>
      {children}
    </TranslationAlternatesContext.Provider>
  );
}

/**
 * Page-level component that sets alternates in the shared context.
 * Used in blog post pages and any page with locale-specific slugs.
 */
export function SetTranslationAlternates({
  alternates,
}: {
  alternates: TranslationAlternates;
}) {
  const { setAlternates } = useContext(TranslationAlternatesContext);

  useEffect(() => {
    setAlternates(alternates);
    return () => setAlternates({});
  }, [alternates, setAlternates]);

  return null;
}

export function useTranslationAlternates() {
  return useContext(TranslationAlternatesContext).alternates;
}