import React, { createContext, useContext, useState } from "react";
import { translations, TranslationKey, UiLanguage } from "./translations";

type TranslationParams = Record<string, string | number>;

type Ctx = {
  language: UiLanguage;
  setLanguage: (l: UiLanguage) => void;
  t: (key: TranslationKey, params?: TranslationParams) => string;
};

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

function interpolate(template: string, params?: TranslationParams) {
  if (!params) return template;
  return template.replace(/\{(\w+)\}/g, (_, key) => String(params[key] ?? `{${key}}`));
}

export function I18nProvider({ children }: { children: React.ReactNode }) {
  const [language, setLanguageState] = useState<UiLanguage>(() => {
    const raw = window.localStorage.getItem("uiLanguage");
    return raw === "no" ? "no" : "en";
  });

  const setLanguage = (l: UiLanguage) => {
    setLanguageState(l);
    window.localStorage.setItem("uiLanguage", l);
  };

  const t = (key: TranslationKey, params?: TranslationParams) => interpolate(translations[language][key] ?? translations.en[key], params);

  return <I18nContext.Provider value={{ language, setLanguage, t }}>{children}</I18nContext.Provider>;
}

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