import React, {useCallback, useEffect, useMemo, useState} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useQueryClient} from '@tanstack/react-query';
import {
  Accordion,
  Avatar,
  Dialog,
  HtmlRender,
  Link,
  Typography,
} from '@components';
import {useSafeAreaBottomPadding} from '@hooks/useSafeAreaBottomPadding';
import {useQuery} from '@hooks/queries-v5/useQuery';
import {useHtmlTagStyles} from '@hooks/useHtmlTagStyles';
import {
  SUBTASK_PREFIX,
  TASK_PREFIX,
  serviceManagementQueryKeys,
} from '@modules/serviceManagement/constants';
import {
  ServiceManagementRole,
  ServiceManagementTask,
  ServiceManagementTaskStateTransition,
  ServiceManagementTaskSubtask,
} from '@modules/serviceManagement/interfaces';
import {
  getServiceManagementDisplayName,
  generateTaskPropsQueryKey,
} from '@modules/serviceManagement/utils';
import ServiceManagementTaskStatusPill from '@modules/serviceManagement/components/ServiceManagementTaskStatusPill';
import SemanticButton from '@modules/serviceManagement/components/SemanticButton';
import ServiceManagementInformationRow from '@modules/serviceManagement/components/ServiceManagementInformationRow';
import {AssigneeButton} from '@modules/serviceManagement/components/AssigneeButton';
import {StateTransitionDialog} from '@modules/serviceManagement/components/StateTransitionDialog';
import {StateChangeWarningDialog} from '@modules/serviceManagement/components/StateChangeWarningDialog';
import AssignAgentModal from '@modules/serviceManagement/components/AssignAgentModal';
import {useChangeTaskState} from '@modules/serviceManagement/hooks/useChangeTaskState';
import {useVisitTask} from '@modules/serviceManagement/hooks/useVisitTask';
import {getStateTransitions} from '@modules/serviceManagement/services';
import {navigate} from '@navigation/navigator';
import {useUserId} from '@redux/selectors';
import {useTheme} from '@shared/theme';
import {
  getCurrentLocale,
  getFormattedDate,
  getHtmlToRender,
} from '@shared/utils';
import {Screens} from '@shared/constants';

import {styles} from './styles';

interface SubTaskDetailDialogProps {
  task: ServiceManagementTaskSubtask;
  isVisible: boolean;
  onClose: () => void;
  onTaskUpdate: (task: ServiceManagementTaskSubtask) => void;
  showParentTaskLink?: boolean;
  onBeforeNavigateToParentTask?: (
    subtask: ServiceManagementTaskSubtask,
  ) => void;
}

type ModalType = Nullable<'state' | 'assignAgent'>;

const ENABLE_ASSIGN_AGENT = false;

export function SubTaskDetailDialog({
  task,
  isVisible,
  onClose,
  onTaskUpdate,
  showParentTaskLink,
  onBeforeNavigateToParentTask,
}: SubTaskDetailDialogProps) {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const userId = useUserId();
  const queryClient = useQueryClient();
  const [visibleModal, setVisibleModal] = useState<ModalType>(null);
  const paddingBottom = useSafeAreaBottomPadding();
  const tagStyles = useHtmlTagStyles('tinyMce');
  const {visitOnce} = useVisitTask();

  useEffect(() => {
    if (isVisible) {
      visitOnce(task.id);
    }
  }, [isVisible, task.id, visitOnce]);

  const creationDate = getFormattedDate(task.createdAt, 'dd/MMM/yyyy HH:mm', {
    locale: getCurrentLocale(),
  }).toUpperCase();

  const agentName = getServiceManagementDisplayName({
    user: task.assignee,
    userId,
    t,
  });

  const initiatorName = getServiceManagementDisplayName({
    user: task.parentTask?.initiator,
    userId,
    t,
  });

  const isUserAssignee = task.assignee?.id === userId;
  const isTerminal = task.state.terminal;
  const canAssignAgent = ENABLE_ASSIGN_AGENT && isUserAssignee && !isTerminal;

  const {data: stateTransitions} = useQuery(
    serviceManagementQueryKeys.stateTransitions(task.state.id),
    () => getStateTransitions({stateId: task.state.id}),
    {enabled: !!task.state.id && !isTerminal},
  );

  const shouldShowSemanticButton =
    !!stateTransitions?.length && isUserAssignee && !isTerminal;

  const onCloseStateModal = useCallback(() => {
    setVisibleModal(null);
  }, []);

  const onOpenStateModal = useCallback(() => {
    setVisibleModal('state');
  }, []);

  const onOpenAssignAgentModal = useCallback(() => {
    setVisibleModal('assignAgent');
  }, []);

  const onOpenParentTask = useCallback(() => {
    if (!task.parentTask?.id) {
      return;
    }

    onBeforeNavigateToParentTask?.(task);
    navigate(Screens.AGENT_WORKSPACE_TASKS_DETAILS, {
      id: task.parentTask.id,
    });
  }, [task, onBeforeNavigateToParentTask]);

  const handleSuccessTaskMutation = useCallback(
    (newTaskData: ServiceManagementTask) => {
      queryClient.invalidateQueries({
        queryKey: serviceManagementQueryKeys.tasks(
          generateTaskPropsQueryKey({role: ServiceManagementRole.AgentRole}),
        ),
      });

      if (onTaskUpdate && newTaskData.type === 'SUBTASK') {
        onTaskUpdate(newTaskData as ServiceManagementTaskSubtask);
      }
    },
    [queryClient, onTaskUpdate],
  );

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

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

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

  const sectionRowStyle = useMemo(
    () => [
      styles.sectionRow,
      {backgroundColor: theme.background.layout.default},
    ],
    [theme.background.layout.default],
  );

  return (
    <Dialog
      title={task.name}
      isVisible={isVisible}
      onClose={onClose}
      wrapperType="scrollable">
      <View style={[styles.container, {paddingBottom}]}>
        <View style={sectionRowStyle}>
          <ServiceManagementInformationRow
            title={t('service_management.state')}
            variant="s"
            disablePress>
            {shouldShowSemanticButton ? (
              <SemanticButton
                state={task.state.name}
                onPress={onOpenStateModal}
                isLoading={isPendingChangeState}
              />
            ) : (
              <ServiceManagementTaskStatusPill task={task} />
            )}
          </ServiceManagementInformationRow>
        </View>
        <View style={sectionRowStyle}>
          <ServiceManagementInformationRow
            title={t('service_management.number')}
            description={`${SUBTASK_PREFIX}${task.taskNumber}`}
            variant="s"
            disablePress
          />
          <ServiceManagementInformationRow
            title={t('service_management.subtasks.request_date')}
            description={creationDate}
            variant="s"
            disablePress
          />
          {initiatorName && (
            <ServiceManagementInformationRow
              title={t('service_management.requester')}
              variant="s"
              disablePress
              contentContainerStyle={styles.userRow}>
              <Avatar
                size="xs"
                url={task.parentTask?.initiator.profilePicture}
                name={initiatorName}
              />
              <Typography
                variant="xs"
                numberOfLines={1}
                ellipsizeMode="tail"
                style={styles.initiatorName}>
                {initiatorName}
              </Typography>
            </ServiceManagementInformationRow>
          )}
          {task.parentTask && showParentTaskLink && (
            <ServiceManagementInformationRow
              title={t('service_management.subtasks.request')}
              variant="s"
              disablePress>
              <Link withIcon={true} onPress={onOpenParentTask}>
                {`${TASK_PREFIX}${task.parentTask.taskNumber}`}
              </Link>
            </ServiceManagementInformationRow>
          )}
        </View>
        <View style={sectionRowStyle}>
          <ServiceManagementInformationRow
            title={t('service_management.agent')}
            variant="s"
            disablePress
            contentContainerStyle={styles.assigneeContent}>
            <AssigneeButton
              assignee={task.assignee}
              assigneeName={agentName}
              canAssignAgent={canAssignAgent}
              onPress={onOpenAssignAgentModal}
            />
          </ServiceManagementInformationRow>
        </View>
        {task.description && (
          <Accordion style={sectionRowStyle}>
            <Accordion.Header>
              <Accordion.Title title={t('service_management.description')} />
              <Accordion.Icon />
            </Accordion.Header>
            <Accordion.Content>
              <HtmlRender
                html={getHtmlToRender(task.description)}
                tagsStyles={tagStyles}
              />
            </Accordion.Content>
          </Accordion>
        )}
      </View>
      {!!stateTransitions?.length && visibleModal === 'state' && (
        <StateTransitionDialog
          isVisible={visibleModal === 'state'}
          onClose={onCloseStateModal}
          stateTransitions={stateTransitions}
          task={task}
          onChangeState={onChangeState}
        />
      )}
      <StateChangeWarningDialog
        isVisible={isWarningModalVisible}
        onConfirm={onConfirmStateChange}
        onCancel={onCancelStateChange}
        description={pendingDescription}
      />
      {canAssignAgent && (
        <AssignAgentModal
          selectedTasks={[task as ServiceManagementTask]}
          catalogItemId={task.catalogItem.id}
          currentAgent={task.assignee}
          isVisible={visibleModal === 'assignAgent'}
          onClose={onCloseStateModal}
        />
      )}
    </Dialog>
  );
}