LokiStack/frontend/src/pages/dashboard/components/SelfCheckCard.tsx

import { memo, useCallback, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { Activity, AlertTriangle, CheckCircle2, RefreshCw, XCircle } from 'lucide-react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { systemApi, type SelfCheckResult } from '@/api/system'

/** 单项状态 → 图标与配色 */
function StatusIcon({ status }: { status: 'ok' | 'warn' | 'error' }) {
  if (status === 'ok') return <CheckCircle2 className="h-4 w-4 text-success" />
  if (status === 'warn') return <AlertTriangle className="h-4 w-4 text-warning" />
  return <XCircle className="h-4 w-4 text-destructive" />
}

/**
 * 一键自检 — 仪表盘顶部。
 *
 * 为什么放在仪表盘：新人接手/故障时第一眼看这里，不必在
 * 「集群/主机/存储/部署/采集器」五个页面之间来回跳着判断"到底哪坏了"。
 * 后端 /system/self-check 会真正探活（Loki /ready、集群凭证解密、磁盘空间），
 * 不是只读配置推断。
 */
export const SelfCheckCard = memo(function SelfCheckCard() {
  const { t } = useTranslation('dashboard')
  const [data, setData] = useState<SelfCheckResult | null>(null)
  const [loading, setLoading] = useState(true)
  const [failed, setFailed] = useState(false)

  const load = useCallback(async () => {
    setLoading(true)
    setFailed(false)
    try {
      setData(await systemApi.selfCheck())
    } catch {
      // 自检失败本身不代表平台坏了（可能是权限或接口异常），
      // 这里静默降级，不打断仪表盘其它内容
      setFailed(true)
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => {
    void load()
  }, [load])

  if (loading && !data) {
    return (
      <Card>
        <CardContent className="flex items-center gap-2 p-4 text-sm text-muted-foreground">
          <RefreshCw className="h-4 w-4 animate-spin" />
          {t('selfCheck.loading')}
        </CardContent>
      </Card>
    )
  }
  if (failed || !data) return null

  const problems = data.items.filter(i => i.status !== 'ok')
  const overallText =
    data.overall === 'ok'
      ? t('selfCheck.allGood')
      : data.overall === 'warn'
        ? t('selfCheck.needsAttention', { count: problems.length })
        : t('selfCheck.hasError', { count: problems.length })

  const borderClass =
    data.overall === 'ok'
      ? 'border-success/30'
      : data.overall === 'warn'
        ? 'border-warning/40'
        : 'border-destructive/40'

  return (
    <Card className={borderClass}>
      <CardHeader className="pb-2">
        <CardTitle className="flex items-center gap-2 text-sm font-medium">
          <Activity className="h-4 w-4" />
          {t('selfCheck.title')}
          <span
            className={`ml-1 text-xs font-normal ${
              data.overall === 'ok'
                ? 'text-success'
                : data.overall === 'warn'
                  ? 'text-warning'
                  : 'text-destructive'
            }`}
          >
            {overallText}
          </span>
          <span className="ml-auto text-xs font-normal text-muted-foreground">
            {new Date(data.checkedAt).toLocaleTimeString()}
          </span>
          <Button variant="ghost" size="sm" onClick={() => void load()} disabled={loading}>
            <RefreshCw className={`h-3.5 w-3.5 ${loading ? 'animate-spin' : ''}`} />
          </Button>
        </CardTitle>
      </CardHeader>
      <CardContent className="flex flex-wrap gap-x-6 gap-y-2 pt-0">
        {data.items.map(item => (
          <div key={item.name} className="flex items-start gap-1.5 text-xs" title={item.detail || ''}>
            <StatusIcon status={item.status} />
            <span className="text-muted-foreground">{item.name}</span>
            <span
              className={
                item.status === 'ok'
                  ? 'text-foreground'
                  : item.status === 'warn'
                    ? 'text-warning'
                    : 'text-destructive'
              }
            >
              {item.message}
            </span>
          </div>
        ))}
      </CardContent>
    </Card>
  )
})