import type { Scroller2Props } from '~/src/components/Scroller2';
import type { ReactNode } from 'react';

import { Table, TableBody, TableCell, TableHead, TableRow } from './Table';

export interface DataTableColumn<Row> {
  key: string;
  header: ReactNode;
  width?: string;
  align?: 'left' | 'right';
  renderCell(row: Row, context: { rowIndex: number }): ReactNode;
}

// Curated subset of Scroller2Props — extending the full type would inherit
// WithSpacingProps (margin/padding/etc), which would land on Scroller2's
// inner Box instead of the surrounding Card and confuse layout semantics.
type DataTableScrollProps = Pick<
  Scroller2Props,
  | 'maxHeight'
  | 'minHeight'
  | 'rememberPositionKey'
  | 'withScrollBar'
  | 'onScroll'
  | 'onScrollStart'
  | 'onMount'
>;

export interface DataTableProps<Row> extends DataTableScrollProps {
  testId?: string;
  columns: DataTableColumn<Row>[];
  rows: Row[];
  getRowKey(row: Row): string;
  renderState?(params: { isEmpty: boolean }): ReactNode;
  renderAfter?(): ReactNode;
}

export const DataTable = <Row,>({
  testId,
  columns,
  rows,
  getRowKey,
  renderState,
  renderAfter,
  ...scrollerProps
}: DataTableProps<Row>) => {
  const getAlign = ({ align }: DataTableColumn<Row>) => align ?? 'left';
  const stateContent = renderState?.({ isEmpty: rows.length === 0 });

  return (
    <Table
      testId={testId}
      renderAfter={renderAfter}
      withOverflowGradients
      {...scrollerProps}
    >
      <TableHead style={{ position: 'sticky', top: 0, zIndex: 1 }}>
        <TableRow>
          {columns.map((col) => (
            <TableCell
              key={col.key}
              isHead
              align={getAlign(col)}
              style={{
                borderLeft: 0,
                boxShadow: 'inset 0 -1px 0 #333',
                width: col.width,
                height: 'auto',
                padding: '1.2rem 1.6rem',
                fontSize: '1.3rem',
                fontWeight: 400,
                color: '#999',
              }}
            >
              {col.header}
            </TableCell>
          ))}
        </TableRow>
      </TableHead>
      <TableBody>
        {stateContent ? (
          <tr data-testid="dataTable-state">
            <td colSpan={columns.length} style={{ padding: '1.6rem' }}>
              {stateContent}
            </td>
          </tr>
        ) : (
          rows.map((row, index) => (
            <TableRow
              key={getRowKey(row)}
              style={{ background: index % 2 === 0 ? '#000' : '#111' }}
            >
              {columns.map((col) => (
                <TableCell
                  key={col.key}
                  align={getAlign(col)}
                  style={{
                    borderLeft: 0,
                    width: col.width,
                    maxWidth: undefined,
                    height: 'auto',
                    padding: '1.4rem 1.6rem',
                    fontSize: '1.5rem',
                  }}
                >
                  {col.renderCell(row, { rowIndex: index })}
                </TableCell>
              ))}
            </TableRow>
          ))
        )}
      </TableBody>
    </Table>
  );
};