import React from 'react'
import {
  Box,
  Text,
  Progress,
  Flex,
  Divider,
  Tooltip
} from '@chakra-ui/react'
import { useTranslation } from 'react-i18next'
import { InfoOutlineIcon } from '@chakra-ui/icons'

import { CourseStats } from './useStats'
import { WeekdayActivityChart } from './WeekdayActivityChart'

interface ActivityStatsProps {
  stats: CourseStats
}

export const ActivityStats: React.FC<ActivityStatsProps> = ({ stats }) => {
  const { t } = useTranslation()
  
  // Определяем цвет для прогресса в зависимости от значения
  const getProgressColor = (value: number) => {
    if (value > 80) return 'green'
    if (value > 50) return 'blue'
    if (value > 30) return 'yellow'
    return 'red'
  }
  
  // Вычисляем процент завершенности курсов
  const completionPercentage = 
    stats.totalLessons > 0 
      ? (stats.completedLessons / stats.totalLessons) * 100 
      : 0
  
  return (
    <Box>
      <Flex align="center" mb={3}>
        <Text fontWeight="medium" fontSize="md" mr={2}>
          {t('journal.pl.overview.activityStats')}
        </Text>
        <Tooltip label={t('journal.pl.overview.pastLessonsStats')}>
          <InfoOutlineIcon color="gray.400" boxSize={3} />
        </Tooltip>
      </Flex>
      
      <Box mb={3}>
        <Flex align="center" mb={1}>
          <Text fontSize="sm" fontWeight="medium" mr={1}>
            {t('journal.pl.overview.courseCompletion')}:
          </Text>
          <Tooltip label={`${stats.completedLessons} / ${stats.totalLessons}`}>
            <InfoOutlineIcon color="gray.400" boxSize={3} />
          </Tooltip>
        </Flex>
        <Progress 
          value={completionPercentage} 
          size="md" 
          borderRadius="md"
          colorScheme={getProgressColor(completionPercentage)}
          mb={1}
          hasStripe
        />
        <Flex justify="space-between" fontSize="sm">
          <Text>
            {stats.completedLessons} / {stats.totalLessons} {t('journal.pl.overview.lessons')}
          </Text>
          <Text fontWeight="medium">
            {Math.round(completionPercentage)}%
          </Text>
        </Flex>
      </Box>
      
      <Box mb={3}>
        <Flex align="center" mb={1}>
          <Text fontSize="sm" fontWeight="medium" mr={1}>
            {t('journal.pl.overview.studentAttendance')}:
          </Text>
          <Tooltip label={t('journal.pl.overview.attendanceHelp')}>
            <InfoOutlineIcon color="gray.400" boxSize={3} />
          </Tooltip>
        </Flex>
        <Progress 
          value={stats.averageAttendance} 
          size="md" 
          borderRadius="md"
          colorScheme={getProgressColor(stats.averageAttendance)}
          mb={1}
          hasStripe
        />
        <Flex justify="space-between" fontSize="sm">
          <Text>
            {t('journal.pl.overview.averageRate')}
          </Text>
          <Text fontWeight="medium">
            {Math.round(stats.averageAttendance)}%
          </Text>
        </Flex>
      </Box>
      
      <Divider my={3} />
      
      <WeekdayActivityChart 
        weekdayActivity={stats.weekdayActivity}
        mostActiveDayIndex={stats.mostActiveDayIndex}
      />
    </Box>
  )
} 