/**
 * 系统资源区块
 *
 * 展示服务器 CPU / 内存 / 磁盘使用情况。
 * 从 OpsPanel 拆分，可独立使用（如 Dashboard 聚合页）。
 */

import React from "react";
import { Card, Row, Col, Statistic, Progress, Typography } from "antd";
import type { SystemInfo } from "../../api/opsPanel";

const { Text } = Typography;

export interface SystemResourceSectionProps {
  system: SystemInfo;
}

const SystemResourceSection: React.FC<SystemResourceSectionProps> = ({ system }) => (
  <Card size="small" title="服务器资源" style={{ marginBottom: 16 }}>
    <Row gutter={24}>
      <Col span={8}>
        <Statistic title="CPU 使用率" value={system.cpu_percent} suffix="%" />
        <Progress
          percent={system.cpu_percent}
          size="small"
          status={system.cpu_percent > 80 ? "exception" : "normal"}
          showInfo={false}
        />
      </Col>
      <Col span={8}>
        <Statistic
          title="内存"
          value={system.memory_used_gb}
          suffix={`/ ${system.memory_total_gb} GB`}
          precision={1}
        />
        <Progress
          percent={system.memory_percent}
          size="small"
          status={system.memory_percent > 85 ? "exception" : "normal"}
          showInfo={false}
        />
      </Col>
      <Col span={8}>
        <Statistic
          title="磁盘"
          value={system.disk_used_gb}
          suffix={`/ ${system.disk_total_gb} GB`}
          precision={1}
        />
        <Progress
          percent={system.disk_percent}
          size="small"
          status={system.disk_percent > 90 ? "exception" : "normal"}
          showInfo={false}
        />
      </Col>
    </Row>
    <Text type="secondary" style={{ fontSize: 12, marginTop: 8, display: "block" }}>
      开机时间：{new Date(system.boot_time).toLocaleString()}
    </Text>
  </Card>
);

export default SystemResourceSection;
