moex-vibe/apps/frontend/src/pages/broker/BrokerOperationsTable.tsx

import { Link } from 'react-router-dom';
import type { ReactNode } from 'react';
import type { BrokerMoney, BrokerOperation, BrokerOperationsPage } from '../../api/responses';
import {
  getBrokerInstrumentPath,
  getBrokerOperationImpact,
  getBrokerOperationTypeLabel,
  type BrokerOperationImpact,
} from './brokerDisplay';
import { TableSkeleton } from '../../components/TableSkeleton';

const tableStyle = {
  width: '100%',
  borderCollapse: 'collapse',
  fontSize: 14,
} satisfies React.CSSProperties;

const thStyle = {
  borderBottom: '1px solid #e0e0e0',
  color: 'var(--color-text-secondary)',
  fontWeight: 600,
  padding: '10px 8px',
} satisfies React.CSSProperties;

const tdStyle = {
  borderBottom: '1px solid #eeeeee',
  padding: '10px 8px',
  verticalAlign: 'top',
} satisfies React.CSSProperties;

function formatMoney(value: BrokerMoney | null | undefined) {
  if (!value) return '-';
  const formatted = new Intl.NumberFormat('ru-RU', {
    style: 'currency',
    currency: value.currency || 'RUB',
    maximumFractionDigits: 2,
  }).format(value.value);
  return value.value > 0 ? `+${formatted}` : formatted;
}

function formatDate(value: string | null) {
  if (!value) return '-';

  return new Date(value).toLocaleString('ru-RU');
}

function moneyColor(impact: BrokerOperationImpact): string {
  if (impact === 'adds') return 'var(--color-positive)';
  if (impact === 'reduces') return 'var(--color-negative)';

  return 'var(--color-text)';
}

function OperationInstrument({ operation }: { operation: BrokerOperation }) {
  const ticker = operation.ticker || operation.description || '-';
  const path = getBrokerInstrumentPath({
    ticker: operation.ticker,
    instrumentType: operation.instrumentType,
    classCode: operation.classCode,
  });
  const name = operation.name || operation.description;

  if (!path && !name) return <span>-</span>;
  if (!path) return <span>{name}</span>;
  if (!ticker || ticker === '-') return <Link to={path}>{name}</Link>;

  return (
    <div style={{ display: 'grid', gap: 2 }}>
      <Link to={path} style={{ fontWeight: 700 }}>
        {ticker}
      </Link>
      {name && name !== ticker && (
        <span style={{ color: 'var(--color-text-secondary)', fontSize: 12 }}>{name}</span>
      )}
    </div>
  );
}

const pagButtonStyle = {
  padding: '6px 14px',
  borderRadius: 6,
  border: '1px solid #e0e0e0',
  background: 'var(--color-surface)',
  color: 'var(--color-text)',
  fontSize: 14,
  fontWeight: 600,
  cursor: 'pointer',
  lineHeight: 1.4,
} satisfies React.CSSProperties;

const pagButtonDisabledStyle = {
  ...pagButtonStyle,
  opacity: 0.35,
  cursor: 'not-allowed',
} satisfies React.CSSProperties;

export function BrokerOperationsTable({
  title,
  headerAction,
  emptyMessage,
  isLoading,
  isFetching,
  page,
  pagination,
}: BrokerOperationsTableProps) {
  const pageNumber = pagination?.pageNumber;
  const canGoBack = pagination?.canGoBack ?? false;
  const canGoForward = pagination?.canGoForward ?? false;
  const onPrevious = pagination?.onPrevious;
  const onNext = pagination?.onNext;
  const operations = page?.items ?? [];

  return (
    <section aria-busy={isFetching}>
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: 12,
          justifyContent: 'space-between',
          marginBottom: 12,
        }}
      >
        <h2 style={{ fontSize: 20, margin: 0 }}>{title}</h2>
        {headerAction}
        {pagination && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <button
              type="button"
              aria-label="Предыдущая страница"
              onClick={onPrevious}
              disabled={!canGoBack || isFetching}
              style={canGoBack && !isFetching ? pagButtonStyle : pagButtonDisabledStyle}
            >
              {isFetching ? (
                <span
                  className="loading-spinner"
                  style={{ width: 14, height: 14, display: 'block' }}
                />
              ) : (
                '←'
              )}
            </button>
            <span
              style={{
                minWidth: 20,
                textAlign: 'center',
                color: 'var(--color-text-secondary)',
                fontSize: 14,
                fontWeight: 600,
              }}
            >
              {pageNumber}
            </span>
            <button
              type="button"
              aria-label="Следующая страница"
              onClick={onNext}
              disabled={!canGoForward || isFetching}
              style={canGoForward && !isFetching ? pagButtonStyle : pagButtonDisabledStyle}
            >
              {isFetching ? (
                <span
                  className="loading-spinner"
                  style={{ width: 14, height: 14, display: 'block' }}
                />
              ) : (
                '→'
              )}
            </button>
          </div>
        )}
      </div>

      {isLoading ? (
        <div style={{ overflowX: 'auto', background: 'var(--color-surface)' }}>
          <table style={tableStyle}>
            <thead>
              <tr>
                <th align="left" style={thStyle}>
                  Дата
                </th>
                <th align="left" style={thStyle}>
                  Тип
                </th>
                <th align="left" style={thStyle}>
                  Инструмент
                </th>
                <th align="right" style={thStyle}>
                  Сумма
                </th>
              </tr>
            </thead>
            <TableSkeleton
              rows={5}
              columns={[{ width: '35%' }, { width: '30%' }, { width: '40%' }, { width: '25%' }]}
            />
          </table>
        </div>
      ) : operations.length === 0 && !isFetching ? (
        <p style={{ color: 'var(--color-text-secondary)' }}>{emptyMessage}</p>
      ) : (
        <div className="table-container">
          <div style={{ overflowX: 'auto', background: 'var(--color-surface)' }}>
            <table style={tableStyle}>
              <thead>
                <tr>
                  <th align="left" style={thStyle}>
                    Дата
                  </th>
                  <th align="left" style={thStyle}>
                    Тип
                  </th>
                  <th align="left" style={thStyle}>
                    Инструмент
                  </th>
                  <th align="right" style={thStyle}>
                    Сумма
                  </th>
                </tr>
              </thead>
              <tbody>
                {operations.map((operation) => {
                  const impact = getBrokerOperationImpact(operation);
                  return (
                    <tr key={operation.cursor || operation.id}>
                      <td style={tdStyle}>{formatDate(operation.date)}</td>
                      <td style={tdStyle}>
                        <span>{getBrokerOperationTypeLabel(operation)}</span>
                      </td>
                      <td style={tdStyle}>
                        <OperationInstrument operation={operation} />
                      </td>
                      <td
                        align="right"
                        style={{ ...tdStyle, color: moneyColor(impact), fontWeight: 700 }}
                      >
                        {formatMoney(operation.payment)}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
          {isFetching && (
            <div className="table-loading-overlay" role="status">
              <div className="loading-spinner" aria-hidden="true" />
              <span style={{ fontSize: 13, color: 'var(--color-text-secondary)' }}>
                {pagination ? `Загрузка страницы ${pageNumber}…` : 'Обновление операций…'}
              </span>
            </div>
          )}
        </div>
      )}
    </section>
  );
}

type BrokerOperationsTableProps = {
  title: string;
  headerAction?: ReactNode;
  emptyMessage: string;
  isLoading: boolean;
  isFetching: boolean;
  page: BrokerOperationsPage | undefined;
  pagination?: {
    pageNumber: number;
    canGoBack: boolean;
    canGoForward: boolean;
    onPrevious: () => void;
    onNext: () => void;
  };
};