/**
 * 数据库健康监控卡片
 *
 * 展示每个数据库的连接池状态、大小、慢查询数量。
 * 纯展示组件，接收 DbHealthItem[] 数据 + 加载/超时状态。
 *
 * - connected：展示完整指标（进度条 + 统计数值）
 * - disconnected：显示"未连接"状态标签
 * - 加载超时：展示"加载超时"状态 + 重试按钮
 */

import React from "react";
import {
  Card,
  Row,
  Col,
  Tag,
  Progress,
  Statistic,
  Button,
  Spin,
  Empty,
} from "antd";
import {
  DatabaseOutlined,
  CheckCircleOutlined,
  CloseCircleOutlined,
  ReloadOutlined,
  WarningOutlined,
} from "@ant-design/icons";
import type { DbHealthItem } from "../api/dbHealth";

export interface DbHealthCardProps {
  /** 数据库健康数据列表 */
  items: DbHealthItem[];
  /** 是否正在加载 */
  loading?: boolean;
  /** 是否加载超时 */
  timeout?: boolean;
  /** 重试回调（超时时展示重试按钮） */
  onRetry?: () => void;
}

/** 连接池总数（活跃 + 空闲），用于计算进度条百分比 */
function poolPercent(active: number | null, idle: number | null): number {
  if (active == null || idle == null) return 0;
  const total = active + idle;
  if (total === 0) return 0;
  return Math.round((active / total) * 100);
}

const DbHealthCard: React.FC<DbHealthCardProps> = ({
  items,
  loading = false,
  timeout = false,
  onRetry,
}) => {
  // 加载超时状态
  if (timeout) {
    return (
      <Card size="small" title="数据库健康监控" style={{ marginBottom: 16 }}>
        <div style={{ textAlign: "center", padding: "24px 0" }}>
          <WarningOutlined style={{ fontSize: 32, color: "#faad14", marginBottom: 12 }} />
          <div style={{ marginBottom: 12 }}>
            <Tag color="warning" icon={<WarningOutlined />}>加载超时</Tag>
          </div>
          {onRetry && (
            <Button icon={<ReloadOutlined />} onClick={onRetry}>
              重试
            </Button>
          )}
        </div>
      </Card>
    );
  }

  // 加载中
  if (loading) {
    return (
      <Card size="small" title="数据库健康监控" style={{ marginBottom: 16 }}>
        <div style={{ textAlign: "center", padding: "24px 0" }}>
          <Spin tip="加载中..." />
        </div>
      </Card>
    );
  }

  // 无数据
  if (!items || items.length === 0) {
    return (
      <Card size="small" title="数据库健康监控" style={{ marginBottom: 16 }}>
        <Empty description="暂无数据" />
      </Card>
    );
  }

  return (
    <Card size="small" title="数据库健康监控" style={{ marginBottom: 16 }}>
      <Row gutter={16}>
        {items.map((item) => (
          <Col span={12} key={item.db_name} style={{ marginBottom: 16 }}>
            <Card
              size="small"
              type="inner"
              title={
                <span>
                  <DatabaseOutlined style={{ marginRight: 6 }} />
                  {item.db_name}
                </span>
              }
              extra={
                item.status === "connected" ? (
                  <Tag color="success" icon={<CheckCircleOutlined />}>已连接</Tag>
                ) : (
                  <Tag color="error" icon={<CloseCircleOutlined />}>未连接</Tag>
                )
              }
            >
              {item.status === "connected" ? (
                <>
                  {/* 连接池进度条 */}
                  <div style={{ marginBottom: 12 }}>
                    <div style={{ marginBottom: 4, fontSize: 12, color: "#666" }}>
                      连接池（活跃 {item.active_connections ?? 0} / 空闲 {item.idle_connections ?? 0}）
                    </div>
                    <Progress
                      percent={poolPercent(item.active_connections, item.idle_connections)}
                      size="small"
                      format={(pct) => `${pct}%`}
                    />
                  </div>
                  {/* 统计指标 */}
                  <Row gutter={16}>
                    <Col span={12}>
                      <Statistic
                        title="数据库大小"
                        value={item.db_size_mb ?? "-"}
                        suffix="MB"
                        valueStyle={{ fontSize: 16 }}
                      />
                    </Col>
                    <Col span={12}>
                      <Statistic
                        title="慢查询（1h）"
                        value={item.slow_query_count ?? 0}
                        valueStyle={{
                          fontSize: 16,
                          color: (item.slow_query_count ?? 0) > 0 ? "#faad14" : undefined,
                        }}
                      />
                    </Col>
                  </Row>
                </>
              ) : (
                <div style={{ textAlign: "center", padding: "16px 0", color: "#999" }}>
                  数据库未连接，无法获取指标
                </div>
              )}
            </Card>
          </Col>
        ))}
      </Row>
    </Card>
  );
};

export default DbHealthCard;
