OpenFlare/openflare_server/web/features/auth/components/github-oauth-callback.tsx

'use client';

import { useMutation } from '@tanstack/react-query';
import { useRouter, useSearchParams } from 'next/navigation';
import { useEffect, useRef, useState } from 'react';

import { InlineMessage } from '@/components/feedback/inline-message';
import { LoadingState } from '@/components/feedback/loading-state';
import { useAuth } from '@/components/providers/auth-provider';
import { AppCard } from '@/components/ui/app-card';
import { exchangeGitHubCode } from '@/features/auth/api/auth';

export function GitHubOAuthCallback() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const { setUser } = useAuth();
  const handledCodeRef = useRef<string | null>(null);
  const [prompt, setPrompt] = useState('正在处理 GitHub 授权结果...');
  const [message, setMessage] = useState<{ tone: 'danger' | 'success'; text: string } | null>(null);
  const code = searchParams?.get('code')?.trim() ?? '';

  const mutation = useMutation({
    mutationFn: exchangeGitHubCode,
    onSuccess: (user) => {
      setUser(user);
      setMessage({ tone: 'success', text: '登录成功，正在跳转...' });
      router.replace('/');
    },
    onError: (error: Error) => {
      setPrompt('授权处理失败');
      setMessage({ tone: 'danger', text: error.message || 'GitHub 授权失败，请稍后重试。' });
    },
  });

  useEffect(() => {
    if (!code) {
      setPrompt('缺少授权 code');
      setMessage({ tone: 'danger', text: '未收到 GitHub 授权参数，请返回登录页重试。' });
      return;
    }

    if (handledCodeRef.current === code) {
      return;
    }

    handledCodeRef.current = code;
    mutation.mutate(code);
  }, [code, mutation]);

  return (
    <AppCard title='GitHub OAuth 回调' description={prompt}>
      <div className='space-y-4'>
        {mutation.isPending ? <LoadingState /> : null}
        {message ? <InlineMessage tone={message.tone} message={message.text} /> : null}
      </div>
    </AppCard>
  );
}