'use client';

import { createContext, useContext, ReactNode, useMemo } from 'react';

type MessageValue = string | Record<string, string>;
type Messages = Record<string, MessageValue>;

interface TranslationContextType {
  locale: string;
  messages: Messages;
}

const TranslationContext = createContext<TranslationContextType | undefined>(
  undefined,
);

interface TranslationProviderProps {
  children: ReactNode;
  locale: string;
  messages: Messages;
}

export function TranslationProvider({
  children,
  locale,
  messages,
}: Readonly<TranslationProviderProps>) {
  const value = useMemo(() => ({ locale, messages }), [locale, messages]);

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

export function useTranslations(namespace?: string) {
  const context = useContext(TranslationContext);

  if (!context) {
    throw new Error('useTranslations must be used within TranslationProvider');
  }

  return (key: string): string => {
    const { messages } = context;

    if (!namespace) {
      const value = messages[key];
      return typeof value === 'string' ? value : key;
    }

    const ns = messages[namespace];

    if (!ns || typeof ns !== 'object') {
      return key;
    }

    return ns[key] ?? key;
  };
}

export function useLocale(): string {
  const context = useContext(TranslationContext);

  if (!context) {
    throw new Error('useLocale must be used within TranslationProvider');
  }

  return context.locale;
}