import { type FC } from 'react';

import { IconChevronDown, IconInfoCircle } from '@material-hu/icons/tabler';
import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
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 HuPills from '@material-hu/components/design-system/Pills';
import HuTooltip from '@material-hu/components/design-system/Tooltip';

import { useAuth } from 'src/contexts/JWTContext';
import { type Task } from 'src/pages/dashboard/serviceManagement/types';
import {
  getSla,
  getSlaPillProps,
  getSlaTime,
  getSlaTooltipMessage,
  getTaskID,
  hasExpired,
} from 'src/pages/dashboard/serviceManagement/utils';
import { formatLocalizedDate } from 'src/utils/date';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { getUserDisplayName } from '../../../../utils';

import UserTooltip from './UserTooltip';

type RequestInfoDetailProps = {
  taskData: Task;
  agentElemId: string;
  canReassign: boolean;
  showSla: boolean;
  handleOpenReassignMenu: () => void;
};

const RequestInfoDetail: FC<RequestInfoDetailProps> = ({
  taskData,
  agentElemId,
  canReassign,
  showSla,
  handleOpenReassignMenu,
}) => {
  const theme = useTheme();
  const { t } = useLokaliseTranslation('service_management');
  const { user: loggedUser } = useAuth();
  const sla = getSla(taskData.taskSlas, taskData.state);

  return (
    <Stack sx={{ gap: 2 }}>
      <Stack
        sx={{
          p: 2,
          gap: 0.5,
          borderRadius: 1,
          backgroundColor: ({ palette }) =>
            palette.new.background.layout.default,
        }}
      >
        <Stack>
          <Typography
            variant="globalXXS"
            sx={{
              color: ({ palette }) => palette.new.text.neutral.lighter,
            }}
          >
            {t('number')}
          </Typography>
          <Typography
            variant="globalS"
            fontWeight="fontWeightSemiBold"
          >
            {getTaskID(taskData)}
          </Typography>
        </Stack>
        <Divider />
        <Stack>
          <Typography
            variant="globalXXS"
            sx={{
              color: ({ palette }) => palette.new.text.neutral.lighter,
            }}
          >
            {t('creation_date')}
          </Typography>
          <Typography
            variant="globalS"
            fontWeight="fontWeightSemiBold"
          >
            {formatLocalizedDate(taskData.createdAt || '-')}
          </Typography>
        </Stack>
        <Divider />
        <Stack>
          <Typography
            variant="globalXXS"
            sx={{
              color: ({ palette }) => palette.new.text.neutral.lighter,
            }}
          >
            {t('requester')}
          </Typography>
          {taskData.initiator && (
            <UserTooltip
              user={taskData.initiator}
              tooltipProps={{ direction: 'left' }}
            >
              <Button
                sx={{
                  cursor: 'default',
                  alignSelf: 'flex-start',
                  p: 0,
                  '&:hover': { backgroundColor: 'transparent' },
                }}
              >
                <Stack
                  sx={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}
                >
                  <HuAvatar
                    sx={{ width: '24px', height: '24px' }}
                    src={taskData.initiator.profilePicture}
                  />
                  <Typography
                    variant="globalS"
                    fontWeight="fontWeightSemiBold"
                    sx={{
                      overflow: 'hidden',
                      textOverflow: 'ellipsis',
                      whiteSpace: 'nowrap',
                      maxWidth: '200px',
                      cursor: 'default',
                      display: 'inline-block',
                    }}
                  >
                    {getUserDisplayName(taskData.initiator, loggedUser!, t)}
                  </Typography>
                </Stack>
              </Button>
            </UserTooltip>
          )}
        </Stack>
        {showSla && sla && (
          <>
            <Divider />
            <Stack>
              <Typography
                variant="globalXXS"
                sx={{
                  color: ({ palette }) => palette.new.text.neutral.lighter,
                }}
              >
                {t('time_left')}
              </Typography>
              <Stack
                sx={{ flexDirection: 'row', alignItems: 'center', gap: 0.5 }}
              >
                <HuPills
                  label={
                    hasExpired(sla, taskData.state!)
                      ? t('time_expired')
                      : getSlaTime(sla, taskData.state!)
                  }
                  {...getSlaPillProps(sla, taskData.state!)}
                />
                <HuTooltip
                  description={t(getSlaTooltipMessage(sla, taskData.state!))}
                >
                  <IconInfoCircle
                    color={theme.palette.new.text.neutral.default}
                    size={16}
                  />
                </HuTooltip>
              </Stack>
            </Stack>
          </>
        )}
      </Stack>
      <Stack
        sx={{
          p: 2,
          pr: 1,
          gap: 1,
          borderRadius: 1,
          backgroundColor: ({ palette }) =>
            palette.new.background.layout.default,
        }}
      >
        <Stack
          sx={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          <Typography
            variant="globalS"
            fontWeight="semiBold"
          >
            {t('agent')}
          </Typography>
          <Stack
            id={agentElemId}
            sx={{ flexDirection: 'row', alignItems: 'center', gap: 0.5 }}
          >
            {taskData.assignee && !canReassign && (
              <UserTooltip
                user={taskData.assignee!}
                tooltipProps={{ direction: 'left' }}
              >
                <Button sx={{ cursor: 'default' }}>
                  <Stack
                    sx={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}
                  >
                    <HuAvatar
                      sx={{ width: '28px', height: '28px' }}
                      src={taskData.assignee?.profilePicture}
                    />
                    <Typography
                      variant="globalXS"
                      sx={{
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        whiteSpace: 'nowrap',
                        maxWidth: '120px',
                        cursor: 'default',
                        display: 'inline-block',
                      }}
                    >
                      {getUserDisplayName(taskData.assignee!, loggedUser!, t)}
                    </Typography>
                  </Stack>
                </Button>
              </UserTooltip>
            )}
            {canReassign && (
              <Button
                variant="tertiary"
                endIcon={<IconChevronDown />}
                onClick={handleOpenReassignMenu}
              >
                {taskData.assignee && (
                  <Stack
                    sx={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}
                  >
                    <HuAvatar
                      variant="circular"
                      size="small"
                      src={taskData.assignee?.profilePicture}
                    />
                    <Typography
                      variant="globalXS"
                      fontWeight="fontWeightSemiBold"
                      color={theme.palette.new.text.neutral.default}
                      sx={{
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        whiteSpace: 'nowrap',
                        maxWidth: '150px',
                        display: 'inline-block',
                      }}
                    >
                      {getUserDisplayName(taskData.assignee!, loggedUser!, t)}
                    </Typography>
                  </Stack>
                )}
                {!taskData.assignee && (
                  <Typography
                    variant="globalXS"
                    fontWeight="fontWeightSemiBold"
                    color={theme.palette.new.text.neutral.default}
                  >
                    {t('unassigned')}
                  </Typography>
                )}
              </Button>
            )}
          </Stack>
        </Stack>
      </Stack>
    </Stack>
  );
};

export default RequestInfoDetail;
