// Nodegroup diff table for the region compare — matched by name, one row
// per nodegroup seen on either side.

import type { NodegroupDiff } from "@/lib/api-types";
import { num } from "@/lib/fmt";
import { DataTable, Td, Th } from "@/components/ui/DataTable";
import { Empty } from "@/components/ui/Empty";

function TypesCell({ types }: { types: string[] | null }) {
  return types && types.length > 0 ? (
    <span className="text-text-secondary">{types.join(", ")}</span>
  ) : (
    <span className="text-text-muted">—</span>
  );
}

export function NodegroupDiffTable({ nodegroups }: { nodegroups: NodegroupDiff[] }) {
  if (nodegroups.length === 0) {
    return <Empty>No nodegroups on either side.</Empty>;
  }
  return (
    <DataTable>
      <thead>
        <tr>
          <Th>Nodegroup</Th>
          <Th>Instance types A</Th>
          <Th>Instance types B</Th>
          <Th numeric>Count A</Th>
          <Th numeric>Count B</Th>
          <Th numeric>Δ count</Th>
        </tr>
      </thead>
      <tbody>
        {nodegroups.map((ng) => {
          const countDelta =
            ng.countA !== null && ng.countB !== null ? ng.countB - ng.countA : null;
          return (
            <tr key={ng.name} className="hover:bg-surface-1">
              <Td><span className="text-text-secondary">{ng.name}</span></Td>
              <Td><TypesCell types={ng.instanceTypesA} /></Td>
              <Td><TypesCell types={ng.instanceTypesB} /></Td>
              <Td numeric>{num(ng.countA)}</Td>
              <Td numeric>{num(ng.countB)}</Td>
              <Td numeric>
                {countDelta === null ? (
                  <span className="text-text-muted">—</span>
                ) : (
                  `${countDelta > 0 ? "+" : ""}${countDelta}`
                )}
              </Td>
            </tr>
          );
        })}
      </tbody>
    </DataTable>
  );
}