hms/apps/web/src/pages/health/components/AlertDetailPanel.tsx

import { Descriptions, Tag, Typography, Space, Button, Popconfirm, Tooltip } from 'antd';
import {
  CheckOutlined,
  StopOutlined,
  SafetyCertificateOutlined,
  ClockCircleOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons';
import type { Alert } from '../../../api/health/alerts';

const SEVERITY_CONFIG: Record<string, { color: string; label: string; icon: React.ReactNode }> = {
  info: { color: 'default', label: '提示', icon: <ExclamationCircleOutlined /> },
  warning: { color: 'orange', label: '警告', icon: <ExclamationCircleOutlined /> },
  critical: { color: 'red', label: '严重', icon: <ExclamationCircleOutlined /> },
  urgent: { color: 'magenta', label: '紧急', icon: <ExclamationCircleOutlined /> },
};

const STATUS_CONFIG: Record<string, { color: string; label: string }> = {
  pending: { color: 'orange', label: '待处理' },
  acknowledged: { color: 'blue', label: '已确认' },
  resolved: { color: 'green', label: '已恢复' },
  dismissed: { color: 'default', label: '已忽略' },
};

interface AlertDetailPanelProps {
  alert: Alert;
  onAcknowledge?: (id: string, version: number) => Promise<void>;
  onDismiss?: (id: string, version: number) => Promise<void>;
  onResolve?: (id: string, version: number) => Promise<void>;
  loading?: boolean;
}

/**
 * 告警详情面板 — 展示告警完整信息及操作按钮。
 */
export function AlertDetailPanel({
  alert,
  onAcknowledge,
  onDismiss,
  onResolve,
  loading = false,
}: AlertDetailPanelProps) {
  const severity = SEVERITY_CONFIG[alert.severity] ?? SEVERITY_CONFIG.info;
  const status = STATUS_CONFIG[alert.status] ?? STATUS_CONFIG.pending;
  const isPending = alert.status === 'pending';
  const isAcknowledged = alert.status === 'acknowledged';

  return (
    <div style={{ padding: 16 }}>
      {/* 顶部摘要 */}
      <div style={{ marginBottom: 16 }}>
        <Space align="center" size="middle">
          <Tag color={severity.color} icon={severity.icon} style={{ fontSize: 14, padding: '4px 12px' }}>
            {severity.label}
          </Tag>
          <Tag color={status.color}>{status.label}</Tag>
          <Typography.Text type="secondary" style={{ fontSize: 12 }}>
            <ClockCircleOutlined style={{ marginRight: 4 }} />
            {new Date(alert.created_at).toLocaleString('zh-CN')}
          </Typography.Text>
        </Space>
      </div>

      {/* 详情 */}
      <Descriptions column={2} size="small" bordered>
        <Descriptions.Item label="告警 ID" span={2}>
          <Typography.Text copyable style={{ fontSize: 12 }}>{alert.id}</Typography.Text>
        </Descriptions.Item>
        <Descriptions.Item label="患者 ID">
          <Typography.Text copyable style={{ fontSize: 12 }}>{alert.patient_id}</Typography.Text>
        </Descriptions.Item>
        <Descriptions.Item label="规则 ID">
          <Typography.Text copyable style={{ fontSize: 12 }}>{alert.rule_id}</Typography.Text>
        </Descriptions.Item>
        <Descriptions.Item label="严重程度">
          <Tag color={severity.color}>{severity.label}</Tag>
        </Descriptions.Item>
        <Descriptions.Item label="状态">
          <Tag color={status.color}>{status.label}</Tag>
        </Descriptions.Item>
        {alert.acknowledged_by && (
          <Descriptions.Item label="处理人" span={2}>
            <Typography.Text style={{ fontSize: 12 }}>{alert.acknowledged_by}</Typography.Text>
          </Descriptions.Item>
        )}
        {alert.acknowledged_at && (
          <Descriptions.Item label="确认时间">
            {new Date(alert.acknowledged_at).toLocaleString('zh-CN')}
          </Descriptions.Item>
        )}
        {alert.resolved_at && (
          <Descriptions.Item label="恢复时间">
            {new Date(alert.resolved_at).toLocaleString('zh-CN')}
          </Descriptions.Item>
        )}
      </Descriptions>

      {/* 告警详情 JSON */}
      {alert.detail && (
        <div style={{ marginTop: 12 }}>
          <Typography.Text type="secondary" style={{ fontSize: 12 }}>告警详情：</Typography.Text>
          <pre style={{
            fontSize: 12,
            background: 'var(--ant-color-bg-layout)',
            padding: 8,
            borderRadius: 6,
            maxHeight: 200,
            overflow: 'auto',
            margin: '4px 0 0',
          }}>
            {JSON.stringify(alert.detail, null, 2)}
          </pre>
        </div>
      )}

      {/* 操作按钮 */}
      <div style={{ marginTop: 16, borderTop: '1px solid var(--ant-color-border)', paddingTop: 12 }}>
        <Space>
          {isPending && onAcknowledge && (
            <Tooltip title="确认已知晓此告警">
              <Popconfirm
                title="确认此告警？"
                description="确认后将标记为已确认状态"
                onConfirm={() => onAcknowledge(alert.id, alert.version)}
              >
                <Button
                  type="primary"
                  icon={<CheckOutlined />}
                  loading={loading}
                >
                  确认
                </Button>
              </Popconfirm>
            </Tooltip>
          )}
          {isPending && onDismiss && (
            <Tooltip title="忽略此告警">
              <Popconfirm
                title="忽略此告警？"
                description="告警将被标记为已忽略"
                onConfirm={() => onDismiss(alert.id, alert.version)}
              >
                <Button icon={<StopOutlined />} loading={loading}>
                  忽略
                </Button>
              </Popconfirm>
            </Tooltip>
          )}
          {(isPending || isAcknowledged) && onResolve && (
            <Tooltip title="标记告警已恢复">
              <Popconfirm
                title="标记为已恢复？"
                description="告警将标记为已恢复状态"
                onConfirm={() => onResolve(alert.id, alert.version)}
              >
                <Button
                  type="primary"
                  ghost
                  icon={<SafetyCertificateOutlined />}
                  loading={loading}
                >
                  恢复
                </Button>
              </Popconfirm>
            </Tooltip>
          )}
        </Space>
      </div>
    </div>
  );
}