import { useQuery } from "@tanstack/react-query";
import { Space } from "tdesign-react";

import type { HealthResponse } from "../../../shared/api";

import { APP } from "../../../shared/app";

export function DashboardPage() {
  const { data: health } = useQuery({
    queryFn: fetchHealth,
    queryKey: ["health"],
    refetchInterval: 30000,
    staleTime: 5000,
  });

  return (
    <Space className="full-width-space" direction="vertical" size="large">
      <h2>欢迎使用 {APP.title}</h2>
      <p>在此构建你的应用。以下是 /health API 的返回数据（前后端联调示例）：</p>
      {health && <pre className="health-response">{JSON.stringify(health, null, 2)}</pre>}
    </Space>
  );
}

async function fetchHealth(): Promise<HealthResponse> {
  const response = await fetch("/health");
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  return response.json() as Promise<HealthResponse>;
}