AIclinicalresearch/frontend-v2/src/modules/asl/components/charting/BaselineTable.tsx

import React, { useMemo } from 'react';
import { Table, Typography, Empty } from 'antd';
import type { BaselineRow } from '../../utils/chartingExcelUtils';

const { Title } = Typography;

interface Props {
  data: BaselineRow[];
}

const KNOWN_FIELD_LABELS: Record<string, string> = {
  Study_ID: 'Study ID',
  study_id: 'Study ID',
  Intervention_Name: 'Intervention',
  intervention_name: 'Intervention',
  Control_Name: 'Control',
  control_name: 'Control',
  Intervention_N: 'Intervention N',
  intervention_n: 'Intervention N',
  Control_N: 'Control N',
  control_n: 'Control N',
  Age_Mean_SD: 'Age (Mean ± SD)',
  age_mean_sd: 'Age (Mean ± SD)',
  Male_Percent: 'Male %',
  male_percent: 'Male %',
  study_design: 'Study Design',
  Study_Design: 'Study Design',
};

function humanize(key: string): string {
  if (KNOWN_FIELD_LABELS[key]) return KNOWN_FIELD_LABELS[key];
  return key
    .replace(/_/g, ' ')
    .replace(/\b\w/g, (c) => c.toUpperCase());
}

const BaselineTable: React.FC<Props> = ({ data }) => {
  const columns = useMemo(() => {
    if (data.length === 0) return [];

    const allKeys = new Set<string>();
    data.forEach((row) => {
      Object.keys(row).forEach((k) => allKeys.add(k));
    });

    const priorityOrder = [
      'Study_ID', 'study_id',
      'Intervention_Name', 'intervention_name',
      'Control_Name', 'control_name',
      'Intervention_N', 'intervention_n',
      'Control_N', 'control_n',
      'Age_Mean_SD', 'age_mean_sd',
      'Male_Percent', 'male_percent',
    ];

    const orderedKeys: string[] = [];
    const seen = new Set<string>();

    for (const pk of priorityOrder) {
      if (allKeys.has(pk) && !seen.has(pk)) {
        orderedKeys.push(pk);
        seen.add(pk);
      }
    }
    for (const k of allKeys) {
      if (!seen.has(k)) {
        orderedKeys.push(k);
        seen.add(k);
      }
    }

    return orderedKeys.map((key) => ({
      title: humanize(key),
      dataIndex: key,
      key,
      ellipsis: true,
      render: (val: any) => {
        if (val === null || val === undefined) return '-';
        if (typeof val === 'object') return JSON.stringify(val);
        return String(val);
      },
    }));
  }, [data]);

  if (data.length === 0) {
    return <Empty description="暂无基线数据" />;
  }

  const dataSource = data.map((row, i) => ({ ...row, _rowKey: `row-${i}` }));

  return (
    <div className="w-full">
      <Title level={5} className="text-center mb-4">
        Table 1. 纳入研究的基线特征 (Baseline Characteristics of Included Studies)
      </Title>
      <Table
        columns={columns}
        dataSource={dataSource}
        rowKey="_rowKey"
        pagination={false}
        bordered
        size="small"
        scroll={{ x: 'max-content' }}
        className="baseline-academic-table"
      />
    </div>
  );
};

export default BaselineTable;