import { useMemo } from 'react';
import { MaterialReactTable, MRT_ColumnDef } from 'material-react-table';
import mockData from '../data/mockData';

function formatCurrency(amount: number) {
  return amount?.toLocaleString('ru-RU', {
    style: 'currency',
    currency: 'RUB',
    minimumFractionDigits: 0,
  }) ?? '';
}

const statusColor: Record<string, string> = {
  'Завершена': '#4caf50',
  'Ожидается': '#ff9800',
  'Ошибка': '#f44336',
};

export default function BillingPayoutsTable() {
  const columns = useMemo<MRT_ColumnDef<any>[]>(
    () => [
      { accessorKey: 'id', header: 'ID' },
      { accessorKey: 'amount', header: 'Сумма',
        Cell: ({ cell }) => formatCurrency(cell.getValue() as number) },
      { accessorKey: 'date', header: 'Дата' },
      { accessorKey: 'status', header: 'Статус',
        Cell: ({ cell }) => (
          <span style={{ color: statusColor[cell.getValue() as string] || '#333', fontWeight: 600 }}>
            {cell.getValue() as string}
          </span>
        )
      },
      { accessorKey: 'method', header: 'Способ' },
    ],
    []
  );

  return (
    <MaterialReactTable
      columns={columns}
      data={mockData.payouts}
      enableColumnActions={false}
      enableColumnFilters={false}
      enableSorting={true}
      enablePagination={true}
      muiTableBodyCellProps={{ sx: { fontSize: 14 } }}
      muiTableHeadCellProps={{ sx: { fontWeight: 700 } }}
      initialState={{ pagination: { pageSize: 10, pageIndex: 0 } }}
    />
  );
}