import { useQuery } from 'react-query';

import Typography from '@material-hu/mui/Typography';
import { IconArrowRight } from '@material-hu/icons/tabler';

import HuCircularProgress from '@material-hu/components/design-system/ProgressIndicators/Spinner';
import HuPills from '@material-hu/components/design-system/Pills';

import { useLokaliseTranslation } from 'src/utils/i18n';
import useAuth from 'src/contexts/JWTContext';

import type { RetentionAction } from '../../types/retention';
import { getTaskDetail } from '../../services/retentionService';
import { getSmTicketPillType } from 'src/pages/dashboard/ServiceManagement/utils';
import { SidebarSection, DetailRow } from './SidebarWidgets';

function getTicketUrl(taskId: string): string {
  const raw = import.meta.env.VITE_WEB_URL as string | undefined;
  const webUrl = (raw ?? window.location.origin).replace(/\/$/, '');
  return `${webUrl}/agent-workspace/tickets/${taskId}`;
}

type GeneratedRequestPanelProps = {
  actions: RetentionAction[];
};

export function GeneratedRequestPanel({ actions }: GeneratedRequestPanelProps) {
  const { t } = useLokaliseTranslation('backoffice_only');
  const { user } = useAuth();
  const isAgent = !!user?.isAgent;

  const actionWithRef = actions.find(a => a.externalRefId);
  const taskId = actionWithRef?.externalRefId ?? null;

  const { data: task, isLoading } = useQuery(
    ['tali', 'task', taskId],
    () => getTaskDetail(taskId!),
    { enabled: !!taskId },
  );

  if (!taskId) return null;

  const taskLabel = task?.label ?? `#${task?.number ?? taskId}`;

  return (
    <SidebarSection title={t('tali.generated_request.title')}>
      {isLoading ? (
        <HuCircularProgress centered />
      ) : (
        <>
          <DetailRow label={t('tali.generated_request.request')}>
            {isAgent ? (
              <Typography
                component="a"
                href={getTicketUrl(taskId)}
                target="_blank"
                rel="noopener noreferrer"
                variant="globalS"
                sx={{
                  color: ({ palette }) => palette.new.text.feedback.info,
                  textDecoration: 'underline',
                  display: 'inline-flex',
                  alignItems: 'center',
                  gap: 0.5,
                  cursor: 'pointer',
                  '&:hover': { textDecoration: 'none' },
                }}
              >
                {taskLabel}
                <IconArrowRight size={16} />
              </Typography>
            ) : (
              <Typography
                variant="globalS"
                sx={{
                  color: ({ palette }) => palette.new.text.neutral.default,
                }}
              >
                {taskLabel}
              </Typography>
            )}
          </DetailRow>

          <DetailRow
            label={t('tali.generated_request.service')}
            value={task?.catalogItemName ?? '—'}
          />

          {task?.status && (
            <DetailRow label={t('tali.generated_request.status')}>
              <HuPills
                type={getSmTicketPillType(task.status, task.statusTerminal)}
                label={task.status}
                hasIcon={false}
                size="small"
              />
            </DetailRow>
          )}
        </>
      )}
    </SidebarSection>
  );
}