import React, { useEffect, useMemo, useRef, useState } from 'react'
import dayjs from 'dayjs'
import { generatePath, Link, useParams } from 'react-router-dom'
import { getNavigationValue, getFeatures } from '@brojs/cli'
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  Container,
  Box,
  Button,
  useToast,
  Toast,
  TableContainer,
  Table,
  Thead,
  Tr,
  Th,
  Tbody,
  Td,
  Text,
  AlertDialog,
  AlertDialogBody,
  AlertDialogContent,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogOverlay,
  useBreakpointValue,
} from '@chakra-ui/react'
import { AddIcon } 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 } from '../../components/xl-spinner'

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

const features = getFeatures('journal')

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

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

  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()
  const sorted = useMemo(
    () => [...(data?.body || [])]?.sort((a, b) => (a.date > b.date ? 1 : -1)),
    [data, data?.body],
  )

  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: dayjs(lessonToDelete?.date).format('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>
      <BreadcrumbsWrapper>
        <Breadcrumb>
          <BreadcrumbItem>
            <BreadcrumbLink as={Link} to={getNavigationValue('journal.main')}>
              {t('journal.pl.common.journal')}
            </BreadcrumbLink>
          </BreadcrumbItem>

          <BreadcrumbItem isCurrentPage>
            <BreadcrumbLink href="#">{t('journal.pl.common.course')}</BreadcrumbLink>
          </BreadcrumbItem>
        </Breadcrumb>
      </BreadcrumbsWrapper>
      <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}
              />
            ) : (
              <Button
                leftIcon={<AddIcon />}
                colorScheme="green"
                onClick={handleOpenForm}
              >
                {t('journal.pl.common.create')}
              </Button>
            )}
          </Box>
        )}
        
        {/* Статистика курса */}
        {!showForm && (
          <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>
        ) : (
          <TableContainer whiteSpace="wrap" pb={13}>
            <Table variant="striped" colorScheme="cyan">
              <Thead>
                <Tr>
                  {isTeacher(user) && (
                    <Th align="center" width={1}>
                      {t('journal.pl.lesson.link')}
                    </Th>
                  )}
                  <Th textAlign="center" width={1}>
                    {groupByDate ? t('journal.pl.lesson.time') : t('journal.pl.common.date')}
                  </Th>
                  <Th width="100%">{t('journal.pl.common.name')}</Th>
                  {isTeacher(user) && <Th>{t('journal.pl.lesson.action')}</Th>}
                  <Th isNumeric>{t('journal.pl.common.marked')}</Th>
                </Tr>
              </Thead>
              <Tbody>
                {lessonCalc?.map(({ data: lessons, date }) => (
                  <LessonItems
                    courseId={courseId}
                    date={date}
                    isTeacher={isTeacher(user)}
                    lessons={lessons}
                    setlessonToDelete={setlessonToDelete}
                    setEditLesson={handleEditLesson}
                    key={date}
                  />
                ))}
              </Tbody>
            </Table>
          </TableContainer>
        )}
      </Container>
    </>
  )
}

export default LessonList
