import React, { useState, useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import { useNavigate, useParams, Link } from 'react-router-dom'
import {
  Box,
  Heading,
  Table,
  Input,
  Text,
  Button,
  HStack,
  VStack,
  Badge,
  Progress,
  Grid,
  SimpleGrid,
  Select,
  createListCollection,
} from '@chakra-ui/react'
import { getFeatureValue } from '@brojs/cli'
import {
  useGetChainsQuery,
  useGetChainSubmissionsQuery,
  useGetSystemStatsV2Query,
  useGetUserSubmissionsQuery,
} from '../../__data__/api/api'
import { LoadingSpinner } from '../../components/LoadingSpinner'
import { ErrorAlert } from '../../components/ErrorAlert'
import { EmptyState } from '../../components/EmptyState'
import { StatusBadge } from '../../components/StatusBadge'
import { URLs } from '../../__data__/urls'
import type {
  ChallengeSubmission,
  SubmissionStatus,
  ChallengeTask,
  ChallengeUser,
} from '../../types/challenge'

export const SubmissionsPage: React.FC = () => {
  const { t } = useTranslation()
  const navigate = useNavigate()
  const { chainId } = useParams<{ chainId?: string }>()

  // Проверяем feature flags
  const featureValue = getFeatureValue('challenge-admin', 'use-chain-submissions-api')
  const useNewApi = featureValue?.value === 'true'
  const pollingIntervalFeatureValue = getFeatureValue(
    'challenge-admin',
    'submissions-polling-interval-ms'
  )
  const pollingIntervalMs = (() => {
    const rawValue = pollingIntervalFeatureValue?.value ?? ''
    const parsed = Number.parseInt(rawValue, 10)
    return Number.isFinite(parsed) && parsed > 0 ? parsed : 1200
  })()

  // Состояние для выбранного пользователя и фильтров
  const [selectedUserId, setSelectedUserId] = useState<string | null>(null)
  const [searchQuery, setSearchQuery] = useState('')
  const [statusFilter, setStatusFilter] = useState<SubmissionStatus | 'all'>('all')

  // Получаем список цепочек
  const {
    data: chains,
    isLoading: isChainsLoading,
    error: chainsError,
    refetch: refetchChains,
  } = useGetChainsQuery()

  // Новый API: получаем данные по цепочке через новый эндпоинт
  const {
    data: chainData,
    isLoading: isChainDataLoading,
    error: chainDataError,
    refetch: refetchChainData,
  } = useGetChainSubmissionsQuery(
    {
      chainId: chainId!,
      userId: selectedUserId || undefined,
      status: statusFilter !== 'all' ? statusFilter : undefined,
    },
    {
      skip: !chainId || !useNewApi,
      pollingInterval: pollingIntervalMs,
    }
  )

  // Старый API: получаем общую статистику и submissions отдельно
  const {
    data: stats,
    isLoading: isStatsLoading,
    error: statsError,
    refetch: refetchStats,
  } = useGetSystemStatsV2Query(undefined, {
    skip: !chainId || useNewApi,
  })

  const {
    data: submissions,
    isLoading: isSubmissionsLoading,
    error: submissionsError,
    refetch: refetchSubmissions,
  } = useGetUserSubmissionsQuery(
    { userId: selectedUserId!, taskId: undefined },
    { skip: !selectedUserId || useNewApi }
  )

  const isLoading =
    isChainsLoading ||
    (chainId && useNewApi && isChainDataLoading) ||
    (chainId && !useNewApi && isStatsLoading) ||
    (selectedUserId && !useNewApi && isSubmissionsLoading)

  const error = chainsError || (useNewApi ? chainDataError : statsError || submissionsError)

  const handleRetry = () => {
    refetchChains()
    if (chainId) {
      if (useNewApi) {
        refetchChainData()
      } else {
        refetchStats()
        if (selectedUserId) {
          refetchSubmissions()
        }
      }
    }
  }

  // Получаем данные выбранной цепочки из списка chains (для старого API)
  const selectedChain = useMemo(() => {
    if (!chainId || !chains) return null
    return chains.find((c) => c.id === chainId) || null
  }, [chainId, chains])

  // Получаем taskIds из текущей цепочки (для старого API)
  const chainTaskIds = useMemo(() => {
    if (!selectedChain) return new Set<string>()
    return new Set(selectedChain.tasks.map((t) => t.id))
  }, [selectedChain])

  // Старый API: фильтруем участников - только те, кто имеет прогресс в этой цепочке
  const chainParticipantsOld = useMemo(() => {
    if (!stats?.activeParticipants || !chainId || useNewApi) return []

    return stats.activeParticipants
      .map((participant) => {
        const chainProgress = participant.chainProgress?.find((cp) => cp.chainId === chainId)
        return {
          ...participant,
          progressPercent: chainProgress?.progressPercent ?? 0,
          completedTasks: chainProgress?.completedTasks ?? 0,
          totalTasks: selectedChain?.tasks.length ?? 0,
        }
      })
      .sort((a, b) => a.progressPercent - b.progressPercent)
  }, [stats?.activeParticipants, chainId, selectedChain, useNewApi])

  // Старый API: фильтруем submissions только по заданиям из текущей цепочки
  const filteredSubmissionsOld = useMemo(() => {
    if (!submissions || chainTaskIds.size === 0 || useNewApi) return []

    const normalizedSearchQuery = (searchQuery ?? '').toLowerCase()

    return submissions.filter((submission) => {
      const rawTask = submission.task as ChallengeTask | string | undefined
      const taskId =
        rawTask && typeof rawTask === 'object' && 'id' in rawTask
          ? rawTask.id
          : typeof rawTask === 'string'
            ? rawTask
            : ''

      if (!chainTaskIds.has(taskId)) return false

      const rawUser = submission.user as ChallengeUser | string | undefined
      const nickname =
        rawUser && typeof rawUser === 'object' && 'nickname' in rawUser
          ? (rawUser.nickname ?? '')
          : ''

      const title =
        rawTask && typeof rawTask === 'object' && 'title' in rawTask
          ? (rawTask.title ?? '')
          : ''

      const matchesSearch =
        nickname.toLowerCase().includes(normalizedSearchQuery) ||
        title.toLowerCase().includes(normalizedSearchQuery)

      const matchesStatus = statusFilter === 'all' || submission.status === statusFilter

      return matchesSearch && matchesStatus
    })
  }, [submissions, chainTaskIds, searchQuery, statusFilter, useNewApi])

  // Новый API: фильтруем submissions по поисковому запросу (статус уже отфильтрован на сервере)
  const filteredSubmissionsNew = useMemo(() => {
    if (!chainData?.submissions || !useNewApi) return []

    const normalizedSearchQuery = (searchQuery ?? '').toLowerCase()
    if (!normalizedSearchQuery) return chainData.submissions

    return chainData.submissions.filter((submission) => {
      const rawUser = submission.user as ChallengeUser | string | undefined
      const rawTask = submission.task as ChallengeTask | string | undefined

      const nickname =
        rawUser && typeof rawUser === 'object' && 'nickname' in rawUser
          ? (rawUser.nickname ?? '')
          : typeof rawUser === 'string'
            ? rawUser
            : ''

      const title =
        rawTask && typeof rawTask === 'object' && 'title' in rawTask
          ? (rawTask.title ?? '')
          : typeof rawTask === 'string'
            ? rawTask
            : ''

      return (
        nickname.toLowerCase().includes(normalizedSearchQuery) ||
        title.toLowerCase().includes(normalizedSearchQuery)
      )
    })
  }, [chainData?.submissions, searchQuery, useNewApi])

  // Выбираем данные в зависимости от фичи
  const filteredSubmissions = useNewApi ? filteredSubmissionsNew : filteredSubmissionsOld

  // Сортируем участников по прогрессу
  const sortedParticipants = useMemo(() => {
    if (useNewApi) {
      if (!chainData?.participants) return []
      return [...chainData.participants].sort((a, b) => a.progressPercent - b.progressPercent)
    } else {
      return chainParticipantsOld
    }
  }, [chainData?.participants, chainParticipantsOld, useNewApi])

  const formatDate = (dateStr: string) => {
    return new Date(dateStr).toLocaleString('ru-RU', {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
    })
  }

  const getCheckTime = (submission: ChallengeSubmission) => {
    if (!submission.checkedAt) return '—'
    const submitted = new Date(submission.submittedAt).getTime()
    const checked = new Date(submission.checkedAt).getTime()
    const diff = Math.round((checked - submitted) / 1000)
    return t('challenge.admin.submissions.check.time', { time: diff })
  }

  const statusOptions = createListCollection({
    items: [
      { label: t('challenge.admin.submissions.status.all'), value: 'all' },
      { label: t('challenge.admin.submissions.status.accepted'), value: 'accepted' },
      { label: t('challenge.admin.submissions.status.needs.revision'), value: 'needs_revision' },
      { label: t('challenge.admin.submissions.status.in.progress'), value: 'in_progress' },
      { label: t('challenge.admin.submissions.status.pending'), value: 'pending' },
    ],
  })

  if (isLoading) {
    return <LoadingSpinner message={t('challenge.admin.submissions.loading')} />
  }

  if (error) {
    return <ErrorAlert message={t('challenge.admin.submissions.load.error')} onRetry={handleRetry} />
  }

  // Если chainId не указан - показываем выбор цепочки
  if (!chainId) {
    return (
      <Box>
        <Box mb={6}>
          <Heading mb={2}>{t('challenge.admin.submissions.title')}</Heading>
          <Text color="gray.600" fontSize="sm">
            {t('challenge.admin.submissions.select.chain')}
          </Text>
        </Box>

        {chains && chains.length > 0 ? (
          <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} gap={6}>
            {chains.map((chain) => (
              <Link key={chain.id} to={URLs.submissionsChain(chain.id)} style={{ textDecoration: 'none' }}>
                <Box
                  p={6}
                  bg="white"
                  borderRadius="lg"
                  boxShadow="sm"
                  borderWidth="1px"
                  borderColor="gray.200"
                  _hover={{
                    boxShadow: 'md',
                    borderColor: 'teal.400',
                    transform: 'translateY(-2px)',
                  }}
                  transition="all 0.2s"
                  cursor="pointer"
                  height="100%"
                >
                  <VStack align="start" gap={3}>
                    <Heading size="md" color="teal.600">
                      {chain.name}
                    </Heading>
                    <HStack>
                      <Badge colorPalette="teal" size="lg">
                        {chain.tasks.length} {t('challenge.admin.submissions.chain.tasks')}
                      </Badge>
                      {!chain.isActive && (
                        <Badge colorPalette="gray" size="lg">
                          {t('challenge.admin.chains.list.status.inactive')}
                        </Badge>
                      )}
                    </HStack>
                    <Text fontSize="sm" color="gray.600" mt={2}>
                      {t('challenge.admin.submissions.chain.click')}
                    </Text>
                  </VStack>
                </Box>
              </Link>
            ))}
          </SimpleGrid>
        ) : (
          <EmptyState
            title={t('challenge.admin.submissions.no.chains.title')}
            description={t('challenge.admin.submissions.no.chains.description')}
          />
        )}
      </Box>
    )
  }

  // Если цепочка выбрана но данных нет
  if (useNewApi && !chainData) {
    return (
      <Box>
        <Link to={URLs.submissions} style={{ textDecoration: 'none', color: '#319795' }}>
          <Text fontSize="sm" _hover={{ textDecoration: 'underline' }} mb={4}>
            ← {t('challenge.admin.submissions.back.to.chains')}
          </Text>
        </Link>
        <ErrorAlert message={t('challenge.admin.common.not.found')} onRetry={handleRetry} />
      </Box>
    )
  }

  if (!useNewApi && !selectedChain) {
    return (
      <Box>
        <Link to={URLs.submissions} style={{ textDecoration: 'none', color: '#319795' }}>
          <Text fontSize="sm" _hover={{ textDecoration: 'underline' }} mb={4}>
            ← {t('challenge.admin.submissions.back.to.chains')}
          </Text>
        </Link>
        <ErrorAlert message={t('challenge.admin.common.not.found')} onRetry={handleRetry} />
      </Box>
    )
  }

  const chainName = useNewApi ? chainData?.chain.name : selectedChain?.name
  const chainTasksCount = useNewApi ? chainData?.chain.tasks.length : selectedChain?.tasks.length

  return (
    <Box>
      {/* Header с навигацией */}
      <Box mb={6}>
        <HStack gap={2} mb={2}>
          <Link to={URLs.submissions} style={{ textDecoration: 'none', color: '#319795' }}>
            <Text fontSize="sm" _hover={{ textDecoration: 'underline' }}>
              ← {t('challenge.admin.submissions.back.to.chains')}
            </Text>
          </Link>
        </HStack>
        <Heading mb={2}>{chainName}</Heading>
        <Text color="gray.600" fontSize="sm">
          {t('challenge.admin.submissions.chain.description', { count: chainTasksCount ?? 0 })}
        </Text>
      </Box>

      {/* Выбор участника и фильтры */}
      {sortedParticipants.length > 0 && (
        <VStack mb={4} gap={3} align="stretch">
          <HStack gap={4} align="center" wrap="wrap">
            {selectedUserId && (
              <Button
                size="sm"
                variant="outline"
                colorPalette="teal"
                onClick={() => {
                  setSelectedUserId(null)
                  setSearchQuery('')
                  setStatusFilter('all')
                }}
              >
                {t('challenge.admin.submissions.filter.user.clear')}
              </Button>
            )}

            {selectedUserId && filteredSubmissions.length > 0 && (
              <>
                <Input
                  placeholder={t('challenge.admin.submissions.search.placeholder')}
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  maxW="300px"
                />
                <Select.Root
                  collection={statusOptions}
                  value={[statusFilter]}
                  onValueChange={(e) => setStatusFilter(e.value[0] as SubmissionStatus | 'all')}
                  maxW="200px"
                >
                  <Select.Trigger>
                    <Select.ValueText placeholder={t('challenge.admin.submissions.filter.status')} />
                  </Select.Trigger>
                  <Select.Content>
                    {statusOptions.items.map((option) => (
                      <Select.Item key={option.value} item={option}>
                        {option.label}
                      </Select.Item>
                    ))}
                  </Select.Content>
                </Select.Root>
              </>
            )}
          </HStack>
        </VStack>
      )}

      {/* Если не выбран пользователь - показываем обзор участников */}
      {!selectedUserId ? (
        <Box>
          <Heading size="md" mb={4}>
            {t('challenge.admin.submissions.participants.title')}
          </Heading>
          <Text mb={4} color="gray.600">
            {t('challenge.admin.submissions.participants.description')}
          </Text>

          {sortedParticipants.length === 0 ? (
            <EmptyState
              title={t('challenge.admin.submissions.participants.empty.title')}
              description={t('challenge.admin.submissions.participants.empty.description')}
            />
          ) : (
            <Grid
              templateColumns={{
                base: 'repeat(1, minmax(0, 1fr))',
                md: 'repeat(2, minmax(0, 1fr))',
                lg: 'repeat(3, minmax(0, 1fr))',
                xl: 'repeat(4, minmax(0, 1fr))',
              }}
              gap={3}
            >
              {sortedParticipants.map((participant) => {
                const colorPalette =
                  participant.progressPercent >= 70
                    ? 'green'
                    : participant.progressPercent >= 40
                      ? 'orange'
                      : 'red'

                return (
                  <Box
                    key={participant.userId}
                    p={3}
                    borderWidth="1px"
                    borderRadius="md"
                    borderColor="gray.200"
                    bg="white"
                    _hover={{ bg: 'gray.50', borderColor: 'teal.300' }}
                    cursor="pointer"
                    onClick={() => setSelectedUserId(participant.userId)}
                    transition="all 0.2s"
                  >
                    <HStack justify="space-between" mb={2} gap={2}>
                      <VStack align="start" gap={0}>
                        {participant.workplaceNumber && (
                          <Text fontSize="xs" color="gray.500">
                            {participant.workplaceNumber}
                          </Text>
                        )}
                        <Text fontSize="sm" fontWeight="medium" truncate maxW="180px">
                          {participant.nickname}
                        </Text>
                      </VStack>
                      <Badge colorPalette={colorPalette} size="sm">
                        {participant.progressPercent}%
                      </Badge>
                    </HStack>
                    <Progress.Root value={participant.progressPercent} size="sm" colorPalette={colorPalette}>
                      <Progress.Track>
                        <Progress.Range />
                      </Progress.Track>
                    </Progress.Root>
                    <HStack justify="space-between" mt={2}>
                      <Text fontSize="xs" color="gray.500">
                        {participant.completedTasks} / {participant.totalTasks}
                      </Text>
                      <Text fontSize="xs" color="gray.400">
                        {t('challenge.admin.submissions.participants.click.to.view')}
                      </Text>
                    </HStack>
                  </Box>
                )
              })}
            </Grid>
          )}
        </Box>
      ) : filteredSubmissions.length === 0 ? (
        <EmptyState
          title={t('challenge.admin.submissions.search.empty.title')}
          description={t('challenge.admin.submissions.search.empty.description')}
        />
      ) : (
        /* Таблица попыток выбранного пользователя */
        <Box bg="white" borderRadius="lg" boxShadow="sm" borderWidth="1px" borderColor="gray.200" overflowX="auto">
          <Table.Root size="sm">
            <Table.Header>
              <Table.Row>
                <Table.ColumnHeader>{t('challenge.admin.submissions.table.user')}</Table.ColumnHeader>
                <Table.ColumnHeader>{t('challenge.admin.submissions.table.workplace')}</Table.ColumnHeader>
                <Table.ColumnHeader>{t('challenge.admin.submissions.table.task')}</Table.ColumnHeader>
                <Table.ColumnHeader>{t('challenge.admin.submissions.table.status')}</Table.ColumnHeader>
                <Table.ColumnHeader>{t('challenge.admin.submissions.table.attempt')}</Table.ColumnHeader>
                <Table.ColumnHeader>{t('challenge.admin.submissions.table.submitted')}</Table.ColumnHeader>
                <Table.ColumnHeader>{t('challenge.admin.submissions.table.check.time')}</Table.ColumnHeader>
                <Table.ColumnHeader textAlign="right">
                  {t('challenge.admin.submissions.table.actions')}
                </Table.ColumnHeader>
              </Table.Row>
            </Table.Header>
            <Table.Body>
              {filteredSubmissions.map((submission) => {
                const rawUser = submission.user as ChallengeUser | string | undefined
                const rawTask = submission.task as ChallengeTask | string | undefined

                const nickname =
                  rawUser && typeof rawUser === 'object' && 'nickname' in rawUser
                    ? (rawUser.nickname ?? '')
                    : typeof rawUser === 'string'
                      ? rawUser
                      : ''

                const workplaceNumber =
                  rawUser && typeof rawUser === 'object' && 'workplaceNumber' in rawUser
                    ? rawUser.workplaceNumber ?? ''
                    : ''

                const title =
                  rawTask && typeof rawTask === 'object' && 'title' in rawTask
                    ? (rawTask.title ?? '')
                    : typeof rawTask === 'string'
                      ? rawTask
                      : ''

                return (
                  <Table.Row key={submission.id}>
                    <Table.Cell fontWeight="medium">{nickname}</Table.Cell>
                    <Table.Cell>
                      <Text fontSize="sm" color="gray.600">
                        {workplaceNumber || '—'}
                      </Text>
                    </Table.Cell>
                    <Table.Cell>{title}</Table.Cell>
                    <Table.Cell>
                      <StatusBadge status={submission.status} />
                    </Table.Cell>
                    <Table.Cell>
                      <Text fontSize="sm" color="gray.600">
                        #{submission.attemptNumber}
                      </Text>
                    </Table.Cell>
                    <Table.Cell>
                      <Text fontSize="sm" color="gray.600">
                        {formatDate(submission.submittedAt)}
                      </Text>
                    </Table.Cell>
                    <Table.Cell>
                      <Text fontSize="sm" color="gray.600">
                        {getCheckTime(submission)}
                      </Text>
                    </Table.Cell>
                    <Table.Cell textAlign="right">
                      <Button
                        size="sm"
                        variant="ghost"
                        colorPalette="teal"
                        onClick={() => navigate(URLs.submissionDetails(chainId!, selectedUserId, submission.id))}
                      >
                        {t('challenge.admin.submissions.button.details')}
                      </Button>
                    </Table.Cell>
                  </Table.Row>
                )
              })}
            </Table.Body>
          </Table.Root>
        </Box>
      )}
    </Box>
  )
}