import { useQuery } from '@tanstack/react-query'
import { Brand, Space, Tag, Text } from '@stash/ui'
import { fetchHealth } from '../api/client'

/**
 * 顶部导航：品牌 + 引擎状态。
 *
 * 配置入口都收进任务调度页的三栏卡片里（uv / 镜像源 / 虚拟环境都用弹窗），
 * 所以这里不再放页面级导航。
 */
export function AppHeader() {
  const healthQuery = useQuery({
    queryKey: ['health'],
    queryFn: ({ signal }) => fetchHealth(signal),
    refetchInterval: 30_000,
  })

  const status = healthQuery.isPending
    ? { tone: 'neutral' as const, label: '检测中' }
    : healthQuery.isError
      ? { tone: 'danger' as const, label: '引擎离线' }
      : { tone: 'success' as const, label: '引擎在线' }

  return (
    <div className="app-header">
      <div className="app-header-brand">
        <Brand name="TaskPilot" mark="TP" />
        <Text className="app-header-tagline" size="xs" tone="muted">
          本地任务调度 · Windows
        </Text>
      </div>

      <Space className="app-header-status" gap="xs" align="center">
        <Tag tone={status.tone} dot>
          {status.label}
        </Tag>
        <Text size="xs" tone="muted">
          {healthQuery.data?.version
            ? `Rust 引擎 v${healthQuery.data.version}`
            : '127.0.0.1:3000'}
        </Text>
      </Space>
    </div>
  )
}