import { Candy, FlaskConical, MoreHorizontal, Power, Sparkles, WandSparkles, UserRoundMinus } from "lucide-react";
import { type ChangeEvent, type FormEvent, useCallback, useEffect, useMemo, useState } from "react";

import { platformApiClient } from "../api/client";
import type { AiProviderKind, AiProviderResponse, AiProviderStatus } from "../api/types";
import { ConfirmDialog, ManagementDialog } from "../components/OperationControls";
import { AIConfigDiffReviewPanel } from "../components/AIConfigDiffReviewPanel";
import { EmptyState, ErrorState, LoadingState, ResultBadge } from "../components/StateViews";
import type { PageComponentProps } from "../contracts/page";
import { isPlatformAdmin } from "../contracts/workspace";
import {
  aiProviderKindDefaults,
  applyAiProviderKindDefaults,
  completeAiProviderForm,
  generatedAiProviderId,
  aiProviderToForm,
  emptyAiProviderForm,
  type AiProviderActionState,
  type AiProviderFilter,
  type AiProviderFormState,
  type AiProviderListState,
  type AiProviderPageInitialState,
  type AiProviderViewState,
  summarizeAiProviders
} from "../contracts/aiProviders";
import { aiProviderCreateRequestFromForm, aiProviderRetireRequest, aiProviderUpdateRequestFromForm } from "../schemas/aiProviders";
import { cx } from "../utils/classes";

interface AiProvidersPageProps extends Partial<PageComponentProps> {
  initialState?: AiProviderPageInitialState;
}

interface ProviderPreset {
  kind: AiProviderKind;
  label: string;
}

type FormCheckState = { status: "pending" | "succeeded" | "failed"; message: string };

const providerPresets: ProviderPreset[] = [
  { kind: "openai", label: "OpenAI" },
  { kind: "claude", label: "Claude" },
  { kind: "gemini", label: "Gemini" },
  { kind: "ollama", label: "Ollama" },
  { kind: "openai-compatible", label: "兼容网关" },
  { kind: "custom", label: "自定义" }
];

export function AiProvidersPage({ initialState, session, operations }: AiProvidersPageProps = {}) {
  const initialSelectedProvider = initialState?.selectedId ? initialState.providers?.find((provider) => provider.id === initialState.selectedId) : undefined;
  const [providers, setProviders] = useState<AiProviderResponse[]>(initialState?.providers ?? []);
  const [listState, setListState] = useState<AiProviderListState>(initialState?.listState ?? "loading");
  const [listError, setListError] = useState(initialState?.listError ?? "");
  const [selectedId, setSelectedId] = useState(initialState?.selectedId ?? "");
  const [filter, setFilter] = useState<AiProviderFilter>("all");
  const [form, setForm] = useState<AiProviderFormState>(() => aiProviderToForm(initialSelectedProvider));
  const [formMode, setFormMode] = useState<"create" | "edit" | null>(initialSelectedProvider ? "edit" : null);
  const [viewState, setViewState] = useState<AiProviderViewState>(initialState?.source ?? "local-development");
  const [action, setAction] = useState<AiProviderActionState | null>(initialState?.action ?? null);
  const [confirmRetire, setConfirmRetire] = useState<AiProviderResponse | null>(null);
  const [confirmStatus, setConfirmStatus] = useState<AiProviderResponse | null>(null);
  const [confirmBusy, setConfirmBusy] = useState(false);
  const [busyProviderIds, setBusyProviderIds] = useState<Set<string>>(() => new Set());
  const [expandedProviderId, setExpandedProviderId] = useState<string | null>(null);
  const [formCheck, setFormCheck] = useState<FormCheckState | null>(null);

  const refreshProviders = useCallback(async () => {
    if (initialState?.providers) {
      setListState(initialState.listState ?? "ready");
      setViewState(initialState.source ?? "local-development");
      return;
    }
    setListState("loading");
    setListError("");
    try {
      const response = await platformApiClient.listAiProviders();
      const nextSelectedId = initialState?.selectedId && response.items.some((provider) => provider.id === initialState.selectedId) ? initialState.selectedId : "";
      const nextSelectedProvider = response.items.find((provider) => provider.id === nextSelectedId);
      setProviders(response.items);
      setSelectedId(nextSelectedId);
      setForm(nextSelectedProvider ? aiProviderToForm(nextSelectedProvider) : emptyAiProviderForm());
      setFormMode(nextSelectedProvider ? "edit" : null);
      setListState("ready");
      setListError("");
      setViewState("api");
      setFormCheck(null);
    } catch (error: unknown) {
      setProviders([]);
      setSelectedId("");
      setForm(emptyAiProviderForm());
      setListState("error");
      setListError(error instanceof Error ? error.message : "AI 提供商 API 加载失败");
      setViewState("error");
      setFormCheck(null);
    }
  }, [initialState]);

  useEffect(() => {
    void refreshProviders();
  }, [refreshProviders]);

  const metrics = useMemo(() => summarizeAiProviders(providers), [providers]);
  const filteredProviders = useMemo(() => providers.filter((provider) => filter === "all" || provider.status === filter), [filter, providers]);
  const canManage = Boolean(session && isPlatformAdmin(session));

  function setProviderBusy(providerId: string, busy: boolean) {
    setBusyProviderIds((current) => {
      const next = new Set(current);
      if (busy) next.add(providerId);
      else next.delete(providerId);
      return next;
    });
  }

  function updateForm<K extends keyof AiProviderFormState>(key: K, value: AiProviderFormState[K]) {
    setForm((current) => ({ ...current, [key]: value }));
  }

  function handleInput(event: ChangeEvent<HTMLInputElement | HTMLSelectElement>) {
    const key = event.target.name as keyof AiProviderFormState;
    if (key === "kind") {
      setForm((current) => applyAiProviderKindDefaults(current, event.target.value as AiProviderKind));
    } else if (key === "apiKeyRef") {
      setForm((current) => ({ ...current, apiKeyRef: event.target.value, apiKeyConfigured: current.apiKeyConfigured || Boolean(event.target.value.trim()) }));
    } else if (key === "baseUrl") {
      setForm((current) => ({ ...current, baseUrl: event.target.value, baseUrlConfigured: current.baseUrlConfigured || Boolean(event.target.value.trim()) }));
    } else {
      updateForm(key, event.target.value);
    }
    setFormCheck(null);
  }

  function selectProvider(provider: AiProviderResponse) {
    if (!canManage) {
      return;
    }
    setSelectedId(provider.id);
    setForm(aiProviderToForm(provider));
    setFormMode("edit");
    setAction(null);
    setFormCheck(null);
    setExpandedProviderId(null);
  }

  function startCreate() {
    if (!canManage) {
      return;
    }
    setSelectedId("");
    setForm(emptyAiProviderForm());
    setFormMode("create");
    setAction(null);
    setConfirmRetire(null);
    setFormCheck(null);
    setExpandedProviderId(null);
  }

  function closeForm() {
    setFormMode(null);
    setFormCheck(null);
  }

  function applyProviderPreset(preset: ProviderPreset) {
    setForm((current) => applyAiProviderKindDefaults(current, preset.kind));
    setFormCheck({ status: "pending", message: `已选择 ${preset.label}。常规配置只需要平台 secret 引用；高级参数已按厂商默认值填入。` });
  }

  function runFormPreflight() {
    const missing: string[] = [];
    const completed = completeAiProviderForm(form);
    const models = completed.modelsText
      .split(",")
      .map((model) => model.trim())
      .filter(Boolean);
    if (!completed.name.trim()) {
      missing.push("名称");
    }
    if (!completed.baseUrl.trim() && !completed.baseUrlConfigured) {
      missing.push("Base URL");
    }
    if (completed.relayMode !== "local" && !completed.apiKeyConfigured && !completed.apiKeyRef.trim().startsWith("secret://providers/")) {
      missing.push("secret://providers/... 密钥引用");
    }
    if (models.length === 0) {
      missing.push("至少一个模型");
    }
    if (!Number.isFinite(Number.parseInt(completed.timeoutMs, 10)) || Number.parseInt(completed.timeoutMs, 10) <= 0) {
      missing.push("有效超时");
    }
    setFormCheck(
      missing.length > 0
        ? { status: "failed", message: `保存前检查未通过：请补充 ${missing.join("、")}。` }
        : { status: "succeeded", message: "保存前检查通过。保存后先测试配置，测试成功再启用。" }
    );
  }

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!canManage) {
      return;
    }
    setViewState("saving");
    const completed = completeAiProviderForm(form);
    const providerId = generatedAiProviderId(completed);
    const existing = providers.some((provider) => provider.id === providerId);
    const intent = existing ? "更新 AI 提供商" : "创建 AI 提供商";
    const operationId = operations?.begin({ intent, targetKind: "llm", targetId: providerId, requester: session?.displayName });

    try {
      const saved = existing
        ? await platformApiClient.updateAiProvider(providerId, aiProviderUpdateRequestFromForm(completed))
        : await platformApiClient.createAiProvider(aiProviderCreateRequestFromForm(completed));
      upsertProvider(saved);
      setSelectedId(saved.id);
      setForm(aiProviderToForm(saved));
      setViewState("api");
      setListState("ready");
      setListError("");
      setAction({ providerId: saved.id, label: "save", success: true, message: "已保存" });
      if (operationId) operations?.succeed(operationId, `${saved.name} 已保存`);
      setFormCheck(null);
      setFormMode(null);
    } catch (error) {
      setViewState("error");
      const message = errorMessage(error, "保存失败");
      setAction({ providerId: generatedAiProviderId(form) || selectedId, label: "save", success: false, message });
      setFormCheck({ status: "failed", message });
      if (operationId) operations?.fail(operationId, message, operationId);
    }
  }

  async function handleStatus(provider: AiProviderResponse): Promise<boolean> {
    if (!canManage) {
      return false;
    }
    setExpandedProviderId(null);
    const nextStatus: Extract<AiProviderStatus, "active" | "disabled"> = provider.status === "active" ? "disabled" : "active";
    const intent = nextStatus === "active" ? "启用 AI 提供商" : "停用 AI 提供商";
    const operationId = operations?.begin({ intent, targetKind: "llm", targetId: provider.id, requester: session?.displayName });
    setProviderBusy(provider.id, true);
    try {
      const updated = await platformApiClient.setAiProviderStatus(provider.id, { status: nextStatus });
      upsertProvider(updated);
      setAction({ providerId: provider.id, label: "status", success: true, message: updated.status === "disabled" ? "已停用" : "已启用" });
      if (operationId) operations?.succeed(operationId, `${updated.name} 已${updated.status === "disabled" ? "停用" : "启用"}`);
      return true;
    } catch (error) {
      const message = errorMessage(error, "状态更新失败");
      setAction({ providerId: provider.id, label: "status", success: false, message });
      if (operationId) operations?.fail(operationId, message, operationId);
      return false;
    } finally {
      setProviderBusy(provider.id, false);
    }
  }

  async function handleRetire(provider: AiProviderResponse) {
    if (!canManage) {
      return;
    }
    setConfirmBusy(true);
    const operationId = operations?.begin({ intent: "退役 AI 提供商", targetKind: "llm", targetId: provider.id, requester: session?.displayName });
    setProviderBusy(provider.id, true);
    try {
      const retired = await platformApiClient.setAiProviderStatus(provider.id, aiProviderRetireRequest());
      upsertProvider(retired);
      setAction({ providerId: provider.id, label: "retire", success: true, message: "已退役" });
      if (operationId) operations?.succeed(operationId, `${retired.name} 已退役`);
      setConfirmRetire(null);
    } catch (error) {
      const message = errorMessage(error, "退役失败，可能仍被引用");
      setAction({ providerId: provider.id, label: "retire", success: false, message });
      if (operationId) operations?.fail(operationId, message, operationId);
    } finally {
      setConfirmBusy(false);
      setProviderBusy(provider.id, false);
    }
  }

  async function handleTest(provider: AiProviderResponse) {
    if (!canManage) {
      return;
    }
    setExpandedProviderId(null);
    setProviderBusy(provider.id, true);
    try {
      const result = await platformApiClient.testAiProvider(provider.id);
      setAction({ providerId: provider.id, label: "test", success: result.success, message: result.message });
    } catch (error) {
      setAction({ providerId: provider.id, label: "test", success: false, message: errorMessage(error, "测试失败") });
    } finally {
      setProviderBusy(provider.id, false);
    }
  }

  async function handleModels(provider: AiProviderResponse) {
    if (!canManage) {
      return;
    }
    setExpandedProviderId(null);
    setProviderBusy(provider.id, true);
    try {
      const result = await platformApiClient.listAiProviderModels(provider.id);
      setAction({ providerId: provider.id, label: "models", success: true, message: `${result.models.length} 个模型` });
    } catch (error) {
      setAction({ providerId: provider.id, label: "models", success: false, message: errorMessage(error, "模型刷新失败") });
    } finally {
      setProviderBusy(provider.id, false);
    }
  }

  function requestStatusChange(provider: AiProviderResponse) {
    if (!canManage || busyProviderIds.has(provider.id)) {
      return;
    }
    setExpandedProviderId(null);
    setConfirmStatus(provider);
  }

  async function handleSavedFormTest() {
    const providerId = form.id.trim() || selectedId;
    if (formMode !== "edit" || !providerId) {
      setFormCheck({ status: "failed", message: "请先保存提供商，再测试已保存配置。" });
      return;
    }
    setFormCheck({ status: "pending", message: "正在测试已保存配置…" });
    try {
      const result = await platformApiClient.testAiProvider(providerId);
      setAction({ providerId, label: "test", success: result.success, message: result.message });
      setFormCheck({ status: result.success ? "succeeded" : "failed", message: result.success ? `${result.message}。测试成功后可在更多菜单启用。` : result.message });
    } catch (error) {
      const message = errorMessage(error, "测试失败");
      setAction({ providerId, label: "test", success: false, message });
      setFormCheck({ status: "failed", message });
    }
  }

  async function handleDiscoverModelsForForm() {
    const providerId = form.id.trim() || selectedId;
    if (formMode !== "edit" || !providerId) {
      setFormCheck({ status: "failed", message: "请先保存提供商，再从平台发现模型。" });
      return;
    }
    setFormCheck({ status: "pending", message: "正在发现模型…" });
    try {
      const result = await platformApiClient.listAiProviderModels(providerId);
      setForm((current) => ({
        ...current,
        modelsText: result.models.join(", "),
        defaultModel: result.defaultModel ?? result.models[0] ?? current.defaultModel
      }));
      setAction({ providerId, label: "models", success: true, message: `${result.models.length} 个模型` });
      setFormCheck({ status: "succeeded", message: `已填入 ${result.models.length} 个模型；保存后生效。` });
    } catch (error) {
      const message = errorMessage(error, "模型发现失败");
      setAction({ providerId, label: "models", success: false, message });
      setFormCheck({ status: "failed", message });
    }
  }

  function upsertProvider(provider: AiProviderResponse) {
    setProviders((current) => {
      const exists = current.some((item) => item.id === provider.id);
      return exists ? current.map((item) => (item.id === provider.id ? provider : item)) : [...current, provider];
    });
  }

  const completedForm = completeAiProviderForm(form);
  const formDefaults = aiProviderKindDefaults[form.kind];
  const secretRequired = completedForm.relayMode !== "local";

  return (
    <section className="ai-providers-page" aria-labelledby="ai-provider-title">
      <header className="page-header ai-provider-header">
        <div>
          <p className="page-kicker">模型</p>
          <h1 id="ai-provider-title" className="page-title">
            AI 提供商管理
          </h1>
        </div>
        <span className={cx("page-status", viewState === "api" && canManage && "page-status-ready")}>{!canManage ? (viewState === "local-development" ? "本地开发 / 只读" : "只读模式") : viewStateLabel(viewState)}</span>
      </header>

      <dl className="page-summary-strip ai-provider-summary" aria-label="AI 提供商快速状态">
        <div className="page-summary-chip summary-tone-neutral">
          <dt>提供商</dt>
          <dd>{listState === "ready" ? metrics.total : "--"}</dd>
        </div>
        <div className="page-summary-chip summary-tone-success">
          <dt>启用</dt>
          <dd>{listState === "ready" ? metrics.active : "--"}</dd>
        </div>
        <div className="page-summary-chip summary-tone-warning">
          <dt>模型</dt>
          <dd>{listState === "ready" ? metrics.models : "--"}</dd>
        </div>
      </dl>

      <div className="ai-provider-toolbar" aria-label="provider filters">
        {(["all", "active", "disabled", "error"] as AiProviderFilter[]).map((item) => (
          <button key={item} type="button" className={cx("segmented-button", filter === item && "segmented-button-active")} onClick={() => setFilter(item)}>
            {filterLabel(item)}
          </button>
        ))}
        <button type="button" className="icon-command" disabled={!canManage} title={canManage ? "新增提供商" : "当前账号没有管理权限"} onClick={startCreate}>
          <Candy size={16} />
          <span>新增</span>
        </button>
      </div>
      {!canManage && <ResultBadge status="pending" label="当前账号为只读模式，保存、状态和测试动作需要平台管理员权限" />}
      {action && <ResultBadge status={action.success ? "succeeded" : "failed"} label={action.message} />}

      {listState === "loading" && <LoadingState label="正在加载 AI 提供商…" />}
      {listState === "error" && <ErrorState title="AI 提供商加载失败" reason={listError} diagnosticId="ai-provider:list" onRetry={() => void refreshProviders()} />}

      {listState === "ready" && providers.length === 0 && (
        <EmptyState icon={<FlaskConical size={26} />} title="暂无 AI 提供商" description="平台还没有返回任何提供商。创建第一个平台托管的 AI 提供商后，这里会显示 API 数据。" actionLabel="新增提供商" onAction={startCreate} />
      )}

      {listState === "ready" && providers.length > 0 && (
        <div className="provider-table-wrap">
          <table className="provider-table">
            <thead>
              <tr>
                <th>名称</th>
                <th>状态</th>
                <th>类型</th>
                <th>模式</th>
                <th>模型</th>
                <th>密钥状态</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              {filteredProviders.map((provider) => (
                <tr key={provider.id} className={cx(provider.id === selectedId && "provider-row-active")}>
                  <td>
                    <button type="button" className="table-link-button" disabled={!canManage} onClick={() => selectProvider(provider)}>
                      {provider.name}
                    </button>
                    <span className="provider-id">{provider.id}</span>
                  </td>
                  <td>
                    <span className={cx("status-pill", `status-${provider.status}`)}>{statusLabel(provider.status)}</span>
                  </td>
                  <td>{provider.kind}</td>
                  <td>{provider.relayMode}</td>
                  <td>{provider.models.length}</td>
                  <td>
                    <span className={cx("status-pill", provider.apiKeyConfigured ? "status-active" : "status-disabled")}>{provider.apiKeyConfigured ? "已配置" : "未配置"}</span>
                  </td>
                  <td className="provider-actions-cell">
                    <div className="row-actions human-row-actions" aria-label={`${provider.name} 操作`}>
                      <button type="button" disabled={!canManage || busyProviderIds.has(provider.id)} aria-label={`${provider.name} 测试配置`} onClick={() => void handleTest(provider)}>
                        <FlaskConical size={15} />
                        <span>{busyProviderIds.has(provider.id) ? "处理中" : "测试"}</span>
                      </button>
                      <button type="button" disabled={!canManage || busyProviderIds.has(provider.id)} aria-label={`${provider.name} 刷新模型`} onClick={() => void handleModels(provider)}>
                        <Sparkles size={15} />
                        <span>{busyProviderIds.has(provider.id) ? "处理中" : "模型"}</span>
                      </button>
                      <button type="button" disabled={!canManage || busyProviderIds.has(provider.id)} aria-label={`编辑 ${provider.name}`} onClick={() => selectProvider(provider)}>
                        <WandSparkles size={15} />
                        <span>编辑</span>
                      </button>
                      <button
                        type="button"
                        className={cx(expandedProviderId === provider.id && "row-action-button-active")}
                        aria-expanded={expandedProviderId === provider.id}
                        aria-label={`${provider.name} 更多操作`}
                        disabled={!canManage || busyProviderIds.has(provider.id)}
                        onClick={() => setExpandedProviderId((current) => (current === provider.id ? null : provider.id))}
                      >
                        <MoreHorizontal size={15} />
                        <span>更多</span>
                      </button>
                    </div>
                    {expandedProviderId === provider.id && (
                      <div className="inline-action-menu" role="menu" aria-label={`${provider.name} 更多操作`}>
                        <button type="button" role="menuitem" onClick={() => requestStatusChange(provider)}>
                          <Power size={14} />
                          <span>{provider.status === "active" ? "停用提供商" : "启用提供商"}</span>
                        </button>
                        <button
                          type="button"
                          role="menuitem"
                          className="danger-command"
                          onClick={() => {
                            setExpandedProviderId(null);
                            if (canManage) setConfirmRetire(provider);
                          }}
                        >
                          <UserRoundMinus size={14} />
                          <span>退役提供商</span>
                        </button>
                      </div>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          {filteredProviders.length === 0 && <EmptyState title="暂无匹配提供商" description="调整状态筛选，或点击新增配置一个平台托管的 AI 提供商。" />}
        </div>
      )}

      <AIConfigDiffReviewPanel />

      <ManagementDialog open={formMode !== null} title={formMode === "edit" ? "编辑提供商" : "新增提供商"} wide onClose={() => { if (viewState !== "saving") closeForm(); }}>
        <form className="provider-form dialog-form" onSubmit={(event) => void handleSubmit(event)}>
          <ProviderSetupGuide />
          <div className="provider-preset-grid" aria-label="提供商预设">
            {providerPresets.map((preset) => (
              <button key={preset.kind} type="button" className={cx("provider-preset-option", form.kind === preset.kind && "provider-preset-option-active")} onClick={() => applyProviderPreset(preset)}>
                <strong>{preset.label}</strong>
                <span>{aiProviderKindDefaults[preset.kind].requirement}</span>
              </button>
            ))}
          </div>
          <label>
            <span>名称</span>
            <input name="name" value={form.name} onChange={handleInput} />
            <small className="field-help">可选；留空时使用厂商默认名称。系统 ID 会自动生成。</small>
          </label>
          <label>
            <span>{secretRequired ? "平台密钥引用" : "密钥引用（本地模式可留空）"}</span>
            <input name="apiKeyRef" value={form.apiKeyRef} onChange={handleInput} placeholder={form.apiKeyConfigured ? "已配置；留空保持不变" : secretRequired ? "secret://providers/..." : "本地服务通常不需要"} />
            <small className="field-help">
              {secretRequired ? "填写 secret://providers/...；真实密钥进入平台 secret store，不粘贴到页面。" : "Ollama 本地模式默认只需要 Base URL 和模型名。"}
            </small>
          </label>
          <div className="provider-generated-id" aria-label="自动生成的提供商 ID">
            <span>系统 ID</span>
            <code>{generatedAiProviderId(form)}</code>
            <small>自动生成，不需要手填。</small>
          </div>
          <details className="provider-advanced-settings">
            <summary>高级设置：Base URL、模型、模式、超时</summary>
            <div className="form-grid">
              <label>
                <span>类型</span>
                <select name="kind" value={form.kind} onChange={handleInput}>
                  <option value="openai-compatible">OpenAI Compatible</option>
                  <option value="openai">OpenAI</option>
                  <option value="claude">Claude</option>
                  <option value="gemini">Gemini</option>
                  <option value="ollama">Ollama</option>
                  <option value="custom">Custom</option>
                </select>
              </label>
              <label>
                <span>模式</span>
                <select name="relayMode" value={form.relayMode} onChange={handleInput}>
                  <option value="direct">Direct</option>
                  <option value="relay">Relay</option>
                  <option value="local">Local</option>
                </select>
              </label>
            </div>
            <label>
              <span>Base URL</span>
              <input name="baseUrl" value={form.baseUrl} onChange={handleInput} placeholder={form.baseUrlConfigured ? "已配置；留空保持不变" : formDefaults.baseUrl} />
              <small className="field-help">{formDefaults.advancedNote}</small>
            </label>
            <label>
              <span>模型</span>
              <input name="modelsText" value={form.modelsText} onChange={handleInput} />
              <small className="field-help">逗号分隔；编辑已保存配置时可以自动发现并填入。</small>
            </label>
            <div className="form-grid">
              <label>
                <span>默认模型</span>
                <input name="defaultModel" value={form.defaultModel} onChange={handleInput} />
              </label>
              <label>
                <span>超时 ms</span>
                <input name="timeoutMs" value={form.timeoutMs} onChange={handleInput} inputMode="numeric" />
              </label>
            </div>
            <label>
              <span>脱敏策略</span>
              <input name="redactionPolicy" value={form.redactionPolicy} onChange={handleInput} />
              <small className="field-help">默认 default 会隐藏密钥、Bearer token 和敏感配置片段。</small>
            </label>
          </details>
          <div className="form-helper-actions">
            <button type="button" className="theme-upload" onClick={runFormPreflight}>
              保存前检查
            </button>
            <button type="button" className="theme-upload" disabled={formMode !== "edit"} onClick={() => void handleSavedFormTest()}>
              {formMode === "edit" ? "测试已保存配置" : "保存后可测试"}
            </button>
            <button type="button" className="theme-upload" disabled={formMode !== "edit"} onClick={() => void handleDiscoverModelsForForm()}>
              {formMode === "edit" ? "发现模型并填入" : "保存后可发现模型"}
            </button>
          </div>
          {formCheck && <ResultBadge status={formCheck.status} label={formCheck.message} />}
          <div className="confirm-actions">
            <button type="button" disabled={viewState === "saving"} onClick={closeForm}>
              取消
            </button>
            <button type="submit" className="confirm-primary" disabled={!canManage || viewState === "saving"}>
              <WandSparkles size={16} />
              <span>{viewState === "saving" ? "保存中…" : "保存配置"}</span>
            </button>
          </div>
        </form>
      </ManagementDialog>

      <ConfirmDialog
        open={confirmRetire !== null}
        title="退役 AI 提供商"
        description={`确认将 ${confirmRetire?.name ?? ""}（${confirmRetire?.id ?? ""}）退役为停用状态？如果仍被引用，平台会拒绝这次变更。`}
        confirmLabel="确认退役"
        danger
        busy={confirmBusy}
        onCancel={() => { if (!confirmBusy) setConfirmRetire(null); }}
        onConfirm={() => void (confirmRetire ? handleRetire(confirmRetire) : undefined)}
      />
      <ConfirmDialog
        open={confirmStatus !== null}
        title="确认提供商状态变更"
        description={`确认将 ${confirmStatus?.name ?? "该提供商"} ${confirmStatus?.status === "active" ? "停用" : "启用"}？平台会返回持久状态，失败时保持当前状态。`}
        confirmLabel={confirmStatus?.status === "active" ? "确认停用" : "确认启用"}
        danger={confirmStatus?.status === "active"}
        busy={confirmStatus ? busyProviderIds.has(confirmStatus.id) : false}
        onCancel={() => { if (!confirmStatus || !busyProviderIds.has(confirmStatus.id)) setConfirmStatus(null); }}
        onConfirm={() => { if (confirmStatus) { void handleStatus(confirmStatus).then((succeeded) => { if (succeeded) setConfirmStatus(null); }); } }}
      />
    </section>
  );
}

function ProviderSetupGuide() {
  return (
    <div className="form-guidance provider-setup-guide">
      <strong>配置流程</strong>
      <span>先选厂商，再填写平台侧 secret 引用。ID、Base URL、模型和超时会按厂商默认值生成，需要时再展开高级设置。</span>
    </div>
  );
}

function errorMessage(error: unknown, fallback: string): string {
  if (!(error instanceof Error)) {
    return fallback;
  }
  if (error.message.toLowerCase().includes("reference")) {
    return `${fallback}：${error.message}`;
  }
  return error.message || fallback;
}

function viewStateLabel(viewState: AiProviderViewState): string {
  switch (viewState) {
    case "api":
      return "平台 API";
    case "local-development":
      return "本地开发";
    case "saving":
      return "保存中";
    default:
      return "连接失败";
  }
}

function filterLabel(filter: AiProviderFilter): string {
  switch (filter) {
    case "active":
      return "启用";
    case "disabled":
      return "停用";
    case "error":
      return "错误";
    default:
      return "全部";
  }
}

function statusLabel(status: AiProviderStatus): string {
  switch (status) {
    case "active":
      return "启用";
    case "disabled":
      return "停用";
    default:
      return "错误";
  }
}