// 资源页：服务器 / 软件仓库 / 云产品 / API 密钥 / 源码库
// 从 Dashboard 内嵌 tabs 迁出的一级页面（ui-restructure N1），面板组件原样复用
import { useState } from "react";
import { ServerManagerPanel } from "../dashboard/ServerManagerPanel";
import { ServerSoftwarePanel } from "../dashboard/ServerSoftwareBlock";
import { ApiKeysPanel } from "../dashboard/ApiKeysPanel";
import { CloudProductsPanel } from "../dashboard/CloudProductsPanel";
import { SourceLibraryPage } from "../source-library/SourceLibraryPage";

type ResourceTab = "servers" | "software" | "cloud" | "apikeys" | "source";

const TABS: { id: ResourceTab; label: string }[] = [
  { id: "servers", label: "服务器" },
  { id: "software", label: "软件仓库" },
  { id: "cloud", label: "云产品" },
  { id: "apikeys", label: "密钥凭据" },
  { id: "source", label: "源码库" },
];

export function ResourcesPage() {
  const [tab, setTab] = useState<ResourceTab>("servers");

  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 === "source" ? (
          <SourceLibraryPage />
        ) : (
          <div className="w-full px-8 py-8 pb-16">
            {tab === "servers" && <ServerManagerPanel />}
            {tab === "software" && <ServerSoftwarePanel />}
            {tab === "cloud" && <CloudProductsPanel />}
            {tab === "apikeys" && <ApiKeysPanel />}
          </div>
        )}
      </div>
    </div>
  );
}
