/**
 * `BannedIpsSection` component.
 *
 * Displays a paginated table of IPs currently banned in a specific fail2ban
 * jail.  Supports server-side search filtering (debounced), page navigation,
 * page-size selection, and per-row unban actions.
 *
 * Only the current page is geo-enriched by the backend, so the component
 * remains fast even when a jail contains thousands of banned IPs.
 */

import {
  Badge,
  Button,
  DataGrid,
  DataGridBody,
  DataGridCell,
  DataGridHeader,
  DataGridHeaderCell,
  DataGridRow,
  Dropdown,
  Field,
  Input,
  MessageBar,
  MessageBarBody,
  Option,
  Spinner,
  Text,
  Tooltip,
  makeStyles,
  tokens,
  type TableColumnDefinition,
  createTableColumn,
} from "@fluentui/react-components";
import { useCommonSectionStyles } from "../../theme/commonStyles";
import { formatTimestamp } from "../../utils/formatDate";
import {
  ArrowClockwiseRegular,
  ChevronLeftRegular,
  ChevronRightRegular,
  DismissRegular,
  SearchRegular,
} from "@fluentui/react-icons";
import type { ActiveBan } from "../../types/jail";

// ---------------------------------------------------------------------------
// Constants
// ---------------------------------------------------------------------------

/** Available page-size options. */
const PAGE_SIZE_OPTIONS = [10, 25, 50, 100] as const;

// ---------------------------------------------------------------------------
// Styles
// ---------------------------------------------------------------------------

const useStyles = makeStyles({
  header: {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    gap: tokens.spacingHorizontalM,
    paddingBottom: tokens.spacingVerticalS,
    borderBottomWidth: "1px",
    borderBottomStyle: "solid",
    borderBottomColor: tokens.colorNeutralStroke2,
  },
  headerLeft: {
    display: "flex",
    alignItems: "center",
    gap: tokens.spacingHorizontalM,
  },
  toolbar: {
    display: "flex",
    alignItems: "flex-end",
    gap: tokens.spacingHorizontalS,
    flexWrap: "wrap",
  },
  searchField: {
    minWidth: "200px",
    flexGrow: 1,
  },
  tableWrapper: {
    overflowX: "auto",
  },
  centred: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    padding: tokens.spacingVerticalXXL,
  },
  pagination: {
    display: "flex",
    alignItems: "center",
    justifyContent: "flex-end",
    gap: tokens.spacingHorizontalS,
    paddingTop: tokens.spacingVerticalS,
    flexWrap: "wrap",
  },
  pageSizeWrapper: {
    display: "flex",
    alignItems: "center",
    gap: tokens.spacingHorizontalXS,
  },
  mono: {
    fontFamily: "Consolas, 'Courier New', monospace",
    fontSize: tokens.fontSizeBase200,
  },
});

// ---------------------------------------------------------------------------
// Column definitions
// ---------------------------------------------------------------------------

/** A row item augmented with an `onUnban` callback for the row action. */
interface BanRow {
  ban: ActiveBan;
  onUnban: (ip: string) => void;
}

const columns: TableColumnDefinition<BanRow>[] = [
  createTableColumn<BanRow>({
    columnId: "ip",
    renderHeaderCell: () => "IP Address",
    renderCell: ({ ban }) => (
      <Text
        style={{
          fontFamily: "Consolas, 'Courier New', monospace",
          fontSize: tokens.fontSizeBase200,
        }}
      >
        {ban.ip}
      </Text>
    ),
  }),
  createTableColumn<BanRow>({
    columnId: "country",
    renderHeaderCell: () => "Country",
    renderCell: ({ ban }) =>
      ban.country ? (
        <Text size={200}>{ban.country}</Text>
      ) : (
        <Text size={200} style={{ color: tokens.colorNeutralForeground4 }}>
          —
        </Text>
      ),
  }),
  createTableColumn<BanRow>({
    columnId: "banned_at",
    renderHeaderCell: () => "Banned At",
    renderCell: ({ ban }) => (
      <Text size={200}>{ban.banned_at ? formatTimestamp(ban.banned_at) : "—"}</Text>
    ),
  }),
  createTableColumn<BanRow>({
    columnId: "expires_at",
    renderHeaderCell: () => "Expires At",
    renderCell: ({ ban }) => (
      <Text size={200}>{ban.expires_at ? formatTimestamp(ban.expires_at) : "—"}</Text>
    ),
  }),
  createTableColumn<BanRow>({
    columnId: "actions",
    renderHeaderCell: () => "",
    renderCell: ({ ban, onUnban }) => (
      <Tooltip content={`Unban ${ban.ip}`} relationship="label">
        <Button
          size="small"
          appearance="subtle"
          icon={<DismissRegular />}
          onClick={() => {
            onUnban(ban.ip);
          }}
          aria-label={`Unban ${ban.ip}`}
        />
      </Tooltip>
    ),
  }),
];

// ---------------------------------------------------------------------------
// Props
// ---------------------------------------------------------------------------

/** Props for {@link BannedIpsSection}. */
export interface BannedIpsSectionProps {
  items: ActiveBan[];
  total: number;
  page: number;
  pageSize: number;
  search: string;
  loading: boolean;
  error: string | null;
  opError: string | null;
  onSearch: (term: string) => void;
  onPageChange: (page: number) => void;
  onPageSizeChange: (size: number) => void;
  onRefresh: () => void;
  onUnban: (ip: string) => void;
}

// ---------------------------------------------------------------------------
// Component
// ---------------------------------------------------------------------------

/**
 * Paginated section showing currently banned IPs for a single jail.
 *
 * @param props - {@link BannedIpsSectionProps}
 */
export function BannedIpsSection({
  items,
  total,
  page,
  pageSize,
  search,
  loading,
  error,
  opError,
  onSearch,
  onPageChange,
  onPageSizeChange,
  onRefresh,
  onUnban,
}: BannedIpsSectionProps): React.JSX.Element {
  const styles = useStyles();
  const sectionStyles = useCommonSectionStyles();

  const rows: BanRow[] = items.map((ban) => ({
    ban,
    onUnban,
  }));

  const totalPages = pageSize > 0 ? Math.ceil(total / pageSize) : 1;

  return (
    <div className={sectionStyles.section}>
      {/* Section header */}
      <div className={styles.header}>
        <div className={styles.headerLeft}>
          <Text as="h2" size={500} weight="semibold">
            Currently Banned IPs
          </Text>
          <Badge appearance="tint">{String(total)}</Badge>
        </div>
        <Button
          size="small"
          appearance="subtle"
          icon={<ArrowClockwiseRegular />}
          onClick={onRefresh}
          aria-label="Refresh banned IPs"
        />
      </div>

      {/* Toolbar */}
      <div className={styles.toolbar}>
        <div className={styles.searchField}>
          <Field label="Search by IP">
            <Input
              aria-label="Search by IP"
              contentBefore={<SearchRegular />}
              placeholder="e.g. 192.168"
              value={search}
              onChange={(_, d) => {
                onSearch(d.value);
              }}
            />
          </Field>
        </div>
      </div>

      {/* Error bars */}
      {error && (
        <MessageBar intent="error">
          <MessageBarBody>{error}</MessageBarBody>
        </MessageBar>
      )}
      {opError && (
        <MessageBar intent="error">
          <MessageBarBody>{opError}</MessageBarBody>
        </MessageBar>
      )}

      {/* Table */}
      {loading ? (
        <div className={styles.centred}>
          <Spinner label="Loading banned IPs…" />
        </div>
      ) : items.length === 0 ? (
        <div className={styles.centred}>
          <Text size={200} style={{ color: tokens.colorNeutralForeground3 }}>
            No IPs currently banned in this jail.
          </Text>
        </div>
      ) : (
        <div className={styles.tableWrapper}>
          <DataGrid
            items={rows}
            columns={columns}
            getRowId={(row: BanRow) => row.ban.ip}
            focusMode="composite"
          >
            <DataGridHeader>
              <DataGridRow>
                {({ renderHeaderCell }) => (
                  <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
                )}
              </DataGridRow>
            </DataGridHeader>
            <DataGridBody<BanRow>>
              {({ item, rowId }) => (
                <DataGridRow<BanRow> key={rowId}>
                  {({ renderCell }) => (
                    <DataGridCell>{renderCell(item)}</DataGridCell>
                  )}
                </DataGridRow>
              )}
            </DataGridBody>
          </DataGrid>
        </div>
      )}

      {/* Pagination */}
      {total > 0 && (
        <div className={styles.pagination}>
          <div className={styles.pageSizeWrapper}>
            <Text size={200}>Rows per page:</Text>
            <Dropdown
              aria-label="Rows per page"
              value={String(pageSize)}
              selectedOptions={[String(pageSize)]}
              onOptionSelect={(_, d) => {
                const newSize = Number(d.optionValue);
                if (!Number.isNaN(newSize)) {
                  onPageSizeChange(newSize);
                  onPageChange(1);
                }
              }}
              style={{ minWidth: "80px" }}
            >
              {PAGE_SIZE_OPTIONS.map((n) => (
                <Option key={n} value={String(n)}>
                  {String(n)}
                </Option>
              ))}
            </Dropdown>
          </div>

          <Text size={200}>
            {String((page - 1) * pageSize + 1)}–
            {String(Math.min(page * pageSize, total))} of {String(total)}
          </Text>

          <Button
            size="small"
            appearance="subtle"
            icon={<ChevronLeftRegular />}
            disabled={page <= 1}
            onClick={() => {
              onPageChange(Math.max(1, page - 1));
            }}
            aria-label="Previous page"
          />
          <Button
            size="small"
            appearance="subtle"
            icon={<ChevronRightRegular />}
            disabled={page >= totalPages}
            onClick={() => {
              onPageChange(page + 1);
            }}
            aria-label="Next page"
          />
        </div>
      )}
    </div>
  );
}