import React from 'react'
import { Box, Flex, useColorMode } from '@chakra-ui/react'
import { useTranslation } from 'react-i18next'
import { User } from '../../__data__/model'
import { AddMissedButton } from './sstyle'
import { AddIcon } from '@chakra-ui/icons'
import { UserCard } from '../user-card'

interface StudentCardBackProps {
  student: User & { present?: boolean; recentlyPresent?: boolean }
  onAddUser?: (user: User) => void
}

export const StudentCardBack: React.FC<StudentCardBackProps> = ({ student, onAddUser }) => {
  const { colorMode } = useColorMode()
  const { t } = useTranslation()
  
  // Веселые градиентные цвета
  const colors = {
    gradient: colorMode === 'light' 
      ? 'linear-gradient(135deg, #F6FFDE, #E3F2C1, #C9DBB2)' 
      : 'linear-gradient(135deg, #0D1282, #2F58CD, #3795BD)',
    text: colorMode === 'light' ? "#2E7D32" : "#81C784"
  }
  
  // Is the student marked as present?
  const isPresent = !!student.present;
  
  // Функция для генерации случайного, но стабильного положения пузырьков для каждого студента
  const getBubbleStyle = (index: number) => {
    // Используем ID студента для получения стабильных, но уникальных чисел
    const id = student.sub || '';
    const charSum = id.split('').reduce((sum, char, i) => sum + char.charCodeAt(0) * (i + 1), 0);
    
    // Разные значения для разных пузырей
    const seed = (charSum + index * 137) % 100;
    
    return {
      left: `${(seed % 80) + 10}%`,
      top: `${((seed * 1.5) % 80) + 10}%`,
      size: `${(seed % 15) + 10}px`,
      duration: `${(seed % 4) + 8}s`
    };
  };
  
  return (
    <Flex
      position="absolute"
      top="0"
      left="0"
      width="100%"
      height="100%"
      bg={colorMode === "light" ? "white" : "gray.700"}
      borderRadius="12px"
      align="center"
      justify="center"
      p={4}
      overflow="hidden"
      style={{
        backfaceVisibility: "hidden",
        transform: "rotateY(180deg)",
        zIndex: 0,
        aspectRatio: "1"
      }}
    >
      {/* Add button */}
      {!isPresent && (
        <AddMissedButton 
          onClick={() => onAddUser?.(student)} 
          aria-label={t('journal.pl.common.add')}
        >
          <AddIcon boxSize={3} />
        </AddMissedButton>
      )}
      
      {/* Веселый фон с градиентом */}
      <Box 
        position="absolute"
        top="0"
        left="0"
        right="0"
        bottom="0"
        background={colors.gradient}
        opacity="0.2"
      />
      
      {/* Декоративные пузырьки */}
      {[...Array(6)].map((_, i) => {
        const style = getBubbleStyle(i);
        return (
          <Box
            key={i}
            position="absolute"
            left={style.left}
            top={style.top}
            width={style.size}
            height={style.size}
            borderRadius="full"
            background={colors.gradient}
            opacity="0.4"
            sx={{
              animation: `float ${style.duration} ease-in-out infinite`,
              "@keyframes float": {
                "0%, 100%": { transform: "translateY(0px)" },
                "50%": { transform: "translateY(-10px)" }
              }
            }}
          />
        );
      })}
      
      {/* Content */}
      <Flex 
        direction="column"
        align="center"
        justify="center"
        width="100%"
        zIndex="1"
      >
        {/* Gravatar с весёлой анимацией */}
        <Box 
          position="relative"
          width="80px"
          height="80px"
          borderRadius="full"
          overflow="hidden"
          mb={4}
          boxShadow="0 0 15px rgba(255, 255, 255, 0.4)"
        >
          {/* Using the UserCard for gravatar */}
          <Box 
            position="absolute" 
            top="0" 
            left="0" 
            right="0" 
            bottom="0"
            zIndex="1"
            overflow="hidden"
          >
            <UserCard
              wrapperAS="div"
              student={student}
              present={false}
              width="100%"
            />
          </Box>
        </Box>
        
        {/* Student name */}
        <Box 
          fontSize="sm" 
          fontWeight="medium" 
          textAlign="center"
          color={colorMode === "light" ? "gray.800" : "white"}
          mb={1}
        >
          {student.name || student.preferred_username}
        </Box>
        
        {/* Status с эмодзи */}
        <Box 
          fontSize="xs" 
          color={colors.text}
          fontWeight="medium"
          display="flex"
          alignItems="center"
        >
          <Box as="span" mr="1" fontSize="sm">🔔</Box>
          {t('journal.pl.lesson.notMarked')}
        </Box>
      </Flex>
    </Flex>
  )
} 