import React from 'react'
import { useParams } from 'react-router-dom'
import {
  Box,
  Heading,
  Container,
  useColorMode,
  Flex,
  Spacer,
  Badge
} from '@chakra-ui/react'
import { useTranslation } from 'react-i18next'

import { PageLoader } from '../../components/page-loader/page-loader'
import { useSetBreadcrumbs } from '../../components'
import { useAttendanceData, useAttendanceStats } from './hooks'
import { AttendanceTable, StatsCard } from './components'

export const Attendance = () => {
  const { courseId } = useParams()
  const { colorMode } = useColorMode()
  const { t } = useTranslation()
  const data = useAttendanceData(courseId)
  const stats = useAttendanceStats(data)
  
  // Устанавливаем хлебные крошки
  useSetBreadcrumbs([
    {
      title: t('journal.pl.breadcrumbs.home'),
      path: '/'
    },
    {
      title: data.courseInfo?.name || t('journal.pl.breadcrumbs.course'),
      path: `/lessons-list/${courseId}`
    },
    {
      title: t('journal.pl.breadcrumbs.attendance'),
      isCurrentPage: true
    }
  ])

  if (data.isLoading) {
    return <PageLoader />
  }

  return (
    <Container maxW="container.xl" p={1}>
      <Flex alignItems="center" mb={6}>
        <Box>
          <Heading size="lg" mb={2}>{data.courseInfo?.name}</Heading>
          <Badge colorScheme="blue">
            {data.students.length} {t('journal.pl.common.students')} • {data.teachers.length} {t('journal.pl.common.teachers')}
          </Badge>
        </Box>
        <Spacer />
      </Flex>

      <StatsCard stats={stats} />
      
      <Box 
        bg={colorMode === 'dark' ? 'gray.800' : 'gray.50'} 
        p={4} 
        borderRadius="lg"
        boxShadow="sm"
      >
        <AttendanceTable data={data} />
      </Box>
    </Container>
  )
}