import React from 'react';
import { Typography, IconButton, Stack, Box } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import { useTheme } from '@emotion/react';
import { useSelector, useDispatch } from 'react-redux';
import { useTranslation } from 'react-i18next';
import { setStarPromptOpen } from '../../Features/UI/uiSlice';

const StarPrompt = ({
  repoUrl = 'https://github.com/bluewave-labs/checkmate'
}) => {
  const theme = useTheme();
  const dispatch = useDispatch();
  const { t } = useTranslation();
  const isOpen = useSelector((state) => state.ui?.starPromptOpen ?? true);
  const mode = useSelector((state) => state.ui.mode);

  const handleClose = () => {
    dispatch(setStarPromptOpen(false));
  };

  const handleStarClick = () => {
    window.open(repoUrl, '_blank');
  };

  if (!isOpen) return null;

  return (
    <Stack
      direction="column"
      sx={{
        width: '100%',
        padding: `${theme.spacing(6)} ${theme.spacing(6)}`,
        borderTop: `1px solid ${theme.palette.primary.lowContrast}`,
        borderBottom: `1px solid ${theme.palette.primary.lowContrast}`,
        borderRadius: 0,
        gap: theme.spacing(1.5),
        backgroundColor: theme.palette.primary.main,
      }}
    >
      <Stack direction="row" justifyContent="space-between" alignItems="center" width="100%" pl={theme.spacing(4)}>
        <Typography 
          variant="subtitle2" 
          sx={{ 
            color: mode === 'dark' ? theme.palette.primary.contrastText : theme.palette.text.primary,
            mt: theme.spacing(3)
          }}
        >
          {t('starPromptTitle')}
        </Typography>
        <IconButton
          onClick={handleClose}
          size="small"
          sx={{
            color: theme.palette.text.primary,
            padding: 0,
            marginTop: theme.spacing(-5),
            '&:hover': {
              backgroundColor: 'transparent',
              opacity: 0.8
            },
          }}
        >
          <CloseIcon sx={{ fontSize: '1.25rem' }} />
        </IconButton>
      </Stack>

      <Typography 
        variant="body1"
        sx={{ 
          color: theme.palette.text.secondary,
          fontSize: '0.938rem',
          lineHeight: 1.5,
          mb: 1,
          px: theme.spacing(4)
        }}
      >
        {t('starPromptDescription')}
      </Typography>

      <Box 
        component="img"
        src={`https://img.shields.io/github/stars/bluewave-labs/checkmate?label=checkmate&style=social${mode === 'dark' ? '&color=white' : ''}`}
        alt="GitHub stars"
        onClick={handleStarClick}
        sx={{
          cursor: 'pointer',
          transform: 'scale(0.65)',
          transformOrigin: 'left center',
          '&:hover': {
            opacity: 0.8
          },
          pl: theme.spacing(4),
          filter: mode === 'dark' ? 'invert(1)' : 'none'
        }}
      />
    </Stack>
  );
};

export default StarPrompt;