'use client';

import {
  createContext,
  useCallback,
  useContext,
  useMemo,
  useState,
  type ReactNode,
} from 'react';
import type { Language, Role } from '@sot/shared/types';
import { DEFAULT_LOCALE } from '@sot/shared/constants';
import { t as translate, type TranslationKey } from '@/lib/i18n/translations';

interface AppContextValue {
  language: Language;
  role: Role;
  setLanguage: (lang: Language) => void;
  setRole: (role: Role) => void;
  t: (key: TranslationKey) => string;
}

const AppContext = createContext<AppContextValue | null>(null);

export function AppProvider({ children }: { children: ReactNode }) {
  const [language, setLanguageState] = useState<Language>(DEFAULT_LOCALE);
  const [role, setRole] = useState<Role>('seller');

  const setLanguage = useCallback((lang: Language) => {
    setLanguageState(lang);
    document.documentElement.lang = lang;
    document.documentElement.dir = lang === 'ar' ? 'rtl' : 'ltr';
  }, []);

  const t = useCallback((key: TranslationKey) => translate(key, language), [language]);

  const value = useMemo(
    () => ({ language, role, setLanguage, setRole, t }),
    [language, role, setLanguage, t]
  );

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

export function useApp() {
  const ctx = useContext(AppContext);
  if (!ctx) throw new Error('useApp must be used within AppProvider');
  return ctx;
}