import { GoogleLogin, GoogleOAuthProvider } from '@react-oauth/google';
import { Navigate } from 'react-router';
import { useAuth } from '../auth/useAuth';

const GOOGLE_CLIENT_ID =
  '295080817934-1uqaqrkup9jnslajkl1ngpee7gm249fv.apps.googleusercontent.com';

export function LoginPage() {
  const { user, login, loading } = useAuth();

  if (loading) return null;
  if (user && user.status === 'ACTIVE') return <Navigate to="/" replace />;
  if (user && user.status === 'PENDING')
    return <Navigate to="/pending" replace />;

  return (
    <GoogleOAuthProvider clientId={GOOGLE_CLIENT_ID}>
      <div className="min-h-screen bg-gradient-to-br from-slate-900 via-blue-950 to-slate-900 flex items-center justify-center px-4">
        <div className="bg-white rounded-2xl shadow-2xl p-10 max-w-sm w-full text-center">
          <div className="mb-6">
            <div className="w-16 h-16 bg-blue-600 rounded-xl mx-auto mb-4 flex items-center justify-center">
              <span className="text-white text-2xl font-bold">GC</span>
            </div>
            <h1 className="text-2xl font-bold text-gray-900">
              GC SI 개발자 가이드
            </h1>
            <p className="text-gray-500 mt-2 text-sm">
              @gcsc.co.kr 계정으로 로그인하세요
            </p>
          </div>
          <div className="flex justify-center">
            <GoogleLogin
              onSuccess={(res) => {
                if (res.credential) login(res.credential);
              }}
              onError={() => {
                console.error('Google Login failed');
              }}
              theme="outline"
              size="large"
              width="280"
            />
          </div>
          <p className="text-xs text-gray-400 mt-6">
            GC SI 사내 개발환경 전용
          </p>
        </div>
      </div>
    </GoogleOAuthProvider>
  );
}