// 工具页：开发环境扫描 / WSL 代理
// 两个低频独立页合并为 tabs（ui-restructure N1），页面组件原样复用
import { useState } from "react";
import { DevToolsPage } from "../devtools/DevToolsPage";
import { ProxyPage } from "../proxy/ProxyPage";

type ToolTab = "devtools" | "proxy";

export function ToolsPage() {
  const [tab, setTab] = useState<ToolTab>("devtools");

  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">
        {([
          { id: "devtools" as ToolTab, label: "开发环境" },
          { id: "proxy" as ToolTab, label: "WSL 代理" },
        ]).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 === "devtools" && <DevToolsPage />}
        {tab === "proxy" && <ProxyPage />}
      </div>
    </div>
  );
}
