OpenFlare/frontend/app/(main)/page.tsx

'use client';

import {useQuery} from '@tanstack/react-query';
import {LayoutDashboard, RefreshCw} from 'lucide-react';

import {EmptyStateWithBorder} from '@/components/layout/empty';
import {ErrorInline} from '@/components/layout/error';
import {LoadingStateWithBorder} from '@/components/layout/loading';
import {Button} from '@/components/ui/button';
import {DashboardService} from '@/lib/services/openflare';
import {formatDateTime} from '@/lib/utils';

import {CapacityTrendChart} from './components/dashboard/capacity-trend-chart';
import {
  SourceDistributionChart,
  StatusCodeDistributionChart,
  TopDomainChart,
} from './components/dashboard/distribution-rank-charts';
import {NetworkDiskTrendChart} from './components/dashboard/network-disk-trend-chart';
import {NodeHealthTable} from './components/dashboard/node-health-table';
import {TrafficTrendChart} from './components/dashboard/traffic-trend-chart';
import {WorldStage} from './components/dashboard/world-stage';
import {getErrorMessage} from './nodes/components/node-utils';

const dashboardQueryKey = ['openflare', 'dashboard', 'overview'];

export default function OpenFlareDashboardPage() {
  const overviewQuery = useQuery({
    queryKey: dashboardQueryKey,
    queryFn: () => DashboardService.getOverview(),
    refetchInterval: 30_000,
  });

  const overview = overviewQuery.data;

  return (
    <div className="py-6 px-1 space-y-6">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div className="flex items-center gap-2">
          <LayoutDashboard className="size-5 text-primary" />
          <h1 className="text-2xl font-semibold tracking-tight">总览</h1>
        </div>
        <div className="flex items-center gap-2 text-xs text-muted-foreground">
          {overview?.generated_at ? (
            <span>数据生成于 {formatDateTime(overview.generated_at)}</span>
          ) : null}
          <Button
            variant="outline"
            size="sm"
            className="h-8"
            onClick={() => overviewQuery.refetch()}
            disabled={overviewQuery.isFetching}
          >
            <RefreshCw
              className={`size-3.5 mr-1.5 ${overviewQuery.isFetching ? 'animate-spin' : ''}`}
            />
            刷新
          </Button>
        </div>
      </div>

      {overviewQuery.isLoading ? (
        <LoadingStateWithBorder
          title="加载总览数据"
          description="正在聚合节点健康、流量与容量指标..."
        />
      ) : overviewQuery.isError ? (
        <ErrorInline
          message={`总览看板加载失败：${getErrorMessage(overviewQuery.error)}`}
          onRetry={() => overviewQuery.refetch()}
        />
      ) : !overview ? (
        <EmptyStateWithBorder
          title="暂无总览数据"
          description="系统已经启动，但还没有可展示的总览聚合结果。"
        />
      ) : (
        <>
          <WorldStage
            summary={overview.summary}
            traffic={overview.traffic}
            capacity={overview.capacity}
            nodes={overview.nodes}
            sourceCountries={overview.distributions.source_countries}
          />

          <div className="grid gap-6 xl:grid-cols-2">
            <TrafficTrendChart points={overview.trends.traffic_24h} />
            <CapacityTrendChart points={overview.trends.capacity_24h} />
          </div>

          <div className="grid gap-6">
            <NetworkDiskTrendChart
              networkPoints={overview.trends.network_24h}
              diskPoints={overview.trends.disk_io_24h}
            />
          </div>

          <div className="grid gap-6 xl:grid-cols-3">
            <SourceDistributionChart items={overview.distributions.source_countries} />
            <StatusCodeDistributionChart items={overview.distributions.status_codes} />
            <TopDomainChart items={overview.distributions.top_domains} />
          </div>

          <NodeHealthTable nodes={overview.nodes} />
        </>
      )}
    </div>
  );
}