import { useCallback } from 'react';
import { Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { followUpApi } from '../../../api/health/followUp';
import type { FollowUpRecord } from '../../../api/health/followUp';
import { usePaginatedData } from '../../../hooks/usePaginatedData';

interface Props {
  patientId: string;
}

const columns: ColumnsType<FollowUpRecord> = [
  {
    title: '执行日期',
    dataIndex: 'executed_date',
    key: 'executed_date',
    width: 120,
  },
  {
    title: '随访结果',
    dataIndex: 'result',
    key: 'result',
    ellipsis: true,
  },
  {
    title: '患者状况',
    dataIndex: 'patient_condition',
    key: 'patient_condition',
    ellipsis: true,
  },
  {
    title: '医嘱',
    dataIndex: 'medical_advice',
    key: 'medical_advice',
    ellipsis: true,
  },
  {
    title: '下次随访日期',
    dataIndex: 'next_follow_up_date',
    key: 'next_follow_up_date',
    width: 130,
    render: (v?: string) => v || '-',
  },
];

/**
 * 随访记录标签页 — 分页表格
 */
export function FollowUpTab({ patientId }: Props) {
  const fetcher = useCallback(
    async (page: number, pageSize: number) => {
      return followUpApi.listRecords({
        patient_id: patientId,
        page,
        page_size: pageSize,
      });
    },
    [patientId],
  );

  const { data, total, page, loading, refresh } = usePaginatedData<FollowUpRecord>(
    fetcher,
    10,
  );

  return (
    <Table
      columns={columns}
      dataSource={data}
      rowKey="id"
      loading={loading}
      size="small"
      pagination={{
        current: page,
        total,
        pageSize: 10,
        onChange: (p) => refresh(p),
        showTotal: (t) => `共 ${t} 条`,
        style: { margin: 0 },
      }}
    />
  );
}