import React, {useCallback, useEffect, useState} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useNavigation} from '@react-navigation/native';
import {IconArchive} from '@tabler/icons-react-native';
import {
  Accordion,
  Button,
  Spinner,
  Typography,
  Image,
  RefreshControl,
} from '@components';
import {queryClient} from '@config/queryClient';
import {GROUP_QUERY_KEYS} from '@modules/group/constants';
import {Group, PublicationPolicy} from '@modules/group/interfaces';
import CreatePostButton from '@modules/post/components/CreatePostButton';
import GroupFeed from '@modules/group/components/GroupFeed';
import ArchiveGroupModal from '@modules/group/screens/GroupDetail/components/GroupLayout/components/ArchiveGroupModal';
import PinnedPosts from '@modules/post/screens/Feed/components/PinnedPosts';
import {Screens} from '@shared/constants';
import {useActivePostsStore} from '@shared/stores/useActivePostsStore';
import {useTheme} from '@shared/theme';

import {useGetGroupFeed} from '../../hooks/useGetGroupFeed';
import ConfigPanel from './components/ConfigPanel';
import {styles} from './styles';
import GroupInfo from './components/GroupInfo';
import Alerts from './components/Alerts';

interface Props {
  group: Group;
  hasPendingRequests: boolean;
  iAmAdmin: boolean;
  iAmMember: boolean;
  onClosePanel: () => void;
  showConfigPanel: boolean;
  totalPendingApprovalPosts: number;
}

function GroupLayout({
  group,
  hasPendingRequests,
  iAmAdmin,
  iAmMember,
  onClosePanel,
  showConfigPanel,
  totalPendingApprovalPosts,
}: Props) {
  const navigation = useNavigation();
  const {theme} = useTheme();
  const [showArchiveGroupModal, setShowArchiveGroupModal] = useState(false);
  const {bannerUrl, id: groupId, publicationPolicy} = group;
  const {
    orderedPosts: groupPosts,
    pinnedPostIds,
    isLoading,
    isRefetching: isRefreshing,
    isFetchingNextPage,
    fetchNextPage: getNextPage,
    refetch: onRefreshPosts,
  } = useGetGroupFeed({groupId});

  useEffect(() => {
    useActivePostsStore.getState().setScreenActiveKey('groups');
  }, []);

  const canPost =
    iAmMember && (publicationPolicy === PublicationPolicy.Open || iAmAdmin);
  const canInteract = !group.isArchived && iAmMember;

  const onPressCreatePost = () => {
    navigation.navigate(Screens.PUBLISH_GROUP_POST, {groupId});
  };

  const onRefresh = useCallback(() => {
    onRefreshPosts();
    queryClient.invalidateQueries(
      GROUP_QUERY_KEYS.groupPendingApprovalPosts(groupId),
    );
  }, [groupId, onRefreshPosts]);

  const onShowArchiveGroupModal = () => {
    onClosePanel();
    setTimeout(
      () => {
        setShowArchiveGroupModal(true);
      },
      600, // Delay to allow the panel to close smoothly
    );
  };
  const onCloseArchiveGroupModal = () => {
    setShowArchiveGroupModal(false);
  };

  const {t} = useTranslation();
  return (
    <View
      style={[
        styles.container,
        {backgroundColor: theme.background.elements.default},
      ]}>
      {isLoading && !isRefreshing ? (
        <Spinner />
      ) : (
        <GroupFeed
          groupId={groupId}
          canInteract={canInteract}
          canManagePosts={!group?.isArchived && iAmAdmin}
          canManageComments={!group?.isArchived && iAmAdmin}
          bounces={!!groupPosts?.length}
          isArchived={group.isArchived}
          header={
            <View style={styles.headerContainer}>
              <View
                style={{backgroundColor: theme.background.elements.default}}>
                <Image source={{uri: bannerUrl}} style={styles.banner} />
                <GroupInfo
                  group={group}
                  iAmMember={iAmMember}
                  iAmAdmin={iAmAdmin}
                  isArchived={!!group?.isArchived}
                />
              </View>
              {group?.isArchived && (
                <Accordion initialCollapsed={true}>
                  <Accordion.Header>
                    <Accordion.Avatar Icon={IconArchive} />
                    <Accordion.Title title={t('group.group_archived_alert')} />
                    <Accordion.Icon />
                  </Accordion.Header>
                  <Accordion.Content>
                    <Typography variant="xs">
                      {t('group.group_archived_alert_description', {
                        date: new Date(
                          group?.archivedMetadata?.archivedAt || '',
                        ).toLocaleDateString(),
                      })}
                    </Typography>
                    {iAmAdmin && (
                      <Button
                        onPress={onShowArchiveGroupModal}
                        text={t('group.unarchive_group')}
                        size="sm"
                      />
                    )}
                  </Accordion.Content>
                </Accordion>
              )}
              {canPost && !group.isArchived ? (
                <CreatePostButton
                  onPress={onPressCreatePost}
                  style={styles.createPostButton}
                />
              ) : null}
              <Alerts
                groupId={groupId}
                showPendingPosts={Boolean(
                  iAmMember && !iAmAdmin && totalPendingApprovalPosts,
                )}
                totalPendingPosts={totalPendingApprovalPosts}
              />
              {!!pinnedPostIds.length && (
                <PinnedPosts
                  pinnedPostIds={pinnedPostIds}
                  groupId={groupId}
                  canInteract={canInteract}
                  isArchived={group.isArchived}
                />
              )}
            </View>
          }
          postIds={groupPosts}
          refreshControl={
            <RefreshControl refreshing={isRefreshing} onRefresh={onRefresh} />
          }
          isRefreshing={isRefreshing || isLoading}
          onEndReached={getNextPage}
          loadingMore={isFetchingNextPage}
        />
      )}
      <ConfigPanel
        group={group}
        hasPendingRequests={hasPendingRequests}
        onClosePanel={onClosePanel}
        showConfigPanel={showConfigPanel}
        totalPendingApprovalPosts={totalPendingApprovalPosts}
        iAmAdmin={iAmAdmin}
        onShowArchiveGroupModal={onShowArchiveGroupModal}
      />
      <ArchiveGroupModal
        isVisible={showArchiveGroupModal}
        onClose={onCloseArchiveGroupModal}
        isArchived={!!group.isArchived}
        groupId={groupId}
      />
    </View>
  );
}

export default GroupLayout;