import React, { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button, Container, Paper, Typography, Box } from '@mui/material';

const Login = () => {
  const navigate = useNavigate();

  useEffect(() => {
    const storedUser = localStorage.getItem('user');
    if (storedUser) {
      navigate('/dashboard');
    }
  }, [navigate]);

  const handleLogin = () => {
  const API_BASE = process.env.REACT_APP_API_BASE || '';
    window.location.href = `${API_BASE}/auth/discord`;
  };

  return (
    <Container component="main" maxWidth="xs" sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
      <Paper elevation={3} sx={{ padding: 4, display: 'flex', flexDirection: 'column', alignItems: 'center', borderRadius: '20px', boxShadow: '0 8px 16px 0 rgba(0,0,0,0.2)' }}>
        <Typography component="h1" variant="h4" sx={{ marginBottom: 2, fontWeight: 'bold' }}>
          Welcome!
        </Typography>
        <Typography component="p" variant="h6" sx={{ marginBottom: 4, textAlign: 'center' }}>
          Login with your Discord account to continue
        </Typography>
        <Box sx={{ width: '100%' }}>
          <Button
            fullWidth
            variant="contained"
            color="primary"
            onClick={handleLogin}
            sx={{ borderRadius: '10px', padding: '10px 0', textTransform: 'none', fontSize: '1.2rem' }}
          >
            Login with Discord
          </Button>
        </Box>
      </Paper>
    </Container>
  );
};

export default Login;