import { useEffect } from 'react';
import { useNavigate } from 'react-router';
import { Loader2 } from 'lucide-react';
import { useAuth } from '@/hooks/useAuth';
import { LogoIcon } from '@/components/brand/Logo';

/**
 * Setup page - redirects based on auth state
 *
 * With the simplified auth flow, server connection is handled
 * directly in the Login page. This page now just ensures
 * proper routing based on authentication state.
 */
export function Setup() {
  const navigate = useNavigate();
  const { isAuthenticated, isLoading } = useAuth();

  useEffect(() => {
    if (!isLoading) {
      if (isAuthenticated) {
        // Already authenticated, go to dashboard
        void navigate('/', { replace: true });
      } else {
        // Not authenticated, go to login
        void navigate('/login', { replace: true });
      }
    }
  }, [isAuthenticated, isLoading, navigate]);

  // Show loading while checking auth
  return (
    <div className="flex min-h-screen items-center justify-center bg-background">
      <div className="flex flex-col items-center gap-4">
        <LogoIcon className="h-16 w-16 animate-pulse" />
        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
        <p className="text-sm text-muted-foreground">Loading...</p>
      </div>
    </div>
  );
}
