import type { AdminLlmProvider } from "../../../lib/types";
import { Button, Switch, Tag } from "../../../components/primitives";

/* ---------------------------------------------------------------------------
 * 阶段 5 新增的字段（multimodal / reasoning.kind / per-persona 路由）与上下文
 * 窗口（contextWindow）的编辑界面。取值域一律由后端下发（GET /admin/llm 的
 * reasoningKinds / personaProviderOptions），本文件只提供展示文案与本地校验，
 * 不硬编码第二套枚举，也不拿任何示例值顶替。
 * -------------------------------------------------------------------------*/

/** 一个 persona 路由行的编辑草稿。 */
export interface PersonaRouteDraft {
  persona: string;
  model: string;
  provider: string;
}

/** 从已存分组播种路由行：两张表的键取并集，使「只声明了 provider、没声明模型」
 *  的条目也照实显示（面板绝不悄悄丢掉已存配置）。 */
export function initPersonaRoutes(p: AdminLlmProvider | null): PersonaRouteDraft[] {
  const models = p?.personaModels ?? {};
  const providers = p?.personaProviders ?? {};
  const keys = [...new Set([...Object.keys(models), ...Object.keys(providers)])].sort();
  return keys.map((persona) => ({
    persona,
    model: models[persona] ?? "",
    provider: providers[persona] ?? "",
  }));
}

/** 路由行 → 两张表。空 persona 的行是没填完的行（提交前已被拦下），不编造；
 *  「有 provider 没 model」的行按原样保留在后端已有的 schema 语义里
 *  （它不生效，面板在行上明说），因此绝不把已存配置悄悄变成别的形状。 */
export function routesToMaps(routes: PersonaRouteDraft[]): {
  personaModels: Record<string, string>;
  personaProviders: Record<string, string>;
} {
  const personaModels: Record<string, string> = {};
  const personaProviders: Record<string, string> = {};
  routes.forEach((r) => {
    const persona = r.persona.trim();
    if (!persona) return;
    const model = r.model.trim();
    const provider = r.provider.trim();
    if (model) personaModels[persona] = model;
    if (provider) personaProviders[persona] = provider;
  });
  return { personaModels, personaProviders };
}

/** 路由行的本地校验。只拦两类确定会让整张表出错的输入：persona 没填就填了别的
 *  东西（后端会 400），以及同一 persona 出现多次（对象键会悄悄合并成一条）。 */
export function personaRouteProblem(routes: PersonaRouteDraft[]): string | null {
  const seen = new Set<string>();
  for (const r of routes) {
    const persona = r.persona.trim();
    if (!persona) {
      if (r.model.trim() || r.provider.trim()) return "按角色路由：有行的 persona 没填（补上 persona，或删掉该行）";
      continue;
    }
    if (seen.has(persona)) return `按角色路由：persona「${persona}」出现多次——同一 persona 只能有一条`;
    seen.add(persona);
  }
  return null;
}

/** 目录（models.dev）对候选模型的能力标注，用于给面板**建议**。
 *  attachment 为 undefined = 目录未标注该能力（不是「不支持」）。 */
export interface CatalogHint {
  provider: string;
  model: string;
  attachment?: boolean;
  supportsReasoning: boolean;
}

/** multimodal 开关 + 语义说明 + 目录建议。目录只是建议，随时可推翻；
 *  目录不可用时这一栏照常可编辑（hint 为 null）。 */
export function MultimodalField({
  checked,
  hint,
  onChange,
}: {
  checked: boolean;
  hint: CatalogHint | null;
  onChange: (next: boolean) => void;
}): React.ReactNode {
  return (
    <div className="space-y-1">
      <Switch checked={checked} onChange={onChange} label="主模型可收图（multimodal）" />
      <p className="text-xs text-[var(--mu-text-lo)]">
        勾选 = 主模型自己接收图片输入。图片识别 / OCR 工具用的模型由 .env 的 LLM_VISION_MODEL /
        LLM_OCR_MODEL 另配，与这里无关。
      </p>
      {hint ? (
        <p className="text-xs text-[var(--mu-text-mid)]">
          目录（models.dev）对 {hint.model} 的标注：
          {hint.attachment === true
            ? "接受图片输入"
            : hint.attachment === false
              ? "不接受图片输入"
              : "未标注该能力（请按你的端点实际能力填）"}
          {hint.supportsReasoning ? " · 支持推理（开关形状仍需按端点选）" : ""} —— 只是建议，可随时推翻。
        </p>
      ) : (
        <p className="text-xs text-[var(--mu-text-lo)]">未从目录带入建议（目录不可用或本次是手填），不影响编辑。</p>
      )}
    </div>
  );
}

/** API key 与 maxTokens 一行（同排布的两列）。抽出来只为让 ProviderFields 守住
 *  ≤80 行：字段、文案与交互与抽取前逐字一致（编辑态下钥匙的提示语照旧跟着切换）。 */
export function ApiKeyAndBudgetField({
  apiKey,
  maxTokens,
  editing,
  onApiKey,
  onMaxTokens,
}: {
  apiKey: string;
  maxTokens: string;
  editing: boolean;
  onApiKey: (next: string) => void;
  onMaxTokens: (next: string) => void;
}): React.ReactNode {
  return (
    <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
      <label className="block space-y-1">
        <span className="text-xs text-[var(--mu-text-lo)]">
          API key（{editing ? "留空 = 保留原 key" : "写入 models.json，不回显"}）
        </span>
        <input value={apiKey} onChange={(e) => onApiKey(e.target.value)} placeholder="sk-…" className={`${inputCls} w-full`} />
      </label>
      <label className="block space-y-1">
        <span className="text-xs text-[var(--mu-text-lo)]">maxTokens（该组预算，留空 = 保持/默认）</span>
        <input
          value={maxTokens}
          onChange={(e) => onMaxTokens(e.target.value)}
          inputMode="numeric"
          placeholder="8192"
          className={`${inputCls} w-full`}
        />
      </label>
    </div>
  );
}

/** 模型上下文窗口（token）输入行 —— 与 maxTokens 同排布同交互：留空 = 不提交
 *  该键（缺省 = 保留已存窗口），填了才作为一个明确声明提交。窗口只有部署者知道
 *  （本仓没有 provider 侧发现代码），因此面板既不预填猜测值、也不把它当成必填。 */
export function ContextWindowField({
  value,
  onChange,
}: {
  value: string;
  onChange: (next: string) => void;
}): React.ReactNode {
  return (
    <label className="block space-y-1">
      <span className="text-xs text-[var(--mu-text-lo)]">上下文窗口 contextWindow（token，留空 = 未声明）</span>
      <input
        value={value}
        onChange={(e) => onChange(e.target.value)}
        inputMode="numeric"
        placeholder="1048576"
        className={`${inputCls} w-full`}
      />
      <span className="text-xs text-[var(--mu-text-lo)]">
        留空 = 未声明（按 128 Ki token 保守估算）；填该模型真实窗口（如 1048576）才能吃到按窗口推导的上下文预算（重启后生效）。
      </span>
    </label>
  );
}

/** reasoning.kind 的展示文案：键是后端下发的取值，值是**形状说明**。
 *  后端将来新增的取值没有文案时原样显示，不编造含义。 */
const REASONING_LABEL: Record<string, string> = {
  auto: "auto（按模型名 / baseURL 推断，形状有歧义就不下发）",
  deepseek: "deepseek（顶层 thinking:{type} + reasoning_effort）",
  openai: "openai（只有 reasoning_effort）",
  vllm: "vllm（chat_template_kwargs.enable_thinking）",
  dashscope: "dashscope（顶层 enable_thinking）",
};

/** 推理开关形状下拉框。候选值 = 后端下发的 reasoningKinds（外加「未声明」）；
 *  已存值不在候选里时原样列出并标注，绝不悄悄改成别的值。 */
export function ReasoningField({
  value,
  kinds,
  provider,
  onChange,
}: {
  value: string;
  kinds: string[];
  provider: string;
  onChange: (next: string) => void;
}): React.ReactNode {
  const opts = kinds.map((k) => ({ value: k, label: REASONING_LABEL[k] ?? k }));
  if (value && !kinds.includes(value)) {
    opts.unshift({ value, label: `${value}（当前值：后端未把它列为可选形状）` });
  }
  return (
    <div className="space-y-1">
      <label className="block space-y-1">
        <span className="text-xs text-[var(--mu-text-lo)]">推理开关形状 reasoning.kind</span>
        <select value={value} onChange={(e) => onChange(e.target.value)} className={`${inputCls} w-full`}>
          <option value="">未声明（等同 auto：按模型名 / baseURL 推断）</option>
          {opts.map((o) => (
            <option key={o.value} value={o.value}>
              {o.label}
            </option>
          ))}
        </select>
      </label>
      {kinds.length === 0 ? (
        <p className="text-xs text-[var(--mu-warn)]">
          后端未下发可选形状（响应缺少 reasoningKinds）：这里只能选「未声明」，或按 design/04 §3.2 手填后由后端校验（非法值会 400）。
        </p>
      ) : null}
      {provider === "anthropic" && value !== "" && value !== "auto" ? (
        <p className="text-xs text-[var(--mu-warn)]">
          anthropic 组只接受「未声明 / auto」：这些形状属于 OpenAI 兼容端点，保存时后端会回 400。
        </p>
      ) : null}
    </div>
  );
}

/** 一行 persona 路由：persona（可手填，已知角色作为候选）+ 模型 + 协议覆盖。 */
function PersonaRouteRow({
  route,
  index,
  providerOptions,
  groupProvider,
  listId,
  onPatch,
  onRemove,
}: {
  route: PersonaRouteDraft;
  index: number;
  providerOptions: string[];
  groupProvider: string;
  listId: string;
  onPatch: (index: number, patch: Partial<PersonaRouteDraft>) => void;
  onRemove: (index: number) => void;
}): React.ReactNode {
  const persona = route.persona.trim();
  const hasModel = route.model.trim() !== "";
  const providerValue = route.provider.trim();
  const providerChoices = providerValue && !providerOptions.includes(providerValue)
    ? [providerValue, ...providerOptions]
    : providerOptions;
  const dead = persona !== "" && providerValue !== "" && !hasModel;
  return (
    <div className="flex flex-wrap items-center gap-2 rounded-[var(--mu-radius)] bg-[var(--mu-surface-2)] px-3 py-2">
      <input
        value={route.persona}
        onChange={(e) => onPatch(index, { persona: e.target.value })}
        list={listId}
        placeholder="persona id"
        className={`${inputCls} w-40`}
        aria-label="persona id"
      />
      <input
        value={route.model}
        onChange={(e) => onPatch(index, { model: e.target.value })}
        placeholder="模型名（留空 = 不绑定）"
        className={`${inputCls} w-56 font-mono text-xs`}
        aria-label="该 persona 的模型名"
      />
      <select
        value={providerValue}
        onChange={(e) => onPatch(index, { provider: e.target.value })}
        className={`${inputCls} w-56`}
        aria-label="该 persona 的协议覆盖"
      >
        <option value="">跟随本组协议（{groupProvider || "未定"}）</option>
        {providerChoices.map((p) => (
          <option key={p} value={p}>
            {providerOptions.includes(p) ? p : `${p}（当前值：后端未把它列为可选）`}
          </option>
        ))}
      </select>
      {dead ? <Tag tone="warn">只有协议没有模型 → 不生效</Tag> : null}
      <span className="ml-auto">
        <Button size="sm" variant="ghost" onClick={() => onRemove(index)}>
          删除
        </Button>
      </span>
    </div>
  );
}

/** per-persona 路由编辑器。角色清单只是**候选**（可手填 id）：清单取不到时
 *  照常手填，绝不阻塞保存；每条路由的含义与生效条件在下方如实说明。 */
export function PersonaRoutesEditor({
  routes,
  knownIds,
  personaListError,
  providerOptions,
  groupProvider,
  onChange,
}: {
  routes: PersonaRouteDraft[];
  knownIds: string[];
  personaListError: string | null;
  providerOptions: string[];
  groupProvider: string;
  onChange: (next: PersonaRouteDraft[]) => void;
}): React.ReactNode {
  const listId = "llm-persona-ids";
  const patch = (index: number, p: Partial<PersonaRouteDraft>): void =>
    onChange(routes.map((r, i) => (i === index ? { ...r, ...p } : r)));
  const remove = (index: number): void => onChange(routes.filter((_, i) => i !== index));
  return (
    <div className="space-y-2">
      <div className="flex flex-wrap items-center gap-2">
        <span className="text-xs text-[var(--mu-text-lo)]">按角色路由（persona → 模型 / 协议）</span>
        <span className="text-xs text-[var(--mu-text-lo)]">
          未列出的 persona 一律用本组默认模型（协议 {groupProvider || "未定"}）
        </span>
        <Button
          size="sm"
          variant="ghost"
          className="ml-auto"
          onClick={() => onChange([...routes, { persona: "", model: "", provider: "" }])}
        >
          添加一行
        </Button>
      </div>
      <datalist id={listId}>
        {knownIds.map((id) => (
          <option key={id} value={id} />
        ))}
      </datalist>
      {personaListError ? (
        <p className="text-xs text-[var(--mu-warn)]">
          角色清单未取到（{personaListError}）：persona id 仍可手填，不影响保存。
        </p>
      ) : null}
      {routes.length === 0 ? (
        <p className="text-xs text-[var(--mu-text-lo)]">没有 per-persona 路由：该组所有角色都用本组的 model。</p>
      ) : (
        routes.map((r, i) => (
          <PersonaRouteRow
            key={i}
            route={r}
            index={i}
            providerOptions={providerOptions}
            groupProvider={groupProvider}
            listId={listId}
            onPatch={patch}
            onRemove={remove}
          />
        ))
      )}
      {providerOptions.length === 0 ? (
        <p className="text-xs text-[var(--mu-warn)]">
          后端未下发可选的 persona 协议（响应缺少 personaProviderOptions）：这里只能选「跟随本组协议」。
        </p>
      ) : null}
    </div>
  );
}

const inputCls =
  "rounded-[var(--mu-radius)] bg-[var(--mu-surface-2)] px-3 py-2 text-sm outline-none focus:ring-1 focus:ring-[var(--mu-accent)] disabled:opacity-60";