
'use client';

import { createContext, useContext, useEffect, useState, ReactNode, useCallback } from 'react';
import { de, Dictionary } from './de';
import { en } from './en';

export type Locale = 'de' | 'en';

const DICTIONARIES: Record<Locale, Dictionary> = { de, en };
const STORAGE_KEY = 'yumder_lang';

const FALLBACK_LOCALE: Locale = 'en';

function detectInitialLocale(): Locale {
  if (typeof window === 'undefined') return FALLBACK_LOCALE;
  const stored = window.localStorage.getItem(STORAGE_KEY);
  if (stored === 'de' || stored === 'en') return stored;
  const browserLang = window.navigator.language || '';
  return browserLang.toLowerCase().startsWith('de') ? 'de' : FALLBACK_LOCALE;
}

interface LanguageContextValue {
  locale: Locale;
  setLocale: (locale: Locale) => void;
  t: Dictionary;
}

const LanguageContext = createContext<LanguageContextValue | null>(null);

export function LanguageProvider({ children }: { children: ReactNode }) {
  const [locale, setLocaleState] = useState<Locale>(FALLBACK_LOCALE);

  useEffect(() => {
    setLocaleState(detectInitialLocale());
  }, []);

  // BUGFIX (Selbst-Review): app/layout.tsx rendert serverseitig und kennt die
  // gespeicherte Sprache zu dem Zeitpunkt noch nicht, daher steht dort
  // <html lang="de"> fest verdrahtet. Das war korrekt fuer Screenreader/SEO,
  // solange nur Deutsch existierte - seit der EN-Sprachwahl aber falsch,
  // sobald jemand auf Englisch umschaltet. Dieser Effekt korrigiert das
  // Attribut zur Laufzeit bei jedem Sprachwechsel (inkl. beim initialen
  // Erkennen der Geraetesprache/LocalStorage in obigem Effekt).
  useEffect(() => {
    document.documentElement.lang = locale;
  }, [locale]);

  const setLocale = useCallback((next: Locale) => {
    setLocaleState(next);
    window.localStorage.setItem(STORAGE_KEY, next);
  }, []);

  const value: LanguageContextValue = {
    locale,
    setLocale,
    t: DICTIONARIES[locale],
  };

  return <LanguageContext.Provider value={value}>{children}</LanguageContext.Provider>;
}

export function useTranslation() {
  const ctx = useContext(LanguageContext);
  if (!ctx) {
    throw new Error('useTranslation muss innerhalb von <LanguageProvider> verwendet werden');
  }
  return ctx;
}