import { useState } from "react";
import { ModelManager } from "../components/ModelManager";

// 模型配置页：Chat / Embedding 双 Tab 统一管理。
export function ModelsPage() {
  const [tab, setTab] = useState<"chat" | "embedding">("chat");

  return (
    <div className="space-y-6">
      {/* 头部标题与 Tab 切换 */}
      <div className="flex flex-wrap items-center justify-between gap-4 border-b border-gray-150 pb-4">
        <div>
          <h3 className="text-base font-semibold text-gray-800">模型管理</h3>
          <p className="text-xs text-gray-400">配置全平台的对话模型（LLM）与向量化模型（Embedding）</p>
        </div>
        
        <div className="flex rounded-lg border border-gray-200 bg-gray-50/50 p-1">
          <button
            onClick={() => setTab("chat")}
            className={`rounded-md px-4 py-1.5 text-xs font-medium transition-all ${
              tab === "chat"
                ? "bg-white text-violet-700 shadow-sm"
                : "text-gray-500 hover:text-gray-700"
            }`}
          >
            对话模型 (Chat)
          </button>
          <button
            onClick={() => setTab("embedding")}
            className={`rounded-md px-4 py-1.5 text-xs font-medium transition-all ${
              tab === "embedding"
                ? "bg-white text-violet-700 shadow-sm"
                : "text-gray-500 hover:text-gray-700"
            }`}
          >
            向量化模型 (Embedding)
          </button>
        </div>
      </div>

      {/* 模型管理组件 */}
      <div className="rounded-xl border border-gray-100 bg-white p-5 shadow-sm">
        {tab === "chat" ? (
          <ModelManager
            kind="chat"
            title="对话模型配置 (chat → Dispatcher)"
            baseUrlHint="https://api.deepseek.com"
            modelHint="deepseek-chat"
          />
        ) : (
          <ModelManager
            kind="embedding"
            title="向量化模型配置 (embedding → mcp-go RAG)"
            baseUrlHint="https://dashscope.aliyuncs.com/compatible-mode/v1"
            modelHint="text-embedding-v3"
          />
        )}
      </div>
    </div>
  );
}