"use client";

// Stellt Sprache + Wörterbuch + Liste der aktiven Sprachen für Client-
// Komponenten bereit. Wird einmal im Root-Layout mit den serverseitig
// ermittelten Werten instanziiert; Client-Komponenten lesen darüber
// via useDict()/useLocale()/useLanguages().

import { createContext, useContext, useMemo } from "react";
import { formatMessage } from "@/lib/i18n/shared";
import type { Dict, Locale } from "@/lib/i18n/shared";

export interface LanguageInfo {
  code: string;
  label: string;
}

interface LocaleContextValue {
  locale: Locale;
  dict: Dict;
  languages: LanguageInfo[];
}

const LocaleContext = createContext<LocaleContextValue | null>(null);

export function LocaleProvider({
  locale,
  dict,
  languages,
  children,
}: LocaleContextValue & { children: React.ReactNode }) {
  const value = useMemo(
    () => ({ locale, dict, languages }),
    [locale, dict, languages]
  );
  return (
    <LocaleContext.Provider value={value}>{children}</LocaleContext.Provider>
  );
}

function useLocaleContext(): LocaleContextValue {
  const ctx = useContext(LocaleContext);
  if (!ctx) throw new Error("useDict/useLocale muss innerhalb von LocaleProvider verwendet werden.");
  return ctx;
}

export function useDict(): Dict {
  return useLocaleContext().dict;
}

export function useLocale(): Locale {
  return useLocaleContext().locale;
}

/** Alle aktiven Sprachen (Code + Anzeigename), z. B. für den Sprachumschalter. */
export function useLanguages(): LanguageInfo[] {
  return useLocaleContext().languages;
}

/** t("Text mit {var}", { var: "Wert" }) für Platzhalter in Übersetzungen. */
export function useFormatMessage() {
  return formatMessage;
}