'use client';

/**
 * EN: i18n Context for managing locale state
 * VI: Context i18n để quản lý trạng thái locale
 */

import * as React from 'react';
import { type Locale, defaultLocale, isValidLocale } from '@/i18n/config';

/**
 * EN: i18n Context interface
 * VI: Interface cho i18n Context
 */
interface I18nContextType {
  /**
   * EN: Current locale / VI: Locale hiện tại
   */
  locale: Locale;
  /**
   * EN: Set locale function / VI: Hàm đặt locale
   */
  setLocale: (locale: Locale) => void;
  /**
   * EN: Get locale function / VI: Hàm lấy locale
   */
  getLocale: () => Locale;
}

/**
 * EN: i18n Context
 * VI: Context i18n
 */
const I18nContext = React.createContext<I18nContextType | undefined>(undefined);

/**
 * EN: Get locale from localStorage or browser
 * VI: Lấy locale từ localStorage hoặc browser
 */
function getStoredLocale(): Locale {
  if (typeof window === 'undefined') {
    return defaultLocale;
  }

  // EN: Try to get from localStorage preferences / VI: Thử lấy từ localStorage preferences
  try {
    const stored = localStorage.getItem('preferences');
    if (stored) {
      const parsed = JSON.parse(stored);
      if (parsed.language && isValidLocale(parsed.language)) {
        return parsed.language;
      }
    }
  } catch {
    // EN: Invalid stored data, continue to browser detection / VI: Dữ liệu lưu không hợp lệ, tiếp tục detect browser
  }

  // EN: Detect from browser language / VI: Phát hiện từ ngôn ngữ browser
  if (typeof navigator !== 'undefined') {
    const browserLang = navigator.language || navigator.languages?.[0] || '';
    const langCode = browserLang.split('-')[0].toLowerCase();
    if (isValidLocale(langCode)) {
      return langCode;
    }
  }

  return defaultLocale;
}

/**
 * EN: I18n Provider component
 * VI: Component I18n Provider
 */
export function I18nProvider({ children }: { children: React.ReactNode }) {
  const [locale, setLocaleState] = React.useState<Locale>(() => getStoredLocale());

  /**
   * EN: Set locale and persist to localStorage
   * VI: Đặt locale và lưu vào localStorage
   */
  const setLocale = React.useCallback((newLocale: Locale) => {
    if (!isValidLocale(newLocale)) {
      console.warn(`Invalid locale: ${newLocale}`);
      return;
    }

    setLocaleState(newLocale);

    // EN: Update localStorage preferences / VI: Cập nhật localStorage preferences
    if (typeof window !== 'undefined') {
      try {
        const stored = localStorage.getItem('preferences');
        const preferences = stored ? JSON.parse(stored) : {};
        preferences.language = newLocale;
        localStorage.setItem('preferences', JSON.stringify(preferences));
      } catch (error) {
        console.error('Failed to save locale preference:', error);
      }

      // EN: Update HTML lang attribute / VI: Cập nhật thuộc tính lang của HTML
      document.documentElement.lang = newLocale;
    }
  }, []);

  /**
   * EN: Get current locale
   * VI: Lấy locale hiện tại
   */
  const getLocale = React.useCallback(() => {
    return locale;
  }, [locale]);

  // EN: Initialize HTML lang attribute on mount / VI: Khởi tạo thuộc tính lang của HTML khi mount
  React.useEffect(() => {
    if (typeof document !== 'undefined') {
      document.documentElement.lang = locale;
    }
  }, [locale]);

  const value = React.useMemo(
    () => ({
      locale,
      setLocale,
      getLocale,
    }),
    [locale, setLocale, getLocale]
  );

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

/**
 * EN: Hook to use i18n context
 * VI: Hook để sử dụng i18n context
 */
export function useI18n() {
  const context = React.useContext(I18nContext);
  if (context === undefined) {
    throw new Error('useI18n must be used within I18nProvider');
  }
  return context;
}
