import { memo } from 'react';

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

import HuAvatar from '@material-hu/components/design-system/Avatar';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuPills from '@material-hu/components/design-system/Pills';
import HuProgressBar from '@material-hu/components/design-system/ProgressIndicators/ProgressBar';
import HuTitle from '@material-hu/components/design-system/Title';

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

import SkeletonSummaryCards from '../../components/SkeletonCardsSummary';
import { type GoalTeamUser } from '../../types';

// Figma spec — both cards share the same fixed height so the row stays aligned.
const SUMMARY_CARD_HEIGHT = 94;

type TeamGoalsSummaryCardsProps = {
  goalUser: GoalTeamUser | undefined;
  weightedProgress: number;
  goalsCount: number;
  loading?: boolean;
};

const TeamGoalsSummaryCards = ({
  goalUser,
  weightedProgress,
  goalsCount,
  loading = false,
}: TeamGoalsSummaryCardsProps) => {
  const { t } = useLokaliseTranslation('goals');

  if (loading) {
    return (
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          gap: 2,
          width: '100%',
        }}
      >
        <SkeletonSummaryCards />
        <SkeletonSummaryCards />
      </Stack>
    );
  }

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        gap: 2,
        width: '100%',
      }}
    >
      <HuCardContainer
        fullWidth
        sx={{ height: SUMMARY_CARD_HEIGHT }}
      >
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
          }}
        >
          <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>
            <HuAvatar
              {...(goalUser?.ownerUser.profilePicture && {
                src: goalUser.ownerUser.profilePicture,
              })}
              size="large"
              color="primary"
            />
            <HuTitle
              variant="M"
              title={getFullName(goalUser?.ownerUser ?? null)}
              description={goalUser?.ownerUser.department?.name}
            />
          </Stack>
          {!!goalsCount && (
            <HuPills
              hasIcon={false}
              label={`${goalsCount} ${t('general:goals').toLowerCase()}`}
              type="highlight"
              size="small"
            />
          )}
        </Stack>
      </HuCardContainer>
      <HuCardContainer
        fullWidth
        sx={{ height: SUMMARY_CARD_HEIGHT }}
      >
        <Stack sx={{ flexDirection: 'row', justifyContent: 'space-between' }}>
          <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>
            <HuAvatar
              Icon={IconTrendingUp}
              size="medium"
              color="primary"
            />
            <HuTitle
              variant="M"
              title={t('general:progress')}
            />
          </Stack>
          <Stack sx={{ flexDirection: 'row' }}>
            <Typography
              variant="globalL"
              fontWeight="fontWeightSemiBold"
            >
              {weightedProgress}%
            </Typography>
          </Stack>
        </Stack>
        <HuProgressBar
          current={weightedProgress}
          variant="determinate"
          sx={{ height: '8px' }}
        />
      </HuCardContainer>
    </Stack>
  );
};

export default memo(TeamGoalsSummaryCards);