import { Title } from '@patternfly/react-core';
import { Table, TableVariant, Tbody, Td, Tr } from '@patternfly/react-table';
import React from 'react';
import {
  genericTableRowKey,
  isDualStack,
  NETWORK_TYPE_LABELS,
  useTranslation,
} from '../../../../common';
import { getManagementType, getStackTypeLabel } from './utils';
import { useFeature } from '../../../hooks/use-feature';
import { Cluster } from '@openshift-assisted/types/assisted-installer-service';

type ReviewTableRowsType = {
  rowId: string;
  cells: { title: string | React.ReactNode; props?: object }[];
}[];

export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
  const { t } = useTranslation();
  const isSingleClusterFeature = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
  const rows = React.useMemo(() => {
    const networkRows = [
      {
        rowId: 'network-management',
        cells: [
          { title: 'Networking management type' },
          {
            title: getManagementType(cluster),
            props: { 'data-testid': 'networking-management-type', colSpan: 2 },
          },
        ],
      },
      {
        rowId: 'stack-type',
        cells: [
          { title: 'Stack type', colSpan: 2 },
          {
            title: getStackTypeLabel(cluster, isSingleClusterFeature),
            props: { 'data-testid': 'stack-type', colSpan: 2 },
          },
        ],
      },
    ] as ReviewTableRowsType;

    !!cluster.machineNetworks?.length &&
      networkRows.push({
        rowId: 'machine-networks-cidr',
        cells: [
          { title: 'Machine networks CIDR' },
          {
            title: cluster.machineNetworks?.map((network) => (
              <span key={network.cidr}>
                {network.cidr}
                <br />
              </span>
            )),
            props: { 'data-testid': 'machine-networks' },
          },
          isDualStack(cluster)
            ? {
                title: cluster.machineNetworks?.map((network, index) => (
                  <span key={network.cidr}>
                    {index === 0 ? 'Primary' : 'Secondary'}
                    <br />
                  </span>
                )),
              }
            : { title: '' },
        ],
      });

    cluster.apiVips &&
      cluster.apiVips.length > 0 &&
      networkRows.push({
        rowId: 'api-ip',
        cells: [
          { title: 'API IP' },
          {
            title: cluster.apiVips?.map((apiVip) => (
              <span key={apiVip.ip}>
                {apiVip.ip}
                <br />
              </span>
            )),
            props: { 'data-testid': 'api-vip' },
          },
          isDualStack(cluster)
            ? {
                title: cluster.apiVips?.map((apiVip, index) => (
                  <span key={apiVip.ip}>
                    {index === 0 ? 'Primary' : 'Secondary'}
                    <br />
                  </span>
                )),
              }
            : { title: '' },
        ],
      });

    cluster.ingressVips &&
      cluster.ingressVips.length &&
      networkRows.push({
        rowId: 'ingress-ip',
        cells: [
          { title: 'Ingress IP' },
          {
            title: cluster.ingressVips?.map((ingressVip) => (
              <span key={ingressVip.ip}>
                {ingressVip.ip}
                <br />
              </span>
            )),
            props: { 'data-testid': 'ingress-vip' },
          },
          isDualStack(cluster)
            ? {
                title: cluster.ingressVips?.map((ingressVip, index) => (
                  <span key={ingressVip.ip}>
                    {index === 0 ? 'Primary' : 'Secondary'}
                    <br />
                  </span>
                )),
              }
            : { title: '' },
        ],
      });

    return networkRows;
  }, [cluster, isSingleClusterFeature]);

  const rowsAdvanced = React.useMemo(() => {
    return [
      {
        rowId: 'cluster-network-cidr',
        cells: [
          { title: 'Cluster network CIDR' },
          {
            title: cluster.clusterNetworks?.map((network) => (
              <span key={network.cidr}>
                {network.cidr}
                <br />
              </span>
            )),
            props: { 'data-testid': 'cluster-network-cidr' },
          },
          isDualStack(cluster) && {
            title: cluster.clusterNetworks?.map((network, index) => (
              <span key={network.cidr}>
                {index === 0 ? 'Primary' : 'Secondary'}
                <br />
              </span>
            )),
          },
        ].filter(Boolean),
      },
      {
        rowId: 'cluster-network-host-prefix',
        cells: [
          { title: 'Cluster network host prefix' },
          {
            title: cluster.clusterNetworks?.map((network) => (
              <span key={network.hostPrefix}>
                {network.hostPrefix}
                <br />
              </span>
            )),
            props: { 'data-testid': 'cluster-network-prefix' },
          },
          isDualStack(cluster) && {
            title: cluster.clusterNetworks?.map((network, index) => (
              <span key={network.hostPrefix}>
                {index === 0 ? 'Primary' : 'Secondary'}
                <br />
              </span>
            )),
          },
        ].filter(Boolean),
      },
      {
        rowId: 'service-network-cidr',
        cells: [
          { title: 'Service network CIDR' },
          {
            title: cluster.serviceNetworks?.map((network) => (
              <span key={network.cidr}>
                {network.cidr}
                <br />
              </span>
            )),
            props: { 'data-testid': 'service-network-cidr' },
          },
          isDualStack(cluster) && {
            title: cluster.serviceNetworks?.map((network, index) => (
              <span key={network.cidr}>
                {index === 0 ? 'Primary' : 'Secondary'}
                <br />
              </span>
            )),
          },
        ].filter(Boolean),
      },
      {
        rowId: 'networking-type',
        cells: [
          { title: 'Networking type' },
          {
            title: cluster.networkType ? NETWORK_TYPE_LABELS(t)[cluster.networkType] : '-',
            props: { 'data-testid': 'networking-type', colSpan: 2 },
          },
        ],
      },
    ] as ReviewTableRowsType;
  }, [cluster, t]);

  return (
    <>
      <Table
        variant={TableVariant.compact}
        borders={false}
        className={'review-table'}
        aria-label={'Networking review table'}
      >
        <Tbody>
          {rows.map((row, i) => (
            <Tr key={genericTableRowKey(row.rowId)}>
              {row.cells.map((cell, j) => (
                <Td key={`cell-${i}-${j}`} {...cell.props}>
                  {cell.title}
                </Td>
              ))}
            </Tr>
          ))}
        </Tbody>
      </Table>

      <br />
      <Title className="pf-v6-u-color-400" headingLevel="h4">
        Advanced networking settings
      </Title>

      <Table
        variant={TableVariant.compact}
        borders={false}
        className={'review-table'}
        aria-label={'Advanced networking review table'}
      >
        <Tbody>
          {rowsAdvanced.map((row, i) => (
            <Tr key={genericTableRowKey(row.rowId)}>
              {row.cells.map((cell, j) => (
                <Td key={`cell-${i}-${j}`} {...cell.props}>
                  {cell.title}
                </Td>
              ))}
            </Tr>
          ))}
        </Tbody>
      </Table>
    </>
  );
};
