import { useEffect, useMemo } from 'react';
import { keyframes } from '@emotion/react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import { Rambi } from '../mascot/Rambi';
import { playIncorrectSound } from '../../utils/sounds';

const slideUp = keyframes`
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
`;

const encouragePhrases = [
  'Kaya mo yan!',
  'Subukan ulit!',
  'Okay lang!',
  'Halos tama!',
  'Matuto tayo!',
  'Hindi bale!',
];

interface IncorrectBannerProps {
  correctAnswer: string;
  onContinue: () => void;
}

export function IncorrectBanner({ correctAnswer, onContinue }: IncorrectBannerProps) {
  const phrase = useMemo(
    () => encouragePhrases[Math.floor(Math.random() * encouragePhrases.length)],
    [],
  );

  useEffect(() => {
    playIncorrectSound();
  }, []);

  return (
    <Box
      sx={{
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        bgcolor: '#FF4B4B',
        pt: 2,
        pb: 'calc(16px + env(safe-area-inset-bottom, 0px))',
        px: 3,
        animation: `${slideUp} 0.3s ease-out`,
        zIndex: 1300,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        gap: 1.5,
      }}
    >
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
        <Rambi mood="encourage" size={48} />
        <Box>
          <Typography
            variant="h6"
            sx={{ color: '#FFFFFF', fontWeight: 700 }}
          >
            {phrase}
          </Typography>
          <Typography
            variant="body2"
            sx={{
              color: 'rgba(255,255,255,0.9)',
              fontWeight: 500,
            }}
          >
            Correct answer: {correctAnswer}
          </Typography>
        </Box>
      </Box>
      <Button
        fullWidth
        variant="contained"
        onClick={onContinue}
        sx={{
          py: 1.5,
          bgcolor: 'rgba(255,255,255,0.25)',
          color: '#FFFFFF',
          fontWeight: 700,
          '&:hover': { bgcolor: 'rgba(255,255,255,0.35)' },
          maxWidth: 600,
        }}
      >
        Continue
      </Button>
    </Box>
  );
}