"use client";

import { Table, Text } from "@mantine/core";
import type { ReactNode } from "react";
import { HScrollTable } from "@/lib/components/HScrollTable";
import styles from "@/routes/promo-code-campaigns/_components/promo.module.css";

export interface MemberColumn<T> {
  key: string;
  header: ReactNode;
  render: (row: T, index: number) => ReactNode;
  /** Right-aligned tabular figures, as in the promo tables. */
  numeric?: boolean;
  width?: number;
  onCellClick?: "stop" | "row";
}

/**
 * The promo module's table, for the member pages.
 *
 * Uses the same markup and the same `promo.module.css` classes as
 * `PromoCodesTable` — sticky `.tableHead`, `.th` heads, accent-railed `.row`
 * hover, `.num` figures — so both modules are literally the same table rather
 * than two tables styled to look alike. Column specs are passed in because the
 * member tables differ per tab.
 *
 * Unlike the promo callers, this draws its own `.tableCard` frame: the member
 * tabs render tables directly on the page, not inside a bordered Card.
 */
export function MemberDataTable<T>({
  rows,
  columns,
  minWidth = 1000,
  onRowClick,
  rowKey,
  rowStyle,
  emptyMessage = "No records found",
}: {
  rows: T[];
  columns: MemberColumn<T>[];
  minWidth?: number;
  onRowClick?: (row: T) => void;
  rowKey?: (row: T, index: number) => string;
  rowStyle?: (row: T) => React.CSSProperties | undefined;
  emptyMessage?: string;
}) {
  return (
    <div className={styles.tableCard}>
      <HScrollTable minWidth={minWidth}>
        <Table stickyHeader style={{ minWidth }}>
          <Table.Thead className={styles.tableHead}>
            <Table.Tr>
              {columns.map((column) => (
                <Table.Th
                  key={column.key}
                  className={styles.th}
                  style={column.width ? { width: column.width } : undefined}
                >
                  {column.header}
                </Table.Th>
              ))}
            </Table.Tr>
          </Table.Thead>
          <Table.Tbody>
            {rows.length === 0 ? (
              <Table.Tr>
                <Table.Td
                  colSpan={columns.length}
                  style={{ textAlign: "center" }}
                >
                  <Text c="dimmed" py={16}>
                    {emptyMessage}
                  </Text>
                </Table.Td>
              </Table.Tr>
            ) : (
              rows.map((row, index) => (
                <Table.Tr
                  key={rowKey ? rowKey(row, index) : index}
                  className={styles.row}
                  // `.row` assumes a clickable row, so put the default cursor
                  // back when there is nothing to click.
                  style={{
                    ...(onRowClick ? undefined : { cursor: "default" }),
                    ...(rowStyle?.(row) ?? {}),
                  }}
                  onClick={onRowClick ? () => onRowClick(row) : undefined}
                >
                  {columns.map((column) => (
                    <Table.Td
                      key={column.key}
                      className={column.numeric ? styles.num : undefined}
                      onClick={
                        column.onCellClick === "stop"
                          ? (event) => event.stopPropagation()
                          : undefined
                      }
                    >
                      {column.render(row, index)}
                    </Table.Td>
                  ))}
                </Table.Tr>
              ))
            )}
          </Table.Tbody>
        </Table>
      </HScrollTable>
    </div>
  );
}