frontend/src/hooks/useLanguage.ts

import { useMutation, useQueryClient } from '@tanstack/react-query';
import { graphqlRequest } from '@/gql/graphql';
import { UPDATE_ME_MUTATION } from '@/gql/users';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';
import { useAuthStore } from '@/stores/authStore';

export function useLanguage() {
  const { i18n, t } = useTranslation();
  const auth = useAuthStore((state) => state.auth);
  const queryClient = useQueryClient();

  // Mutation for updating user language preference
  const updateLanguageMutation = useMutation({
    mutationFn: async (language: string) => {
      if (!auth.user) {
        throw new Error('User not authenticated');
      }

      const response = (await graphqlRequest(UPDATE_ME_MUTATION, {
        input: {
          preferLanguage: language,
        },
      })) as { updateMe: any };
      return response.updateMe;
    },
    onSuccess: (updatedUser, language) => {
      // Update the auth store with new language preference
      if (auth.user) {
        auth.setUser({
          ...auth.user,
          preferLanguage: updatedUser.preferLanguage,
        });
      }

      // Invalidate and refetch user data
      queryClient.invalidateQueries({ queryKey: ['me'] });

      const languageName = updatedUser.preferLanguage === 'en' ? 'English' : '中文';
      toast.success(t('language.changeSuccess', { language: languageName }));
    },
    onError: (error: any) => {
      toast.error(t('language.changeError', { error: error.message }));
      // Revert i18n language on error
      if (auth.user?.preferLanguage) {
        i18n.changeLanguage(auth.user.preferLanguage);
      }
    },
  });

  const changeLanguage = async (language: string) => {
    try {
      // Immediately change the UI language for better UX
      await i18n.changeLanguage(language);

      // Update user preference in the backend if user is authenticated
      if (auth.user && auth.accessToken) {
        updateLanguageMutation.mutate(language);
      }
    } catch (error) {
      toast.error(t('language.changeError', { error: String(error) }));
    }
  };

  const initializeLanguage = (userLanguage?: string) => {
    if (userLanguage && userLanguage !== i18n.language) {
      i18n.changeLanguage(userLanguage);
    }
  };

  return {
    currentLanguage: i18n.language,
    changeLanguage,
    initializeLanguage,
    isUpdating: updateLanguageMutation.isPending,
  };
}