import React, { useMemo } from 'react'
import dayjs from 'dayjs'
import {
  Box,
  Heading,
  Text,
  SimpleGrid,
  Stat,
  StatLabel,
  StatNumber,
  StatHelpText,
  StatArrow,
  StatGroup,
  Flex,
  Icon,
  Progress,
  Divider,
  Badge,
  VStack,
  HStack,
  useColorModeValue
} from '@chakra-ui/react'
import { useTranslation } from 'react-i18next'
import { 
  FaChalkboardTeacher, 
  FaUserGraduate, 
  FaClock, 
  FaCalendarCheck, 
  FaCalendarAlt,
  FaPercentage 
} from 'react-icons/fa'
import { CalendarIcon, StarIcon, TimeIcon } from '@chakra-ui/icons'

import { Lesson } from '../../../__data__/model'

interface CourseStatisticsProps {
  lessons: Lesson[]
  isLoading: boolean
}

export const CourseStatistics: React.FC<CourseStatisticsProps> = ({ lessons = [], isLoading }) => {
  const { t } = useTranslation()
  const statBgColor = useColorModeValue('white', 'gray.700')
  const borderColor = useColorModeValue('gray.200', 'gray.600')
  
  // Вычисляем статистику курса
  const stats = useMemo(() => {
    if (!lessons.length) {
      return {
        totalLessons: 0,
        completedLessons: 0,
        upcomingLessons: 0,
        attendanceRate: 0,
        averageStudentsPerLesson: 0,
        nextLessonDate: null,
        mostAttendedLesson: null,
        attendanceTrend: 0,
        totalStudents: 0,
        daysUntilNextLesson: 0,
        percentageCompleted: 0
      }
    }
    
    const now = dayjs()
    const completed = lessons.filter(lesson => dayjs(lesson.date).isBefore(now))
    const upcoming = lessons.filter(lesson => dayjs(lesson.date).isAfter(now))
    
    // Сортируем предстоящие занятия по дате (ближайшие вперед)
    const sortedUpcoming = [...upcoming].sort((a, b) => 
      dayjs(a.date).valueOf() - dayjs(b.date).valueOf()
    )
    
    // Находим ближайшее занятие
    const nextLesson = sortedUpcoming.length > 0 ? sortedUpcoming[0] : null
    
    // Вычисляем среднее количество студентов на занятии
    const totalStudentsCount = completed.reduce(
      (sum, lesson) => sum + (lesson.students?.length || 0), 
      0
    )
    
    const averageStudents = completed.length 
      ? totalStudentsCount / completed.length 
      : 0
    
    // Находим занятие с наибольшей посещаемостью
    let mostAttended = null
    let maxAttendance = 0
    
    completed.forEach(lesson => {
      const attendance = lesson.students?.length || 0
      if (attendance > maxAttendance) {
        maxAttendance = attendance
        mostAttended = lesson
      }
    })
    
    // Вычисляем тренд посещаемости (положительный или отрицательный)
    let attendanceTrend = 0
    
    if (completed.length >= 2) {
      // Берем последние 5 занятий или меньше, если их меньше 5
      const recentLessons = [...completed]
        .sort((a, b) => dayjs(b.date).valueOf() - dayjs(a.date).valueOf())
        .slice(0, 5)
      
      if (recentLessons.length >= 2) {
        const lastLesson = recentLessons[0]
        const previousLessons = recentLessons.slice(1)
        
        const lastAttendance = lastLesson.students?.length || 0
        const avgPreviousAttendance = previousLessons.reduce(
          (sum, lesson) => sum + (lesson.students?.length || 0), 
          0
        ) / previousLessons.length
        
        // Вычисляем процентное изменение
        attendanceTrend = avgPreviousAttendance 
          ? ((lastAttendance - avgPreviousAttendance) / avgPreviousAttendance) * 100
          : 0
      }
    }
    
    // Вычисляем количество дней до следующего занятия
    const daysUntilNext = nextLesson 
      ? dayjs(nextLesson.date).diff(now, 'day')
      : 0
    
    // Собираем все уникальные ID студентов
    const uniqueStudents = new Set()
    lessons.forEach(lesson => {
      lesson.students?.forEach(student => {
        uniqueStudents.add(student.sub)
      })
    })
    
    // Вычисляем процент завершенного курса
    const percentComplete = lessons.length 
      ? (completed.length / lessons.length) * 100
      : 0
    
    return {
      totalLessons: lessons.length,
      completedLessons: completed.length,
      upcomingLessons: upcoming.length,
      attendanceRate: completed.length ? (totalStudentsCount / (completed.length * uniqueStudents.size || 1)) * 100 : 0,
      averageStudentsPerLesson: Math.round(averageStudents * 10) / 10,
      nextLessonDate: nextLesson?.date || null,
      mostAttendedLesson: mostAttended,
      attendanceTrend,
      totalStudents: uniqueStudents.size,
      daysUntilNextLesson: daysUntilNext,
      percentageCompleted: percentComplete
    }
  }, [lessons])
  
  // Определяем цвет для показателей статистики
  const getProgressColor = (value) => {
    if (value > 80) return 'green'
    if (value > 50) return 'blue'
    if (value > 30) return 'yellow'
    return 'red'
  }
  
  if (isLoading || !lessons.length) {
    return null
  }
  
  return (
    <Box mb={6} py={3}>
      <Heading size="md" mb={4}>
        {t('journal.pl.statistics.title')}
      </Heading>
      
      <SimpleGrid columns={{ base: 1, sm: 2, md: 4 }} spacing={5} mb={5}>
        {/* Статистика по занятиям */}
        <Stat 
          bg={statBgColor} 
          p={3} 
          borderRadius="lg" 
          boxShadow="sm"
          borderLeft="4px solid" 
          borderLeftColor="blue.400"
        >
          <Flex align="center" mb={2}>
            <Icon as={FaCalendarAlt} color="blue.400" mr={2} />
            <StatLabel>{t('journal.pl.statistics.totalLessons')}</StatLabel>
          </Flex>
          <StatNumber fontSize="2xl">{stats.totalLessons}</StatNumber>
          <StatHelpText mb={0}>
            <HStack>
              <Icon as={FaCalendarCheck} color="green.400" boxSize="0.9em" />
              <Text>{stats.completedLessons} {t('journal.pl.statistics.completed')}</Text>
            </HStack>
          </StatHelpText>
        </Stat>
        
        {/* Статистика по посещаемости */}
        <Stat 
          bg={statBgColor} 
          p={3} 
          borderRadius="lg" 
          boxShadow="sm"
          borderLeft="4px solid" 
          borderLeftColor="green.400"
        >
          <Flex align="center" mb={2}>
            <Icon as={FaPercentage} color="green.400" mr={2} />
            <StatLabel>{t('journal.pl.statistics.attendanceRate')}</StatLabel>
          </Flex>
          <StatNumber fontSize="2xl">
            {Math.round(stats.attendanceRate)}%
          </StatNumber>
          <StatHelpText>
            {stats.attendanceTrend !== 0 && (
              <Flex align="center">
                <StatArrow 
                  type={stats.attendanceTrend > 0 ? 'increase' : 'decrease'} 
                />
                <Text>
                  {Math.abs(Math.round(stats.attendanceTrend))}%
                </Text>
              </Flex>
            )}
          </StatHelpText>
        </Stat>
        
        {/* Статистика по студентам */}
        <Stat 
          bg={statBgColor} 
          p={3} 
          borderRadius="lg" 
          boxShadow="sm"
          borderLeft="4px solid" 
          borderLeftColor="purple.400"
        >
          <Flex align="center" mb={2}>
            <Icon as={FaUserGraduate} color="purple.400" mr={2} />
            <StatLabel>{t('journal.pl.statistics.totalStudents')}</StatLabel>
          </Flex>
          <StatNumber fontSize="2xl">{stats.totalStudents}</StatNumber>
          <StatHelpText mb={0}>
            <Text>
              ~ {stats.averageStudentsPerLesson} {t('journal.pl.statistics.perLesson')}
            </Text>
          </StatHelpText>
        </Stat>
        
        {/* Следующее занятие */}
        <Stat 
          bg={statBgColor} 
          p={3} 
          borderRadius="lg" 
          boxShadow="sm"
          borderLeft="4px solid" 
          borderLeftColor="orange.400"
        >
          <Flex align="center" mb={2}>
            <Icon as={FaClock} color="orange.400" mr={2} />
            <StatLabel>{t('journal.pl.statistics.nextLesson')}</StatLabel>
          </Flex>
          <StatNumber fontSize="xl">
            {stats.nextLessonDate 
              ? dayjs(stats.nextLessonDate).format('DD.MM.YYYY')
              : t('journal.pl.statistics.noUpcoming')
            }
          </StatNumber>
          <StatHelpText mb={0}>
            {stats.nextLessonDate && (
              <Text>
                {t('journal.pl.statistics.in')} {stats.daysUntilNextLesson} {t('journal.pl.statistics.days')}
              </Text>
            )}
          </StatHelpText>
        </Stat>
      </SimpleGrid>
      
      <Box
        bg={statBgColor}
        p={4}
        borderRadius="lg"
        boxShadow="sm"
        borderTop="1px solid"
        borderColor={borderColor}
      >
        <Text fontWeight="bold" mb={2}>
          {t('journal.pl.statistics.courseProgress')}
        </Text>
        <Progress 
          value={stats.percentageCompleted} 
          size="lg" 
          borderRadius="md"
          colorScheme={getProgressColor(stats.percentageCompleted)}
          mb={1}
          hasStripe
        />
        <Flex justify="space-between" fontSize="sm">
          <Text>
            {t('journal.pl.statistics.completed')}: {stats.completedLessons} / {stats.totalLessons}
          </Text>
          <Text fontWeight="medium">
            {Math.round(stats.percentageCompleted)}%
          </Text>
        </Flex>
      </Box>
    </Box>
  )
} 