import { type FC } from 'react';
import { useNavigate } from 'react-router-dom';

import { CallingState } from '@stream-io/video-react-sdk';
import {
  IconInfoCircle,
  IconPhoneOff,
  IconPhoneOutgoing,
} from '@material-hu/icons/tabler';
import Divider from '@material-hu/mui/Divider';
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 CardContainer from '@material-hu/components/design-system/CardContainer';
import { type StateCardProps } from '@material-hu/components/design-system/StateCard';
import Title from '@material-hu/components/design-system/Title';

import { conversationsRoutes } from 'src/pages/dashboard/Conversations/routes';
import { feedRoutes } from 'src/pages/dashboard/feed/routes';
import { type CallError, ResponseErrorCodes } from 'src/types/stream';
import { useLokaliseTranslation } from 'src/utils/i18n';

import CallRatingSection from './CallRatingSection';

type ErrorStateProps = {
  error: CallError;
};

type ErrorConfig = Omit<StateCardProps, 'variant'> & {
  variant?: Exclude<StateCardProps['variant'], 'wifi-off'>;
};

const ERRORS_WITH_RATING: CallError[] = [
  ResponseErrorCodes.FINISHED_CALL,
  CallingState.LEFT,
];

export const ErrorState: FC<ErrorStateProps> = props => {
  const { error } = props;
  const { t } = useLokaliseTranslation('calls');
  const navigate = useNavigate();

  const showRating = ERRORS_WITH_RATING.includes(error);

  const errorConfigs: Record<CallError, ErrorConfig> = {
    [ResponseErrorCodes.CALL_INVALID_STATUS]: {
      title: t('call_finished_title'),
      description: t('call_finished_description'),
      icon: IconPhoneOff,
      variant: 'warning',
      primaryAction: {
        label: t('call_finished_primary_action'),
        onClick: () => navigate(feedRoutes.feed()),
      },
      secondaryAction: {
        label: t('call_finished_secondary_action'),
        onClick: () => navigate(conversationsRoutes.conversations()),
      },
    },
    [ResponseErrorCodes.CALL_TOO_MANY_PARTICIPANTS]: {
      title: t('call_max_participants_title'),
      description: t('call_max_participants_description'),
      icon: IconInfoCircle,
      primaryAction: {
        label: t('call_max_participants_primary_action'),
        onClick: () => navigate(feedRoutes.feed()),
      },
    },
    [CallingState.LEFT]: {
      title: t('call_left_title'),
      description: t('call_finished_description'),
      icon: IconPhoneOutgoing,
      variant: 'primary',
      primaryAction: {
        label: t('call_finished_primary_action'),
        onClick: () => navigate(feedRoutes.feed()),
      },
      secondaryAction: {
        label: t('call_finished_secondary_action'),
        onClick: () => navigate(conversationsRoutes.conversations()),
      },
    },
    [ResponseErrorCodes.FINISHED_CALL]: {
      title: t('call_finished_title'),
      description: t('call_finished_description'),
      icon: IconPhoneOff,
      variant: 'warning',
      primaryAction: {
        label: t('call_finished_primary_action'),
        onClick: () => navigate(feedRoutes.feed()),
      },
      secondaryAction: {
        label: t('call_finished_secondary_action'),
        onClick: () => navigate(conversationsRoutes.conversations()),
      },
    },
  };

  const errorConfig = errorConfigs[error];

  return (
    <Stack
      sx={{
        alignItems: 'center',
        py: 9,
      }}
    >
      <CardContainer
        fullWidth
        sx={{ maxWidth: '784px' }}
      >
        <Stack
          sx={{
            flexDirection: 'column',
            gap: 2,
            alignItems: 'center',
          }}
        >
          <Avatar
            color={errorConfig.variant}
            Icon={errorConfig.icon}
          />
          <Title
            title={errorConfig.title}
            description={errorConfig.description}
            variant="M"
            centered
          />
          {(errorConfig.primaryAction || errorConfig.secondaryAction) && (
            <Stack sx={{ flexDirection: 'row', gap: 2 }}>
              {errorConfig.secondaryAction && (
                <Button
                  size="small"
                  variant="tertiary"
                  onClick={errorConfig.secondaryAction.onClick}
                >
                  {errorConfig.secondaryAction.label}
                </Button>
              )}
              {errorConfig.primaryAction && (
                <Button
                  size="small"
                  variant="outlined"
                  onClick={errorConfig.primaryAction.onClick}
                >
                  {errorConfig.primaryAction.label}
                </Button>
              )}
            </Stack>
          )}
          {showRating && (
            <>
              <Divider sx={{ width: '100%' }} />
              <CallRatingSection />
            </>
          )}
        </Stack>
      </CardContainer>
    </Stack>
  );
};

export default ErrorState;