import { type ReactElement, useState } from 'react';
import { useMutation, useQueryClient } from 'react-query';
import { useNavigate } from 'react-router';

import { useModal } from '@material-hu/hooks/useModal';
import {
  IconArrowsRightLeft,
  IconDotsVertical,
  IconEdit,
  IconReload,
  IconTrash,
} from '@material-hu/icons/tabler';
import Divider from '@material-hu/mui/Divider';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';

import Avatar from '@material-hu/components/design-system/Avatar';
import Button from '@material-hu/components/design-system/Buttons/Button';
import Dialog from '@material-hu/components/design-system/Dialog';
import Link from '@material-hu/components/design-system/Link';
import Menu from '@material-hu/components/design-system/Menu';
import MenuItem from '@material-hu/components/design-system/Menu/components/MenuItem';
import useSnackbar from '@material-hu/components/design-system/Snackbar';
import Title from '@material-hu/components/design-system/Title';

import { useLokaliseTranslation } from 'src/utils/i18n';

import { TitleWithCopyTooltip } from '../../../components/TitleWithCopyTooltip';
import { applicantsKeys } from '../../../queries';
import { recruitingRoutes } from '../../../routes';
import { deleteApplication, reactivateApplication } from '../../../services';
import { type ApplicationResponse, ApplicationStatus } from '../../../types';
import { getEmailLink, getWhatsappPhoneNumberLink } from '../../../utils';

type ContactInfoAndActionsProps = {
  jobName: string;
  isLastStage: boolean;
  application: ApplicationResponse;
  onRejectClick: () => void;
  onForwardClick: () => void;
  onMoveToStageClick: () => void;
  onEditClick: () => void;
  isJobActive: boolean;
  isOfferStage: boolean;
  profilePictureUrl?: string;
};

export const ContactInfoAndActions = ({
  isOfferStage,
  isJobActive,
  jobName,
  application,
  isLastStage,
  onRejectClick,
  onForwardClick,
  onMoveToStageClick,
  onEditClick,
  profilePictureUrl,
}: ContactInfoAndActionsProps) => {
  const { t } = useLokaliseTranslation('ats');
  const { enqueueSnackbar } = useSnackbar();
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);
  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    if (open) {
      handleClose();
      return;
    }
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const handleOptionClick = (callback: () => void) => () => {
    callback();
    handleClose();
  };

  const isApplicationActive = application.status === ApplicationStatus.ACTIVE;

  const { mutate: reactivateApplicationMutate } = useMutation({
    mutationFn: () =>
      reactivateApplication({
        jobId: application.jobId,
        applicationId: application.id,
      }),
    onSuccess: () => {
      queryClient.invalidateQueries(
        applicantsKeys.applicationDetail(application.jobId, application.id),
      );
      enqueueSnackbar({
        title: t('job_application.actions.reactivate.success'),
        variant: 'success',
      });
    },
    onError: () => {
      enqueueSnackbar({
        title: t('general:error_title'),
        variant: 'error',
      });
    },
  });

  const {
    mutate: deleteApplicationMutate,
    isLoading: isLoadingDeleteApplication,
  } = useMutation({
    mutationFn: () =>
      deleteApplication({
        jobId: application.jobId,
        applicationId: application.id,
      }),
    onSuccess: () => {
      navigate(recruitingRoutes.jobOffer(application.jobId));
      enqueueSnackbar({
        title: t('job_application.actions.delete.success'),
        variant: 'success',
      });
    },
    onError: () => {
      enqueueSnackbar({
        title: t('general:error_title'),
        variant: 'error',
      });
    },
  });

  const {
    closeModal: closeDeleteApplicationModal,
    showModal: showDeleteApplicationModal,
    modal: deleteApplicationModal,
  } = useModal(
    Dialog,
    {
      fullWidth: true,
    },
    {
      title: t('job_application.actions.delete.title'),
      textBody: t('job_application.actions.delete.description'),
      primaryButtonProps: {
        children: t('general:delete'),
        loading: isLoadingDeleteApplication,
        disabled: isLoadingDeleteApplication,
        onClick: () => {
          deleteApplicationMutate();
        },
      },
      secondaryButtonProps: {
        children: t('general:cancel'),
        onClick: () => closeDeleteApplicationModal(),
      },
      onClose: () => closeDeleteApplicationModal(),
    },
  );

  const actions = [
    {
      key: 'edit-info',
      title: t('job_application.tabs.application.application_form_edit'),
      onClick: handleOptionClick(onEditClick),
      icon: IconEdit,
    },
    ...(isApplicationActive
      ? [
          {
            key: 'move-to-stage',
            title: t('job_candidates.actions.move'),
            onClick: handleOptionClick(onMoveToStageClick),
            icon: IconArrowsRightLeft,
          },
        ]
      : []),
    ...(application.status === ApplicationStatus.REJECTED && isJobActive
      ? [
          {
            key: 'reactivate-application',
            title: t('job_application.actions.reactivate.title'),
            onClick: handleOptionClick(reactivateApplicationMutate),
            icon: IconReload,
          },
        ]
      : []),
    ...(!isOfferStage && isApplicationActive
      ? [
          {
            key: 'delete',
            title: t('general:delete'),
            onClick: handleOptionClick(showDeleteApplicationModal),
            icon: IconTrash,
          },
        ]
      : []),
  ];

  return (
    <Stack
      sx={{
        alignItems: 'center',
        backgroundColor: theme => theme.palette.new.background.layout.tertiary,
        borderColor: theme => theme.palette.new.border.neutral.default,
        borderStyle: 'solid',
        borderWidth: '1px 0',
        flexDirection: 'row',
        gap: 2,
        justifyContent: 'space-between',
        overflow: 'auto',
        px: 3,
        py: 2,
        width: '100%',
      }}
    >
      <Stack
        sx={{
          alignItems: 'center',
          flex: 2,
          flexDirection: 'row',
          height: '100%',
          width: '100%',
        }}
      >
        {(
          [
            profilePictureUrl && (
              <Avatar
                key="avatar"
                src={profilePictureUrl}
              />
            ),
            jobName && (
              <Title
                key="job"
                title={jobName}
                copetin={t('common.job_one')}
                withEllipsis
                overflow="tooltip"
                variant="S"
              />
            ),
            application.phoneNumber && (
              <TitleWithCopyTooltip
                key="phone"
                title={
                  <Link
                    href={getWhatsappPhoneNumberLink(application.phoneNumber)}
                    target="_blank"
                    rel="noopener noreferrer"
                    sx={{
                      '&:visited': {
                        color: theme =>
                          theme.palette.new.action.button.background.primary
                            .default,
                      },
                    }}
                  >
                    {application.phoneNumber}
                  </Link>
                }
                copetin={t('job_candidates.new.fields.phone.label')}
                valueToCopy={application.phoneNumber}
              />
            ),
            application.email && (
              <TitleWithCopyTooltip
                key="email"
                title={
                  <Link
                    href={getEmailLink(application.email)}
                    target="_blank"
                    rel="noopener noreferrer"
                    sx={{
                      '&:visited': {
                        color: theme =>
                          theme.palette.new.action.button.background.primary
                            .default,
                      },
                    }}
                  >
                    {application.email}
                  </Link>
                }
                copetin={t('general:email')}
                valueToCopy={application.email}
              />
            ),
          ] as (ReactElement | false)[]
        )
          .filter((item): item is ReactElement => Boolean(item))
          .flatMap((item, i) =>
            i === 0
              ? [item]
              : [
                  <Divider
                    key={`div-${i}`}
                    orientation="vertical"
                    sx={{ mx: 2, height: '100%' }}
                  />,
                  item,
                ],
          )}
      </Stack>
      <Stack
        sx={{
          alignItems: 'center',
          flex: 1,
          flexDirection: 'row',
          gap: 1,
          justifyContent: 'flex-end',
          width: '100%',
        }}
      >
        {isApplicationActive && (
          <>
            <Button
              size="small"
              variant="secondary"
              onClick={handleOptionClick(onRejectClick)}
            >
              {t('job_candidates.actions.reject')}
            </Button>
            <Button
              variant="primary"
              size="small"
              onClick={handleOptionClick(onForwardClick)}
            >
              {isLastStage
                ? t('job_candidates.actions.hire')
                : t('job_candidates.actions.forward')}
            </Button>
          </>
        )}
        {actions.length > 0 && (
          <>
            <IconButton
              aria-label="actions-menu"
              id="actions-menu"
              onClick={handleClick}
            >
              <IconDotsVertical />
            </IconButton>
            <Menu
              id="actions-menu"
              anchorEl={anchorEl}
              open={open}
              onClose={handleClose}
              position="left"
            >
              {actions.map(action => (
                <MenuItem
                  key={action.key}
                  onClick={handleOptionClick(action.onClick)}
                >
                  <Stack
                    sx={{
                      flexDirection: 'row',
                      alignItems: 'center',
                      gap: 1,
                    }}
                  >
                    <Avatar Icon={action.icon} />
                    <Title
                      variant="S"
                      title={action.title}
                    />
                  </Stack>
                </MenuItem>
              ))}
            </Menu>
          </>
        )}
      </Stack>
      {deleteApplicationModal}
    </Stack>
  );
};