import React, {useCallback, useMemo} from 'react';
import {useTranslation} from 'react-i18next';
import {useQueryClient} from '@tanstack/react-query';
import {Button, Skeleton} from '@components';
import {useModalHandler} from '@hooks/useModalHandler';
import {useQuery} from '@hooks/queries-v5/useQuery';
import {Navigation} from '@interfaces/navigation';
import {serviceManagementQueryKeys} from '@modules/serviceManagement/constants';
import {
  getCandidateAgents,
  getStateTransitions,
  getTaskDetail,
} from '@modules/serviceManagement/services';
import ServiceManagementTaskDetailsLayout from '@modules/serviceManagement/components/ServiceManagementTaskDetailsLayout';
import {
  ServiceManagementTask,
  ServiceManagementTaskQueryData,
  ServiceManagementRole,
  ServiceManagementTaskStateTransition,
  AmplitudeServiceManagementRole,
  ServiceManagementTaskType,
} from '@modules/serviceManagement/interfaces';
import {
  generateTaskPropsQueryKey,
  invalidateApprovalTasksQueries,
} from '@modules/serviceManagement/utils';
import SemanticButton from '@modules/serviceManagement/components/SemanticButton';
import ServiceManagementTaskStatusPill from '@modules/serviceManagement/components/ServiceManagementTaskStatusPill';
import {StateTransitionDialog} from '@modules/serviceManagement/components/StateTransitionDialog';
import {StateChangeWarningDialog} from '@modules/serviceManagement/components/StateChangeWarningDialog';
import {useChangeTaskState} from '@modules/serviceManagement/hooks/useChangeTaskState';
import {useAssignTask} from '@modules/serviceManagement/hooks/useAssignTask';
import {useVisitTask} from '@modules/serviceManagement/hooks/useVisitTask';
import {useUserId} from '@redux/selectors';
import {DEFAULT_LIMIT} from '@services/constants';
import {AMPLITUDE_EVENTS, Screens} from '@shared/constants';
import {logAmplitudeEvent} from '@shared/utils';
import {useTheme} from '@shared/theme';

function AgentWorkspaceTaskDetails({
  route: {
    params: {id, fistTabKey},
  },
}: Navigation<Screens.AGENT_WORKSPACE_TASKS_DETAILS>) {
  const {visitOnce} = useVisitTask();
  const {t} = useTranslation();
  const {spacing} = useTheme();
  const queryClient = useQueryClient();
  const userId = useUserId();

  const {
    isVisible: isStateModalVisible,
    onCloseModal,
    onOpenModal,
  } = useModalHandler();

  const {data: task, isLoading: isLoadingTask} = useQuery(
    serviceManagementQueryKeys.agentTaskDetail(id),
    () => getTaskDetail({id}),
    {onSuccess: () => visitOnce(id)},
  );
  const {data: stateTransitions, isLoading: isLoadingStateTransitions} =
    useQuery(
      serviceManagementQueryKeys.stateTransitions(task?.state.id),
      () => getStateTransitions({stateId: task?.state.id}),
      {enabled: !!task?.state.id && !task?.state.terminal},
    );
  const catalogItemId = task?.catalogItem?.id;
  const isAgentGroup = useQuery(
    serviceManagementQueryKeys.catalogItemCandidateAgents(
      catalogItemId!,
      false,
      `${userId}`,
    ),
    () =>
      getCandidateAgents({
        id: catalogItemId!,
        page: 1,
        limit: DEFAULT_LIMIT,
      }),
    {
      enabled: !!catalogItemId,
      select: data => data?.items.find(agent => agent.id === userId),
    },
  );

  const handleSuccessTaskMutation = useCallback(
    (newTaskData: ServiceManagementTask) => {
      logAmplitudeEvent(AMPLITUDE_EVENTS.SERVICE_MGMT_STATE_CHANGED, {
        role: AmplitudeServiceManagementRole.AGENT,
        serviceId: newTaskData.catalogItem?.id,
        requestId: newTaskData.id,
        stateName: newTaskData.state.name,
      });
      queryClient.setQueryData<ServiceManagementTaskQueryData>(
        serviceManagementQueryKeys.agentTaskDetail(id),
        () => newTaskData,
      );
      queryClient.invalidateQueries({
        queryKey: serviceManagementQueryKeys.tasks(
          generateTaskPropsQueryKey({role: ServiceManagementRole.AgentRole}),
        ),
      });
      queryClient.invalidateQueries({
        queryKey: serviceManagementQueryKeys.taskActivity(newTaskData.id),
      });

      invalidateApprovalTasksQueries(queryClient, {
        parentTaskId: newTaskData.id,
      });
    },
    [queryClient, id],
  );

  const {
    changeState,
    isPending: isPendingChangeState,
    isWarningModalVisible,
    onConfirmStateChange,
    onCancelStateChange,
    pendingDescription,
  } = useChangeTaskState({
    task,
    onSuccess: handleSuccessTaskMutation,
    onCloseStateModal: onCloseModal,
  });

  const {assignTaskMutation, isPending: isPendingAssignTask} = useAssignTask({
    taskId: task?.id,
    assigneeId: userId,
    onSuccess: handleSuccessTaskMutation,
  });

  const onChangeState = useCallback(
    (state: ServiceManagementTaskStateTransition) => {
      if (!state) {
        return;
      }

      changeState({state, confirmed: false});
    },
    [changeState],
  );

  const isLoadingState =
    isLoadingStateTransitions || isPendingChangeState || isPendingAssignTask;

  const isLoadingHeaderButton =
    isLoadingTask ||
    isLoadingStateTransitions ||
    isPendingAssignTask ||
    isAgentGroup.isLoading;

  const headerButton = useMemo(() => {
    if (isLoadingHeaderButton || !task) {
      return <Skeleton.Item width={110} height={spacing.x4} />;
    }

    const isTerminal =
      task.state.terminal ||
      !stateTransitions?.length ||
      task.type === ServiceManagementTaskType.Approval;
    const isInitialState = !task.assignee && !!isAgentGroup.data;

    if (isTerminal || isInitialState) {
      return <ServiceManagementTaskStatusPill task={task} />;
    }

    if (task?.assignee?.id === userId) {
      return (
        <SemanticButton
          isLoading={isLoadingState}
          onPress={onOpenModal}
          state={task?.state.name || ''}
        />
      );
    }

    return null;
  }, [
    isLoadingHeaderButton,
    task,
    stateTransitions,
    isAgentGroup.data,
    userId,
    spacing.x4,
    isLoadingState,
    onOpenModal,
  ]);

  return (
    <>
      {!!stateTransitions?.length && isStateModalVisible && task && (
        <StateTransitionDialog
          isVisible={isStateModalVisible}
          onClose={onCloseModal}
          stateTransitions={stateTransitions}
          task={task}
          onChangeState={onChangeState}
        />
      )}
      <StateChangeWarningDialog
        isVisible={isWarningModalVisible}
        onConfirm={onConfirmStateChange}
        onCancel={onCancelStateChange}
        description={pendingDescription}
      />
      <ServiceManagementTaskDetailsLayout
        task={task}
        isLoading={isLoadingTask}
        showInitiator
        headerButton={headerButton}
        footer={
          !task?.state.terminal &&
          stateTransitions?.length &&
          !task?.assignee &&
          isAgentGroup.data && (
            <Button
              onPress={assignTaskMutation}
              isLoading={isLoadingState}
              disabled={!stateTransitions?.[0]?.stateId}
              text={t('service_management.assign_me')}
            />
          )
        }
        firstTabKey={fistTabKey}
        isAgent
      />
    </>
  );
}

export default AgentWorkspaceTaskDetails;