import type { ReactNode } from "react";
import { Surface } from "../../../components/primitives";
import { MiniMetric } from "./MiniMetric";
import { buildOverviewMetrics } from "./overviewMetrics";
import { useDashboardExtras } from "./useDashboardExtras";

/** The secondary dashboard block: 资源 / LLM / 业务 aggregates pulled from the
 *  real admin endpoints (design/10 §3 #1, §4). Each card drills down; the most
 *  detailed view always lives on its own module page. */
export function OverviewSection(): ReactNode {
  const extras = useDashboardExtras();
  const metrics = buildOverviewMetrics(extras);
  return (
    <Surface className="space-y-3">
      <div className="flex flex-wrap items-center gap-2">
        <h3 className="text-sm font-semibold">资源 / LLM / 业务概览</h3>
        <span className="text-xs text-[var(--mu-text-lo)]">真实聚合 · 每卡可下钻</span>
      </div>
      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
        {metrics.map((m) => (
          <MiniMetric key={m.label} {...m} />
        ))}
      </div>
      <div className="pt-1 text-xs text-[var(--mu-text-lo)]">
        卡片即入口，点击下钻到对应模块；缺端点的卡片只标注缺口，不伪造数值。
      </div>
    </Surface>
  );
}