OpenFlare/frontend/app/(main)/admin/settings/components/system-status.tsx

"use client"

import * as React from "react"
import {useCallback, useEffect, useRef, useState} from "react"
import {toast} from "sonner"
import {Activity, Cpu, Database, HardDrive, Layers, RefreshCw} from "lucide-react"
import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card"
import {Button} from "@/components/ui/button"
import {Switch} from "@/components/ui/switch"
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from "@/components/ui/select"
import {Badge} from "@/components/ui/badge"
import {Progress} from "@/components/ui/progress"
import {Skeleton} from "@/components/ui/skeleton"
import type {SystemStatus} from "@/lib/services/admin"
import services from "@/lib/services"

/**
 * 格式化数字，每3位加逗号
 */
const formatNumber = (num: number | string) => {
  if (num === undefined || num === null) return "0"
  return num.toString().replace(/\B(?=(\d{3})+(?!\B))/g, ",")
}

/**
 * 运行时系统状态展示与管理组件
 */
export function SystemStatusManager() {
  const [status, setStatus] = useState<SystemStatus | null>(null)
  const [loading, setLoading] = useState(true)
  const [wavelet, setWavelet] = useState(false)
  const [autoRefresh, setAutoRefresh] = useState(true)
  const [intervalTime, setIntervalTime] = useState("5000") // 默认5秒

  const intervalRef = useRef<NodeJS.Timeout | null>(null)
  const prevStatusRef = useRef<SystemStatus | null>(null)
  const [changedFields, setChangedFields] = useState<Record<string, boolean>>({})

  // 获取状态数据
  const fetchStatus = useCallback(async (isSilent = false) => {
    if (!isSilent) setWavelet(true)
    try {
      const data = await services.adminStatus.getSystemStatus()

      // 检测变化的字段用于微动画效果
      if (prevStatusRef.current) {
        const changes: Record<string, boolean> = {}
        Object.keys(data).forEach((key) => {
          const k = key as keyof SystemStatus
          if (prevStatusRef.current && prevStatusRef.current[k] !== data[k]) {
            changes[k] = true
          }
        })
        setChangedFields(changes)
        // 1秒后清除变化状态
        setTimeout(() => {
          setChangedFields({})
        }, 1000)
      }

      setStatus(data)
      prevStatusRef.current = data
    } catch (err) {
      toast.error("获取系统状态失败", {
        description: err instanceof Error ? err.message : "请求时发生未知错误"
      })
    } finally {
      setLoading(false)
      setWavelet(false)
    }
  }, [])

  // 轮询逻辑
  useEffect(() => {
    // 首次加载
    fetchStatus()
  }, [fetchStatus])

  useEffect(() => {
    if (intervalRef.current) {
      clearInterval(intervalRef.current)
    }

    if (autoRefresh) {
      const time = parseInt(intervalTime, 10)
      intervalRef.current = setInterval(() => {
        fetchStatus(true)
      }, time)
    }

    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current)
      }
    }
  }, [autoRefresh, intervalTime, fetchStatus])

  // 计算内存分配百分比 (Alloc / Sys)
  const getMemoryUsagePercent = () => {
    if (!status) return 0

    const parseSizeToBytes = (sizeStr: string): number => {
      const parts = sizeStr.split(" ")
      if (parts.length < 2) return 0
      const value = parseFloat(parts[0])
      const unit = parts[1].toLowerCase()

      if (unit.startsWith("gib")) return value * 1024 * 1024 * 1024
      if (unit.startsWith("mib")) return value * 1024 * 1024
      if (unit.startsWith("kib")) return value * 1024
      return value
    }

    const alloc = parseSizeToBytes(status.alloc)
    const sys = parseSizeToBytes(status.sys)
    if (sys === 0) return 0
    return Math.min(Math.round((alloc / sys) * 100), 100)
  }

  // 闪烁动画类
  const getPulseClass = (field: string) => {
    return changedFields[field] ? "animate-pulse text-primary font-bold transition-all duration-300 scale-105 inline-block" : "transition-all duration-300"
  }

  const RenderMetricRow = ({ label, value, field }: { label: string; value: string | number; field?: string }) => (
    <div className="flex items-center justify-between py-2 border-b border-dashed border-border/40 last:border-b-0 hover:bg-muted/30 px-2 rounded-sm transition-colors duration-150">
      <span className="text-xs font-medium text-muted-foreground">{label}</span>
      <span className={`text-xs font-mono font-medium ${field ? getPulseClass(field) : ""}`}>
        {typeof value === "number" ? formatNumber(value) : value}
      </span>
    </div>
  )

  if (loading) {
    return (
      <div className="space-y-6 p-1">
        <div className="flex items-center justify-between border-b border-border/40 pb-4">
          <div className="space-y-1">
            <Skeleton className="h-6 w-32" />
            <Skeleton className="h-4 w-48" />
          </div>
          <div className="flex items-center gap-3">
            <Skeleton className="h-8 w-24" />
            <Skeleton className="h-8 w-16" />
            <Skeleton className="h-8 w-8" />
          </div>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <Skeleton className="h-48 w-full" />
          <Skeleton className="h-48 w-full" />
          <Skeleton className="h-48 w-full" />
          <Skeleton className="h-48 w-full" />
          <Skeleton className="h-48 w-full" />
        </div>
      </div>
    )
  }

  return (
    <div className="py-6 px-1 space-y-6">
      {/* 顶部控制栏 */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between pb-4 gap-4">
        <div className="flex items-center gap-2">
          <Activity className="size-5 text-primary" />
          <div>
            <h1 className="text-2xl font-semibold tracking-tight">系统状态</h1>
          </div>
        </div>

        <div className="flex items-center flex-wrap gap-4 bg-muted/30 p-1.5 rounded-lg border border-border/40 backdrop-blur-sm">
          <div className="flex items-center gap-2 px-1">
            <Switch
              id="auto-refresh"
              checked={autoRefresh}
              onCheckedChange={setAutoRefresh}
            />
            <label htmlFor="auto-refresh" className="text-xs font-medium cursor-pointer select-none">
              自动刷新
            </label>
          </div>

          {autoRefresh && (
            <Select value={intervalTime} onValueChange={setIntervalTime}>
              <SelectTrigger className="h-7 w-20 text-[11px] bg-background border-border/40">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="1000">1s</SelectItem>
                <SelectItem value="2000">2s</SelectItem>
                <SelectItem value="5000">5s</SelectItem>
                <SelectItem value="10000">10s</SelectItem>
              </SelectContent>
            </Select>
          )}

          <Button
            size="sm"
            variant="secondary"
            className="h-7 text-[11px] gap-1.5"
            onClick={() => fetchStatus()}
            disabled={wavelet}
          >
            <RefreshCw className={`size-3 ${wavelet ? "animate-spin" : ""}`} />
            刷新
          </Button>
        </div>
      </div>

      {status && (
        <>
          {/* 主网格排版 */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

            {/* 1. 服务概览 */}
            <Card className="shadow-sm border-border/40 bg-card/50 backdrop-blur-md hover:border-primary/20 transition-all duration-300">
              <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
                <div className="space-y-0.5">
                  <CardTitle className="text-sm font-semibold">服务概览</CardTitle>
                  <CardDescription className="text-[10px]">服务的基础生命指标</CardDescription>
                </div>
                <Badge variant="secondary" className="p-1 rounded-full bg-primary/10 text-primary border-none">
                  <Activity className="size-4" />
                </Badge>
              </CardHeader>
              <CardContent className="space-y-1">
                <RenderMetricRow label="服务运行时间" value={status.uptime} field="uptime" />
                <RenderMetricRow label="当前 Goroutines 数量" value={status.num_goroutine} field="num_goroutine" />
                <RenderMetricRow label="Heap 对象数量" value={status.heap_objects} field="heap_objects" />
              </CardContent>
            </Card>

            {/* 2. 内存统计 */}
            <Card className="shadow-sm border-border/40 bg-card/50 backdrop-blur-md hover:border-primary/20 transition-all duration-300">
              <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
                <div className="space-y-0.5">
                  <CardTitle className="text-sm font-semibold">内存统计</CardTitle>
                  <CardDescription className="text-[10px]">主内存消耗概览</CardDescription>
                </div>
                <Badge variant="secondary" className="p-1 rounded-full bg-primary/10 text-primary border-none">
                  <Cpu className="size-4" />
                </Badge>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="space-y-1">
                  <RenderMetricRow label="当前内存使用量" value={status.alloc} field="alloc" />
                  <RenderMetricRow label="所有已分配的内存" value={status.total_alloc} field="total_alloc" />
                  <RenderMetricRow label="内存占用量" value={status.sys} field="sys" />
                  <RenderMetricRow label="下次 GC 内存回收量" value={status.next_gc} field="next_gc" />
                </div>
                {/* 物理内存水位比例 */}
                <div className="space-y-1 px-1 pt-1">
                  <div className="flex justify-between text-[10px] text-muted-foreground">
                    <span>当前使用率 (Alloc / Sys)</span>
                    <span className="font-mono">{getMemoryUsagePercent()}%</span>
                  </div>
                  <Progress value={getMemoryUsagePercent()} className="h-1.5" />
                </div>
              </CardContent>
            </Card>

            {/* 3. 堆/栈详情 */}
            <Card className="shadow-sm border-border/40 bg-card/50 backdrop-blur-md hover:border-primary/20 transition-all duration-300">
              <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
                <div className="space-y-0.5">
                  <CardTitle className="text-sm font-semibold">堆/栈详情</CardTitle>
                  <CardDescription className="text-[10px]">运行时堆栈内存空间细节</CardDescription>
                </div>
                <Badge variant="secondary" className="p-1 rounded-full bg-primary/10 text-primary border-none">
                  <Database className="size-4" />
                </Badge>
              </CardHeader>
              <CardContent className="space-y-1">
                <RenderMetricRow label="当前 Heap 内存使用量" value={status.heap_alloc} field="heap_alloc" />
                <RenderMetricRow label="Heap 内存占用量" value={status.heap_sys} field="heap_sys" />
                <RenderMetricRow label="Heap 内存空闲量" value={status.heap_idle} field="heap_idle" />
                <RenderMetricRow label="正在使用的 Heap 内存" value={status.heap_inuse} field="heap_inuse" />
                <RenderMetricRow label="已释放的 Heap 内存" value={status.heap_released} field="heap_released" />
                <RenderMetricRow label="启动 Stack 使用量" value={status.stack_inuse} field="stack_inuse" />
                <RenderMetricRow label="已分配的 Stack 内存" value={status.stack_sys} field="stack_sys" />
              </CardContent>
            </Card>

            {/* 4. 底层组件与结构体 */}
            <Card className="shadow-sm border-border/40 bg-card/50 backdrop-blur-md hover:border-primary/20 transition-all duration-300">
              <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
                <div className="space-y-0.5">
                  <CardTitle className="text-sm font-semibold">底层及结构体内存</CardTitle>
                  <CardDescription className="text-[10px]">运行时底层管理结构体开销</CardDescription>
                </div>
                <Badge variant="secondary" className="p-1 rounded-full bg-primary/10 text-primary border-none">
                  <HardDrive className="size-4" />
                </Badge>
              </CardHeader>
              <CardContent className="space-y-1">
                <RenderMetricRow label="MSpan 结构内存使用量" value={status.mspan_inuse} field="mspan_inuse" />
                <RenderMetricRow label="已分配的 MSpan 结构内存" value={status.mspan_sys} field="mspan_sys" />
                <RenderMetricRow label="MCache 结构内存使用量" value={status.mcache_inuse} field="mcache_inuse" />
                <RenderMetricRow label="已分配的 MCache 结构内存" value={status.mcache_sys} field="mcache_sys" />
                <RenderMetricRow label="已分配的剖析哈希表内存" value={status.buck_hash_sys} field="buck_hash_sys" />
                <RenderMetricRow label="已分配的 GC 元数据内存" value={status.gc_sys} field="gc_sys" />
                <RenderMetricRow label="其它已分配的系统内存" value={status.other_sys} field="other_sys" />
              </CardContent>
            </Card>

            {/* 5. 垃圾回收与分配计数 */}
            <Card className="shadow-sm border-border/40 bg-card/50 backdrop-blur-md hover:border-primary/20 transition-all duration-300 md:col-span-2">
              <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
                <div className="space-y-0.5">
                  <CardTitle className="text-sm font-semibold">垃圾回收与分配计数</CardTitle>
                  <CardDescription className="text-[10px]">GC 历史数据与分配频次</CardDescription>
                </div>
                <Badge variant="secondary" className="p-1 rounded-full bg-primary/10 text-primary border-none">
                  <Layers className="size-4" />
                </Badge>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-6">
                  <div>
                    <RenderMetricRow label="GC 执行次数" value={status.num_gc} field="num_gc" />
                    <RenderMetricRow label="距离上次 GC 时间" value={status.last_gc_time} field="last_gc_time" />
                    <RenderMetricRow label="GC 暂停时间总量" value={status.pause_total_ns} field="pause_total_ns" />
                    <RenderMetricRow label="上次 GC 暂停时间" value={status.last_pause} field="last_pause" />
                  </div>
                  <div>
                    <RenderMetricRow label="内存分配次数" value={status.mallocs} field="mallocs" />
                    <RenderMetricRow label="内存释放次数" value={status.frees} field="frees" />
                    <RenderMetricRow label="指针查找次数" value={status.lookups} field="lookups" />
                  </div>
                </div>
              </CardContent>
            </Card>

          </div>
        </>
      )}
    </div>
  )
}