import { useEffect, useState } from "react";
import {
  listModels,
  saveModel,
  setActive,
  deleteModel,
  testModel,
  type Model,
  type ModelInput,
} from "./api";

const EMPTY: ModelInput = {
  provider: "openai-compatible",
  base_url: "",
  api_key: "",
  model: "",
};

// 模型配置页：登记/激活/删除 + 测试连接。激活后经 NATS 热更新到 Dispatcher。
export function ModelsPage() {
  const [models, setModels] = useState<Model[]>([]);
  const [form, setForm] = useState<ModelInput>(EMPTY);
  const [msg, setMsg] = useState("");
  const [testing, setTesting] = useState(false);

  const refresh = () => listModels().then(setModels).catch((e) => setMsg(`✗ ${e.message}`));
  useEffect(() => {
    refresh();
  }, []);

  const set = (k: keyof ModelInput, v: string) => setForm((f) => ({ ...f, [k]: v }));

  const onSave = async () => {
    try {
      await saveModel(form);
      setMsg("✓ 已保存");
      setForm(EMPTY);
      refresh();
    } catch (e) {
      setMsg(`✗ ${(e as Error).message}`);
    }
  };

  const onTest = async () => {
    setTesting(true);
    try {
      const r = await testModel(form);
      setMsg(r.ok ? `✓ 连接成功（${r.message}）` : `✗ 连接失败：${r.message}`);
    } catch (e) {
      setMsg(`✗ ${(e as Error).message}`);
    } finally {
      setTesting(false);
    }
  };

  return (
    <div className="flex flex-col gap-6">
      <section>
        <h2 className="mb-3 text-sm font-semibold text-gray-700">已配置模型</h2>
        <div className="overflow-hidden rounded border">
          <table className="w-full text-sm">
            <thead className="bg-gray-50 text-left text-xs text-gray-500">
              <tr>
                <th className="px-3 py-2">状态</th>
                <th className="px-3 py-2">Provider</th>
                <th className="px-3 py-2">Base URL</th>
                <th className="px-3 py-2">Model</th>
                <th className="px-3 py-2">API Key</th>
                <th className="px-3 py-2">操作</th>
              </tr>
            </thead>
            <tbody>
              {models.length === 0 && (
                <tr>
                  <td colSpan={6} className="px-3 py-4 text-center text-xs text-gray-400">
                    暂无模型，使用下方表单登记。
                  </td>
                </tr>
              )}
              {models.map((m) => (
                <tr key={m.id} className="border-t">
                  <td className="px-3 py-2">
                    {m.active ? (
                      <span className="rounded bg-emerald-100 px-1.5 py-0.5 text-[10px] text-emerald-700">
                        激活
                      </span>
                    ) : (
                      <span className="text-[10px] text-gray-400">—</span>
                    )}
                  </td>
                  <td className="px-3 py-2 text-gray-600">{m.provider}</td>
                  <td className="px-3 py-2 font-mono text-xs text-gray-600">{m.base_url}</td>
                  <td className="px-3 py-2 text-gray-800">{m.model}</td>
                  <td className="px-3 py-2 font-mono text-xs text-gray-400">{m.api_key || "—"}</td>
                  <td className="px-3 py-2">
                    <div className="flex gap-2">
                      {!m.active && (
                        <button
                          onClick={() => setActive(m.id).then(() => { setMsg("✓ 已激活并热更新 Dispatcher"); refresh(); })}
                          className="rounded border px-2 py-0.5 text-xs text-violet-600 hover:bg-violet-50"
                        >
                          激活
                        </button>
                      )}
                      <button
                        onClick={() => deleteModel(m.id).then(refresh)}
                        className="rounded border px-2 py-0.5 text-xs text-rose-500 hover:bg-rose-50"
                      >
                        删除
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>

      <section className="max-w-xl">
        <h2 className="mb-3 text-sm font-semibold text-gray-700">登记模型（开发期：第三方在线 API，OpenAI 兼容）</h2>
        <div className="grid grid-cols-2 gap-3">
          <label className="text-xs text-gray-500">
            Provider
            <select
              className="mt-1 w-full rounded border px-2 py-1 text-sm text-gray-900"
              value={form.provider}
              onChange={(e) => set("provider", e.target.value)}
            >
              <option value="openai-compatible">openai-compatible</option>
              <option value="vllm">vllm（自部署）</option>
            </select>
          </label>
          <label className="text-xs text-gray-500">
            Model
            <input
              className="mt-1 w-full rounded border px-2 py-1 text-sm"
              value={form.model}
              onChange={(e) => set("model", e.target.value)}
              placeholder="deepseek-chat"
            />
          </label>
          <label className="col-span-2 text-xs text-gray-500">
            Base URL
            <input
              className="mt-1 w-full rounded border px-2 py-1 text-sm font-mono"
              value={form.base_url}
              onChange={(e) => set("base_url", e.target.value)}
              placeholder="https://api.deepseek.com/v1"
            />
          </label>
          <label className="col-span-2 text-xs text-gray-500">
            API Key
            <input
              type="password"
              className="mt-1 w-full rounded border px-2 py-1 text-sm font-mono"
              value={form.api_key}
              onChange={(e) => set("api_key", e.target.value)}
              placeholder="sk-…"
            />
          </label>
        </div>
        <div className="mt-3 flex items-center gap-2">
          <button onClick={onSave} className="rounded bg-violet-600 px-3 py-1 text-sm text-white">
            保存
          </button>
          <button
            onClick={onTest}
            disabled={testing || !form.base_url}
            className="rounded border px-3 py-1 text-sm disabled:opacity-40"
          >
            {testing ? "测试中…" : "测试连接"}
          </button>
          {msg && <span className="text-xs text-gray-600">{msg}</span>}
        </div>
      </section>
    </div>
  );
}