import React, {useEffect, useLayoutEffect} from 'react';
import {FlatList, ListRenderItem, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {Spinner, StateCard} from '@components';
import {Navigation} from '@interfaces/navigation';
import {AnimatedCardEntrance} from '@modules/prodev2/components/AnimatedCardEntrance';
import {CompetitionCard} from '@modules/prodev2/components/CompetitionCard';
import {CompetitionsSkeletonList} from '@modules/prodev2/components/CardSkeletons';
import {
  MAX_STAGGER_INDEX,
  PRODE_ACCESS_STALE_TIME,
  prodeKeys,
} from '@modules/prodev2/constants';
import {useProdeTitle} from '@modules/prodev2/hooks/useProdeTitle';
import {getCompetitions, getProdeAccess} from '@modules/prodev2/services';
import type {Competition} from '@modules/prodev2/interfaces';
import {useQuery} from '@shared/hooks/queries-v5/useQuery';
import {useTheme} from '@shared/theme';
import {Screens} from '@shared/constants';

import {styles} from './styles';

const keyExtractor = (item: Competition) => String(item.id);

export default function Competitions({
  navigation,
}: Navigation<Screens.PRODEV2_COMPETITIONS>) {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const {bottom: paddingBottom} = useSafeAreaInsets();

  const {data: accessData, isLoading: isAccessLoading} = useQuery(
    prodeKeys.access(),
    getProdeAccess,
    {staleTime: PRODE_ACCESS_STALE_TIME},
  );

  const title = useProdeTitle();

  useLayoutEffect(() => {
    navigation.setOptions({title});
  }, [navigation, title]);

  const hasAccess = !!accessData?.hasAccess;
  const hasAssignedCompetitions = !!accessData?.hasAssignedCompetitions;

  const {data: competitions, isLoading: isCompetitionsLoading} = useQuery(
    prodeKeys.competitions(),
    getCompetitions,
    {enabled: hasAccess && hasAssignedCompetitions},
  );

  const isLoading = isAccessLoading || (hasAccess && isCompetitionsLoading);

  const isSingleCompetition =
    !isLoading && Array.isArray(competitions) && competitions.length === 1;

  useEffect(() => {
    if (isSingleCompetition && competitions && competitions[0]) {
      navigation.replace(Screens.PRODEV2_COMPETITION_DETAIL, {
        competitionId: competitions[0].id,
      });
    }
  }, [isSingleCompetition, competitions, navigation]);

  const onCompetitionPress = (competition: Competition) => {
    navigation.navigate(Screens.PRODEV2_COMPETITION_DETAIL, {
      competitionId: competition.id,
    });
  };

  const renderItem: ListRenderItem<Competition> = ({item, index}) => (
    <AnimatedCardEntrance index={index} disabled={index > MAX_STAGGER_INDEX}>
      <CompetitionCard competition={item} onPress={onCompetitionPress} />
    </AnimatedCardEntrance>
  );

  if (isLoading || isSingleCompetition) {
    return (
      <View
        style={[
          styles.container,
          isAccessLoading ? styles.centered : styles.skeletonContainer,
          {backgroundColor: theme.background.layout.default},
        ]}>
        {isAccessLoading ? <Spinner /> : <CompetitionsSkeletonList />}
      </View>
    );
  }

  if (!hasAccess || !hasAssignedCompetitions) {
    return (
      <View
        style={[
          styles.container,
          styles.emptyContainer,
          {backgroundColor: theme.background.layout.default},
        ]}>
        <StateCard
          variant="empty"
          title={t('sportsPool.competitions.no_access_title')}
          description={t('sportsPool.competitions.no_access_description')}
        />
      </View>
    );
  }

  if (!competitions || competitions.length === 0) {
    return (
      <View
        style={[
          styles.container,
          styles.emptyContainer,
          {backgroundColor: theme.background.layout.default},
        ]}>
        <StateCard
          variant="empty"
          title={t('sportsPool.competitions.empty')}
          description={t('sportsPool.competitions.empty_description')}
        />
      </View>
    );
  }

  return (
    <View
      style={[
        styles.container,
        {backgroundColor: theme.background.layout.default},
      ]}>
      <FlatList
        data={competitions}
        keyExtractor={keyExtractor}
        renderItem={renderItem}
        contentContainerStyle={[styles.listContent, {paddingBottom}]}
        showsVerticalScrollIndicator={false}
      />
    </View>
  );
}