import { Card, Group, Text, RingProgress } from "@mantine/core";

// 给一些常见状态定义颜色，没定义的就用 gray
const statusColors = {
  healthy: "green",
  warning: "yellow",
  error: "red",
  online: "green",
  offline: "gray",
};

export function HealthCard({ health }) {
  const totalNodes = health?.total || 0;
  const stats = health?.status_statistics || [];

  // 计算环形图 sections
  const sections = stats.map((s) => ({
    value: (s.count / totalNodes) * 100,
    color: statusColors[s.status] || "gray",
  }));

  // 计算一个主展示百分比（这里沿用原来的逻辑，用 online 或 healthy 优先）
  const mainStatus = stats.find(
    (s) => s.status === "online" || s.status === "healthy"
  );
  const mainPercent = mainStatus
    ? ((mainStatus.count / totalNodes) * 100).toFixed(1)
    : "0.0";

  return (
    <Card shadow="sm" radius="md" p="lg">
      <Text fw={700} size="lg" mb="md">节点健康状态</Text>

      <Group spacing="xl" align="center">
        <RingProgress
          size={140}
          thickness={14}
          sections={sections}
          label={
            <Text fw={700} ta="center" size="lg">
              {mainPercent}%
            </Text>
          }
        />

        <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", gap: 8 }}>
          {stats.map((s, idx) => (
            <div
              key={idx}
              style={{ display: "flex", justifyContent: "space-between", width: 140 }}
            >
              <Text size="sm" color={statusColors[s.status] || "gray"}>
                {s.status}
              </Text>
              <Text fw={600}>{s.count}</Text>
            </div>
          ))}
        </div>
      </Group>
    </Card>
  );
}
