'use client';

import { createContext, useContext, useEffect, useMemo, useState } from 'react';
import { Locale, MessageKey, resolveLocale, t as translate } from '../../lib/i18n';

type I18nContextValue = {
  locale: Locale;
  setLocale: (locale: Locale) => void;
  t: (key: MessageKey, vars?: Record<string, string | number>) => string;
};

const I18nContext = createContext<I18nContextValue | null>(null);

export function I18nProvider({ children }: { children: React.ReactNode }) {
  const [locale, setLocale] = useState<Locale>(() => {
    if (typeof window === 'undefined') return 'en';
    const stored = localStorage.getItem('locale');
    if (stored === 'fi' || stored === 'en') return stored;
    return resolveLocale({ cookieLocale: null, acceptLanguage: navigator.language ?? navigator.languages?.[0] ?? null });
  });

  useEffect(() => {
    localStorage.setItem('locale', locale);
    document.cookie = `locale=${locale}; path=/; max-age=${60 * 60 * 24 * 365};`;
  }, [locale]);

  const value: I18nContextValue = useMemo(
    () => ({
      locale,
      setLocale,
      t: (key: MessageKey, vars?: Record<string, string | number>) => translate(locale, key, vars) as string,
    }),
    [locale],
  );

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

export function useI18n() {
  const ctx = useContext(I18nContext);
  if (!ctx) {
    throw new Error('useI18n must be used inside I18nProvider');
  }
  return ctx;
}