thrilltrack-explorer/components/auth/AuthModal.tsx

'use client';

import { useState } from 'react';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from '@/components/ui/dialog';
import { LoginForm } from './LoginForm';
import { RegisterForm } from './RegisterForm';
import { PasswordResetForm } from './PasswordResetForm';
import { OAuthButtons } from './OAuthButtons';

type AuthView = 'login' | 'register' | 'reset';

interface AuthModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  defaultView?: AuthView;
  onSuccess?: () => void;
  showOAuth?: boolean;
}

export function AuthModal({
  open,
  onOpenChange,
  defaultView = 'login',
  onSuccess,
  showOAuth = true,
}: AuthModalProps) {
  const [view, setView] = useState<AuthView>(defaultView);

  const handleSuccess = () => {
    onSuccess?.();
    onOpenChange(false);
  };

  const getTitle = () => {
    switch (view) {
      case 'login':
        return 'Welcome Back';
      case 'register':
        return 'Create Account';
      case 'reset':
        return 'Reset Password';
    }
  };

  const getDescription = () => {
    switch (view) {
      case 'login':
        return 'Sign in to your account to continue';
      case 'register':
        return 'Create a new account to get started';
      case 'reset':
        return 'Reset your password';
    }
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>{getTitle()}</DialogTitle>
          <DialogDescription>{getDescription()}</DialogDescription>
        </DialogHeader>

        <div className="mt-4">
          {view === 'login' && (
            <>
              <LoginForm
                onSuccess={handleSuccess}
                onSwitchToRegister={() => setView('register')}
                onSwitchToReset={() => setView('reset')}
              />
              {showOAuth && (
                <div className="mt-6">
                  <OAuthButtons />
                </div>
              )}
            </>
          )}

          {view === 'register' && (
            <>
              <RegisterForm
                onSuccess={handleSuccess}
                onSwitchToLogin={() => setView('login')}
              />
              {showOAuth && (
                <div className="mt-6">
                  <OAuthButtons />
                </div>
              )}
            </>
          )}

          {view === 'reset' && (
            <PasswordResetForm
              onSuccess={handleSuccess}
              onBack={() => setView('login')}
            />
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
}