import React from 'react';
import {
  Box,
  Container,
  Typography,
  Button,
  Grid,
  useTheme,
} from '@mui/material';
import { useNavigate } from 'react-router-dom';
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';

import adminImage from '../assets/images/admin.jpg';
import teacherImage from '../assets/images/teacher.png';
import studentImage from '../assets/images/student-learning.png';

const RoleSection = ({
  title,
  description,
  image,
  imagePosition,
  buttonText,
  onButtonClick,
}) => {
  const theme = useTheme();

  return (
    <Box sx={{ py: 10 }}>
      <Grid
        container
        spacing={6}
        alignItems="center"
        direction={imagePosition === 'right' ? 'row' : 'row-reverse'}
      >
        <Grid item xs={12} md={6}>
          <Box sx={{ p: 2 }}>
            <Typography
              variant="h3"
              component="h2"
              gutterBottom
              sx={{ fontWeight: 700 }}
            >
              {title}
            </Typography>

            <Typography
              variant="h6"
              color="text.secondary"
              paragraph
              sx={{ mb: 4, lineHeight: 1.6 }}
            >
              {description}
            </Typography>

            <Button
              variant="contained"
              size="large"
              endIcon={<ArrowForwardIcon />}
              onClick={onButtonClick}
              sx={{
                borderRadius: 0,
                px: 4,
                py: 1.5,
                textTransform: 'none',
                fontSize: '1.1rem',
              }}
            >
              {buttonText}
            </Button>
          </Box>
        </Grid>

        <Grid item xs={12} md={6}>
          <Box
            component="img"
            src={image}
            alt={title}
            sx={{
              width: '100%',
              borderRadius: '20px',
              boxShadow: theme.shadows[10],
              transform: 'scale(1)',
              transition: 'transform 0.3s ease-in-out',
              '&:hover': {
                transform: 'scale(1.02)',
              },
            }}
          />
        </Grid>
      </Grid>
    </Box>
  );
};

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

  const roles = [
    {
      title: 'Administrators',
      description:
        'Gain a complete overview of the institution. Monitor key indicators and manage data to support student success.',
      image: adminImage,
      buttonText: 'Manage the Platform',
      imagePosition: 'left',
      color: 'primary.main',
      onButtonClick: () => navigate('/login'),
    },
    {
      title: 'Teachers',
      description:
        'Identify academic difficulties early. Receive alerts about at-risk students and adapt your support accordingly.',
      image: teacherImage,
      buttonText: 'Monitor My Classes',
      imagePosition: 'right',
      color: 'secondary.main',
      onButtonClick: () => navigate('/login'),
    },
    {
      title: 'Students',
      description:
        'Take control of your academic future. Track your progress and receive personalized guidance to improve your performance.',
      image: studentImage,
      buttonText: 'View My Predictions',
      imagePosition: 'left',
      color: 'primary.main',
      onButtonClick: () => navigate('/login'),
    },
  ];

  return (
    <Box sx={{ py: 12, bgcolor: 'background.default' }} id="roles">
      <Container maxWidth="lg">
        <Box sx={{ textAlign: 'center', mb: 12 }}>
          <Typography
            variant="subtitle1"
            color="secondary"
            sx={{
              fontWeight: 700,
              letterSpacing: 1.5,
              mb: 2,
            }}
          >
            ROLE-BASED FEATURES
          </Typography>

          <Typography variant="h2" sx={{ fontWeight: 800, mb: 3 }}>
            A solution designed for{' '}
            <Box component="span" sx={{ color: 'secondary.main' }}>
              every user
            </Box>
          </Typography>

          <Typography
            variant="h6"
            color="text.secondary"
            sx={{ maxWidth: 700, mx: 'auto' }}
          >
            From strategic management to individual student success, our
            classification system connects every level of the university.
          </Typography>
        </Box>

        {roles.map((role, index) => (
          <RoleSection key={index} {...role} />
        ))}
      </Container>
    </Box>
  );
};

export default RoleShowcase;