import { FC, ReactNode } from 'react';
import { useTranslation } from 'react-i18next';

import CloseIcon from '@material-hu/icons/material/Close';
import { TablerIcon } 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 Button from '@material-hu/components/design-system/Buttons/Button';

import { IconInterface } from 'src/types/icons';

import CustomIcon from 'src/components/CustomIcon';
import FixedActionFooter from 'src/components/FixedActionFooter';

import {
  GROUP_MANAGEMENT_FOOTER_HEIGHT,
  GROUP_MANAGEMENT_HEADER_HEIGHT,
  GROUP_MANAGEMENT_ICON_SIZE,
  GROUP_MANAGEMENT_MAX_CONTENT_WIDTH,
  GROUP_MANAGEMENT_SIDEBAR_WIDTH,
} from '../constants';

export const GROUP_MANAGEMENT_LAYOUT_CONTENT_ID =
  'group-management-layout-content';

type Step = {
  id: string;
  label: string;
  icon: TablerIcon;
  disabled?: boolean;
};

type GroupManagementLayoutProps = {
  title: string;
  icon?: IconInterface;
  steps: Step[];
  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: Step): ReactNode => {
    const stepColor = (theme: Theme) =>
      `${
        activeStep === step.id
          ? theme.palette.textColors?.neutralText
          : theme.palette.textColors?.neutralTextLighter
      }`;

    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)}
        fullWidth
        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.hugoBackground?.neutralBgSecondary
              : 'transparent',
        }}
      >
        {content}
      </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.hugoBackground?.neutralBgTerciary,
          borderBottom: theme =>
            `1px solid ${theme.palette.border?.neutralDivider}`,
          gap: 2,
          py: 1.5,
          px: 3,
          height: `${GROUP_MANAGEMENT_HEADER_HEIGHT}px`,
          flexShrink: 0,
        }}
      >
        <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 2 }}>
          {icon && (
            <CustomIcon
              icon={icon}
              size={GROUP_MANAGEMENT_ICON_SIZE}
            />
          )}
          <Typography
            variant="globalL"
            fontWeight="fontWeightSemiBold"
          >
            {title}
          </Typography>
        </Stack>
        <IconButton onClick={onClose}>
          <CloseIcon />
        </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.hugoBackground?.neutralBgTerciary,
            borderRight: theme =>
              `1px solid ${theme.palette.border?.neutralDivider}`,
            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 => (
              <div key={step.id}>{getStepComponent(step)}</div>
            ))}
          </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,
          }}
        >
          <Stack
            sx={{
              width: '100%',
              maxWidth: `${GROUP_MANAGEMENT_MAX_CONTENT_WIDTH}px`,
            }}
          >
            {activeComponent}
          </Stack>
        </Stack>
      </Stack>

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

export default GroupManagementLayout;