// 洞察页：飞轮（跨项目数据反哺）/ 健康中心 / 全局治理
// ui-restructure N3：跨项目内容的统一去处——单项目内容留在项目蓝图弹窗
import { useState } from "react";
import { FlywheelPanel } from "./FlywheelPanel";
import { GlobalGovernancePanel } from "./GlobalGovernancePanel";
import { HealthPage } from "../health/HealthPage";

type InsightTab = "flywheel" | "health" | "governance";

const TABS: { id: InsightTab; label: string }[] = [
  { id: "flywheel", label: "♻️ 飞轮" },
  { id: "health", label: "健康中心" },
  { id: "governance", label: "全局治理" },
];

export function InsightPage() {
  const [tab, setTab] = useState<InsightTab>("flywheel");

  return (
    <div className="flex flex-col h-full min-h-0">
      <div className="shrink-0 border-b border-gray-100 bg-white px-8 flex items-center gap-1">
        {TABS.map(({ id, label }) => (
          <button
            key={id}
            onClick={() => setTab(id)}
            className={`px-4 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors ${
              tab === id
                ? "border-blue-500 text-blue-600"
                : "border-transparent text-gray-400 hover:text-gray-600"
            }`}
          >
            {label}
          </button>
        ))}
      </div>

      <div className="flex-1 overflow-y-auto min-h-0">
        {tab === "flywheel" && (
          <div className="max-w-2xl mx-auto">
            <FlywheelPanel />
          </div>
        )}
        {tab === "health" && <HealthPage />}
        {tab === "governance" && (
          <div className="max-w-2xl mx-auto">
            <GlobalGovernancePanel />
          </div>
        )}
      </div>
    </div>
  );
}
