import { useState } from 'react';
import { LoginForm } from '../auth/LoginForm';
import { RegisterForm } from '../auth/RegisterForm';
import { useAuth } from '../../contexts/AuthContext';
import { Navigate } from '@tanstack/react-router';

export function AuthPage() {
  const { isAuthenticated } = useAuth();
  const [isLogin, setIsLogin] = useState(true);

  if (isAuthenticated) {
    return <Navigate to="/" />;
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-background p-4">
      <div className="w-full max-w-lg">
        <div className="text-center mb-8">
          <h1 className="text-3xl font-bold mb-2">
            Welcome to <span className="text-primary">Placebo.mk</span>
          </h1>
          <p className="text-muted-foreground">
            {isLogin 
              ? 'Login to comment, react, and access admin features' 
              : 'Join our community of sarcastic news enthusiasts'}
          </p>
        </div>

        {isLogin ? (
          <LoginForm 
            onSuccess={() => window.location.href = '/'}
            onSwitchToRegister={() => setIsLogin(false)}
          />
        ) : (
          <RegisterForm 
            onSuccess={() => window.location.href = '/'}
            onSwitchToLogin={() => setIsLogin(true)}
          />
        )}

        <div className="mt-8 text-center text-sm text-muted-foreground">
          <p>
            By {isLogin ? 'logging in' : 'registering'}, you agree to our{' '}
            <a href="#" className="text-primary hover:underline">Terms of Service</a>{' '}
            and{' '}
            <a href="#" className="text-primary hover:underline">Privacy Policy</a>.
          </p>
          <p className="mt-2">
            Need help?{' '}
            <a href="mailto:support@placebo.mk" className="text-primary hover:underline">
              Contact support
            </a>
          </p>
        </div>
      </div>
    </div>
  );
}