import { type FC, useState } from 'react';
import { useNavigate } from 'react-router';

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

import CardContainer from '@material-hu/components/design-system/CardContainer';
import HuDrawer from '@material-hu/components/design-system/Drawer';
import HuList from '@material-hu/components/design-system/List';
import HuListItem from '@material-hu/components/design-system/List/components/ListItem';

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

import { serviceManagementRoutes } from '../../routes';
import {
  type AgentGroup,
  type AgentGroupUsage,
  type TaskRelatedCatalogItemUsage,
} from '../../types';

const MAX_CATALOG_ITEMS_TO_SHOW = 5;

type Props = {
  agentGroup: AgentGroup | null;
  agentGroupUsage: AgentGroupUsage | null;
  action: 'deletion' | 'deactivation';
};

type CatalogItem = {
  id: string;
  name: string;
};

type ServiceItemsCardProps = {
  items: CatalogItem[];
  maxItems: number;
  onShowMore: () => void;
  renderTitle: (item: CatalogItem) => string;
  showMoreText: string;
};

const ServiceItemsCard: FC<ServiceItemsCardProps> = ({
  items,
  maxItems,
  onShowMore,
  renderTitle,
  showMoreText,
}) => {
  const theme = useTheme();
  const itemsToShow = items.slice(0, maxItems);
  const hasMore = items.length > maxItems;

  return (
    <CardContainer
      padding={0}
      fullWidth
      sx={{
        backgroundColor: ({ palette }) => palette.new.background.layout.default,
      }}
    >
      <HuList>
        {itemsToShow.map((item, index) => (
          <HuListItem
            key={item.id}
            text={{ title: renderTitle(item) }}
            divider={index !== itemsToShow.length - 1 || hasMore}
          />
        ))}
        {hasMore && (
          <HuListItem
            onClick={onShowMore}
            text={{ title: showMoreText }}
            sideContent={
              <IconChevronRight
                color={theme?.palette?.new.text.neutral.default}
              />
            }
          />
        )}
      </HuList>
    </CardContainer>
  );
};

type DrawerListProps = {
  items: CatalogItem[];
  renderTitle: (item: CatalogItem) => string;
};

const DrawerList: FC<DrawerListProps> = ({ items, renderTitle }) => (
  <CardContainer
    padding={0}
    fullWidth
    sx={{
      backgroundColor: ({ palette }) => palette.new.background.layout.default,
    }}
  >
    <HuList>
      {items.map((item, index) => (
        <HuListItem
          key={item.id}
          text={{ title: renderTitle(item) }}
          divider={index !== items.length - 1}
        />
      ))}
    </HuList>
  </CardContainer>
);

// Business logic helpers
const getDisplayConfig = (
  agentGroupUsage: AgentGroupUsage,
  action: 'deletion' | 'deactivation',
) => {
  const hasOngoingTasks = agentGroupUsage.taskRelatedCatalogItems.length > 0;
  const showOngoingTasks = action === 'deletion' && hasOngoingTasks;

  if (showOngoingTasks) {
    return {
      primaryItems: agentGroupUsage.taskRelatedCatalogItems,
      drawerItems: agentGroupUsage.taskRelatedCatalogItems,
      isOngoingTasksMode: true,
    };
  }

  return {
    primaryItems: agentGroupUsage.catalogItems,
    drawerItems: hasOngoingTasks
      ? agentGroupUsage.taskRelatedCatalogItems
      : agentGroupUsage.catalogItems,
    isOngoingTasksMode: hasOngoingTasks && action === 'deletion',
  };
};

const AgentGroupUsageAlertBody: FC<Props> = ({
  agentGroupUsage,
  agentGroup,
  action,
}) => {
  const { t } = useLokaliseTranslation(['service_management', 'general']);
  const navigate = useNavigate();
  const [showMoreDrawerOpen, setShowMoreDrawerOpen] = useState(false);

  if (!agentGroupUsage || !agentGroup) {
    return null;
  }

  const { primaryItems, drawerItems, isOngoingTasksMode } = getDisplayConfig(
    agentGroupUsage,
    action,
  );

  const showOngoingTasks = action === 'deletion' && isOngoingTasksMode;
  const remainingCount = primaryItems.length - MAX_CATALOG_ITEMS_TO_SHOW;

  // Title renderers
  const renderOngoingTaskTitle = (item: CatalogItem) =>
    t('SERVICE_ITEM_ONGOING_TASK_COUNT', {
      count: (item as TaskRelatedCatalogItemUsage).ongoingTaskCount,
      name: item.name,
    });

  const renderRegularTitle = (item: CatalogItem) => item.name;

  const primaryTitleRenderer = isOngoingTasksMode
    ? renderOngoingTaskTitle
    : renderRegularTitle;

  const drawerTitleRenderer = isOngoingTasksMode
    ? renderOngoingTaskTitle
    : renderRegularTitle;

  // Helper texts
  const getMainHelperText = () => {
    if (showOngoingTasks) {
      return t('cant_delete_agent_group_service_items_description');
    }
    return t('cant_deactivate_agent_group_description');
  };

  const getBottomHelperText = () => {
    if (showOngoingTasks) {
      return t('cant_delete_agent_group_service_items_helper_text');
    }

    const count = primaryItems.slice(0, MAX_CATALOG_ITEMS_TO_SHOW).length;
    return action === 'deletion'
      ? t('reassign_before_eliminating', { count })
      : t('reassign_before_deactivating', { count });
  };

  const getDrawerHelperText = () => {
    if (isOngoingTasksMode) {
      return t('ongoing_tasks_helper_text', { name: agentGroup.name });
    }
    return t('associated_service_helper_text', {
      name: agentGroup.name,
      count: agentGroupUsage.catalogItems.length,
    });
  };

  return (
    <Stack sx={{ gap: 2, minWidth: '540px' }}>
      <HuDrawer
        title={t('associated_services')}
        open={showMoreDrawerOpen}
        onClose={() => setShowMoreDrawerOpen(false)}
        hasBackButton={false}
        primaryButtonProps={{
          variant: 'primary',
          fullWidth: true,
          children: t('go_to_catalog'),
          onClick: () => navigate(serviceManagementRoutes.serviceItems()),
        }}
        secondaryButtonProps={{
          fullWidth: true,
          variant: 'tertiary',
          children: t('general:close'),
          onClick: () => setShowMoreDrawerOpen(false),
        }}
      >
        <Stack sx={{ gap: 2 }}>
          <Typography variant="globalS">{getDrawerHelperText()}</Typography>
          <DrawerList
            items={drawerItems}
            renderTitle={drawerTitleRenderer}
          />
        </Stack>
      </HuDrawer>
      <Typography variant="globalS">{getMainHelperText()}</Typography>
      <ServiceItemsCard
        items={primaryItems}
        maxItems={MAX_CATALOG_ITEMS_TO_SHOW}
        onShowMore={() => setShowMoreDrawerOpen(true)}
        renderTitle={primaryTitleRenderer}
        showMoreText={t('and_n_services_more', { count: remainingCount })}
      />
      <Typography variant="globalS">{getBottomHelperText()}</Typography>
    </Stack>
  );
};

export default AgentGroupUsageAlertBody;