import React from 'react'
import {
  Box,
  Heading,
  SimpleGrid,
  useColorModeValue,
  Card
} from '@chakra-ui/react'
import { useTranslation } from 'react-i18next'

import { Course, Lesson } from '../../../__data__/model'
import {
  useStats,
  StatCards,
  StudentAttendanceList,
  CourseAttendanceList,
  ActivityStats
} from './statistics'

interface CoursesOverviewProps {
  courses: Course[]
  isLoading: boolean
  // Детализированные данные с уроками (если есть)
  lessonsByCourse?: Record<string, Lesson[]>
}

export const CoursesOverview: React.FC<CoursesOverviewProps> = ({ 
  courses = [], 
  isLoading = false,
  lessonsByCourse = {} 
}) => {
  const { t } = useTranslation()
  const bgColor = useColorModeValue('white', 'gray.700')
  
  // Используем хук для расчета статистики
  const stats = useStats(courses, lessonsByCourse)
  
  // Если загрузка или нет данных, возвращаем null
  if (isLoading || !courses.length) {
    return null
  }
  
  return (
    <Box mb={6} py={3}>
      <Heading size="md" mb={4}>
        {t('journal.pl.overview.title')}
      </Heading>
      
      {/* Основные показатели */}
      <StatCards stats={stats} bgColor={bgColor} />
      
      {/* Дополнительная статистика */}
      <SimpleGrid columns={{ base: 1, md: 2 }} spacing={5} mb={5}>
        {/* Статистика посещаемости и топ-студенты */}
        <Card bg={bgColor} p={4} borderRadius="lg" boxShadow="sm">
          <StudentAttendanceList 
            students={stats.topStudents} 
            title={t('journal.pl.overview.topStudents')} 
          />
          
          {stats.topCoursesByAttendance.length > 0 && (
            <>
              <Box h={3} />
              <CourseAttendanceList courses={stats.topCoursesByAttendance} />
            </>
          )}
        </Card>
        
        {/* Статистика деятельности и активности */}
        <Card bg={bgColor} p={4} borderRadius="lg" boxShadow="sm">
          <ActivityStats stats={stats} />
        </Card>
      </SimpleGrid>
    </Box>
  )
} 