'use client'

import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react'
import {
  useConfirmActionDialog,
  type ConfirmActionOptions,
  type ConfirmActionResult,
} from '@/components/ConfirmActionDialog'
import {
  PerformanceSurveyAdminPeople,
  type PerformanceSurveyAdminRequest,
} from './PerformanceSurveyAdminPeople'

type RequestFn = PerformanceSurveyAdminRequest
type ConfirmActionFn = (options: ConfirmActionOptions) => Promise<ConfirmActionResult>

export type PerformanceSurveyAdminMode = 'overview' | 'positions' | 'people' | 'templates'

type ReviewerSource = 'self' | 'direct_manager' | 'fixed_employee' | 'manual_selection'

type ReviewerDraft = {
  source: ReviewerSource
  label: string
  employeeId?: string
  employeeName?: string
}

type StageDraft = {
  key: string
  label: string
  order: number
  reviewers: ReviewerDraft[]
}

type TemplateDefinition = {
  code: string
  name: string
  shortName?: string
  description: string
  surveyType: 'person_period' | 'visual_case' | 'item_course'
  weight: number
  maxTotal?: number
  questionMaxScore?: number
  requiredWorkItemCount?: number
  workItemImageRequired?: boolean
  questions: Array<{ id: string; title: string; description?: string; maxScore?: number }>
  scoreBands: unknown[]
  workflow: {
    stages: StageDraft[]
    scoring: {
      mode: 'final_reviewer' | 'average_reviewers'
      stageKey?: string
      reviewerSource?: ReviewerSource
      stageKeys?: string[]
    }
  }
}

type TemplateVersion = {
  id: string
  version: number
  status: 'draft' | 'published' | 'archived'
  effectiveMonth?: string | null
  publishedAt?: string | null
  definition: TemplateDefinition
}

type TemplateRecord = {
  id: string
  code: string
  name: string
  description: string
  surveyType: string
  isActive: boolean
  versions: TemplateVersion[]
}

type TemplateEditorStep = 'basics' | 'questions' | 'workflow'

type TemplateReadinessStatus = 'done' | 'pending' | 'error'

type TemplateReadinessItem = {
  step: TemplateEditorStep
  label: string
  status: TemplateReadinessStatus
  summary: string
}

type StatusTone = 'success' | 'warning' | 'danger' | 'neutral'

type PositionGroupRecord = {
  id: string
  code: string
  name: string
  sortOrder: number
  isActive: boolean
  status: 'ready' | 'pending' | 'disabled'
  memberCount: number
  rules: Array<{
    id: string
    departmentPathPrefix: string
    positionTitle: string
    isActive: boolean
    sortOrder: number
  }>
  effectivePlan: null | {
    id: string
    version: number
    effectiveMonth: string
    templateVersionIds: string[]
  }
  draftPlan: null | {
    id: string
    version: number
    templateVersionIds: string[]
  }
}

type AdminConfig = {
  month: string
  groups: PositionGroupRecord[]
  templates: TemplateRecord[]
  issues: {
    unmatched: Array<{ id: string; displayName: string; departmentName?: string; departmentPath?: string; positionTitle?: string }>
    conflicts: Array<{ id: string; displayName: string; groupNames: string[]; departmentName?: string; departmentPath?: string; positionTitle?: string }>
  }
}

type ConfigAudit = {
  id: string
  action?: string
  resourceType?: string
  targetType?: string
  resourceName?: string
  actorName?: string
  createdAt?: string
  summary?: string
}

const adminConfigApi = {
  configuration(request: RequestFn, month: string) {
    return request<AdminConfig>(`/admin/config?month=${encodeURIComponent(month)}`)
  },
  auditLogs(request: RequestFn, month: string) {
    return request<ConfigAudit[] | { items?: ConfigAudit[] }>(
      `/admin/config-audit-logs?month=${encodeURIComponent(month)}&pageSize=20`,
    )
  },
  createPositionGroup(request: RequestFn, input: { name: string; effectiveMonth: string }) {
    return request<{ id?: string; group?: { id?: string } }>('/admin/position-groups', {
      method: 'POST',
      body: JSON.stringify(input),
    })
  },
  previewPositionGroup(request: RequestFn, groupId: string, month: string) {
    return request<any>(`/admin/position-groups/${groupId}/preview?month=${encodeURIComponent(month)}`)
  },
  removePositionGroup(request: RequestFn, groupId: string, reason: string) {
    return request<{ id: string; action: 'deleted' | 'archived' }>(`/admin/position-groups/${groupId}`, {
      method: 'DELETE',
      body: JSON.stringify({ mode: 'auto', reason }),
    })
  },
  removeTemplate(request: RequestFn, templateId: string, reason: string) {
    return request<{ id: string; action: 'deleted' | 'archived' }>(`/admin/templates/${templateId}`, {
      method: 'DELETE',
      body: JSON.stringify({ mode: 'auto', reason }),
    })
  },
}

function currentMonth() {
  const now = new Date()
  return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
}

function clone<T>(value: T): T {
  return JSON.parse(JSON.stringify(value)) as T
}

function newTemplateDefinition(): TemplateDefinition {
  return {
    code: `template_${Date.now().toString(36)}`,
    name: '',
    shortName: '',
    description: '',
    surveyType: 'person_period',
    weight: 1,
    maxTotal: 100,
    questions: [{ id: `score_${Date.now().toString(36)}`, title: '评分项 1', description: '', maxScore: 100 }],
    scoreBands: [],
    workflow: {
      stages: [{
        key: 'review',
        label: '评价',
        order: 0,
        reviewers: [{ source: 'direct_manager', label: '直属主管' }],
      }],
      scoring: { mode: 'average_reviewers', stageKeys: ['review'] },
    },
  }
}

function reviewerSourceLabel(source: ReviewerSource) {
  return {
    self: '本人自评',
    direct_manager: '直属主管',
    fixed_employee: '元泽',
    manual_selection: '发起时选择任何人',
  }[source]
}

function surveyTypeLabel(type: TemplateDefinition['surveyType']) {
  return {
    person_period: '员工工作表现',
    visual_case: '作品或案例',
    item_course: '课程或事项',
  }[type]
}

function StatusDot({
  label,
  tone,
}: {
  label: string
  tone: StatusTone
}) {
  const toneClass = {
    success: 'bg-[#16794b]',
    warning: 'bg-[#b26a00]',
    danger: 'bg-[#b42318]',
    neutral: 'bg-[#8a8a8a]',
  }[tone]

  return (
    <span
      role="img"
      aria-label={label}
      title={label}
      data-status-dot={tone}
      className={`inline-block h-2 w-2 shrink-0 rounded-full ${toneClass}`}
    />
  )
}

function getPositionGroupState(group: PositionGroupRecord): {
  label: string
  tone: StatusTone
} {
  if (group.status === 'disabled') return { label: '已删除', tone: 'neutral' }
  if (group.draftPlan) {
    return {
      label: group.effectivePlan ? '有待发布修改' : '待发布',
      tone: 'warning',
    }
  }
  if (group.effectivePlan) return { label: '已生效', tone: 'success' }
  return { label: '待配置', tone: 'warning' }
}

function getTemplateAvailability(template: TemplateRecord, month: string) {
  const publishedVersions = template.versions.filter((version) => version.status === 'published')
  const availableVersion = publishedVersions
    .filter((version) => Boolean(version.effectiveMonth) && String(version.effectiveMonth) <= month)
    .sort((left, right) => (
      String(right.effectiveMonth).localeCompare(String(left.effectiveMonth))
      || right.version - left.version
    ))[0] || null
  const futureVersion = publishedVersions
    .filter((version) => Boolean(version.effectiveMonth) && String(version.effectiveMonth) > month)
    .sort((left, right) => (
      String(left.effectiveMonth).localeCompare(String(right.effectiveMonth))
      || right.version - left.version
    ))[0] || null
  const draftVersion = template.versions.find((version) => version.status === 'draft') || null
  const hasPublishedVersionWithoutMonth = publishedVersions.some((version) => !version.effectiveMonth)
  return {
    isAvailable: template.isActive && Boolean(availableVersion),
    availableVersion,
    futureVersion,
    draftVersion,
    hasPublishedVersionWithoutMonth,
  }
}

function getTemplateListState(template: TemplateRecord, month: string): {
  label: string
  tone: StatusTone
  meta: string
} {
  const availability = getTemplateAvailability(template, month)
  if (!template.isActive) {
    return { label: '已停用', tone: 'neutral', meta: '' }
  }
  if (availability.draftVersion) {
    return {
      label: availability.availableVersion ? '有待发布修改' : '待发布',
      tone: 'warning',
      meta: `v${availability.draftVersion.version} · 草稿`,
    }
  }
  if (availability.availableVersion) {
    return {
      label: '可用',
      tone: 'success',
      meta: `v${availability.availableVersion.version} · ${availability.availableVersion.effectiveMonth}`,
    }
  }
  if (availability.futureVersion) {
    return {
      label: '待生效',
      tone: 'warning',
      meta: `v${availability.futureVersion.version} · ${availability.futureVersion.effectiveMonth}`,
    }
  }
  if (availability.hasPublishedVersionWithoutMonth) {
    const version = template.versions.find((item) => item.status === 'published')
    return {
      label: '待配置',
      tone: 'warning',
      meta: version ? `v${version.version}` : '',
    }
  }
  return { label: '不可用', tone: 'neutral', meta: '' }
}

function getTemplateReadiness(definition: TemplateDefinition): TemplateReadinessItem[] {
  const workItemCount = definition.surveyType === 'visual_case'
    ? Math.max(1, Number(definition.requiredWorkItemCount || 1))
    : 1
  const questionTotal = definition.questions.reduce(
    (sum, question) => sum + Number(question.maxScore || definition.questionMaxScore || 20),
    0,
  )
  const allocatedTotal = questionTotal * workItemCount
  const configuredTotal = Number(definition.maxTotal || 0)
  const hasQuestionError = definition.questions.some((question) => (
    !question.title.trim() || Number(question.maxScore || definition.questionMaxScore || 0) <= 0
  ))
  const scoreMatches = Math.round(allocatedTotal * 100) === Math.round(configuredTotal * 100)
  const stages = definition.workflow.stages
  const hasWorkflowError = stages.some((stage) => (
    !stage.label.trim()
    || stage.reviewers.length === 0
  ))
  const unresolvedFixedReviewer = stages.some((stage) => (
    stage.reviewers.some((reviewer) => reviewer.source === 'fixed_employee' && !reviewer.employeeId)
  ))
  const finalScoringInvalid = definition.workflow.scoring.mode === 'final_reviewer' && (
    !stages.some((stage) => stage.key === definition.workflow.scoring.stageKey)
    || !stages
      .find((stage) => stage.key === definition.workflow.scoring.stageKey)
      ?.reviewers.some((reviewer) => reviewer.source === definition.workflow.scoring.reviewerSource)
  )

  const basicsReady = Boolean(definition.name.trim())
    && (definition.surveyType !== 'visual_case' || workItemCount > 0)
  const questionsReady = definition.questions.length > 0
    && !hasQuestionError
    && configuredTotal > 0
    && scoreMatches
  const workflowReady = stages.length > 0
    && !hasWorkflowError
    && !unresolvedFixedReviewer
    && !finalScoringInvalid

  return [
    {
      step: 'basics',
      label: '基本信息',
      status: basicsReady ? 'done' : 'pending',
      summary: basicsReady
        ? `${surveyTypeLabel(definition.surveyType)} · 名称已填写`
        : '请填写模板名称',
    },
    {
      step: 'questions',
      label: '评分项',
      status: questionsReady
        ? 'done'
        : definition.questions.length === 0 ? 'pending' : 'error',
      summary: questionsReady
        ? `${definition.questions.length} 项 · 合计 ${allocatedTotal} 分`
        : definition.questions.length === 0
          ? '请至少添加 1 个评分项'
          : hasQuestionError
            ? '评分项名称和满分需要完整填写'
            : `评分项合计 ${allocatedTotal} 分，与模板总分 ${configuredTotal || 0} 分不一致`,
    },
    {
      step: 'workflow',
      label: '评分人设置',
      status: workflowReady
        ? 'done'
        : stages.length === 0 || unresolvedFixedReviewer ? 'pending' : 'error',
      summary: workflowReady
        ? `${stages.length} 个阶段 · 最终成绩规则已确认`
        : stages.length === 0
          ? '请至少添加 1 个评分阶段'
          : unresolvedFixedReviewer
            ? '请确认元泽对应的人员档案'
            : finalScoringInvalid
              ? '最终成绩规则指向了无效的阶段或评分人'
              : '阶段名称和评分人需要完整填写',
    },
  ]
}

export function PerformanceSurveyAdminConfig({
  mode,
  request,
  onDirtyChange,
  month: controlledMonth,
  onMonthChange,
  onNavigate,
}: {
  mode: PerformanceSurveyAdminMode
  request: RequestFn
  onDirtyChange?: (dirty: boolean) => void
  month?: string
  onMonthChange?: (month: string) => void
  onNavigate?: (mode: PerformanceSurveyAdminMode | 'launch') => void
}) {
  const [internalMonth, setInternalMonth] = useState(controlledMonth || currentMonth())
  const month = controlledMonth || internalMonth
  const [data, setData] = useState<AdminConfig | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [notice, setNotice] = useState<string | null>(null)
  const [dirty, setDirty] = useState(false)
  const requestSequenceRef = useRef(0)
  const { confirmAction, confirmActionDialog } = useConfirmActionDialog()

  const setDirtyState = useCallback((next: boolean) => {
    setDirty(next)
    onDirtyChange?.(next)
  }, [onDirtyChange])

  const load = useCallback(async (targetMonth: string) => {
    const sequence = requestSequenceRef.current + 1
    requestSequenceRef.current = sequence
    setLoading(true)
    setError(null)
    try {
      const next = await adminConfigApi.configuration(request, targetMonth)
      if (requestSequenceRef.current !== sequence) return null
      setData(next)
      return next
    } catch (loadError) {
      if (requestSequenceRef.current !== sequence) return null
      setError(loadError instanceof Error ? loadError.message : '配置加载失败')
      return null
    } finally {
      if (requestSequenceRef.current === sequence) setLoading(false)
    }
  }, [request])

  useEffect(() => {
    void load(month)
    return () => {
      requestSequenceRef.current += 1
    }
  }, [load, month])

  useEffect(() => {
    if (!dirty) return
    const handleBeforeUnload = (event: BeforeUnloadEvent) => {
      event.preventDefault()
      event.returnValue = ''
    }
    window.addEventListener('beforeunload', handleBeforeUnload)
    return () => window.removeEventListener('beforeunload', handleBeforeUnload)
  }, [dirty])

  useEffect(() => {
    if (!notice) return
    const timer = window.setTimeout(() => setNotice(null), 4500)
    return () => window.clearTimeout(timer)
  }, [notice])

  const confirmDiscard = useCallback(async (message = '当前有未保存修改，确定放弃吗？') => {
    if (!dirty) return true
    const result = await confirmAction({
      title: '放弃未保存的修改？',
      description: message,
      confirmLabel: '放弃修改',
      tone: 'danger',
    })
    return result.confirmed
  }, [confirmAction, dirty])

  const changeMonth = async (nextMonth: string) => {
    if (!nextMonth || nextMonth === month) return
    if (!await confirmDiscard('切换月份会放弃当前未保存修改，确定继续吗？')) return
    setDirtyState(false)
    setNotice(null)
    if (onMonthChange) onMonthChange(nextMonth)
    else setInternalMonth(nextMonth)
  }

  const changed = useCallback(async (message: string) => {
    setDirtyState(false)
    setNotice(message)
    setError(null)
    return load(month)
  }, [load, month, setDirtyState])

  return (
    <section className="performance-admin-config min-w-0 border border-[#c2c6d8] bg-white" aria-label="考核调研管理控制台">
      <div className="flex flex-wrap items-center justify-between gap-3 border-b border-[#e2e2e2] px-4 py-3">
        <div className="flex items-center gap-2">
          <h2 className="text-[16px] font-bold text-[#1a1c1c]">
            {{
              overview: '维护概览',
              positions: '岗位管理',
              people: '人员分配',
              templates: '模板管理',
            }[mode]}
          </h2>
          {dirty && <StatusDot label="未保存" tone="warning" />}
        </div>
        <label className="flex items-center gap-2 text-[12px] font-semibold text-[#5f5e5e]">
          查看月份
          <input
            type="month"
            value={month}
            onChange={(event) => void changeMonth(event.target.value)}
            className="h-11 rounded border border-[#c2c6d8] px-3 text-[13px] font-semibold text-[#1a1c1c] outline-none focus:border-[#0050cb] focus:ring-2 focus:ring-[#dbe6ff]"
          />
        </label>
      </div>
      {notice && (
        <div role="status" aria-live="polite" className="border-b border-[#b3c5ff] bg-[#f8faff] px-4 py-3 text-[13px] font-semibold text-[#0050cb]">
          {notice}
        </div>
      )}
      {error && (
        <div role="alert" className="flex flex-wrap items-center justify-between gap-3 border-b border-[#ffdad6] bg-[#fff6f4] px-4 py-3 text-[13px] font-semibold text-[#93000a]">
          <span>{error}</span>
          {!data && <button type="button" onClick={() => void load(month)} className="min-h-9 px-2 underline">重新加载</button>}
        </div>
      )}
      {loading && !data && <div role="status" aria-live="polite" className="px-5 py-12 text-center text-[13px] font-semibold text-[#5f5e5e]">配置加载中...</div>}
      {data && (
        <div className={`p-4 sm:p-5 ${loading ? 'pointer-events-none opacity-60' : ''}`} aria-busy={loading}>
          {mode === 'overview' && (
            <AdminOverviewWorkspace
              data={data}
              month={month}
              request={request}
              onNavigate={onNavigate}
            />
          )}
          {mode === 'positions' && (
        <PositionConfigWorkspace
          data={data}
          month={month}
          request={request}
          onError={setError}
              onChanged={changed}
              onDirtyChange={setDirtyState}
              confirmDiscard={confirmDiscard}
              confirmAction={confirmAction}
              dirty={dirty}
        />
          )}
          {mode === 'people' && (
            <PerformanceSurveyAdminPeople
              month={month}
              groups={data.groups}
              request={request}
              onError={setError}
              onSuccess={(message) => {
                setNotice(message)
                setError(null)
              }}
            />
          )}
          {mode === 'templates' && (
        <TemplateConfigWorkspace
          data={data}
          month={month}
          request={request}
          onError={setError}
              onChanged={changed}
              onDirtyChange={setDirtyState}
              confirmDiscard={confirmDiscard}
              confirmAction={confirmAction}
              dirty={dirty}
        />
          )}
        </div>
      )}
      {confirmActionDialog}
    </section>
  )
}

function AdminOverviewWorkspace({
  data,
  month,
  request,
  onNavigate,
}: {
  data: AdminConfig
  month: string
  request: RequestFn
  onNavigate?: (mode: PerformanceSurveyAdminMode | 'launch') => void
}) {
  const [audits, setAudits] = useState<ConfigAudit[]>([])
  const [auditError, setAuditError] = useState<string | null>(null)
  const [auditLoading, setAuditLoading] = useState(true)
  const activeGroups = data.groups.filter((group) => group.status !== 'disabled')
  const disabledGroups = data.groups.filter((group) => group.status === 'disabled').length
  const draftTemplates = data.templates.flatMap((template) => template.versions).filter((version) => version.status === 'draft').length
  const publishedTemplates = data.templates.flatMap((template) => template.versions).filter((version) => version.status === 'published').length
  const availablePublishedTemplates = data.templates.filter((template) => (
    getTemplateAvailability(template, month).isAvailable
  )).length
  const effectivePlanCount = activeGroups.filter((group) => group.effectivePlan).length
  const inheritedPlanCount = activeGroups.filter((group) => (
    group.effectivePlan && group.effectivePlan.effectiveMonth < month
  )).length
  const draftPlanCount = activeGroups.filter((group) => group.draftPlan).length
  const hasPeopleIssues = data.issues.unmatched.length > 0 || data.issues.conflicts.length > 0
  const positionsReady = activeGroups.length > 0 && effectivePlanCount === activeGroups.length
  const templatesReady = availablePublishedTemplates > 0
  const launchReady = positionsReady && templatesReady && data.issues.conflicts.length === 0
  const steps = [
    {
      id: 'people',
      label: '确认人员资料',
      status: data.issues.conflicts.length > 0 ? 'blocked' : hasPeopleIssues ? 'attention' : 'done',
      summary: data.issues.conflicts.length > 0
        ? `${data.issues.conflicts.length} 人同时匹配多个岗位，必须先处理`
        : data.issues.unmatched.length > 0
          ? `${data.issues.unmatched.length} 人待确认：分配岗位，或明确标记为不参与`
          : '人员岗位归属没有待处理异常',
      action: '处理人员',
      target: 'people' as const,
    },
    {
      id: 'positions',
      label: '配置并发布岗位',
      status: positionsReady ? (draftPlanCount > 0 ? 'attention' : 'done') : 'blocked',
      summary: activeGroups.length === 0
        ? '还没有岗位，请先创建岗位并选择考核项'
        : `${effectivePlanCount}/${activeGroups.length} 个岗位设置已生效${inheritedPlanCount > 0 ? `，其中 ${inheritedPlanCount} 个沿用较早设置` : ''}${draftPlanCount > 0 ? `；${draftPlanCount} 个岗位有待发布修改` : ''}${disabledGroups > 0 ? `，另有 ${disabledGroups} 个已删除` : ''}`,
      action: '配置岗位',
      target: 'positions' as const,
    },
    {
      id: 'templates',
      label: '准备考核模板',
      status: templatesReady ? (draftTemplates > 0 ? 'attention' : 'done') : 'blocked',
      summary: templatesReady
        ? `${availablePublishedTemplates} 个模板可用于 ${month}${draftTemplates > 0 ? `，${draftTemplates} 个草稿待确认` : ''}`
        : `还没有可用于 ${month} 的已发布模板${publishedTemplates > 0 ? `（另有 ${publishedTemplates} 个其它月份版本）` : ''}`,
      action: '管理模板',
      target: 'templates' as const,
    },
    {
      id: 'launch',
      label: '发起调研',
      status: launchReady ? 'ready' : 'blocked',
      summary: launchReady ? `${month} 的岗位、模板和方案已可用于发起调研` : '完成上面的必要配置后再发起，避免人员或模板选错',
      action: '去发起调研',
      target: 'launch' as const,
    },
  ]

  const loadAudits = useCallback(async () => {
    setAuditLoading(true)
    setAuditError(null)
    try {
      const payload = await adminConfigApi.auditLogs(request, month)
      setAudits(Array.isArray(payload) ? payload : Array.isArray(payload?.items) ? payload.items : [])
    } catch (error) {
      setAudits([])
      setAuditError(error instanceof Error ? error.message : '配置记录加载失败')
    } finally {
      setAuditLoading(false)
    }
  }, [month, request])

  useEffect(() => {
    void loadAudits()
  }, [loadAudits])

  return (
    <section aria-labelledby="performance-survey-admin-overview-title">
      <div className="border-b border-[#e2e2e2] pb-4">
        <h2 id="performance-survey-admin-overview-title" className="text-[18px] font-bold text-[#1a1c1c]">
          {month} 配置概览
        </h2>
        <p className="mt-1 max-w-3xl text-[13px] leading-5 text-[#5f5e5e]">
          先处理人员归属，再准备模板并配置岗位考核项。岗位设置发布后会持续沿用，无需每月重复配置。
        </p>
      </div>

      <div className="mt-4 border border-[#c2c6d8]">
        <div className="border-b border-[#e2e2e2] bg-[#f7f7f7] px-4 py-3">
          <h3 className="text-[14px] font-bold text-[#1a1c1c]">本月上线准备</h3>
          <p className="mt-1 text-[12px] leading-5 text-[#5f5e5e]">按顺序完成；每一步都可以直接进入对应管理页面。</p>
        </div>
        <ol className="divide-y divide-[#e2e2e2]">
          {steps.map((step, index) => {
            const statusLabel = {
              done: '已完成',
              attention: '待确认',
              blocked: '未完成',
              ready: '可发起',
            }[step.status]
            const statusClass = {
              done: 'bg-[#eaf7ef] text-[#16794b]',
              attention: 'bg-[#fff4da] text-[#7a4b00]',
              blocked: 'bg-[#f3f3f3] text-[#5f5e5e]',
              ready: 'bg-[#e9efff] text-[#0050cb]',
            }[step.status]
            return (
              <li key={step.id} className="grid gap-3 px-4 py-4 sm:grid-cols-[40px_minmax(0,1fr)_auto] sm:items-center">
                <div className="flex h-8 w-8 items-center justify-center rounded-full border border-[#c2c6d8] text-[13px] font-bold text-[#1a1c1c]" aria-hidden="true">
                  {index + 1}
                </div>
                <div className="min-w-0">
                  <div className="flex flex-wrap items-center gap-2">
                    <h4 className="text-[14px] font-bold text-[#1a1c1c]">{step.label}</h4>
                    <span className={`rounded-full px-2 py-1 text-[11px] font-bold ${statusClass}`}>{statusLabel}</span>
                  </div>
                  <p className="mt-1 text-[12px] leading-5 text-[#5f5e5e]">{step.summary}</p>
                </div>
                <button
                  type="button"
                  onClick={() => onNavigate?.(step.target)}
                  className="min-h-11 w-full rounded border border-[#1a1c1c] px-4 text-[12px] font-bold text-[#1a1c1c] hover:bg-[#1a1c1c] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0050cb] focus-visible:ring-offset-2 sm:w-auto"
                >
                  {step.action}
                </button>
              </li>
            )
          })}
        </ol>
      </div>

      {(data.issues.unmatched.length > 0 || data.issues.conflicts.length > 0) && (
        <div className="mt-4 border border-[#e4b86a] bg-[#fffaf0] px-4 py-3 text-[13px] leading-5 text-[#6f4700]">
          “未匹配”不等于必须参与考核。请逐一确认：需要参与的人分配岗位，不参与的人明确标记为“不参与”；重复匹配人员必须先消除冲突。
        </div>
      )}

      <section className="mt-6" aria-labelledby="performance-survey-admin-audit-title">
        <div className="flex flex-wrap items-center justify-between gap-3 border-b border-[#e2e2e2] pb-2">
          <h3 id="performance-survey-admin-audit-title" className="text-[14px] font-bold text-[#1a1c1c]">最近配置记录</h3>
          <button type="button" onClick={() => void loadAudits()} className="min-h-9 px-2 text-[12px] font-bold text-[#0050cb] hover:underline">
            刷新
          </button>
        </div>
        {auditLoading && <div role="status" aria-live="polite" className="py-6 text-[13px] font-semibold text-[#5f5e5e]">记录加载中...</div>}
        {auditError && (
          <div role="note" className="py-4 text-[13px] text-[#8a5700]">
            配置记录暂不可用：{auditError}
          </div>
        )}
        {!auditLoading && !auditError && (
          <div className="overflow-x-auto">
            <table className="w-full min-w-[620px] border-collapse text-left">
              <thead>
                <tr className="border-b border-[#e2e2e2] text-[12px] font-bold text-[#5f5e5e]">
                  <th scope="col" className="px-2 py-3">时间</th>
                  <th scope="col" className="px-2 py-3">操作人</th>
                  <th scope="col" className="px-2 py-3">对象</th>
                  <th scope="col" className="px-2 py-3">变更</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-[#eeeeee]">
                {audits.map((audit) => (
                  <tr key={audit.id} className="text-[13px] text-[#5f5e5e]">
                    <td className="px-2 py-3">{audit.createdAt ? new Date(audit.createdAt).toLocaleString('zh-CN') : '-'}</td>
                    <td className="px-2 py-3">{audit.actorName || '-'}</td>
                    <td className="px-2 py-3">{audit.resourceName || audit.resourceType || audit.targetType || '-'}</td>
                    <td className="px-2 py-3">{audit.summary || audit.action || '-'}</td>
                  </tr>
                ))}
                {audits.length === 0 && (
                  <tr>
                    <td colSpan={4} className="px-2 py-8 text-center text-[13px] text-[#5f5e5e]">暂无配置记录</td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        )}
      </section>
    </section>
  )
}

function PositionConfigWorkspace({
  data,
  month,
  request,
  onError,
  onChanged,
  onDirtyChange,
  confirmDiscard,
  confirmAction,
  dirty,
}: {
  data: AdminConfig
  month: string
  request: RequestFn
  onError: (message: string | null) => void
  onChanged: (message: string) => Promise<AdminConfig | null>
  onDirtyChange: (dirty: boolean) => void
  confirmDiscard: (message?: string) => Promise<boolean>
  confirmAction: ConfirmActionFn
  dirty: boolean
}) {
  const [selectedId, setSelectedId] = useState(data.groups[0]?.id || '')
  const selected = data.groups.find((group) => group.id === selectedId) || data.groups[0]
  const [name, setName] = useState(selected?.name || '')
  const [sortOrder, setSortOrder] = useState(selected?.sortOrder || 0)
  const [templateVersionIds, setTemplateVersionIds] = useState<string[]>(
    selected?.draftPlan?.templateVersionIds || selected?.effectivePlan?.templateVersionIds || [],
  )
  const [templateSearch, setTemplateSearch] = useState('')
  const [saving, setSaving] = useState(false)
  const [creating, setCreating] = useState(false)
  const [newName, setNewName] = useState('')
  const editorRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (!selected) return
    setName(selected.name)
    setSortOrder(selected.sortOrder)
    setTemplateVersionIds(selected.draftPlan?.templateVersionIds || selected.effectivePlan?.templateVersionIds || [])
    setTemplateSearch('')
    onDirtyChange(false)
  }, [onDirtyChange, selected])

  const markDirty = () => onDirtyChange(true)

  const availableTemplateVersions = useMemo(() => data.templates.flatMap((template) => {
    const availability = getTemplateAvailability(template, month)
    return availability.availableVersion
      ? [{ template, version: availability.availableVersion }]
      : []
  }), [data.templates, month])
  const versionById = useMemo(
    () => new Map(data.templates.flatMap((template) => (
      template.versions.map((version) => [version.id, { template, version }] as const)
    ))),
    [data.templates],
  )
  const searchResults = useMemo(() => {
    const keyword = templateSearch.trim().toLocaleLowerCase('zh-CN')
    if (!keyword) return []
    const selectedTemplateIds = new Set(
      templateVersionIds
        .map((id) => versionById.get(id)?.template.id)
        .filter(Boolean),
    )
    return availableTemplateVersions.filter(({ template, version }) => (
      !templateVersionIds.includes(version.id)
      && !selectedTemplateIds.has(template.id)
      && `${version.definition.name} ${template.name}`.toLocaleLowerCase('zh-CN').includes(keyword)
    )).slice(0, 8)
  }, [availableTemplateVersions, templateSearch, templateVersionIds, versionById])

  if (!selected) return <div className="px-5 py-12 text-center text-sm text-[#727687]">暂无岗位组</div>

  const save = async () => {
    setSaving(true)
    onError(null)
    try {
      await request(`/admin/position-groups/${selected.id}`, {
        method: 'PATCH',
        body: JSON.stringify({ name, sortOrder, templateVersionIds, effectiveMonth: month }),
      })
      await onChanged('岗位设置草稿已保存，可直接在当前页面发布')
    } catch (actionError) {
      onError(actionError instanceof Error ? actionError.message : '岗位方案保存失败')
    } finally {
      setSaving(false)
    }
  }

  const publishPlan = async () => {
    if (dirty) {
      onError('请先保存当前修改，再发布岗位设置')
      return
    }
    if (!selected.draftPlan) {
      onError('当前没有待发布修改')
      return
    }
    if (templateVersionIds.length === 0) {
      onError('岗位至少需要选择 1 个可用考核模板')
      return
    }
    setSaving(true)
    onError(null)
    try {
      const preview = await adminConfigApi.previewPositionGroup(request, selected.id, month)
      const conflictCount = Number(preview?.conflictCount ?? preview?.conflicts?.length ?? data.issues.conflicts.length)
      const blockingIssues = Array.isArray(preview?.blockingIssues)
        ? preview.blockingIssues.map((item: unknown) => String(item || '').trim()).filter(Boolean)
        : []
      if (conflictCount > 0 || blockingIssues.length > 0) {
        const details = [
          conflictCount > 0 ? `${conflictCount} 人同时匹配多个岗位` : '',
          ...blockingIssues,
        ].filter(Boolean)
        onError(`发布前检查未通过：${details.join('；')}`)
        return
      }

      const draftPlanId = String(preview?.draftPlanId || '').trim()
      const draftVersion = Number(preview?.draftVersion)
      const draftUpdatedAt = String(preview?.draftUpdatedAt || '').trim()
      if (!draftPlanId || !Number.isInteger(draftVersion) || !draftUpdatedAt) {
        onError('发布前检查信息不完整，请刷新页面后重试')
        return
      }

      const memberCount = Number(preview?.memberCount ?? preview?.affectedEmployees ?? selected.memberCount)
      await confirmAction({
        title: `发布“${selected.name}”的岗位设置？`,
        description: (
          <div className="grid gap-1">
            <p>包含 {templateVersionIds.length} 个考核项，预计影响 {memberCount} 人。</p>
            <p>发布后从 {month} 起持续生效，后续月份无需重复设置。</p>
          </div>
        ),
        confirmLabel: '确认发布',
        loadingLabel: '发布中...',
        action: async () => {
          await request(`/admin/position-groups/${selected.id}/publish`, {
            method: 'POST',
            body: JSON.stringify({
              effectiveMonth: month,
              draftPlanId,
              draftVersion,
              draftUpdatedAt,
            }),
          })
          await onChanged(`${selected.name} 的岗位设置已发布，从 ${month} 起持续生效`)
        },
      })
    } catch (actionError) {
      onError(actionError instanceof Error ? actionError.message : '岗位设置发布失败')
    } finally {
      setSaving(false)
    }
  }

  const createGroup = async () => {
    if (!newName.trim()) {
      onError('请填写岗位名称')
      return
    }
    setSaving(true)
    onError(null)
    try {
      const created = await adminConfigApi.createPositionGroup(request, {
        name: newName.trim(),
        effectiveMonth: month,
      })
      const next = await onChanged(`岗位“${newName.trim()}”已创建`)
      const nextSelectedId = created.id || created.group?.id || next?.groups.find((group) => group.name === newName.trim())?.id
      if (nextSelectedId) setSelectedId(nextSelectedId)
      setCreating(false)
      setNewName('')
    } catch (actionError) {
      onError(actionError instanceof Error ? actionError.message : '岗位创建失败')
    } finally {
      setSaving(false)
    }
  }

  const removeGroup = async () => {
    if (!selected) return
    const impactMessages = [
      selected.memberCount > 0 ? `${selected.memberCount} 人将变为待分配。` : '',
      dirty ? '未保存的修改会一并丢失。' : '',
    ].filter(Boolean)
    await confirmAction({
      title: `删除岗位“${selected.name}”？`,
      description: impactMessages.length > 0 ? impactMessages.join(' ') : undefined,
      confirmLabel: '删除岗位',
      loadingLabel: '删除中...',
      tone: 'danger',
      reason: {
        label: '删除原因',
        placeholder: '简要说明原因',
        required: true,
      },
      action: async (reason) => {
        setSaving(true)
        onError(null)
        try {
          const removeResult = await adminConfigApi.removePositionGroup(request, selected.id, reason)
          const next = await onChanged(
            removeResult.action === 'deleted'
              ? `岗位“${selected.name}”已删除`
              : `岗位“${selected.name}”已从管理列表删除，历史记录已保留`,
          )
          setSelectedId(next?.groups[0]?.id || '')
        } finally {
          setSaving(false)
        }
      },
    })
  }

  const addTemplateVersion = (versionId: string) => {
    setTemplateVersionIds((current) => current.includes(versionId) ? current : [...current, versionId])
    setTemplateSearch('')
    markDirty()
  }

  const removeTemplateVersion = (versionId: string) => {
    setTemplateVersionIds((current) => current.filter((id) => id !== versionId))
    markDirty()
  }

  const moveTemplateVersion = (index: number, direction: -1 | 1) => {
    const targetIndex = index + direction
    if (targetIndex < 0 || targetIndex >= templateVersionIds.length) return
    setTemplateVersionIds((current) => {
      const next = [...current]
      const [moved] = next.splice(index, 1)
      next.splice(targetIndex, 0, moved)
      return next
    })
    markDirty()
  }

  const selectGroup = async (groupId: string) => {
    if (groupId === selected?.id) return
    if (!await confirmDiscard('切换岗位会放弃当前未保存修改，确定继续吗？')) return
    onDirtyChange(false)
    setSelectedId(groupId)
    if (typeof window.matchMedia === 'function' && window.matchMedia('(max-width: 767px)').matches) {
      window.requestAnimationFrame(() => editorRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' }))
    }
  }

  const selectedGroupState = getPositionGroupState(selected)

  return (
    <div className="grid min-h-[620px] md:grid-cols-[240px_minmax(0,1fr)]">
      <aside className="border-b border-[#e2e2e2] md:border-b-0 md:border-r">
        <div className="border-b border-[#c2c6d8] p-3">
          <button
            type="button"
            onClick={() => setCreating((current) => !current)}
            className="min-h-11 w-full rounded bg-[#1a1c1c] px-3 text-[13px] font-bold text-white hover:bg-black"
          >
            {creating ? '取消新增' : '新增岗位'}
          </button>
          {creating && (
            <div className="mt-3 grid gap-2">
              <input
                aria-label="新岗位名称"
                value={newName}
                onChange={(event) => setNewName(event.target.value)}
                placeholder="岗位名称"
                autoFocus
                className="h-11 rounded border border-[#c2c6d8] px-3 text-[13px] outline-none focus:border-[#0050cb]"
              />
              <button type="button" disabled={saving} onClick={() => void createGroup()} className="min-h-11 rounded bg-[#0050cb] px-3 text-[13px] font-bold text-white disabled:opacity-50">
                确认创建
              </button>
            </div>
          )}
        </div>
        {data.groups.map((group) => {
          const groupState = getPositionGroupState(group)
          return (
            <button
              key={group.id}
              type="button"
              onClick={() => void selectGroup(group.id)}
              aria-label={`${group.name}，${group.memberCount} 人，${groupState.label}`}
              className={`grid w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-3 border-b border-[#eeeeee] px-4 py-3 text-left ${selected.id === group.id ? 'bg-[#f1f4ff]' : 'hover:bg-[#fafafa]'}`}
            >
              <span className="min-w-0">
                <span className="block truncate text-[13px] font-bold text-[#1a1c1c]">{group.name}</span>
                <span className="mt-0.5 block text-[11px] text-[#5f5e5e]">{group.memberCount} 人</span>
              </span>
              <StatusDot label={groupState.label} tone={groupState.tone} />
            </button>
          )
        })}
      </aside>

      <div ref={editorRef} className="min-w-0 scroll-mt-4 p-4 sm:p-5">
        <div className="mb-4 flex flex-wrap items-center justify-between gap-3 border-b border-[#e2e2e2] pb-3">
          <div className="flex items-center gap-2">
            <h3 className="text-[14px] font-bold text-[#1a1c1c]">{selected.name}</h3>
            <StatusDot label={selectedGroupState.label} tone={selectedGroupState.tone} />
          </div>
          <button type="button" disabled={saving} onClick={() => void removeGroup()} className="min-h-10 rounded border border-[#f0b8b8] px-3 text-[12px] font-bold text-[#b42318] hover:bg-[#fff5f5]">
            删除岗位
          </button>
        </div>
        <div className="grid min-w-0 gap-4 lg:grid-cols-[minmax(0,1fr)_140px]">
          <AdminField label="岗位名称" value={name} onChange={(value) => { setName(value); markDirty() }} />
          <AdminField label="排序" value={String(sortOrder)} onChange={(value) => { setSortOrder(Number(value) || 0); markDirty() }} type="number" />
        </div>

        <div className="mt-6 border-t border-[#eeeeee] pt-5">
          <h3 className="text-[14px] font-bold text-[#1a1c1c]">岗位考核项</h3>
          <div className="relative mt-3 max-w-xl">
            <label className="grid gap-1 text-[12px] font-semibold text-[#5f5e5e]">
              添加考核项
              <input
                value={templateSearch}
                onChange={(event) => setTemplateSearch(event.target.value)}
                placeholder="输入模板名称搜索"
                className="h-11 w-full rounded border border-[#c2c6d8] px-3 text-[13px] outline-none focus:border-[#0050cb]"
              />
            </label>
            {templateSearch.trim() && (
              <div className="absolute z-30 mt-1 max-h-64 w-full overflow-y-auto border border-[#c2c6d8] bg-white shadow-[0_4px_8px_rgba(0,0,0,0.12)]">
                {searchResults.map(({ template, version }) => (
                  <button
                    key={version.id}
                    type="button"
                    onClick={() => addTemplateVersion(version.id)}
                    className="flex min-h-11 w-full items-center justify-between gap-3 border-b border-[#eeeeee] px-3 py-2 text-left last:border-b-0 hover:bg-[#f4f6ff]"
                  >
                    <span className="min-w-0">
                      <span className="block truncate text-[13px] font-bold text-[#1a1c1c]">{version.definition.name}</span>
                    </span>
                    <span className="shrink-0 text-[11px] text-[#5f5e5e]">v{version.version}</span>
                  </button>
                ))}
                {searchResults.length === 0 && (
                  <div className="px-3 py-4 text-center text-[12px] text-[#727687]">没有可添加的匹配模板</div>
                )}
              </div>
            )}
          </div>
          <div className="mt-4 grid gap-2">
            {templateVersionIds.map((id, index) => {
              const item = versionById.get(id)
              return (
                <div key={id} className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3 border border-[#c2c6d8] px-3 py-3">
                  <div className="min-w-0">
                    <div className="truncate text-[13px] font-bold text-[#1a1c1c]">{item?.version.definition.name || item?.template.name || '历史模板'}</div>
                    <div className="mt-0.5 text-[11px] text-[#727687]">
                      第 {index + 1} 项{item ? ` · v${item.version.version}` : ''}
                    </div>
                  </div>
                  <div className="flex flex-wrap justify-end gap-1">
                    <button type="button" disabled={index === 0} onClick={() => moveTemplateVersion(index, -1)} className="min-h-10 rounded px-3 text-[12px] font-bold text-[#0050cb] disabled:text-[#aaaaaa]">上移</button>
                    <button type="button" disabled={index === templateVersionIds.length - 1} onClick={() => moveTemplateVersion(index, 1)} className="min-h-10 rounded px-3 text-[12px] font-bold text-[#0050cb] disabled:text-[#aaaaaa]">下移</button>
                    <button type="button" onClick={() => removeTemplateVersion(id)} className="min-h-10 rounded px-3 text-[12px] font-bold text-[#b42318] hover:bg-[#fff5f5]">移除</button>
                  </div>
                </div>
              )
            })}
            {templateVersionIds.length === 0 && (
              <div className="border border-dashed border-[#c2c6d8] px-4 py-7 text-center text-[12px] text-[#727687]">
                尚未选择考核项，请通过上方搜索框添加
              </div>
            )}
          </div>
        </div>

        <div className="sticky bottom-[68px] z-20 -mx-4 mt-6 flex flex-wrap items-center justify-between gap-2 border-t border-[#c2c6d8] bg-white/95 px-4 py-3 shadow-[0_-4px_10px_rgba(0,0,0,0.06)] backdrop-blur sm:bottom-0 sm:mx-0 sm:justify-end sm:shadow-none">
          <span className="flex items-center gap-2 text-[12px] font-semibold text-[#5f5e5e] sm:mr-auto">
            <StatusDot
              label={dirty ? '未保存' : selected.draftPlan ? '待发布' : selected.effectivePlan ? '已生效' : '待配置'}
              tone={dirty || selected.draftPlan || !selected.effectivePlan ? 'warning' : 'success'}
            />
            {dirty ? '未保存' : selected.draftPlan ? '待发布' : selected.effectivePlan ? '已生效' : '待配置'}
          </span>
          <button type="button" disabled={saving || selected.status === 'disabled' || !dirty} onClick={() => void save()} className="min-h-11 rounded border border-[#1a1c1c] px-5 text-[13px] font-bold text-[#1a1c1c] disabled:opacity-50">
            {saving ? '处理中...' : '保存草稿'}
          </button>
          <button
            type="button"
            disabled={saving || selected.status === 'disabled' || dirty || !selected.draftPlan || templateVersionIds.length === 0}
            onClick={() => void publishPlan()}
            title={dirty ? '请先保存当前修改' : selected.draftPlan ? undefined : '当前没有待发布修改'}
            className="min-h-11 rounded bg-[#0050cb] px-5 text-[13px] font-bold text-white disabled:opacity-50"
          >
            发布岗位设置
          </button>
        </div>
      </div>
    </div>
  )
}

function TemplateConfigWorkspace({
  data,
  month,
  request,
  onError,
  onChanged,
  onDirtyChange,
  confirmDiscard,
  confirmAction,
  dirty,
}: {
  data: AdminConfig
  month: string
  request: RequestFn
  onError: (message: string | null) => void
  onChanged: (message: string) => Promise<AdminConfig | null>
  onDirtyChange: (dirty: boolean) => void
  confirmDiscard: (message?: string) => Promise<boolean>
  confirmAction: ConfirmActionFn
  dirty: boolean
}) {
  const firstTemplate = data.templates[0]
  const [selectedTemplateId, setSelectedTemplateId] = useState(firstTemplate?.id || 'new')
  const selectedTemplate = data.templates.find((template) => template.id === selectedTemplateId) || null
  const selectedVersion = selectedTemplate?.versions.find((version) => version.status === 'draft')
    || selectedTemplate?.versions[0]
    || null
  const [versionId, setVersionId] = useState<string | null>(selectedVersion?.id || null)
  const [definition, setDefinition] = useState<TemplateDefinition>(() => clone(selectedVersion?.definition || newTemplateDefinition()))
  const [editorStep, setEditorStep] = useState<TemplateEditorStep>('basics')
  const [saving, setSaving] = useState(false)
  const [readinessOpen, setReadinessOpen] = useState(false)
  const [operationFeedback, setOperationFeedback] = useState<{
    state: 'idle' | 'saving' | 'saved' | 'publishing' | 'published' | 'error'
    message: string
  }>({ state: 'idle', message: '' })
  const editorRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const nextVersion = selectedTemplate?.versions.find((version) => version.status === 'draft')
      || selectedTemplate?.versions[0]
      || null
    const nextDefinition = clone(nextVersion?.definition || newTemplateDefinition())
    setVersionId(nextVersion?.id || null)
    setDefinition(nextDefinition)
    setEditorStep('basics')
    setReadinessOpen(false)
    onDirtyChange(false)
  }, [onDirtyChange, selectedTemplate])

  const version = selectedTemplate?.versions.find((item) => item.id === versionId) || null
  const editable = !version || version.status === 'draft'
  const readinessItems = getTemplateReadiness(definition)
  const readinessCompleted = readinessItems.filter((item) => item.status === 'done').length
  const templateDefinitionReady = readinessCompleted === readinessItems.length

  const updateDefinition = (next: TemplateDefinition | ((current: TemplateDefinition) => TemplateDefinition)) => {
    setDefinition(next)
    onDirtyChange(true)
    setOperationFeedback({ state: 'idle', message: '未保存' })
  }

  const save = async () => {
    setSaving(true)
    onError(null)
    setOperationFeedback({ state: 'saving', message: '正在保存模板草稿…' })
    try {
      const saved = versionId
        ? await request<{ id: string }>(`/admin/templates/${versionId}`, {
            method: 'PATCH',
            body: JSON.stringify({ definition }),
          })
        : await request<{ id: string }>('/admin/templates', {
            method: 'POST',
            body: JSON.stringify({ definition }),
          })
      const next = await onChanged('模板草稿已保存')
      const nextTemplate = next?.templates.find((template) => template.versions.some((item) => item.id === saved.id))
      if (nextTemplate) setSelectedTemplateId(nextTemplate.id)
      setVersionId(saved.id)
      onDirtyChange(false)
      const savedTime = new Intl.DateTimeFormat('zh-CN', {
        hour: '2-digit',
        minute: '2-digit',
        hour12: false,
      }).format(new Date())
      setOperationFeedback({ state: 'saved', message: `草稿已保存 · ${savedTime}` })
    } catch (actionError) {
      const message = actionError instanceof Error ? actionError.message : '模板草稿保存失败'
      onError(message)
      setOperationFeedback({ state: 'error', message: `保存失败：${message}` })
    } finally {
      setSaving(false)
    }
  }

  const cloneVersion = async () => {
    if (!versionId || !await confirmDiscard()) return
    setSaving(true)
    onError(null)
    setOperationFeedback({ state: 'saving', message: '正在创建可编辑草稿…' })
    try {
      const draft = await request<{ id: string }>(`/admin/templates/${versionId}/clone`, { method: 'POST', body: '{}' })
      const next = await onChanged('已创建新的模板草稿')
      const nextTemplate = next?.templates.find((template) => template.versions.some((item) => item.id === draft.id))
      if (nextTemplate) setSelectedTemplateId(nextTemplate.id)
      setVersionId(draft.id)
      setOperationFeedback({ state: 'saved', message: '新的可编辑草稿已创建' })
    } catch (actionError) {
      const message = actionError instanceof Error ? actionError.message : '模板草稿创建失败'
      onError(message)
      setOperationFeedback({ state: 'error', message: `创建草稿失败：${message}` })
    } finally {
      setSaving(false)
    }
  }

  const publish = async () => {
    if (!versionId) return
    if (dirty) {
      onError('请先保存模板草稿，再执行发布')
      setOperationFeedback({ state: 'error', message: '发布前请先保存当前修改' })
      return
    }
    if (!templateDefinitionReady) {
      const firstIssue = readinessItems.find((item) => item.status !== 'done')
      onError(firstIssue?.summary || '请先完成发布前检查')
      setOperationFeedback({ state: 'error', message: firstIssue?.summary || '发布前检查未完成' })
      return
    }
    await confirmAction({
      title: `发布模板“${definition.name}”？`,
      description: (
        <div className="grid gap-1">
          <p>模板将从 {month} 起成为可用模板，可直接添加到岗位考核项。</p>
          <p>
            {surveyTypeLabel(definition.surveyType)} · {definition.questions.length} 个评分项 ·
            {' '}{definition.workflow.stages.length} 个评分阶段 · 总分 {Number(definition.maxTotal || 0)}
          </p>
          <p>发布后的版本不可直接修改；后续调整需要创建新的草稿版本。</p>
        </div>
      ),
      confirmLabel: `发布至 ${month}`,
      loadingLabel: '发布中...',
      action: async () => {
        setSaving(true)
        onError(null)
        setOperationFeedback({ state: 'publishing', message: `正在发布至 ${month}…` })
        try {
          await request(`/admin/templates/${versionId}/publish`, {
            method: 'POST',
            body: JSON.stringify({ effectiveMonth: month }),
          })
          await onChanged(`${definition.name} 已从 ${month} 起发布`)
          setOperationFeedback({ state: 'published', message: `${definition.name} 已从 ${month} 起生效` })
        } catch (actionError) {
          const message = actionError instanceof Error ? actionError.message : '模板发布失败'
          onError(message)
          setOperationFeedback({ state: 'error', message: `发布失败：${message}` })
          throw actionError
        } finally {
          setSaving(false)
        }
      },
    })
  }

  const removeTemplate = async () => {
    if (!selectedTemplate) return
    const displayName = version?.definition.name || selectedTemplate.versions[0]?.definition.name || selectedTemplate.name
    await confirmAction({
      title: `删除模板“${displayName}”？`,
      description: dirty ? '未保存的修改会一并丢失。' : undefined,
      confirmLabel: '删除模板',
      loadingLabel: '删除中...',
      tone: 'danger',
      reason: {
        label: '删除原因',
        placeholder: '简要说明原因',
        required: true,
      },
      action: async (reason) => {
        setSaving(true)
        onError(null)
        try {
          const removeResult = await adminConfigApi.removeTemplate(request, selectedTemplate.id, reason)
          const next = await onChanged(
            removeResult.action === 'deleted'
              ? `模板“${displayName}”已删除`
              : `模板“${displayName}”已从模板列表删除，历史记录已保留`,
          )
          setSelectedTemplateId(next?.templates[0]?.id || 'new')
        } finally {
          setSaving(false)
        }
      },
    })
  }

  const selectTemplate = async (templateId: string) => {
    if (templateId === selectedTemplateId) return
    if (!await confirmDiscard('切换模板会放弃当前未保存修改，确定继续吗？')) return
    onDirtyChange(false)
    setOperationFeedback({ state: 'idle', message: '' })
    setSelectedTemplateId(templateId)
    if (typeof window.matchMedia === 'function' && window.matchMedia('(max-width: 767px)').matches) {
      window.requestAnimationFrame(() => editorRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' }))
    }
  }

  const selectVersion = async (nextVersion: TemplateVersion) => {
    if (nextVersion.id === versionId) return
    if (!await confirmDiscard('切换版本会放弃当前未保存修改，确定继续吗？')) return
    onDirtyChange(false)
    setOperationFeedback({ state: 'idle', message: '' })
    setVersionId(nextVersion.id)
    setDefinition(clone(nextVersion.definition))
    setEditorStep('basics')
  }

  const selectedTemplateName = selectedTemplate
    ? selectedTemplate.versions[0]?.definition.name || selectedTemplate.name
    : '新建模板'
  const selectedTemplateState = selectedTemplate
    ? getTemplateListState(selectedTemplate, month)
    : null
  const feedbackMessage = saving
    ? operationFeedback.message || '处理中'
    : dirty
      ? '未保存'
      : operationFeedback.message || (editable ? '已保存' : '只读')
  const feedbackTone: StatusTone = operationFeedback.state === 'error'
    ? 'danger'
    : dirty || saving
      ? 'warning'
      : operationFeedback.state === 'saved' || operationFeedback.state === 'published'
        ? 'success'
        : 'neutral'

  return (
    <div className="grid min-h-[680px] md:grid-cols-[260px_minmax(0,1fr)]">
      <aside className="border-b border-[#e2e2e2] md:border-b-0 md:border-r">
        <div className="p-3 md:hidden">
          <label className="grid gap-2 text-[13px] font-bold text-[#1a1c1c]">
            <span className="sr-only">选择模板</span>
            <select
              aria-label="选择模板"
              value={selectedTemplateId}
              onChange={(event) => void selectTemplate(event.target.value)}
              className="h-12 w-full rounded border border-[#c2c6d8] bg-white px-3 text-[14px] font-semibold text-[#1a1c1c]"
            >
              <option value="new">＋ 新建模板</option>
              {data.templates.map((template) => (
                <option key={template.id} value={template.id}>
                  {template.versions[0]?.definition.name || template.name}
                </option>
              ))}
            </select>
          </label>
          <div className="mt-2 flex items-center gap-2 text-[12px] font-semibold text-[#5f5e5e]">
            <span className="min-w-0 truncate">{selectedTemplateName}</span>
            {selectedTemplateState && (
              <StatusDot label={selectedTemplateState.label} tone={selectedTemplateState.tone} />
            )}
          </div>
        </div>
        <div className="hidden md:block">
          <div className="border-b border-[#c2c6d8] p-3">
            <button
              type="button"
              onClick={() => void selectTemplate('new')}
              className="min-h-11 w-full rounded bg-[#1a1c1c] px-4 text-center text-[13px] font-bold text-white hover:bg-black"
            >
              新建模板
            </button>
          </div>
          {data.templates.map((template) => {
            const state = getTemplateListState(template, month)
            const templateName = template.versions[0]?.definition.name || template.name
            return (
              <button
                key={template.id}
                type="button"
                onClick={() => void selectTemplate(template.id)}
                aria-label={`${templateName}，${state.label}`}
                className={`min-h-14 w-full border-b border-[#eeeeee] px-4 py-3 text-left ${selectedTemplateId === template.id ? 'bg-[#f1f4ff]' : 'hover:bg-[#fafafa]'}`}
              >
                <span className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3">
                  <span className="min-w-0">
                    <span className="block truncate text-[13px] font-bold text-[#1a1c1c]">{templateName}</span>
                    {state.meta && <span className="mt-0.5 block text-[11px] text-[#5f5e5e]">{state.meta}</span>}
                  </span>
                  <StatusDot label={state.label} tone={state.tone} />
                </span>
              </button>
            )
          })}
        </div>
      </aside>

      <div ref={editorRef} className="min-w-0 scroll-mt-4 p-4 sm:p-5">
        {selectedTemplate && (
          <div className="mb-4 flex flex-wrap items-center gap-2 border-b border-[#eeeeee] pb-3">
            {selectedTemplate.versions.map((item) => (
              <button
                key={item.id}
                type="button"
                onClick={() => void selectVersion(item)}
                className={`min-h-10 rounded border px-3 text-left text-[12px] font-bold ${versionId === item.id ? 'border-[#0050cb] bg-[#f1f4ff] text-[#0050cb]' : 'border-[#e2e2e2] text-[#5f5e5e]'}`}
              >
                <span className="block">v{item.version} · {item.status === 'draft' ? '草稿' : item.status === 'published' ? '已发布' : '已归档'}</span>
                {item.effectiveMonth && <span className="mt-0.5 block text-[10px] font-semibold opacity-80">{item.effectiveMonth} 起</span>}
              </button>
            ))}
            <button
              type="button"
              disabled={saving}
              onClick={() => void removeTemplate()}
              className="ml-auto min-h-10 rounded border border-[#f0b8b8] px-3 text-[12px] font-bold text-[#b42318] hover:bg-[#fff5f5] disabled:opacity-50"
            >
              删除模板
            </button>
          </div>
        )}

        <nav aria-label="模板编辑步骤" className="mb-5 grid grid-cols-3 border border-[#c2c6d8]">
          {([
            ['basics', '1. 基本信息'],
            ['questions', '2. 评分项'],
            ['workflow', '3. 评分人设置'],
          ] as const).map(([step, label]) => (
            (() => {
              const readiness = readinessItems.find((item) => item.step === step)
              const statusLabel = readiness?.status === 'done'
                ? '完成'
                : readiness?.status === 'error' ? '有错误' : '待完善'
              return (
                <button
                  key={step}
                  type="button"
                  aria-label={label}
                  aria-current={editorStep === step ? 'step' : undefined}
                  title={statusLabel}
                  onClick={() => setEditorStep(step)}
                  className={`min-h-12 border-r border-[#c2c6d8] px-2 py-2 text-[12px] font-bold last:border-r-0 ${
                    editorStep === step ? 'bg-[#1a1c1c] text-white' : 'bg-white text-[#5f5e5e] hover:bg-[#f4f4f4]'
                  }`}
                >
                  <span className="flex items-center justify-center gap-2">
                    <span>{label}</span>
                    <StatusDot
                      label={statusLabel}
                      tone={readiness?.status === 'done' ? 'success' : readiness?.status === 'error' ? 'danger' : 'warning'}
                    />
                  </span>
                </button>
              )
            })()
          ))}
        </nav>

        <details
          key={`${selectedTemplateId}-${versionId || 'new'}`}
          open={readinessOpen}
          onToggle={(event) => setReadinessOpen(event.currentTarget.open)}
          className="mb-5 border border-[#e2e2e2] bg-white"
        >
          <summary className="flex min-h-12 cursor-pointer list-none items-center justify-between gap-3 px-4 py-3 text-[13px] font-bold text-[#1a1c1c]">
            <span>发布检查</span>
            <StatusDot
              label={templateDefinitionReady ? '已完成' : `${readinessCompleted}/${readinessItems.length} 项完成`}
              tone={templateDefinitionReady ? 'success' : 'warning'}
            />
          </summary>
          <div className="border-t border-[#eeeeee] px-4 py-3">
            <ul className="grid gap-2">
              {readinessItems.map((item) => {
                const statusLabel = item.status === 'done' ? '已完成' : item.status === 'error' ? '有错误' : '待完善'
                return (
                  <li key={item.step} className="flex flex-col gap-2 border-b border-black/5 py-2 last:border-b-0 sm:flex-row sm:items-center">
                    <div className="min-w-0 flex-1">
                      <div className="flex flex-wrap items-center gap-2">
                        <span className="text-[13px] font-bold text-[#1a1c1c]">{item.label}</span>
                        <StatusDot
                          label={statusLabel}
                          tone={item.status === 'done' ? 'success' : item.status === 'error' ? 'danger' : 'warning'}
                        />
                      </div>
                      <p className="mt-1 text-[12px] leading-5 text-[#5f5e5e]">{item.summary}</p>
                    </div>
                    {item.status !== 'done' && (
                      <button
                        type="button"
                        onClick={() => setEditorStep(item.step)}
                        className="min-h-11 shrink-0 rounded border border-[#0050cb] px-3 text-[12px] font-bold text-[#0050cb] hover:bg-[#edf3ff]"
                      >
                        去完善
                      </button>
                    )}
                  </li>
                )
              })}
            </ul>
          </div>
        </details>

        {editorStep === 'basics' && (
          <section aria-labelledby="template-basics-heading">
            <div className="mb-3">
              <h3 id="template-basics-heading" className="text-[15px] font-bold text-[#1a1c1c]">基本信息</h3>
            </div>
            <div className="grid gap-4 sm:grid-cols-2">
              <AdminField
                label="模板名称"
                value={definition.name}
                onChange={(value) => updateDefinition((current) => ({ ...current, name: value, shortName: value }))}
                disabled={!editable}
              />
              <label className="grid gap-1 text-[12px] font-semibold text-[#5f5e5e]">
                考核内容类型
                <select
                  aria-label="考核内容类型"
                  value={definition.surveyType}
                  disabled={!editable}
                  onChange={(event) => updateDefinition((current) => ({ ...current, surveyType: event.target.value as TemplateDefinition['surveyType'] }))}
                  className="h-11 rounded border border-[#c2c6d8] bg-white px-3 text-[13px] font-semibold text-[#1a1c1c] outline-none focus:border-[#0050cb] disabled:bg-[#f4f4f4]"
                >
                  <option value="person_period">员工工作表现</option>
                  <option value="visual_case">作品或案例</option>
                  <option value="item_course">课程或事项</option>
                </select>
              </label>
              {definition.surveyType === 'visual_case' && (
                <AdminField
                  label="每人需要提交的作品数量"
                  value={String(definition.requiredWorkItemCount || 3)}
                  type="number"
                  disabled={!editable}
                  onChange={(value) => updateDefinition((current) => ({ ...current, requiredWorkItemCount: Math.max(1, Number(value) || 1), workItemImageRequired: true }))}
                />
              )}
              <label className="grid gap-1 sm:col-span-2 text-[12px] font-semibold text-[#5f5e5e]">
                给发起人和评分人的说明
                <textarea
                  value={definition.description}
                  disabled={!editable}
                  onChange={(event) => updateDefinition((current) => ({ ...current, description: event.target.value }))}
                  className="min-h-24 rounded border border-[#e2e2e2] px-3 py-2 text-[13px] font-normal text-[#1a1c1c] outline-none focus:border-[#0050cb] disabled:bg-[#f4f4f4]"
                />
              </label>
            </div>
          </section>
        )}

        {editorStep === 'questions' && (
          <QuestionEditor definition={definition} editable={editable} onChange={updateDefinition} />
        )}
        {editorStep === 'workflow' && (
          <WorkflowEditor definition={definition} editable={editable} request={request} onChange={updateDefinition} />
        )}

        <div className="sticky bottom-[68px] z-20 -mx-4 mt-6 flex flex-col gap-3 border-t border-[#c2c6d8] bg-white/95 px-4 py-3 shadow-[0_-4px_10px_rgba(0,0,0,0.06)] backdrop-blur sm:bottom-0 sm:mx-0 sm:flex-row sm:items-center sm:justify-between sm:shadow-none">
          <div
            role="status"
            aria-live="polite"
            className={`flex min-w-0 items-center gap-2 text-[12px] font-semibold ${
              operationFeedback.state === 'error'
                ? 'text-[#b42318]'
                : operationFeedback.state === 'saved' || operationFeedback.state === 'published'
                  ? 'text-[#16794b]'
                  : 'text-[#5f5e5e]'
            }`}
          >
            <StatusDot label={feedbackMessage} tone={feedbackTone} />
            <span>{feedbackMessage}</span>
          </div>
          <div className="flex flex-wrap justify-end gap-2">
            {!editable && (
              <button
                type="button"
                disabled={saving}
                onClick={() => void cloneVersion()}
                className="min-h-11 rounded bg-[#0050cb] px-4 text-[13px] font-bold text-white hover:bg-[#0042a8] disabled:cursor-not-allowed disabled:opacity-50"
              >
                {saving ? '处理中…' : '修改模板'}
              </button>
            )}
            {editable && (
              <button
                type="button"
                disabled={saving}
                onClick={() => void save()}
                className="min-h-11 rounded border border-[#1a1c1c] px-4 text-[13px] font-bold text-[#1a1c1c] hover:bg-[#f4f4f4] disabled:cursor-not-allowed disabled:opacity-50"
              >
                {saving && operationFeedback.state === 'saving' ? '保存中…' : '保存草稿'}
              </button>
            )}
            {editable && versionId && (
              <button
                type="button"
                disabled={saving || !templateDefinitionReady}
                onClick={() => void publish()}
                className="min-h-11 rounded bg-[#0050cb] px-4 text-[13px] font-bold text-white hover:bg-[#0042a8] disabled:cursor-not-allowed disabled:opacity-50"
                title={templateDefinitionReady
                  ? undefined
                  : readinessItems.find((item) => item.status !== 'done')?.summary}
              >
                {saving && operationFeedback.state === 'publishing' ? '发布中…' : `发布至 ${month}`}
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}

function QuestionEditor({
  definition,
  editable,
  onChange,
}: {
  definition: TemplateDefinition
  editable: boolean
  onChange: (definition: TemplateDefinition) => void
}) {
  const perItemTotal = definition.questions.reduce(
    (sum, question) => sum + Number(question.maxScore || definition.questionMaxScore || 20),
    0,
  )
  const workItemCount = definition.surveyType === 'visual_case'
    ? Math.max(1, Number(definition.requiredWorkItemCount || 1))
    : 1
  const allocatedTotal = perItemTotal * workItemCount
  const configuredTotal = Number(definition.maxTotal || 0)
  const totalMatches = Math.round(allocatedTotal * 100) === Math.round(configuredTotal * 100)
  const [expandedQuestionId, setExpandedQuestionId] = useState<string | null>(
    definition.questions[0]?.id || null,
  )
  const [deletedQuestion, setDeletedQuestion] = useState<{
    question: TemplateDefinition['questions'][number]
    index: number
  } | null>(null)

  useEffect(() => {
    if (
      expandedQuestionId
      && definition.questions.some((question) => question.id === expandedQuestionId)
    ) return
    setExpandedQuestionId(definition.questions[0]?.id || null)
  }, [definition.questions, expandedQuestionId])

  useEffect(() => {
    if (!deletedQuestion) return
    const timer = window.setTimeout(() => setDeletedQuestion(null), 6000)
    return () => window.clearTimeout(timer)
  }, [deletedQuestion])

  const addQuestion = () => {
    const nextQuestion = {
      id: `score_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`,
      title: `评分项 ${definition.questions.length + 1}`,
      description: '',
      maxScore: definition.questionMaxScore || 20,
    }
    onChange({ ...definition, questions: [...definition.questions, nextQuestion] })
    setExpandedQuestionId(nextQuestion.id)
  }

  const copyQuestion = (index: number) => {
    const source = definition.questions[index]
    if (!source) return
    const copy = {
      ...source,
      id: `score_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`,
      title: `${source.title || `评分项 ${index + 1}`}（副本）`,
    }
    const questions = [...definition.questions]
    questions.splice(index + 1, 0, copy)
    onChange({ ...definition, questions })
    setExpandedQuestionId(copy.id)
  }

  const moveQuestion = (index: number, offset: -1 | 1) => {
    const targetIndex = index + offset
    if (targetIndex < 0 || targetIndex >= definition.questions.length) return
    const questions = [...definition.questions]
    const [question] = questions.splice(index, 1)
    questions.splice(targetIndex, 0, question)
    onChange({ ...definition, questions })
    setExpandedQuestionId(question.id)
  }

  const removeQuestion = (index: number) => {
    const question = definition.questions[index]
    if (!question) return
    setDeletedQuestion({ question, index })
    onChange({
      ...definition,
      questions: definition.questions.filter((_, itemIndex) => itemIndex !== index),
    })
  }

  const undoRemoveQuestion = () => {
    if (!deletedQuestion) return
    const questions = [...definition.questions]
    questions.splice(
      Math.min(deletedQuestion.index, questions.length),
      0,
      deletedQuestion.question,
    )
    onChange({ ...definition, questions })
    setExpandedQuestionId(deletedQuestion.question.id)
    setDeletedQuestion(null)
  }

  return (
    <section aria-labelledby="template-questions-heading">
      <h3 id="template-questions-heading" className="text-[15px] font-bold text-[#1a1c1c]">评分项</h3>
      <div className={`sticky top-2 z-10 mt-3 grid gap-3 border px-4 py-4 shadow-sm sm:grid-cols-[minmax(0,240px)_1fr] sm:items-end ${totalMatches ? 'border-[#c2c6d8] bg-white' : 'border-[#e7b64a] bg-[#fff9ec]'}`}>
        <label className="grid min-w-0 gap-1 text-[12px] font-semibold text-[#5f5e5e]">
          总分
          <input
            type="number"
            min="1"
            value={configuredTotal || ''}
            disabled={!editable}
            onChange={(event) => onChange({ ...definition, maxTotal: Math.max(1, Number(event.target.value) || 1) })}
            className="h-11 min-w-0 w-full rounded border border-[#c2c6d8] px-3 text-[13px] font-bold text-[#1a1c1c] outline-none focus:border-[#0050cb] disabled:bg-[#f4f4f4]"
          />
        </label>
        <div className={`text-[12px] leading-5 ${totalMatches ? 'text-[#5f5e5e]' : 'font-bold text-[#8a5700]'}`}>
          {definition.surveyType === 'visual_case'
            ? `已分配 ${perItemTotal} × ${workItemCount} 个作品 = ${allocatedTotal} / ${configuredTotal || 0} 分`
            : `已分配 ${allocatedTotal} / ${configuredTotal || 0} 分`}
          {!totalMatches && (
            <span className="block">
              {allocatedTotal < configuredTotal
                ? `还需分配 ${configuredTotal - allocatedTotal} 分。`
                : `已超出 ${allocatedTotal - configuredTotal} 分。`}
              请调整评分项满分或总分。
            </span>
          )}
        </div>
      </div>
      {deletedQuestion && (
        <div
          role="status"
          aria-live="polite"
          className="mt-3 flex min-h-11 flex-wrap items-center justify-between gap-2 border border-[#b3c5ff] bg-[#f8faff] px-3 py-2 text-[12px] font-semibold text-[#1a1c1c]"
        >
          <span>已删除“{deletedQuestion.question.title || '未命名评分项'}”</span>
          <button
            type="button"
            onClick={undoRemoveQuestion}
            className="min-h-11 rounded px-3 font-bold text-[#0050cb] hover:bg-[#edf3ff]"
          >
            撤销删除
          </button>
        </div>
      )}
      <div className="mt-4 grid gap-3">
        {definition.questions.length === 0 && (
          <div className="border border-dashed border-[#c2c6d8] px-4 py-8 text-center text-[12px] text-[#727687]">
            还没有评分项，请点击“添加评分项”
          </div>
        )}
        {definition.questions.map((question, index) => {
          const expanded = expandedQuestionId === question.id
          const complete = Boolean(question.title.trim()) && Number(question.maxScore || 0) > 0
          const contentId = `question-editor-${question.id}`
          return (
          <div key={question.id} className={`border ${expanded ? 'border-[#9fb8ff]' : 'border-[#e2e2e2]'}`}>
            <div className="flex flex-wrap items-center gap-2 px-3 py-2">
              <button
                type="button"
                aria-expanded={expanded}
                aria-controls={contentId}
                onClick={() => setExpandedQuestionId(expanded ? null : question.id)}
                className="flex min-h-11 min-w-0 basis-full items-center gap-3 rounded px-1 text-left hover:bg-[#f7f7f7] sm:basis-auto sm:flex-1"
              >
                <span className="min-w-0 flex-1">
                  <span className="block text-[12px] font-semibold text-[#727687]">评分项 {index + 1}</span>
                  <span className="mt-0.5 block truncate text-[13px] font-bold text-[#1a1c1c]">
                    {question.title || '名称待填写'}
                  </span>
                </span>
                <span className="shrink-0 text-[12px] font-bold text-[#1a1c1c]">
                  {Number(question.maxScore || 0)} 分
                </span>
                <span className={`shrink-0 rounded-full px-2 py-0.5 text-[10px] font-bold ${
                  complete ? 'bg-[#eaf7ef] text-[#16794b]' : 'bg-[#fff0c7] text-[#7a4b00]'
                }`}>
                  {complete ? '完整' : '待填写'}
                </span>
                <span aria-hidden="true" className="w-4 shrink-0 text-center text-[#5f5e5e]">
                  {expanded ? '−' : '+'}
                </span>
              </button>
              {editable && (
                <div className="flex w-full flex-wrap items-center justify-end gap-1 border-t border-[#eeeeee] pt-1 sm:w-auto sm:border-t-0 sm:pt-0">
                  <button type="button" aria-label={`复制评分项 ${index + 1}`} onClick={() => copyQuestion(index)} className="min-h-11 rounded px-3 text-[11px] font-bold text-[#0050cb] hover:bg-[#edf3ff]">复制</button>
                  <button type="button" aria-label={`上移评分项 ${index + 1}`} disabled={index === 0} onClick={() => moveQuestion(index, -1)} className="min-h-11 rounded px-3 text-[11px] font-bold text-[#5f5e5e] hover:bg-[#f4f4f4] disabled:cursor-not-allowed disabled:opacity-35">上移</button>
                  <button type="button" aria-label={`下移评分项 ${index + 1}`} disabled={index === definition.questions.length - 1} onClick={() => moveQuestion(index, 1)} className="min-h-11 rounded px-3 text-[11px] font-bold text-[#5f5e5e] hover:bg-[#f4f4f4] disabled:cursor-not-allowed disabled:opacity-35">下移</button>
                  <button type="button" aria-label={`删除评分项 ${index + 1}`} onClick={() => removeQuestion(index)} className="min-h-11 rounded px-3 text-[11px] font-bold text-[#b42318] hover:bg-[#fff5f5]">删除</button>
                </div>
              )}
            </div>
            {expanded && (
            <div id={contentId} className="grid gap-3 border-t border-[#eeeeee] p-4 sm:grid-cols-[minmax(0,1fr)_120px]">
              <label className="grid min-w-0 gap-1 text-[12px] font-semibold text-[#5f5e5e]">
                评分项名称
                <input
                  value={question.title}
                  disabled={!editable}
                  onChange={(event) => onChange({ ...definition, questions: definition.questions.map((item, itemIndex) => itemIndex === index ? { ...item, title: event.target.value } : item) })}
                  className="h-11 min-w-0 w-full rounded border border-[#e2e2e2] px-3 text-[13px] outline-none focus:border-[#0050cb] disabled:bg-[#f4f4f4]"
                />
              </label>
              <label className="grid min-w-0 gap-1 text-[12px] font-semibold text-[#5f5e5e]">
                满分
                <input
                  type="number"
                  min="1"
                  value={question.maxScore || 20}
                  disabled={!editable}
                  onChange={(event) => onChange({ ...definition, questions: definition.questions.map((item, itemIndex) => itemIndex === index ? { ...item, maxScore: Number(event.target.value) || 1 } : item) })}
                  className="h-11 min-w-0 w-full rounded border border-[#e2e2e2] px-3 text-[13px] outline-none focus:border-[#0050cb] disabled:bg-[#f4f4f4]"
                />
              </label>
              <label className="grid gap-1 text-[12px] font-semibold text-[#5f5e5e] sm:col-span-2">
                评分说明（可选）
                <textarea
                  value={question.description || ''}
                  disabled={!editable}
                  placeholder="告诉评分人这一项应该看什么"
                  onChange={(event) => onChange({ ...definition, questions: definition.questions.map((item, itemIndex) => itemIndex === index ? { ...item, description: event.target.value } : item) })}
                  className="min-h-20 rounded border border-[#e2e2e2] px-3 py-2 text-[13px] outline-none focus:border-[#0050cb] disabled:bg-[#f4f4f4]"
                />
              </label>
            </div>
            )}
          </div>
          )
        })}
      </div>
      {editable && (
        <button
          type="button"
          onClick={addQuestion}
          className="mt-4 min-h-12 w-full rounded border border-dashed border-[#0050cb] px-4 text-[13px] font-bold text-[#0050cb] hover:bg-[#edf3ff]"
        >
          添加评分项
        </button>
      )}
    </section>
  )
}

function WorkflowEditor({
  definition,
  editable,
  request,
  onChange,
}: {
  definition: TemplateDefinition
  editable: boolean
  request: RequestFn
  onChange: (
    definition: TemplateDefinition | ((current: TemplateDefinition) => TemplateDefinition)
  ) => void
}) {
  const reviewerResolutionSequenceRef = useRef<Record<string, number>>({})
  const updateStages = (
    nextStages: StageDraft[] | ((currentStages: StageDraft[]) => StageDraft[]),
  ) => {
    onChange((currentDefinition) => {
      const resolvedStages = typeof nextStages === 'function'
        ? nextStages(currentDefinition.workflow.stages)
        : nextStages
      const stages = resolvedStages.map((stage, index) => ({ ...stage, order: index }))
      const currentScoring = currentDefinition.workflow.scoring
      const scoring = currentScoring.mode === 'average_reviewers'
        ? { mode: 'average_reviewers' as const, stageKeys: stages.map((stage) => stage.key) }
        : (() => {
            const selectedStage = stages.find((stage) => stage.key === currentScoring.stageKey) || stages[stages.length - 1]
            const selectedReviewer = selectedStage?.reviewers.find((reviewer) => reviewer.source === currentScoring.reviewerSource)
              || selectedStage?.reviewers[0]
            return {
              mode: 'final_reviewer' as const,
              stageKey: selectedStage?.key || '',
              reviewerSource: selectedReviewer?.source || 'manual_selection' as ReviewerSource,
            }
          })()
      return {
        ...currentDefinition,
        workflow: { ...currentDefinition.workflow, stages, scoring },
      }
    })
  }
  const stages = definition.workflow.stages

  const changeReviewerSource = async (
    stageIndex: number,
    reviewerIndex: number,
    source: ReviewerSource,
  ) => {
    const stageKey = stages[stageIndex]?.key
    if (!stageKey) return
    const resolutionKey = `${stageIndex}:${stageKey}:${reviewerIndex}`
    const sequence = (reviewerResolutionSequenceRef.current[resolutionKey] || 0) + 1
    reviewerResolutionSequenceRef.current[resolutionKey] = sequence
    const nextReviewer: ReviewerDraft = {
      source,
      label: reviewerSourceLabel(source),
    }
    updateStages((currentStages) => currentStages.map((stage, index) => (
      index === stageIndex && stage.key === stageKey
        ? {
            ...stage,
            reviewers: stage.reviewers.map((reviewer, indexInStage) => (
              indexInStage === reviewerIndex ? nextReviewer : reviewer
            )),
          }
        : stage
    )))
    if (source !== 'fixed_employee') return
    try {
      const employees = await request<Array<{ id: string; displayName: string }>>(
        '/employees?purpose=evaluator&limit=20&search=%E5%85%83%E6%B3%BD',
      )
      const exactMatches = employees.filter((employee) => employee.displayName.trim() === '元泽')
      if (
        reviewerResolutionSequenceRef.current[resolutionKey] !== sequence
        || exactMatches.length !== 1
      ) return
      updateStages((currentStages) => currentStages.map((stage, index) => (
        index === stageIndex && stage.key === stageKey
          ? {
              ...stage,
              reviewers: stage.reviewers.map((reviewer, indexInStage) => (
                indexInStage === reviewerIndex && reviewer.source === 'fixed_employee'
                  ? {
                      ...reviewer,
                      label: '元泽',
                      employeeId: exactMatches[0].id,
                      employeeName: exactMatches[0].displayName,
                    }
                  : reviewer
              )),
            }
          : stage
      )))
    } catch {
      // 保留未解析状态，让管理员通过下方人员搜索完成选择。
    }
  }

  return (
    <section aria-labelledby="template-workflow-heading">
      <div className="flex flex-wrap items-start justify-between gap-3">
        <h3 id="template-workflow-heading" className="text-[15px] font-bold text-[#1a1c1c]">评分人设置</h3>
        {editable && <button type="button" onClick={() => updateStages([...stages, { key: `stage_${stages.length + 1}`, label: `阶段 ${stages.length + 1}`, order: stages.length, reviewers: [{ source: 'manual_selection', label: '评价人' }] }])} className="min-h-11 rounded border border-[#1a1c1c] px-4 text-[12px] font-bold text-[#1a1c1c] hover:bg-[#1a1c1c] hover:text-white">添加阶段</button>}
      </div>
      <div className="mt-3 grid gap-3">
        {stages.map((stage, stageIndex) => (
          <div key={`${stage.key}-${stageIndex}`} className="border border-[#e2e2e2] p-4">
            <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:gap-3">
              <label className="grid min-w-0 flex-1 gap-1 text-[12px] font-semibold text-[#5f5e5e]">
                阶段 {stageIndex + 1} 名称
                <input
                  value={stage.label}
                  disabled={!editable}
                  onChange={(event) => updateStages(stages.map((item, index) => index === stageIndex ? { ...item, label: event.target.value } : item))}
                  className="h-11 rounded border border-[#e2e2e2] px-3 text-[13px] outline-none focus:border-[#0050cb] disabled:bg-[#f4f4f4]"
                />
              </label>
              {editable && (
                <button
                  type="button"
                  disabled={stages.length <= 1}
                  onClick={() => updateStages(stages.filter((_, index) => index !== stageIndex))}
                  className="min-h-11 self-end rounded px-3 text-[12px] font-bold text-[#b42318] hover:bg-[#fff5f5] disabled:cursor-not-allowed disabled:text-[#aaaaaa]"
                >
                  删除阶段
                </button>
              )}
            </div>
            <p className="mt-3 text-[11px] font-bold text-[#727687]">本阶段评分人</p>
            <div className="mt-3 grid gap-2">
              {stage.reviewers.map((reviewer, reviewerIndex) => (
                <div key={`${stage.key}-${reviewerIndex}`} className="grid gap-2 sm:grid-cols-[180px_minmax(180px,1fr)_72px]">
                  <select
                    aria-label={`阶段 ${stageIndex + 1} 评分人类型 ${reviewerIndex + 1}`}
                    value={reviewer.source}
                    disabled={!editable}
                    onChange={(event) => void changeReviewerSource(
                      stageIndex,
                      reviewerIndex,
                      event.target.value as ReviewerSource,
                    )}
                    className="h-11 rounded border border-[#e2e2e2] bg-white px-3 text-[12px] font-semibold outline-none focus:border-[#0050cb] disabled:bg-[#f4f4f4]"
                  >
                    <option value="direct_manager">直属主管</option>
                    <option value="fixed_employee">元泽</option>
                    <option value="manual_selection">任何人（发起时选择）</option>
                    <option value="self">本人自评</option>
                  </select>
                  {reviewer.source === 'fixed_employee' ? (
                    <FixedReviewerPicker
                      value={reviewer}
                      disabled={!editable}
                      request={request}
                      onChange={(value) => updateStages(stages.map((item, index) => index === stageIndex ? {
                        ...item,
                        reviewers: item.reviewers.map((entry, entryIndex) => entryIndex === reviewerIndex ? value : entry),
                      } : item))}
                    />
                  ) : (
                    <input
                      aria-label={`阶段 ${stageIndex + 1} 评分人显示名称 ${reviewerIndex + 1}`}
                      value={reviewer.label}
                      disabled={!editable}
                      onChange={(event) => updateStages(stages.map((item, index) => index === stageIndex ? { ...item, reviewers: item.reviewers.map((entry, entryIndex) => entryIndex === reviewerIndex ? { ...entry, label: event.target.value } : entry) } : item))}
                      className="h-11 rounded border border-[#e2e2e2] px-3 text-[12px] outline-none focus:border-[#0050cb] disabled:bg-[#f4f4f4]"
                    />
                  )}
                  {editable && (
                    <button
                      type="button"
                      disabled={stage.reviewers.length <= 1}
                      aria-label={`删除阶段 ${stageIndex + 1} 的第 ${reviewerIndex + 1} 类评分人`}
                      onClick={() => updateStages(stages.map((item, index) => index === stageIndex ? { ...item, reviewers: item.reviewers.filter((_, entryIndex) => entryIndex !== reviewerIndex) } : item))}
                      className="min-h-11 rounded text-[12px] font-bold text-[#b42318] hover:bg-[#fff5f5] disabled:cursor-not-allowed disabled:text-[#aaaaaa]"
                    >
                      删除
                    </button>
                  )}
                </div>
              ))}
              {editable && <button type="button" onClick={() => updateStages(stages.map((item, index) => index === stageIndex ? { ...item, reviewers: [...item.reviewers, { source: 'manual_selection', label: '发起时选择任何人' }] } : item))} className="min-h-11 w-fit rounded border border-[#e2e2e2] px-3 text-[11px] font-bold text-[#1a1c1c] hover:border-[#1a1c1c]">添加评分人</button>}
            </div>
            <details className="mt-3">
              <summary className="min-h-11 cursor-pointer py-3 text-[11px] font-bold text-[#727687]">高级设置</summary>
              <label className="grid max-w-sm gap-1 text-[11px] font-semibold text-[#727687]">
                系统内部阶段代码
                <input
                  value={stage.key}
                  disabled={!editable}
                  onChange={(event) => updateStages(stages.map((item, index) => index === stageIndex ? { ...item, key: event.target.value } : item))}
                  className="h-11 rounded border border-[#e2e2e2] px-3 text-[12px] outline-none focus:border-[#0050cb] disabled:bg-[#f4f4f4]"
                />
              </label>
            </details>
          </div>
        ))}
      </div>

      <div className="mt-5 border-t border-[#eeeeee] pt-5">
        <h4 className="text-[14px] font-bold text-[#1a1c1c]">最终成绩采用哪一组评分</h4>
      </div>
      <div className="mt-3 grid gap-3 sm:grid-cols-3">
        <label className="grid gap-1 text-[12px] font-semibold text-[#5f5e5e]">
          最终成绩规则
          <select
            value={definition.workflow.scoring.mode}
            disabled={!editable}
            onChange={(event) => onChange({
              ...definition,
              workflow: {
                ...definition.workflow,
                scoring: event.target.value === 'final_reviewer'
                  ? { mode: 'final_reviewer', stageKey: stages[stages.length - 1]?.key || '', reviewerSource: stages[stages.length - 1]?.reviewers[0]?.source || 'manual_selection' }
                  : { mode: 'average_reviewers', stageKeys: stages.map((stage) => stage.key) },
              },
            })}
            className="h-11 rounded border border-[#e2e2e2] bg-white px-3 text-[12px] font-semibold disabled:bg-[#f4f4f4]"
          >
            <option value="average_reviewers">所有指定阶段评分取平均</option>
            <option value="final_reviewer">以指定终审人评分为准</option>
          </select>
        </label>
        {definition.workflow.scoring.mode === 'final_reviewer' && (
          <>
            <label className="grid gap-1 text-[12px] font-semibold text-[#5f5e5e]">
              终审阶段
              <select value={definition.workflow.scoring.stageKey || ''} disabled={!editable} onChange={(event) => onChange({ ...definition, workflow: { ...definition.workflow, scoring: { ...definition.workflow.scoring, mode: 'final_reviewer', stageKey: event.target.value } } })} className="h-11 rounded border border-[#e2e2e2] bg-white px-3 text-[12px] font-semibold disabled:bg-[#f4f4f4]">
                {stages.map((stage) => <option key={stage.key} value={stage.key}>{stage.label}</option>)}
              </select>
            </label>
            <label className="grid gap-1 text-[12px] font-semibold text-[#5f5e5e]">
              终审人来源
              <select value={definition.workflow.scoring.reviewerSource || ''} disabled={!editable} onChange={(event) => onChange({ ...definition, workflow: { ...definition.workflow, scoring: { ...definition.workflow.scoring, mode: 'final_reviewer', reviewerSource: event.target.value as ReviewerSource } } })} className="h-11 rounded border border-[#e2e2e2] bg-white px-3 text-[12px] font-semibold disabled:bg-[#f4f4f4]">
                {(stages.find((stage) => stage.key === definition.workflow.scoring.stageKey)?.reviewers || []).map((reviewer) => <option key={reviewer.source} value={reviewer.source}>{reviewer.employeeName || reviewer.label}</option>)}
              </select>
            </label>
          </>
        )}
      </div>
    </section>
  )
}

function FixedReviewerPicker({
  value,
  disabled,
  request,
  onChange,
}: {
  value: ReviewerDraft
  disabled: boolean
  request: RequestFn
  onChange: (value: ReviewerDraft) => void
}) {
  const listboxId = useId()
  const statusId = useId()
  const [search, setSearch] = useState('')
  const [items, setItems] = useState<Array<{ id: string; displayName: string; departmentName?: string }>>([])
  const [loading, setLoading] = useState(false)
  const [searchError, setSearchError] = useState<string | null>(null)
  const [activeIndex, setActiveIndex] = useState(0)
  const normalizedSearch = search.trim()

  useEffect(() => {
    if (disabled || normalizedSearch.length < 1) {
      setItems([])
      setLoading(false)
      setSearchError(null)
      return
    }
    let cancelled = false
    setLoading(true)
    setSearchError(null)
    const timer = window.setTimeout(async () => {
      try {
        const result = await request<Array<{ id: string; displayName: string; departmentName?: string }>>(
          `/employees?purpose=evaluator&limit=20&search=${encodeURIComponent(normalizedSearch)}`,
        )
        if (cancelled) return
        setItems(result)
        setActiveIndex(0)
      } catch (error) {
        if (cancelled) return
        setItems([])
        setSearchError(error instanceof Error ? error.message : '人员搜索失败，请重试')
      } finally {
        if (!cancelled) setLoading(false)
      }
    }, 250)
    return () => {
      cancelled = true
      window.clearTimeout(timer)
    }
  }, [disabled, normalizedSearch, request])

  const selectItem = (item: { id: string; displayName: string }) => {
    onChange({
      source: 'fixed_employee',
      label: '元泽',
      employeeId: item.id,
      employeeName: item.displayName,
    })
    setSearch('')
    setItems([])
    setSearchError(null)
  }

  const resultsOpen = !disabled && normalizedSearch.length > 0
  const searchStatus = disabled
    ? ''
    : value.employeeId && normalizedSearch.length === 0
      ? `已选择：${value.employeeName}`
      : normalizedSearch.length === 0
        ? '输入姓名，确认元泽对应的人员档案'
        : loading
          ? '正在搜索人员…'
          : searchError
            ? searchError
            : items.length > 0 ? `找到 ${items.length} 人` : '没有找到匹配人员'

  return (
    <div className="relative min-w-0">
      <input
        role="combobox"
        aria-autocomplete="list"
        aria-expanded={resultsOpen}
        aria-controls={listboxId}
        aria-activedescendant={resultsOpen && items[activeIndex] ? `${listboxId}-${items[activeIndex].id}` : undefined}
        aria-describedby={statusId}
        aria-label="选择元泽人员档案"
        value={search || value.employeeName || ''}
        disabled={disabled}
        onChange={(event) => {
          setSearch(event.target.value)
          onChange({ source: 'fixed_employee', label: '元泽' })
        }}
        onKeyDown={(event) => {
          if (!resultsOpen || items.length === 0) {
            if (event.key === 'Escape') setSearch('')
            return
          }
          if (event.key === 'ArrowDown') {
            event.preventDefault()
            setActiveIndex((index) => Math.min(items.length - 1, index + 1))
          } else if (event.key === 'ArrowUp') {
            event.preventDefault()
            setActiveIndex((index) => Math.max(0, index - 1))
          } else if (event.key === 'Enter') {
            event.preventDefault()
            selectItem(items[activeIndex])
          } else if (event.key === 'Escape') {
            event.preventDefault()
            setSearch('')
            setItems([])
          }
        }}
        placeholder="搜索并选择元泽"
        className="h-11 w-full rounded border border-[#e2e2e2] px-3 text-[12px] outline-none focus:border-[#0050cb] disabled:bg-[#f4f4f4]"
      />
      <div id={statusId} role="status" aria-live="polite" className={`mt-1 min-h-5 text-[11px] leading-5 ${searchError ? 'font-semibold text-[#b42318]' : 'text-[#727687]'}`}>
        {searchStatus}
      </div>
      {resultsOpen && (
        <ul
          id={listboxId}
          role="listbox"
          aria-label="人员搜索结果"
          className="absolute inset-x-0 top-[68px] z-30 max-h-48 overflow-y-auto border border-[#e2e2e2] bg-white shadow-[0_10px_24px_rgba(0,0,0,0.1)]"
        >
          {!loading && !searchError && items.map((item, index) => (
            <li
              key={item.id}
              id={`${listboxId}-${item.id}`}
              role="option"
              aria-selected={index === activeIndex}
              tabIndex={-1}
              onMouseEnter={() => setActiveIndex(index)}
              onMouseDown={(event) => event.preventDefault()}
              onClick={() => {
                selectItem(item)
              }}
              className={`flex min-h-11 cursor-pointer items-center border-b border-[#eeeeee] px-3 py-2 text-left text-[12px] ${
                index === activeIndex ? 'bg-[#edf3ff]' : 'hover:bg-[#f7f7f7]'
              }`}
            >
              <strong>{item.displayName}</strong>{item.departmentName ? ` · ${item.departmentName}` : ''}
            </li>
          ))}
          {(loading || searchError || items.length === 0) && (
            <li className="px-3 py-3 text-[12px] text-[#5f5e5e]" aria-hidden="true">
              {loading ? '正在搜索…' : searchError || '没有找到匹配人员'}
            </li>
          )}
        </ul>
      )}
    </div>
  )
}

function AdminField({
  label,
  value,
  onChange,
  type = 'text',
  disabled = false,
}: {
  label: string
  value: string
  onChange: (value: string) => void
  type?: string
  disabled?: boolean
}) {
  return (
    <label className="grid min-w-0 gap-1 text-[12px] font-semibold text-[#5f5e5e]">
      {label}
      <input
        type={type}
        value={value}
        disabled={disabled}
        onChange={(event) => onChange(event.target.value)}
        className="h-11 min-w-0 w-full rounded border border-[#e2e2e2] px-3 text-[13px] font-semibold text-[#1a1c1c] outline-none focus:border-[#0050cb] disabled:bg-[#f4f4f4] disabled:text-[#8a8a8a]"
      />
    </label>
  )
}