import React, { useState, useCallback } from 'react';
import LoginForm from '../components/auth/LoginForm';
import SignupForm from '../components/auth/SignupForm';
import OtpForm from '../components/auth/OtpForm';
import ForgotPasswordForm from '../components/auth/ForgotPasswordForm';
import ResetPasswordForm from '../components/auth/ResetPasswordForm';

const AuthPage = () => {
  const [view, setView] = useState('login'); // 'login', 'signup', 'otp', 'forgotPassword', 'resetPassword'

  const showSignup = useCallback(() => setView('signup'), []);
  const showLogin = useCallback(() => setView('login'), []);
  const showOtp = useCallback(() => setView('otp'), []);
  const showForgotPassword = useCallback(() => setView('forgotPassword'), []);
  const showResetPassword = useCallback(() => setView('resetPassword'), []);

  const renderForm = () => {
    switch (view) {
      case 'signup':
        return <SignupForm toggleForm={showLogin} onSuccess={showOtp} />;
      case 'otp':
        return <OtpForm onSuccess={showLogin} />;
      case 'forgotPassword':
        return <ForgotPasswordForm showLogin={showLogin} showReset={showResetPassword} />;
      case 'resetPassword':
        return <ResetPasswordForm showLogin={showLogin} />;
      case 'login':
      default:
        return <LoginForm toggleForm={showSignup} showForgotPassword={showForgotPassword} />;
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center p-4">
      <div className="w-full max-w-md p-8 space-y-6 bg-black/30 backdrop-blur-xl rounded-2xl shadow-2xl">
        {renderForm()}
      </div>
    </div>
  );
};

export default AuthPage;