import { type FC, useState } from 'react';
import { Trans } from 'react-i18next';
import { useInfiniteQuery, useQuery } from 'react-query';

import { type TFunction } from 'i18next';
import {
  IconArrowRight,
  IconEdit,
  IconFlag,
  IconInfoCircle,
  IconToggleLeft,
  IconToggleRight,
  IconUsersGroup,
} from '@material-hu/icons/tabler';
import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import HuAvatar from '@material-hu/components/design-system/Avatar';
import Button from '@material-hu/components/design-system/Buttons/Button';
import CardContainer from '@material-hu/components/design-system/CardContainer';
import HuDrawer from '@material-hu/components/design-system/Drawer';
import HuList from '@material-hu/components/design-system/List';
import HuListItem from '@material-hu/components/design-system/List/components/ListItem';
import StateCard from '@material-hu/components/design-system/StateCard';
import HuTitle from '@material-hu/components/design-system/Title';

import { type User } from 'src/types/user';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getFullname } from 'src/utils/userUtils';

import { serviceManagementKeys } from '../../queries';
import { getAgentGroup, getAgentGroupEvents } from '../../services';
import { AgentGroupChangeType, type AgentGroupEvent, Step } from '../../types';
import { formatLocalizedDate } from '../../utils';

import AgentGroupDetailEventsSkeleton from './AgentGroupDetailEventsSkeleton';
import AgentGroupDetailSkeleton from './AgentGroupDetailSkeleton';
import AgentListDrawer from './AgentListDrawer';

type Props = {
  open: boolean;
  onClose: () => void;
  agentGroupId: string | undefined;
};

const getHistoryChangeIcon = (type: AgentGroupChangeType) => {
  switch (type) {
    case AgentGroupChangeType.CREATED:
      return IconFlag;
    case AgentGroupChangeType.EDITED:
      return IconEdit;
    case AgentGroupChangeType.ACTIVATED:
      return IconToggleRight;
    case AgentGroupChangeType.DEACTIVATED:
      return IconToggleLeft;
    default:
      return IconInfoCircle;
  }
};

const EVENTS_LIMIT = 10;

const getHistoryChangeTitle = (event: AgentGroupEvent, t: TFunction) => {
  const fullName = getFullname(event.user);

  switch (event.type) {
    case AgentGroupChangeType.EDITED:
      return (
        <Trans
          t={t}
          i18nKey={t('agent_group_change_updated', { fullName })}
          components={{ b: <b /> }}
        />
      );
    case AgentGroupChangeType.ACTIVATED:
      return (
        <Trans
          t={t}
          i18nKey={t('agent_group_change_status_activated', { fullName })}
          components={{ b: <b /> }}
        />
      );
    case AgentGroupChangeType.DEACTIVATED:
      return (
        <Trans
          t={t}
          i18nKey={t('agent_group_change_status_deactivated', { fullName })}
          components={{ b: <b /> }}
        />
      );
    default:
      return (
        <Trans
          t={t}
          i18nKey={t('agent_group_change_created', {
            fullName,
          })}
          components={{ b: <b /> }}
        />
      );
  }
};

const AgentGroupDetailDrawer: FC<Props> = ({ open, onClose, agentGroupId }) => {
  const { t } = useLokaliseTranslation(['service_management', 'general']);

  const [isAgentListDrawerOpen, setIsAgentListDrawerOpen] = useState(false);

  const {
    data: agentGroupDetail,
    isLoading,
    isError,
    refetch,
  } = useQuery(
    serviceManagementKeys.agentGroups.detail(agentGroupId!),
    () => getAgentGroup(agentGroupId!),
    {
      enabled: !!agentGroupId,
      select: data => data.data,
      onError: () => {
        // Do nothing - prevent global error toast
      },
    },
  );

  const {
    data: agentGroupEvents,
    isLoading: isAgentGroupEventsLoading,
    isError: isAgentGroupEventsError,
    refetch: refetchAgentGroupEvents,
  } = useInfiniteQuery(
    serviceManagementKeys.agentGroups.events(agentGroupId!, EVENTS_LIMIT),
    ({ pageParam = 1 }) =>
      getAgentGroupEvents(agentGroupId!, {
        page: pageParam,
        limit: EVENTS_LIMIT,
      }),
    {
      enabled: !!agentGroupId,
      onError: () => {
        // Do nothing - prevent global error toast
      },
    },
  );

  const events = agentGroupEvents?.pages.flatMap(page => page.data.items) || [];

  const agents = agentGroupDetail?.agents || [];
  const showDetail = !isLoading && !isError && agentGroupDetail;
  const showEvents =
    !isAgentGroupEventsLoading && !isAgentGroupEventsError && !isError;

  if (!agentGroupId) return null;

  return (
    <HuDrawer
      open={open}
      onClose={onClose}
      title={t('agent_group_detail_title')}
      primaryButtonProps={{
        onClick: onClose,
        children: t('general:close'),
        fullWidth: true,
      }}
    >
      <AgentListDrawer
        open={isAgentListDrawerOpen}
        onClose={() => setIsAgentListDrawerOpen(false)}
        agents={agents as User[]}
        title={t('selected_members_title')}
      />
      <Stack sx={{ gap: 2, height: '100%' }}>
        {isLoading && <AgentGroupDetailSkeleton />}
        {showDetail && (
          <Stack sx={{ gap: 1 }}>
            <HuTitle
              title={t(Step.BASIC_INFORMATION)}
              variant="S"
            />
            <CardContainer
              fullWidth
              padding={16}
            >
              <Stack sx={{ gap: 2 }}>
                <Stack
                  sx={{ flexDirection: 'row', gap: 1, alignItems: 'center' }}
                >
                  <HuAvatar
                    Icon={IconInfoCircle}
                    color="primary"
                  />
                  <HuTitle
                    title={agentGroupDetail.name}
                    description={agentGroupDetail.description}
                    variant={'S'}
                  />
                </Stack>
                <Divider />
                <Stack
                  sx={{ flexDirection: 'row', gap: 1, alignItems: 'center' }}
                >
                  <HuAvatar
                    Icon={IconUsersGroup}
                    color="primary"
                  />
                  <HuTitle
                    title={t('members_count', {
                      count: agents.length,
                    })}
                    sx={{ flex: 1 }}
                    variant={'S'}
                  />
                  {agents.length > 0 && (
                    <Button
                      size="small"
                      variant="tertiary"
                      onClick={() => setIsAgentListDrawerOpen(true)}
                      endIcon={<IconArrowRight />}
                    >
                      {t('general:show')}
                    </Button>
                  )}
                </Stack>
              </Stack>
            </CardContainer>
          </Stack>
        )}
        <Stack sx={{ gap: 1 }}>
          <HuTitle
            title={t('change_history')}
            variant="S"
          />
          <CardContainer
            fullWidth
            padding={0}
          >
            {isAgentGroupEventsLoading && <AgentGroupDetailEventsSkeleton />}
            {showEvents && (
              <HuList sx={{ padding: 0, width: 1, background: 'transparent' }}>
                {events?.map((event, index) => (
                  <HuListItem
                    key={event.id}
                    text={{
                      title: (
                        <Stack>
                          <Typography variant="globalS">
                            {getHistoryChangeTitle(event, t as TFunction)}
                          </Typography>
                        </Stack>
                      ),
                      description: formatLocalizedDate(event.createdAt, {
                        includeTime: true,
                      }),
                    }}
                    avatar={{
                      Icon: getHistoryChangeIcon(event.type),
                      color: 'primary',
                    }}
                    divider={index !== events.length - 1}
                  />
                ))}
              </HuList>
            )}
          </CardContainer>
        </Stack>
        {isError && (
          <StateCard
            variant="error"
            title={t('agent_group_detail_error_title')}
            description={t('try_again_later')}
            primaryAction={{
              label: t('try_again'),
              onClick: () => {
                refetch();
                refetchAgentGroupEvents();
              },
              variant: 'secondary',
            }}
          />
        )}
      </Stack>
    </HuDrawer>
  );
};

export default AgentGroupDetailDrawer;