import { Box, Button, Typography, Paper } from '@mui/material';
import { Login } from '@mui/icons-material';
import keycloak from '../../services/keycloak';

export function LoginPage() {
  const handleLogin = () => {
    void keycloak.login();
  };

  return (
    <Box
      sx={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        minHeight: '100vh',
        bgcolor: 'background.default',
      }}
    >
      <Paper
        elevation={3}
        sx={{
          p: 6,
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          maxWidth: 400,
          textAlign: 'center',
        }}
      >
        <Typography variant="h4" component="h1" gutterBottom fontWeight="bold">
          Team Planner
        </Typography>
        <Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
          Приложение для управления бэклогом идей команды
        </Typography>

        <Button
          variant="contained"
          size="large"
          startIcon={<Login />}
          onClick={handleLogin}
          sx={{ mb: 4, px: 4, py: 1.5 }}
        >
          Войти
        </Button>

        <Typography variant="body2" color="text.secondary">
          Для получения доступа обратитесь к Николаю Вигдорову
        </Typography>
      </Paper>
    </Box>
  );
}
