'use client'

import { useEffect, useMemo, useRef, useState } from 'react'
import { Info, Plus, RefreshCw, Save, Search } from 'lucide-react'
import { useConfirmActionDialog } from '@/components/ConfirmActionDialog'
import type { AiModelAdminState, AiModelCatalogEntry, AiModelProvider, AiModelStage } from '@/lib/ai-model-types'

const stages: Array<{ id: AiModelStage; label: string; shortLabel: string }> = [
  { id: 'analysis', label: '资料分析', shortLabel: '分析' }, { id: 'copy', label: '卖点文案', shortLabel: '文案' }, { id: 'image', label: '图片生成', shortLabel: '生图' },
]
const fieldClass = 'min-h-11 w-full min-w-0 rounded-lg border border-[#cfd8e3] bg-white px-3 py-2 text-sm text-[#101828] placeholder:text-[#66758b] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1677ff] disabled:bg-[#f8fafc] disabled:text-[#66758b]'
const buttonClass = 'inline-flex min-h-11 shrink-0 items-center justify-center gap-2 rounded-lg border border-[#cfd8e3] bg-white px-3 text-sm font-medium text-[#344054] transition-colors hover:bg-[#f8fafc] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1677ff] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50'
const primaryClass = `${buttonClass} !border-[#0050cb] !bg-[#0050cb] !text-white hover:!bg-[#003da3]`
const checkboxClass = 'h-4 w-4 shrink-0 accent-[#0050cb] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1677ff] focus-visible:ring-offset-2 disabled:cursor-not-allowed'
const capabilityLabels = { text: '对话', vision: '视觉理解', image: '生图', tts: '语音合成', asr: '语音识别', music: '音乐', video: '视频', embedding: '向量', 'image-tool': '图像工具', 'three-d': '3D', other: '其他', unknown: '待识别' } as const
const verificationLabels = { untested: '待测试', running: '测试中', passed: '已通过', failed: '未通过', unknown: '暂停核查', stale: '需重新测试' } as const

interface ProviderForm { id: string | null; revision: number; name: string; baseUrl: string; apiKey: string }
class ModelRequestError extends Error { constructor(message: string, readonly status: number) { super(message) } }

async function request(path = '', init: RequestInit = {}): Promise<AiModelAdminState> {
  const response = await fetch(`/api/admin/ai-models${path}`, { ...init, cache: 'no-store', headers: { 'Content-Type': 'application/json', ...init.headers } })
  const body = await response.json().catch(() => ({}))
  if (!response.ok) throw new ModelRequestError(typeof body.error === 'string' ? body.error : body.error?.message || '操作未完成，请重试', response.status)
  if (!Array.isArray(body.providers)) throw new Error('未能读取服务端状态')
  return body as AiModelAdminState
}

function usable(provider: AiModelProvider, model: AiModelCatalogEntry, stage: AiModelStage) {
  return provider.enabled && provider.hasApiKey && model.present && model.enabled && model.verification[stage].status === 'passed' && model.stages.includes(stage) && model.capabilities.allowedStages.includes(stage)
}

export default function AiModelManagementPanel({ onStateChange }: { onStateChange?: (state: { dirty: boolean; busy: boolean }) => void }) {
  const [state, setState] = useState<AiModelAdminState | null>(null)
  const [draft, setDraft] = useState<AiModelAdminState | null>(null)
  const [loading, setLoading] = useState(true)
  const [busy, setBusy] = useState('')
  const [error, setError] = useState('')
  const [notice, setNotice] = useState('')
  const [formError, setFormError] = useState('')
  const [form, setForm] = useState<ProviderForm | null>(null)
  const [search, setSearch] = useState('')
  const [capabilityFilter, setCapabilityFilter] = useState('all')
  const [statusFilter, setStatusFilter] = useState('all')
  const [page, setPage] = useState(1)
  const [testStages, setTestStages] = useState<Record<string, AiModelStage>>({})
  const [expandedDetails, setExpandedDetails] = useState<Record<string, boolean>>({})
  const busyRef = useRef(false)
  const uncertainAttempts = useRef(new Map<string, { stage: AiModelStage; previousId: string | null; requestId: string }>())
  const { confirmAction, confirmActionDialog } = useConfirmActionDialog()
  const dirty = !!state && !!draft && JSON.stringify(state) !== JSON.stringify(draft)

  function accept(next: AiModelAdminState) {
    const resolved = { ...next, providers: next.providers.map((provider) => ({ ...provider, models: provider.models.map((model) => {
      const attempt = uncertainAttempts.current.get(model.key)
      if (!attempt) return model
      const result = model.verification[attempt.stage]
      if (result.id && result.id !== attempt.previousId) { uncertainAttempts.current.delete(model.key); return model }
      return { ...model, verification: { ...model.verification, [attempt.stage]: { ...result, status: 'unknown' as const, requestId: attempt.requestId, canResume: false, message: '尚未获取本次测试记录，请核查请求编号后再操作' } } }
    }) })) }
    setState(resolved); setDraft(resolved)
  }

  useEffect(() => {
    let cancelled = false
    request().then((next) => { if (!cancelled) accept(next) }).catch((cause) => { if (!cancelled) setError(cause.message) }).finally(() => { if (!cancelled) setLoading(false) })
    return () => { cancelled = true }
  }, [])

  useEffect(() => {
    onStateChange?.({ dirty: dirty || !!form, busy: !!busy })
  }, [dirty, form, busy, onStateChange])

  useEffect(() => () => { onStateChange?.({ dirty: false, busy: false }) }, [onStateChange])

  useEffect(() => {
    if (!dirty && !form && !busy.startsWith('verify:')) return
    const prevent = (event: BeforeUnloadEvent) => { event.preventDefault(); event.returnValue = '' }
    window.addEventListener('beforeunload', prevent)
    return () => window.removeEventListener('beforeunload', prevent)
  }, [dirty, form, busy])

  async function run(identity: string, action: () => Promise<AiModelAdminState>, success: string, closeForm = false) {
    if (busyRef.current) return
    busyRef.current = true; setBusy(identity); setError(''); setFormError(''); setNotice('')
    try {
      accept(await action())
      setNotice(success)
      if (closeForm) setForm(null)
    } catch (cause) {
      const message = cause instanceof Error ? cause.message : '操作未完成，请重试'
      if (identity === 'provider-save') setFormError(message)
      else setError(message)
    } finally { busyRef.current = false; setBusy('') }
  }

  function updateModel(providerId: string, key: string, change: Partial<AiModelCatalogEntry>) {
    setDraft((current) => {
      if (!current) return current
      const defaults = { ...current.defaults }
      const providers = current.providers.map((provider) => provider.id !== providerId ? provider : {
        ...provider,
        models: provider.models.map((model) => {
          if (model.key !== key) return model
          const updated = { ...model, ...change }
          if (!updated.stages.some((stage) => updated.capabilities.allowedStages.includes(stage))) updated.enabled = false
          for (const stage of stages) if (defaults[stage.id] === key && !usable(provider, updated, stage.id)) defaults[stage.id] = null
          return updated
        }),
      })
      return { ...current, providers, defaults }
    })
    setError(''); setNotice('')
  }

  function saveProvider(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault()
    if (!form) return
    const body = { name: form.name.trim(), baseUrl: form.baseUrl.trim(), ...(form.apiKey.trim() ? { apiKey: form.apiKey.trim() } : {}), ...(form.id ? { revision: form.revision } : {}) }
    void run('provider-save', () => request(form.id ? `/providers/${encodeURIComponent(form.id)}` : '/providers', { method: form.id ? 'PATCH' : 'POST', body: JSON.stringify(body) }), form.id ? '上游已保存' : '上游已添加，请同步模型目录', true)
  }

  async function testModel(provider: AiModelProvider, model: AiModelCatalogEntry, stage: AiModelStage) {
    if (busyRef.current || dirty || form || !provider.enabled || !provider.hasApiKey || !model.present || !model.capabilities.allowedStages.includes(stage) || Object.values(model.verification).some((result) => result.status === 'running' || result.status === 'unknown')) return
    busyRef.current = true
    setBusy(`confirm:${model.key}`)
    setTestStages((current) => ({ ...current, [model.key]: stage }))
    const label = stages.find((item) => item.id === stage)!.label
    const confirmation = await confirmAction({ title: `测试${label}`, description: <><span className="break-all">{model.id}</span><br />将实际调用模型，可能产生上游费用。</>, confirmLabel: '开始测试', tone: 'primary' })
    if (!confirmation.confirmed) { busyRef.current = false; setBusy(''); return }
    setBusy(`verify:${model.key}:${stage}`); setError(''); setNotice('')
    let idempotencyKey = ''
    try {
      idempotencyKey = crypto.randomUUID()
      const next = await request(`/providers/${encodeURIComponent(provider.id)}/models/${encodeURIComponent(model.key)}/verify`, { method: 'POST', body: JSON.stringify({ stage, revision: provider.revision, idempotencyKey }) })
      accept(next)
    } catch (cause) {
      // Refresh state after a lost response; never repeat a potentially billable request.
      const message = cause instanceof Error ? cause.message : '测试请求未完成'
      if (idempotencyKey && (!(cause instanceof ModelRequestError) || cause.status >= 500)) uncertainAttempts.current.set(model.key, { stage, previousId: model.verification[stage].id, requestId: idempotencyKey })
      try { accept(await request()) } catch {
        const markUnknown = (current: AiModelAdminState | null) => current && ({ ...current, providers: current.providers.map((entry) => entry.id !== provider.id ? entry : { ...entry, models: entry.models.map((item) => item.key !== model.key ? item : { ...item, verification: { ...item.verification, [stage]: { ...item.verification[stage], status: 'unknown' as const, message: '未能获取测试结果，请刷新状态核查' } } }) }) })
        setState(markUnknown); setDraft(markUnknown)
      }
      setError(`${message}；已停止提交，请核查测试状态。`)
    } finally { busyRef.current = false; setBusy('') }
  }

  const rows = useMemo(() => (draft?.providers || []).flatMap((provider) => provider.models.map((model) => ({ provider, model }))), [draft])
  const visibleRows = rows.filter(({ provider, model }) => {
    const query = search.trim().toLowerCase()
    if (query && !`${model.id} ${provider.name}`.toLowerCase().includes(query)) return false
    if (capabilityFilter !== 'all' && model.capabilities.kind !== capabilityFilter) return false
    if (statusFilter === 'enabled' && !model.enabled) return false
    if (statusFilter === 'disabled' && model.enabled) return false
    if (statusFilter === 'missing' && model.present) return false
    if (statusFilter === 'untested' && !model.capabilities.allowedStages.some((stage) => ['untested', 'stale'].includes(model.verification[stage].status))) return false
    if (statusFilter === 'attention' && !Object.values(model.verification).some((result) => ['failed', 'unknown', 'running'].includes(result.status))) return false
    return true
  })
  const providerBlocked = !!busy || dirty || !!form
  const pageCount = Math.max(1, Math.ceil(visibleRows.length / 20))
  const currentPage = Math.min(page, pageCount)
  const pageRows = visibleRows.slice((currentPage - 1) * 20, currentPage * 20)
  const needsStatusRefresh = rows.some(({ model }) => Object.values(model.verification).some((result) => result.status === 'running' || result.status === 'unknown'))

  if (loading) return <section aria-label="正在加载 AI 模型接入" className="space-y-4 p-4 sm:p-6"><div className="h-6 w-36 motion-safe:animate-pulse rounded bg-[#e8edf3]" /><div className="h-24 motion-safe:animate-pulse rounded-lg bg-[#eef2f6]" /><div className="h-44 motion-safe:animate-pulse rounded-lg bg-[#eef2f6]" /></section>
  if (!draft) return <section className="p-4 sm:p-6"><p role="alert" className="mb-3 text-sm text-[#b42318]">{error || 'AI 模型配置未能加载'}</p><button type="button" className={buttonClass} disabled={!!busy} onClick={() => void run('reload', () => request(), '已重新加载')}>重新加载</button></section>

  return <section aria-label="AI 模型接入" className="min-w-0 space-y-6 p-4 text-[#101828] selection:bg-[#dbeafe] selection:text-[#101828] sm:p-6">
    <div className="flex flex-wrap items-center justify-between gap-3">
      <h3 className="text-base font-semibold">AI 模型接入</h3>
      <div className="flex flex-wrap gap-2">
        {needsStatusRefresh && <button type="button" className={buttonClass} disabled={providerBlocked} onClick={() => void run('refresh-status', () => request(), '测试状态已刷新')}><RefreshCw className="h-4 w-4" aria-hidden="true" />刷新测试状态</button>}
        {draft.legacyAvailable && <button type="button" className={buttonClass} disabled={providerBlocked} onClick={() => void run('import', () => request('/import-environment', { method: 'POST' }), '当前服务端连接已迁入')} >{busy === 'import' ? '正在迁入…' : '迁入当前连接'}</button>}
        <button type="button" className={buttonClass} disabled={providerBlocked || !draft.encryptionConfigured} onClick={() => { setForm({ id: null, revision: 0, name: '', baseUrl: '', apiKey: '' }); setFormError(''); setNotice('') }}><Plus className="h-4 w-4" aria-hidden="true" />新增上游</button>
      </div>
    </div>
    {!draft.encryptionConfigured && <p className="text-sm text-[#854a0e]">服务端尚未配置密钥加密，暂不能新增或替换 API Key。</p>}
    {(error || notice) && <p role={error ? 'alert' : 'status'} className={`break-words rounded-lg px-3 py-2.5 text-sm ${error ? 'bg-[#fff0ee] text-[#b42318]' : 'bg-[#e9f8f2] text-[#087052]'}`}>{error || notice}</p>}
    <section aria-label="上游连接">
      <h4 className="mb-2 text-sm font-semibold text-[#344054]">上游连接</h4>
      {!draft.providers.length && !form && <p className="py-4 text-sm text-[#66758b]">{draft.legacyAvailable ? '迁入当前连接，或新增上游后同步模型目录。' : '新增上游后同步模型目录。'}</p>}
      <div className="divide-y divide-[#e2e8f0] border-y border-[#e2e8f0]">
        {draft.providers.map((provider) => <div key={provider.id} className="flex min-w-0 flex-wrap items-center justify-between gap-3 py-3">
          <div className="min-w-0 flex-1 basis-48"><div className="flex flex-wrap items-center gap-2"><span className="break-words text-sm font-semibold">{provider.name}</span><span className={`text-xs ${provider.enabled ? 'text-[#087052]' : 'text-[#66758b]'}`}>{provider.enabled ? '已启用' : '已停用'}</span></div><p className="mt-1 break-all text-xs text-[#66758b]">{provider.baseUrl}</p><p className="mt-1 text-xs text-[#66758b]">{provider.hasApiKey ? (provider.credentialSource === 'environment' ? '使用服务端密钥' : '密钥已安全保存') : '未配置密钥'} · {provider.models.filter((model) => model.present).length} 个目录模型{provider.syncedAt ? ` · 同步于 ${new Date(provider.syncedAt).toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })}` : ' · 尚未同步'}</p></div>
          <div className="flex flex-wrap gap-2"><button type="button" className={buttonClass} disabled={providerBlocked} aria-label={`编辑 ${provider.name}`} onClick={() => { setForm({ id: provider.id, revision: provider.revision, name: provider.name, baseUrl: provider.baseUrl, apiKey: '' }); setFormError(''); setNotice('') }}>编辑</button><button type="button" className={buttonClass} disabled={providerBlocked || !provider.hasApiKey} aria-label={`同步 ${provider.name} 的模型目录`} onClick={() => void run(`sync:${provider.id}`, () => request(`/providers/${encodeURIComponent(provider.id)}/sync`, { method: 'POST', body: JSON.stringify({ revision: provider.revision }) }), '模型目录已同步')}><RefreshCw className="h-4 w-4" aria-hidden="true" />{busy === `sync:${provider.id}` ? '同步中…' : '同步目录'}</button><button type="button" className={buttonClass} disabled={providerBlocked} aria-label={`${provider.enabled ? '停用' : '启用'} ${provider.name}`} onClick={() => void run(`toggle:${provider.id}`, () => request(`/providers/${encodeURIComponent(provider.id)}`, { method: 'PATCH', body: JSON.stringify({ enabled: !provider.enabled, revision: provider.revision }) }), provider.enabled ? '上游已停用' : '上游已启用')}>{provider.enabled ? '停用' : '启用'}</button></div>
        </div>)}
      </div>
      {form && <form aria-label={form.id ? '编辑上游连接' : '新增上游连接'} onSubmit={saveProvider} className="mt-4 space-y-3 border-b border-[#e2e8f0] pb-4">
        <div className="grid gap-3 sm:grid-cols-2"><label className="space-y-1.5 text-sm font-medium">上游名称<input autoFocus required maxLength={100} className={fieldClass} disabled={!!busy} value={form.name} onChange={(event) => setForm({ ...form, name: event.target.value })} /></label><label className="space-y-1.5 text-sm font-medium">API 地址<input type="url" required maxLength={2048} placeholder="https://api.example.com" className={fieldClass} disabled={!!busy} value={form.baseUrl} onChange={(event) => setForm({ ...form, baseUrl: event.target.value })} /></label></div>
        <label className="block space-y-1.5 text-sm font-medium">API Key<input type="password" autoComplete="new-password" required={!form.id} className={fieldClass} disabled={!!busy || !draft.encryptionConfigured} value={form.apiKey} placeholder={form.id ? '留空保留当前密钥' : '仅保存到服务端'} onChange={(event) => setForm({ ...form, apiKey: event.target.value })} /></label>
        {formError && <p role="alert" className="break-words text-sm text-[#b42318]">{formError}</p>}
        <div className="flex justify-end gap-2"><button type="button" className={buttonClass} disabled={!!busy} onClick={() => { setForm(null); setFormError('') }}>取消</button><button type="submit" className={primaryClass} disabled={!!busy}>{busy === 'provider-save' ? '保存中…' : '保存上游'}</button></div>
      </form>}
    </section>
    <section aria-label="用户可选模型" className="space-y-4">
      <div className="flex flex-wrap items-center justify-between gap-3"><h4 className="text-sm font-semibold text-[#344054]">用户可选模型</h4><div className="flex items-center gap-2">{dirty && <span role="status" className="text-xs text-[#66758b]">有未保存修改</span>}<button type="button" className={buttonClass} disabled={!dirty || !!busy || !!form} onClick={() => { setDraft(state); setError(''); setNotice('') }}>撤销</button><button type="button" className={primaryClass} disabled={!dirty || !!busy || !!form} onClick={() => void run('configuration', () => request('/configuration', { method: 'PUT', body: JSON.stringify({ revision: draft.revision, defaults: draft.defaults, providers: draft.providers.map((provider) => ({ id: provider.id, revision: provider.revision, models: provider.models.map(({ key, enabled, stages: roles }) => ({ key, enabled, stages: roles })) })) }) }), '模型配置已保存')}><Save className="h-4 w-4" aria-hidden="true" />{busy === 'configuration' ? '保存中…' : '保存配置'}</button></div></div>
      <fieldset disabled={!!busy || !!form} className="grid min-w-0 gap-3 sm:grid-cols-3">
        <legend className="sr-only">阶段默认模型</legend>
        {stages.map((stage) => {
          const options = rows.filter(({ provider, model }) => usable(provider, model, stage.id))
          const selected = draft.defaults[stage.id]
          const unavailable = !!selected && !options.some(({ model }) => model.key === selected)
          const selectedRow = rows.find(({ model }) => model.key === selected)
          return <label key={stage.id} className="min-w-0 space-y-1.5 text-sm font-medium">{stage.label}默认模型<select className={fieldClass} value={selected || ''} onChange={(event) => { setDraft({ ...draft, defaults: { ...draft.defaults, [stage.id]: event.target.value || null } }); setError(''); setNotice('') }}><option value="">未设置</option>{unavailable && <option value={selected!}>{selectedRow?.model.id || '原默认模型'} · 当前不可用</option>}{options.map(({ provider, model }) => <option key={model.key} value={model.key}>{model.id} · {provider.name}</option>)}</select>{(!selected || unavailable) && <span className="block text-xs font-normal text-[#854a0e]">{unavailable ? '请重新选择可用模型' : '尚未设置，详情页生成暂不可用'}</span>}</label>
        })}
      </fieldset>
      {!!rows.length && <>
        <div className="grid min-w-0 grid-cols-2 gap-2 sm:flex sm:flex-wrap"><label className="relative col-span-2 min-w-0 sm:flex-1 sm:basis-48"><span className="sr-only">搜索模型或上游</span><Search className="pointer-events-none absolute left-3 top-3.5 h-4 w-4 text-[#66758b]" aria-hidden="true" /><input className={`${fieldClass} !pl-9`} value={search} onChange={(event) => { setSearch(event.target.value); setPage(1) }} placeholder="搜索模型或上游" /></label><select aria-label="按能力筛选模型" className={`${fieldClass} sm:!w-auto sm:flex-none`} value={capabilityFilter} onChange={(event) => { setCapabilityFilter(event.target.value); setPage(1) }}><option value="all">全部能力</option>{Object.entries(capabilityLabels).map(([kind, label]) => <option key={kind} value={kind}>{label}</option>)}</select><select aria-label="按状态筛选模型" className={`${fieldClass} sm:!w-auto sm:flex-none`} value={statusFilter} onChange={(event) => { setStatusFilter(event.target.value); setPage(1) }}><option value="all">全部状态</option><option value="enabled">已开放</option><option value="disabled">未开放</option><option value="untested">待测试</option><option value="attention">待处理</option><option value="missing">已离开目录</option></select></div>
        <p className="text-xs text-[#66758b]">先测试用途，再勾选开放并保存。{dirty ? ' 测试前请先保存或撤销修改。' : ''}</p>
        <div className="hidden grid-cols-[minmax(0,1fr)_88px_200px_248px] gap-3 border-b border-[#e2e8f0] bg-[#f8fafc] px-3 py-2 text-xs font-semibold text-[#4f6077] xl:grid" aria-hidden="true"><span>模型 / 上游</span><span>开放给用户</span><span>用户可选用途</span><span>实际测试</span></div>
        <div className="divide-y divide-[#e2e8f0] border-b border-[#e2e8f0]" aria-label="模型目录">
          {!visibleRows.length && <p role="status" className="px-3 py-5 text-sm text-[#66758b]">没有匹配模型</p>}
          {pageRows.map(({ provider, model }) => {
            const testableStages = stages.filter((stage) => model.capabilities.allowedStages.includes(stage.id))
            const selectedStage = testableStages.find((stage) => ['unknown', 'running'].includes(model.verification[stage.id].status)) || testableStages.find((stage) => stage.id === testStages[model.key]) || testableStages.find((stage) => model.verification[stage.id].status !== 'passed') || testableStages[0]
            const result = selectedStage ? model.verification[selectedStage.id] : null
            const protocol = selectedStage ? model.capabilities.protocols?.[selectedStage.id] : null
            const detailsId = `test-details-${model.key}-${selectedStage?.id}`
            const canInspect = !!protocol || !!result && !!(result.message || result.checkedAt || result.requestId)
            const unsettled = Object.values(model.verification).some((entry) => entry.status === 'running' || entry.status === 'unknown')
            const testing = busy.startsWith(`verify:${model.key}:`)
            const blockedTest = providerBlocked || !provider.enabled || !provider.hasApiKey || !model.present || !selectedStage || unsettled
            return <div key={model.key} aria-label={`${model.id} · ${provider.name}`} className="grid min-w-0 gap-x-3 gap-y-1 px-3 py-3 sm:grid-cols-[minmax(0,1fr)_auto] xl:grid-cols-[minmax(0,1fr)_88px_200px_248px] xl:items-center">
            <div className="min-w-0"><p className="break-all text-sm font-medium">{model.id}</p><p className="mt-1 break-words text-xs text-[#66758b]"><span title={model.capabilities.reason}>{capabilityLabels[model.capabilities.kind]}{model.capabilities.kind !== 'unknown' && !model.capabilities.allowedStages.length ? ' · 待适配' : ''}</span> · {provider.name}{!provider.enabled ? ' · 上游已停用' : ''}{!model.present ? ' · 已离开上游目录' : ''}</p><span id={`capability-${model.key}`} className="sr-only">{model.capabilities.reason}</span></div>
            <label className="inline-flex min-h-11 items-center gap-2 text-sm"><input type="checkbox" className={checkboxClass} checked={model.enabled} disabled={!!busy || !!form || !model.enabled && (!model.present || !provider.enabled || !provider.hasApiKey || !model.stages.length || !model.stages.every((stage) => model.capabilities.allowedStages.includes(stage) && model.verification[stage].status === 'passed'))} aria-label={`开放 ${model.id} · ${provider.name} 给用户`} onChange={(event) => updateModel(provider.id, model.key, { enabled: event.target.checked })} />开放</label>
            <fieldset disabled={!!busy || !!form} className="flex min-w-0 flex-wrap gap-x-3"><legend className="sr-only">{model.id} 的用户可选用途</legend>{stages.map((stage) => {
              const adapted = model.capabilities.allowedStages.includes(stage.id)
              const supported = adapted && model.verification[stage.id].status === 'passed'
              const checked = model.stages.includes(stage.id)
              const reason = supported ? `${stage.label}测试已通过` : adapted ? `${stage.label}：${verificationLabels[model.verification[stage.id].status]}，通过后可开放` : model.capabilities.allowedStages.length ? `此模型不支持${stage.label}` : model.capabilities.reason
              return <label key={stage.id} title={reason} className={`inline-flex min-h-11 items-center gap-1.5 text-xs ${!supported ? 'text-[#66758b]' : ''}`}><input type="checkbox" className={checkboxClass} aria-label={`${model.id} · ${provider.name} 用于${stage.label}`} aria-describedby={`purpose-${model.key}-${stage.id}`} checked={checked} disabled={!supported && !checked} onChange={(event) => { if (!event.target.checked || supported) updateModel(provider.id, model.key, { stages: event.target.checked ? [...model.stages, stage.id] : model.stages.filter((value) => value !== stage.id) }) }} />{stage.shortLabel}<span id={`purpose-${model.key}-${stage.id}`} className="sr-only">{reason}</span></label>
            })}</fieldset>
            <div className="min-w-0 space-y-1.5">
              {selectedStage && result ? <>
                <div className="flex min-w-0 items-center gap-2">
                  <select aria-label={`${model.id} · ${provider.name} 测试用途`} className={`${fieldClass} !px-2`} disabled={!!busy || unsettled} value={selectedStage.id} onChange={(event) => setTestStages((current) => ({ ...current, [model.key]: event.target.value as AiModelStage }))}>
                    {testableStages.map((stage) => <option key={stage.id} value={stage.id}>{stage.shortLabel} · {verificationLabels[model.verification[stage.id].status]}</option>)}
                  </select>
                  {result.canResume && result.id ? <button type="button" className={buttonClass} disabled={providerBlocked || !provider.enabled || !provider.hasApiKey} aria-label={`查询 ${model.id} · ${provider.name} 的${selectedStage.label}结果`} onClick={() => {
                    setTestStages((current) => ({ ...current, [model.key]: selectedStage.id }))
                    void run(`result:${model.key}`, () => request(`/providers/${encodeURIComponent(provider.id)}/verifications/${encodeURIComponent(result.id!)}/refresh`, { method: 'POST' }), '')
                  }}>{busy === `result:${model.key}` ? '查询中…' : '查询结果'}</button> : <button type="button" className={buttonClass} disabled={blockedTest} aria-label={`测试 ${model.id} · ${provider.name} 的${selectedStage.label}`} onClick={() => void testModel(provider, model, selectedStage.id)}>{testing || result.status === 'running' ? '测试中…' : result.status === 'passed' || result.status === 'stale' ? '重测' : '测试'}</button>}
                  {canInspect && <button type="button" className={`${buttonClass} !w-11 !px-0`} aria-label={`${model.id} · ${provider.name} ${selectedStage.label}测试详情`} aria-expanded={!!expandedDetails[detailsId]} aria-controls={detailsId} title="测试详情" onClick={() => setExpandedDetails((current) => ({ ...current, [detailsId]: !current[detailsId] }))}><Info className="h-4 w-4" aria-hidden="true" /></button>}
                </div>
                <p role="status" className={`text-xs ${result.status === 'passed' ? 'text-[#087052]' : result.status === 'failed' || result.status === 'unknown' ? 'text-[#b42318]' : 'text-[#66758b]'}`}>{testing ? '正在调用模型，请稍候' : result.status === 'unknown' ? result.canResume ? '等待上游结果，可查询' : '结果未知，暂停核查' : result.status === 'running' ? '测试进行中，可刷新状态' : `${selectedStage.shortLabel} · ${verificationLabels[result.status]}`}</p>
                {canInspect && <div id={detailsId} hidden={!expandedDetails[detailsId]} className="space-y-1 break-words pb-2 text-xs text-[#66758b]">
                  {protocol && <><p className="break-all">协议：{protocol.id}</p><p className="break-all">接口：{protocol.path}</p>{(protocol.scopeId || protocol.routeId || protocol.operationId) && <p className="break-all">路由：{[protocol.scopeId, protocol.routeId, protocol.operationId].filter(Boolean).join(' / ')}</p>}</>}
                  {result.message && <p>{result.message}</p>}{result.checkedAt && <p>{new Date(result.checkedAt).toLocaleString('zh-CN')}</p>}{result.requestId && <p className="break-all">请求编号：{result.requestId}</p>}
                </div>}
              </> : <p className="text-xs text-[#66758b]">{model.capabilities.kind === 'unknown' ? '能力待识别，暂不可测试' : '暂未接入详情页用途'}</p>}
            </div>
          </div>})}
        </div>
        <nav aria-label="模型目录分页" className="flex flex-wrap items-center justify-between gap-3 text-sm"><span className="text-xs text-[#66758b]">{visibleRows.length} 个模型 · 第 {currentPage} / {pageCount} 页</span><div className="flex gap-2"><button type="button" className={buttonClass} disabled={currentPage <= 1} onClick={() => setPage(currentPage - 1)}>上一页</button><button type="button" className={buttonClass} disabled={currentPage >= pageCount} onClick={() => setPage(currentPage + 1)}>下一页</button></div></nav>
      </>}
    </section>
    {confirmActionDialog}
  </section>
}