'use client';

import NextLink from 'next/link';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { styled } from '@mui/material/styles';
import PageContainer from '../components/forms/container/PageContainer';
import AuthLogin from '../authForms/AuthLogin';

const GradientGrid = styled(Grid)(({ theme }) => ({
  position: 'relative',
  backgroundColor: '#d2f1df',
  backgroundImage:
    'linear-gradient(45deg, #d2f1df 0%, #d3d7fa 50%, #bad8f4 100%)',
  backgroundSize: '400% 400%',
  backgroundPosition: '0% 50%',
  animation: 'gradient 15s ease infinite',
  display: 'none',
  [theme.breakpoints.up('lg')]: {
    display: 'block',
  },
}));

export default function Login() {
  return (
    <PageContainer title="Login" description="Página de Login">
      <Grid
        container
        spacing={0}
        justifyContent="center"
        sx={{ height: '100vh', width: '100%' }}
      >
        <GradientGrid size={{ xs: 12, lg: 7, xl: 8 }}>
          <Box
            display="flex"
            alignItems="center"
            justifyContent="center"
            height="100%"
            sx={{
              backgroundColor: 'rgba(255, 255, 255, 0.15)',
              backdropFilter: 'blur(10px)',
            }}
          >
            <Box textAlign="center">
              {/* Background image placeholder */}
              <Box mb={3}>
                <Typography variant="h3" fontWeight="700" color="primary">
                  Jurunense
                </Typography>
              </Box>
              <Typography variant="h4" fontWeight="600" color="textPrimary">
                Bem-vindo de volta
              </Typography>
              <Typography variant="subtitle1" color="textSecondary" mt={1}>
                Acesse sua conta para continuar
              </Typography>
            </Box>
          </Box>
        </GradientGrid>
        <Grid size={{ xs: 12, lg: 5, xl: 4 }}>
          <Box
            display="flex"
            justifyContent="center"
            alignItems="center"
            sx={{ backgroundColor: 'white' }}
          >
            <Box p={4} sx={{ width: '100%', maxWidth: '450px' }}>
              <AuthLogin
                subtitle={
                  <Stack direction="row" spacing={1} mt={3} flexWrap="wrap">
                    <Typography
                      fontWeight="500"
                      sx={{
                        textDecoration: 'none',
                        color: 'primary.main',
                      }}
                    >
                      <NextLink
                        href="/auth/auth1/register"
                        style={{
                          textDecoration: 'none',
                          color: 'inherit',
                          whiteSpace: 'nowrap',
                        }}
                      >
                        Criar uma conta
                      </NextLink>
                    </Typography>
                  </Stack>
                }
              />
            </Box>
          </Box>
        </Grid>
      </Grid>
    </PageContainer>
  );
}