import React from 'react'
import {
  Box,
  SimpleGrid,
  Stat,
  StatLabel,
  StatNumber,
  StatHelpText,
  useColorMode,
  Heading,
  Divider,
  Progress,
  VStack,
  HStack,
  Text,
  Badge
} from '@chakra-ui/react'
import { useTranslation } from 'react-i18next'
import { AttendanceStats } from '../hooks'

interface StatsCardProps {
  stats: AttendanceStats
}

export const StatsCard: React.FC<StatsCardProps> = ({ stats }) => {
  const { colorMode } = useColorMode()
  const { t } = useTranslation()

  const getBgColor = () => {
    return colorMode === 'dark' ? 'gray.700' : 'white'
  }

  const getProgressColor = (value: number) => {
    if (value > 80) return 'green'
    if (value > 50) return 'yellow'
    return 'red'
  }

  return (
    <Box
      p={5}
      borderRadius="lg"
      boxShadow="md"
      bg={getBgColor()}
      mb={6}
    >
      <Heading size="md" mb={4}>{t('journal.pl.attendance.stats.title')}</Heading>
      <Divider mb={4} />
      
      <SimpleGrid columns={{ base: 1, md: 2 }} spacing={5}>
        <Box>
          <SimpleGrid columns={{ base: 1, md: 2 }} spacing={5}>
            <Stat>
              <StatLabel>{t('journal.pl.attendance.stats.totalLessons')}</StatLabel>
              <StatNumber>{stats.totalLessons}</StatNumber>
            </Stat>
            
            <Stat>
              <StatLabel>{t('journal.pl.attendance.stats.averageAttendance')}</StatLabel>
              <StatNumber>{stats.averageAttendance.toFixed(1)}%</StatNumber>
              <Progress 
                value={stats.averageAttendance} 
                colorScheme={getProgressColor(stats.averageAttendance)} 
                size="sm" 
                mt={2}
              />
            </Stat>
          </SimpleGrid>
        </Box>
        
        <Box>
          <Stat>
            <StatLabel mb={3}>{t('journal.pl.attendance.stats.topStudents')}</StatLabel>
            <VStack align="stretch" spacing={2}>
              {stats.topStudents.map((student, index) => (
                <HStack key={index} justify="space-between">
                  <HStack>
                    <Badge 
                      colorScheme={index === 0 ? 'green' : index === 1 ? 'blue' : 'yellow'} 
                      fontSize="sm"
                      borderRadius="full" 
                      px={2}
                    >
                      {index + 1}
                    </Badge>
                    <Text fontWeight="medium">{student.name}</Text>
                  </HStack>
                  <Text>
                    {student.attendance} {t('journal.pl.common.of')} {stats.totalLessons} ({student.attendancePercent.toFixed(0)}%)
                  </Text>
                </HStack>
              ))}
              {stats.topStudents.length === 0 && (
                <Text color="gray.500">{t('journal.pl.attendance.stats.noData')}</Text>
              )}
            </VStack>
          </Stat>
        </Box>
        
      </SimpleGrid>
    </Box>
  )
} 