hms/apps/web/src/pages/health/StatisticsDashboard/HealthDataCenter.tsx

import { Row, Col, Card, Statistic, Tag, Typography, Empty } from 'antd';
import type { HealthDataStats, DialysisStatistics } from '../../../api/health/points';

const { Text } = Typography;

interface HealthDataCenterProps {
  data: HealthDataStats | null;
  dialysisData?: DialysisStatistics | null;
  tab?: string;
}

function DialysisPanel({ data }: { data: DialysisStatistics | null | undefined }) {
  return (
    <Card type="inner" title={<span style={{ fontSize: 14, fontWeight: 600 }}>透析记录</span>} style={{ borderRadius: 8 }}>
      <Row gutter={[12, 12]}>
        <Col span={8}><Statistic title="总记录" value={data?.total_records ?? 0} styles={{ content: { fontSize: 20 } }} /></Col>
        <Col span={8}><Statistic title="本月新增" value={data?.this_month ?? 0} styles={{ content: { fontSize: 20, color: '#2563eb' } }} /></Col>
        <Col span={8}><Statistic title="待审核" value={data?.pending_review ?? 0} styles={{ content: { fontSize: 20, color: '#d97706' } }} /></Col>
      </Row>
      <Row gutter={[12, 12]} style={{ marginTop: 12 }}>
        <Col span={8}><Statistic title="并发症率" value={data?.complication_rate ?? 0} suffix="%" precision={1} styles={{ content: { fontSize: 18 } }} /></Col>
        <Col span={8}><Statistic title="平均超滤(ml)" value={data?.avg_ultrafiltration ?? 0} precision={0} styles={{ content: { fontSize: 18 } }} /></Col>
        <Col span={8}><Statistic title="平均时长(分)" value={data?.avg_duration ?? 0} precision={0} styles={{ content: { fontSize: 18 } }} /></Col>
      </Row>
      {(data?.type_distribution ?? []).length > 0 && (
        <div style={{ marginTop: 12 }}>
          <Text type="secondary" style={{ fontSize: 12 }}>类型分布: </Text>
          {data!.type_distribution.map((item) => (
            <Tag key={item.name} color="blue" style={{ marginTop: 4 }}>{item.name}: {item.value}</Tag>
          ))}
        </div>
      )}
    </Card>
  );
}

function LabPanel({ data }: { data: HealthDataStats | null }) {
  return (
    <Card type="inner" title={<span style={{ fontSize: 14, fontWeight: 600 }}>化验报告</span>} style={{ borderRadius: 8 }}>
      <Row gutter={[12, 12]}>
        <Col span={8}><Statistic title="总报告" value={data?.lab_reports.total_reports ?? 0} styles={{ content: { fontSize: 20 } }} /></Col>
        <Col span={8}><Statistic title="本月新增" value={data?.lab_reports.this_month ?? 0} styles={{ content: { fontSize: 20, color: '#2563eb' } }} /></Col>
        <Col span={8}><Statistic title="异常项" value={data?.lab_reports.abnormal_items ?? 0} styles={{ content: { fontSize: 20, color: '#dc2626' } }} /></Col>
      </Row>
      <Row gutter={[12, 12]} style={{ marginTop: 12 }}>
        <Col span={8}><Statistic title="待审核" value={data?.lab_reports.pending_review ?? 0} styles={{ content: { fontSize: 18, color: '#d97706' } }} /></Col>
        <Col span={8}><Statistic title="已审核" value={data?.lab_reports.reviewed ?? 0} styles={{ content: { fontSize: 18, color: '#059669' } }} /></Col>
      </Row>
      {(data?.lab_reports.type_distribution ?? []).length > 0 && (
        <div style={{ marginTop: 12 }}>
          <Text type="secondary" style={{ fontSize: 12 }}>类型分布: </Text>
          {data!.lab_reports.type_distribution.map((item) => (
            <Tag key={item.name} color="green" style={{ marginTop: 4 }}>{item.name}: {item.value}</Tag>
          ))}
        </div>
      )}
    </Card>
  );
}

function AppointmentsPanel({ data }: { data: HealthDataStats | null }) {
  return (
    <Card type="inner" title={<span style={{ fontSize: 14, fontWeight: 600 }}>预约统计</span>} style={{ borderRadius: 8 }}>
      <Row gutter={[12, 12]}>
        <Col span={8}><Statistic title="总预约" value={data?.appointments.total_appointments ?? 0} styles={{ content: { fontSize: 20 } }} /></Col>
        <Col span={8}><Statistic title="本月" value={data?.appointments.this_month ?? 0} styles={{ content: { fontSize: 20, color: '#2563eb' } }} /></Col>
        <Col span={8}><Statistic title="取消率" value={data?.appointments.cancel_rate ?? 0} suffix="%" precision={1} styles={{ content: { fontSize: 20, color: '#dc2626' } }} /></Col>
      </Row>
      {(data?.appointments.status_distribution ?? []).length > 0 && (
        <div style={{ marginTop: 12 }}>
          <Text type="secondary" style={{ fontSize: 12 }}>状态: </Text>
          {data!.appointments.status_distribution.map((item) => (
            <Tag key={item.name} color="purple" style={{ marginTop: 4 }}>{item.name}: {item.value}</Tag>
          ))}
        </div>
      )}
    </Card>
  );
}

function VitalSignsPanel({ data }: { data: HealthDataStats | null }) {
  return (
    <Card type="inner" title={<span style={{ fontSize: 14, fontWeight: 600 }}>体征上报率</span>} style={{ borderRadius: 8 }}>
      <Row gutter={[12, 12]}>
        <Col span={8}><Statistic title="总患者" value={data?.vital_signs_report_rate.total_patients ?? 0} styles={{ content: { fontSize: 20 } }} /></Col>
        <Col span={8}><Statistic title="本月上报" value={data?.vital_signs_report_rate.reported_patients ?? 0} styles={{ content: { fontSize: 20, color: '#059669' } }} /></Col>
        <Col span={8}><Statistic title="上报率" value={data?.vital_signs_report_rate.report_rate ?? 0} suffix="%" precision={1} styles={{ content: { fontSize: 20, color: '#7c3aed' } }} /></Col>
      </Row>
      {(data?.vital_signs_report_rate.daily_trend ?? []).length > 0 && (
        <div style={{ marginTop: 12 }}>
          <Text type="secondary" style={{ fontSize: 12 }}>近 7 天: </Text>
          <div style={{ display: 'flex', gap: 6, marginTop: 4, flexWrap: 'wrap' }}>
            {data!.vital_signs_report_rate.daily_trend.map((d) => (
              <Tag key={d.date} color={d.rate >= 50 ? 'green' : d.rate >= 20 ? 'orange' : 'red'}>
                {d.date.slice(5)} {d.reported}/{d.total}
              </Tag>
            ))}
          </div>
        </div>
      )}
    </Card>
  );
}

export default function HealthDataCenter({ data, dialysisData, tab = 'dialysis' }: HealthDataCenterProps) {
  if (tab === 'dialysis') {
    return (
      <Row gutter={[16, 16]}>
        <Col span={24}>
          <DialysisPanel data={dialysisData} />
        </Col>
      </Row>
    );
  }

  const PANELS: Record<string, React.FC<{ data: HealthDataStats | null }>> = {
    lab: LabPanel,
    appointments: AppointmentsPanel,
    'vital-signs': VitalSignsPanel,
  };

  const Panel = PANELS[tab];

  if (!Panel) {
    return <Empty description="未知数据面板" />;
  }

  return (
    <Row gutter={[16, 16]}>
      <Col span={24}>
        <Panel data={data} />
      </Col>
    </Row>
  );
}