/**
 * Token Usage Viewer 主页面
 *
 * 展示 claude-opus-4-5-thinking 模型的配额使用情况仪表盘。
 *
 * 特性:
 * - SSR 预加载数据（通过 loader）
 * - 每 5 分钟自动刷新配额数据
 * - Tauri 环境下自动设置窗口标题
 */
import { useSuspenseQuery } from '@tanstack/react-query'
import { createFileRoute } from '@tanstack/react-router'
import { isTauri } from '@tauri-apps/api/core'
import { getCurrentWindow } from '@tauri-apps/api/window'
import { useEffect } from 'react'
import { TokenUsageDashboard } from '@/components/TokenUsageDashboard'
import { orpc } from '@/orpc'

/** 数据自动刷新间隔 (毫秒) - 5 分钟 */
const REFETCH_INTERVAL = 5 * 60 * 1000

export const Route = createFileRoute('/')({
  component: Home,
  /**
   * 路由加载器 - SSR 数据预取
   *
   * 在服务端渲染时预先获取使用量数据，确保首次渲染即有内容。
   */
  loader: async ({ context }) => {
    await context.queryClient.ensureQueryData(
      orpc.usage.getUsage.queryOptions(),
    )
  },
})

/**
 * 首页组件
 *
 * 使用 useSuspenseQuery 获取并展示配额数据，
 * 确保 data 不为空（由 loader 预取保证）。
 */
function Home() {
  const { data } = useSuspenseQuery({
    ...orpc.usage.getUsage.queryOptions(),
    refetchInterval: REFETCH_INTERVAL,
  })

  // Tauri 环境: 设置窗口标题
  useEffect(() => {
    if (!isTauri()) return
    getCurrentWindow().setTitle('Token Usage Viewer')
  }, [])

  return <TokenUsageDashboard data={data} />
}