import { FC, Fragment, ReactNode } from 'react';

import { IconX } from '@material-hu/icons/tabler';
import CircularProgress from '@material-hu/mui/CircularProgress';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import { Theme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import HuAvatar from '@material-hu/components/design-system/Avatar';
import HuBadge from '@material-hu/components/design-system/Badge';
import Button from '@material-hu/components/design-system/Buttons/Button';

import {
  GROUP_MANAGEMENT_FOOTER_HEIGHT,
  GROUP_MANAGEMENT_HEADER_HEIGHT,
  GROUP_MANAGEMENT_ICON_SIZE,
  GROUP_MANAGEMENT_MAX_CONTENT_WIDTH,
  GROUP_MANAGEMENT_SIDEBAR_WIDTH,
} from 'src/pages/dashboard/groups/constants';
import { GroupStep, STEP_DIVIDER_ID } from 'src/types/groups';
import { Icon } from 'src/types/icons';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

import WidgetIcon from 'src/components/dashboard/widgets/WidgetIcon';
import { FixedActionFooter } from 'src/components/FixedActionFooter';
export const GROUP_MANAGEMENT_LAYOUT_CONTENT_ID =
  'group-management-layout-content';

type GroupManagementLayoutProps = {
  title: string;
  icon?: Icon;
  steps: GroupStep[];
  activeComponent: ReactNode;
  footerActions?: ReactNode;
  onClose: () => void;
  activeStep: string;
  onStepSelect: (step: string) => void;
  isLoading?: boolean;
};

export const GroupManagementLayout: FC<GroupManagementLayoutProps> = ({
  title,
  icon,
  steps,
  activeComponent,
  footerActions,
  onClose,
  activeStep,
  onStepSelect,
  isLoading = false,
}) => {
  const { t } = useTranslation(['group']);

  const getStepComponent = (step: GroupStep): ReactNode => {
    if (step.id === STEP_DIVIDER_ID) {
      return (
        <Stack sx={{ my: 2 }}>
          <Typography
            variant="globalM"
            fontWeight="fontWeightSemiBold"
          >
            {step.label}
          </Typography>
        </Stack>
      );
    }

    const stepColor = (theme: Theme) =>
      `${
        activeStep === step.id
          ? theme.palette.new.text.neutral.default
          : theme.palette.new.text.neutral.lighter
      }`;

    const content = (
      <>
        <HuAvatar
          sx={{
            backgroundColor: 'transparent',
            color: stepColor,
          }}
          size="small"
          Icon={step.icon}
        />
        <Stack
          sx={{
            textAlign: 'left',
            ml: 0.5,
          }}
        >
          <Typography
            variant="globalS"
            fontWeight="fontWeightSemiBold"
            sx={{ color: stepColor }}
          >
            {step.label}
          </Typography>
        </Stack>
      </>
    );

    return (
      <Button
        key={step.id}
        disableRipple={!!step.disabled}
        disabled={!!step.disabled}
        onClick={() => onStepSelect(step.id)}
        variant="text"
        sx={{
          justifyContent: 'flex-start',
          borderRadius: theme => theme.shape.borderRadiusL,
          px: 1,
          py: 1.5,
          gap: 1,
          height: 'auto',
          color: stepColor,
          backgroundColor: theme =>
            activeStep === step.id
              ? theme.palette.new.background.elements.grey
              : 'transparent',
        }}
      >
        {content}
        {step.showBadge && (
          <HuBadge
            variant="standard"
            badgeContent=""
            color="primary"
            sx={{ ml: 'auto', m: 2 }}
          />
        )}
      </Button>
    );
  };

  if (isLoading) {
    return (
      <Stack
        sx={{
          textAlign: 'center',
          alignItems: 'center',
          justifyContent: 'center',
          height: '100%',
        }}
      >
        <CircularProgress />
      </Stack>
    );
  }

  return (
    <Stack sx={{ overflowX: 'hidden', height: '100%' }}>
      {/* Header */}
      <Stack
        sx={{
          alignItems: 'center',
          justifyContent: 'space-between',
          flexDirection: 'row',
          backgroundColor: theme =>
            theme.palette.new.background.layout.tertiary,
          borderBottom: theme =>
            `1px solid ${theme.palette.new.border.neutral.divider}`,
          gap: 2,
          py: 1.5,
          px: 3,
          height: `${GROUP_MANAGEMENT_HEADER_HEIGHT}px`,
          flexShrink: 0,
        }}
      >
        <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 2 }}>
          {icon && (
            <WidgetIcon
              width={`${GROUP_MANAGEMENT_ICON_SIZE}px`}
              height={`${GROUP_MANAGEMENT_ICON_SIZE}px`}
              icon={icon}
            />
          )}
          <Typography
            variant="globalL"
            fontWeight="fontWeightSemiBold"
          >
            {title}
          </Typography>
        </Stack>
        <IconButton onClick={onClose}>
          <IconX />
        </IconButton>
      </Stack>

      {/* Main Content */}
      <Stack
        sx={{
          flexDirection: 'row',
          height: `calc(100% - ${GROUP_MANAGEMENT_HEADER_HEIGHT}px)`,
          overflow: 'hidden',
        }}
      >
        {/* Sidebar */}
        <Stack
          sx={{
            backgroundColor: theme =>
              theme.palette.new.background.layout.tertiary,
            borderRight: theme =>
              `1px solid ${theme.palette.new.border.neutral.divider}`,
            minWidth: `${GROUP_MANAGEMENT_SIDEBAR_WIDTH}px`,
            width: `${GROUP_MANAGEMENT_SIDEBAR_WIDTH}px`,
            overflowY: 'auto',
            overflowX: 'hidden',
          }}
        >
          <Typography
            variant="globalL"
            fontWeight="fontWeightSemiBold"
            sx={{ m: 3 }}
          >
            {t('group:manager_tool')}
          </Typography>
          <Stack sx={{ px: 2, pb: 2, gap: 1.5 }}>
            {steps.map(step => (
              <Fragment key={step.id}>{getStepComponent(step)}</Fragment>
            ))}
          </Stack>
        </Stack>

        {/* Content Area */}
        <Stack
          id={GROUP_MANAGEMENT_LAYOUT_CONTENT_ID}
          sx={{
            width: '100%',
            alignItems: 'center',
            overflowX: 'hidden',
            overflowY: 'scroll',
            p: 4,
            mb: footerActions ? `${GROUP_MANAGEMENT_FOOTER_HEIGHT}px` : 0,
            backgroundColor: theme =>
              theme.palette.new.background.layout.default,
          }}
        >
          <Stack
            sx={{
              width: '100%',
              maxWidth: `${GROUP_MANAGEMENT_MAX_CONTENT_WIDTH}px`,
            }}
          >
            {activeComponent}
          </Stack>
        </Stack>
      </Stack>

      {/* Footer Actions */}
      {footerActions && (
        <FixedActionFooter
          left={GROUP_MANAGEMENT_SIDEBAR_WIDTH}
          actions={footerActions}
        />
      )}
    </Stack>
  );
};

export default GroupManagementLayout;
