/**
 * 服务状态区块
 *
 * 展示各环境服务运行状态，支持启动/停止/重启操作。
 * 从 OpsPanel 拆分，可独立使用（如 Dashboard 聚合页）。
 */

import React from "react";
import {
  Card,
  Row,
  Col,
  Tag,
  Button,
  Space,
  Descriptions,
} from "antd";
import {
  PlayCircleOutlined,
  PauseCircleOutlined,
  ReloadOutlined,
  CheckCircleOutlined,
  CloseCircleOutlined,
  ClockCircleOutlined,
} from "@ant-design/icons";
import type { ServiceStatus } from "../../api/opsPanel";

/** 秒数格式化为 "Xd Xh Xm" */
function formatUptime(seconds: number | null): string {
  if (seconds == null) return "-";
  const d = Math.floor(seconds / 86400);
  const h = Math.floor((seconds % 86400) / 3600);
  const m = Math.floor((seconds % 3600) / 60);
  const parts: string[] = [];
  if (d > 0) parts.push(`${d}天`);
  if (h > 0) parts.push(`${h}时`);
  parts.push(`${m}分`);
  return parts.join(" ");
}

export interface ServiceStatusSectionProps {
  services: ServiceStatus[];
  actionLoading: Record<string, boolean>;
  onStart: (env: string) => void;
  onStop: (env: string) => void;
  onRestart: (env: string) => void;
}

const ServiceStatusSection: React.FC<ServiceStatusSectionProps> = ({
  services,
  actionLoading,
  onStart,
  onStop,
  onRestart,
}) => (
  <Card size="small" title="服务状态" style={{ marginBottom: 16 }}>
    <Row gutter={16}>
      {services.map((svc) => (
        <Col span={12} key={svc.env}>
          <Card
            size="small"
            type="inner"
            title={
              <Space>
                {svc.running
                  ? <CheckCircleOutlined style={{ color: "#52c41a" }} />
                  : <CloseCircleOutlined style={{ color: "#ff4d4f" }} />}
                {svc.label}
                <Tag color={svc.running ? "success" : "error"}>
                  {svc.running ? "运行中" : "已停止"}
                </Tag>
              </Space>
            }
            extra={<Tag>:{svc.port}</Tag>}
          >
            {svc.running && (
              <Descriptions size="small" column={3} style={{ marginBottom: 12 }}>
                <Descriptions.Item label="PID">{svc.pid}</Descriptions.Item>
                <Descriptions.Item label="运行时长">
                  <ClockCircleOutlined style={{ marginRight: 4 }} />
                  {formatUptime(svc.uptime_seconds)}
                </Descriptions.Item>
                <Descriptions.Item label="内存">{svc.memory_mb ?? "-"} MB</Descriptions.Item>
              </Descriptions>
            )}
            <Space>
              {!svc.running && (
                <Button
                  type="primary"
                  size="small"
                  icon={<PlayCircleOutlined />}
                  loading={actionLoading[`start-${svc.env}`]}
                  onClick={() => onStart(svc.env)}
                >
                  启动
                </Button>
              )}
              {svc.running && (
                <>
                  <Button
                    danger
                    size="small"
                    icon={<PauseCircleOutlined />}
                    loading={actionLoading[`stop-${svc.env}`]}
                    onClick={() => onStop(svc.env)}
                  >
                    停止
                  </Button>
                  <Button
                    size="small"
                    icon={<ReloadOutlined />}
                    loading={actionLoading[`restart-${svc.env}`]}
                    onClick={() => onRestart(svc.env)}
                  >
                    重启
                  </Button>
                </>
              )}
            </Space>
          </Card>
        </Col>
      ))}
    </Row>
  </Card>
);

export default ServiceStatusSection;
