import React from 'react'
import {
  SimpleGrid,
  Stat,
  StatLabel,
  StatNumber,
  StatHelpText,
  Flex,
  HStack,
  Text,
  Icon,
  Badge
} from '@chakra-ui/react'
import { useTranslation } from 'react-i18next'
import { 
  FaGraduationCap, 
  FaChalkboardTeacher, 
  FaCalendarAlt, 
  FaUsers 
} from 'react-icons/fa'

import { CourseStats } from './useStats'

interface StatCardsProps {
  stats: CourseStats
  bgColor: string
}

export const StatCards: React.FC<StatCardsProps> = ({ stats, bgColor }) => {
  const { t } = useTranslation()

  return (
    <SimpleGrid columns={{ base: 1, sm: 2, md: 4 }} spacing={5} mb={5}>
      {/* Статистика по курсам */}
      <Stat 
        bg={bgColor} 
        p={3} 
        borderRadius="lg" 
        boxShadow="sm"
        borderLeft="4px solid" 
        borderLeftColor="blue.400"
      >
        <Flex align="center" mb={2}>
          <Icon as={FaGraduationCap} color="blue.400" mr={2} />
          <StatLabel>{t('journal.pl.overview.totalCourses')}</StatLabel>
        </Flex>
        <StatNumber fontSize="2xl">{stats.totalCourses}</StatNumber>
        <StatHelpText mb={0}>
          <HStack spacing={3} flexWrap="wrap">
            <Badge colorScheme="green">
              {stats.activeCourses} {t('journal.pl.overview.active')}
            </Badge>
            {stats.recentCoursesCount > 0 && (
              <Badge colorScheme="purple">
                +{stats.recentCoursesCount} {t('journal.pl.overview.new')}
              </Badge>
            )}
          </HStack>
        </StatHelpText>
      </Stat>
      
      {/* Статистика по урокам */}
      <Stat 
        bg={bgColor} 
        p={3} 
        borderRadius="lg" 
        boxShadow="sm"
        borderLeft="4px solid" 
        borderLeftColor="green.400"
      >
        <Flex align="center" mb={2}>
          <Icon as={FaCalendarAlt} color="green.400" mr={2} />
          <StatLabel>{t('journal.pl.overview.totalLessons')}</StatLabel>
        </Flex>
        <StatNumber fontSize="2xl">{stats.totalLessons}</StatNumber>
        <StatHelpText mb={0}>
          <HStack spacing={3} flexWrap="wrap">
            <Badge colorScheme="blue">
              {stats.completedLessons} {t('journal.pl.overview.completed')}
            </Badge>
            <Badge colorScheme="orange">
              {stats.upcomingLessons} {t('journal.pl.overview.upcoming')}
            </Badge>
          </HStack>
        </StatHelpText>
      </Stat>
      
      {/* Статистика по студентам */}
      <Stat 
        bg={bgColor} 
        p={3} 
        borderRadius="lg" 
        boxShadow="sm"
        borderLeft="4px solid" 
        borderLeftColor="purple.400"
      >
        <Flex align="center" mb={2}>
          <Icon as={FaUsers} color="purple.400" mr={2} />
          <StatLabel>{t('journal.pl.overview.totalStudents')}</StatLabel>
        </Flex>
        <StatNumber fontSize="2xl">{stats.totalStudents.size}</StatNumber>
        <StatHelpText mb={0}>
          <Text>
            {stats.averageAttendance > 0 ? 
              `~${Math.round(stats.averageAttendance)}% ${t('journal.pl.overview.attendance')}` : 
              t('journal.pl.overview.noAttendanceData')}
          </Text>
        </StatHelpText>
      </Stat>
      
      {/* Статистика по преподавателям */}
      <Stat 
        bg={bgColor} 
        p={3} 
        borderRadius="lg" 
        boxShadow="sm"
        borderLeft="4px solid" 
        borderLeftColor="orange.400"
      >
        <Flex align="center" mb={2}>
          <Icon as={FaChalkboardTeacher} color="orange.400" mr={2} />
          <StatLabel>{t('journal.pl.overview.totalTeachers')}</StatLabel>
        </Flex>
        <StatNumber fontSize="2xl">{stats.totalTeachers.size}</StatNumber>
        <StatHelpText mb={0}>
          <Text>
            {stats.activeCourses > 0 ? 
              `~${(stats.totalTeachers.size / Math.max(1, stats.activeCourses)).toFixed(1)} ${t('journal.pl.overview.perCourse')}` : 
              t('journal.pl.overview.noActiveData')}
          </Text>
        </StatHelpText>
      </Stat>
    </SimpleGrid>
  )
} 