import React, { useState } from 'react';
import { LoginForm } from '@/features/auth/components/LoginForm';
import { RegisterForm } from '@/features/auth/components/RegisterForm';
// import { EmailVerification } from '@/features/auth/components/EmailVerification';
import { ForgotPasswordForm } from '@/features/auth/components/ForgotPasswordForm';
// import { ResetPasswordForm } from '@/features/auth/components/ResetPasswordForm';
import { TwoFactorVerify } from '@/features/auth/components/TwoFactorVerify';
import { useAuth } from '@/context/AuthContext';

type AuthStep =
  | 'LOGIN'
  | 'REGISTER'
  | 'VERIFY_EMAIL'
  | 'FORGOT_PASSWORD'
  | 'RESET_PASSWORD';

export const AuthView: React.FC = () => {
  useAuth();
  // const { login, register } = useAuth();
  const [currentStep, setCurrentStep] = useState<AuthStep>('LOGIN');
  const [show2FA, setShow2FA] = useState(false);
  const [_pendingCredentials, _setPendingCredentials] = useState<any>(null);

  const handleLoginSuccess = (needs2FA: boolean) => {
    if (needs2FA) {
      setShow2FA(true);
    }
    // If no 2FA, login logic is handled inside AuthContext
  };

  return (
    <>
      {currentStep === 'LOGIN' && (
        <LoginForm
          // @ts-ignore
          onSuccess={handleLoginSuccess} // Note: This prop might need refactoring in LoginForm to pass credentials up
          onRegisterClick={() => setCurrentStep('REGISTER')}
          onForgotClick={() => setCurrentStep('FORGOT_PASSWORD')}
        />
      )}

      {currentStep === 'REGISTER' && (
        <RegisterForm
          // @ts-ignore
          onSuccess={() => setCurrentStep('VERIFY_EMAIL')}
          onLoginClick={() => setCurrentStep('LOGIN')}
        />
      )}

      {currentStep === 'VERIFY_EMAIL' && (
        // <EmailVerification
        //   onSuccess={() => setCurrentStep('LOGIN')}
        // />
        <div className="text-center p-4">
          Email Verification Component Placeholder
        </div>
      )}

      {currentStep === 'FORGOT_PASSWORD' && (
        <ForgotPasswordForm
          // @ts-ignore
          onBack={() => setCurrentStep('LOGIN')}
          onSubmitSuccess={() => setCurrentStep('RESET_PASSWORD')}
        />
      )}

      {currentStep === 'RESET_PASSWORD' && (
        // <ResetPasswordForm
        //   onSuccess={() => setCurrentStep('LOGIN')}
        // />
        <div className="text-center p-4">
          Reset Password Component Placeholder
        </div>
      )}

      {show2FA && (
        <TwoFactorVerify
          onSuccess={(_code) => {
            setShow2FA(false);
          }}
          onCancel={() => setShow2FA(false)}
        />
      )}
    </>
  );
};
