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

// 模型配置页：工作主力(chat) / JARVIS 语音(voice) / 向量化(embedding) 三 Tab 统一管理。
// 工作与语音分开：编排/报告用强模型(chat)，JARVIS 语音对话用快模型(voice, 低时延)——各配各激活。
const TABS: { key: Kind; label: string }[] = [
  { key: "chat", label: "工作主力模型" },
  { key: "voice", label: "JARVIS 语音模型" },
  { key: "embedding", label: "向量化模型" },
];

export function ModelsPage() {
  const [tab, setTab] = useState<Kind>("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">工作主力模型跑编排/报告（要强）· JARVIS 语音模型跑实时对话（要快）· 向量化模型跑 RAG</p>
        </div>

        <div className="flex rounded-lg border border-gray-200 bg-gray-50/50 p-1">
          {TABS.map((t) => (
            <button
              key={t.key}
              onClick={() => setTab(t.key)}
              className={`rounded-md px-4 py-1.5 text-xs font-medium transition-all ${
                tab === t.key ? "bg-white text-violet-700 shadow-sm" : "text-gray-500 hover:text-gray-700"
              }`}
            >
              {t.label}
            </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-v4-pro"
          />
        )}
        {tab === "voice" && (
          <ModelManager
            kind="voice"
            title="JARVIS 语音模型 (voice → 语音对话，选快模型抢首字时延)"
            baseUrlHint="https://api.deepseek.com"
            modelHint="deepseek-v4-flash"
          />
        )}
        {tab === "embedding" && (
          <ModelManager
            kind="embedding"
            title="向量化模型 (embedding → mcp-go RAG)"
            baseUrlHint="https://dashscope.aliyuncs.com/compatible-mode/v1"
            modelHint="text-embedding-v3"
          />
        )}
      </div>
    </div>
  );
}