import React, { useEffect, useMemo, useRef, useState } from 'react'
import dayjs, { formatDate } from '../../utils/dayjs-config'
import { generatePath, Link, useParams } from 'react-router-dom'
import { getNavigationValue, getFeatures } from '@brojs/cli'
import {
  Container,
  Box,
  Button,
  useToast,
  Toast,
  TableContainer,
  Table,
  Thead,
  Tr,
  Th,
  Tbody,
  Td,
  Text,
  AlertDialog,
  AlertDialogBody,
  AlertDialogContent,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogOverlay,
  useBreakpointValue,
  Flex,
  Menu,
  MenuButton,
  MenuList,
  MenuItem,
  useColorMode,
  Portal,
} from '@chakra-ui/react'
import { AddIcon, EditIcon } from '@chakra-ui/icons'
import { useTranslation } from 'react-i18next'

import { useAppSelector } from '../../__data__/store'
import { api } from '../../__data__/api/api'
import { isTeacher } from '../../utils/user'
import { Lesson } from '../../__data__/model'
import { XlSpinner, useSetBreadcrumbs } from '../../components'
import { qrCode } from '../../assets'

import { LessonForm } from './components/lessons-form'
import { Bar } from './components/bar'
import { LessonItems } from './components/lesson-items'
import { CourseStatistics } from './components/statistics'

const features = getFeatures('journal')

const barFeature = features?.['lesson.bar']
const groupByDate = features?.['group.by.date']
const courseStatistics = features?.['course.statistics']

const LessonList = () => {
  const { courseId } = useParams()
  const user = useAppSelector((s) => s.user)
  const { data, isLoading, error, isSuccess } = api.useLessonListQuery(courseId)
  const { data: courseData } = api.useGetCourseByIdQuery(courseId)
  const [generateLessonsMutation, {
    data: generateLessons, 
    isLoading: isLoadingGenerateLessons,
    error: errorGenerateLessons,
    isSuccess: isSuccessGenerateLessons
  }, ] = api.useGenerateLessonsMutation()
  const { colorMode } = useColorMode()

  const [createLesson, crLQuery] = api.useCreateLessonMutation()
  const [deleteLesson, deletingRqst] = api.useDeleteLessonMutation()
  const [updateLesson, updateLessonRqst] = api.useUpdateLessonMutation()
  const [showForm, setShowForm] = useState(false)
  const [lessonToDelete, setlessonToDelete] = useState<Lesson>(null)
  const cancelRef = React.useRef()
  const toast = useToast()
  const toastRef = useRef(null)
  const createdLessonRef = useRef(null)
  const [editLesson, setEditLesson] = useState<Lesson>(null)
  const [suggestedLessonToCreate, setSuggestedLessonToCreate] = useState(null)
  const { t } = useTranslation()
  
  // Устанавливаем хлебные крошки для страницы списка уроков
  useSetBreadcrumbs([
    {
      title: t('journal.pl.breadcrumbs.home'),
      path: '/'
    },
    {
      title: courseData?.name || t('journal.pl.breadcrumbs.course'),
      isCurrentPage: true
    }
  ])
  
  const sorted = useMemo(
    () => [...(data?.body || [])]?.sort((a, b) => (a.date > b.date ? 1 : -1)),
    [data, data?.body],
  )

  // Найдем максимальное количество студентов среди всех уроков
  const maxStudents = useMemo(() => {
    if (!sorted || sorted.length === 0) return 1
    const max = Math.max(...sorted.map(lesson => lesson.students?.length || 0))
    return max > 0 ? max : 1 // Избегаем деления на ноль
  }, [sorted])

  // Функция для определения цвета на основе посещаемости
  const getAttendanceColor = (attendance: number) => {
    const percentage = (attendance / maxStudents) * 100
    if (percentage > 80) return { bg: 'green.100', color: 'green.800', dark: { bg: 'green.800', color: 'green.100' } }
    if (percentage > 60) return { bg: 'teal.100', color: 'teal.800', dark: { bg: 'teal.800', color: 'teal.100' } }
    if (percentage > 40) return { bg: 'yellow.100', color: 'yellow.800', dark: { bg: 'yellow.800', color: 'yellow.100' } }
    if (percentage > 20) return { bg: 'orange.100', color: 'orange.800', dark: { bg: 'orange.800', color: 'orange.100' } }
    return { bg: 'red.100', color: 'red.800', dark: { bg: 'red.800', color: 'red.100' } }
  }

  const lessonCalc = useMemo(() => {
    if (!isSuccess) {
      return []
    }

    if (!groupByDate) {
      return [{ date: '', data: sorted }]
    }

    const lessonsData = []
    for (let i = 0; i < sorted.length; i++) {
      const element = sorted[i]
      const find = lessonsData.find(
        (item) => dayjs(element.date).diff(dayjs(item.date), 'day') === 0,
      )

      if (find) {
        find.data.push(element)
      } else {
        lessonsData.push({
          date: element.date,
          data: [element],
        })
      }
    }

    return lessonsData.sort((a, b) => (a.date < b.date ? 1 : -1))
  }, [groupByDate, isSuccess, sorted])

  useEffect(() => {
    if (isSuccessGenerateLessons) {
      console.log(generateLessons)
      
      // Проверяем корректность ответа API
      if (typeof generateLessons?.body === 'string') {
        toast({
          title: t('journal.pl.lesson.aiGenerationError'),
          description: t('journal.pl.lesson.tryAgainLater'),
          status: 'error',
          duration: 5000,
          isClosable: true,
        });
      }
    }
  }, [isSuccessGenerateLessons, generateLessons])

  useEffect(() => {
    if (errorGenerateLessons) {
      toast({
        title: t('journal.pl.lesson.aiGenerationError'),
        description: t('journal.pl.lesson.tryAgainLater'),
        status: 'error',
        duration: 5000,
        isClosable: true,
      });
    }
  }, [errorGenerateLessons])

  const onSubmit = (lessonData) => {
    toastRef.current = toast({
      title: t('journal.pl.common.sending'),
      status: 'loading',
      duration: 9000,
    })
    createdLessonRef.current = lessonData
    if (editLesson) updateLesson(lessonData)
    else createLesson({ courseId, ...lessonData })
  }

  useEffect(() => {
    if (deletingRqst.isError) {
      toast({
        title: (deletingRqst.error as any)?.error,
        status: 'error',
        duration: 3000,
      })
    }

    if (deletingRqst.isSuccess) {
      const lesson = { ...lessonToDelete }
      toast({
        status: 'warning',
        duration: 9000,
        render: ({ id, ...toastProps }) => (
          <Toast
            {...toastProps}
            id={id}
            title={
              <>
                <Box pb={3}>
                  <Text fontSize="xl">{t('journal.pl.lesson.deletedMessage', { name: lesson.name })}</Text>
                </Box>
                <Button
                  onClick={() => {
                    createLesson({ courseId, ...lesson })
                    toast.close(id)
                  }}
                >
                  {t('journal.pl.common.restored')}
                </Button>
              </>
            }
          />
        ),
      })
      setlessonToDelete(null)
    }
  }, [deletingRqst.isLoading, deletingRqst.isSuccess, deletingRqst.isError])

  useEffect(() => {
    if (crLQuery.isSuccess) {
      const toastProps = {
        title: t('journal.pl.lesson.created'),
        description: t('journal.pl.lesson.successMessage', { name: createdLessonRef.current?.name }),
        status: 'success' as const,
        duration: 9000,
        isClosable: true,
      }
      if (toastRef.current) toast.update(toastRef.current, toastProps)
      else toast(toastProps)
      setShowForm(false)
    }
  }, [crLQuery.isSuccess])

  useEffect(() => {
    if (updateLessonRqst.isSuccess) {
      const toastProps = {
        title: t('journal.pl.lesson.updated'),
        description: t('journal.pl.lesson.updateMessage', { name: createdLessonRef.current?.name }),
        status: 'success' as const,
        duration: 9000,
        isClosable: true,
      }
      if (toastRef.current) toast.update(toastRef.current, toastProps)
      else toast(toastProps)
      setShowForm(false)
    }
  }, [updateLessonRqst.isSuccess])

  // Обработчик выбора предложения ИИ в форме
  const handleSelectAiSuggestion = (suggestion) => {
    setSuggestedLessonToCreate(suggestion)
  }

  // Очищаем выбранную сгенерированную лекцию при закрытии формы
  const handleCancelForm = () => {
    setShowForm(false)
    setEditLesson(null)
    setSuggestedLessonToCreate(null)
    
    // Сбрасываем флаги генерации, чтобы при повторном открытии формы
    // генерация запускалась снова при необходимости
    // (особенно если была ошибка в предыдущей генерации)
  }

  // Обработчик открытия формы создания новой лекции
  const handleOpenForm = () => {
    setShowForm(true)
    
    // Запускаем генерацию лекций только при открытии формы создания новой лекции
    // и если генерация ещё не была запущена или предыдущая попытка завершилась с ошибкой
    const shouldGenerateAgain = !generateLessons || 
                               typeof generateLessons?.body === 'string' ||
                               errorGenerateLessons;
                               
    if (isTeacher(user) && !editLesson && (!isLoadingGenerateLessons && shouldGenerateAgain)) {
      generateLessonsMutation(courseId)
    }
  }

  // Обработчик редактирования существующей лекции
  const handleEditLesson = (lesson) => {
    setEditLesson(lesson)
    setShowForm(true)
    // Не запускаем генерацию при редактировании
  }

  // Обработчик повторной генерации предложений ИИ
  const handleRetryAiGeneration = () => {
    if (isTeacher(user) && !isLoadingGenerateLessons) {
      generateLessonsMutation(courseId)
    }
  }

  // Добавляем определение размера экрана
  const isMobile = useBreakpointValue({ base: true, md: false })

  if (isLoading) {
    return <XlSpinner />
  }

  return (
    <>
      <AlertDialog
        isOpen={Boolean(lessonToDelete)}
        leastDestructiveRef={cancelRef}
        onClose={() => setlessonToDelete(null)}
      >
        <AlertDialogOverlay>
          <AlertDialogContent>
            <AlertDialogHeader fontSize="lg" fontWeight="bold">
              {t('journal.pl.lesson.deleteConfirm', { date: formatDate(lessonToDelete?.date, 'DD.MM.YY') })}
            </AlertDialogHeader>

            <AlertDialogBody>
              {t('journal.pl.lesson.deleteWarning')}
            </AlertDialogBody>

            <AlertDialogFooter>
              <Button
                isDisabled={deletingRqst.isLoading}
                ref={cancelRef}
                onClick={() => setlessonToDelete(null)}
              >
                {t('journal.pl.cancel')}
              </Button>
              <Button
                colorScheme="red"
                loadingText=""
                isLoading={deletingRqst.isLoading}
                onClick={() => deleteLesson(lessonToDelete.id)}
                ml={3}
              >
                {t('journal.pl.delete')}
              </Button>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialogOverlay>
      </AlertDialog>
      <Container maxW="container.xl" position="relative">
        {isTeacher(user) && (
          <Box mt="15" mb="15">
            {showForm ? (
              <LessonForm
                key={editLesson?.id || 'new-lesson'}
                isLoading={crLQuery.isLoading}
                onSubmit={onSubmit}
                onCancel={handleCancelForm}
                error={(crLQuery.error as any)?.error}
                lesson={editLesson || suggestedLessonToCreate || undefined}
                title={editLesson ? t('journal.pl.lesson.editTitle') : t('journal.pl.lesson.createTitle')}
                nameButton={editLesson ? t('journal.pl.edit') : t('journal.pl.common.create')}
                aiSuggestions={generateLessons?.body}
                isLoadingAiSuggestions={isLoadingGenerateLessons}
                onSelectAiSuggestion={handleSelectAiSuggestion}
                selectedAiSuggestion={suggestedLessonToCreate}
                onRetryAiGeneration={handleRetryAiGeneration}
                existingLessons={data?.body?.map(lesson => ({
                  date: lesson.date,
                  name: lesson.name
                }))}
              />
            ) : (
              <Button
                leftIcon={<AddIcon />}
                colorScheme="green"
                onClick={handleOpenForm}
              >
                {t('journal.pl.common.create')}
              </Button>
            )}
          </Box>
        )}
        
        {/* Статистика курса */}
        {!showForm && courseStatistics && (
          <CourseStatistics lessons={sorted} isLoading={isLoading} />
        )}
        
        {barFeature && sorted?.length > 1 && (
          <Box height="300">
            <Bar
              data={sorted.map((lesson, index) => ({
                lessonIndex: `#${index + 1}`,
                count: lesson.students.length,
              }))}
            />
          </Box>
        )}
        {isMobile ? (
          <Box pb={13}>
            {lessonCalc?.map(({ data: lessons, date }) => (
              <LessonItems
                courseId={courseId}
                date={date}
                isTeacher={isTeacher(user)}
                lessons={lessons}
                setlessonToDelete={setlessonToDelete}
                setEditLesson={handleEditLesson}
                key={date}
              />
            ))}
          </Box>
        ) : (
          <Box pb={13}>
            {lessonCalc?.map(({ data: lessons, date }) => (
              <Box key={date} mb={6}>
                {date && (
                  <Box 
                    p={3} 
                    mb={4} 
                    bg="cyan.50" 
                    borderRadius="md"
                    _dark={{ bg: "cyan.900" }}
                    boxShadow="sm"
                  >
                    <Text fontWeight="bold" fontSize="lg">
                      {formatDate(date, 'DD MMMM YYYY')}
                    </Text>
                  </Box>
                )}
                <Box>
                  {lessons.map((lesson, index) => (
                    <Box 
                      key={lesson.id} 
                      borderRadius="lg" 
                      boxShadow="md"
                      bg="white"
                      _dark={{ bg: "gray.700" }}
                      transition="all 0.3s"
                      _hover={{ 
                        transform: "translateX(5px)", 
                        boxShadow: "lg" 
                      }}
                      overflow="hidden"
                      position="relative"
                      mb={4}
                      animation={`slideIn 0.6s ease-out ${index * 0.15}s both`}
                      sx={{
                        '@keyframes slideIn': {
                          '0%': {
                            opacity: 0,
                            transform: 'translateX(-30px)'
                          },
                          '100%': {
                            opacity: 1,
                            transform: 'translateX(0)'
                          }
                        }
                      }}
                    >
                      <Flex direction={{ base: "column", sm: "row" }}>
                        {/* QR код и ссылка - левая часть карточки */}
                        {isTeacher(user) && (
                          <Link
                            to={`${getNavigationValue('journal.main')}/lesson/${courseId}/${lesson.id}`}
                          >
                            <Box 
                              p={4}
                              bg="cyan.500" 
                              _dark={{ bg: "cyan.600" }} 
                              color="white"
                              display="flex"
                              alignItems="center"
                              justifyContent="center"
                              transition="all 0.2s"
                              _hover={{ bg: "cyan.600", _dark: { bg: "cyan.700" } }}
                              height="100%"
                              minW="150px"
                            >
                              <Box 
                                mr={0}
                                bg="white" 
                                borderRadius="md" 
                                p={2}
                                display="flex"
                              >
                                <img width={32} src={qrCode} alt="QR код" />
                              </Box>
                            </Box>
                          </Link>
                        )}
                        
                        {/* Содержимое карточки */}
                        <Box p={5} w="100%" display="flex" flexDirection="column" justifyContent="space-between">
                          <Flex mb={3} justify="space-between" align="center">
                            {/* Название урока */}
                            <Text fontWeight="bold" fontSize="xl" lineHeight="1.4" flex="1">
                              {lesson.name}
                            </Text>
                            
                            <Text fontSize="sm" color="gray.500" _dark={{ color: "gray.300" }} ml={3} whiteSpace="nowrap">
                              {formatDate(lesson.date, groupByDate ? 'HH:mm' : 'HH:mm DD.MM.YY')}
                            </Text>
                          </Flex>
                          
                          {/* Нижняя часть с метками и действиями */}
                          <Flex justifyContent="space-between" alignItems="center" mt={1}>
                            <Flex align="center">
                              <Text fontSize="sm" mr={2}>
                                {t('journal.pl.common.marked')}:
                              </Text>
                              <Text 
                                px={2} 
                                py={1} 
                                bg={getAttendanceColor(lesson.students.length).bg}
                                color={getAttendanceColor(lesson.students.length).color}
                                _dark={{ 
                                  bg: getAttendanceColor(lesson.students.length).dark.bg, 
                                  color: getAttendanceColor(lesson.students.length).dark.color 
                                }}
                                borderRadius="md"
                                fontWeight="bold"
                                fontSize="sm"
                              >
                                {lesson.students.length}
                              </Text>
                            </Flex>
                            
                            {isTeacher(user) && (
                              <Menu>
                                <MenuButton 
                                  as={Button} 
                                  size="sm" 
                                  colorScheme="cyan" 
                                  variant="ghost"
                                  rightIcon={<EditIcon />}
                                >
                                  {t('journal.pl.edit')}
                                </MenuButton>
                                <Portal>
                                  <MenuList zIndex={1000}>
                                    <MenuItem
                                      onClick={() => handleEditLesson(lesson)}
                                      icon={<EditIcon />}
                                    >
                                      {t('journal.pl.edit')}
                                    </MenuItem>
                                    <MenuItem 
                                      onClick={() => setlessonToDelete(lesson)}
                                      color="red.500"
                                    >
                                      {t('journal.pl.delete')}
                                    </MenuItem>
                                  </MenuList>
                                </Portal>
                              </Menu>
                            )}
                          </Flex>
                        </Box>
                      </Flex>
                    </Box>
                  ))}
                </Box>
              </Box>
            ))}
          </Box>
        )}
      </Container>
    </>
  )
}

export default LessonList