import React from 'react'
import {
  VStack,
  HStack,
  Box,
  Text,
  Progress,
  Badge,
  Avatar,
  Tooltip,
  Flex
} from '@chakra-ui/react'
import { useTranslation } from 'react-i18next'
import { StarIcon } from '@chakra-ui/icons'

import { StudentAttendance } from './useStats'

interface StudentAttendanceListProps {
  students: StudentAttendance[]
  title: string
}

export const StudentAttendanceList: React.FC<StudentAttendanceListProps> = ({
  students,
  title
}) => {
  const { t } = useTranslation()
  
  // Определяем цвет для прогресса в зависимости от значения
  const getProgressColor = (value: number) => {
    if (value > 80) return 'green'
    if (value > 50) return 'blue'
    if (value > 30) return 'yellow'
    return 'red'
  }
  
  if (!students?.length) {
    return (
      <Text color="gray.500" fontSize="sm" textAlign="center">
        {t('journal.pl.overview.noAttendanceData')}
      </Text>
    )
  }
  
  return (
    <Box>
      <Text fontWeight="medium" fontSize="sm" mb={2} display="flex" alignItems="center">
        <StarIcon color="yellow.400" mr={2} />
        {title}
      </Text>
      
      <Text fontSize="xs" color="gray.500" mb={2}>
        {t('journal.pl.overview.pastLessonsStats')}
      </Text>
      
      <VStack align="stretch" spacing={3}>
        {students.map((student, index) => (
          <HStack key={student.id} spacing={3}>
            <Avatar 
              size="sm" 
              name={student.name} 
              src={student.avatarUrl} 
              bg={index < 3 ? ['yellow.400', 'gray.400', 'orange.300'][index] : 'blue.300'}
            />
            <Box flex="1">
              <Flex justify="space-between">
                <Tooltip label={student.name}>
                  <Text fontSize="sm" fontWeight="medium" isTruncated maxW="150px">
                    {student.name}
                  </Text>
                </Tooltip>
                <Tooltip label={`${student.attended} из ${student.total} занятий`}>
                  <Text fontSize="xs" color="gray.500">
                    {student.attended}/{student.total}
                  </Text>
                </Tooltip>
              </Flex>
              <Progress 
                value={student.percent} 
                size="xs" 
                colorScheme={getProgressColor(student.percent)}
                borderRadius="full"
                mt={1}
              />
            </Box>
            <Badge colorScheme={getProgressColor(student.percent)}>
              {Math.round(student.percent)}%
            </Badge>
          </HStack>
        ))}
      </VStack>
      
      <Text fontSize="xs" color="gray.500" mt={2} fontStyle="italic">
        {t('journal.pl.overview.attendanceHelp')}
      </Text>
    </Box>
  )
}