import React from 'react'
import {
  Box,
  HStack,
  Text,
  Badge,
  Tooltip,
  VStack,
  Flex
} from '@chakra-ui/react'
import { useTranslation } from 'react-i18next'

interface WeekdayActivityChartProps {
  weekdayActivity: number[]
  mostActiveDayIndex: number
}

export const WeekdayActivityChart: React.FC<WeekdayActivityChartProps> = ({
  weekdayActivity,
  mostActiveDayIndex
}) => {
  const { t } = useTranslation()

  // Переводим день недели в читаемый формат
  const getDayOfWeekName = (dayIndex: number) => {
    const days = [
      'journal.pl.days.sunday',
      'journal.pl.days.monday',
      'journal.pl.days.tuesday',
      'journal.pl.days.wednesday',
      'journal.pl.days.thursday',
      'journal.pl.days.friday',
      'journal.pl.days.saturday'
    ]
    return t(days[dayIndex])
  }
  
  // Получаем короткое название дня недели (первая буква)
  const getShortDayName = (dayIndex: number) => {
    return t(`journal.pl.days.${['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'][dayIndex]}`).charAt(0)
  }
  
  // Формируем подсказку для дня недели
  const getDayTooltip = (dayIndex: number, count: number) => {
    return `${t(`journal.pl.days.${['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'][dayIndex]}`)}:
${count} ${t('journal.pl.overview.lessons').toLowerCase()}`
  }
  
  // Если нет данных по активности, показываем сообщение
  if (!weekdayActivity.some(count => count > 0)) {
    return (
      <Box textAlign="center" color="gray.500" fontSize="sm">
        {t('journal.pl.overview.noAttendanceData')}
      </Box>
    )
  }
  
  // Находим максимальное и суммарное значение для расчета процентов
  const maxValue = Math.max(...weekdayActivity)
  const totalLessons = weekdayActivity.reduce((sum, count) => sum + count, 0)
  
  return (
    <VStack align="start" width="100%">
      <Flex justify="space-between" width="100%" align="center">
        <Text fontSize="sm" fontWeight="medium">
          {t('journal.pl.overview.mostActiveDay')}:
        </Text>
        <Badge colorScheme="blue" fontSize="md" px={2} py={1}>
          {getDayOfWeekName(mostActiveDayIndex)}
        </Badge>
      </Flex>
      
      <Text fontSize="xs" color="gray.500" mb={2}>
        {t('journal.pl.overview.pastLessonsStats')}
      </Text>
      
      {/* Визуализация активности по дням недели */}
      <Box w="100%" mt={2}>
        <HStack spacing={1} w="100%" justify="space-between" alignItems="flex-end">
          {weekdayActivity.map((count, index) => (
            <Tooltip 
              key={index} 
              label={getDayTooltip(index, count)}
            >
              <Box width="24px" display="flex" flexDirection="column" alignItems="center">
                {/* Область для числа */}
                <Box height="15px" mb={1}>
                  {count > 0 && (
                    <Text 
                      fontSize="10px" 
                      fontWeight="bold"
                      color={index === mostActiveDayIndex ? 'blue.500' : 'gray.500'}
                      lineHeight="15px"
                      textAlign="center"
                    >
                      {count}
                    </Text>
                  )}
                </Box>
                
                {/* Столбец графика */}
                <Box 
                  h={`${Math.max((count / Math.max(maxValue, 1)) * 50, 3)}px`} 
                  w="12px" 
                  bg={index === mostActiveDayIndex ? 'blue.400' : 'gray.300'}
                  minH="3px"
                  borderRadius="sm"
                />
                
                {/* Буква дня недели */}
                <Box height="15px" mt={1}>
                  <Text 
                    fontSize="xs"
                    fontWeight={index === mostActiveDayIndex ? "bold" : "normal"}
                    lineHeight="15px"
                    textAlign="center"
                  >
                    {getShortDayName(index)}
                  </Text>
                </Box>
                
                {/* Процент */}
                <Box height="15px">
                  {count > 0 && totalLessons > 0 && (
                    <Text 
                      fontSize="9px" 
                      color="gray.500"
                      lineHeight="15px"
                      textAlign="center"
                    >
                      {Math.round((count / totalLessons) * 100)}%
                    </Text>
                  )}
                </Box>
              </Box>
            </Tooltip>
          ))}
        </HStack>
      </Box>
      
      <Text fontSize="xs" color="gray.500" mt={2} fontStyle="italic">
        {t('journal.pl.overview.dayOfWeekHelp')}
      </Text>
    </VStack>
  )
}