import { type FC } from 'react';

import Stack from '@material-hu/mui/Stack';
import { alpha } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import Skeleton from '@material-hu/components/design-system/Skeleton';

import { COLORS } from 'src/constants/serviceManagement';
import useCustomServerTranslation from 'src/hooks/useCustomServerTranslation';
import { BannerColor } from 'src/pages/dashboard/serviceManagement/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { MODULE_NAME } from 'src/components/dashboard/sidebar/items/ServiceManagement';

type Props = {
  color: BannerColor | undefined;
  loading: boolean;
};

// We use hardcoded colors to maintain consistency across light and dark mode
const ServiceBanner: FC<Props> = ({ color, loading }) => {
  const { t } = useLokaliseTranslation('service_management');

  const title = useCustomServerTranslation({
    module: MODULE_NAME,
    defaultTranslationKey: 'service_management:service_portal',
  });

  if (loading) {
    return (
      <Stack
        sx={{
          height: '175px',
          width: 1,
          p: 1,
        }}
      >
        <Skeleton
          width="100%"
          height="100%"
          variant="rounded"
          sx={{ borderRadius: 2 }}
        />
      </Stack>
    );
  }

  const colorConfig = COLORS[color || BannerColor.BLUE];

  return (
    <Stack
      sx={{
        borderRadius: 2,
        background: `linear-gradient(90deg, ${colorConfig.gradient.from} 0%, ${colorConfig.gradient.to} 100%)`,
        flexDirection: 'row',
        justifyContent: 'space-between',
        overflow: 'hidden',
        height: '175px',
      }}
    >
      <Stack sx={{ gap: 1, maxWidth: '600px', p: '42px' }}>
        <Typography
          variant="globalXL"
          fontWeight="fontWeightBold"
          color={'#FFFFFF'}
        >
          {title}
        </Typography>
        <Typography
          variant="globalXS"
          color={'#FFFFFF'}
        >
          {t('service_banner_title')}
        </Typography>
      </Stack>

      {/* Banner Illustration */}
      <Stack sx={{ gap: '20px', position: 'relative', zIndex: 2 }}>
        <Stack
          sx={{
            p: '10px',
            backgroundColor: alpha('#FFFFFF', 0.5),
            borderRadius: '8px',
            border: '0.5px solid #E5E7EB',
            transform: 'translateX(30px)',
          }}
        >
          <Stack
            sx={{
              flexDirection: 'row',
              alignItems: 'center',
              justifyContent: 'space-between',
              gap: '80px',
            }}
          >
            <Stack sx={{ gap: '5px' }}>
              <Stack
                sx={{
                  width: '96px',
                  height: '14px',
                  borderRadius: '2px',
                  backgroundColor: alpha('#FFFFFF', 0.5),
                }}
              />
              <Stack
                sx={{
                  width: '70px',
                  height: '8px',
                  borderRadius: '2px',
                  backgroundColor: alpha('#FFFFFF', 0.5),
                }}
              />
            </Stack>
            <Stack
              sx={{
                width: '60px',
                height: '20px',
                borderRadius: '70px',
                backgroundColor: '#FDFFFF1F',
              }}
            />
          </Stack>
        </Stack>
        <Stack
          sx={{
            p: '10px',
            backgroundColor: alpha('#FFFFFF', 0.5),
            borderRadius: '8px',
            border: '0.5px solid #E5E7EB',
            transform: 'translateX(100px)',
          }}
        >
          <Stack
            sx={{
              flexDirection: 'row',
              alignItems: 'center',
              justifyContent: 'space-between',
              gap: '80px',
            }}
          >
            <Stack sx={{ gap: '5px' }}>
              <Stack
                sx={{
                  width: '96px',
                  height: '14px',
                  borderRadius: '2px',
                  backgroundColor: alpha('#FFFFFF', 0.5),
                }}
              />
              <Stack
                sx={{
                  width: '70px',
                  height: '8px',
                  borderRadius: '2px',
                  backgroundColor: alpha('#FFFFFF', 0.5),
                }}
              />
            </Stack>
            <Stack
              sx={{
                width: '66px',
                height: '20px',
                borderRadius: '70px',
                backgroundColor: alpha('#FDFFFF', 0.12),
              }}
            />
          </Stack>
        </Stack>
        <Stack
          sx={{
            p: '10px',
            backgroundColor: alpha('#FFFFFF', 0.5),
            borderRadius: '8px',
            border: '0.5px solid #E5E7EB',
            transform: 'translateX(5px)',
          }}
        >
          <Stack
            sx={{
              flexDirection: 'row',
              alignItems: 'center',
              justifyContent: 'space-between',
              gap: '80px',
            }}
          >
            <Stack sx={{ gap: '5px' }}>
              <Stack
                sx={{
                  width: '96px',
                  height: '14px',
                  borderRadius: '2px',
                  backgroundColor: alpha('#FFFFFF', 0.5),
                }}
              />
              <Stack
                sx={{
                  width: '70px',
                  height: '8px',
                  borderRadius: '2px',
                  backgroundColor: alpha('#FFFFFF', 0.5),
                }}
              />
            </Stack>
            <Stack
              sx={{
                width: '66px',
                height: '21px',
                borderRadius: '70px',
                backgroundColor: alpha('#FDFFFF', 0.12),
              }}
            />
          </Stack>
        </Stack>
        <Stack
          sx={{
            width: '680px',
            height: '680px',
            border: `1px solid ${alpha('#FFFFFF', 0.2)}`,
            borderRadius: '50%',
            position: 'absolute',
            top: '-200px',
            left: '40px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            opacity: 0.8,
            overflow: 'hidden',
          }}
        >
          <Stack
            sx={{
              width: '650px',
              height: '650px',
              backgroundColor: alpha('#FFFFFF', 0.25),
              borderRadius: '50%',
            }}
          />
        </Stack>
      </Stack>
    </Stack>
  );
};

export default ServiceBanner;