import { useQuery } from '@tanstack/react-query'
import api from '@/lib/api'
import { MetricCard } from '@/components/MetricCard'
import { cn } from '@/lib/utils'

export function SystemTab() {
  const { data: healthData } = useQuery({
    queryKey: ['system-health'],
    queryFn: () => api.get('/health'),
    refetchInterval: 10000,
  })

  const { data: tenantsData } = useQuery({
    queryKey: ['admin-tenants'],
    queryFn: () => api.get('/admin/tenants'),
    refetchInterval: 30000,
  })

  const tenants = (tenantsData as any)?.data || []
  const health = (healthData as any)?.data || {}

  return (
    <div className="space-y-4">
      <div className="grid grid-cols-3 gap-3">
        <MetricCard title="后端服务" value={health.status === 'ok' ? '正常' : '异常'} format="text" status={health.status === 'ok' ? 'good' : 'bad'} description="服务器后端健康状态" />
        <MetricCard title="租户总数" value={tenants.length} description="已注册租户数" />
        <MetricCard title="活跃租户" value={tenants.filter((t: any) => t.status === 'active').length} status="good" description="运行中的租户数" />
      </div>

      <div className="rounded-lg border bg-card p-4">
        <h2 className="mb-3 text-sm font-bold">租户数据库连接状态</h2>
        <div className="space-y-2">
          {tenants.map((t: any) => (
            <div key={t.tenant_id} className="flex items-center justify-between rounded-md border px-3 py-2">
              <div className="flex items-center gap-3">
                <span className={cn(
                  'h-2 w-2 rounded-full',
                  t.status === 'active' ? 'bg-green-500' : 'bg-gray-400'
                )} />
                <span className="text-sm font-medium">{t.tenant_name}</span>
                <span className="font-mono text-xs text-muted-foreground">{t.tenant_id}</span>
              </div>
              <div className="flex items-center gap-3 text-xs text-muted-foreground">
                <span className="font-mono">{t.db_host}:{t.db_port}</span>
                <span className={cn(
                  'rounded px-2 py-0.5 font-medium',
                  t.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'
                )}>
                  {t.status === 'active' ? '运行中' : '已停用'}
                </span>
              </div>
            </div>
          ))}
          {tenants.length === 0 && (
            <p className="py-4 text-center text-sm text-muted-foreground">暂无租户</p>
          )}
        </div>
      </div>

      <div className="rounded-lg border bg-card p-4">
        <h2 className="mb-3 text-sm font-bold">系统信息</h2>
        <div className="grid grid-cols-2 gap-3 text-sm">
          <div className="flex justify-between rounded-md border px-3 py-2">
            <span className="text-muted-foreground">后端端口</span>
            <span className="font-mono">9333</span>
          </div>
          <div className="flex justify-between rounded-md border px-3 py-2">
            <span className="text-muted-foreground">主库</span>
            <span className="font-mono">sbrain_admin (PostgreSQL 16)</span>
          </div>
          <div className="flex justify-between rounded-md border px-3 py-2">
            <span className="text-muted-foreground">Nginx 代理</span>
            <span className="font-mono">/api/ → 127.0.0.1:9333</span>
          </div>
          <div className="flex justify-between rounded-md border px-3 py-2">
            <span className="text-muted-foreground">FRP 服务端</span>
            <span className="font-mono">frps :7000</span>
          </div>
          <div className="flex justify-between rounded-md border px-3 py-2">
            <span className="text-muted-foreground">进程管理</span>
            <span className="font-mono">pm2</span>
          </div>
          <div className="flex justify-between rounded-md border px-3 py-2">
            <span className="text-muted-foreground">服务器时间</span>
            <span className="font-mono">{health.time ? (health.time as string).substring(0, 19) : '-'}</span>
          </div>
        </div>
      </div>
    </div>
  )
}
