import React, { useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import {
  Container,
  Typography,
  Box,
  Button,
  Stack,
  Divider,
} from '@mui/material';
import { useAuth } from '../../contexts/AuthContext';
import { EmailSignupForm } from './EmailSignupForm';
import { EmailCredentials } from '../../services/auth/authService';
import { RegistrationService } from '../../services/auth/registrationService';
import { logger } from '../../debugConfig';
import MicrosoftIcon from '@mui/icons-material/Microsoft.js';

const SignupPage: React.FC = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const { user } = useAuth();
  const registrationService = RegistrationService.getInstance();

  // Get role from location state, default to teacher
  const { role = 'teacher' } = location.state || {};
  const roleDisplay = role === 'teacher' ? 'Teacher' : 'Student';

  logger.debug('signup-page', '🔍 Signup page loaded', {
    role,
    hasUser: !!user,
  });

  useEffect(() => {
    if (user) {
      navigate('/dashboard');
    }
  }, [user, navigate]);

  const handleSignup = async (
    credentials: EmailCredentials,
    displayName: string
  ) => {
    try {
      const result = await registrationService.register(
        credentials,
        displayName
      );
      if (result.user) {
        navigate('/dashboard');
      }
    } catch (error) {
      logger.error('signup-page', '❌ Registration failed', error);
      throw error;
    }
  };

  const switchRole = () => {
    navigate('/signup', {
      state: { role: role === 'teacher' ? 'student' : 'teacher' },
    });
  };

  if (user) {
    return null;
  }

  return (
    <Container
      sx={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        minHeight: '100vh',
        gap: 4,
      }}
    >
      <Typography variant="h2" component="h1" gutterBottom>
        ClassroomCopilot.ai
      </Typography>

      <Typography variant="h4" gutterBottom>
        {roleDisplay} Sign Up
      </Typography>

      <Box sx={{ width: '100%', maxWidth: 400 }}>
        <Button
          fullWidth
          variant="outlined"
          startIcon={<MicrosoftIcon />}
          onClick={() => {}}
          sx={{ mb: 3 }}
        >
          Sign up with Microsoft
        </Button>

        <Divider sx={{ my: 2 }}>OR</Divider>

        <EmailSignupForm
          role={`email_${role}` as 'email_teacher' | 'email_student'}
          onSubmit={handleSignup}
        />

        <Stack
          direction="row"
          spacing={2}
          justifyContent="center"
          sx={{ mt: 3 }}
        >
          <Button variant="text" onClick={switchRole}>
            Switch to {role === 'teacher' ? 'Student' : 'Teacher'} Sign Up
          </Button>
        </Stack>
      </Box>
    </Container>
  );
};

export default SignupPage;