import { type PropsWithChildren, type ReactNode } from 'react';

import { IconInfoCircle } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { type SxProps } from '@material-hu/mui/styles';
import useTheme from '@material-hu/mui/styles/useTheme';
import Typography from '@material-hu/mui/Typography';

import CardContainer from '@material-hu/components/design-system/CardContainer';
import Skeleton from '@material-hu/components/design-system/Skeleton';
import StateCard from '@material-hu/components/design-system/StateCard';
import Title from '@material-hu/components/design-system/Title';
import Tooltip from '@material-hu/components/design-system/Tooltip';

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

export type ReportCardProps = PropsWithChildren<{
  title: ReactNode;
  subtitle?: ReactNode;
  description?: ReactNode;
  descriptionTooltip?: string;
  showEmpty?: boolean;
  showError?: boolean;
  loading?: boolean;
  sx?: SxProps;
}>;

export const ReportCard = ({
  title,
  subtitle,
  description,
  descriptionTooltip,
  showEmpty = false,
  showError = false,
  loading = false,
  sx,
  children,
}: ReportCardProps) => {
  const { t } = useLokaliseTranslation('general');
  const { palette } = useTheme();

  const showContent = !showEmpty && !showError;

  return (
    <CardContainer
      fullWidth
      padding={24}
      sx={sx}
    >
      <Stack
        id="report-card-header"
        sx={{ alignItems: 'flex-start', justifyContent: 'center' }}
      >
        {loading && (
          <Stack
            sx={{ alignItems: 'flex-start', justifyContent: 'center', gap: 1 }}
          >
            <Skeleton
              width={284}
              height={16}
            />
            <Skeleton
              width={411}
              height={16}
            />
          </Stack>
        )}
        {!loading && (
          <>
            <Title
              variant="M"
              fontWeight="fontWeightSemiBold"
              title={title}
              description={subtitle}
              slotProps={{ description: { variant: 'L' } }}
            />
            {description && (
              <Typography
                variant="globalS"
                color={palette.new.text.neutral.lighter}
                sx={{
                  display: 'flex',
                  flexDirection: 'row',
                  alignItems: 'center',
                  justifyContent: 'flex-start',
                  gap: 1,
                }}
              >
                {description}
                {descriptionTooltip && (
                  <Tooltip
                    direction="bottom"
                    description={descriptionTooltip}
                  >
                    <IconInfoCircle
                      size={14}
                      color={palette.new.text.neutral.lighter}
                    />
                  </Tooltip>
                )}
              </Typography>
            )}
          </>
        )}
      </Stack>
      <Stack
        id="report-card-content"
        sx={{ alignItems: 'center', justifyContent: 'center', gap: 1, mt: 2 }}
      >
        {showEmpty && (
          <StateCard
            title={t('empty_selection_title')}
            description={null}
          />
        )}
        {showError && (
          <StateCard
            title={t('error_title')}
            description={t('error_description')}
          />
        )}
        {showContent && children}
      </Stack>
    </CardContainer>
  );
};