'use client'

import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode } from 'react'
import Image from 'next/image'
import Link from 'next/link'
import { useParams, useRouter, useSearchParams } from 'next/navigation'
import { useSession } from 'next-auth/react'
import { pinyin } from 'pinyin-pro'
import { createPortal } from 'react-dom'
import { sortPerformanceSurveyImagesByName } from '@/lib/performance-survey-image-order'
import { preparePerformanceSurveyImagesInBrowser } from '@/lib/performance-survey-image-browser'
import {
  calculatePerformanceSurveyResponseProgress,
  calculatePerformanceSurveyWorkItemProgress,
} from '@/lib/performance-survey-response-progress'
import { groupVisualScoresByEvaluator } from '@/lib/performance-survey-result-grouping'
import { PerformanceSurveyAdminConfig } from '@/app/performance-survey/PerformanceSurveyAdminConfig'
import { PerformanceSurveyExportDialog } from '@/app/performance-survey/PerformanceSurveyExportDialog'
import { useConfirmActionDialog } from '@/components/ConfirmActionDialog'
import {
  choosePerformanceSurveyExportDestination,
  sanitizePerformanceSurveyExportFileName,
  savePerformanceSurveyDashboardWorkbook,
  type PerformanceSurveyDashboardExportData,
} from '@/lib/performance-survey-dashboard-export'

type ApiState<T> = {
  loading: boolean
  data: T | null
  error: string | null
}

type Employee = {
  id: string
  displayName: string
  flowerName?: string | null
  realName?: string | null
  dingEmail?: string | null
  jobNumber?: string | null
  departmentName?: string | null
  departmentPath?: string | null
  positionTitle?: string | null
  positionLevel?: string | null
  levelType?: string | null
  isLeadership?: boolean | null
  managerName?: string | null
  dingtalkUserId?: string | null
}

type DepartmentOption = {
  id: string
  name: string
  parentId?: string | null
  parentName?: string | null
  employeeCount?: number
  selectable?: boolean
  value?: string | null
  departmentName?: string | null
  departmentPath?: string | null
  fullPath?: string | null
}

type Template = {
  templateVersionId?: string
  templateVersion?: number
  code: string
  templateVariant?: 'with_copy' | 'without_copy'
  templateVariantName?: string
  templateVariantVersion?: number
  templateOptionKey?: string
  name: string
  shortName?: string
  description: string
  surveyType: string
  ownerRoleName?: string
  itemName?: string
  itemNamePlaceholder?: string
  itemNoteName?: string
  itemNotePlaceholder?: string
  defaultCategory?: string
  respondentNameLabel?: string
  respondentDepartmentLabel?: string
  respondentNameFallback?: string
  dataSource?: string
  weight: number
  weightLabel?: string
  maxTotal?: number
  questionMaxScore?: number
  requiredWorkItemCount?: number
  workItemName?: string
  workItemImageRequired?: boolean
  achievementLabel?: string
  achievementSuffix?: string
  trimNote?: string
  trimmedNote?: string
  belowBand?: string
  questions: Array<{ id: string; title: string; description?: string; maxScore?: number }>
  workflow?: {
    stages: Array<{
      key: string
      label: string
      order: number
      reviewers: Array<{
        source: 'self' | 'direct_manager' | 'fixed_employee' | 'manual_selection'
        label: string
        employeeId?: string
        employeeName?: string
      }>
    }>
    scoring: {
      mode: 'final_reviewer' | 'average_reviewers'
      stageKey?: string
      reviewerSource?: string
      stageKeys?: string[]
    }
  }
}

type VisualCaseDraft = {
  id: string
  title: string
  description: string
  files: File[]
}

type PerformanceSurveyImageSliceData = {
  url: string
  width: number
  height: number
}

type PerformanceSurveyImageGroupData = {
  key: string
  sourceName: string
  previewUrl: string
  previewWidth: number
  previewHeight: number
  width: number
  height: number
  slices: PerformanceSurveyImageSliceData[]
}

const API_BASE = '/api/performance-survey'
const DINGTALK_PERFORMANCE_SESSION_STORAGE_KEY = 'performanceSurveyDingtalkToken'
const DINGTALK_PERFORMANCE_SESSION_HEADER = 'x-performance-survey-dingtalk-session'
const DINGTALK_PERFORMANCE_SESSION_EXPIRED_EVENT = 'performance-survey:dingtalk-session-expired'
const PERFORMANCE_SURVEY_MAX_IMAGE_COUNT = 60
const PERFORMANCE_SURVEY_MAX_IMAGE_BYTES = 200 * 1024 * 1024
const DEFAULT_VISUAL_CASE_COUNT = 3
const ALL_POSITION_GROUPS_FILTER = 'all'
const PERFORMANCE_SURVEY_IMAGE_PROXY_HOSTS = new Set([
  's3.jiansun.vip',
])

type PerformanceSurveyDashboardTab = 'personal' | 'public' | 'manage'
type PerformanceSurveyWorkspaceTab = 'overview' | 'pending' | 'submitted' | 'created'

const PERFORMANCE_SURVEY_WORKSPACE_TABS: PerformanceSurveyWorkspaceTab[] = [
  'overview',
  'pending',
  'submitted',
  'created',
]

function normalizePerformanceSurveyDashboardTab(value: unknown): PerformanceSurveyDashboardTab {
  const tab = String(value || '').trim().toLowerCase()
  if (tab === 'public') return 'public'
  if (tab === 'manage' || tab === 'admin') return 'manage'
  return 'personal'
}

function normalizePerformanceSurveyWorkspaceTab(value: unknown): PerformanceSurveyWorkspaceTab {
  const tab = String(value || '').trim().toLowerCase()
  if (tab === 'results') return 'created'
  return PERFORMANCE_SURVEY_WORKSPACE_TABS.includes(tab as PerformanceSurveyWorkspaceTab)
    ? tab as PerformanceSurveyWorkspaceTab
    : 'overview'
}

function getLegacyPerformanceSurveyWorkspaceTab(value: unknown): PerformanceSurveyWorkspaceTab | null {
  const tab = String(value || '').trim().toLowerCase()
  return ['pending', 'submitted', 'created', 'results'].includes(tab)
    ? normalizePerformanceSurveyWorkspaceTab(tab)
    : null
}

function getLegacyPerformanceSurveyPathTab(path: string[]): PerformanceSurveyDashboardTab | null {
  if (path.length !== 1) return null
  const segment = String(path[0] || '').trim().toLowerCase()
  if (!['personal', 'public', 'manage', 'pending', 'submitted', 'results', 'created', 'teacher', 'admin'].includes(segment)) {
    return null
  }
  return normalizePerformanceSurveyDashboardTab(segment)
}

function getModalFocusableElements(container: HTMLElement | null) {
  if (!container) return []
  return Array.from(container.querySelectorAll<HTMLElement>(
    'button:not([disabled]), a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
  )).filter((element) => !element.hasAttribute('hidden') && element.getAttribute('aria-hidden') !== 'true')
}

function keepFocusInsideModal(event: KeyboardEvent, container: HTMLElement | null) {
  if (event.key !== 'Tab') return
  const focusable = getModalFocusableElements(container)
  if (focusable.length === 0) {
    event.preventDefault()
    container?.focus()
    return
  }

  const first = focusable[0]
  const last = focusable[focusable.length - 1]
  const activeElement = document.activeElement
  if (event.shiftKey && (activeElement === first || !container?.contains(activeElement))) {
    event.preventDefault()
    last.focus()
  } else if (!event.shiftKey && activeElement === last) {
    event.preventDefault()
    first.focus()
  }
}

function validatePerformanceSurveyImageFiles(files: File[]) {
  if (files.length === 0) return '请至少选择 1 张图片'
  if (files.length > PERFORMANCE_SURVEY_MAX_IMAGE_COUNT) {
    return `单个案例最多上传 ${PERFORMANCE_SURVEY_MAX_IMAGE_COUNT} 张切片`
  }

  const invalidType = files.find((file) => !file.type.startsWith('image/'))
  if (invalidType) return `文件「${invalidType.name}」不是图片`
  const oversized = files.find((file) => file.size > PERFORMANCE_SURVEY_MAX_IMAGE_BYTES)
  if (oversized) return `图片「${oversized.name}」超过 200MB`
  return null
}

async function uploadPerformanceSurveyImageFiles(
  files: File[],
  onProgress?: (label: string) => void,
) {
  const { chunkUpload } = await import('@/lib/chunk-upload')
  const uploaded: Array<{
    uploadId: string
    mimeType: 'image/webp'
    width: number
    height: number
    kind: 'slice' | 'preview'
    sourceName: string
    sourceIndex: number
    sliceIndex: number
    sliceCount: number
  }> = []
  const processedImages = await preparePerformanceSurveyImagesInBrowser(files, onProgress)
  const dingtalkToken = getStoredDingtalkPerformanceToken()
  const requestHeaders = dingtalkToken
    ? {
        Authorization: `Bearer ${dingtalkToken}`,
        [DINGTALK_PERFORMANCE_SESSION_HEADER]: dingtalkToken,
      }
    : undefined

  for (let index = 0; index < processedImages.length; index += 1) {
    const image = processedImages[index]
    const file = image.file
    onProgress?.(`正在上传处理结果 ${index + 1}/${processedImages.length}`)
    const result = await chunkUpload(
      file,
      { materialType: '考核调研-视觉评分', fileName: file.name },
      { skipComplete: true, requestHeaders },
    )
    if (!result?.uploadId) throw new Error(`图片「${file.name}」上传失败，请重试`)
    uploaded.push({
      uploadId: result.uploadId,
      mimeType: image.mimeType,
      width: image.width,
      height: image.height,
      kind: image.kind,
      sourceName: image.sourceName,
      sourceIndex: image.sourceIndex,
      sliceIndex: image.sliceIndex,
      sliceCount: image.sliceCount,
    })
  }

  return uploaded
}

function formatPerformanceSurveyImageFileSize(bytes: number) {
  if (bytes < 1024 * 1024) return `${Math.max(1, Math.round(bytes / 1024))} KB`
  return `${(bytes / 1024 / 1024).toFixed(1)} MB`
}

function createVisualCaseDrafts(count = DEFAULT_VISUAL_CASE_COUNT): VisualCaseDraft[] {
  return Array.from({ length: count }, (_, index) => ({
    id: `visual-case-${index + 1}`,
    title: '',
    description: '',
    files: [],
  }))
}

function formatDateTimeLocalInput(value?: string | Date | null) {
  if (!value) return ''
  const date = value instanceof Date ? value : new Date(value)
  if (Number.isNaN(date.getTime())) return ''
  const pad = (part: number) => String(part).padStart(2, '0')
  return [
    `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`,
    `${pad(date.getHours())}:${pad(date.getMinutes())}`,
  ].join('T')
}

function normalizePerformanceSurveyImageUrl(url?: string | null): string {
  const trimmed = String(url || '').trim()
  if (!trimmed) return ''
  if (!/^https?:\/\//i.test(trimmed)) return trimmed

  try {
    const parsed = new URL(trimmed)
    if (PERFORMANCE_SURVEY_IMAGE_PROXY_HOSTS.has(parsed.hostname.toLowerCase())) {
      return `/api/proxy-media?url=${encodeURIComponent(trimmed)}`
    }
    return trimmed
  } catch {
    return trimmed
  }
}

function normalizePerformanceSurveyImageGroups(value: unknown): PerformanceSurveyImageGroupData[] {
  if (!Array.isArray(value) || value.length === 0) return []
  const stringUrls = value
    .filter((item): item is string => typeof item === 'string')
    .map(normalizePerformanceSurveyImageUrl)
    .filter(Boolean)
  if (stringUrls.length === value.length) {
    return stringUrls.length > 0 ? [{
      key: 'legacy-images',
      sourceName: '案例图片',
      previewUrl: stringUrls[0],
      previewWidth: 1200,
      previewHeight: 560,
      width: 1200,
      height: stringUrls.length * 1500,
      slices: stringUrls.map((url) => ({ url, width: 1200, height: 1500 })),
    }] : []
  }

  const groups = value.flatMap((item, index): PerformanceSurveyImageGroupData[] => {
    if (!item || typeof item !== 'object' || Array.isArray(item)) return []
    const record = item as Record<string, unknown>
    const width = Math.max(1, Number(record.width) || 1200)
    const rawSlices = Array.isArray(record.slices)
      ? record.slices
      : Array.isArray(record.sliceUrls)
        ? record.sliceUrls
        : []
    const slices = rawSlices.flatMap((slice): PerformanceSurveyImageSliceData[] => {
      if (typeof slice === 'string') {
        const url = normalizePerformanceSurveyImageUrl(slice)
        return url ? [{ url, width, height: 1500 }] : []
      }
      if (!slice || typeof slice !== 'object' || Array.isArray(slice)) return []
      const sliceRecord = slice as Record<string, unknown>
      const url = normalizePerformanceSurveyImageUrl(String(sliceRecord.url || ''))
      return url ? [{
        url,
        width: Math.max(1, Number(sliceRecord.width) || width),
        height: Math.max(1, Number(sliceRecord.height) || 1500),
      }] : []
    })
    if (slices.length === 0) return []
    const previewUrl = normalizePerformanceSurveyImageUrl(String(record.previewUrl || slices[0].url))
    return [{
      key: `${String(record.sourceName || 'case-image')}-${index}`,
      sourceName: String(record.sourceName || `案例图片 ${index + 1}`),
      previewUrl: previewUrl || slices[0].url,
      previewWidth: Math.max(1, Number(record.previewWidth) || Math.min(width, 720)),
      previewHeight: Math.max(1, Number(record.previewHeight) || 560),
      width,
      height: Math.max(1, Number(record.height) || slices.reduce((sum, slice) => sum + slice.height, 0)),
      slices,
    }]
  })

  if (groups.length <= 1) return groups

  const orderedGroups = sortPerformanceSurveyImagesByName(groups, (group) => group.sourceName)
  const slices = orderedGroups.flatMap((group) => group.slices)
  const firstGroup = orderedGroups[0]
  return [{
    key: `ordered-slices-${orderedGroups.map((group) => group.key).join('-')}`,
    sourceName: `详情切片（${orderedGroups.length} 张）`,
    previewUrl: firstGroup.previewUrl,
    previewWidth: firstGroup.previewWidth,
    previewHeight: firstGroup.previewHeight,
    width: Math.max(...orderedGroups.map((group) => group.width)),
    height: slices.reduce((sum, slice) => sum + slice.height, 0),
    slices,
  }]
}

function getStoredDingtalkPerformanceToken() {
  if (typeof window === 'undefined') return null
  try {
    return (
      window.sessionStorage.getItem(DINGTALK_PERFORMANCE_SESSION_STORAGE_KEY) ||
      window.localStorage.getItem(DINGTALK_PERFORMANCE_SESSION_STORAGE_KEY)
    )
  } catch {
    return null
  }
}

function clearStoredDingtalkPerformanceToken() {
  if (typeof window === 'undefined') return
  try {
    window.sessionStorage.removeItem(DINGTALK_PERFORMANCE_SESSION_STORAGE_KEY)
    window.localStorage.removeItem(DINGTALK_PERFORMANCE_SESSION_STORAGE_KEY)
  } catch {
    // 浏览器存储不可用时没有可清理的本地凭证。
  }
}

function decodeStoredDingtalkPerformanceSession() {
  const token = getStoredDingtalkPerformanceToken()
  const encodedPayload = token?.split('.')[0]
  if (!encodedPayload) return null

  try {
    const normalized = encodedPayload.replace(/-/g, '+').replace(/_/g, '/')
    const padding = normalized.length % 4 === 0 ? '' : '='.repeat(4 - (normalized.length % 4))
    const binary = window.atob(normalized + padding)
    const bytes = Uint8Array.from(binary, (char) => char.charCodeAt(0))
    const payload = JSON.parse(new TextDecoder().decode(bytes))
    return {
      id: String(payload.userId || ''),
      name: String(payload.name || ''),
      email: String(payload.email || ''),
      avatar: payload.avatar ? String(payload.avatar) : null,
      role: String(payload.role || 'USER'),
      department: String(payload.department || ''),
      managedDepartment: payload.managedDepartment ? String(payload.managedDepartment) : null,
      isSuperAdmin: Boolean(payload.isSuperAdmin),
    }
  } catch {
    return null
  }
}

function normalizePickerSearch(value: unknown) {
  return String(value ?? '')
    .trim()
    .toLowerCase()
    .replace(/[\s/_\-｜|,，;；>]+/g, '')
}

function pickerSearchVariants(value: unknown) {
  const text = String(value ?? '').trim()
  if (!text) return []
  const variants = [normalizePickerSearch(text)]
  try {
    variants.push(
      normalizePickerSearch(pinyin(text, { toneType: 'none', type: 'array' }).join('')),
      normalizePickerSearch(pinyin(text, { pattern: 'first', toneType: 'none', type: 'array' }).join('')),
    )
  } catch {
    // 非中文或异常字符按原文匹配即可。
  }
  return Array.from(new Set(variants.filter(Boolean)))
}

function matchesPickerSearch(keyword: string, values: unknown[]) {
  const normalizedKeyword = normalizePickerSearch(keyword)
  if (!normalizedKeyword) return true
  return values.some((value) => pickerSearchVariants(value).some((variant) => variant.includes(normalizedKeyword)))
}

function mergeEmployeesById(...groups: Employee[][]) {
  const byId = new Map<string, Employee>()
  for (const group of groups) {
    for (const employee of group) {
      if (!byId.has(employee.id)) byId.set(employee.id, employee)
    }
  }
  return Array.from(byId.values())
}

async function apiRequest<T>(path: string, options?: RequestInit): Promise<T> {
  const dingtalkToken = getStoredDingtalkPerformanceToken()
  let response: Response
  try {
    response = await fetch(`${API_BASE}${path}`, {
      ...options,
      headers: {
        ...(options?.body instanceof FormData ? {} : { 'Content-Type': 'application/json' }),
        ...(dingtalkToken
          ? {
              Authorization: `Bearer ${dingtalkToken}`,
              [DINGTALK_PERFORMANCE_SESSION_HEADER]: dingtalkToken,
            }
          : {}),
        ...(options?.headers || {}),
      },
    })
  } catch (error) {
    if (error instanceof DOMException && error.name === 'AbortError') throw error
    throw new Error('网络连接失败，请检查网络后重试')
  }
  const contentType = response.headers.get('content-type') || ''
  const payload = contentType.includes('application/json') ? await response.json() : await response.text()

  if (!response.ok || (payload && typeof payload === 'object' && payload.success === false)) {
    if (response.status === 401 && dingtalkToken) {
      clearStoredDingtalkPerformanceToken()
      if (typeof window !== 'undefined') {
        window.dispatchEvent(new Event(DINGTALK_PERFORMANCE_SESSION_EXPIRED_EVENT))
      }
      throw new Error('钉钉考核调研访问凭证已过期，请从钉钉最新通知重新进入')
    }

    throw new Error(
      payload && typeof payload === 'object'
        ? payload.error || payload.message || '请求失败'
        : String(payload || '请求失败'),
    )
  }

  return (payload && typeof payload === 'object' && 'data' in payload ? payload.data : payload) as T
}

function useApi<T>(path: string | null, deps: unknown[] = []): ApiState<T> & { refresh: () => Promise<void> } {
  const [state, setState] = useState<ApiState<T>>({ loading: Boolean(path), data: null, error: null })
  const requestSequenceRef = useRef(0)
  const abortControllerRef = useRef<AbortController | null>(null)
  const depsKey = JSON.stringify(deps)

  const load = useCallback(async () => {
    const requestSequence = requestSequenceRef.current + 1
    requestSequenceRef.current = requestSequence
    abortControllerRef.current?.abort()

    if (!path) {
      abortControllerRef.current = null
      setState({ loading: false, data: null, error: null })
      return
    }

    const abortController = new AbortController()
    abortControllerRef.current = abortController
    setState({ loading: true, data: null, error: null })
    try {
      const data = await apiRequest<T>(path, { signal: abortController.signal })
      if (requestSequence !== requestSequenceRef.current) return
      setState({ loading: false, data, error: null })
    } catch (error) {
      if (abortController.signal.aborted || requestSequence !== requestSequenceRef.current) return
      setState({ loading: false, data: null, error: error instanceof Error ? error.message : '加载失败' })
    } finally {
      if (requestSequence === requestSequenceRef.current && abortControllerRef.current === abortController) {
        abortControllerRef.current = null
      }
    }
  }, [path])

  useEffect(() => {
    void load()
    return () => {
      requestSequenceRef.current += 1
      abortControllerRef.current?.abort()
      abortControllerRef.current = null
    }
  }, [load, depsKey])

  return { ...state, refresh: load }
}

export default function PerformanceSurveyPage() {
  const { data: session, status } = useSession()
  const router = useRouter()
  const params = useParams()
  const searchParams = useSearchParams()
  const rawPath = (params as any).path
  const path = useMemo(() => (Array.isArray(rawPath) ? (rawPath as string[]) : []), [rawPath])
  const searchParamsKey = searchParams.toString()
  const legacyPathTab = useMemo(() => getLegacyPerformanceSurveyPathTab(path), [path])
  const [dingtalkSessionChecked, setDingtalkSessionChecked] = useState(false)
  const [hasDingtalkPerformanceSession, setHasDingtalkPerformanceSession] = useState(false)
  const [dingtalkUserProfile, setDingtalkUserProfile] = useState<any>(null)
  const canLoadCurrentUser = Boolean(session || hasDingtalkPerformanceSession)
  const currentUser = useApi<any>(canLoadCurrentUser ? '/me' : null, [canLoadCurrentUser])

  useEffect(() => {
    const hasToken = Boolean(getStoredDingtalkPerformanceToken())
    setHasDingtalkPerformanceSession(hasToken)
    setDingtalkUserProfile(hasToken ? decodeStoredDingtalkPerformanceSession() : null)
    setDingtalkSessionChecked(true)
  }, [])

  useEffect(() => {
    const handleExpiredSession = () => {
      setHasDingtalkPerformanceSession(false)
      setDingtalkUserProfile(null)
    }
    window.addEventListener(DINGTALK_PERFORMANCE_SESSION_EXPIRED_EVENT, handleExpiredSession)
    return () => window.removeEventListener(DINGTALK_PERFORMANCE_SESSION_EXPIRED_EVENT, handleExpiredSession)
  }, [])

  useEffect(() => {
    if (status === 'unauthenticated' && dingtalkSessionChecked && !hasDingtalkPerformanceSession) {
      const currentPath =
        typeof window === 'undefined'
          ? '/performance-survey'
          : `${window.location.pathname}${window.location.search}`
      router.push(`/login?redirect=${encodeURIComponent(currentPath)}`)
    }
  }, [status, dingtalkSessionChecked, hasDingtalkPerformanceSession, router])

  useEffect(() => {
    if (!legacyPathTab) return
    const query = new URLSearchParams(searchParamsKey)
    query.set('tab', legacyPathTab)
    const legacyWorkspaceTab = getLegacyPerformanceSurveyWorkspaceTab(path[0])
    if (legacyWorkspaceTab) query.set('workspace', legacyWorkspaceTab)
    router.replace(`/performance-survey?${query.toString()}`)
  }, [legacyPathTab, path, router, searchParamsKey])

  if (status === 'loading' || (status === 'unauthenticated' && !dingtalkSessionChecked)) {
    return (
      <div className="min-h-screen bg-white dark:bg-gray-900">
        <PerformanceSurveyMobileHeader session={{ user: dingtalkUserProfile || {} }} />
        <LoadingPage />
      </div>
    )
  }

  if (!session && !hasDingtalkPerformanceSession) {
    return null
  }

  const currentUserProfile = currentUser.data?.user || null
  const sessionUser = session?.user as any
  const effectiveSession = ({
    ...(session || { expires: '' }),
    user: {
      ...(sessionUser || {}),
      id: currentUserProfile?.id || sessionUser?.id || dingtalkUserProfile?.id || '',
      name: currentUserProfile?.name || session?.user?.name || dingtalkUserProfile?.name || '当前用户',
      email: currentUserProfile?.email || session?.user?.email || dingtalkUserProfile?.email || '',
      avatar: currentUserProfile?.avatar || sessionUser?.avatar || dingtalkUserProfile?.avatar || null,
      role: currentUserProfile?.role || sessionUser?.role || dingtalkUserProfile?.role || 'USER',
      department: currentUserProfile?.department || sessionUser?.department || dingtalkUserProfile?.department || '',
      managedDepartment:
        currentUserProfile?.managedDepartment ||
        sessionUser?.managedDepartment ||
        dingtalkUserProfile?.managedDepartment ||
        null,
      isSuperAdmin:
        currentUserProfile?.isSuperAdmin ??
        sessionUser?.isSuperAdmin ??
        dingtalkUserProfile?.isSuperAdmin ??
        false,
    },
  } as any)

  const isSurveySubmitPage = path[0] === 'survey' && Boolean(path[1])
  const isResultsPage = path[0] === 'results' && Boolean(path[1])
  const canCreateSurvey = Boolean(currentUser.data?.permissions?.canCreate)
  const permissionsLoading = currentUser.loading || (!currentUser.data && !currentUser.error)
  let content = <Dashboard me={currentUser.data} permissionsLoading={permissionsLoading} />
  if (isSurveySubmitPage && path[1]) {
    content = <SurveySubmit surveyId={path[1]} session={effectiveSession} canCreateSurvey={canCreateSurvey} />
  }
  if (isResultsPage && path[1]) {
    content = <SurveyResults surveyId={path[1]} />
  }

  if (isSurveySubmitPage) {
    return (
      <div className="min-h-screen overflow-x-hidden bg-white dark:bg-gray-900">
        {content}
      </div>
    )
  }

  return (
    <div className="min-h-screen overflow-x-hidden bg-white text-[#1a1c1c]">
      {isResultsPage && <PerformanceSurveyMobileHeader session={effectiveSession} />}
      {content}
    </div>
  )
}

function PerformanceSurveyMobileHeader({ session }: { session: any }) {
  const user = session?.user || {}
  const name = String(user.name || '当前用户')
  const avatar = typeof user.avatar === 'string' && user.avatar
    ? user.avatar
    : typeof user.image === 'string'
      ? user.image
      : ''

  return (
    <header className="sticky top-0 z-30 border-b border-[#eeeeee] bg-[#2f3131] text-white">
      <div className="mx-auto flex h-14 w-full max-w-[1440px] items-center justify-between gap-4 px-4 sm:px-6">
        <div className="flex min-w-0 items-center gap-3">
          <div className="flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full border border-white/15 bg-[#f4f4f4] text-[12px] font-semibold text-[#0050cb]">
            {avatar ? (
              <Image
                src={avatar}
                alt={name}
                width={32}
                height={32}
                unoptimized
                className="h-full w-full object-cover"
              />
            ) : (
              getSurveyInitials(name)
            )}
          </div>
          <div className="truncate text-[16px] font-bold tracking-tight">考核调研</div>
        </div>
        <Link
          href="/"
          target="_top"
          className="shrink-0 text-[12px] font-semibold text-white/85 transition-colors hover:text-white"
          aria-label="返回品牌中心首页"
        >
          返回品牌中心
        </Link>
      </div>
    </header>
  )
}

function Dashboard({ me, permissionsLoading }: { me: any | null; permissionsLoading: boolean }) {
  const router = useRouter()
  const searchParams = useSearchParams()
  const requestedTabRaw = searchParams.get('tab') || 'personal'
  const requestedTab = normalizePerformanceSurveyDashboardTab(requestedTabRaw)
  const searchParamsKey = searchParams.toString()
  const [tab, setTab] = useState<PerformanceSurveyDashboardTab>(requestedTab)
  const [manageConfigurationDirty, setManageConfigurationDirty] = useState(false)
  const {
    confirmAction: confirmDashboardNavigation,
    confirmActionDialog: dashboardNavigationDialog,
  } = useConfirmActionDialog()
  const displayName = me?.employee?.flowerName || me?.employee?.displayName || me?.user?.name || '当前用户'
  const avatar = me?.user?.avatar || me?.user?.image || ''
  const canCreateSurvey = Boolean(me?.permissions?.canCreate)
  const permissionsResolved = !permissionsLoading
  const availableTabIds = useMemo(
    () => canCreateSurvey ? ['personal', 'public', 'manage'] : ['personal', 'public'],
    [canCreateSurvey],
  )
  const confirmLeaveManage = useCallback(async () => {
    if (tab !== 'manage' || !manageConfigurationDirty) return true
    const result = await confirmDashboardNavigation({
      title: '放弃尚未保存的修改？',
      description: '离开调研管理后，本次尚未保存的配置不会保留。',
      confirmLabel: '放弃并离开',
      tone: 'danger',
    })
    return result.confirmed
  }, [confirmDashboardNavigation, manageConfigurationDirty, tab])

  useEffect(() => {
    if (!permissionsResolved) return
    let cancelled = false
    const syncRequestedTab = async () => {
      if (requestedTab === 'manage' && !canCreateSurvey) {
        setManageConfigurationDirty(false)
        setTab('personal')
        const query = new URLSearchParams(searchParamsKey)
        query.set('tab', 'personal')
        query.delete('prefillMonth')
        query.delete('prefillTemplate')
        router.replace(`/performance-survey?${query.toString()}`, { scroll: false })
        return
      }
      if (availableTabIds.includes(requestedTab) && tab !== requestedTab) {
        if (!await confirmLeaveManage()) {
          if (cancelled) return
          const query = new URLSearchParams(searchParamsKey)
          query.set('tab', tab)
          router.replace(`/performance-survey?${query.toString()}`, { scroll: false })
          return
        }
        if (cancelled) return
        setManageConfigurationDirty(false)
        setTab(requestedTab)
        return
      }
      if (!availableTabIds.includes(tab)) {
        setManageConfigurationDirty(false)
        setTab('personal')
      }
    }
    void syncRequestedTab()
    return () => {
      cancelled = true
    }
  }, [
    availableTabIds,
    canCreateSurvey,
    confirmLeaveManage,
    permissionsResolved,
    requestedTab,
    router,
    searchParamsKey,
    tab,
  ])

  useEffect(() => {
    if (requestedTabRaw === requestedTab) return
    const query = new URLSearchParams(searchParamsKey)
    query.set('tab', requestedTab)
    const legacyWorkspaceTab = getLegacyPerformanceSurveyWorkspaceTab(requestedTabRaw)
    if (legacyWorkspaceTab) query.set('workspace', legacyWorkspaceTab)
    router.replace(`/performance-survey?${query.toString()}`, { scroll: false })
  }, [requestedTab, requestedTabRaw, router, searchParamsKey])

  const selectTab = async (nextTab: PerformanceSurveyDashboardTab) => {
    if (nextTab === tab || !await confirmLeaveManage()) return
    setManageConfigurationDirty(false)
    setTab(nextTab)
    const query = new URLSearchParams()
    query.set('tab', nextTab)
    const workspaceTab = getLegacyPerformanceSurveyWorkspaceTab(searchParams.get('workspace'))
    if (workspaceTab) query.set('workspace', workspaceTab)
    const adminWorkspace = searchParams.get('adminWorkspace')
    if (adminWorkspace) query.set('adminWorkspace', adminWorkspace)
    router.replace(`/performance-survey?${query.toString()}`, { scroll: false })
  }
  const tabItems: Array<{ id: PerformanceSurveyDashboardTab; label: string }> = [
    { id: 'personal', label: '个人看板' },
    { id: 'public', label: '公共看板' },
    ...(canCreateSurvey
      ? [{
          id: 'manage' as const,
          label: me?.permissions?.isSystemAdmin ? '调研管理' : '发起调研',
        }]
      : []),
  ]
  const pageTitle = tab === 'public'
    ? '公共看板'
    : tab === 'manage'
      ? me?.permissions?.isSystemAdmin ? '考核调研管理' : '发起调研'
      : '个人绩效概览'
  const pageSubtitle = tab === 'personal'
    ? '过去 12 个月的考核详细数据'
    : tab === 'public'
      ? ''
      : ''

  return (
    <>
      <PerformanceSurveyDashboardHeader
        activeTab={tab}
        avatar={avatar}
        displayName={displayName}
        onSelectTab={(nextTab) => void selectTab(nextTab)}
        tabItems={tabItems}
      />
      <main className="mx-auto w-full max-w-[1200px] bg-white px-4 py-8 pb-24 text-[#1a1c1c] sm:px-6 sm:pb-10">
        <section className="mb-6">
          <h1 className="text-[24px] font-bold leading-tight text-[#1a1c1c] sm:text-[22px]">{pageTitle}</h1>
          {pageSubtitle && <p className="mt-2 text-[14px] font-medium text-[#5f5e5e]">{pageSubtitle}</p>}
        </section>

        {tab === 'personal' && <PerformanceSurveyWorkspace canCreateSurvey={canCreateSurvey} />}
        {tab === 'public' && <PerformanceDashboardBoard view="public" />}
        {tab === 'manage' && permissionsResolved && canCreateSurvey && (
          <ManagePanel
            currentEmployee={me?.employee || null}
            isSystemAdmin={Boolean(me?.permissions?.isSystemAdmin)}
            configurationDirty={manageConfigurationDirty}
            onConfigurationDirtyChange={setManageConfigurationDirty}
          />
        )}
      </main>
      {dashboardNavigationDialog}
      <nav className={`fixed inset-x-0 bottom-0 z-30 grid h-[68px] ${tabItems.length === 3 ? 'grid-cols-3' : 'grid-cols-2'} border-t border-[#e2e2e2] bg-white sm:hidden`}>
        {tabItems.map((item) => (
          <button
            key={item.id}
            type="button"
            onClick={() => void selectTab(item.id)}
            aria-current={tab === item.id ? 'page' : undefined}
            className={`flex items-center justify-center text-[12px] font-semibold ${
              tab === item.id ? 'text-[#0050cb]' : 'text-[#5f5e5e]'
            }`}
          >
            {item.label}
          </button>
        ))}
      </nav>
    </>
  )
}

function PerformanceSurveyDashboardHeader({
  activeTab,
  avatar,
  displayName,
  onSelectTab,
  tabItems,
}: {
  activeTab: PerformanceSurveyDashboardTab
  avatar: string
  displayName: string
  onSelectTab: (tab: PerformanceSurveyDashboardTab) => void
  tabItems: Array<{ id: PerformanceSurveyDashboardTab; label: string }>
}) {
  return (
    <header className="bg-[#1f2937] text-white shadow-sm">
      <div className="container mx-auto grid min-h-[60px] max-w-7xl grid-cols-[minmax(0,1fr)_auto] items-center gap-4 px-3 py-3 sm:grid-cols-[minmax(220px,1fr)_auto_minmax(220px,1fr)] sm:px-4">
        <div className="flex min-w-0 items-center gap-3">
          <div className="flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-full border border-white/15 bg-white/15 text-white">
            {avatar ? (
              <Image
                src={avatar}
                alt={displayName}
                width={36}
                height={36}
                unoptimized
                className="h-full w-full object-cover"
              />
            ) : (
              <span className="text-[12px] font-bold">{getSurveyInitials(displayName)}</span>
            )}
          </div>
          <div className="min-w-0">
            <div className="truncate text-[16px] font-bold">考核调研</div>
            <div className="truncate text-[11px] font-medium text-white/70" title={displayName}>{displayName}</div>
          </div>
        </div>
        <nav className="hidden h-full items-center justify-center gap-9 sm:flex">
          {tabItems.map((item) => {
            const active = activeTab === item.id
            return (
              <button
                key={item.id}
                type="button"
                onClick={() => onSelectTab(item.id)}
                aria-current={active ? 'page' : undefined}
                className={`h-full border-b-2 px-1 text-[13px] font-bold transition-colors ${
                  active
                    ? 'border-white text-white'
                    : 'border-transparent text-[#b3c5ff] hover:text-white'
                }`}
              >
                {item.label}
              </button>
            )
          })}
        </nav>
        <Link
          href="/"
          target="_top"
          className="hidden justify-self-end text-[13px] font-semibold text-white/90 transition-colors hover:text-white sm:block"
          aria-label="返回品牌中心首页"
        >
          返回品牌中心
        </Link>
        <Link
          href="/"
          target="_top"
          className="justify-self-end text-[12px] font-semibold text-[#b3c5ff] transition-colors hover:text-white sm:hidden"
          aria-label="返回品牌中心首页"
        >
          返回品牌中心
        </Link>
      </div>
    </header>
  )
}

function DashboardStats({
  data,
  activeTab,
  onSelectTab,
}: {
  data: any
  activeTab: PerformanceSurveyWorkspaceTab
  onSelectTab: (tab: PerformanceSurveyWorkspaceTab) => void
}) {
  const summary = data.summary || {}
  const personal = summary.personal || {
    pendingCount: summary.pendingCount || 0,
    submittedCount: summary.submittedCount || 0,
    createdCount: summary.createdCount || 0,
  }
  const items: Array<{ id: PerformanceSurveyWorkspaceTab; label: string; value?: number }> = [
    { id: 'overview', label: '月度看板' },
    { id: 'pending', label: '待我评分', value: personal.pendingCount || 0 },
    { id: 'submitted', label: '已处理', value: personal.submittedCount || 0 },
    { id: 'created', label: '我发起的', value: personal.createdCount || 0 },
  ]

  return (
    <div className="grid grid-cols-2 gap-2 sm:grid-cols-4" role="tablist" aria-label="任务与记录">
      {items.map((item) => {
        const active = activeTab === item.id

        return (
          <button
            key={item.id}
            type="button"
            onClick={() => onSelectTab(item.id)}
            role="tab"
            id={`performance-survey-workspace-tab-${item.id}`}
            aria-controls="performance-survey-workspace-panel"
            aria-selected={active}
            tabIndex={active ? 0 : -1}
            onKeyDown={(event) => {
              const currentIndex = items.findIndex((candidate) => candidate.id === item.id)
              const lastIndex = items.length - 1
              let nextIndex = currentIndex
              if (event.key === 'ArrowRight') nextIndex = currentIndex === lastIndex ? 0 : currentIndex + 1
              else if (event.key === 'ArrowLeft') nextIndex = currentIndex === 0 ? lastIndex : currentIndex - 1
              else if (event.key === 'Home') nextIndex = 0
              else if (event.key === 'End') nextIndex = lastIndex
              else return
              event.preventDefault()
              const nextTab = items[nextIndex].id
              onSelectTab(nextTab)
              window.requestAnimationFrame(() => document.getElementById(`performance-survey-workspace-tab-${nextTab}`)?.focus())
            }}
            className={`flex min-h-11 items-center justify-between gap-2 rounded border px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0050cb] focus-visible:ring-offset-2 ${
              active
                ? 'border-[#0052d9] bg-[#eef5ff] text-[#0052d9]'
                : 'border-[#e2e2e2] bg-white text-[#5f5e5e] hover:border-[#b8d0ff] hover:text-[#1a1c1c]'
            }`}
          >
            <span className="truncate text-[12px] font-bold sm:text-[13px]">{item.label}</span>
            {typeof item.value === 'number' && (
              <span className={`flex h-6 min-w-6 items-center justify-center rounded-full px-1.5 text-[12px] font-bold ${active ? 'bg-[#0052d9] text-white' : 'bg-[#f4f3f3] text-[#5f5e5e]'}`}>{item.value}</span>
            )}
          </button>
        )
      })}
    </div>
  )
}

function PerformanceSurveyWorkspace({ canCreateSurvey }: { canCreateSurvey: boolean }) {
  const router = useRouter()
  const searchParams = useSearchParams()
  const searchParamsKey = searchParams.toString()
  const requestedWorkspaceTab = String(searchParams.get('workspace') || '').trim().toLowerCase()
  const activeTab = normalizePerformanceSurveyWorkspaceTab(requestedWorkspaceTab)
  const state = useApi<any>('/surveys', [])

  useEffect(() => {
    if (requestedWorkspaceTab !== 'results') return
    const query = new URLSearchParams(searchParamsKey)
    query.set('tab', 'personal')
    query.set('workspace', 'created')
    router.replace(`/performance-survey?${query.toString()}`, { scroll: false })
  }, [requestedWorkspaceTab, router, searchParamsKey])

  const selectTab = (nextTab: PerformanceSurveyWorkspaceTab) => {
    const query = new URLSearchParams(searchParamsKey)
    query.set('tab', 'personal')
    query.set('workspace', nextTab)
    router.replace(`/performance-survey?${query.toString()}`, { scroll: false })
  }

  return (
    <section className="mb-8 border-b border-[#e2e2e2] pb-8" aria-labelledby="performance-survey-workspace-title">
      <div className="mb-3 flex items-end justify-between gap-4">
        <div>
          <h2 id="performance-survey-workspace-title" className="text-[16px] font-bold text-[#1a1c1c]">任务与记录</h2>
          <p className="mt-1 text-[12px] font-medium text-[#727687]">查看待评分任务、已处理记录和我发起的调研</p>
        </div>
        <button
          type="button"
          onClick={() => state.refresh()}
          className="shrink-0 text-[12px] font-bold text-[#0050cb] hover:text-[#003fa4]"
        >
          刷新
        </button>
      </div>
      <DashboardStats data={state.data || {}} activeTab={activeTab} onSelectTab={selectTab} />
      <div
        id="performance-survey-workspace-panel"
        className="mt-4"
        role="tabpanel"
        aria-labelledby={`performance-survey-workspace-tab-${activeTab}`}
      >
        {state.loading && activeTab !== 'overview' && <DashboardPanel>任务加载中...</DashboardPanel>}
        {state.error && <DashboardErrorPanel message={state.error} />}
        {activeTab === 'overview' && <PerformanceDashboardBoard view="personal" canCreateSurvey={canCreateSurvey} />}
        {state.data && activeTab === 'pending' && <PendingList items={state.data.pending || []} />}
        {state.data && activeTab === 'submitted' && <SubmittedList items={state.data.submitted || []} />}
        {state.data && activeTab === 'created' && (
          <CreatedList
            items={state.data.created || []}
            onRefresh={state.refresh}
            resultBackHref="/performance-survey?tab=personal&workspace=created"
          />
        )}
      </div>
    </section>
  )
}

function PerformanceDashboardBoard({
  view,
  canCreateSurvey = false,
}: {
  view: 'personal' | 'public'
  canCreateSurvey?: boolean
}) {
  const router = useRouter()
  const searchParams = useSearchParams()
  const [month, setMonth] = useState(searchParams.get('month') || getCurrentMonthValue())
  const [department, setDepartment] = useState('')
  const [employee, setEmployee] = useState<Employee | null>(null)
  const [positionGroupCode, setPositionGroupCode] = useState('')
  const [itemPage, setItemPage] = useState(1)
  const [deletingAssessmentKey, setDeletingAssessmentKey] = useState<string | null>(null)
  const [removeStatus, setRemoveStatus] = useState('')
  const removeStatusRef = useRef<HTMLDivElement>(null)
  const [exportDialogOpen, setExportDialogOpen] = useState(false)
  const [exportBusy, setExportBusy] = useState(false)
  const [exportError, setExportError] = useState<string | null>(null)
  const [exportStatus, setExportStatus] = useState('')
  const exportStatusRef = useRef<HTMLDivElement>(null)
  const {
    confirmAction: confirmRemovePublicEmployee,
    confirmActionDialog: removePublicEmployeeDialog,
  } = useConfirmActionDialog()
  const [detailRequest, setDetailRequest] = useState<{
    month: string
    employeeId: string
    templateCode: string
    positionGroupCode?: string
  } | null>(null)
  const publicDepartmentsPath = view === 'public'
    ? `/departments?purpose=dashboard&month=${encodeURIComponent(month)}${positionGroupCode && positionGroupCode !== ALL_POSITION_GROUPS_FILTER ? `&positionGroupCode=${encodeURIComponent(positionGroupCode)}` : ''}`
    : null
  const departments = useApi<DepartmentOption[]>(publicDepartmentsPath, [publicDepartmentsPath])
  const dashboardPath = useMemo(() => {
    const params = new URLSearchParams()
    params.set('view', view)
    if (month) params.set('month', month)
    if (department) params.set('department', department)
    if (employee?.id) params.set('employeeId', employee.id)
    if (positionGroupCode) params.set('positionGroupCode', positionGroupCode)
    params.set('itemPage', String(itemPage))
    const query = params.toString()
    return `/dashboard${query ? `?${query}` : ''}`
  }, [view, month, department, employee?.id, positionGroupCode, itemPage])
  const dashboard = useApi<any>(dashboardPath, [dashboardPath])
  const templates = dashboard.data?.templates || []
  const permissions = dashboard.data?.permissions || {}
  const personalRows = dashboard.data?.personal?.rows || []
  const publicRows = dashboard.data?.public?.rows || []
  const positionGroups = useMemo(
    () => dashboard.data?.positionGroups || [],
    [dashboard.data?.positionGroups],
  )
  const selectedPositionGroup = dashboard.data?.selectedPositionGroup || null
  const positionMembership = dashboard.data?.positionMembership || null
  const templatePager = dashboard.data?.templatePager || { page: 1, totalPages: 1, totalItems: 0, start: 0, end: 0 }
  const allPositionGroupsSelected = dashboard.data?.filters?.positionGroupCode === ALL_POSITION_GROUPS_FILTER
  const readyPositionGroupCount = positionGroups.filter((group: any) => group.status === 'ready').length
  const canDeletePublicDashboardAssessment = Boolean(
    view === 'public'
    && permissions.canDeletePublicDashboardAssessment
  )
  const effectivePositionGroupCode = String(
    dashboard.data?.filters?.positionGroupCode
    || positionGroupCode
    || selectedPositionGroup?.code
    || '',
  )
  const exportPositionName = allPositionGroupsSelected
    ? '全部岗位'
    : String(selectedPositionGroup?.name || '当前岗位')

  const deletePublicDashboardAssessment = useCallback(async (row: any, template: any, cell: any) => {
    const effectivePositionGroupCode = String(cell?.positionGroupCode || selectedPositionGroup?.code || '')
    if (!effectivePositionGroupCode || effectivePositionGroupCode === ALL_POSITION_GROUPS_FILTER) {
      setRemoveStatus('当前考核项缺少岗位信息，暂时无法删除。')
      return
    }

    const employeeName = String(row.employee?.displayName || '该人员')
    const templateName = getTemplateDisplayName(template)
    const positionName = String(
      positionGroups.find((group: any) => group.code === effectivePositionGroupCode)?.name
      || selectedPositionGroup?.name
      || '当前岗位',
    )
    const assessmentKey = `${row.employee.id}:${template.code}`
    const result = await confirmRemovePublicEmployee({
      title: `彻底删除“${employeeName}”的${templateName}？`,
      description: (
        <>
          将彻底删除{employeeName}在{formatMonthLabel(month)}「{positionName}」的“{templateName}”
          调研、评分、作品和通知记录。删除后不可恢复，但可以重新发起该月该项调研。
        </>
      ),
      confirmLabel: '确认彻底删除',
      loadingLabel: '删除中...',
      tone: 'danger',
      reason: {
        label: '删除原因',
        placeholder: '例如：发起有误、重复数据',
        helperText: '原因会写入操作记录，便于后续核查。',
        required: true,
      },
      action: async (reason) => {
        setDeletingAssessmentKey(assessmentKey)
        try {
          await apiRequest(`/dashboard/public/assessments/${encodeURIComponent(row.employee.id)}`, {
            method: 'DELETE',
            body: JSON.stringify({
              month,
              positionGroupCode: effectivePositionGroupCode,
              templateCode: template.code,
              reason,
            }),
          })
        } finally {
          setDeletingAssessmentKey(null)
        }
      },
    })

    if (!result.confirmed) return
    await Promise.all([dashboard.refresh(), departments.refresh()])
    setRemoveStatus(`已彻底删除${employeeName}在${formatMonthLabel(month)}的“${templateName}”调研，现在可以重新发起。`)
    window.requestAnimationFrame(() => removeStatusRef.current?.focus())
  }, [
    confirmRemovePublicEmployee,
    dashboard,
    departments,
    month,
    positionGroups,
    selectedPositionGroup,
  ])

  const exportPublicDashboard = useCallback(async () => {
    if (!effectivePositionGroupCode) {
      setExportError('请先选择需要导出的考核岗位。')
      return
    }

    const fileName = sanitizePerformanceSurveyExportFileName(
      `考核调研_${exportPositionName}_${month}`,
    )
    setExportBusy(true)
    setExportError(null)
    setExportStatus('')

    try {
      const destination = await choosePerformanceSurveyExportDestination(fileName)
      if (destination.kind === 'cancelled') return

      const params = new URLSearchParams({
        month,
        positionGroupCode: effectivePositionGroupCode,
      })
      const exportData = await apiRequest<PerformanceSurveyDashboardExportData>(
        `/dashboard/export?${params.toString()}`,
      )
      await savePerformanceSurveyDashboardWorkbook(exportData, fileName, destination)

      setExportDialogOpen(false)
      setExportStatus(
        destination.kind === 'file-system'
          ? `已保存“${fileName}”。`
          : `已生成“${fileName}”，请在浏览器下载记录中查看。`,
      )
      window.requestAnimationFrame(() => exportStatusRef.current?.focus())
    } catch (error) {
      setExportError(error instanceof Error ? error.message : '导出失败，请稍后重试。')
    } finally {
      setExportBusy(false)
    }
  }, [effectivePositionGroupCode, exportPositionName, month])

  return (
    <section className="mb-5 space-y-4">
      {view === 'public' && (
        <div className="border-b border-[#e2e2e2] pb-5">
          <div className="grid gap-3 md:grid-cols-[minmax(190px,0.8fr)_150px_minmax(220px,0.9fr)_minmax(240px,1fr)_auto] md:items-center">
            <PositionGroupSelect
              groups={positionGroups}
              value={positionGroupCode || (allPositionGroupsSelected ? ALL_POSITION_GROUPS_FILTER : selectedPositionGroup?.code) || ''}
              onChange={(value) => {
                setPositionGroupCode(value)
                setItemPage(1)
                setDepartment('')
                setEmployee(null)
              }}
            />
            <input
              type="month"
              value={month}
              onChange={(event) => setMonth(event.target.value)}
              className="h-10 rounded border border-[#e2e2e2] bg-white px-3 text-[13px] font-semibold text-[#1a1c1c] outline-none transition-colors focus:border-[#0050cb]"
            />
            <div className="hidden text-[13px] font-semibold text-[#5f5e5e] sm:block">组织架构</div>
            <DepartmentFilterTree
              departments={departments.data || []}
              value={department}
              onChange={(value) => setDepartment(value)}
            />
            <SingleEmployeeFilter value={employee} onChange={setEmployee} />
            {(department || employee) && (
              <button
                type="button"
                onClick={() => {
                  setDepartment('')
                  setEmployee(null)
                }}
                className="h-10 rounded border border-[#e2e2e2] bg-white px-4 text-[12px] font-bold text-[#1a1c1c] hover:bg-[#f9f9f9]"
              >
                清除
              </button>
            )}
          </div>
        </div>
      )}

      {dashboard.data && (
        <div className="flex flex-wrap items-center justify-between gap-3 border-b border-[#eeeeee] pb-3">
          <div className="flex min-w-0 flex-1 flex-wrap items-center gap-3">
            <div className="min-w-0">
              <div className="truncate text-[14px] font-bold text-[#1a1c1c]">
                {allPositionGroupsSelected
                  ? '全部岗位'
                  : selectedPositionGroup?.name || (positionMembership?.status === 'conflict' ? '岗位配置冲突' : '尚未匹配考核岗位')}
              </div>
              <div className="mt-0.5 text-[12px] text-[#787777]">
                {allPositionGroupsSelected
                  ? `${readyPositionGroupCount} 个已生效岗位 · ${templatePager.totalItems} 个考核项`
                  : selectedPositionGroup?.status === 'ready'
                    ? `${templatePager.totalItems} 个考核项`
                    : selectedPositionGroup
                      ? '待管理员完成岗位规则与考核项配置'
                      : positionMembership?.status === 'conflict'
                        ? `同时命中：${(positionMembership.conflictGroupNames || []).join('、')}`
                        : '当前人员没有可用的岗位配置'}
              </div>
            </div>
            {view === 'public' && effectivePositionGroupCode && (
              <button
                type="button"
                disabled={templatePager.totalItems === 0}
                onClick={() => {
                  setExportError(null)
                  setExportDialogOpen(true)
                }}
                className="inline-flex min-h-10 shrink-0 items-center justify-center rounded border border-[#c9c9c9] bg-white px-4 text-[12px] font-bold text-[#1a1c1c] transition-colors hover:border-[#1a1c1c] hover:bg-[#f7f7f7] focus:outline-none focus:ring-2 focus:ring-[#0050cb] disabled:cursor-not-allowed disabled:opacity-45"
                title={templatePager.totalItems === 0 ? '当前岗位暂无考核项' : '导出当前岗位和月份的全部人员、全部考核项得分'}
              >
                导出
              </button>
            )}
          </div>
          <TemplatePager
            pager={templatePager}
            onChange={setItemPage}
          />
        </div>
      )}

      {dashboard.loading && (
        <div className="border border-[#e2e2e2] bg-white px-5 py-8 text-sm font-semibold text-[#5f5e5e]">
          看板加载中...
        </div>
      )}
      {dashboard.error && <DashboardErrorPanel message={dashboard.error} />}
      {removeStatus && (
        <div
          ref={removeStatusRef}
          role="status"
          aria-live="polite"
          tabIndex={-1}
          className="rounded border border-[#b9dfc8] bg-[#f3fbf6] px-4 py-3 text-[13px] font-semibold text-[#176b3a] outline-none focus:ring-2 focus:ring-[#ccebd8]"
        >
          {removeStatus}
        </div>
      )}
      {exportStatus && (
        <div
          ref={exportStatusRef}
          role="status"
          aria-live="polite"
          tabIndex={-1}
          className="rounded border border-[#b9dfc8] bg-[#f3fbf6] px-4 py-3 text-[13px] font-semibold text-[#176b3a] outline-none focus:ring-2 focus:ring-[#ccebd8]"
        >
          {exportStatus}
        </div>
      )}
      {dashboard.data && (
        <>
          {view === 'personal' ? (
            <MonthlyPersonalLedger
              rows={personalRows}
              templates={templates}
              onOpenDetail={(value) => setDetailRequest({ ...value, positionGroupCode: selectedPositionGroup?.code })}
              onQuickCreate={canCreateSurvey ? ({ month: targetMonth, templateCode }) => {
                const params = new URLSearchParams()
                params.set('tab', 'manage')
                params.set('prefillMonth', targetMonth)
                params.set('prefillTemplate', templateCode)
                router.push(`/performance-survey?${params.toString()}`)
              } : undefined}
            />
          ) : (
            <MonthlyPublicLedger
              rows={publicRows}
              templates={templates}
              canOpenPublicDetail={Boolean(permissions.canOpenPublicDetail)}
              canDeleteAssessment={canDeletePublicDashboardAssessment}
              deletingAssessmentKey={deletingAssessmentKey}
              onDeleteAssessment={(row, template, cell) => void deletePublicDashboardAssessment(row, template, cell)}
              onOpenDetail={setDetailRequest}
            />
          )}
          <MonthlyScoreDetailModal
            request={detailRequest}
            onClose={() => setDetailRequest(null)}
          />
        </>
      )}
      {removePublicEmployeeDialog}
      <PerformanceSurveyExportDialog
        open={exportDialogOpen}
        positionName={exportPositionName}
        monthLabel={formatMonthLabel(month)}
        employeeSummary={department || employee?.id ? '岗位全部人员' : `${publicRows.length} 人`}
        assessmentCount={templatePager.totalItems}
        busy={exportBusy}
        error={exportError}
        onClose={() => {
          if (!exportBusy) setExportDialogOpen(false)
        }}
        onExport={() => void exportPublicDashboard()}
      />
    </section>
  )
}

function PositionGroupSelect({
  groups,
  value,
  onChange,
}: {
  groups: Array<{ code: string; name: string; status: string; templateCount: number }>
  value: string
  onChange: (value: string) => void
}) {
  return (
    <label className="grid min-w-0 gap-1">
      <span className="sr-only">考核岗位</span>
      <select
        value={value}
        onChange={(event) => onChange(event.target.value)}
        className="h-10 min-w-0 rounded border border-[#e2e2e2] bg-white px-3 text-[13px] font-semibold text-[#1a1c1c] outline-none transition-colors focus:border-[#0050cb]"
      >
        <option value="">选择考核岗位</option>
        <option value={ALL_POSITION_GROUPS_FILTER}>全部岗位</option>
        {groups.map((group) => (
          <option key={group.code} value={group.code}>
            {group.name}{group.status === 'ready' ? ` · ${group.templateCount}项` : ' · 待配置'}
          </option>
        ))}
      </select>
    </label>
  )
}

function TemplatePager({
  pager,
  onChange,
}: {
  pager: { page: number; totalPages: number; totalItems: number; start: number; end: number }
  onChange: (page: number) => void
}) {
  if (pager.totalItems <= 4) return null
  return (
    <div className="flex h-9 shrink-0 items-center border border-[#e2e2e2] bg-white" aria-label="考核项分页">
      <button
        type="button"
        aria-label="上一组考核项"
        title="上一组"
        disabled={pager.page <= 1}
        onClick={() => onChange(Math.max(1, pager.page - 1))}
        className="flex h-9 w-9 items-center justify-center border-r border-[#eeeeee] text-[16px] font-bold text-[#1a1c1c] hover:bg-[#f7f7f7] disabled:cursor-not-allowed disabled:text-[#b8b8b8]"
      >
        ←
      </button>
      <span className="min-w-[88px] px-3 text-center text-[12px] font-semibold tabular-nums text-[#5f5e5e]">
        {pager.start}-{pager.end} / {pager.totalItems}
      </span>
      <button
        type="button"
        aria-label="下一组考核项"
        title="下一组"
        disabled={pager.page >= pager.totalPages}
        onClick={() => onChange(Math.min(pager.totalPages, pager.page + 1))}
        className="flex h-9 w-9 items-center justify-center border-l border-[#eeeeee] text-[16px] font-bold text-[#1a1c1c] hover:bg-[#f7f7f7] disabled:cursor-not-allowed disabled:text-[#b8b8b8]"
      >
        →
      </button>
    </div>
  )
}

function MonthlyPersonalLedger({
  rows,
  templates,
  onOpenDetail,
  onQuickCreate,
}: {
  rows: any[]
  templates: any[]
  onOpenDetail: (value: { month: string; employeeId: string; templateCode: string }) => void
  onQuickCreate?: (value: { month: string; templateCode: string }) => void
}) {
  if (rows.length === 0) return <EmptyLedger title="暂无月度考核" />

  return (
    <div>
      <div className="space-y-4 sm:hidden">
        {rows.map((row) => (
          <article
            key={row.month}
            className={`rounded-lg border bg-white p-4 ${
              row.month === getCurrentMonthValue() ? 'border-[#0050cb]' : 'border-[#e2e2e2]'
            }`}
          >
            <div className="mb-3 flex items-center justify-between gap-3">
              <div className="text-[20px] font-bold text-[#1a1c1c]">{formatMonthLabel(row.month)}</div>
              {row.month === getCurrentMonthValue() && (
                <div className="rounded-full bg-[#dae1ff] px-2 py-1 text-[11px] font-bold text-[#0050cb]">本月</div>
              )}
            </div>
            <div className="grid grid-cols-2 gap-2">
              {templates.map((template) => (
                <MonthlyScoreCell
                  key={template.code}
                  embedded
                  template={template}
                  cell={row.cells?.[template.code]}
                  onQuickCreate={onQuickCreate ? () => onQuickCreate({ month: row.month, templateCode: template.code }) : undefined}
                  onClick={() => onOpenDetail({
                    month: row.month,
                    employeeId: row.employee.id,
                    templateCode: template.code,
                  })}
                />
              ))}
            </div>
          </article>
        ))}
      </div>
      <div className="hidden overflow-hidden rounded border border-[#c2c6d8] bg-white sm:block">
        <table className="w-full table-fixed border-collapse text-left">
          <thead>
            <tr className="border-b border-[#c2c6d8] bg-[#f4f3f3] text-[12px] font-bold uppercase tracking-tight text-[#5f5e5e]">
              <th className="w-[160px] px-6 py-4">月份</th>
              {templates.map((template) => (
                <th key={template.code} className="px-4 py-4 text-center">{getTemplateDisplayName(template)}</th>
              ))}
            </tr>
          </thead>
          <tbody className="divide-y divide-[#c2c6d8]">
            {rows.map((row) => (
              <tr key={row.month} className="text-sm text-[#1a1c1c] hover:bg-[#fcfcfc]">
                <td className="px-6 py-5 text-[16px] font-bold">{formatMonthLabel(row.month)}</td>
                {templates.map((template) => (
                  <td key={template.code} className="px-4 py-4">
                    <MonthlyTableScoreCell
                      cell={row.cells?.[template.code]}
                      onQuickCreate={onQuickCreate ? () => onQuickCreate({ month: row.month, templateCode: template.code }) : undefined}
                      onClick={() => onOpenDetail({
                        month: row.month,
                        employeeId: row.employee.id,
                        templateCode: template.code,
                      })}
                    />
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}

function MonthlyPublicLedger({
  rows,
  templates,
  canOpenPublicDetail,
  canDeleteAssessment,
  deletingAssessmentKey,
  onDeleteAssessment,
  onOpenDetail,
}: {
  rows: any[]
  templates: any[]
  canOpenPublicDetail: boolean
  canDeleteAssessment: boolean
  deletingAssessmentKey: string | null
  onDeleteAssessment: (row: any, template: any, cell: any) => void
  onOpenDetail: (value: { month: string; employeeId: string; templateCode: string; positionGroupCode?: string }) => void
}) {
  if (rows.length === 0) return <EmptyLedger title="暂无人员数据" />

  return (
    <div>
      <div className="space-y-0 sm:hidden">
        {rows.map((row) => (
          <article
            key={row.employee.id}
            className="border-b border-[#c2c6d8] bg-white py-4"
          >
            <div className="mb-3 flex min-w-0 items-center gap-3">
              <div className="min-w-0">
                <div className="truncate text-[16px] font-bold text-[#1a1c1c]">{row.employee.displayName}</div>
                <div className="mt-1 truncate text-[12px] text-[#5f5e5e]">
                {[row.employee.departmentName, row.employee.positionLevel || row.employee.levelType].filter(Boolean).join(' · ')}
                </div>
              </div>
            </div>
            <div className="grid grid-cols-2 gap-2">
              {templates.map((template) => {
                const cell = row.cells?.[template.code]
                const hasSurvey = Number(cell?.surveyCount || 0) > 0
                return (
                  <div key={template.code} className="min-w-0 border border-[#e2e2e2] bg-white">
                    <MonthlyScoreCell
                      compact
                      embedded
                      template={template}
                      cell={cell}
                      canOpenOverride={canOpenPublicDetail}
                      onClick={() => onOpenDetail({
                        month: row.month,
                        employeeId: row.employee.id,
                        templateCode: template.code,
                        positionGroupCode: cell?.positionGroupCode,
                      })}
                    />
                    {canDeleteAssessment && hasSurvey && (
                      <PublicLedgerAssessmentDeleteButton
                        employeeName={row.employee.displayName}
                        templateName={getTemplateDisplayName(template)}
                        loading={deletingAssessmentKey === `${row.employee.id}:${template.code}`}
                        onClick={() => onDeleteAssessment(row, template, cell)}
                      />
                    )}
                  </div>
                )
              })}
            </div>
          </article>
        ))}
      </div>
      <div className="hidden overflow-hidden rounded border border-[#e2e2e2] bg-white sm:block">
        <table className="w-full table-fixed border-collapse text-left">
          <thead>
            <tr className="border-b border-[#e2e2e2] bg-[#f9f9f9] text-[12px] font-bold uppercase tracking-tight text-[#5f5e5e]">
              <th className="w-[200px] px-4 py-3">人员</th>
              <th className="w-[200px] px-4 py-3">组织 / 职级</th>
              {templates.map((template) => (
                <th key={template.code} className="px-3 py-3 text-center">{getTemplateDisplayName(template)}</th>
              ))}
            </tr>
          </thead>
          <tbody className="divide-y divide-[#e2e2e2]">
            {rows.map((row) => (
              <tr key={row.employee.id} className="text-sm text-[#1a1c1c] hover:bg-[#fcfcfc]">
                <td className="px-4 py-3">
                  <div className="flex min-w-0 items-center gap-2">
                    <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[#f4f3f3] text-[12px] font-bold text-[#1a1c1c]">{getSurveyInitials(row.employee.displayName)}</div>
                    <div className="min-w-0">
                      <div className="truncate text-[15px] font-bold">{row.employee.displayName}</div>
                      {row.employee.jobNumber && <div className="mt-0.5 text-[11px] text-[#5f5e5e]">{row.employee.jobNumber}</div>}
                    </div>
                  </div>
                </td>
                <td className="px-4 py-3 text-[13px] font-medium text-[#5f5e5e]">
                  <div className="truncate">{row.employee.departmentName || '-'}</div>
                  <div className="mt-1 truncate">{row.employee.positionLevel || row.employee.levelType || '-'}</div>
                </td>
                {templates.map((template) => {
                  const cell = row.cells?.[template.code]
                  const hasSurvey = Number(cell?.surveyCount || 0) > 0
                  return (
                    <td key={template.code} className="px-3 py-3 text-center">
                      <MonthlyTableScoreCell
                        cell={cell}
                        showTitle={false}
                        canOpenOverride={canOpenPublicDetail}
                        onClick={() => onOpenDetail({
                          month: row.month,
                          employeeId: row.employee.id,
                          templateCode: template.code,
                          positionGroupCode: cell?.positionGroupCode,
                        })}
                      />
                      {canDeleteAssessment && hasSurvey && (
                        <PublicLedgerAssessmentDeleteButton
                          employeeName={row.employee.displayName}
                          templateName={getTemplateDisplayName(template)}
                          loading={deletingAssessmentKey === `${row.employee.id}:${template.code}`}
                          onClick={() => onDeleteAssessment(row, template, cell)}
                        />
                      )}
                    </td>
                  )
                })}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}

function PublicLedgerAssessmentDeleteButton({
  employeeName,
  templateName,
  loading,
  onClick,
}: {
  employeeName: string
  templateName: string
  loading: boolean
  onClick: () => void
}) {
  const label = `删除${employeeName}的${templateName}调研`
  return (
    <button
      type="button"
      aria-label={label}
      title={label}
      disabled={loading}
      onClick={(event) => {
        event.stopPropagation()
        onClick()
      }}
      className="inline-flex min-h-11 w-full items-center justify-center gap-1 border-t border-[#f0d7d4] px-2 text-[11px] font-bold text-[#b42318] transition-colors hover:bg-[#fff5f5] focus:outline-none focus:ring-2 focus:ring-inset focus:ring-[#ffd5d0] disabled:cursor-wait disabled:opacity-45"
    >
      {loading ? (
        <span>删除中...</span>
      ) : (
        <>
          <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
            <path strokeLinecap="round" strokeLinejoin="round" d="M4 7h16m-10 4v6m4-6v6M9 7l1-3h4l1 3m3 0-1 13H7L6 7" />
          </svg>
          <span>删除</span>
        </>
      )}
    </button>
  )
}

function MonthlyScoreCell({
  template,
  cell,
  compact = false,
  embedded = false,
  canOpenOverride,
  onClick,
  onQuickCreate,
}: {
  template: any
  cell: any
  compact?: boolean
  embedded?: boolean
  canOpenOverride?: boolean
  onClick: () => void
  onQuickCreate?: () => void
}) {
  const hasScore = cell && cell.score !== null && cell.score !== undefined
  const hasSurvey = Number(cell?.surveyCount || 0) > 0
  const canOpen = Boolean(hasSurvey && (canOpenOverride ?? cell?.detailAllowed))
  const maxTotal = Number(cell?.rawMaxTotal || template?.maxTotal || 120)
  const className = embedded
    ? `${compact ? 'min-h-[82px]' : 'min-h-[100px]'} px-1 py-2 text-left transition-colors ${canOpen ? 'hover:bg-[#f8faff]' : ''}`
    : `${compact ? 'min-h-[82px] px-2 py-2' : 'min-h-[108px] px-3 py-3'} border text-left transition-colors ${
        canOpen
          ? 'border-[#c2c6d8] bg-white hover:border-[#0050cb] hover:bg-[#f9fbff]'
          : 'border-[#e2e2e2] bg-[#f9f9f9]'
      }`
  const content = (
    <>
      <div className="flex items-center justify-between gap-2">
        <div className="truncate text-[11px] font-semibold text-[#5f5e5e]">{getTemplateDisplayName(template)}</div>
        {hasSurvey && <InlineSurveyState status={cell?.status} />}
      </div>
      <div className={`${compact ? 'line-clamp-2 text-[10px] leading-4' : 'truncate text-[12px]'} mt-1.5 font-semibold text-[#1a1c1c]`}>
        {cell?.title || '未发起'}
      </div>
      <div className="mt-2 flex items-baseline gap-1">
        <span className={`${compact ? 'text-[16px]' : 'text-[22px]'} font-bold leading-none ${hasScore ? (canOpen ? 'text-[#0050cb]' : 'text-[#1a1c1c]') : hasSurvey && canOpen ? 'text-[#0050cb]' : hasSurvey ? 'text-[#1a1c1c]' : 'text-[#727687]'}`}>
          {hasScore ? formatNullableScore(cell.score) : hasSurvey ? '待评分' : '-'}
        </span>
        {hasScore && <span className="text-[11px] font-medium text-[#5f5e5e]">/{maxTotal}</span>}
      </div>
    </>
  )

  if (!hasSurvey && onQuickCreate) {
    return (
      <button
        type="button"
        onClick={onQuickCreate}
        aria-label={`发起${getTemplateDisplayName(template)}`}
        className={`${className} group cursor-pointer hover:border-[#0050cb] hover:bg-[#f8faff]`}
      >
        {content}
        <div className="mt-2 text-[11px] font-bold text-[#0050cb] group-hover:text-[#003fa4]">+ 快捷发起</div>
      </button>
    )
  }

  if (!canOpen) {
    return <div className={className}>{content}</div>
  }

  return (
    <button type="button" onClick={onClick} className={className}>
      {content}
    </button>
  )
}

function MonthlyTableScoreCell({
  cell,
  showTitle = true,
  canOpenOverride,
  onClick,
  onQuickCreate,
}: {
  cell: any
  showTitle?: boolean
  canOpenOverride?: boolean
  onClick: () => void
  onQuickCreate?: () => void
}) {
  const hasScore = cell && cell.score !== null && cell.score !== undefined
  const hasSurvey = Number(cell?.surveyCount || 0) > 0
  const canOpen = Boolean(hasSurvey && (canOpenOverride ?? cell?.detailAllowed))
  const maxTotal = Number(cell?.rawMaxTotal || 120)
  const accessibleLabel = `${cell?.title || '考核调研'}，${
    hasScore ? `得分 ${formatNullableScore(cell.score)}，满分 ${maxTotal}` : '待评分'
  }，查看详情`
  const content = (
    <div className="min-w-0">
      <div className="flex items-baseline justify-center gap-1">
        <span className={`text-[16px] font-bold ${hasScore ? (canOpen ? 'text-[#0050cb]' : 'text-[#1a1c1c]') : hasSurvey && canOpen ? 'text-[#0050cb]' : hasSurvey ? 'text-[#1a1c1c]' : 'text-[#727687]'}`}>
          {hasScore ? formatNullableScore(cell.score) : hasSurvey ? '待评分' : '-'}
        </span>
        {hasScore && <span className="text-[11px] font-medium text-[#5f5e5e]">/{maxTotal}</span>}
      </div>
      {hasSurvey && showTitle && <div className="mt-1 truncate text-[10px] font-medium text-[#5f5e5e]" title={cell?.title || ''}>{cell?.title}</div>}
    </div>
  )

  if (!hasSurvey && onQuickCreate) {
    return (
      <button
        type="button"
        onClick={onQuickCreate}
        aria-label="快捷发起考核调研"
        className="group inline-flex min-h-12 w-full min-w-[74px] flex-col items-center justify-center text-center transition-colors hover:bg-[#f8faff]"
      >
        {content}
        <span className="mt-1 text-[10px] font-bold text-[#0050cb] group-hover:text-[#003fa4]">+ 发起</span>
      </button>
    )
  }

  if (!canOpen) {
    return <div className="inline-flex min-h-12 w-full min-w-[74px] items-center justify-center text-center">{content}</div>
  }

  return (
    <button
      type="button"
      onClick={onClick}
      aria-label={accessibleLabel}
      className="inline-flex min-h-12 w-full min-w-[74px] items-center justify-center text-center transition-colors hover:text-[#003fa4]"
    >
      {content}
    </button>
  )
}

function EmptyLedger({ title }: { title: string }) {
  return (
    <div className="border border-dashed border-[#c2c6d8] bg-white px-5 py-12 text-center">
      <div className="mx-auto flex h-11 w-11 items-center justify-center rounded-full bg-[#f4f3f3] text-lg font-bold text-[#727687]">0</div>
      <h2 className="mt-4 text-[18px] font-bold text-[#1a1c1c]">{title}</h2>
    </div>
  )
}

function getSurveyStatusMeta(status: unknown) {
  const value = String(status || '').toLowerCase()
  if (value === 'open') return { label: '进行中', dot: 'bg-[#0050cb]', text: 'text-[#0050cb]' }
  if (value === 'closed') return { label: '已结束', dot: 'bg-[#5f5e5e]', text: 'text-[#5f5e5e]' }
  if (value === 'cancelled') return { label: '已撤销', dot: 'bg-[#b42318]', text: 'text-[#b42318]' }
  if (value === 'draft') return { label: '草稿', dot: 'bg-[#b26a00]', text: 'text-[#8a5200]' }
  return { label: '待发布', dot: 'bg-[#8a8a8a]', text: 'text-[#5f5e5e]' }
}

function InlineSurveyState({ status }: { status: unknown }) {
  const meta = getSurveyStatusMeta(status)
  return (
    <span className={`inline-flex shrink-0 items-center gap-1 text-[10px] font-semibold ${meta.text}`}>
      <span className={`h-1.5 w-1.5 rounded-full ${meta.dot}`} />
      {meta.label}
    </span>
  )
}

function MonthlyScoreDetailModal({
  request,
  onClose,
}: {
  request: { month: string; employeeId: string; templateCode: string; positionGroupCode?: string } | null
  onClose: () => void
}) {
  const [portalReady, setPortalReady] = useState(false)
  const dialogRef = useRef<HTMLDivElement | null>(null)
  const closeButtonRef = useRef<HTMLButtonElement | null>(null)
  const detailPath = useMemo(() => {
    if (!request) return null
    const params = new URLSearchParams({
      month: request.month,
      employeeId: request.employeeId,
      templateCode: request.templateCode,
    })
    if (request.positionGroupCode) params.set('positionGroupCode', request.positionGroupCode)
    return `/dashboard/detail?${params.toString()}`
  }, [request])
  const detail = useApi<any>(detailPath, [detailPath])

  useEffect(() => {
    setPortalReady(true)
  }, [])

  useEffect(() => {
    if (!request) return

    const previousOverflow = document.body.style.overflow
    const previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null
    document.body.style.overflow = 'hidden'
    const focusFrame = window.requestAnimationFrame(() => closeButtonRef.current?.focus())

    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        event.preventDefault()
        onClose()
        return
      }
      keepFocusInsideModal(event, dialogRef.current)
    }

    window.addEventListener('keydown', handleKeyDown)
    return () => {
      window.cancelAnimationFrame(focusFrame)
      document.body.style.overflow = previousOverflow
      window.removeEventListener('keydown', handleKeyDown)
      previousFocus?.focus()
    }
  }, [onClose, request])

  if (!request || !portalReady) return null

  const isVisualDetail = Boolean(detail.data?.template?.isVisual || detail.data?.workItems?.length)
  const responseCount = Number(detail.data?.responseCount || detail.data?.participants?.length || 0)
  const primarySurvey = detail.data?.surveys?.[0] || null
  const workflow = detail.data?.workflow || {}

  return createPortal((
    <div
      className="fixed inset-0 z-[1000] flex items-stretch justify-center bg-white p-0 sm:items-center sm:bg-black/40 sm:p-6 sm:backdrop-blur-[2px]"
      onClick={onClose}
      role="presentation"
    >
      <div
        ref={dialogRef}
        className="relative flex h-[100dvh] w-full flex-col overflow-hidden bg-white sm:h-auto sm:max-h-[calc(100dvh-48px)] sm:max-w-2xl sm:rounded-lg sm:shadow-2xl"
        onClick={(event) => event.stopPropagation()}
        role="dialog"
        aria-modal="true"
        aria-labelledby="performance-survey-detail-title"
        tabIndex={-1}
      >
        <div className="sticky top-0 z-10 flex items-start justify-between gap-4 border-b border-[#e2e2e2] bg-white px-4 pb-4 pt-[calc(16px+env(safe-area-inset-top))] sm:px-5 sm:pt-4">
          <div className="min-w-0">
            <div className="flex flex-wrap items-center gap-2 text-[12px] font-semibold text-[#5f5e5e]">
              <span>{formatMonthLabel(detail.data?.month || request.month)}</span>
              <span>·</span>
              <span>{detail.data?.template?.name || '考核明细'}</span>
              {primarySurvey && <InlineSurveyState status={primarySurvey.status} />}
            </div>
            <h2 id="performance-survey-detail-title" className="mt-2 break-words text-[22px] font-bold leading-tight text-[#1a1c1c] sm:text-[24px]">
              {primarySurvey?.title || detail.data?.template?.fullName || '考核明细'}
            </h2>
          </div>
          <button
            ref={closeButtonRef}
            type="button"
            onClick={onClose}
            className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-[28px] font-light leading-none text-[#5f5e5e] outline-none transition-colors hover:bg-[#eeeeee] hover:text-[#1a1c1c] focus-visible:ring-2 focus-visible:ring-[#0050cb] focus-visible:ring-offset-2"
            aria-label="关闭详情"
          >
            ×
          </button>
        </div>

        <div className="flex-1 overflow-y-auto px-4 py-5 sm:px-5">
          {detail.loading && <div className="text-sm font-medium text-[#5f5e5e]">加载中...</div>}
          {detail.error && <DashboardErrorPanel message={detail.error} />}
          {detail.data && (
            <div className="space-y-7">
              <div className="grid grid-cols-2 gap-5 border-b border-[#e2e2e2] pb-5 sm:grid-cols-4">
                <DetailMetaItem label="被评估人" value={detail.data.employee?.displayName || '-'} />
                <DetailMetaItem label="发起人" value={primarySurvey?.creatorName || '-'} />
                <DetailMetaItem label="截止时间" value={primarySurvey?.dueAt ? formatDate(primarySurvey.dueAt) : '未设置'} />
                <DetailMetaItem label={detail.data?.template?.isVisual ? '最终得分' : '当前得分'} value={detail.data.score === null || detail.data.score === undefined ? '待评分' : `${formatNullableScore(detail.data.score)} / ${Number(detail.data.rawMaxTotal || 120)}`} />
              </div>

              <section className="space-y-4">
                <DetailSectionTitle>调研进度</DetailSectionTitle>
                <div className="grid grid-cols-3 border-y border-[#e2e2e2] py-4 text-center">
                  <WorkflowCount label="通知" value={workflow.notifiedCount || 0} total={workflow.assignmentCount || 0} />
                  <WorkflowCount label="已查看" value={workflow.readCount || 0} total={workflow.assignmentCount || 0} />
                  <WorkflowCount label="已评分" value={workflow.submittedCount || responseCount || 0} total={workflow.assignmentCount || 0} />
                </div>
                {Number(workflow.submittedCount || responseCount || 0) > 0 && (
                  Number(workflow.notifiedCount || 0) < Number(workflow.submittedCount || responseCount || 0) ||
                  Number(workflow.readCount || 0) < Number(workflow.submittedCount || responseCount || 0)
                ) && (
                  <p className="border-l-2 border-[#8aaeff] bg-[#f8faff] px-3 py-2 text-[12px] font-medium leading-5 text-[#5f5e5e]">
                    评分已完成，但部分通知或查看状态没有记录，不影响已评分结果。
                  </p>
                )}
                <EvaluatorWorkflowList items={detail.data.evaluators || []} />
              </section>

              {isVisualDetail && (
                <section className="space-y-3">
                  <DetailSectionTitle>视觉评分作品</DetailSectionTitle>
                  {detail.data.workItems?.length > 0 ? (
                    <div className="space-y-3">
                      {detail.data.workItems.map((item: any, index: number) => (
                        <section key={item.id} className="rounded-lg border border-[#e2e2e2] bg-white p-4">
                          <div className="flex items-start justify-between gap-3">
                            <div className="min-w-0">
                              <div className="text-[12px] font-semibold text-[#0050cb]">作品 {index + 1}</div>
                              <h3 className="mt-1 break-words text-[16px] font-bold text-[#1a1c1c]">{item.title}</h3>
                              {item.description && <p className="mt-1 whitespace-pre-wrap text-sm leading-5 text-[#5f5e5e]">{item.description}</p>}
                            </div>
                            <div className="shrink-0 rounded bg-[#f4f3f3] px-3 py-2 text-[18px] font-bold text-[#0050cb]">{formatNullableScore(item.averageScore)}</div>
                          </div>
                          <ImagePreviewGrid images={item.imageGroups || item.imageUrls || []} variant="long" />
                          <ScoreParticipantList items={item.scores || []} />
                        </section>
                      ))}
                    </div>
                  ) : (
                    <div className="rounded-lg border border-dashed border-[#c2c6d8] bg-[#f9f9f9] px-4 py-8 text-center text-sm font-semibold text-[#5f5e5e]">
                      暂无作品图片
                    </div>
                  )}
                </section>
              )}

              <section className="space-y-3">
                <DetailSectionTitle>详细评价内容</DetailSectionTitle>
                <ScoreParticipantList items={detail.data.participants || []} />
              </section>
            </div>
          )}
        </div>
      </div>
    </div>
  ), document.body)
}

function DetailMetaItem({ label, value }: { label: string; value: ReactNode }) {
  return (
    <div className="space-y-1">
      <div className="text-[12px] font-semibold text-[#5f5e5e]">{label}</div>
      <div className="break-words text-[15px] font-semibold text-[#1a1c1c]">{value}</div>
    </div>
  )
}

function DetailSectionTitle({ children }: { children: ReactNode }) {
  return (
    <h3 className="border-b border-[#e2e2e2] pb-1 text-[12px] font-semibold text-[#5f5e5e]">
      {children}
    </h3>
  )
}

function WorkflowCount({ label, value, total }: { label: string; value: number; total: number }) {
  return (
    <div className="border-r border-[#e2e2e2] last:border-r-0">
      <div className="text-[12px] font-semibold text-[#5f5e5e]">{label}</div>
      <div className="mt-1 text-[20px] font-bold text-[#1a1c1c]">
        {value}<span className="ml-1 text-[12px] font-medium text-[#727687]">/ {total}</span>
      </div>
    </div>
  )
}

function WorkflowState({ label, tone = 'muted' }: { label: string; tone?: 'blue' | 'green' | 'red' | 'muted' }) {
  const toneClass = tone === 'green'
    ? 'bg-[#149447]'
    : tone === 'blue'
      ? 'bg-[#0050cb]'
      : tone === 'red'
        ? 'bg-[#ba1a1a]'
        : 'bg-[#8a8a8a]'
  return (
    <span className="inline-flex items-center gap-1.5 whitespace-nowrap text-[11px] font-semibold text-[#5f5e5e]">
      <span className={`h-1.5 w-1.5 rounded-full ${toneClass}`} />
      {label}
    </span>
  )
}

function EvaluatorWorkflowList({ items }: { items: any[] }) {
  if (!items.length) {
    return <div className="border border-dashed border-[#c2c6d8] px-4 py-6 text-center text-sm font-semibold text-[#5f5e5e]">暂无评价人</div>
  }

  return (
    <div className="divide-y divide-[#eeeeee] border-y border-[#eeeeee]">
      {items.map((item) => {
        const noticeStatus = String(item.notification?.status || '')
        const readStatus = String(item.notification?.readStatus || 'unknown')
        const isSubmitted = item.assignmentStatus === 'submitted'
        const hasNoNotificationRecord = isSubmitted && !item.notification
        const notice = hasNoNotificationRecord
          ? { label: '无通知记录', tone: 'muted' as const }
          : noticeStatus === 'succeeded'
          ? { label: '已发送', tone: 'blue' as const }
          : noticeStatus === 'processing' || noticeStatus === 'pending' || noticeStatus === 'retrying'
            ? { label: '发送中', tone: 'muted' as const }
            : noticeStatus === 'skipped' || noticeStatus === 'exhausted'
              ? { label: '发送失败', tone: 'red' as const }
              : { label: '未发起', tone: 'muted' as const }
        const read = hasNoNotificationRecord
          ? { label: '查看状态未知', tone: 'muted' as const }
          : readStatus === 'read'
          ? { label: '已查看', tone: 'green' as const }
          : readStatus === 'unread'
            ? { label: '未查看', tone: 'muted' as const }
            : { label: '查看状态未知', tone: 'muted' as const }
        const submitted = isSubmitted
          ? { label: '已评分', tone: 'green' as const }
          : { label: '待评分', tone: 'muted' as const }

        return (
          <div key={item.id} className="grid gap-3 py-3 sm:grid-cols-[minmax(120px,1fr)_repeat(3,auto)] sm:items-center sm:gap-6">
            <div className="min-w-0">
              <div className="truncate text-[14px] font-bold text-[#1a1c1c]">{item.name}</div>
              {item.submittedAt && <div className="mt-1 text-[11px] text-[#727687]">{formatDate(item.submittedAt)}</div>}
            </div>
            <div className="grid grid-cols-3 gap-3 sm:contents">
              <WorkflowState {...notice} />
              <WorkflowState {...read} />
              <WorkflowState {...submitted} />
            </div>
          </div>
        )
      })}
    </div>
  )
}

function ScoreParticipantList({ items }: { items: any[] }) {
  if (!items.length) {
    return <div className="rounded-lg border border-[#eeeeee] bg-[#f9f9f9] px-4 py-4 text-sm font-semibold text-[#5f5e5e]">暂无评分记录</div>
  }

  return (
    <div className="overflow-hidden rounded-lg border border-[#eeeeee] bg-white">
      {items.map((item) => (
        <div key={item.id} className="border-b border-[#eeeeee] px-4 py-3 last:border-b-0">
          <div className="flex items-start justify-between gap-3">
            <div className="min-w-0 text-sm font-bold text-[#1a1c1c]">
              {item.name}
              {item.countsTowardFinal && (
                <span className="ml-2 inline-flex rounded-full bg-[#e8f0ff] px-2 py-0.5 text-[10px] font-semibold text-[#0050cb]">计入最终分</span>
              )}
            </div>
            <div className="shrink-0 text-right">
              <div className="text-sm font-semibold text-[#1677ff]">
                {formatNullableScore(item.rawScore ?? item.score)}
                <span className="ml-0.5 text-[11px] font-medium text-[#727687]">/{Number(item.rawMaxTotal || 120)}</span>
              </div>
            </div>
          </div>
          {Array.isArray(item.dimensions) && item.dimensions.length > 0 && (
            <div className="mt-3 grid gap-x-5 gap-y-2 border-t border-[#eeeeee] pt-3 sm:grid-cols-2">
              {item.dimensions.map((dimension: any) => (
                <div key={dimension.id} className="flex min-w-0 items-center justify-between gap-3 text-[13px]">
                  <span className="truncate text-[#5f5e5e]">{dimension.title}</span>
                  <span className="shrink-0 font-semibold text-[#1a1c1c]">
                    {formatNullableScore(dimension.score)}
                    <span className="ml-0.5 text-[11px] font-medium text-[#727687]">/{dimension.maxScore}</span>
                  </span>
                </div>
              ))}
            </div>
          )}
          {item.comment && <p className="mt-2 whitespace-pre-wrap text-sm leading-5 text-[#5f5e5e]">{item.comment}</p>}
          {item.submittedAt && <div className="mt-2 text-xs text-[#727687]">{formatDate(item.submittedAt)}</div>}
        </div>
      ))}
    </div>
  )
}

function VisualEvaluatorResultList({
  responses,
  workItems,
  questions,
  template,
}: {
  responses: any[]
  workItems: any[]
  questions: Template['questions']
  template?: Template
}) {
  const evaluators = groupVisualScoresByEvaluator(responses, workItems)

  if (evaluators.length === 0) {
    return <div className="rounded-[12px] bg-[#f8fafc] px-4 py-4 text-sm text-[#667085]">暂无评分记录</div>
  }

  return (
    <div className="grid gap-3">
      {evaluators.map((evaluator) => (
        <section key={evaluator.id} className="overflow-hidden rounded-[14px] border border-[#e5edf6] bg-white">
          <div className="flex items-start justify-between gap-3 border-b border-[#e5edf6] bg-[#f8fafc] px-4 py-3.5">
            <div className="min-w-0">
              <div className="flex flex-wrap items-center gap-2">
                <span className="text-sm font-semibold text-[#101828]">{evaluator.respondentName}</span>
                {['visual_final', 'self_visual_final'].includes(String(evaluator.workflowRole || '')) && (
                  <span className="rounded-full bg-[#e8f0ff] px-2 py-0.5 text-[11px] font-semibold text-[#0050cb]">计入最终分</span>
                )}
                {['self', 'self_visual_final'].includes(String(evaluator.workflowRole || '')) && (
                  <span className="rounded-full bg-[#f0f1f3] px-2 py-0.5 text-[11px] font-semibold text-[#5f5e5e]">自评</span>
                )}
                {evaluator.workflowRole === 'manager' && (
                  <span className="rounded-full bg-[#f0f1f3] px-2 py-0.5 text-[11px] font-semibold text-[#5f5e5e]">主管评分</span>
                )}
              </div>
              {evaluator.createdAt && <div className="mt-1 text-[11px] text-[#98a2b3]">提交于 {formatDate(evaluator.createdAt)}</div>}
            </div>
            <div className="shrink-0 text-right">
              <div className="text-[18px] font-semibold text-[#0052d9]">{formatResultScore(evaluator.totalScore)}</div>
              <div className="text-[11px] font-medium text-[#667085]">总分</div>
            </div>
          </div>

          <div className="divide-y divide-[#edf1f6] px-4">
            {evaluator.workItemScores.map((item, itemIndex) => {
              const itemScore = item.score
              const rawScores = itemScore?.scores && typeof itemScore.scores === 'object'
                ? itemScore.scores as Record<string, unknown>
                : {}
              const dimensions = questions
                .map((question) => ({
                  question,
                  value: rawScores[question.id],
                }))
                .filter(({ value }) => value !== null && value !== undefined && value !== '')

              return (
                <div key={item.workItemId} className="py-3.5">
                  <div className="flex items-start justify-between gap-3">
                    <div className="min-w-0">
                      <div className="text-[11px] font-semibold text-[#667085]">作品 {itemIndex + 1}</div>
                      <div className="mt-0.5 break-words text-sm font-semibold text-[#101828]">{item.workItemTitle}</div>
                    </div>
                    <div className={`shrink-0 text-sm font-semibold ${itemScore ? 'text-[#0052d9]' : 'text-[#98a2b3]'}`}>
                      {itemScore ? `${formatResultScore(itemScore.totalScore)} 分` : '未评分'}
                    </div>
                  </div>
                  {dimensions.length > 0 && (
                    <div className="mt-3 grid gap-x-4 gap-y-2 rounded-[10px] bg-[#f8fafc] px-3 py-2.5 sm:grid-cols-2">
                      {dimensions.map(({ question, value }) => (
                        <div key={question.id} className="flex items-center justify-between gap-3 text-[12px]">
                          <span className="truncate text-[#667085]">{question.title}</span>
                          <span className="shrink-0 font-semibold text-[#344054]">
                            {formatResultScore(value)} / {getQuestionMaxScore(template, question)}
                          </span>
                        </div>
                      ))}
                    </div>
                  )}
                  {itemScore?.comment && <p className="mt-2 whitespace-pre-wrap text-sm leading-6 text-[#475467]">{itemScore.comment}</p>}
                </div>
              )
            })}
          </div>

          {evaluator.comment && (
            <div className="border-t border-[#e5edf6] bg-[#fbfcfe] px-4 py-3">
              <div className="text-[11px] font-semibold text-[#667085]">总体评语</div>
              <p className="mt-1 whitespace-pre-wrap text-sm leading-6 text-[#344054]">{evaluator.comment}</p>
            </div>
          )}
        </section>
      ))}
    </div>
  )
}

function MetricCard({ label, value }: { label: string; value: ReactNode }) {
  return (
    <div className="rounded-[14px] border border-[#e5eaf2] bg-white px-4 py-4 shadow-[0_8px_18px_rgba(45,43,80,0.05)] dark:border-gray-700 dark:bg-gray-900">
      <div className="text-[13px] font-semibold text-[#667085] dark:text-gray-400">{label}</div>
      <div className="mt-2 text-[28px] font-semibold leading-none text-[#101828] dark:text-white">{value}</div>
    </div>
  )
}

function TemplateSectionCard({ item }: { item: any }) {
  return (
    <div className="rounded-[14px] border border-[#e5eaf2] bg-white px-4 py-4 shadow-[0_8px_18px_rgba(45,43,80,0.05)] dark:border-gray-700 dark:bg-gray-900">
      <div className="truncate text-[15px] font-semibold text-[#101828] dark:text-white">{item.name}</div>
      <div className="mt-3 flex items-end justify-between gap-3">
        <div>
          <div className="text-[26px] font-semibold leading-none text-[#101828] dark:text-white">{item.count || 0}</div>
          <div className="mt-1 text-xs font-medium text-[#667085] dark:text-gray-400">调研</div>
        </div>
        <div className="text-right">
          <div className="text-[20px] font-semibold leading-none text-[#1677ff]">{formatNullableScore(item.averageScore)}</div>
          <div className="mt-1 text-xs font-medium text-[#667085] dark:text-gray-400">均分</div>
        </div>
      </div>
      <div className="mt-3 text-xs font-medium text-[#667085] dark:text-gray-400">
        已完成 {item.completedCount || 0} · 待完成 {item.pendingCount || 0}
      </div>
    </div>
  )
}

function getTemplateDisplayName(template: any) {
  const name = String(template?.shortName || template?.name || '')
  return name
    .replace(/满意度调研/g, '')
    .replace(/考核/g, '')
    .replace(/\s*[·\-]\s*\d+%/g, '')
    .replace(/\s*\d+%/g, '')
    .trim() || name || '-'
}

function formatMonthLabel(value: unknown) {
  const text = String(value || '')
  const match = text.match(/^(\d{4})-(\d{2})/)
  if (!match) return text
  return `${match[1]}年${Number(match[2])}月`
}

function formatNullableScore(value: unknown) {
  if (value === null || value === undefined || value === '') return '-'
  const numberValue = Number(value)
  if (!Number.isFinite(numberValue)) return '-'
  return Number.isInteger(numberValue) ? String(numberValue) : numberValue.toFixed(1)
}

function SingleEmployeeFilter({
  value,
  onChange,
}: {
  value: Employee | null
  onChange: (value: Employee | null) => void
}) {
  const [keyword, setKeyword] = useState('')
  const [items, setItems] = useState<Employee[]>([])
  const [open, setOpen] = useState(false)
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    const trimmed = keyword.trim()
    if (!trimmed) {
      setItems([])
      setOpen(false)
      return
    }
    const timer = window.setTimeout(async () => {
      setLoading(true)
      setOpen(true)
      try {
        const params = new URLSearchParams({ search: trimmed, limit: '20', purpose: 'evaluator' })
        setItems(await apiRequest<Employee[]>(`/employees?${params.toString()}`))
      } finally {
        setLoading(false)
      }
    }, 250)
    return () => window.clearTimeout(timer)
  }, [keyword])

  return (
    <div className="relative">
      <input
        value={keyword}
        onChange={(event) => setKeyword(event.target.value)}
        onFocus={() => keyword.trim() && setOpen(true)}
        placeholder={value ? value.displayName : '筛选人员'}
        className="h-10 w-full rounded border border-[#e2e2e2] bg-white px-3 text-[13px] font-semibold text-[#1a1c1c] outline-none transition-colors focus:border-[#0050cb]"
      />
      {value && (
        <button
          type="button"
          onClick={() => {
            onChange(null)
            setKeyword('')
          }}
          className="absolute right-2 top-1/2 -translate-y-1/2 px-2 py-1 text-[12px] font-semibold text-[#5f5e5e] hover:text-[#1a1c1c]"
        >
          清除
        </button>
      )}
      {open && (
        <div className="absolute z-20 mt-1 max-h-56 w-full overflow-y-auto border border-[#e2e2e2] bg-white shadow-[0_10px_24px_rgba(0,0,0,0.08)]">
          {loading ? (
            <div className="px-3 py-2 text-sm text-[#5f5e5e]">搜索中...</div>
          ) : items.length === 0 ? (
            <div className="px-3 py-2 text-sm text-[#5f5e5e]">无匹配人员</div>
          ) : (
            items.map((employee) => (
              <button
                key={employee.id}
                type="button"
                onClick={() => {
                  onChange(employee)
                  setKeyword('')
                  setOpen(false)
                }}
                className="block w-full px-3 py-2 text-left text-sm hover:bg-[#f9f9f9]"
              >
                <div className="font-semibold text-[#1a1c1c]">{employee.displayName}</div>
                <div className="mt-0.5 truncate text-xs text-[#5f5e5e]">{employee.departmentName || ''}</div>
              </button>
            ))
          )}
        </div>
      )}
    </div>
  )
}

function PendingList({ items }: { items: any[] }) {
  if (items.length === 0) {
    return <EmptyState title="暂无待处理" description="当前没有需要你评分的调研" />
  }

  return (
    <>
      <div className="grid gap-3 md:hidden">
        {items.map((item) => (
          <article key={item.assignmentId} className="rounded-lg border border-[#e2e2e2] bg-white p-4">
            <div className="flex items-start justify-between gap-3">
              <div className="min-w-0">
                <h2 className="break-words text-[16px] font-bold leading-snug text-[#1a1c1c]">{item.title}</h2>
                <div className="mt-2 space-y-1 text-[12px] font-medium leading-5 text-[#5f5e5e]">
                  <p className="break-words">评价对象：{item.targetName}</p>
                  <p>截止：{item.dueAt ? formatDate(item.dueAt) : '无截止'}</p>
                </div>
              </div>
              <span className="shrink-0 rounded-full border border-[#b8d0ff] bg-[#edf4ff] px-2.5 py-1 text-[12px] font-bold text-[#0052d9]">待填写</span>
            </div>
            <div className="mt-4 flex justify-end">
              <Link
                href={`/performance-survey/survey/${item.surveyId}?targetId=${item.targetId}`}
                aria-label={`去评价：${item.title}`}
                className="inline-flex min-h-11 items-center justify-center rounded bg-[#0050cb] px-5 text-sm font-bold text-white hover:bg-[#003fa4] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0050cb] focus-visible:ring-offset-2"
              >
                去评价
              </Link>
            </div>
          </article>
        ))}
      </div>

      <div className="hidden overflow-x-auto rounded border border-[#c2c6d8] bg-white md:block">
        <table className="w-full min-w-[720px] border-collapse text-left">
          <thead>
            <tr className="border-b border-[#c2c6d8] bg-[#f4f3f3] text-[12px] font-bold text-[#5f5e5e]">
              <th scope="col" className="px-4 py-3">调研</th>
              <th scope="col" className="w-[180px] px-4 py-3">评价对象</th>
              <th scope="col" className="w-[180px] px-4 py-3">截止</th>
              <th scope="col" className="w-[110px] px-4 py-3">状态</th>
              <th scope="col" className="w-[110px] px-4 py-3 text-right">操作</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-[#c2c6d8]">
            {items.map((item) => (
              <tr key={item.assignmentId} className="text-sm text-[#1a1c1c] hover:bg-[#fcfcfc]">
                <td className="px-4 py-4 font-bold">{item.title}</td>
                <td className="px-4 py-4 text-[13px] font-medium text-[#5f5e5e]">{item.targetName}</td>
                <td className="px-4 py-4 text-[13px] font-medium text-[#5f5e5e]">{item.dueAt ? formatDate(item.dueAt) : '无截止'}</td>
                <td className="px-4 py-4">
                  <span className="inline-flex rounded-full border border-[#b8d0ff] bg-[#edf4ff] px-2.5 py-1 text-[12px] font-bold text-[#0052d9]">待填写</span>
                </td>
                <td className="px-4 py-4 text-right">
                  <Link
                    href={`/performance-survey/survey/${item.surveyId}?targetId=${item.targetId}`}
                    aria-label={`去评价：${item.title}`}
                    className="inline-flex min-h-9 items-center justify-center rounded bg-[#0050cb] px-4 text-[13px] font-bold text-white hover:bg-[#003fa4] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0050cb] focus-visible:ring-offset-2"
                  >
                    去评价
                  </Link>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  )
}

function SubmittedList({ items }: { items: any[] }) {
  if (items.length === 0) {
    return <EmptyState title="暂无已处理" description="完成评分后，记录会显示在这里" />
  }

  return (
    <>
      <div className="grid gap-3 md:hidden">
        {items.map((item) => (
          <article key={item.assignmentId} className="rounded-lg border border-[#e2e2e2] bg-white p-4">
            <div className="flex items-start justify-between gap-3">
              <div className="min-w-0">
                <h2 className="break-words text-[16px] font-bold leading-snug text-[#1a1c1c]">{item.title}</h2>
                <div className="mt-2 space-y-1 text-[12px] font-medium leading-5 text-[#5f5e5e]">
                  <p className="break-words">评价对象：{item.targetName}</p>
                  <p>提交：{item.submittedAt ? formatDate(item.submittedAt) : '已提交'}</p>
                </div>
              </div>
              <span className="shrink-0 rounded-full border border-[#b9ead0] bg-[#ecfdf3] px-2.5 py-1 text-[12px] font-bold text-[#039855]">已提交</span>
            </div>
            <div className="mt-4 flex justify-end">
              <Link
                href={`/performance-survey/survey/${item.surveyId}?targetId=${item.targetId}`}
                aria-label={`查看详情：${item.title}`}
                className="inline-flex min-h-11 items-center justify-center rounded border border-[#c2c6d8] bg-white px-5 text-sm font-bold text-[#1a1c1c] hover:border-[#0050cb] hover:text-[#0050cb] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0050cb] focus-visible:ring-offset-2"
              >
                查看详情
              </Link>
            </div>
          </article>
        ))}
      </div>

      <div className="hidden overflow-x-auto rounded border border-[#c2c6d8] bg-white md:block">
        <table className="w-full min-w-[720px] border-collapse text-left">
          <thead>
            <tr className="border-b border-[#c2c6d8] bg-[#f4f3f3] text-[12px] font-bold text-[#5f5e5e]">
              <th scope="col" className="px-4 py-3">调研</th>
              <th scope="col" className="w-[180px] px-4 py-3">评价对象</th>
              <th scope="col" className="w-[180px] px-4 py-3">提交时间</th>
              <th scope="col" className="w-[110px] px-4 py-3">状态</th>
              <th scope="col" className="w-[120px] px-4 py-3 text-right">操作</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-[#c2c6d8]">
            {items.map((item) => (
              <tr key={item.assignmentId} className="text-sm text-[#1a1c1c] hover:bg-[#fcfcfc]">
                <td className="px-4 py-4 font-bold">{item.title}</td>
                <td className="px-4 py-4 text-[13px] font-medium text-[#5f5e5e]">{item.targetName}</td>
                <td className="px-4 py-4 text-[13px] font-medium text-[#5f5e5e]">{item.submittedAt ? formatDate(item.submittedAt) : '已提交'}</td>
                <td className="px-4 py-4">
                  <span className="inline-flex rounded-full border border-[#b9ead0] bg-[#ecfdf3] px-2.5 py-1 text-[12px] font-bold text-[#039855]">已提交</span>
                </td>
                <td className="px-4 py-4 text-right">
                  <Link
                    href={`/performance-survey/survey/${item.surveyId}?targetId=${item.targetId}`}
                    aria-label={`查看详情：${item.title}`}
                    className="inline-flex min-h-9 items-center justify-center rounded border border-[#c2c6d8] bg-white px-4 text-[13px] font-bold text-[#1a1c1c] hover:border-[#0050cb] hover:text-[#0050cb] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0050cb] focus-visible:ring-offset-2"
                  >
                    查看详情
                  </Link>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  )
}

function CreatedList({
  items,
  onRefresh,
  emptyTitle = '还没有发起过考核调研',
  resultBackHref = '/performance-survey?tab=manage',
}: {
  items: any[]
  onRefresh: () => Promise<void>
  emptyTitle?: string
  resultBackHref?: string
}) {
  const [busyId, setBusyId] = useState<string | null>(null)
  const [actionErrors, setActionErrors] = useState<Record<string, string>>({})

  const changeStatus = async (id: string, status: string) => {
    const actionLabel = status === 'open' ? '发布' : '关闭'
    setBusyId(id)
    setActionErrors((current) => {
      if (!current[id]) return current
      const next = { ...current }
      delete next[id]
      return next
    })
    try {
      await apiRequest(`/surveys/${id}`, {
        method: 'PATCH',
        body: JSON.stringify({ status }),
      })
      await onRefresh()
    } catch (error) {
      const message = error instanceof Error ? error.message : `${actionLabel}失败，请稍后重试`
      setActionErrors((current) => ({
        ...current,
        [id]: `${actionLabel}失败：${message}`,
      }))
    } finally {
      setBusyId(null)
    }
  }

  const cancelSurvey = async (item: any) => {
    const reason = window.prompt('请输入撤销原因（必填）')?.trim()
    if (!reason) return
    if (!window.confirm(`确认撤销“${item.title}”吗？\n\n撤销原因：${reason}`)) return

    setBusyId(item.id)
    try {
      await apiRequest(`/surveys/${item.id}/cancel`, {
        method: 'POST',
        body: JSON.stringify({ reason }),
      })
      await onRefresh()
    } catch (error) {
      window.alert(error instanceof Error ? error.message : '撤销失败，请稍后重试')
    } finally {
      setBusyId(null)
    }
  }

  if (items.length === 0) {
    return <EmptyState title={emptyTitle} description="发起调研后，可在这里查看进度和结果" />
  }

  return (
    <>
      <div className="grid gap-3 lg:hidden">
        {items.map((item) => {
          const targetCount = Number(item.counts?.targets || 0)
          const assignmentCount = Number(item.counts?.assignments || 0)
          const responseCount = Number(item.counts?.responses || 0)
          const progressText = assignmentCount > 0
            ? `已提交 ${responseCount}/${assignmentCount}`
            : '尚未生成评价任务'
          const actionError = actionErrors[item.id]
          const needsWorkItemUpload = actionError?.includes('作品尚未上传完整')

          return (
            <article
              key={item.id}
              className="rounded-lg border border-[#e2e2e2] bg-white p-4"
            >
              <div className="flex items-start justify-between gap-3">
                <div className="min-w-0">
                  <h2 className="break-words text-[16px] font-bold leading-snug text-[#1a1c1c]">
                    {item.title}
                  </h2>
                  <div className="mt-2 space-y-1 text-[12px] font-medium leading-5 text-[#5f5e5e]">
                    <p className="break-words">{item.departmentName || '未指定部门'}</p>
                    <p>对象 {targetCount} 人 · 评价任务 {assignmentCount} 份</p>
                    <p>{progressText} · {item.dueAt ? `截止 ${formatDate(item.dueAt)}` : '无截止'}</p>
                  </div>
                </div>
                <DashboardStatusBadge status={item.status} />
              </div>

              <div className="mt-6 flex flex-wrap justify-end gap-2">
                {item.status === 'draft' && (
                  <Link
                    href={`/performance-survey?tab=manage&adminWorkspace=launch&draftId=${encodeURIComponent(item.id)}`}
                    aria-label={`继续编辑草稿：${item.title}`}
                    className="inline-flex min-h-11 items-center justify-center rounded border border-[#c2c6d8] bg-white px-4 text-sm font-bold text-[#1a1c1c] hover:border-[#0050cb] hover:text-[#0050cb] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0050cb] focus-visible:ring-offset-2"
                  >
                    继续编辑
                  </Link>
                )}
                {item.status === 'draft' && (
                  <button
                    type="button"
                    disabled={busyId === item.id}
                    onClick={() => changeStatus(item.id, 'open')}
                    aria-label={`发布调研：${item.title}`}
                    className="min-h-11 rounded border border-[#b8d0ff] bg-[#edf4ff] px-4 text-sm font-bold text-[#0050cb] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0050cb] focus-visible:ring-offset-2 disabled:opacity-50"
                  >
                    {busyId === item.id ? '发布中...' : '发布'}
                  </button>
                )}
                {item.status !== 'closed' && item.status !== 'cancelled' && (
                  <button
                    type="button"
                    disabled={busyId === item.id}
                    onClick={() => changeStatus(item.id, 'closed')}
                    aria-label={`关闭调研：${item.title}`}
                    className="min-h-11 rounded border border-[#c2c6d8] bg-white px-4 text-sm font-bold text-[#1a1c1c] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0050cb] focus-visible:ring-offset-2 disabled:opacity-50"
                  >
                    {busyId === item.id ? '处理中...' : '关闭'}
                  </button>
                )}
                {item.canCancel && (
                  <button
                    type="button"
                    disabled={busyId === item.id}
                    onClick={() => cancelSurvey(item)}
                    aria-label={`撤销调研：${item.title}`}
                    className="min-h-11 rounded border border-[#f0b8b8] bg-white px-4 text-sm font-bold text-[#b42318] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#b42318] focus-visible:ring-offset-2 disabled:opacity-50"
                  >
                    撤销
                  </button>
                )}
                {item.status === 'closed' && item.personalTargetId && (
                  <Link
                    href={`/performance-survey/results/${item.id}?targetId=${encodeURIComponent(item.personalTargetId)}&back=${encodeURIComponent(resultBackHref)}`}
                    aria-label={`查看结果：${item.title}`}
                    className="inline-flex min-h-11 items-center justify-center rounded bg-[#0050cb] px-5 text-sm font-bold text-white hover:bg-[#003fa4] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0050cb] focus-visible:ring-offset-2"
                  >
                    查看结果
                  </Link>
                )}
              </div>
              {actionError && (
                <div
                  role="alert"
                  className="mt-3 rounded border border-[#f0b8b8] bg-[#fff5f5] px-3 py-2 text-[13px] font-medium leading-5 text-[#b42318]"
                >
                  {actionError}
                  {needsWorkItemUpload && (
                    <Link
                      href={`/performance-survey/survey/${item.id}`}
                      className="ml-2 inline-flex min-h-8 items-center rounded border border-[#f0b8b8] bg-white px-2.5 font-bold text-[#b42318] underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#b42318] focus-visible:ring-offset-2"
                    >
                      继续上传作品
                    </Link>
                  )}
                </div>
              )}
            </article>
          )
        })}
      </div>

      <div className="hidden overflow-x-auto rounded border border-[#c2c6d8] bg-white lg:block">
        <table className="w-full min-w-[920px] border-collapse text-left">
          <thead>
            <tr className="border-b border-[#c2c6d8] bg-[#f4f3f3] text-[12px] font-bold text-[#5f5e5e]">
              <th scope="col" className="px-4 py-3">调研</th>
              <th scope="col" className="w-[110px] px-4 py-3">状态</th>
              <th scope="col" className="w-[210px] px-4 py-3">完成进度</th>
              <th scope="col" className="w-[180px] px-4 py-3">截止</th>
              <th scope="col" className="w-[270px] px-4 py-3 text-right">操作</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-[#c2c6d8]">
            {items.map((item) => {
              const targetCount = Number(item.counts?.targets || 0)
              const assignmentCount = Number(item.counts?.assignments || 0)
              const responseCount = Number(item.counts?.responses || 0)
              const actionError = actionErrors[item.id]
              const needsWorkItemUpload = actionError?.includes('作品尚未上传完整')

              return (
                <tr key={item.id} className="text-sm text-[#1a1c1c] hover:bg-[#fcfcfc]">
                  <td className="px-4 py-4">
                    <div className="font-bold">{item.title}</div>
                    <div className="mt-1 text-[12px] font-medium text-[#5f5e5e]">{item.departmentName || '未指定部门'}</div>
                  </td>
                  <td className="px-4 py-4"><DashboardStatusBadge status={item.status} /></td>
                  <td className="px-4 py-4">
                    <div className="text-[13px] font-bold text-[#1a1c1c]">
                      {assignmentCount > 0 ? `已提交 ${responseCount}/${assignmentCount}` : '尚未生成评价任务'}
                    </div>
                    <div className="mt-1 text-[12px] font-medium text-[#5f5e5e]">对象 {targetCount} 人 · 评价任务 {assignmentCount} 份</div>
                  </td>
                  <td className="px-4 py-4 text-[13px] font-medium text-[#5f5e5e]">{item.dueAt ? formatDate(item.dueAt) : '无截止'}</td>
                  <td className="px-4 py-4">
                    <div className="flex flex-wrap justify-end gap-2">
                      {item.status === 'draft' && (
                        <Link
                          href={`/performance-survey?tab=manage&adminWorkspace=launch&draftId=${encodeURIComponent(item.id)}`}
                          aria-label={`继续编辑草稿：${item.title}`}
                          className="inline-flex min-h-9 items-center justify-center rounded border border-[#c2c6d8] bg-white px-3 text-[13px] font-bold text-[#1a1c1c] hover:border-[#0050cb] hover:text-[#0050cb] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0050cb] focus-visible:ring-offset-2"
                        >
                          继续编辑
                        </Link>
                      )}
                      {item.status === 'draft' && (
                        <button
                          type="button"
                          disabled={busyId === item.id}
                          onClick={() => changeStatus(item.id, 'open')}
                          aria-label={`发布调研：${item.title}`}
                          className="min-h-9 rounded border border-[#b8d0ff] bg-[#edf4ff] px-3 text-[13px] font-bold text-[#0050cb] hover:bg-[#dae8ff] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0050cb] focus-visible:ring-offset-2 disabled:opacity-50"
                        >
                          {busyId === item.id ? '发布中...' : '发布'}
                        </button>
                      )}
                      {item.status !== 'closed' && item.status !== 'cancelled' && (
                        <button
                          type="button"
                          disabled={busyId === item.id}
                          onClick={() => changeStatus(item.id, 'closed')}
                          aria-label={`关闭调研：${item.title}`}
                          className="min-h-9 rounded border border-[#c2c6d8] bg-white px-3 text-[13px] font-bold text-[#1a1c1c] hover:border-[#0050cb] hover:text-[#0050cb] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0050cb] focus-visible:ring-offset-2 disabled:opacity-50"
                        >
                          {busyId === item.id ? '处理中...' : '关闭'}
                        </button>
                      )}
                      {item.canCancel && (
                        <button
                          type="button"
                          disabled={busyId === item.id}
                          onClick={() => cancelSurvey(item)}
                          aria-label={`撤销调研：${item.title}`}
                          className="min-h-9 rounded border border-[#f0b8b8] bg-white px-3 text-[13px] font-bold text-[#b42318] hover:bg-[#fff5f5] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#b42318] focus-visible:ring-offset-2 disabled:opacity-50"
                        >
                          撤销
                        </button>
                      )}
                      {item.status === 'closed' && item.personalTargetId && (
                        <Link
                          href={`/performance-survey/results/${item.id}?targetId=${encodeURIComponent(item.personalTargetId)}&back=${encodeURIComponent(resultBackHref)}`}
                          aria-label={`查看结果：${item.title}`}
                          className="inline-flex min-h-9 items-center justify-center rounded bg-[#0050cb] px-3 text-[13px] font-bold text-white hover:bg-[#003fa4] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0050cb] focus-visible:ring-offset-2"
                        >
                          查看结果
                        </Link>
                      )}
                    </div>
                    {actionError && (
                      <div
                        role="alert"
                        className="mt-2 rounded border border-[#f0b8b8] bg-[#fff5f5] px-3 py-2 text-left text-[12px] font-medium leading-5 text-[#b42318]"
                      >
                        {actionError}
                        {needsWorkItemUpload && (
                          <Link
                            href={`/performance-survey/survey/${item.id}`}
                            className="ml-2 inline-flex min-h-8 items-center rounded border border-[#f0b8b8] bg-white px-2.5 font-bold text-[#b42318] underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#b42318] focus-visible:ring-offset-2"
                          >
                            继续上传作品
                          </Link>
                        )}
                      </div>
                    )}
                  </td>
                </tr>
              )
            })}
          </tbody>
        </table>
      </div>
    </>
  )
}

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

function getDepartmentFilterValue(department: DepartmentOption) {
  return department.value || department.departmentPath || department.departmentName || department.name
}

function getDepartmentFilterLabel(department: DepartmentOption) {
  return department.fullPath || department.departmentPath || department.departmentName || department.name
}

function ManagedSurveyList({
  canManage,
  departments,
  refreshKey,
}: {
  canManage: boolean
  departments: DepartmentOption[]
  refreshKey: number
}) {
  const router = useRouter()
  const searchParams = useSearchParams()
  const [month, setMonth] = useState(searchParams.get('month') || getCurrentMonthValue())
  const [department, setDepartment] = useState(searchParams.get('department') || '')
  const managedPath = useMemo(() => {
    const params = new URLSearchParams()
    if (month) params.set('month', month)
    if (department) params.set('department', department)
    const query = params.toString()
    return `/surveys${query ? `?${query}` : ''}`
  }, [month, department])
  const state = useApi<any>(canManage ? managedPath : null, [canManage, managedPath, refreshKey])
  const resultBackHref = useMemo(() => {
    const params = new URLSearchParams()
    params.set('tab', 'manage')
    if (month) params.set('month', month)
    if (department) params.set('department', department)
    return `/performance-survey?${params.toString()}`
  }, [month, department])

  const updateFilterUrl = (nextMonth: string, nextDepartment: string) => {
    const params = new URLSearchParams(searchParams.toString())
    params.set('tab', 'manage')
    if (nextMonth) params.set('month', nextMonth)
    else params.delete('month')
    if (nextDepartment) params.set('department', nextDepartment)
    else params.delete('department')
    router.replace(`/performance-survey?${params.toString()}`, { scroll: false })
  }

  const surveys = state.data?.managed || []

  return (
    <section className="rounded-[14px] bg-white px-4 py-4 shadow-[0_10px_24px_rgba(45,43,80,0.07)] dark:border dark:border-gray-700 dark:bg-gray-900">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <h2 className="text-[18px] font-semibold text-gray-900 dark:text-white">架构调研</h2>
        <div className="grid gap-2 sm:grid-cols-[minmax(220px,320px)_150px_auto]">
          <DepartmentFilterTree
            departments={departments}
            value={department}
            onChange={(nextDepartment) => {
              setDepartment(nextDepartment)
              updateFilterUrl(month, nextDepartment)
            }}
          />
          <input
            type="month"
            value={month}
            onChange={(event) => {
              const nextMonth = event.target.value
              setMonth(nextMonth)
              updateFilterUrl(nextMonth, department)
            }}
            className="rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-900 dark:text-white"
          />
          <button
            type="button"
            onClick={() => {
              const nextMonth = getCurrentMonthValue()
              setMonth(nextMonth)
              updateFilterUrl(nextMonth, department)
            }}
            className="rounded-lg border border-gray-300 px-3 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-800"
          >
            当月
          </button>
        </div>
      </div>
      <div className="mt-4">
        {state.loading && <DashboardPanel>加载中...</DashboardPanel>}
        {state.error && <DashboardErrorPanel message={state.error} />}
        {state.data && <CreatedList items={surveys} onRefresh={state.refresh} emptyTitle="暂无架构调研" resultBackHref={resultBackHref} />}
      </div>
    </section>
  )
}

function DepartmentFilterTree({
  departments,
  value,
  onChange,
}: {
  departments: DepartmentOption[]
  value: string
  onChange: (value: string) => void
}) {
  const [open, setOpen] = useState(false)
  const [keyword, setKeyword] = useState('')
  const [expanded, setExpanded] = useState<Set<string>>(new Set())
  const selectedLabel = useMemo(() => {
    if (!value) return '全部组织'
    const selected = departments.find((department) => String(getDepartmentFilterValue(department) || '') === value)
    return selected ? getDepartmentFilterLabel(selected) : value
  }, [departments, value])

  const { roots, childrenByParent, visibleIds } = useMemo(() => {
    const normalizedKeyword = keyword.trim().toLowerCase()
    const byId = new Map<string, DepartmentOption>()
    const children = new Map<string, DepartmentOption[]>()

    departments.forEach((department) => {
      byId.set(department.id, department)
      const parentKey = department.parentId || ''
      const list = children.get(parentKey) || []
      list.push(department)
      children.set(parentKey, list)
    })

    children.forEach((list) => {
      list.sort((a, b) => {
        const countDiff = (b.employeeCount || 0) - (a.employeeCount || 0)
        if (countDiff !== 0) return countDiff
        return a.name.localeCompare(b.name, 'zh-CN')
      })
    })

    const matchedIds = new Set<string>()
    if (normalizedKeyword) {
      departments.forEach((department) => {
        const haystack = [
          department.name,
          department.parentName,
          department.departmentName,
          department.departmentPath,
          department.fullPath,
        ].filter(Boolean)
        if (!matchesPickerSearch(normalizedKeyword, haystack)) return

        let current: DepartmentOption | undefined = department
        while (current) {
          matchedIds.add(current.id)
          current = current.parentId ? byId.get(current.parentId) : undefined
        }
      })
    }

    return {
      roots: children.get('') || [],
      childrenByParent: children,
      visibleIds: matchedIds,
    }
  }, [departments, keyword])

  const toggle = (id: string) => {
    setExpanded((current) => {
      const next = new Set(current)
      if (next.has(id)) next.delete(id)
      else next.add(id)
      return next
    })
  }

  const choose = (nextValue: string) => {
    onChange(nextValue)
    setOpen(false)
    setKeyword('')
  }

  const renderNode = (department: DepartmentOption, depth = 0): ReactNode => {
    const children = childrenByParent.get(department.id) || []
    const hasChildren = children.length > 0
    const isExpanded = expanded.has(department.id) || Boolean(keyword.trim())
    const isVisible = !keyword.trim() || visibleIds.has(department.id)
    const optionValue = String(getDepartmentFilterValue(department) || '')
    const selectable = Boolean(optionValue)
    const selected = selectable && optionValue === value
    if (!isVisible) return null

    return (
      <div key={department.id}>
        <div
          className={`flex min-h-11 items-center gap-1 rounded px-1 py-1 text-sm ${
            selected ? 'bg-[#dae1ff] text-[#0050cb]' : 'text-[#1a1c1c] hover:bg-[#f9f9f9]'
          }`}
          style={{ paddingLeft: `${8 + depth * 18}px` }}
        >
          <button
            type="button"
            onClick={() => hasChildren && toggle(department.id)}
            className={`flex h-9 w-9 shrink-0 items-center justify-center rounded border text-sm ${
              hasChildren
                ? 'border-[#e2e2e2] text-[#5f5e5e] hover:bg-[#f4f3f3]'
                : 'border-transparent text-transparent'
            }`}
            aria-label={hasChildren ? `${isExpanded ? '收起' : '展开'}${department.name}` : undefined}
            disabled={!hasChildren}
          >
            {hasChildren ? (isExpanded ? '-' : '+') : ''}
          </button>
          <button
            type="button"
            disabled={!selectable}
            onClick={() => selectable && choose(optionValue)}
            className="min-h-9 min-w-0 flex-1 truncate rounded px-2 text-left font-medium disabled:cursor-default"
          >
            {department.name}
          </button>
          {selected && <span className="text-xs font-semibold">已选</span>}
        </div>
        {hasChildren && isExpanded && children.map((child) => renderNode(child, depth + 1))}
      </div>
    )
  }

  return (
    <div className="relative">
      <button
        type="button"
        onClick={() => setOpen((current) => !current)}
        aria-expanded={open}
        aria-haspopup="dialog"
        className="flex h-10 w-full items-center justify-between gap-2 rounded border border-[#eeeeee] bg-white px-3 text-left text-[13px] font-semibold text-[#1a1c1c] outline-none transition-colors hover:border-[#c2c6d8]"
      >
        <span className="truncate">{selectedLabel}</span>
        <span className="text-xs text-[#5f5e5e]">{open ? '收起' : '选择'}</span>
      </button>
      {open && (
        <div className="absolute left-0 right-0 z-30 mt-2 border border-[#eeeeee] bg-white p-2 shadow-[0_10px_28px_rgba(0,0,0,0.08)]" role="dialog" aria-label="选择组织">
          <input
            value={keyword}
            onChange={(event) => setKeyword(event.target.value)}
            placeholder="搜索组织"
            className="mb-2 h-9 w-full rounded border border-[#eeeeee] px-3 text-sm text-[#1a1c1c] outline-none focus:border-[#0050cb]"
          />
          <button
            type="button"
            onClick={() => choose('')}
            className={`mb-1 flex min-h-9 w-full items-center rounded px-3 text-left text-sm font-semibold ${
              !value ? 'bg-[#dae1ff] text-[#0050cb]' : 'text-[#1a1c1c] hover:bg-[#f9f9f9]'
            }`}
          >
            全部组织
          </button>
          <div className="max-h-72 overflow-y-auto">
            {roots.map((department) => renderNode(department))}
          </div>
        </div>
      )}
    </div>
  )
}

type PerformanceSurveyAdminWorkspace =
  | 'overview'
  | 'launch'
  | 'positions'
  | 'people'
  | 'templates'
  | 'operations'

const PERFORMANCE_SURVEY_ADMIN_WORKSPACES: PerformanceSurveyAdminWorkspace[] = [
  'overview',
  'launch',
  'positions',
  'people',
  'templates',
  'operations',
]

function ManagePanel({
  currentEmployee,
  isSystemAdmin,
  configurationDirty,
  onConfigurationDirtyChange,
}: {
  currentEmployee: Employee | null
  isSystemAdmin: boolean
  configurationDirty: boolean
  onConfigurationDirtyChange: (dirty: boolean) => void
}) {
  const router = useRouter()
  const searchParams = useSearchParams()
  const [message, setMessage] = useState<string | null>(null)
  const {
    confirmAction: confirmManageNavigation,
    confirmActionDialog: manageNavigationDialog,
  } = useConfirmActionDialog()
  const requestedWorkspaceValue = String(searchParams.get('adminWorkspace') || '').trim()
  const requestedWorkspace = (
    requestedWorkspaceValue === 'plans' ? 'positions' : requestedWorkspaceValue
  ) as PerformanceSurveyAdminWorkspace
  const requestedAdminMonth = String(searchParams.get('adminMonth') || '').trim()
  const adminMonth = /^\d{4}-\d{2}$/.test(requestedAdminMonth) ? requestedAdminMonth : getCurrentMonthValue()
  const initialWorkspace = isSystemAdmin && PERFORMANCE_SURVEY_ADMIN_WORKSPACES.includes(requestedWorkspace)
    ? requestedWorkspace
    : isSystemAdmin ? 'overview' : 'launch'
  const [workspace, setWorkspace] = useState<PerformanceSurveyAdminWorkspace>(initialWorkspace)
  const isLaunchWorkspace = workspace === 'launch'
  const departments = useApi<DepartmentOption[]>(
    isLaunchWorkspace ? '/departments?purpose=evaluator' : null,
    [isLaunchWorkspace],
  )
  const surveys = useApi<any>(
    isLaunchWorkspace ? '/surveys' : null,
    [isLaunchWorkspace],
  )
  const notifications = useApi<any[]>(
    isSystemAdmin && workspace === 'operations' ? '/admin/notifications?limit=50' : null,
    [workspace, isSystemAdmin],
  )
  const notificationStatus = useApi<any>(
    isSystemAdmin && workspace === 'operations' ? '/admin/notifications/status' : null,
    [workspace, isSystemAdmin],
  )
  const confirmLeaveConfiguration = useCallback(async () => {
    if (!configurationDirty) return true
    const result = await confirmManageNavigation({
      title: '放弃尚未保存的修改？',
      description: '离开当前页面后，本次尚未保存的配置不会保留。',
      confirmLabel: '放弃并离开',
      tone: 'danger',
    })
    return result.confirmed
  }, [configurationDirty, confirmManageNavigation])

  useEffect(() => {
    if (!isSystemAdmin || requestedWorkspaceValue !== 'plans') return
    const query = new URLSearchParams(searchParams.toString())
    query.set('tab', 'manage')
    query.set('adminWorkspace', 'positions')
    router.replace(`/performance-survey?${query.toString()}`, { scroll: false })
  }, [isSystemAdmin, requestedWorkspaceValue, router, searchParams])

  useEffect(() => {
    if (!isSystemAdmin) {
      if (configurationDirty) onConfigurationDirtyChange(false)
      if (workspace !== 'launch') setWorkspace('launch')
      return
    }
    if (!PERFORMANCE_SURVEY_ADMIN_WORKSPACES.includes(requestedWorkspace) || requestedWorkspace === workspace) {
      return
    }
    let cancelled = false
    const syncRequestedWorkspace = async () => {
      if (!await confirmLeaveConfiguration()) {
        if (cancelled) return
        const query = new URLSearchParams(searchParams.toString())
        query.set('tab', 'manage')
        query.set('adminWorkspace', workspace)
        router.replace(`/performance-survey?${query.toString()}`, { scroll: false })
        return
      }
      if (cancelled) return
      onConfigurationDirtyChange(false)
      setWorkspace(requestedWorkspace)
    }
    void syncRequestedWorkspace()
    return () => {
      cancelled = true
    }
  }, [
    confirmLeaveConfiguration,
    configurationDirty,
    isSystemAdmin,
    onConfigurationDirtyChange,
    requestedWorkspace,
    router,
    searchParams,
    workspace,
  ])

  const selectWorkspace = async (nextWorkspace: PerformanceSurveyAdminWorkspace) => {
    if (nextWorkspace === workspace || !await confirmLeaveConfiguration()) return
    setMessage(null)
    onConfigurationDirtyChange(false)
    setWorkspace(nextWorkspace)
    const query = new URLSearchParams(searchParams.toString())
    query.set('tab', 'manage')
    query.set('adminWorkspace', nextWorkspace)
    router.replace(`/performance-survey?${query.toString()}`, { scroll: false })
  }

  const selectAdminMonth = (nextMonth: string) => {
    if (!/^\d{4}-\d{2}$/.test(nextMonth) || nextMonth === adminMonth) return
    const query = new URLSearchParams(searchParams.toString())
    query.set('tab', 'manage')
    query.set('adminMonth', nextMonth)
    query.delete('prefillMonth')
    router.replace(`/performance-survey?${query.toString()}`, { scroll: false })
  }

  return (
    <div className="grid gap-4">
      {isSystemAdmin && (
        <nav
          aria-label="考核调研管理功能"
          className="flex max-w-full items-center gap-1 overflow-x-auto border-b border-[#e2e2e2] bg-white pb-2"
        >
          {([
            ['overview', '管理概览'],
            ['positions', '岗位'],
            ['people', '人员分配'],
            ['templates', '模板'],
            ['launch', '发起调研'],
            ['operations', '运行维护'],
          ] as const).map(([id, label]) => (
            <button
              key={id}
              type="button"
              onClick={() => void selectWorkspace(id)}
              aria-current={workspace === id ? 'page' : undefined}
              className={`min-h-11 shrink-0 rounded px-3 text-[12px] font-bold transition-colors ${
                workspace === id
                  ? 'bg-[#1a1c1c] text-white'
                  : 'text-[#5f5e5e] hover:bg-[#f4f4f4] hover:text-[#1a1c1c]'
              }`}
            >
              {label}
            </button>
          ))}
        </nav>
      )}
      {workspace === 'launch' ? (
        <CreateSurveyForm
          departments={departments.data || []}
          currentEmployee={currentEmployee}
          defaultMonth={adminMonth}
          onMonthChange={selectAdminMonth}
          onAdminNavigate={isSystemAdmin ? (nextWorkspace) => void selectWorkspace(nextWorkspace) : undefined}
          onCreated={async () => {
            setMessage('已发布调研')
            await surveys.refresh()
          }}
        />
      ) : workspace === 'operations' ? (
        <section className="border border-[#e2e2e2] bg-white" aria-labelledby="performance-survey-operations-title">
          <div className="border-b border-[#e2e2e2] px-4 py-4">
            <h2 id="performance-survey-operations-title" className="text-[18px] font-bold text-[#1a1c1c]">运行维护</h2>
            <p className="mt-1 text-[12px] font-medium text-[#727687]">同步人员档案、检查通知异常并补发消息</p>
          </div>
          <div className="grid gap-4 p-4 lg:grid-cols-[minmax(0,320px)_minmax(0,1fr)]">
            <AdminActions onMessage={setMessage} />
            <NotificationList state={notifications} statusState={notificationStatus} />
          </div>
        </section>
      ) : (
        <PerformanceSurveyAdminConfig
          mode={workspace}
          request={apiRequest}
          month={adminMonth}
          onMonthChange={selectAdminMonth}
          onNavigate={(nextWorkspace) => void selectWorkspace(nextWorkspace)}
          onDirtyChange={onConfigurationDirtyChange}
        />
      )}
      {manageNavigationDialog}
      {message && (
        <div className="border border-[#b3c5ff] bg-[#f8faff] px-4 py-3 text-sm font-semibold text-[#0050cb]">
          {message}
        </div>
      )}
      {workspace === 'launch' && <section className="mt-4 border-t border-[#e2e2e2] pt-6" aria-labelledby="created-survey-list-title">
        <div className="mb-4 flex items-center justify-between gap-3">
          <div>
            <h2 id="created-survey-list-title" className="text-[18px] font-bold text-[#1a1c1c]">我发起的</h2>
            <p className="mt-1 text-[12px] font-medium text-[#727687]">回看进度、关闭调研或进入结果页</p>
          </div>
          <button
            type="button"
            onClick={() => surveys.refresh()}
            className="inline-flex min-h-9 items-center rounded px-2 text-[12px] font-bold text-[#0050cb] hover:bg-[#f4f7ff] hover:text-[#003fa4] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0050cb] focus-visible:ring-offset-2"
          >
            刷新
          </button>
        </div>
        {surveys.loading && <DashboardPanel>调研加载中...</DashboardPanel>}
        {surveys.error && <DashboardErrorPanel message={surveys.error} />}
        {surveys.data && (
          <CreatedList
            items={surveys.data.created || []}
            onRefresh={surveys.refresh}
            resultBackHref="/performance-survey?tab=manage"
          />
        )}
      </section>}
    </div>
  )
}

function TemplateStatsPanel({ items }: { items: any[] }) {
  return (
    <section className="rounded-[14px] bg-white px-4 py-4 shadow-[0_10px_24px_rgba(45,43,80,0.07)] dark:border dark:border-gray-700 dark:bg-gray-900">
      <h2 className="text-[18px] font-semibold text-gray-900 dark:text-white">模板</h2>
      <div className="mt-3 divide-y divide-[#eef1f6] dark:divide-gray-800">
        {items.map((item) => {
          const achievement = item.responseCount > 0 ? `${item.aggregate?.achievementScore}${item.achievementSuffix || ''}` : '-'
          return (
            <div key={item.code} className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3 py-3">
              <div className="min-w-0">
                <div className="truncate text-[15px] font-semibold text-gray-900 dark:text-white">{item.shortName || item.name}</div>
                <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                  {item.responseCount || 0} 份
                </div>
              </div>
              <div className="text-right">
                <div className="text-[18px] font-semibold text-gray-900 dark:text-white">{achievement}</div>
                <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">均分</div>
              </div>
            </div>
          )
        })}
        {items.length === 0 && <div className="py-3 text-sm text-gray-500 dark:text-gray-400">暂无模板</div>}
      </div>
    </section>
  )
}

function CreateSurveyForm({
  departments,
  currentEmployee,
  defaultMonth,
  onMonthChange,
  onAdminNavigate,
  onCreated,
}: {
  departments: DepartmentOption[]
  currentEmployee: Employee | null
  defaultMonth?: string
  onMonthChange?: (month: string) => void
  onAdminNavigate?: (workspace: PerformanceSurveyAdminWorkspace) => void
  onCreated: () => Promise<void>
}) {
  const router = useRouter()
  const searchParams = useSearchParams()
  const prefillMonth = searchParams.get('prefillMonth') || ''
  const prefillTemplate = searchParams.get('prefillTemplate') || ''
  const draftSurveyId = String(searchParams.get('draftId') || '').trim()
  const [title, setTitle] = useState('')
  const [description, setDescription] = useState('')
  const [templateOptionKey, setTemplateOptionKey] = useState(prefillTemplate)
  const [assessmentMonth, setAssessmentMonth] = useState(prefillMonth || defaultMonth || getCurrentMonthValue())
  const [deadlineAt, setDeadlineAt] = useState('')
  const openNow = true
  const [targetEmployees, setTargetEmployees] = useState<Employee[]>([])
  const [manualEvaluatorEmployees, setManualEvaluatorEmployees] = useState<Employee[]>([])
  const [evaluatorDepartmentValues, setEvaluatorDepartmentValues] = useState<string[]>([])
  const [evaluatorDepartmentEmployees, setEvaluatorDepartmentEmployees] = useState<Record<string, Employee[]>>({})
  const [itemName, setItemName] = useState('')
  const [targetItems, setTargetItems] = useState<Array<{ name: string }>>([])
  const [visualCases, setVisualCases] = useState<VisualCaseDraft[]>(() => createVisualCaseDrafts())
  const [createdSurvey, setCreatedSurvey] = useState<any | null>(null)
  const [saving, setSaving] = useState(false)
  const [publishingLabel, setPublishingLabel] = useState('')
  const [error, setError] = useState<string | null>(null)
  const hydratedDraftIdRef = useRef<string | null>(null)
  const draftState = useApi<any>(
    draftSurveyId ? `/surveys/${encodeURIComponent(draftSurveyId)}` : null,
    [draftSurveyId],
  )
  const editingDraft = draftState.data?.status === 'draft' && draftState.data?.canManage
    ? draftState.data
    : null
  const draftLoadIssue = draftSurveyId
    ? draftState.error
      || (!draftState.loading && draftState.data?.status !== 'draft' ? '该调研已不是可编辑草稿' : null)
      || (!draftState.loading && draftState.data && !draftState.data.canManage ? '你没有编辑该草稿的权限' : null)
    : null

  const positionGroupsPath = `/position-groups?month=${encodeURIComponent(assessmentMonth || getCurrentMonthValue())}`
  const positionGroupsState = useApi<any>(positionGroupsPath, [positionGroupsPath])
  const availablePositionGroups = positionGroupsState.data?.groups || []
  const membershipStatus = positionGroupsState.data?.membership?.status as 'matched' | 'unmatched' | 'conflict' | undefined
  const selectedPositionGroupCode = membershipStatus === 'matched'
    ? positionGroupsState.data?.membership?.groupCode || ''
    : ''
  const selectedPositionGroup = availablePositionGroups.find((group: any) => group.code === selectedPositionGroupCode)
  const templatesPath = selectedPositionGroup?.status === 'ready'
    ? `/templates?month=${encodeURIComponent(assessmentMonth)}&positionGroupCode=${encodeURIComponent(selectedPositionGroupCode)}`
    : null
  const templatesState = useApi<Template[]>(templatesPath, [templatesPath])
  const templates = useMemo(() => templatesState.data || [], [templatesState.data])

  useEffect(() => {
    if (!draftSurveyId || !editingDraft || hydratedDraftIdRef.current === editingDraft.id) return
    const draftTemplate = editingDraft.template as Template | undefined
    const draftTargets = Array.isArray(editingDraft.targets) ? editingDraft.targets : []
    const targetEmployeesFromDraft = draftTargets
      .filter((target: any) => target.targetType === 'employee' && target.targetSnapshot?.id)
      .map((target: any) => target.targetSnapshot as Employee)
      .filter((employee: Employee) => employee.id !== currentEmployee?.id)
    const manualEvaluatorsFromDraft = draftTargets
      .flatMap((target: any) => Array.isArray(target.assignments) ? target.assignments : [])
      .filter((assignment: any) => (
        assignment.reviewerSource === 'manual_selection'
        && assignment.evaluatorSnapshot?.id
      ))
      .map((assignment: any) => assignment.evaluatorSnapshot as Employee)
      .filter((employee: Employee) => employee.id !== currentEmployee?.id)
    const existingWorkItemCount = draftTargets.reduce(
      (sum: number, target: any) => sum + (Array.isArray(target.workItems) ? target.workItems.length : 0),
      0,
    )
    const requiredWorkItemCount = Math.max(
      1,
      Number(draftTemplate?.requiredWorkItemCount || DEFAULT_VISUAL_CASE_COUNT),
    )

    setTitle(String(editingDraft.title || ''))
    setDescription(String(editingDraft.description || ''))
    setAssessmentMonth(String(editingDraft.assessmentMonth || defaultMonth || getCurrentMonthValue()))
    setDeadlineAt(formatDateTimeLocalInput(editingDraft.dueAt))
    setTemplateOptionKey(
      String(draftTemplate?.templateOptionKey || draftTemplate?.code || editingDraft.templateCode || ''),
    )
    setTargetEmployees(targetEmployeesFromDraft)
    setManualEvaluatorEmployees(mergeEmployeesById(manualEvaluatorsFromDraft))
    setEvaluatorDepartmentValues([])
    setEvaluatorDepartmentEmployees({})
    setVisualCases(createVisualCaseDrafts(Math.max(0, requiredWorkItemCount - existingWorkItemCount)))
    setCreatedSurvey(null)
    setError(null)
    hydratedDraftIdRef.current = editingDraft.id
  }, [currentEmployee?.id, defaultMonth, draftSurveyId, editingDraft])

  useEffect(() => {
    if (draftSurveyId) return
    if (prefillMonth && /^\d{4}-\d{2}$/.test(prefillMonth)) setAssessmentMonth(prefillMonth)
    else if (defaultMonth && /^\d{4}-\d{2}$/.test(defaultMonth)) setAssessmentMonth(defaultMonth)
    if (prefillTemplate) {
      const matched = templates.find((template) => template.templateOptionKey === prefillTemplate)
        || templates.find((template) => template.code === prefillTemplate)
      if (matched) setTemplateOptionKey(matched.templateOptionKey || matched.code)
    }
  }, [defaultMonth, draftSurveyId, prefillMonth, prefillTemplate, templates])

  const selectedTemplate = templateOptionKey || templates[0]?.templateOptionKey || templates[0]?.code || ''
  const selectedTemplateInfo = templates.find((template) => (template.templateOptionKey || template.code) === selectedTemplate)
    || (editingDraft?.template as Template | undefined)
  const selectedTemplateCode = selectedTemplateInfo?.code || ''
  const surveyKind = selectedTemplateInfo?.surveyType || 'person_period'
  const visualTemplateSelected = isVisualTemplate(selectedTemplateInfo)
  const workflowStages = selectedTemplateInfo?.workflow?.stages || []
  const requiresManualEvaluators = workflowStages.some((stage) => (
    stage.reviewers.some((reviewer) => reviewer.source === 'manual_selection')
  ))
  const visualRequiredCount = Math.max(
    1,
    Number(selectedTemplateInfo?.requiredWorkItemCount || DEFAULT_VISUAL_CASE_COUNT),
  )
  const existingVisualWorkItems = useMemo(
    () => editingDraft
      ? (editingDraft.targets || []).flatMap((target: any) => target.workItems || [])
      : [],
    [editingDraft],
  )
  const remainingVisualCaseCount = Math.max(0, visualRequiredCount - existingVisualWorkItems.length)
  const effectiveTargetEmployees = useMemo(
    () => surveyKind === 'item_course'
      ? []
      : mergeEmployeesById(currentEmployee ? [currentEmployee] : [], targetEmployees),
    [currentEmployee, surveyKind, targetEmployees],
  )
  const currentTargetSelected = Boolean(
    currentEmployee?.id && effectiveTargetEmployees.some((employee) => employee.id === currentEmployee.id),
  )
  const canUploadVisualCases = visualTemplateSelected && (
    currentTargetSelected || Boolean(editingDraft?.canManage)
  )
  const createdUploadTarget = visualTemplateSelected
    ? (createdSurvey?.targets || []).find((target: any) => target.canUploadWorkItems)
    : null
  const delegatedTargetCount = surveyKind === 'item_course'
    ? 0
    : effectiveTargetEmployees.filter((employee) => employee.id !== currentEmployee?.id).length
  const evaluatorEmployees = useMemo(
    () => mergeEmployeesById(manualEvaluatorEmployees, ...Object.values(evaluatorDepartmentEmployees))
      .filter((employee) => employee.id !== currentEmployee?.id),
    [currentEmployee?.id, manualEvaluatorEmployees, evaluatorDepartmentEmployees],
  )
  const publishValidationIssues: string[] = []
  if (!selectedTemplate) publishValidationIssues.push('选择考评模板')
  if (!assessmentMonth) publishValidationIssues.push('选择考核月份')
  if (surveyKind === 'item_course' && targetItems.length === 0 && !itemName.trim()) {
    publishValidationIssues.push(`填写${selectedTemplateInfo?.itemName || '课程、事项或活动'}名称`)
  }
  if (surveyKind !== 'item_course' && !currentEmployee?.id) {
    publishValidationIssues.push('当前账户需要先匹配考核人员档案')
  }
  if (surveyKind !== 'item_course' && effectiveTargetEmployees.length === 0) {
    publishValidationIssues.push('确认考核对象')
  }
  if (
    !editingDraft
    &&
    requiresManualEvaluators
    && evaluatorEmployees.length === 0
  ) publishValidationIssues.push('至少选择 1 名评分人')
  if (!editingDraft && membershipStatus === 'unmatched') {
    publishValidationIssues.push('联系管理员配置本人考核岗位')
  }
  if (!editingDraft && membershipStatus === 'conflict') {
    publishValidationIssues.push('联系管理员处理本人岗位重复匹配')
  }
  if (!editingDraft && membershipStatus === 'matched' && selectedPositionGroup?.status !== 'ready') {
    publishValidationIssues.push('联系管理员完成本人岗位考核项配置')
  }
  if (draftSurveyId && (draftState.loading || draftLoadIssue)) {
    publishValidationIssues.push(draftState.loading ? '等待草稿加载完成' : draftLoadIssue || '草稿不可编辑')
  }
  if (visualTemplateSelected && canUploadVisualCases) {
    const requiredNewCaseCount = editingDraft ? remainingVisualCaseCount : visualRequiredCount
    const visibleVisualCases = visualCases.slice(0, requiredNewCaseCount)
    if (visibleVisualCases.length < requiredNewCaseCount) {
      publishValidationIssues.push(`准备剩余 ${requiredNewCaseCount} 个案例作品`)
    }
    visibleVisualCases.forEach((draft, index) => {
      const validationError = validatePerformanceSurveyImageFiles(draft.files)
      if (validationError) publishValidationIssues.push(`案例 ${index + 1}：${validationError}`)
    })
  }
  const publishDisabled = saving || Boolean(createdSurvey) || publishValidationIssues.length > 0

  const removeEvaluatorEmployee = (id: string) => {
    setManualEvaluatorEmployees((current) => current.filter((employee) => employee.id !== id))
    setEvaluatorDepartmentEmployees((current) => {
      const next: Record<string, Employee[]> = {}
      for (const [department, employees] of Object.entries(current)) {
        const filtered = employees.filter((employee) => employee.id !== id)
        if (filtered.length > 0) next[department] = filtered
      }
      return next
    })
  }

  const submit = async () => {
    if (publishValidationIssues.length > 0) {
      setError(`还需完成：${publishValidationIssues.join('；')}`)
      return
    }
    setSaving(true)
    setPublishingLabel('正在创建调研')
    setError(null)
    setCreatedSurvey(null)
    let createdForAttempt: any | null = null
    try {
      const pendingItemName = itemName.trim()
      const targetItemsToSubmit = surveyKind === 'item_course' && pendingItemName
        ? [...targetItems, { name: pendingItemName }]
        : targetItems
      if (surveyKind === 'item_course' && targetItemsToSubmit.length === 0) {
        throw new Error(`请填写${selectedTemplateInfo?.itemName || '课程、事项或活动'}名称`)
      }
      if (surveyKind !== 'item_course' && !currentEmployee?.id) {
        throw new Error('当前账户尚未匹配考核人员档案，暂时无法发起调研')
      }
      if (surveyKind !== 'item_course' && effectiveTargetEmployees.length === 0) {
        throw new Error('请至少选择 1 个考核对象')
      }
      if (!editingDraft && requiresManualEvaluators && evaluatorEmployees.length === 0) {
        throw new Error('请至少选择 1 名评分人')
      }
      const requiredNewVisualCaseCount = editingDraft ? remainingVisualCaseCount : visualRequiredCount
      const visualCasesToSubmit = visualCases.slice(0, requiredNewVisualCaseCount)
      if (visualTemplateSelected && canUploadVisualCases) {
        if (visualCasesToSubmit.length < requiredNewVisualCaseCount) {
          throw new Error(`请提交剩余 ${requiredNewVisualCaseCount} 个案例作品`)
        }
        for (let index = 0; index < visualCasesToSubmit.length; index += 1) {
          const validationError = validatePerformanceSurveyImageFiles(visualCasesToSubmit[index].files)
          if (validationError) {
            throw new Error(`案例 ${index + 1}：${validationError}`)
          }
        }
      }
      const selectedAssessmentMonth = assessmentMonth || getCurrentMonthValue()
      const submitTitle = title.trim()
        || targetItemsToSubmit[0]?.name
        || `${formatMonthLabel(selectedAssessmentMonth)} · ${getTemplateDisplayName(selectedTemplateInfo)}`
      const created = editingDraft
        ? await apiRequest<any>(`/surveys/${editingDraft.id}`, {
            method: 'PATCH',
            body: JSON.stringify({
              title: submitTitle,
              description,
              assessmentMonth: selectedAssessmentMonth,
              dueAt: deadlineAt ? new Date(deadlineAt).toISOString() : null,
            }),
          })
        : await apiRequest<any>('/surveys', {
            method: 'POST',
            body: JSON.stringify({
              title: submitTitle,
              description,
              surveyKind,
              templateCode: selectedTemplateCode,
              templateVersionId: selectedTemplateInfo?.templateVersionId || null,
              assessmentMonth: selectedAssessmentMonth,
              dueAt: deadlineAt ? new Date(deadlineAt).toISOString() : null,
              openNow: visualTemplateSelected ? false : openNow,
              targetEmployeeIds: effectiveTargetEmployees.map((employee) => employee.id),
              targetItems: targetItemsToSubmit,
              evaluatorEmployeeIds: evaluatorEmployees.map((employee) => employee.id),
            }),
          })
      createdForAttempt = created
      if (!editingDraft) setCreatedSurvey(created)

      let uploadTarget: any | null = null
      if (visualTemplateSelected && canUploadVisualCases) {
        uploadTarget = (created.targets || []).find((target: any) => (
          target.canCreateWorkItem || target.canUploadWorkItems || target.workItemUploadRemaining > 0
        ))
        if (!uploadTarget?.id) throw new Error('未找到当前账户对应的作品上传入口')

        for (let index = 0; index < visualCasesToSubmit.length; index += 1) {
          const draft = visualCasesToSubmit[index]
          setPublishingLabel(`正在上传作品 ${index + 1}/${visualCasesToSubmit.length}`)
          const images = await uploadPerformanceSurveyImageFiles(draft.files, (label) => {
            setPublishingLabel(`作品 ${index + 1}/${visualCasesToSubmit.length} · ${label}`)
          })
          await apiRequest(`/surveys/${created.id}/work-items`, {
            method: 'POST',
            body: JSON.stringify({
              targetId: uploadTarget.id,
              title: draft.title.trim() || `案例 ${index + 1}`,
              description: draft.description.trim(),
              processedImages: images,
            }),
          })
        }

        setPublishingLabel('正在确认作品并发布调研')
        const opened = await apiRequest<any>(`/surveys/${created.id}`, {
          method: 'PATCH',
          body: JSON.stringify({ status: 'open' }),
        })
        setCreatedSurvey(opened)
      }

      setTitle('')
      setDescription('')
      setTemplateOptionKey('')
      setAssessmentMonth(getCurrentMonthValue())
      setDeadlineAt('')
      setTargetEmployees([])
      setManualEvaluatorEmployees([])
      setEvaluatorDepartmentValues([])
      setEvaluatorDepartmentEmployees({})
      setTargetItems([])
      setItemName('')
      setVisualCases(createVisualCaseDrafts())
      await onCreated()
      setCreatedSurvey(null)

      if (uploadTarget?.id) {
        router.push(`/performance-survey/survey/${created.id}?targetId=${encodeURIComponent(uploadTarget.id)}`)
      } else if (editingDraft) {
        router.push('/performance-survey?tab=personal&workspace=created')
      }
    } catch (err) {
      const message = err instanceof Error ? err.message : '创建失败'
      setError(
        createdForAttempt && visualTemplateSelected
          ? `调研尚未发布，作品没有全部上传完成：${message}`
          : message,
      )
    } finally {
      setPublishingLabel('')
      setSaving(false)
    }
  }

  return (
    <section className="grid gap-6 lg:grid-cols-[minmax(280px,0.75fr)_minmax(0,1.25fr)]">
      {draftSurveyId && (
        <div
          className={`lg:col-span-2 ${
            draftLoadIssue
              ? 'border border-[#ffdad6] bg-[#fff6f4] text-[#93000a]'
              : 'border border-[#b3c5ff] bg-[#f8faff] text-[#0050cb]'
          } px-4 py-3`}
          role={draftLoadIssue ? 'alert' : 'status'}
          aria-live="polite"
        >
          <div className="text-[14px] font-bold">
            {draftState.loading
              ? '正在恢复草稿...'
              : draftLoadIssue
                ? '无法继续编辑草稿'
                : '继续编辑未发布草稿'}
          </div>
          <p className="mt-1 text-[12px] font-medium leading-5">
            {draftState.loading
              ? '正在读取原有模板、作品和发布设置。'
              : draftLoadIssue
                ? `${draftLoadIssue}。请返回“我发起的”刷新后重试。`
                : `已恢复 ${existingVisualWorkItems.length}/${visualRequiredCount} 个作品；补齐内容后可直接发布。被考核人与评分流程沿用原草稿。`}
          </p>
        </div>
      )}
      <div>
        <div className="border border-[#eeeeee] bg-white p-4 sm:p-6">
          <div className="space-y-6">
            <TextInput
              label="考核月份"
              value={assessmentMonth}
              onChange={(value) => {
                setAssessmentMonth(value)
                onMonthChange?.(value)
              }}
              type="month"
            />
            <div className="grid gap-2 text-sm">
              <span className="text-[12px] font-semibold tracking-[0.05em] text-[#5f5e5e]">考核岗位</span>
              <div
                aria-live="polite"
                className="flex min-h-11 min-w-0 items-center justify-between gap-3 rounded border border-[#eeeeee] bg-[#f9f9f9] px-3 py-2"
              >
                <span className="min-w-0 break-words text-[14px] font-semibold text-[#1a1c1c]">
                  {editingDraft
                    ? editingDraft.positionGroup?.name || editingDraft.positionGroupCode || '沿用草稿岗位'
                    : positionGroupsState.loading
                    ? '正在关联人员岗位...'
                    : positionGroupsState.error
                      ? '岗位关联失败'
                    : membershipStatus === 'matched'
                      ? positionGroupsState.data?.membership?.groupName || '已关联岗位'
                      : membershipStatus === 'conflict'
                        ? '岗位配置冲突'
                        : '尚未配置岗位'}
                </span>
                <span className="shrink-0 text-[11px] font-semibold text-[#5f5e5e]">自动关联</span>
              </div>
              {!editingDraft && positionGroupsState.error && (
                <div
                  role="alert"
                  className="flex flex-wrap items-center justify-between gap-2 border border-[#ffdad6] bg-[#fff6f4] px-3 py-2 text-[12px] font-semibold text-[#93000a]"
                >
                  <span className="min-w-0 break-words">岗位关联失败：{positionGroupsState.error}</span>
                  <button
                    type="button"
                    onClick={() => void positionGroupsState.refresh()}
                    className="min-h-9 shrink-0 rounded border border-[#93000a] px-3 hover:bg-[#93000a] hover:text-white"
                  >
                    重新加载
                  </button>
                </div>
              )}
              {!editingDraft && membershipStatus === 'matched' && (
                <div className="text-[12px] leading-5 text-[#5f5e5e]">
                  已按被考核人的人员分配自动关联，发起时无需选择。
                </div>
              )}
              {!editingDraft && positionGroupsState.data?.membership?.status === 'conflict' && (
                <div className="text-[12px] font-semibold text-[#b42318]">
                  当前人员同时命中多个岗位：{(positionGroupsState.data.membership.conflictGroupNames || []).join('、')}
                </div>
              )}
              {!editingDraft && positionGroupsState.data?.membership?.status === 'unmatched' && (
                <div className="text-[12px] font-semibold text-[#b42318]">
                  当前人员尚未匹配考核岗位，请联系系统管理员完成岗位配置
                </div>
              )}
              {!editingDraft && membershipStatus === 'matched' && selectedPositionGroup?.status !== 'ready' && (
                <div className="text-[12px] font-semibold text-[#b42318]">
                  当前岗位尚未完成考核项配置，暂时不能发起调研
                </div>
              )}
            </div>
            {!editingDraft && onAdminNavigate && positionGroupsState.data && (
              membershipStatus !== 'matched'
              || selectedPositionGroup?.status !== 'ready'
              || (selectedPositionGroupCode && !templatesState.loading && templates.length === 0)
            ) && (
              <div className="border border-[#e4b86a] bg-[#fffaf0] px-3 py-3 text-[12px] leading-5 text-[#6f4700]">
                <div className="font-bold">
                  {membershipStatus !== 'matched'
                    ? '当前人员还不能自动关联岗位'
                    : selectedPositionGroup?.status !== 'ready'
                      ? '当前岗位尚未完成配置'
                      : '当前岗位还没有可用考核模板'}
                </div>
                <p className="mt-1">请先补齐人员归属、岗位设置和可用模板，再回来发起调研。</p>
                <div className="mt-3 flex flex-wrap gap-2">
                  {([
                    ['positions', '检查岗位设置'],
                    ['people', '检查人员'],
                    ['templates', '检查模板'],
                  ] as const).map(([target, label]) => (
                    <button
                      key={target}
                      type="button"
                      onClick={() => onAdminNavigate(target)}
                      className="min-h-11 rounded border border-[#6f4700] px-3 text-[11px] font-bold hover:bg-[#6f4700] hover:text-white"
                    >
                      {label}
                    </button>
                  ))}
                </div>
              </div>
            )}
            <TextInput label="截止时间（可选）" value={deadlineAt} onChange={setDeadlineAt} type="datetime-local" />
            <label className="grid gap-2 text-sm">
              <span className="text-[12px] font-semibold tracking-[0.05em] text-[#5f5e5e]">考评模板</span>
              <select
                aria-label="考评模板"
                value={selectedTemplate}
                onChange={(event) => setTemplateOptionKey(event.target.value)}
                disabled={Boolean(editingDraft) || !selectedPositionGroupCode || templatesState.loading}
                className="h-11 rounded border border-[#eeeeee] bg-white px-3 text-[14px] font-semibold text-[#1a1c1c] outline-none transition-colors focus:border-[#0050cb]"
              >
                {templates.length === 0 && <option value="">该岗位暂无可用考核项</option>}
                {editingDraft && !templates.some((template) => (template.templateOptionKey || template.code) === selectedTemplate) && (
                  <option value={selectedTemplate}>
                    {selectedTemplateInfo?.name || selectedTemplateInfo?.shortName || editingDraft.templateCode}
                  </option>
                )}
                {templates.map((template) => (
                  <option key={template.templateOptionKey || template.code} value={template.templateOptionKey || template.code}>
                    {template.name || template.shortName || template.code}
                  </option>
                ))}
              </select>
              {editingDraft && (
                <div className="text-[12px] leading-5 text-[#5f5e5e]">
                  草稿已生成评价任务，模板、被考核人与评分流程保持原设置。
                </div>
              )}
              {selectedTemplateInfo?.templateVariant && (
                <div className="border border-[#dce5f3] bg-[#f8faff] px-3 py-3">
                  <div className="text-[12px] font-bold text-[#1a1c1c]">
                    {selectedTemplateInfo.questions.length} 个评分项 · 模板总分 {selectedTemplateInfo.maxTotal || 0} 分
                  </div>
                  <div className="mt-1 text-[12px] leading-5 text-[#5f5e5e]">
                    {selectedTemplateInfo.questions.map((question) => question.title).join(' / ')}
                  </div>
                </div>
              )}
            </label>
          </div>
        </div>
      </div>

      <div className="border border-[#eeeeee] bg-white p-4 sm:p-6">
        <div className="grid gap-8 lg:grid-cols-2">
          <div>
            {surveyKind !== 'item_course' ? (
              <div className="grid gap-4">
                <div>
                  <div className="text-[12px] font-semibold tracking-[0.05em] text-[#5f5e5e]">
                    {selectedTemplateInfo?.ownerRoleName || '被考核人'}
                  </div>
                  {editingDraft ? (
                    <div className="mt-2 divide-y divide-[#dce5f3] border border-[#dce5f3] bg-[#f8faff]">
                      {(editingDraft.targets || []).map((target: any) => (
                        <div key={target.id} className="flex min-h-12 items-center gap-3 px-3 py-2.5">
                          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[#0050cb] text-[13px] font-bold text-white">
                            {getSurveyInitials(target.targetName)}
                          </div>
                          <div className="min-w-0 flex-1">
                            <div className="break-words text-[14px] font-bold text-[#1a1c1c]">{target.targetName}</div>
                            <div className="mt-0.5 break-words text-[12px] text-[#5f5e5e]">
                              {[target.targetSnapshot?.departmentName, target.targetSnapshot?.positionLevel || target.targetSnapshot?.levelType]
                                .filter(Boolean)
                                .join(' · ') || '沿用草稿人员'}
                            </div>
                          </div>
                          <span className="shrink-0 text-[11px] font-bold text-[#5f5e5e]">已锁定</span>
                        </div>
                      ))}
                    </div>
                  ) : currentEmployee ? (
                    <div className="mt-2 flex items-center gap-3 border border-[#dce5f3] bg-[#f8faff] px-3 py-3">
                      <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[#0050cb] text-[13px] font-bold text-white">
                        {getSurveyInitials(currentEmployee.displayName)}
                      </div>
                      <div className="min-w-0 flex-1">
                        <div className="truncate text-[14px] font-bold text-[#1a1c1c]">{currentEmployee.displayName}</div>
                        <div className="mt-0.5 truncate text-[12px] text-[#5f5e5e]">
                          {[currentEmployee.departmentName, currentEmployee.positionLevel || currentEmployee.levelType]
                            .filter(Boolean)
                            .join(' · ') || '当前登录账户'}
                        </div>
                      </div>
                      <span className="shrink-0 rounded-full bg-[#e8f0ff] px-2 py-1 text-[11px] font-bold text-[#0050cb]">
                        当前账户
                      </span>
                    </div>
                  ) : (
                    <div className="mt-2 border border-[#ffdad6] bg-[#fff6f4] px-3 py-3 text-[12px] font-semibold text-[#93000a]">
                      当前账户尚未匹配考核人员档案
                    </div>
                  )}
                </div>
                {!editingDraft && (
                  <EmployeePicker
                    title="添加同岗位被考核人（可选）"
                    purpose="target"
                    positionGroupCode={selectedPositionGroupCode}
                    assessmentMonth={assessmentMonth}
                    selected={targetEmployees}
                    excludedIds={currentEmployee?.id ? [currentEmployee.id] : []}
                    onChange={setTargetEmployees}
                  />
                )}
                {delegatedTargetCount > 0 && (
                  <div className="text-[12px] font-semibold text-[#0050cb]">
                    将向 {delegatedTargetCount} 位被考核人发送钉钉确认
                  </div>
                )}
              </div>
            ) : (
              <div>
                <div className="mb-2 text-[12px] font-semibold tracking-[0.05em] text-[#5f5e5e]">{selectedTemplateInfo?.itemName || '调研事项'}</div>
                <input
                  value={itemName}
                  onChange={(event) => setItemName(event.target.value)}
                  placeholder={selectedTemplateInfo?.itemNamePlaceholder || '填写名称'}
                  className="h-10 w-full rounded border border-[#eeeeee] px-3 text-[14px] font-semibold outline-none transition-colors focus:border-[#0050cb]"
                />
              </div>
            )}
          </div>
          {editingDraft ? (
            <div className="border border-[#dce5f3] bg-[#f8faff] px-4 py-4">
              <div className="text-[12px] font-semibold tracking-[0.05em] text-[#5f5e5e]">评分流程</div>
              <div className="mt-2 grid gap-2">
                {workflowStages.map((stage) => (
                  <div key={stage.key} className="text-[13px] font-semibold text-[#1a1c1c]">
                    {stage.order + 1}. {stage.label} · {stage.reviewers.map((reviewer) => reviewer.employeeName || reviewer.label).join('、')}
                  </div>
                ))}
              </div>
              <p className="mt-2 text-[12px] leading-5 text-[#5f5e5e]">草稿恢复编辑时沿用已生成的评分人员与阶段设置。</p>
            </div>
          ) : !requiresManualEvaluators ? (
            <div className="border border-[#dce5f3] bg-[#f8faff] px-4 py-4">
              <div className="text-[12px] font-semibold tracking-[0.05em] text-[#5f5e5e]">评审流程</div>
              <div className="mt-2 grid gap-2">
                {workflowStages.map((stage) => (
                  <div key={stage.key} className="text-[13px] font-semibold text-[#1a1c1c]">
                    {stage.order + 1}. {stage.label} · {stage.reviewers.map((reviewer) => reviewer.employeeName || reviewer.label).join('、')}
                  </div>
                ))}
              </div>
              <p className="mt-2 text-[12px] leading-5 text-[#5f5e5e]">评分人员按已发布模板解析，前一阶段完成后自动开放下一阶段。</p>
            </div>
          ) : (
            <>
              <div>
                <EmployeePicker
                  title="评分人员"
                  purpose="evaluator"
                  selected={evaluatorEmployees}
                  excludedIds={currentEmployee?.id ? [currentEmployee.id] : []}
                  onChange={setManualEvaluatorEmployees}
                  onAddEmployee={(employee) => setManualEvaluatorEmployees((current) => mergeEmployeesById(current, [employee]))}
                  onRemoveEmployee={removeEvaluatorEmployee}
                />
              </div>
              <div className="lg:col-span-2">
                <DepartmentPicker
                  departments={departments}
                  selected={evaluatorDepartmentValues}
                  excludedEmployeeIds={currentEmployee?.id ? [currentEmployee.id] : []}
                  onChange={setEvaluatorDepartmentValues}
                  onDepartmentEmployeesChange={(department, checked, employees) => {
                    setEvaluatorDepartmentEmployees((current) => {
                      const next = { ...current }
                      if (checked) {
                        next[department] = employees
                      } else {
                        delete next[department]
                      }
                      return next
                    })
                  }}
                />
              </div>
            </>
          )}
        </div>
      </div>

      <div className={`min-w-0 lg:col-span-2 ${visualTemplateSelected ? '' : 'hidden'}`}>
        <VisualCaseDraftUploader
          expanded={visualTemplateSelected}
          enabled={canUploadVisualCases}
          requiredCount={editingDraft ? remainingVisualCaseCount : visualRequiredCount}
          totalRequiredCount={visualRequiredCount}
          completedOffset={existingVisualWorkItems.length}
          existingItems={existingVisualWorkItems}
          cases={visualCases}
          onChange={setVisualCases}
        />
      </div>

      <div className="space-y-3 border-t border-[#e2e2e2] pt-5 lg:col-span-2">
        {error && <div className="border border-[#ffdad6] bg-[#fff6f4] px-4 py-3 text-sm font-semibold text-[#93000a]" role="alert">{error}</div>}
        <div
          id="performance-survey-publish-readiness"
          className={`px-4 py-3 text-[13px] font-semibold ${
            publishValidationIssues.length > 0
              ? 'border border-[#f2d184] bg-[#fffaf0] text-[#8a4b08]'
              : 'border border-[#b9ead0] bg-[#f0fff6] text-[#087a3c]'
          }`}
          aria-live="polite"
        >
          {publishValidationIssues.length > 0
            ? `还需完成：${publishValidationIssues.join('；')}`
            : visualTemplateSelected
              ? '配置已完整。发布后先由被考核人完成自评；自评提交后才通知主管和元泽评分'
              : '配置已完整，可以发布调研'}
        </div>
        <button
          type="button"
          disabled={publishDisabled}
          aria-describedby="performance-survey-publish-readiness"
          onClick={submit}
          className="h-12 w-full rounded bg-[#0050cb] px-5 text-[15px] font-bold text-white hover:bg-[#003fa4] disabled:cursor-not-allowed disabled:bg-[#aeb9c9]"
        >
          {saving
            ? publishingLabel || '发布中...'
            : editingDraft
              ? remainingVisualCaseCount > 0
                ? '上传剩余作品并发布'
                : '保存修改并发布'
            : createdSurvey?.status === 'open'
              ? '调研已发布'
              : createdSurvey
                ? '调研待完成'
                : visualTemplateSelected
                  ? '上传作品并发布'
                  : '发布调研'}
        </button>
        {createdSurvey && (
          <div className="flex items-center justify-between gap-3 border border-[#b3c5ff] bg-[#f8faff] px-4 py-3 text-sm font-semibold text-[#0050cb]">
            <span>
              {createdSurvey.status === 'open'
                ? isVisualTemplate(selectedTemplateInfo) && !currentTargetSelected
                  ? '已发布，已通知被考核人提交作品'
                  : isVisualTemplate(selectedTemplateInfo)
                    ? '已发布，当前等待被考核人完成自评；自评后将自动通知主管和元泽'
                    : '已发布'
                : '尚未发布，请继续上传作品；作品完整后才能发布'}
            </span>
            {createdUploadTarget?.id && (
              <Link
                href={`/performance-survey/survey/${createdSurvey.id}?targetId=${encodeURIComponent(createdUploadTarget.id)}`}
                className="shrink-0 rounded bg-[#0050cb] px-3 py-1.5 text-white"
              >
                {createdSurvey.status === 'open' ? '查看作品' : '继续上传'}
              </Link>
            )}
          </div>
        )}
      </div>
    </section>
  )
}

function PerformanceSurveyImageDropzone({
  files,
  disabled,
  ariaLabel,
  onFiles,
}: {
  files: File[]
  disabled?: boolean
  ariaLabel: string
  onFiles: (files: File[]) => void
}) {
  const inputRef = useRef<HTMLInputElement | null>(null)
  const dragDepthRef = useRef(0)
  const [dragging, setDragging] = useState(false)

  useEffect(() => {
    if (files.length === 0 && inputRef.current) inputRef.current.value = ''
  }, [files.length])

  const addFiles = (selected: FileList | File[]) => {
    if (disabled) return
    const next = Array.from(selected)
    if (next.length > 0) onFiles(next)
  }

  return (
    <div>
      <input
        ref={inputRef}
        type="file"
        accept="image/png,image/jpeg,image/gif,image/webp"
        multiple
        disabled={disabled}
        tabIndex={-1}
        aria-hidden="true"
        className="hidden"
        onChange={(event) => {
          addFiles(event.currentTarget.files || [])
          event.currentTarget.value = ''
        }}
      />
      <button
        type="button"
        disabled={disabled}
        aria-label={ariaLabel}
        onClick={() => inputRef.current?.click()}
        onDragEnter={(event) => {
          event.preventDefault()
          if (disabled) return
          dragDepthRef.current += 1
          setDragging(true)
        }}
        onDragOver={(event) => {
          event.preventDefault()
          if (!disabled) event.dataTransfer.dropEffect = 'copy'
        }}
        onDragLeave={(event) => {
          event.preventDefault()
          if (disabled) return
          dragDepthRef.current = Math.max(0, dragDepthRef.current - 1)
          if (dragDepthRef.current === 0) setDragging(false)
        }}
        onDrop={(event) => {
          event.preventDefault()
          dragDepthRef.current = 0
          setDragging(false)
          addFiles(event.dataTransfer.files)
        }}
        className={`flex min-h-24 w-full flex-col items-center justify-center border border-dashed px-4 py-4 text-center transition-[border-color,background-color,transform] duration-200 disabled:cursor-not-allowed disabled:opacity-60 ${
          dragging
            ? 'scale-[1.01] border-[#0050cb] bg-[#eef5ff]'
            : 'border-[#aebbd0] bg-white hover:border-[#0050cb] hover:bg-[#f7faff]'
        }`}
      >
        <span className={`flex h-8 w-8 items-center justify-center rounded-full text-[20px] font-light ${dragging ? 'bg-[#0050cb] text-white' : 'bg-[#eef5ff] text-[#0050cb]'}`}>↑</span>
        <span className="mt-2 text-[13px] font-bold text-[#0050cb]">{dragging ? '松开即可添加' : '拖拽图片到这里'}</span>
        <span className="mt-0.5 text-[11px] text-[#98a2b3]">或点击选择 · 支持 PNG/JPG/GIF/WebP；1600px 长图由浏览器切片，多张按数字文件名顺序处理上传；单张 200MB、最大 12,000px / 1.2 亿像素、60 张切片</span>
        <span className="mt-0.5 text-[10px] text-[#98a2b3]">请使用桌面版 Chrome 或 Edge</span>
      </button>
    </div>
  )
}

function PerformanceSurveySelectedImageFiles({
  files,
  onRemove,
}: {
  files: File[]
  onRemove: (index: number) => void
}) {
  if (files.length === 0) return null
  return (
    <div className="divide-y divide-[#e5eaf2] border border-[#e5eaf2] bg-white">
      {files.map((file, index) => (
        <div key={`${file.name}-${file.size}-${file.lastModified}`} className="flex min-h-11 items-center gap-3 px-3 py-2">
          <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded bg-[#eef5ff] text-[11px] font-bold text-[#0050cb]">图</span>
          <span className="min-w-0 flex-1">
            <span className="block truncate text-[12px] font-semibold text-[#111827]">{file.name}</span>
            <span className="block text-[10px] text-[#98a2b3]">{formatPerformanceSurveyImageFileSize(file.size)}</span>
          </span>
          <button
            type="button"
            onClick={() => onRemove(index)}
            aria-label={`移除图片 ${index + 1}`}
            className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[18px] leading-none text-[#667085] transition-colors hover:bg-[#f2f4f7] hover:text-[#111827]"
          >
            ×
          </button>
        </div>
      ))}
    </div>
  )
}

function VisualCaseDraftUploader({
  expanded,
  enabled,
  requiredCount,
  totalRequiredCount = requiredCount,
  completedOffset = 0,
  existingItems = [],
  cases,
  onChange,
}: {
  expanded: boolean
  enabled: boolean
  requiredCount: number
  totalRequiredCount?: number
  completedOffset?: number
  existingItems?: any[]
  cases: VisualCaseDraft[]
  onChange: (cases: VisualCaseDraft[]) => void
}) {
  const visibleCases = cases.slice(0, requiredCount)
  const completedCount = visibleCases.filter((item) => item.files.length > 0).length

  const updateCase = (index: number, next: VisualCaseDraft) => {
    onChange(cases.map((item, itemIndex) => itemIndex === index ? next : item))
  }

  return (
    <div
      aria-hidden={!expanded}
      className={`grid transition-[grid-template-rows,opacity,transform,margin] duration-300 ease-out motion-reduce:transition-none ${
        expanded
          ? 'mt-0 grid-rows-[1fr] translate-y-0 opacity-100'
          : '-mt-6 grid-rows-[0fr] -translate-y-2 opacity-0 pointer-events-none'
      }`}
    >
      <div className="min-h-0 overflow-hidden">
        <section className="border border-[#dfe6f0] bg-white p-4 shadow-[0_12px_30px_rgba(15,23,42,0.05)]">
          <div className="flex items-center justify-between gap-3">
            <h2 className="text-[15px] font-bold text-[#111827]">作品上传</h2>
            <span className="text-[12px] font-semibold text-[#667085]">
              {completedOffset + completedCount}/{totalRequiredCount}
            </span>
          </div>

          {!enabled ? (
            <div className="mt-3 border border-dashed border-[#cfd8e6] bg-[#f8faff] px-3 py-4 text-center text-[13px] font-semibold text-[#667085]">
              由被考核人通过钉钉提交作品
            </div>
          ) : (
            <>
              {existingItems.length > 0 && (
                <div className="mt-3 grid gap-2 sm:grid-cols-2 xl:grid-cols-3">
                  {existingItems.map((item: any, index: number) => (
                    <div key={item.id} className="border border-[#d9e7ff] bg-[#f8fbff] px-3 py-3">
                      <div className="flex items-start justify-between gap-3">
                        <div className="min-w-0">
                          <div className="break-words text-[13px] font-bold text-[#111827]">
                            {item.title || `案例 ${index + 1}`}
                          </div>
                          {item.description && (
                            <div className="mt-1 line-clamp-2 break-words text-[11px] leading-4 text-[#667085]">
                              {item.description}
                            </div>
                          )}
                        </div>
                        <span className="shrink-0 text-[11px] font-bold text-[#087a3c]">已上传</span>
                      </div>
                    </div>
                  ))}
                </div>
              )}
              {visibleCases.length > 0 ? (
                <div className="mt-3 grid items-start gap-4 md:grid-cols-2 xl:grid-cols-3">
                  {visibleCases.map((draft, index) => (
                    <VisualCaseDraftEditor
                      key={draft.id}
                      index={completedOffset + index}
                      draft={draft}
                      disabled={!expanded}
                      onChange={(next) => updateCase(index, next)}
                    />
                  ))}
                </div>
              ) : (
                <div className="mt-3 border border-[#b9ead0] bg-[#f0fff6] px-3 py-3 text-[13px] font-semibold text-[#087a3c]">
                  所有作品均已上传，可以保存并发布草稿。
                </div>
              )}
            </>
          )}
        </section>
      </div>
    </div>
  )
}

function VisualCaseDraftEditor({
  index,
  draft,
  disabled,
  onChange,
}: {
  index: number
  draft: VisualCaseDraft
  disabled: boolean
  onChange: (draft: VisualCaseDraft) => void
}) {
  const [message, setMessage] = useState<string | null>(null)

  const addFiles = (selectedFiles: File[]) => {
    const deduplicated = [...draft.files, ...selectedFiles].filter((file, fileIndex, items) => {
      const key = `${file.name}-${file.size}-${file.lastModified}`
      return items.findIndex((candidate) => `${candidate.name}-${candidate.size}-${candidate.lastModified}` === key) === fileIndex
    })
    const orderedFiles = sortPerformanceSurveyImagesByName(deduplicated, (file) => file.name)
    const validationError = validatePerformanceSurveyImageFiles(orderedFiles)
    if (validationError) {
      setMessage(validationError)
      return
    }
    setMessage(null)
    onChange({ ...draft, files: orderedFiles })
  }

  return (
    <div className="border border-[#e5eaf2] bg-[#fbfcfe] p-3">
      <div className="flex items-center justify-between gap-3">
        <span className="text-[13px] font-bold text-[#111827]">案例 {index + 1}</span>
        <span className={`text-[11px] font-semibold ${draft.files.length > 0 ? 'text-[#0050cb]' : 'text-[#98a2b3]'}`}>
          {draft.files.length > 1 ? `${draft.files.length} 张切片` : draft.files.length === 1 ? '1 张图片' : '待上传'}
        </span>
      </div>

      <div className="mt-2.5 grid gap-2">
        <input
          value={draft.title}
          onChange={(event) => onChange({ ...draft, title: event.target.value })}
          placeholder="案例名称"
          aria-label={`案例 ${index + 1} 名称`}
          disabled={disabled}
          className="h-9 border border-[#d9e0ea] bg-white px-2.5 text-[13px] outline-none transition-colors focus:border-[#0050cb] disabled:bg-[#f3f5f8]"
        />
        <textarea
          value={draft.description}
          onChange={(event) => onChange({ ...draft, description: event.target.value })}
          placeholder="案例说明（可选）"
          aria-label={`案例 ${index + 1} 说明`}
          disabled={disabled}
          rows={2}
          className="resize-none border border-[#d9e0ea] bg-white px-2.5 py-2 text-[13px] outline-none transition-colors focus:border-[#0050cb] disabled:bg-[#f3f5f8]"
        />

        <PerformanceSurveyImageDropzone
          files={draft.files}
          disabled={disabled}
          ariaLabel={`为案例 ${index + 1} 添加图片`}
          onFiles={addFiles}
        />
      </div>

      <div className="mt-2.5">
        <PerformanceSurveySelectedImageFiles
          files={draft.files}
          onRemove={(fileIndex) => {
            setMessage(null)
            onChange({ ...draft, files: draft.files.filter((_, indexToKeep) => indexToKeep !== fileIndex) })
          }}
        />
      </div>

      {message && <div className="mt-2 text-[12px] font-semibold text-[#d92d20]">{message}</div>}
    </div>
  )
}

function EmployeePicker({
  title,
  purpose,
  positionGroupCode,
  assessmentMonth,
  selected,
  excludedIds = [],
  onChange,
  onAddEmployee,
  onRemoveEmployee,
}: {
  title: string
  purpose?: 'target' | 'evaluator'
  positionGroupCode?: string
  assessmentMonth?: string
  selected: Employee[]
  excludedIds?: string[]
  onChange: (employees: Employee[]) => void
  onAddEmployee?: (employee: Employee) => void
  onRemoveEmployee?: (id: string) => void
}) {
  const [keyword, setKeyword] = useState('')
  const [items, setItems] = useState<Employee[]>([])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [open, setOpen] = useState(false)
  const pickerRef = useRef<HTMLDivElement | null>(null)
  const cacheRef = useRef<Map<string, Employee[]>>(new Map())

  useEffect(() => {
    const timer = window.setTimeout(async () => {
      const trimmedKeyword = keyword.trim()
      if (!trimmedKeyword) {
        setItems([])
        setError(null)
        setLoading(false)
        setOpen(false)
        return
      }
      const cacheKey = `${purpose || 'default'}:${positionGroupCode || 'all'}:${assessmentMonth || ''}:${trimmedKeyword}`
      const cached = cacheRef.current.get(cacheKey)
      if (cached) {
        setItems(cached)
        setError(null)
        setLoading(false)
        setOpen(true)
        return
      }
      setLoading(true)
      setError(null)
      setOpen(true)
      try {
        const params = new URLSearchParams({
          search: trimmedKeyword,
          limit: '50',
          ...(purpose ? { purpose } : {}),
          ...(positionGroupCode ? { positionGroupCode } : {}),
          ...(assessmentMonth ? { month: assessmentMonth } : {}),
        })
        const data = await apiRequest<Employee[]>(`/employees?${params.toString()}`)
        cacheRef.current.set(cacheKey, data)
        setItems(data)
      } catch (err) {
        setItems([])
        setError(err instanceof Error ? err.message : '搜索失败')
      } finally {
        setLoading(false)
      }
    }, 250)

    return () => window.clearTimeout(timer)
  }, [keyword, purpose, positionGroupCode, assessmentMonth])

  useEffect(() => {
    const closeWhenOutside = (event: MouseEvent) => {
      if (!pickerRef.current?.contains(event.target as Node)) {
        setOpen(false)
      }
    }

    document.addEventListener('mousedown', closeWhenOutside)
    return () => document.removeEventListener('mousedown', closeWhenOutside)
  }, [])

  const selectedIds = new Set([...selected.map((employee) => employee.id), ...excludedIds])
  const selectEmployee = (employee: Employee) => {
    if (selectedIds.has(employee.id)) return
    if (onAddEmployee) {
      onAddEmployee(employee)
    } else {
      onChange([...selected, employee])
    }
    setError(null)
    setKeyword('')
    setItems([])
    setOpen(false)
  }

  return (
    <div ref={pickerRef}>
      <label className="grid gap-2 text-sm">
        <span className="text-[12px] font-semibold tracking-[0.05em] text-[#5f5e5e]">{title}</span>
        <input
          value={keyword}
          onFocus={() => {
            if (keyword.trim()) setOpen(true)
          }}
          onChange={(event) => {
            setKeyword(event.target.value)
            if (event.target.value.trim()) setOpen(true)
          }}
          placeholder="搜索人员"
          onKeyDown={(event) => {
            if (event.key === 'Escape') setOpen(false)
          }}
          className="h-10 rounded border border-[#eeeeee] bg-white px-3 text-[14px] font-semibold text-[#1a1c1c] outline-none transition-colors focus:border-[#0050cb]"
        />
      </label>
      {open && keyword && (
        <div className="mt-2 max-h-56 overflow-y-auto border border-[#eeeeee] bg-white shadow-[0_8px_18px_rgba(0,0,0,0.06)]">
          {loading ? (
            <div className="px-3 py-2 text-sm text-[#5f5e5e]">搜索中...</div>
          ) : error ? (
            <div className="px-3 py-2 text-sm text-red-600">{error}</div>
          ) : items.length === 0 ? (
            <div className="px-3 py-2 text-sm text-[#5f5e5e]">无匹配人员</div>
          ) : (
            items.map((employee) => (
              <button
                key={employee.id}
                type="button"
                disabled={selectedIds.has(employee.id)}
                onClick={() => selectEmployee(employee)}
                className="w-full px-3 py-2.5 text-left text-sm transition-colors hover:bg-[#f9f9f9] disabled:opacity-50"
              >
                <div className="font-semibold text-[#1a1c1c]">{employee.displayName}</div>
                <div className="mt-0.5 truncate text-xs text-[#5f5e5e]">
                  {[
                    employee.departmentName,
                    employee.positionTitle,
                    employee.positionLevel || employee.levelType,
                  ].filter(Boolean).join(' · ')}
                </div>
              </button>
            ))
          )}
        </div>
      )}
      <SelectedChips
        items={selected.map((employee) => ({ id: employee.id, label: employee.displayName }))}
        onRemove={(id) => {
          if (onRemoveEmployee) {
            onRemoveEmployee(id)
          } else {
            onChange(selected.filter((employee) => employee.id !== id))
          }
        }}
      />
    </div>
  )
}

function DepartmentPicker({
  departments,
  selected,
  excludedEmployeeIds = [],
  onChange,
  onDepartmentEmployeesChange,
}: {
  departments: DepartmentOption[]
  selected: string[]
  excludedEmployeeIds?: string[]
  onChange: (items: string[]) => void
  onDepartmentEmployeesChange?: (value: string, checked: boolean, employees: Employee[]) => void
}) {
  const [expanded, setExpanded] = useState<Set<string>>(new Set())
  const [keyword, setKeyword] = useState('')
  const [loadingValue, setLoadingValue] = useState<string | null>(null)
  const [error, setError] = useState<string | null>(null)
  const employeeCacheRef = useRef<Map<string, Employee[]>>(new Map())

  const { roots, childrenByParent, optionByValue, visibleIds } = useMemo(() => {
    const normalizedKeyword = keyword.trim().toLowerCase()
    const byId = new Map<string, DepartmentOption>()
    const children = new Map<string, DepartmentOption[]>()

    departments.forEach((department) => {
      byId.set(department.id, department)
      const parentKey = department.parentId || ''
      const list = children.get(parentKey) || []
      list.push(department)
      children.set(parentKey, list)
    })

    children.forEach((list) => {
      list.sort((a, b) => {
        const countDiff = (b.employeeCount || 0) - (a.employeeCount || 0)
        if (countDiff !== 0) return countDiff
        return a.name.localeCompare(b.name, 'zh-CN')
      })
    })

    const values = new Map<string, DepartmentOption>()
    departments.forEach((department) => {
      if (department.value) values.set(department.value, department)
    })

    const matchedIds = new Set<string>()
    if (normalizedKeyword) {
      departments.forEach((department) => {
        const haystack = [
          department.name,
          department.parentName,
          department.departmentName,
          department.departmentPath,
          department.fullPath,
        ].filter(Boolean)
        if (!matchesPickerSearch(normalizedKeyword, haystack)) return

        let current: DepartmentOption | undefined = department
        while (current) {
          matchedIds.add(current.id)
          current = current.parentId ? byId.get(current.parentId) : undefined
        }
      })
    }

    return {
      roots: children.get('') || [],
      childrenByParent: children,
      optionByValue: values,
      visibleIds: matchedIds,
    }
  }, [departments, keyword])

  const selectedLabels = selected
    .map((value) => optionByValue.get(value))
    .filter((item): item is DepartmentOption => Boolean(item))

  const toggle = (id: string) => {
    setExpanded((current) => {
      const next = new Set(current)
      if (next.has(id)) {
        next.delete(id)
      } else {
        next.add(id)
      }
      return next
    })
  }

  const getDepartmentEmployees = async (value: string) => {
    const cached = employeeCacheRef.current.get(value)
    if (cached) return cached

    const params = new URLSearchParams({
      department: value,
      limit: '1000',
      purpose: 'evaluator',
    })
    const excludedIds = new Set(excludedEmployeeIds)
    const employees = (await apiRequest<Employee[]>(`/employees?${params.toString()}`))
      .filter((employee) => !excludedIds.has(employee.id))
    employeeCacheRef.current.set(value, employees)
    return employees
  }

  const toggleValue = async (value: string, checked: boolean) => {
    if (!checked) {
      onChange(selected.filter((item) => item !== value))
      onDepartmentEmployeesChange?.(value, false, [])
      setError(null)
      return
    }

    setLoadingValue(value)
    setError(null)
    try {
      const employees = await getDepartmentEmployees(value)
      if (employees.length === 0) {
        setError('该部门暂无可选人员')
        return
      }
      onChange(Array.from(new Set([...selected, value])))
      onDepartmentEmployeesChange?.(value, true, employees)
    } catch (err) {
      setError(err instanceof Error ? err.message : '部门人员加载失败')
    } finally {
      setLoadingValue(null)
    }
  }

  const renderNode = (department: DepartmentOption, depth = 0): ReactNode => {
    const children = childrenByParent.get(department.id) || []
    const hasChildren = children.length > 0
    const isExpanded = expanded.has(department.id) || Boolean(keyword.trim())
    const isVisible = !keyword.trim() || visibleIds.has(department.id)
    if (!isVisible) return null

    return (
      <div key={department.id}>
        <div
          className="flex min-h-11 items-center gap-1 px-1 py-1 text-sm transition-colors hover:bg-[#f9f9f9]"
          style={{ paddingLeft: `${8 + depth * 18}px` }}
        >
          <button
            type="button"
            onClick={() => hasChildren && toggle(department.id)}
            className={`flex h-9 w-9 shrink-0 items-center justify-center rounded border text-sm ${
              hasChildren
                ? 'border-[#e2e2e2] text-[#5f5e5e] hover:bg-[#f4f3f3]'
                : 'border-transparent text-transparent'
            }`}
            aria-label={hasChildren ? `${isExpanded ? '收起' : '展开'}${department.name}` : undefined}
            disabled={!hasChildren}
          >
            {hasChildren ? (isExpanded ? '-' : '+') : ''}
          </button>
          {department.selectable !== false && department.value ? (
            <label className="flex min-h-9 min-w-0 flex-1 cursor-pointer items-center justify-between gap-3 rounded px-2">
              <span className="truncate font-semibold text-[#1a1c1c]">{department.name}</span>
              <input
                type="checkbox"
                checked={selected.includes(department.value)}
                disabled={loadingValue === department.value}
                onChange={(event) => {
                  void toggleValue(department.value!, event.target.checked)
                }}
                className="h-5 w-5 shrink-0"
                aria-label={`选择${department.name}`}
              />
            </label>
          ) : (
            <div className="min-h-9 min-w-0 flex-1 px-2 py-2">
              <div className="truncate font-semibold text-[#1a1c1c]">{department.name}</div>
            </div>
          )}
          {department.value && loadingValue === department.value && (
            <span className="text-xs text-[#5f5e5e]">加载中</span>
          )}
        </div>
        {hasChildren && isExpanded && children.map((child) => renderNode(child, depth + 1))}
      </div>
    )
  }

  if (departments.length === 0) return null

  return (
    <div>
      <div className="mb-2 flex items-center justify-between gap-3">
        <div className="text-[12px] font-semibold tracking-[0.05em] text-[#5f5e5e]">部门</div>
        {selected.length > 0 && (
          <button
            type="button"
            onClick={() => {
              selected.forEach((value) => onDepartmentEmployeesChange?.(value, false, []))
              onChange([])
              setError(null)
            }}
            className="text-xs font-semibold text-[#5f5e5e] hover:text-[#1a1c1c]"
          >
            清空
          </button>
        )}
      </div>
      <input
        value={keyword}
        onChange={(event) => setKeyword(event.target.value)}
        placeholder="搜索部门"
        className="mb-2 h-10 w-full rounded border border-[#eeeeee] bg-white px-3 text-[13px] font-semibold text-[#1a1c1c] outline-none transition-colors focus:border-[#0050cb]"
      />
      <div className="max-h-64 overflow-y-auto border border-[#eeeeee] bg-white p-1.5">
        {roots.map((department) => renderNode(department))}
      </div>
      {error && <div className="mt-2 text-xs font-semibold text-[#93000a]">{error}</div>}
      {selectedLabels.length > 0 && (
        <div className="mt-2 flex flex-wrap gap-2">
          {selectedLabels.map((department) => (
            <button
              key={department.value || department.id}
              type="button"
              onClick={() => {
                if (department.value) void toggleValue(department.value, false)
              }}
              className="border border-[#e2e2e2] bg-white px-2.5 py-1 text-xs font-semibold text-[#1a1c1c] hover:bg-[#f9f9f9]"
            >
              {department.fullPath || department.departmentPath || (
                department.parentName && department.parentName !== '全部部门'
                  ? `${department.parentName} / ${department.name}`
                  : department.name
              )} ×
            </button>
          ))}
        </div>
      )}
    </div>
  )
}

function AdminActions({
  onMessage,
}: {
  onMessage: (message: string | null) => void
}) {
  const [busy, setBusy] = useState<string | null>(null)
  const [preview, setPreview] = useState<any | null>(null)
  const [error, setError] = useState<string | null>(null)

  const run = async (key: string, path: string, success: string) => {
    setBusy(key)
    setError(null)
    onMessage(null)
    try {
      const data = await apiRequest<any>(path, { method: 'POST', body: JSON.stringify({}) })
      onMessage(`${success}${data?.upserted != null ? `：${data.upserted} 人` : ''}`)
      if (key === 'sync') setPreview(null)
    } catch (error) {
      setError(error instanceof Error ? error.message : '操作失败')
    } finally {
      setBusy(null)
    }
  }

  const previewSync = async () => {
    setBusy('preview')
    setError(null)
    onMessage(null)
    try {
      setPreview(await apiRequest<any>('/admin/sync-employees/preview', {
        method: 'POST',
        body: JSON.stringify({ limit: 3000 }),
      }))
    } catch (actionError) {
      setError(actionError instanceof Error ? actionError.message : '人员同步影响检查失败')
    } finally {
      setBusy(null)
    }
  }

  return (
    <section className="border border-[#e2e2e2] bg-white px-4 py-4" aria-labelledby="employee-sync-title">
      <h3 id="employee-sync-title" className="text-[16px] font-bold text-[#1a1c1c]">数据维护</h3>
      <p className="mt-1 text-[12px] font-medium leading-5 text-[#727687]">
        先只读检查变更范围，确认后才会更新本地人员档案；历史调研不会被修改。
      </p>
      {error && (
        <div role="alert" className="mt-3 border border-[#ffdad6] bg-[#fff6f4] px-3 py-2 text-[12px] font-semibold leading-5 text-[#93000a]">
          {error}
        </div>
      )}
      {preview && (
        <section aria-label="人员同步影响预览" className="mt-4 border border-[#c2c6d8]">
          <div className="border-b border-[#e2e2e2] bg-[#f7f7f7] px-3 py-3">
            <div className="text-[13px] font-bold text-[#1a1c1c]">同步影响预览</div>
            <div className="mt-1 text-[11px] leading-5 text-[#5f5e5e]">
              数据来源：{preview.source?.name || '上游花名册'}
              {preview.last?.latestLocalProfileSyncedAt
                ? ` · 最近一条本地档案更新于 ${new Date(preview.last.latestLocalProfileSyncedAt).toLocaleString('zh-CN')}`
                : ' · 暂无可用的历史同步时间'}
            </div>
          </div>
          <dl className="grid grid-cols-2 divide-x divide-y divide-[#eeeeee] sm:grid-cols-4">
            {[
              ['预计新增', preview.counts?.created ?? 0],
              ['预计更新', preview.counts?.updated ?? 0],
              ['无需变化', preview.counts?.unchanged ?? 0],
              ['资料兜底', preview.counts?.fallback ?? 0],
            ].map(([label, value]) => (
              <div key={String(label)} className="px-3 py-3">
                <dt className="text-[11px] font-semibold text-[#727687]">{label}</dt>
                <dd className="mt-1 text-[18px] font-bold text-[#1a1c1c]">{String(value)} 人</dd>
              </div>
            ))}
          </dl>
          <div className="px-3 py-3 text-[11px] leading-5 text-[#5f5e5e]">
            <p>
              本次检查 {preview.now?.scannedAccounts ?? 0}/{preview.now?.totalAccounts ?? 0} 个素材库账号，
              正式同步预计写入 {preview.counts?.plannedProfileWrites ?? 0} 份人员档案。
            </p>
            {preview.counts?.fallback > 0 && (
              <p className="mt-1 font-semibold text-[#7a4b00]">
                有 {preview.counts.fallback} 人未匹配上游花名册，将暂用素材库账号资料；建议同步后到“人员分配”确认。
              </p>
            )}
            <p className="mt-1">当前规则不会根据“上游未返回”自动停用人员，因此停用人数不做推测。</p>
          </div>
          <div className="flex flex-wrap justify-end gap-2 border-t border-[#e2e2e2] px-3 py-3">
            <button
              type="button"
              disabled={busy !== null}
              onClick={() => setPreview(null)}
              className="min-h-11 rounded border border-[#c9c9c9] px-3 text-[12px] font-bold text-[#1a1c1c] disabled:opacity-50"
            >
              取消
            </button>
            <button
              type="button"
              disabled={busy !== null}
              onClick={() => void run('sync', '/admin/sync-employees', '人员档案已同步')}
              className="min-h-11 rounded bg-[#1a1c1c] px-4 text-[12px] font-bold text-white disabled:opacity-50"
            >
              {busy === 'sync' ? '正在同步...' : '确认正式同步'}
            </button>
          </div>
        </section>
      )}
      <div className="mt-4 grid grid-cols-2 gap-2">
        <button
          disabled={busy !== null}
          onClick={() => void previewSync()}
          className="min-h-11 rounded border border-[#c9c9c9] px-3 py-2 text-sm font-bold text-[#1a1c1c] hover:border-[#1a1c1c] hover:bg-[#f7f7f7] disabled:opacity-50"
        >
          {busy === 'preview' ? '检查中...' : preview ? '重新检查影响' : '检查同步影响'}
        </button>
        <a
          href="/api/performance-survey/admin/export"
          className="flex min-h-11 items-center justify-center rounded border border-[#c9c9c9] px-3 py-2 text-center text-sm font-bold text-[#1a1c1c] hover:border-[#1a1c1c] hover:bg-[#f7f7f7]"
        >
          导出数据
        </a>
      </div>
    </section>
  )
}

function getNotificationEventLabel(eventType?: string | null) {
  const map: Record<string, string> = {
    'survey.assignment.created': '待评价',
    'survey.assignment.due_reminder': '截止提醒',
    'survey.creator.completed': '完成提醒',
    'survey.result.available': '结果可看',
  }
  return map[String(eventType || '')] || '系统消息'
}

function NotificationList({
  state,
  statusState,
}: {
  state: ApiState<any[]> & { refresh: () => Promise<void> }
  statusState: ApiState<any> & { refresh: () => Promise<void> }
}) {
  const [busyId, setBusyId] = useState<string | null>(null)
  const [showAll, setShowAll] = useState(false)
  const workNotice = statusState.data?.notificationChannel || statusState.data?.workNotice
  const counts = statusState.data?.counts || {}
  const records = state.data || []
  const visibleRecords = showAll ? records : records.slice(0, 6)
  const total = records.length
  const sentCount = Number(counts.sent || counts.succeeded || 0)
  const failedCount = Number(counts.exhausted || counts.skipped || counts.failed || 0)

  const retry = async (id: string) => {
    setBusyId(id)
    try {
      await apiRequest(`/admin/notifications/${id}/retry`, { method: 'POST', body: JSON.stringify({}) })
      await state.refresh()
    } finally {
      setBusyId(null)
    }
  }

  return (
    <section className="border border-[#e2e2e2] bg-white px-4 py-4">
      <div className="flex items-center justify-between">
        <div>
          <h3 className="text-[16px] font-bold text-[#1a1c1c]">钉钉消息</h3>
          <div className="mt-1 text-xs font-medium text-[#727687]">{total} 条 · {sentCount} 已发送 · {failedCount} 异常</div>
        </div>
        <button
          onClick={async () => {
            await Promise.all([state.refresh(), statusState.refresh()])
          }}
          className="min-h-11 rounded px-3 py-1.5 text-sm font-bold text-[#0050cb] hover:bg-[#f4f7ff]"
        >
          刷新
        </button>
      </div>
      {workNotice && (
        <div className={`mt-3 inline-flex rounded-full px-3 py-1 text-xs font-semibold ${
          workNotice.ready
            ? 'bg-[#ecfdf3] text-[#039855]'
            : 'bg-[#fff7ed] text-[#b45309]'
        }`}>
          {workNotice.ready
            ? workNotice.channel === 'robot_oto' ? '机器人单聊已接入' : '工作通知已接入'
            : workNotice.channel === 'robot_oto' ? '机器人单聊未接入' : '工作通知未接入'}
        </div>
      )}
      <div className="mt-3 divide-y divide-[#eef1f6] dark:divide-gray-800">
        {state.loading && <div role="status" aria-live="polite" className="text-sm text-[#727687]">加载中...</div>}
        {state.error && <div role="alert" className="text-sm font-semibold text-[#93000a]">{state.error}</div>}
        {records.length === 0 && !state.loading && <div className="py-3 text-sm text-[#727687]">暂无消息记录</div>}
        {visibleRecords.map((item) => {
          const isRetryable = ['retrying', 'exhausted', 'skipped'].includes(item.status)
          return (
            <div key={item.id} className="py-3">
              <div className="flex items-start justify-between gap-3">
                <div className="min-w-0">
                  <div className="truncate text-sm font-bold text-[#1a1c1c]">{item.title}</div>
                  <div className="mt-1 truncate text-xs text-[#727687]">
                    {item.recipientName || '收件人缺失'} · {getNotificationEventLabel(item.eventType)}
                  </div>
                  {item.lastError && (
                    <details className="mt-1 hidden text-xs text-[#727687] sm:block">
                      <summary className="cursor-pointer list-none font-semibold text-[#93000a]">详情</summary>
                      <div className="mt-1 break-words text-[#93000a]">{item.lastError}</div>
                    </details>
                  )}
                </div>
                <div className="flex shrink-0 flex-col items-end gap-2">
                  <StatusBadge status={item.status} />
                  {isRetryable && (
                    <button
                      disabled={busyId === item.id}
                      onClick={() => retry(item.id)}
                      className="min-h-11 rounded border border-[#c9c9c9] px-3 py-1 text-xs font-bold text-[#1a1c1c] hover:border-[#1a1c1c] hover:bg-[#f7f7f7] disabled:opacity-50"
                    >
                      补发
                    </button>
                  )}
                </div>
              </div>
            </div>
          )
        })}
      </div>
      {records.length > 6 && (
        <button
          type="button"
          onClick={() => setShowAll((current) => !current)}
          className="mt-3 min-h-11 w-full rounded border border-[#c9c9c9] px-3 text-[12px] font-bold text-[#1a1c1c] hover:border-[#1a1c1c] hover:bg-[#f7f7f7]"
        >
          {showAll ? '收起消息记录' : `查看全部 ${records.length} 条消息`}
        </button>
      )}
    </section>
  )
}

function SurveySubmit({ surveyId, session, canCreateSurvey }: { surveyId: string; session: any; canCreateSurvey: boolean }) {
  const router = useRouter()
  const searchParams = useSearchParams()
  const targetIdParam = searchParams.get('targetId')
  const detail = useApi<any>(`/surveys/${surveyId}`, [surveyId])
  const [targetId, setTargetId] = useState(targetIdParam || '')
  const [scores, setScores] = useState<Record<string, number>>({})
  const [comment, setComment] = useState('')
  const [message, setMessage] = useState<string | null>(null)
  const [submitting, setSubmitting] = useState(false)
  const [accountMenuOpen, setAccountMenuOpen] = useState(false)

  const targets = useMemo(
    () => (detail.data?.targets || []).filter((target: any) => target.currentAssignment || target.canUploadWorkItems),
    [detail.data],
  )
  const activeTargetId = targetId || targets[0]?.id || ''
  const template = detail.data?.template as Template | undefined
  const questions = useMemo(() => template?.questions || [], [template])

  useEffect(() => {
    if (!targetId && targets[0]?.id) setTargetId(targets[0].id)
  }, [targets, targetId])

  useEffect(() => {
    setScores({})
    setComment('')
    setMessage(null)
    setAccountMenuOpen(false)
  }, [activeTargetId, questions])

  const submit = async () => {
    const hasUnratedQuestion = questions.some((question) => !Number.isFinite(scores[question.id]))
    if (questions.length === 0 || hasUnratedQuestion) {
      setMessage('请逐项完成评分后再提交')
      return
    }
    setSubmitting(true)
    setMessage(null)
    try {
      await apiRequest(`/surveys/${surveyId}/responses`, {
        method: 'POST',
        body: JSON.stringify({ targetId: activeTargetId, scores, comment }),
      })
      setMessage('提交成功')
      await detail.refresh()
    } catch (error) {
      setMessage(error instanceof Error ? error.message : '提交失败')
    } finally {
      setSubmitting(false)
    }
  }

  if (detail.loading) return <SurveyOpeningScreen />
  if (detail.error) {
    return (
      <MainPanel>
        <SurveyUnavailablePanel title="问卷加载失败" message={detail.error} onRetry={detail.refresh} />
      </MainPanel>
    )
  }
  if (!detail.data) return null
  if (targets.length === 0) {
    return <MainPanel><SurveyUnavailablePanel message="当前账号没有可填写或可提交作品的任务" /></MainPanel>
  }

  const activeTarget = detail.data.targets.find((target: any) => target.id === activeTargetId)
  const submitted = activeTarget?.currentAssignment?.status === 'submitted'
  const submittedScores = activeTarget?.currentAssignment?.response?.scores
  const progress = calculatePerformanceSurveyResponseProgress({
    questions,
    draftScores: scores,
    submittedScores: submittedScores && typeof submittedScores === 'object' ? submittedScores : {},
    submitted,
  })
  const surveyStatusLabel = getSurveyStatusLabel(detail.data.status)
  const dueLabel = detail.data.dueAt ? `截止 ${formatDate(detail.data.dueAt)}` : '无截止时间'
  const viewer = session?.user || {}
  const viewerName = String(viewer.name || viewer.realName || viewer.username || '当前用户')
  const viewerAvatar = typeof viewer.avatar === 'string' && viewer.avatar
    ? viewer.avatar
    : typeof viewer.image === 'string'
      ? viewer.image
      : ''
  const goToSurveyTab = (nextTab: PerformanceSurveyDashboardTab) => {
    setAccountMenuOpen(false)
    router.push(`/performance-survey?tab=${encodeURIComponent(nextTab)}`)
  }
  const changeTarget = (nextTargetId: string) => {
    setScores({})
    setComment('')
    setMessage(null)
    setAccountMenuOpen(false)
    setTargetId(nextTargetId)
  }

  if (isVisualTemplate(template)) {
    return (
      <VisualCaseSurvey
        surveyId={surveyId}
        detail={detail}
        template={template}
        targets={targets}
        activeTarget={activeTarget}
        activeTargetId={activeTargetId}
        setTargetId={changeTarget}
        viewerName={viewerName}
        viewerAvatar={viewerAvatar}
        dueLabel={dueLabel}
        surveyStatusLabel={surveyStatusLabel}
      />
    )
  }

  return (
    <main className="min-h-[100dvh] bg-white text-[#111827]">
      <MobileSurveyRangeStyles />
      <div className="mx-auto flex max-w-[430px] flex-col px-4 pb-[calc(92px+env(safe-area-inset-bottom))] pt-3 sm:my-6 sm:rounded-xl sm:border sm:border-[#e5eaf2] sm:bg-white sm:p-5 sm:shadow-[0_24px_80px_rgba(15,23,42,0.14)]">
        <section className="mb-3 overflow-hidden rounded-xl border border-[#dfe6f0] bg-white px-4 py-3.5 shadow-[0_10px_28px_rgba(15,23,42,0.06)]">
          <div className="flex items-center justify-between gap-3">
            <span className="text-[13px] font-semibold text-[#1677ff]">考核调研问卷</span>
            <span className="shrink-0 rounded-full bg-[#eef6ff] px-3 py-1 text-[12px] font-semibold text-[#1677ff]">
              {surveyStatusLabel}
            </span>
          </div>
          <h1 className="mt-2.5 break-words text-[1.22rem] font-semibold leading-[1.22] tracking-[-0.01em] text-[#101828]">
            {detail.data.title}
          </h1>
          <div className="mt-2.5 space-y-1 text-[12px] font-medium leading-5 text-[#667085]">
            <p className="break-words text-[#4b5565]">评价对象：{activeTarget?.targetName || '待选择'}</p>
            <p>{dueLabel}</p>
          </div>
          <div className="mt-3 rounded-2xl bg-[#f6f8fb] px-3.5 py-2.5">
            <div className="flex items-center justify-between text-[12px] font-semibold text-[#667085]">
              <span>填写进度</span>
              <span className="text-[#101828]">{progress.ratedCount}/{progress.totalCount} · {progress.totalScore} 分</span>
            </div>
            <div className="mt-2 h-1.5 overflow-hidden rounded-full bg-[#e5edf6]">
              <div
                className="h-full rounded-full bg-[#1677ff] transition-all"
                style={{ width: `${progress.percent}%` }}
              />
            </div>
          </div>
        </section>

        {targets.length > 1 && (
          <label className="mb-4 grid gap-2 rounded-xl border border-[#e3eaf3] bg-white p-4 text-sm shadow-[0_12px_34px_rgba(15,23,42,0.05)]">
            <span className="font-semibold text-[#4b5565]">切换评价对象</span>
            <select
              value={activeTargetId}
              onChange={(event) => changeTarget(event.target.value)}
              className="min-h-11 rounded-[10px] border border-[#d9e0ea] bg-white px-3 py-2 text-base font-medium text-[#111827] outline-none transition focus:border-[#1677ff] focus:ring-4 focus:ring-[#1677ff]/10"
            >
              {targets.map((target: any) => (
                <option key={target.id} value={target.id}>{target.targetName}</option>
              ))}
            </select>
          </label>
        )}

        {submitted ? (
          <SubmittedResponseDetail
            questions={questions}
            template={template}
            response={activeTarget?.currentAssignment?.response}
            submittedAt={activeTarget?.currentAssignment?.submittedAt}
          />
        ) : detail.data.status !== 'open' ? (
          <SurveyUnavailablePanel message="该调研未开放或已关闭" />
        ) : (
          <div className="space-y-3">
            {questions.map((question, index) => {
              const maxScore = getQuestionMaxScore(template, question)
              const isRated = Number.isFinite(scores[question.id])
              const value = isRated ? scores[question.id] : 0
              const scorePercent = Math.max(0, Math.min(100, (value / maxScore) * 100))
              const accentColor = getQuestionAccentColor(index)
              return (
                <section key={question.id} className="rounded-xl border border-[#dfe6f0] bg-white px-4 py-4 shadow-[0_12px_34px_rgba(15,23,42,0.05)]">
                  <div className="grid grid-cols-[32px_minmax(0,1fr)_auto] items-start gap-3">
                    <span
                      className="mt-0.5 flex h-7 w-7 items-center justify-center rounded-full text-[14px] font-semibold leading-none text-white"
                      style={{ backgroundColor: accentColor }}
                    >
                      {index + 1}
                    </span>
                    <div className="min-w-0">
                      <div className="text-[11px] font-semibold text-[#98a2b3]">问题 {index + 1}</div>
                      <h2 className="mt-1 break-words text-[17px] font-semibold leading-6 text-[#111827]">{question.title}</h2>
                      {question.description && (
                        <p className="mt-1 text-[13px] font-medium leading-5 text-[#7b8494]">{question.description}</p>
                      )}
                    </div>
                    <div className="rounded-xl bg-[#f6f8fb] px-2.5 py-1.5 text-right">
                      <span className="text-[15px] font-semibold leading-none" style={{ color: accentColor }}>{isRated ? value : '未评分'}</span>
                      {isRated && <span className="ml-0.5 text-[11px] font-medium text-[#98a2b3]">/{maxScore}</span>}
                    </div>
                  </div>

                  <input
                    type="range"
                    min={0}
                    max={maxScore}
                    value={value}
                    data-rated={isRated ? 'true' : 'false'}
                    aria-label={`${question.title}评分，满分 ${maxScore} 分`}
                    onPointerDown={() => {
                      if (!isRated) setScores((current) => ({ ...current, [question.id]: 0 }))
                    }}
                    onKeyDown={(event) => {
                      if (!isRated && (event.key === 'ArrowLeft' || event.key === 'Home')) {
                        setScores((current) => ({ ...current, [question.id]: 0 }))
                      }
                    }}
                    onChange={(event) => setScores((current) => ({ ...current, [question.id]: Number(event.target.value) }))}
                    className="survey-score-range mt-4 w-full"
                    style={{ '--score-percent': `${scorePercent}%`, '--score-color': accentColor } as CSSProperties}
                  />
                  <div className="mt-2 grid grid-cols-5 text-[11px] font-medium text-[#9aa3b2]">
                    <span>0</span>
                    <span className="text-center">{Math.round(maxScore * 0.25)}</span>
                    <span className="text-center">{Math.round(maxScore * 0.5)}</span>
                    <span className="text-center">{Math.round(maxScore * 0.75)}</span>
                    <span className="text-right">{maxScore}</span>
                  </div>
                </section>
              )
            })}

            <section className="rounded-xl border border-[#dfe6f0] bg-white px-4 py-4 shadow-[0_12px_34px_rgba(15,23,42,0.05)]">
              <label className="grid gap-3">
                <span className="text-[15px] font-semibold text-[#111827]">补充评价</span>
                <textarea
                  value={comment}
                  onChange={(event) => setComment(event.target.value.slice(0, 300))}
                  rows={4}
                  placeholder="可以从优点、待改进或建议等方面补充说明..."
                  className="min-h-[92px] resize-none rounded-[9px] border border-[#d9e0ea] px-3 py-2.5 text-[14px] leading-6 text-[#111827] outline-none transition placeholder:text-[#c0c7d2] focus:border-[#1677ff] focus:ring-4 focus:ring-[#1677ff]/10"
                />
                <span className="text-right text-[11px] font-medium text-[#9aa3b2]">{comment.length} / 300</span>
              </label>
            </section>

            {message && <div className="rounded-[10px] bg-[#eef6ff] px-3 py-2 text-sm font-medium text-[#1677ff]">{message}</div>}

            <div className="fixed inset-x-0 bottom-0 z-20 border-t border-[#e5edf6] bg-white/95 px-5 pb-[calc(14px+env(safe-area-inset-bottom))] pt-3 backdrop-blur sm:sticky sm:-mx-5 sm:mt-1">
              <div className="mx-auto grid max-w-[390px] grid-cols-[minmax(0,0.42fr)_minmax(0,1fr)] gap-3">
                <div className="relative min-w-0">
                  {accountMenuOpen && (
                    <div className="absolute bottom-[calc(100%+10px)] left-0 z-30 w-[196px] overflow-hidden rounded-lg border border-[#dbe5f2] bg-white shadow-[0_18px_46px_rgba(15,23,42,0.16)]">
                      <button
                        type="button"
                        onClick={() => goToSurveyTab('personal')}
                        className="block w-full px-4 py-3 text-left text-[14px] font-semibold text-[#101828] active:bg-[#f3f7fc]"
                      >
                        个人看板
                      </button>
                      <button
                        type="button"
                        onClick={() => goToSurveyTab('public')}
                        className="block w-full border-t border-[#edf2f7] px-4 py-3 text-left text-[14px] font-semibold text-[#101828] active:bg-[#f3f7fc]"
                      >
                        公共看板
                      </button>
                      {canCreateSurvey && (
                        <button
                          type="button"
                          onClick={() => goToSurveyTab('manage')}
                          className="block w-full border-t border-[#edf2f7] px-4 py-3 text-left text-[14px] font-semibold text-[#101828] active:bg-[#f3f7fc]"
                        >
                          发起调研
                        </button>
                      )}
                    </div>
                  )}
                  <button
                    type="button"
                    aria-label="打开账户菜单"
                    aria-haspopup="menu"
                    aria-expanded={accountMenuOpen}
                    onClick={() => setAccountMenuOpen((open) => !open)}
                    className="flex min-h-[52px] w-full min-w-0 items-center gap-2.5 rounded-[16px] border border-[#dbe5f2] bg-[#f8fbff] px-2.5 text-left shadow-[0_8px_18px_rgba(15,23,42,0.06)] transition active:scale-[0.99]"
                  >
                    <span className="flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-[#eaf3ff] text-[13px] font-semibold text-[#1677ff]">
                      {viewerAvatar ? (
                        <Image
                          src={viewerAvatar}
                          alt={viewerName}
                          width={40}
                          height={40}
                          unoptimized
                          className="h-full w-full object-cover"
                        />
                      ) : (
                        getSurveyInitials(viewerName)
                      )}
                    </span>
                    <span className="min-w-0 flex-1 truncate text-[14px] font-semibold leading-5 text-[#101828]">{viewerName}</span>
                  </button>
                </div>
                <button
                  disabled={submitting || !activeTargetId || questions.length === 0 || progress.ratedCount !== questions.length}
                  onClick={submit}
                  className="min-h-[52px] w-full rounded-[16px] bg-[#1677ff] px-4 py-2.5 text-[17px] font-semibold text-white shadow-[0_12px_24px_rgba(22,119,255,0.28)] transition active:scale-[0.99] disabled:bg-[#9ec9ff] disabled:shadow-none"
                >
                  {submitting ? '提交中...' : '提交评价'}
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </main>
  )
}

function SubmittedResponseDetail({
  questions,
  template,
  response,
  submittedAt,
}: {
  questions: Template['questions']
  template?: Template
  response?: any
  submittedAt?: string | Date | null
}) {
  const responseScores = response?.scores && typeof response.scores === 'object'
    ? response.scores as Record<string, unknown>
    : {}
  const scoreOf = (questionId: string) => {
    const value = Number(responseScores[questionId])
    return Number.isFinite(value) ? value : 0
  }
  const formatScore = (value: unknown) => {
    const numberValue = Number(value)
    if (!Number.isFinite(numberValue)) return '-'
    return Number.isInteger(numberValue) ? String(numberValue) : numberValue.toFixed(1)
  }
  const submittedLabel = submittedAt || response?.createdAt
    ? formatDate(submittedAt || response?.createdAt)
    : '已提交'

  return (
    <div className="space-y-3">
      <section className="rounded-xl border border-[#dfe6f0] bg-white px-4 py-4 shadow-[0_12px_34px_rgba(15,23,42,0.05)]">
        <div className="flex items-center justify-between gap-3">
          <div>
            <div className="text-[13px] font-semibold text-[#16a34a]">已提交</div>
            <div className="mt-1 text-[12px] font-medium text-[#667085]">{submittedLabel}</div>
          </div>
          <Link
            href="/performance-survey?tab=personal&workspace=submitted"
            className="shrink-0 rounded-full border border-[#dbe5f2] bg-[#f8fbff] px-3 py-1.5 text-[12px] font-semibold text-[#101828]"
          >
            返回个人看板
          </Link>
        </div>
        <div className="mt-4 grid grid-cols-1 gap-2">
          <div className="rounded-2xl bg-[#f6f8fb] px-3 py-3">
            <div className="text-[11px] font-semibold text-[#667085]">得分</div>
            <div className="mt-1 text-[22px] font-semibold text-[#101828]">{formatScore(response?.totalScore)}</div>
          </div>
        </div>
      </section>

      {questions.map((question, index) => {
        const maxScore = getQuestionMaxScore(template, question)
        const value = scoreOf(question.id)
        const scorePercent = Math.max(0, Math.min(100, (value / maxScore) * 100))
        const accentColor = getQuestionAccentColor(index)
        return (
          <section key={question.id} className="rounded-xl border border-[#dfe6f0] bg-white px-4 py-4 shadow-[0_12px_34px_rgba(15,23,42,0.05)]">
            <div className="grid grid-cols-[32px_minmax(0,1fr)_auto] items-start gap-3">
              <span
                className="mt-0.5 flex h-7 w-7 items-center justify-center rounded-full text-[14px] font-semibold leading-none text-white"
                style={{ backgroundColor: accentColor }}
              >
                {index + 1}
              </span>
              <div className="min-w-0">
                <div className="text-[11px] font-semibold text-[#98a2b3]">问题 {index + 1}</div>
                <h2 className="mt-1 break-words text-[17px] font-semibold leading-6 text-[#111827]">{question.title}</h2>
                {question.description && (
                  <p className="mt-1 text-[13px] font-medium leading-5 text-[#7b8494]">{question.description}</p>
                )}
              </div>
              <div className="rounded-xl bg-[#f6f8fb] px-2.5 py-1.5 text-right">
                <span className="text-[18px] font-semibold leading-none" style={{ color: accentColor }}>{formatScore(value)}</span>
                <span className="ml-0.5 text-[11px] font-medium text-[#98a2b3]">/{maxScore}</span>
              </div>
            </div>
            <div className="mt-4 h-1.5 overflow-hidden rounded-full bg-[#e5edf6]">
              <div
                className="h-full rounded-full"
                style={{ width: `${scorePercent}%`, backgroundColor: accentColor }}
              />
            </div>
            <div className="mt-2 grid grid-cols-5 text-[11px] font-medium text-[#9aa3b2]">
              <span>0</span>
              <span className="text-center">{Math.round(maxScore * 0.25)}</span>
              <span className="text-center">{Math.round(maxScore * 0.5)}</span>
              <span className="text-center">{Math.round(maxScore * 0.75)}</span>
              <span className="text-right">{maxScore}</span>
            </div>
          </section>
        )
      })}

      {response?.comment && (
        <section className="rounded-xl border border-[#dfe6f0] bg-white px-4 py-4 shadow-[0_12px_34px_rgba(15,23,42,0.05)]">
          <div className="text-[15px] font-semibold text-[#111827]">补充评价</div>
          <p className="mt-3 whitespace-pre-wrap text-[14px] leading-6 text-[#4b5565]">{response.comment}</p>
        </section>
      )}
    </div>
  )
}

function VisualCaseSurvey({
  surveyId,
  detail,
  template,
  targets,
  activeTarget,
  activeTargetId,
  setTargetId,
  viewerName,
  viewerAvatar,
  dueLabel,
  surveyStatusLabel,
}: {
  surveyId: string
  detail: ApiState<any> & { refresh: () => Promise<void> }
  template: Template | undefined
  targets: any[]
  activeTarget: any
  activeTargetId: string
  setTargetId: (id: string) => void
  viewerName: string
  viewerAvatar: string
  dueLabel: string
  surveyStatusLabel: string
}) {
  const requiredCount = Number(template?.requiredWorkItemCount || 3)
  const workItems = activeTarget?.workItems || []
  const canUpload = Boolean(activeTarget?.canUploadWorkItems && ['draft', 'open'].includes(detail.data?.status))
  const canCreateWorkItem = activeTarget?.canCreateWorkItem === true
    || (activeTarget?.canCreateWorkItem == null && canUpload && workItems.length < requiredCount)
  const showUploadProgress = canUpload
    && (detail.data?.status === 'draft' || workItems.length < requiredCount)
  const workflowRole = String(activeTarget?.currentAssignment?.workflowRole || '')
  const isSelfWorkflow = workflowRole === 'self' || workflowRole === 'self_visual_final'
  const canScore = Boolean(
    activeTarget?.currentAssignment
    && detail.data?.status === 'open'
    && detail.data?.canSubmit !== false,
  )
  const submitted = activeTarget?.currentAssignment?.status === 'submitted'
  const [publishing, setPublishing] = useState(false)
  const [publishError, setPublishError] = useState<string | null>(null)
  const [scoreDrafts, setScoreDrafts] = useState<Record<string, { scores: Record<string, number>; comment: string }>>({})
  const [submittingAllScores, setSubmittingAllScores] = useState(false)
  const [scoreSubmitMessage, setScoreSubmitMessage] = useState<string | null>(null)
  const draftReadyToPublish = detail.data?.status === 'draft'
    && Boolean(detail.data?.canManage)
    && workItems.length >= requiredCount
  const questions = template?.questions || []
  const scoreProgress = calculatePerformanceSurveyWorkItemProgress({
    workItems,
    questions,
    scoreDrafts,
    assignmentId: activeTarget?.currentAssignment?.id,
  })
  const completedScores = scoreProgress.completedCount
  const unscoredWorkItemIdSet = new Set(scoreProgress.unscoredWorkItemIds)
  const unscoredWorkItems = workItems.filter((item: any) => unscoredWorkItemIdSet.has(item.id))
  const hasUnsubmittedCompletedDraft = scoreProgress.completedCount > scoreProgress.persistedCount
  const allUnscoredWorkItemsRated = unscoredWorkItems.length > 0
    && unscoredWorkItems.every((item: any) => questions.every((question) => (
      Number.isFinite(scoreDrafts[item.id]?.scores?.[question.id])
    )))
  const canSubmitAllScores = canScore
    && workItems.length === requiredCount
    && unscoredWorkItems.length > 0

  const updateScoreDraft = (workItemId: string, next: { scores: Record<string, number>; comment: string }) => {
    setScoreDrafts((current) => ({ ...current, [workItemId]: next }))
    setScoreSubmitMessage(null)
  }

  const publishDraft = async () => {
    if (!draftReadyToPublish || publishing) return
    setPublishing(true)
    setPublishError(null)
    try {
      await apiRequest(`/surveys/${surveyId}`, {
        method: 'PATCH',
        body: JSON.stringify({ status: 'open' }),
      })
      await detail.refresh()
    } catch (error) {
      setPublishError(error instanceof Error ? error.message : '发布失败')
    } finally {
      setPublishing(false)
    }
  }

  const submitAllScores = async () => {
    if (!canSubmitAllScores || submittingAllScores) return
    if (!allUnscoredWorkItemsRated) {
      setScoreSubmitMessage('请完成全部案例的每一项评分后再统一提交')
      return
    }

    setSubmittingAllScores(true)
    setScoreSubmitMessage(null)
    try {
      await apiRequest(`/surveys/${surveyId}/work-item-scores`, {
        method: 'POST',
        body: JSON.stringify({
          items: unscoredWorkItems.map((item: any) => ({
            workItemId: item.id,
            scores: scoreDrafts[item.id].scores,
            comment: scoreDrafts[item.id].comment,
          })),
          finalComment: '',
        }),
      })
      await detail.refresh()
      setScoreSubmitMessage('全部案例评分已提交')
    } catch (error) {
      setScoreSubmitMessage(`提交失败：${error instanceof Error ? error.message : '请重试'}`)
    } finally {
      setSubmittingAllScores(false)
    }
  }

  return (
    <main className="min-h-[100dvh] bg-white text-[#111827]">
      <MobileSurveyRangeStyles />
      <div className="mx-auto flex max-w-[430px] flex-col px-4 pb-[calc(92px+env(safe-area-inset-bottom))] pt-3 sm:my-6 sm:rounded-xl sm:border sm:border-[#e5eaf2] sm:bg-white sm:p-5 sm:shadow-[0_24px_80px_rgba(15,23,42,0.14)]">
        <section className="mb-3 rounded-xl border border-[#dfe6f0] bg-white px-4 py-4 shadow-[0_10px_28px_rgba(15,23,42,0.06)]">
          <div className="flex items-center justify-between gap-3">
            <span className="text-[13px] font-semibold text-[#1677ff]">{template?.shortName || '视觉评分'}</span>
            <span className="shrink-0 rounded-full bg-[#eef6ff] px-3 py-1 text-[12px] font-semibold text-[#1677ff]">
              {surveyStatusLabel}
            </span>
          </div>
          <h1 className="mt-2.5 break-words text-[1.22rem] font-semibold leading-[1.22] tracking-[-0.01em] text-[#101828]">
            {detail.data?.title}
          </h1>
          <div className="mt-2.5 space-y-1 text-[12px] font-medium leading-5 text-[#667085]">
            <p className="break-words text-[#4b5565]">被考核人：{activeTarget?.targetName || '待选择'}</p>
            <p>{dueLabel}</p>
          </div>
          <div className="mt-3 rounded-2xl bg-[#f6f8fb] px-3.5 py-2.5">
            <div className="flex items-center justify-between text-[12px] font-semibold text-[#667085]">
              <span>{showUploadProgress ? '案例提交' : '评分完成度'}</span>
              <span className="text-[#101828]">
                {showUploadProgress
                  ? `${workItems.length}/${requiredCount}`
                  : `${completedScores}/${requiredCount} · ${formatNullableScore(scoreProgress.totalScore)} 分`}
              </span>
            </div>
            <div className="mt-2 h-1.5 overflow-hidden rounded-full bg-[#e5edf6]">
              <div
                className="h-full rounded-full bg-[#1677ff] transition-all"
                style={{ width: `${Math.min(100, ((showUploadProgress ? workItems.length : completedScores) / Math.max(1, requiredCount)) * 100)}%` }}
              />
            </div>
            {!showUploadProgress && hasUnsubmittedCompletedDraft && !submitted && (
              <div className="mt-2 text-[11px] font-medium text-[#667085]">已完成的案例评分尚未统一提交</div>
            )}
          </div>
        </section>

        {targets.length > 1 && (
          <label className="mb-4 grid gap-2 rounded-xl border border-[#e3eaf3] bg-white p-4 text-sm shadow-[0_12px_34px_rgba(15,23,42,0.05)]">
            <span className="font-semibold text-[#4b5565]">切换对象</span>
            <select
              value={activeTargetId}
              onChange={(event) => setTargetId(event.target.value)}
              className="min-h-11 rounded-[10px] border border-[#d9e0ea] bg-white px-3 py-2 text-base font-medium text-[#111827] outline-none transition focus:border-[#1677ff] focus:ring-4 focus:ring-[#1677ff]/10"
            >
              {targets.map((target: any) => (
                <option key={target.id} value={target.id}>{target.targetName}</option>
              ))}
            </select>
          </label>
        )}

        {canCreateWorkItem && (
          <WorkItemUploadForm
            key={activeTargetId}
            surveyId={surveyId}
            targetId={activeTargetId}
            onUploaded={detail.refresh}
          />
        )}

        {detail.data?.status === 'draft' && (
          <section className="mb-3 rounded-xl border border-[#dfe6f0] bg-[#f8faff] px-4 py-4">
            <div className="text-[14px] font-semibold text-[#101828]">
              {draftReadyToPublish
                ? '作品已完整，确认发布后才会通知评分人'
                : `当前为未发布草稿，还需上传 ${Math.max(0, requiredCount - workItems.length)} 个案例`}
            </div>
            {publishError && <div className="mt-2 text-sm font-medium text-[#d92d20]">{publishError}</div>}
            {draftReadyToPublish && (
              <button
                type="button"
                disabled={publishing}
                onClick={publishDraft}
                className="mt-3 w-full rounded-[12px] bg-[#1677ff] px-4 py-2.5 text-sm font-semibold text-white disabled:bg-[#9ec9ff]"
              >
                {publishing ? '发布中...' : '确认发布调研'}
              </button>
            )}
          </section>
        )}

        {detail.data?.status === 'open' && activeTarget?.currentAssignment && !submitted && (
          <section className={`mb-3 rounded-xl border px-4 py-3 text-[13px] font-medium leading-5 ${
            canScore
              ? 'border-[#d9e7ff] bg-[#f8fbff] text-[#3f4b5e]'
              : 'border-[#f2d184] bg-[#fffaf0] text-[#8a4b08]'
          }`}>
            {isSelfWorkflow
              ? '当前为被考核人自评阶段。请完成全部案例评分并统一提交；提交后系统才会通知并开放主管与元泽评分。'
              : canScore
                ? '被考核人已完成自评，现在可以评分。最终考核分以元泽评分为准。'
                : '等待被考核人完成自评，当前暂不可评分；自评提交后系统会自动开放并通知你。'}
          </section>
        )}

        {workItems.length === 0 && (
          ['draft', 'open'].includes(detail.data?.status) ? (
            <div className="rounded-xl border border-dashed border-[#d9e0ea] bg-white px-4 py-10 text-center text-[15px] font-semibold text-[#667085]">
              {canUpload ? '请先上传案例图片' : '等待被考核人提交案例'}
            </div>
          ) : (
            <SurveyUnavailablePanel message="该调研未开放或已关闭" />
          )
        )}

        <div className="space-y-3">
          {workItems.map((item: any, index: number) => (
              <VisualWorkItemCard
              key={`${activeTargetId}-${item.id}`}
              item={item}
                index={index}
                template={template}
                canScore={canScore && !submitted}
                assignmentId={activeTarget?.currentAssignment?.id}
                scoreDraft={scoreDrafts[item.id] || { scores: {}, comment: '' }}
                onScoreDraftChange={(next) => updateScoreDraft(item.id, next)}
              />
            ))}
          </div>

        {canSubmitAllScores && (
          <section className="mt-4 rounded-xl border border-[#d9e7ff] bg-[#f8fbff] px-4 py-4">
            <div className="flex items-center justify-between gap-3 text-sm">
              <span className="font-semibold text-[#101828]">统一提交全部案例评分</span>
              <span className="shrink-0 font-semibold text-[#1677ff]">
                {allUnscoredWorkItemsRated ? '评分已完整' : '请完成全部评分'}
              </span>
            </div>
            <p className="mt-1.5 text-[12px] leading-5 text-[#667085]">
              将一次性提交 {unscoredWorkItems.length} 个尚未评分的案例。
            </p>
            {scoreSubmitMessage && (
              <div
                className={`mt-2 text-sm font-medium ${
                  scoreSubmitMessage.includes('失败') || scoreSubmitMessage.includes('请完成')
                    ? 'text-[#d92d20]'
                    : 'text-[#1677ff]'
                }`}
                aria-live="polite"
              >
                {scoreSubmitMessage}
              </div>
            )}
            <button
              type="button"
              disabled={submittingAllScores || !allUnscoredWorkItemsRated}
              onClick={submitAllScores}
              className="mt-3 w-full rounded-[14px] bg-[#1677ff] px-4 py-3 text-[15px] font-semibold text-white disabled:bg-[#9ec9ff]"
            >
              {submittingAllScores ? '统一提交中...' : `提交全部案例评分（${unscoredWorkItems.length}）`}
            </button>
          </section>
        )}

        <div className="fixed inset-x-0 bottom-0 z-20 border-t border-[#e5edf6] bg-white/95 px-5 pb-[calc(14px+env(safe-area-inset-bottom))] pt-3 backdrop-blur sm:sticky sm:-mx-5 sm:mt-3">
          <div className="mx-auto flex max-w-[390px] items-center justify-between gap-3">
            <div className="flex min-w-0 items-center gap-2.5">
              <span className="flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-[#eaf3ff] text-[13px] font-semibold text-[#1677ff]">
                {viewerAvatar ? (
                  <Image src={viewerAvatar} alt={viewerName} width={40} height={40} unoptimized className="h-full w-full object-cover" />
                ) : (
                  getSurveyInitials(viewerName)
                )}
              </span>
              <span className="min-w-0 truncate text-[14px] font-semibold text-[#101828]">{viewerName}</span>
            </div>
            <div className="flex shrink-0 items-center gap-2">
              <Link
                href="/"
                target="_top"
                className="rounded-[12px] border border-[#dbe5f2] bg-white px-3 py-2.5 text-[13px] font-semibold text-[#101828]"
              >
                素材库
              </Link>
              <Link
                href="/performance-survey?tab=personal&workspace=pending"
                className="rounded-[14px] bg-[#1677ff] px-4 py-3 text-[14px] font-semibold text-white shadow-[0_12px_24px_rgba(22,119,255,0.22)]"
              >
                个人看板
              </Link>
            </div>
          </div>
        </div>
      </div>
    </main>
  )
}

function WorkItemUploadForm({
  surveyId,
  targetId,
  onUploaded,
}: {
  surveyId: string
  targetId: string
  onUploaded: () => Promise<void>
}) {
  const [title, setTitle] = useState('')
  const [description, setDescription] = useState('')
  const [files, setFiles] = useState<File[]>([])
  const [busy, setBusy] = useState(false)
  const [message, setMessage] = useState<string | null>(null)
  const [messageTone, setMessageTone] = useState<'progress' | 'success' | 'error'>('progress')

  const addFiles = (selectedFiles: File[]) => {
    const merged = [...files, ...selectedFiles].filter((file, index, items) => {
      const key = `${file.name}-${file.size}-${file.lastModified}`
      return items.findIndex((candidate) => `${candidate.name}-${candidate.size}-${candidate.lastModified}` === key) === index
    })
    const orderedFiles = sortPerformanceSurveyImagesByName(merged, (file) => file.name)
    const validationError = validatePerformanceSurveyImageFiles(orderedFiles)
    if (validationError) {
      setMessageTone('error')
      setMessage(validationError)
      return
    }
    setFiles(orderedFiles)
    setMessage(null)
  }

  const submit = async () => {
    const validationError = validatePerformanceSurveyImageFiles(files)
    if (validationError) {
      setMessageTone('error')
      setMessage(validationError)
      return
    }
    setBusy(true)
    setMessageTone('progress')
    setMessage(null)
    try {
      const processedImages = await uploadPerformanceSurveyImageFiles(files, (label) => {
        setMessageTone('progress')
        setMessage(label)
      })
      setMessage('图片处理和上传完成，正在保存作品')
      await apiRequest(`/surveys/${surveyId}/work-items`, {
        method: 'POST',
        body: JSON.stringify({
          targetId,
          title: title.trim() || '案例作品',
          description: description.trim(),
          processedImages,
        }),
      })
      setTitle('')
      setDescription('')
      setFiles([])
      await onUploaded()
      setMessageTone('success')
      setMessage('作品已保存')
    } catch (error) {
      setMessageTone('error')
      setMessage(error instanceof Error ? error.message : '上传失败')
    } finally {
      setBusy(false)
    }
  }

  return (
    <section className="mb-3 rounded-xl border border-[#dfe6f0] bg-white px-4 py-4 shadow-[0_12px_34px_rgba(15,23,42,0.05)]">
      <div className="text-[15px] font-semibold text-[#111827]">提交案例</div>
      <div className="mt-3 grid gap-3">
        <input
          value={title}
          onChange={(event) => setTitle(event.target.value)}
          placeholder="案例名称"
          className="rounded-[10px] border border-[#d9e0ea] px-3 py-2 text-sm outline-none focus:border-[#1677ff] focus:ring-4 focus:ring-[#1677ff]/10 disabled:bg-[#f6f8fb]"
        />
        <textarea
          value={description}
          onChange={(event) => setDescription(event.target.value)}
          placeholder="案例说明（可选）"
          rows={3}
          className="resize-none rounded-[10px] border border-[#d9e0ea] px-3 py-2 text-sm outline-none focus:border-[#1677ff] focus:ring-4 focus:ring-[#1677ff]/10 disabled:bg-[#f6f8fb]"
        />
        <PerformanceSurveyImageDropzone
          files={files}
          disabled={false}
          ariaLabel="添加案例图片"
          onFiles={addFiles}
        />
        <PerformanceSurveySelectedImageFiles
          files={files}
          onRemove={(fileIndex) => {
            setFiles((current) => current.filter((_, index) => index !== fileIndex))
            setMessage(null)
          }}
        />
        {message && (
          <div className={`text-sm font-medium ${
            messageTone === 'error'
              ? 'text-[#d92d20]'
              : messageTone === 'success'
                ? 'text-[#087a3c]'
                : 'text-[#1677ff]'
          }`}>
            {message}
          </div>
        )}
        <button
          type="button"
          disabled={busy || files.length === 0}
          onClick={submit}
          className="rounded-[12px] bg-[#1677ff] px-4 py-2.5 text-sm font-semibold text-white disabled:bg-[#9ec9ff]"
        >
          {busy ? '上传中...' : '保存案例'}
        </button>
      </div>
    </section>
  )
}

function VisualWorkItemCard({
  item,
  index,
  template,
  canScore,
  assignmentId,
  scoreDraft,
  onScoreDraftChange,
}: {
  item: any
  index: number
  template: Template | undefined
  canScore: boolean
  assignmentId?: string | null
  scoreDraft: { scores: Record<string, number>; comment: string }
  onScoreDraftChange: (next: { scores: Record<string, number>; comment: string }) => void
}) {
  const existingScore = item.scores?.find((score: any) => score.assignmentId === assignmentId)
  const questions = template?.questions || []
  const scores = scoreDraft.scores
  const comment = scoreDraft.comment
  const ratedCount = questions.filter((question) => Number.isFinite(scores[question.id])).length
  const allRated = questions.length > 0 && ratedCount === questions.length
  const total = questions.reduce((sum, question) => sum + Number(scores[question.id] || 0), 0)

  return (
    <section className="rounded-xl border border-[#dfe6f0] bg-white px-4 py-4 shadow-[0_12px_34px_rgba(15,23,42,0.05)]">
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0">
          <div className="text-[12px] font-semibold text-[#1677ff]">案例 {index + 1}</div>
          <h2 className="mt-1 break-words text-[18px] font-semibold text-[#111827]">{item.title}</h2>
          {item.description && <p className="mt-1 whitespace-pre-wrap text-[13px] leading-5 text-[#667085]">{item.description}</p>}
        </div>
        <span className="shrink-0 rounded-xl bg-[#f6f8fb] px-3 py-1.5 text-[15px] font-semibold text-[#101828]">
          {existingScore ? `${formatNullableScore(existingScore.totalScore)} 分` : allRated ? `${total} 分` : '待评分'}
        </span>
      </div>

      <ImagePreviewGrid images={item.imageGroups || item.imageUrls || []} variant="long" />

      {existingScore ? (
        <div className="mt-4 rounded-[14px] bg-[#f6f8fb] px-3 py-3 text-sm font-medium text-[#4b5565]">
          已评分：{formatNullableScore(existingScore.totalScore)} 分
          {existingScore.comment && <p className="mt-2 whitespace-pre-wrap text-[#667085]">{existingScore.comment}</p>}
        </div>
      ) : canScore ? (
        <div className="mt-4 space-y-3">
          {questions.map((question, questionIndex) => {
            const maxScore = getQuestionMaxScore(template, question)
            const isRated = Number.isFinite(scores[question.id])
            const value = isRated ? scores[question.id] : 0
            const percent = Math.max(0, Math.min(100, (value / maxScore) * 100))
            const accentColor = getQuestionAccentColor(questionIndex)
            return (
              <div key={question.id}>
                <div className="flex items-start justify-between gap-3">
                  <div>
                    <div className="text-[14px] font-semibold text-[#111827]">{question.title}</div>
                    {question.description && <div className="mt-0.5 text-[12px] text-[#667085]">{question.description}</div>}
                  </div>
                  <div className="text-[14px] font-semibold" style={{ color: accentColor }}>{isRated ? `${value}/${maxScore}` : '未评分'}</div>
                </div>
                <input
                  type="range"
                  min={0}
                  max={maxScore}
                  value={value}
                  data-rated={isRated ? 'true' : 'false'}
                  aria-label={`${question.title}评分，满分 ${maxScore} 分`}
                  onPointerDown={() => {
                    if (!isRated) {
                      onScoreDraftChange({ scores: { ...scores, [question.id]: 0 }, comment })
                    }
                  }}
                  onKeyDown={(event) => {
                    if (!isRated && (event.key === 'ArrowLeft' || event.key === 'Home')) {
                      onScoreDraftChange({ scores: { ...scores, [question.id]: 0 }, comment })
                    }
                  }}
                  onChange={(event) => onScoreDraftChange({
                    scores: { ...scores, [question.id]: Number(event.target.value) },
                    comment,
                  })}
                  className="survey-score-range mt-2 w-full"
                  style={{ '--score-percent': `${percent}%`, '--score-color': accentColor } as CSSProperties}
                />
              </div>
            )
          })}
            <textarea
              value={comment}
              onChange={(event) => onScoreDraftChange({
                scores,
                comment: event.target.value.slice(0, 300),
              })}
            rows={3}
            placeholder="案例评语（可选）"
            className="w-full resize-none rounded-[10px] border border-[#d9e0ea] px-3 py-2 text-sm outline-none focus:border-[#1677ff] focus:ring-4 focus:ring-[#1677ff]/10"
          />
            <div className={`rounded-[10px] px-3 py-2 text-[12px] font-medium ${
              allRated ? 'bg-[#edf8f1] text-[#087a3c]' : 'bg-[#f6f8fb] text-[#667085]'
            }`}>
              {allRated ? '本案例评分已完成，等待统一提交' : `还需完成 ${questions.length - ratedCount} 项评分`}
            </div>
          </div>
      ) : null}
    </section>
  )
}

function ProgressiveLongImageGallery({ images }: { images: unknown[] }) {
  const groups = useMemo(() => normalizePerformanceSurveyImageGroups(images), [images])
  const [expandedKeys, setExpandedKeys] = useState<Set<string>>(() => new Set())
  const [activeGroupIndex, setActiveGroupIndex] = useState<number | null>(null)
  const expandScrollPositions = useRef<Map<string, number>>(new Map())

  const expandGroup = (groupKey: string) => {
    expandScrollPositions.current.set(groupKey, window.scrollY)
    setExpandedKeys((current) => new Set(current).add(groupKey))
  }

  const collapseGroup = (groupKey: string) => {
    const scrollTop = expandScrollPositions.current.get(groupKey)
    setExpandedKeys((current) => {
      const next = new Set(current)
      next.delete(groupKey)
      return next
    })
    if (scrollTop == null) return
    window.requestAnimationFrame(() => {
      window.requestAnimationFrame(() => {
        window.scrollTo({ top: scrollTop, behavior: 'auto' })
      })
    })
  }

  if (groups.length === 0) return null

  return (
    <>
      <div className="mt-4 space-y-4">
        {groups.map((group, groupIndex) => {
          const expanded = expandedKeys.has(group.key)
          return (
            <section
              key={group.key}
              className={`${expanded ? 'overflow-visible' : 'overflow-hidden'} rounded-[14px] border border-[#e5edf6] bg-white`}
            >
              {groups.length > 1 && (
                <div className="flex items-center justify-between gap-3 border-b border-[#edf1f6] px-3 py-2.5">
                  <span className="min-w-0 truncate text-[12px] font-semibold text-[#667085]">{group.sourceName}</span>
                  <span className="shrink-0 text-[11px] text-[#98a2b3]">{group.slices.length} 段</span>
                </div>
              )}

              {!expanded ? (
                <div className="relative h-[300px] bg-[#f6f8fb] sm:h-[360px]">
                  <button
                    type="button"
                    onClick={() => setActiveGroupIndex(groupIndex)}
                    aria-label={`全屏查看${group.sourceName}`}
                    className="block h-full w-full text-left"
                  >
                    <Image
                      src={group.previewUrl}
                      alt={`${group.sourceName}预览`}
                      width={group.previewWidth}
                      height={group.previewHeight}
                      unoptimized
                      {...(groupIndex === 0 ? { priority: true } : { loading: 'lazy' as const })}
                      className="h-full w-full object-cover object-top"
                    />
                  </button>
                  <div className="pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-white via-white/90 to-transparent" />
                    <button
                      type="button"
                      onClick={() => expandGroup(group.key)}
                      aria-expanded={false}
                      className="absolute bottom-4 left-1/2 h-10 -translate-x-1/2 rounded-full bg-[#0050cb] px-5 text-[13px] font-bold text-white shadow-[0_10px_24px_rgba(0,80,203,0.24)] transition-transform hover:scale-[1.02]"
                  >
                    加载全部
                  </button>
                </div>
              ) : (
                <div className="bg-[#f6f8fb]">
                  <div className="sticky top-2 z-10 flex justify-center border-b border-[#e5edf6] bg-white/95 px-3 py-2.5 backdrop-blur">
                    <button
                      type="button"
                      onClick={() => collapseGroup(group.key)}
                      aria-label={`收起${group.sourceName}全部图片`}
                      className="h-9 rounded-full border border-[#d9e0ea] bg-white px-5 text-[13px] font-bold text-[#344054] shadow-sm"
                    >
                      收起全部
                    </button>
                  </div>
                  {group.slices.map((slice, sliceIndex) => (
                    <button
                      key={`${slice.url}-${sliceIndex}`}
                      type="button"
                      onClick={() => setActiveGroupIndex(groupIndex)}
                      aria-label={`全屏查看${group.sourceName}第 ${sliceIndex + 1} 段`}
                      className="block w-full border-0 bg-transparent p-0 text-left"
                    >
                      <Image
                        src={slice.url}
                        alt={`${group.sourceName}第 ${sliceIndex + 1} 段`}
                        width={slice.width}
                        height={slice.height}
                        unoptimized
                        loading="lazy"
                        className="block h-auto w-full"
                      />
                    </button>
                  ))}
                  <div className="sticky bottom-3 flex justify-center py-3">
                    <button
                      type="button"
                      onClick={() => collapseGroup(group.key)}
                      className="h-9 rounded-full border border-[#d9e0ea] bg-white/95 px-5 text-[13px] font-bold text-[#344054] shadow-sm backdrop-blur"
                    >
                      收起
                    </button>
                  </div>
                </div>
              )}
            </section>
          )
        })}
      </div>
      <PerformanceSurveyLongImageViewer
        group={activeGroupIndex == null ? null : groups[activeGroupIndex]}
        onClose={() => setActiveGroupIndex(null)}
      />
    </>
  )
}

function PerformanceSurveyLongImageViewer({
  group,
  onClose,
}: {
  group: PerformanceSurveyImageGroupData | null
  onClose: () => void
}) {
  const [portalReady, setPortalReady] = useState(false)
  const dialogRef = useRef<HTMLDivElement | null>(null)
  const closeButtonRef = useRef<HTMLButtonElement | null>(null)

  useEffect(() => setPortalReady(true), [])

  useEffect(() => {
    if (!group) return
    const previousOverflow = document.body.style.overflow
    const previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null
    document.body.style.overflow = 'hidden'
    const focusFrame = window.requestAnimationFrame(() => closeButtonRef.current?.focus())
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        event.preventDefault()
        onClose()
        return
      }
      keepFocusInsideModal(event, dialogRef.current)
    }
    window.addEventListener('keydown', handleKeyDown)
    return () => {
      window.cancelAnimationFrame(focusFrame)
      window.removeEventListener('keydown', handleKeyDown)
      document.body.style.overflow = previousOverflow
      previousFocus?.focus()
    }
  }, [group, onClose])

  if (!group || !portalReady) return null

  return createPortal((
    <div
      ref={dialogRef}
      className="fixed inset-0 z-[1200] flex flex-col bg-black/[0.92] pt-[env(safe-area-inset-top)] text-white"
      onClick={onClose}
      role="dialog"
      aria-modal="true"
      aria-label={`查看${group.sourceName}`}
      tabIndex={-1}
    >
      <div className="flex h-14 shrink-0 items-center justify-between gap-3 border-b border-white/10 px-4" onClick={(event) => event.stopPropagation()}>
        <div className="min-w-0 truncate text-sm font-semibold text-white/80">{group.sourceName}</div>
        <button
          ref={closeButtonRef}
          type="button"
          onClick={onClose}
          className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-white/10 text-[28px] font-light leading-none text-white transition-colors hover:bg-white/20"
          aria-label="关闭长图预览"
        >
          ×
        </button>
      </div>
      <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-2 pb-[calc(20px+env(safe-area-inset-bottom))] sm:px-6" onClick={(event) => event.stopPropagation()}>
        <div className="mx-auto max-w-[1200px] bg-white">
          {group.slices.map((slice, index) => (
            <Image
              key={`${slice.url}-${index}`}
              src={slice.url}
              alt={`${group.sourceName}第 ${index + 1} 段`}
              width={slice.width}
              height={slice.height}
              unoptimized
              loading="lazy"
              className="block h-auto w-full"
            />
          ))}
        </div>
      </div>
    </div>
  ), document.body)
}

function ImagePreviewGrid({
  images,
  variant = 'default',
}: {
  images: unknown[]
  variant?: 'default' | 'gallery' | 'review' | 'long'
}) {
  if (variant === 'long') return <ProgressiveLongImageGallery images={images} />
  const stringImages = images.filter((item): item is string => typeof item === 'string')
  return <StandardImagePreviewGrid images={stringImages} variant={variant} />
}

function StandardImagePreviewGrid({
  images,
  variant = 'default',
}: {
  images: string[]
  variant?: 'default' | 'gallery' | 'review'
}) {
  const [activeIndex, setActiveIndex] = useState<number | null>(null)
  const displayImages = useMemo(
    () => images.map(normalizePerformanceSurveyImageUrl).filter(Boolean),
    [images],
  )

  if (displayImages.length === 0) return null

  if (variant === 'review') {
    const [firstImage, ...restImages] = displayImages
    return (
      <>
        <div className="mt-4 space-y-2">
          <button
            type="button"
            onClick={() => setActiveIndex(0)}
            aria-label="查看主要案例图片"
            className="block w-full overflow-hidden rounded-[16px] border border-[#e5edf6] bg-[#f6f8fb] text-left"
          >
            <Image
              src={firstImage}
              alt="主要案例图片"
              width={720}
              height={540}
              unoptimized
              className="aspect-[4/3] h-auto w-full object-cover"
            />
          </button>
          {restImages.length > 0 && (
            <div className="grid grid-cols-3 gap-2">
              {restImages.map((url, index) => (
                <button
                  key={`${url}-${index}`}
                  type="button"
                  onClick={() => setActiveIndex(index + 1)}
                  aria-label={`查看案例图片 ${index + 2}`}
                  className="block w-full overflow-hidden rounded-[12px] border border-[#e5edf6] bg-[#f6f8fb] text-left"
                >
                  <Image
                    src={url}
                    alt={`案例图片 ${index + 2}`}
                    width={220}
                    height={220}
                    unoptimized
                    className="aspect-square h-auto w-full object-cover"
                  />
                </button>
              ))}
            </div>
          )}
        </div>
        <ImageFullscreenViewer
          images={displayImages}
          activeIndex={activeIndex}
          onChange={setActiveIndex}
          onClose={() => setActiveIndex(null)}
        />
      </>
    )
  }

  const gridClass = variant === 'gallery'
    ? 'mt-4 grid grid-cols-3 gap-2 sm:grid-cols-4'
    : 'mt-4 grid grid-cols-2 gap-2'
  const imageClass = variant === 'gallery'
    ? 'aspect-square h-auto w-full object-cover transition-transform duration-300 group-hover:scale-105'
    : 'aspect-[4/3] h-auto w-full object-cover'

  return (
    <>
      <div className={gridClass}>
        {displayImages.map((url, index) => (
          <button
            key={`${url}-${index}`}
            type="button"
            onClick={() => setActiveIndex(index)}
            aria-label={`查看案例图片 ${index + 1}`}
            className="group block w-full overflow-hidden rounded-[14px] border border-[#e5edf6] bg-[#f6f8fb] text-left"
          >
            <Image
              src={url}
              alt={`案例图片 ${index + 1}`}
              width={320}
              height={240}
              unoptimized
              className={imageClass}
            />
          </button>
        ))}
      </div>
      <ImageFullscreenViewer
        images={displayImages}
        activeIndex={activeIndex}
        onChange={setActiveIndex}
        onClose={() => setActiveIndex(null)}
      />
    </>
  )
}

function ImageFullscreenViewer({
  images,
  activeIndex,
  onChange,
  onClose,
}: {
  images: string[]
  activeIndex: number | null
  onChange: (index: number) => void
  onClose: () => void
}) {
  const [portalReady, setPortalReady] = useState(false)
  const dialogRef = useRef<HTMLDivElement | null>(null)
  const closeButtonRef = useRef<HTMLButtonElement | null>(null)

  useEffect(() => {
    setPortalReady(true)
  }, [])

  const currentIndex = activeIndex == null ? null : Math.max(0, Math.min(images.length - 1, activeIndex))
  const isOpen = currentIndex != null
  const canNavigate = images.length > 1

  const goPrevious = useCallback(() => {
    if (currentIndex == null || !canNavigate) return
    onChange((currentIndex - 1 + images.length) % images.length)
  }, [canNavigate, currentIndex, images.length, onChange])

  const goNext = useCallback(() => {
    if (currentIndex == null || !canNavigate) return
    onChange((currentIndex + 1) % images.length)
  }, [canNavigate, currentIndex, images.length, onChange])

  useEffect(() => {
    if (!isOpen) return

    const previousOverflow = document.body.style.overflow
    const previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null
    document.body.style.overflow = 'hidden'
    const focusFrame = window.requestAnimationFrame(() => closeButtonRef.current?.focus())

    return () => {
      window.cancelAnimationFrame(focusFrame)
      document.body.style.overflow = previousOverflow
      previousFocus?.focus()
    }
  }, [isOpen])

  useEffect(() => {
    if (!isOpen) return

    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        event.preventDefault()
        onClose()
        return
      }
      if (event.key === 'ArrowLeft') {
        event.preventDefault()
        goPrevious()
        return
      }
      if (event.key === 'ArrowRight') {
        event.preventDefault()
        goNext()
        return
      }
      keepFocusInsideModal(event, dialogRef.current)
    }

    window.addEventListener('keydown', handleKeyDown)
    return () => window.removeEventListener('keydown', handleKeyDown)
  }, [goNext, goPrevious, isOpen, onClose])

  if (currentIndex == null || !portalReady) return null

  const currentImage = images[currentIndex]

  return createPortal((
    <div
      ref={dialogRef}
      className="fixed inset-0 z-[1200] flex flex-col bg-black/90 pt-[env(safe-area-inset-top)] text-white"
      onClick={onClose}
      role="dialog"
      aria-modal="true"
      aria-label={`图片预览，第 ${currentIndex + 1} 张，共 ${images.length} 张`}
      tabIndex={-1}
    >
      <div className="flex h-14 shrink-0 items-center justify-between gap-3 px-4" onClick={(event) => event.stopPropagation()}>
        <div className="text-sm font-semibold text-white/80">
          {currentIndex + 1} / {images.length}
        </div>
        <button
          ref={closeButtonRef}
          type="button"
          onClick={onClose}
          className="flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-[28px] font-light leading-none text-white transition-colors hover:bg-white/20"
          aria-label="关闭图片预览"
        >
          ×
        </button>
      </div>

      <div className="relative flex min-h-0 flex-1 items-center justify-center px-3 pb-[calc(16px+env(safe-area-inset-bottom))]">
        {canNavigate && (
          <button
            type="button"
            onClick={(event) => {
              event.stopPropagation()
              goPrevious()
            }}
            className="absolute left-3 top-1/2 z-10 flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full bg-white/10 text-2xl font-light text-white transition-colors hover:bg-white/20"
            aria-label="上一张图片"
          >
            ‹
          </button>
        )}
        <button
          type="button"
          onClick={(event) => event.stopPropagation()}
          className="flex h-full w-full items-center justify-center"
          aria-label="当前图片"
        >
          <Image
            src={currentImage}
            alt={`全屏案例图片 ${currentIndex + 1}`}
            width={1400}
            height={1000}
            unoptimized
            className="max-h-full max-w-full object-contain"
          />
        </button>
        {canNavigate && (
          <button
            type="button"
            onClick={(event) => {
              event.stopPropagation()
              goNext()
            }}
            className="absolute right-3 top-1/2 z-10 flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full bg-white/10 text-2xl font-light text-white transition-colors hover:bg-white/20"
            aria-label="下一张图片"
          >
            ›
          </button>
        )}
      </div>
    </div>
  ), document.body)
}

function getSurveyInitials(name: string) {
  const text = String(name || '').trim()
  if (!text) return '用'
  const chars = Array.from(text)
  if (/^[A-Za-z\s]+$/.test(text)) {
    return text
      .split(/\s+/)
      .filter(Boolean)
      .slice(0, 2)
      .map((item) => item[0]?.toUpperCase())
      .join('')
  }
  return chars.slice(0, 2).join('')
}

function getQuestionAccentColor(index: number) {
  const colors = ['#1677ff', '#16a34a', '#1677ff', '#7c3aed', '#f59e0b']
  return colors[index % colors.length]
}

function getSurveyStatusLabel(status: string) {
  const map: Record<string, string> = {
    draft: '草稿',
    open: '进行中',
    closed: '已关闭',
    cancelled: '已撤销',
  }
  return map[status] || status
}

function getPerformanceSurveyBackHref(value: string | null) {
  const fallback = '/performance-survey?tab=personal'
  if (!value || value.startsWith('//')) return fallback

  try {
    const parsed = new URL(value, 'https://performance-survey.local')
    if (parsed.origin !== 'https://performance-survey.local') return fallback
    if (parsed.pathname !== '/performance-survey' && !parsed.pathname.startsWith('/performance-survey/')) {
      return fallback
    }

    const legacySegment = parsed.pathname.match(/^\/performance-survey\/(personal|public|manage|pending|submitted|results|created|teacher|admin)\/?$/)?.[1]
    if (legacySegment) {
      parsed.pathname = '/performance-survey'
      parsed.searchParams.set('tab', normalizePerformanceSurveyDashboardTab(legacySegment))
      const legacyWorkspaceTab = getLegacyPerformanceSurveyWorkspaceTab(legacySegment)
      if (legacyWorkspaceTab) parsed.searchParams.set('workspace', legacyWorkspaceTab)
    } else if (parsed.pathname === '/performance-survey' && parsed.searchParams.has('tab')) {
      const requestedTab = parsed.searchParams.get('tab')
      parsed.searchParams.set('tab', normalizePerformanceSurveyDashboardTab(requestedTab))
      const legacyWorkspaceTab = getLegacyPerformanceSurveyWorkspaceTab(requestedTab)
      if (legacyWorkspaceTab) parsed.searchParams.set('workspace', legacyWorkspaceTab)
    }

    return `${parsed.pathname}${parsed.search}${parsed.hash}`
  } catch {
    return fallback
  }
}

function formatResultScore(value: unknown) {
  if (value === null || value === undefined || value === '') return '—'
  const score = Number(value)
  if (!Number.isFinite(score)) return '—'
  return Number.isInteger(score) ? String(score) : score.toFixed(1)
}

function getQuestionMaxScore(template: Template | undefined, question: Template['questions'][number]) {
  const maxScore = Number(question.maxScore ?? template?.questionMaxScore ?? 20)
  return Number.isFinite(maxScore) && maxScore > 0 ? maxScore : 20
}

function isVisualTemplate(template?: Template | null) {
  return template?.surveyType === 'visual_case' || template?.code === 'visual_brand_tone'
}

function getScorePercent(value: unknown, maxScore = 20) {
  const score = Number(value ?? 0)
  if (!Number.isFinite(score)) return 0
  return Math.max(0, Math.min(100, (score / Math.max(1, maxScore)) * 100))
}

function SurveyResults({ surveyId }: { surveyId: string }) {
  const searchParams = useSearchParams()
  const targetId = searchParams.get('targetId')
  const query = targetId ? `?targetId=${encodeURIComponent(targetId)}` : ''
  const backHref = getPerformanceSurveyBackHref(searchParams.get('back'))
  const result = useApi<any>(`/results/${surveyId}${query}`, [surveyId, query])

  if (result.loading) return <MainPanel>加载中...</MainPanel>
  if (result.error) return <MainPanel><ErrorPanel message={result.error} /></MainPanel>
  if (!result.data) return null

  const survey = result.data.survey
  const targets = result.data.targets || []
  const template = result.data.survey.template as Template | undefined
  const visualTemplate = Boolean(template?.workItemImageRequired || template?.code === 'visual_brand_tone')
  const questions = template?.questions || []
  const totalResponses = targets.reduce((sum: number, target: any) => sum + Number(target.responses?.length || 0), 0)
  const effectiveResponses = targets.reduce((sum: number, target: any) => sum + Number(target.aggregate?.effectiveCount || 0), 0)
  const isCancelled = survey.status === 'cancelled'

  return (
    <main className="mx-auto min-h-screen max-w-[430px] bg-[#f6f8fc] px-5 py-6 pb-24 text-[#101828] sm:max-w-6xl sm:py-6 md:pb-6">
      <section className="mb-5 rounded-xl border border-[#e3e9f2] bg-white px-5 py-5 shadow-[0_12px_30px_rgba(45,43,80,0.08)]">
        <Link
          href={backHref}
          className="inline-flex min-h-[34px] items-center rounded-full bg-[#f3f6fb] px-3 text-[13px] font-semibold text-[#344054] hover:bg-[#e8eef7]"
        >
          返回
        </Link>
        <div className="mt-4 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
          <div className="min-w-0">
            <div className="text-[13px] font-semibold text-[#0052d9]">调研结果</div>
            <h1 className="mt-2 break-words text-[26px] font-semibold leading-tight tracking-[-0.01em] text-[#101828] sm:text-3xl">
              {survey.title}
            </h1>
            <div className="mt-3 flex flex-wrap items-center gap-2 text-[13px] font-medium text-[#667085]">
              <StatusBadge status={survey.status} />
              {survey.closedAt && <span>关闭 {formatDate(survey.closedAt)}</span>}
            </div>
          </div>
          <div className="grid grid-cols-3 gap-2 sm:min-w-[280px]">
            <ResultMetric label="对象" value={targets.length} />
            <ResultMetric label={visualTemplate ? '评分记录' : '评价'} value={totalResponses} />
            <ResultMetric label={visualTemplate ? '计分记录' : '有效'} value={effectiveResponses} />
          </div>
        </div>
        {isCancelled && (
          <div className="mt-4 rounded-[10px] border border-[#fecdca] bg-[#fff6f5] px-4 py-3 text-sm font-medium text-[#b42318]">
            此调研已撤销，页面数据仅供留档，不再作为当前考核结果。
          </div>
        )}
      </section>

      <div className="grid gap-5">
        {targets.map((target: any) => {
          const aggregate = target.aggregate || {}
          const workItems = Array.isArray(target.workItems) ? target.workItems : []
          const responses = Array.isArray(target.responses) ? target.responses : []
          const dimensionEntries = questions
            .map((question: Template['questions'][number]) => ({
              question,
              value: aggregate.dimensionAverages?.[question.id],
            }))
            .filter((item: { value: unknown }) => item.value !== null && item.value !== undefined)

          return (
            <article key={target.id} className="rounded-xl border border-[#e3e9f2] bg-white px-5 py-5 shadow-[0_10px_24px_rgba(45,43,80,0.07)]">
              <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                <div className="min-w-0">
                  <div className="text-[13px] font-semibold text-[#667085]">评价对象</div>
                  <h2 className="mt-2 break-words text-[22px] font-semibold leading-tight text-[#101828]">{target.targetName}</h2>
                  <div className="mt-3 flex flex-wrap gap-2 text-[13px] font-medium text-[#667085]">
                    <span>{visualTemplate ? '最终评分' : '已评分'} {aggregate.effectiveCount || 0}/{aggregate.responseCount || 0}</span>
                  </div>
                </div>
                <div className="grid grid-cols-1 gap-2 sm:min-w-[150px]">
                  <ResultMetric label={visualTemplate ? '最终得分' : '当前得分'} value={aggregate.achievementScore} emphasis={visualTemplate} />
                </div>
              </div>

              {visualTemplate && (
                <div className="mt-4 rounded-[10px] border border-[#c7d7fe] bg-[#f5f8ff] px-4 py-3 text-[13px] leading-5 text-[#344054]">
                  最终分只采用指定最终评分人的评分；自评和主管评分保留在下方明细中，仅供参考。
                </div>
              )}

              {dimensionEntries.length > 0 && (
                <div className="mt-5 grid gap-3 sm:grid-cols-2">
                  {dimensionEntries.map(({ question, value }: { question: Template['questions'][number]; value: number }) => {
                    const maxScore = getQuestionMaxScore(template, question)
                    return (
                      <div key={question.id} className="rounded-[12px] bg-[#f8fafc] px-4 py-3">
                        <div className="flex items-center justify-between gap-3">
                          <div className="truncate text-sm font-semibold text-[#101828]">{question.title}</div>
                          <div className="shrink-0 text-sm font-semibold text-[#0052d9]">{formatResultScore(value)}/{maxScore}</div>
                        </div>
                        <div className="mt-3 h-2 rounded-full bg-[#e8eef7]">
                          <div className="h-full rounded-full bg-[#0052d9]" style={{ width: `${getScorePercent(value, maxScore)}%` }} />
                        </div>
                      </div>
                    )
                  })}
                </div>
              )}

              {visualTemplate && workItems.length > 0 && (
                <section className="mt-5 space-y-4">
                  <h3 className="text-sm font-semibold text-[#101828]">视觉评分作品</h3>
                  {workItems.map((item: any, itemIndex: number) => (
                    <div key={item.id} className="rounded-[14px] border border-[#e5edf6] bg-white p-4">
                      <div className="flex items-start justify-between gap-3">
                        <div className="min-w-0">
                          <div className="text-[12px] font-semibold text-[#0052d9]">作品 {itemIndex + 1}</div>
                          <div className="mt-1 break-words text-[16px] font-semibold text-[#101828]">{item.title}</div>
                          {item.description && <p className="mt-1 whitespace-pre-wrap text-sm text-[#667085]">{item.description}</p>}
                        </div>
                        <span className="shrink-0 rounded bg-[#f3f6fb] px-3 py-1.5 text-sm font-semibold text-[#0052d9]">
                          {formatNullableScore(item.averageScore)} 分{visualTemplate ? '（最终评分）' : ''}
                        </span>
                      </div>
                      <ImagePreviewGrid images={item.imageGroups || item.imageUrls || []} variant="long" />
                    </div>
                  ))}
                </section>
              )}

              <section className="mt-5">
                <h3 className="text-sm font-semibold text-[#101828]">{visualTemplate ? `评分人明细（${responses.length}人）` : '评价明细'}</h3>
                <div className="mt-3">
                  {visualTemplate ? (
                    <VisualEvaluatorResultList
                      responses={responses}
                      workItems={workItems}
                      questions={questions}
                      template={template}
                    />
                  ) : (
                    <div className="grid gap-3 md:grid-cols-2">
                      {responses.map((response: any) => (
                        <div key={response.id} className="rounded-[12px] bg-[#f8fafc] px-4 py-3">
                          <div className="flex items-center justify-between gap-3">
                            <span className="text-sm font-semibold text-[#101828]">{response.respondentName}</span>
                            <span className="text-sm font-semibold text-[#667085]">{formatResultScore(response.totalScore)} 分</span>
                          </div>
                          {response.comment && <p className="mt-2 whitespace-pre-wrap text-sm leading-6 text-[#344054]">{response.comment}</p>}
                        </div>
                      ))}
                      {responses.length === 0 && (
                        <div className="rounded-[12px] bg-[#f8fafc] px-4 py-3 text-sm text-[#667085]">暂无评价</div>
                      )}
                    </div>
                  )}
                </div>
              </section>
            </article>
          )
        })}
      </div>
    </main>
  )
}

function TextInput({
  label,
  value,
  onChange,
  type = 'text',
  placeholder,
}: {
  label: string
  value: string
  onChange: (value: string) => void
  type?: string
  placeholder?: string
}) {
  return (
    <label className="grid gap-2 text-sm">
      <span className="text-[12px] font-semibold tracking-[0.05em] text-[#5f5e5e]">{label}</span>
      <input
        type={type}
        value={value}
        onChange={(event) => onChange(event.target.value)}
        placeholder={placeholder}
        className="h-10 rounded border border-[#eeeeee] bg-white px-3 text-[14px] font-semibold text-[#1a1c1c] outline-none transition-colors focus:border-[#0050cb]"
      />
    </label>
  )
}

function SelectedChips({ items, onRemove }: { items: Array<{ id: string; label: string }>; onRemove: (id: string) => void }) {
  if (items.length === 0) return null
  return (
    <div className="mt-2 flex flex-wrap gap-2">
      {items.map((item) => (
        <button
          key={item.id}
          type="button"
          onClick={() => onRemove(item.id)}
          className="border border-[#e2e2e2] bg-white px-2.5 py-1 text-xs font-semibold text-[#1a1c1c] hover:bg-[#f9f9f9]"
        >
          {item.label} ×
        </button>
      ))}
    </div>
  )
}

function StatusBadge({ status }: { status: string }) {
  const map: Record<string, string> = {
    draft: '草稿',
    open: '进行中',
    closed: '已关闭',
    cancelled: '已撤销',
    pending: '待提交',
    submitted: '已提交',
    sent: '已发送',
    succeeded: '已发送',
    retrying: '重试中',
    exhausted: '失败',
    skipped: '未发送',
    processing: '处理中',
  }
  return (
    <span className="inline-flex rounded-full bg-gray-100 px-2.5 py-1 text-xs font-medium text-gray-700">
      {map[status] || status}
    </span>
  )
}

function DashboardStatusBadge({ status }: { status: string }) {
  const tones: Record<string, string> = {
    draft: 'border-[#f3d29b] bg-[#fff8e8] text-[#9a5b00]',
    open: 'border-[#b8d0ff] bg-[#edf4ff] text-[#0052d9]',
    closed: 'border-[#d8dced] bg-[#f5f7fb] text-[#5f5e5e]',
    cancelled: 'border-[#f0b8b8] bg-[#fff5f5] text-[#b42318]',
    pending: 'border-[#b8d0ff] bg-[#edf4ff] text-[#0052d9]',
    submitted: 'border-[#b9ead0] bg-[#ecfdf3] text-[#039855]',
  }
  return (
    <span className={`inline-flex rounded-full border px-2.5 py-1 text-[12px] font-bold ${tones[status] || 'border-[#d8dced] bg-[#f5f7fb] text-[#5f5e5e]'}`}>
      {getSurveyStatusLabel(status)}
    </span>
  )
}

function ResultMetric({ label, value, emphasis = false }: { label: string; value: unknown; emphasis?: boolean }) {
  return (
    <div className={`min-w-0 rounded-[12px] px-3 py-3 text-center ${
      emphasis
        ? 'bg-[#0052d9] text-white'
        : 'bg-[#f8fafc] text-[#101828]'
    }`}>
      <div className="truncate text-[22px] font-semibold leading-none">{formatResultScore(value)}</div>
      <div className={`mt-1 truncate text-[11px] font-semibold ${emphasis ? 'text-white/75' : 'text-[#667085]'}`}>{label}</div>
    </div>
  )
}

function Panel({ children }: { children: ReactNode }) {
  return <div className="rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800">{children}</div>
}

function DashboardPanel({ children }: { children: ReactNode }) {
  return <div className="rounded border border-[#e2e2e2] bg-white p-4 text-[#1a1c1c]">{children}</div>
}

function MainPanel({ children }: { children: ReactNode }) {
  return <main className="mx-auto max-w-4xl px-4 py-6"><Panel>{children}</Panel></main>
}

function SurveyUnavailablePanel({
  message,
  title = '当前无法填写调研',
  onRetry,
}: {
  message: string
  title?: string
  onRetry?: () => Promise<void>
}) {
  return (
    <div className="rounded-xl border border-[#dce6f2] bg-white px-5 py-9 text-center shadow-[0_12px_34px_rgba(15,23,42,0.05)]">
      <h1 className="text-[18px] font-bold text-[#101828]">{title}</h1>
      <p className="mt-2 text-[14px] font-medium leading-6 text-[#667085]">{message}</p>
      <div className="mt-6 flex flex-col justify-center gap-3 sm:flex-row">
        {onRetry && (
          <button
            type="button"
            onClick={() => { void onRetry() }}
            className="inline-flex min-h-11 items-center justify-center rounded-md bg-[#1677ff] px-5 text-sm font-semibold text-white"
          >
            重新加载
          </button>
        )}
        <Link
          href="/performance-survey?tab=personal&workspace=pending"
          className={`inline-flex min-h-11 items-center justify-center rounded-md px-5 text-sm font-semibold ${onRetry ? 'border border-[#dbe5f2] bg-white text-[#101828]' : 'bg-[#1677ff] text-white'}`}
        >
          返回个人看板
        </Link>
        <Link
          href="/"
          target="_top"
          className="inline-flex min-h-11 items-center justify-center rounded-md border border-[#dbe5f2] bg-white px-5 text-sm font-semibold text-[#101828]"
        >
          返回品牌中心
        </Link>
      </div>
    </div>
  )
}

function ErrorPanel({ message }: { message: string }) {
  return <div className="rounded-lg bg-red-50 px-4 py-3 text-sm text-red-700 dark:bg-red-900/20 dark:text-red-200">{message}</div>
}

function DashboardErrorPanel({ message }: { message: string }) {
  return <div className="rounded border border-[#f0b8b8] bg-[#fff5f5] px-4 py-3 text-sm font-medium text-[#b42318]">{message}</div>
}

function EmptyState({ title, description }: { title: string; description?: string }) {
  return (
    <div className="rounded border border-dashed border-[#c2c6d8] bg-[#fafafa] px-5 py-7 text-center">
      <h2 className="text-[15px] font-bold text-[#1a1c1c]">{title}</h2>
      {description && <p className="mt-1.5 text-[12px] font-medium text-[#727687]">{description}</p>}
    </div>
  )
}

function MobileSurveyRangeStyles() {
  return (
    <style>{`
      .survey-score-range {
        height: 24px;
        appearance: none;
        -webkit-appearance: none;
        background: transparent;
      }

      .survey-score-range:focus {
        outline: none;
      }

      .survey-score-range::-webkit-slider-runnable-track {
        height: 4px;
        border-radius: 999px;
        background: linear-gradient(
          to right,
          var(--score-color, #1677ff) 0%,
          var(--score-color, #1677ff) var(--score-percent),
          #e5eaf2 var(--score-percent),
          #e5eaf2 100%
        );
      }

      .survey-score-range::-webkit-slider-thumb {
        width: 18px;
        height: 18px;
        margin-top: -7px;
        appearance: none;
        -webkit-appearance: none;
        border: 3px solid var(--score-color, #1677ff);
        border-radius: 999px;
        background: #ffffff;
        box-shadow: 0 2px 6px rgba(22, 119, 255, 0.22);
      }

      .survey-score-range[data-rated="false"]::-webkit-slider-thumb {
        border-color: #b8c2cf;
        background: #f6f8fb;
        box-shadow: none;
      }

      .survey-score-range::-moz-range-track {
        height: 4px;
        border-radius: 999px;
        background: #e5eaf2;
      }

      .survey-score-range::-moz-range-progress {
        height: 4px;
        border-radius: 999px;
        background: var(--score-color, #1677ff);
      }

      .survey-score-range::-moz-range-thumb {
        width: 18px;
        height: 18px;
        border: 3px solid var(--score-color, #1677ff);
        border-radius: 999px;
        background: #ffffff;
        box-shadow: 0 2px 6px rgba(22, 119, 255, 0.22);
      }


      .survey-score-range[data-rated="false"]::-moz-range-thumb {
        border-color: #b8c2cf;
        background: #f6f8fb;
        box-shadow: none;
      }
    `}</style>
  )
}

function SurveyOpeningScreen() {
  return (
    <main className="min-h-[calc(100dvh-76px)] bg-white text-[#111827]">
      <section className="mx-auto max-w-[430px] px-5 py-8">
        <div className="overflow-hidden rounded-xl border border-[#e3eaf3] bg-white p-6 shadow-[0_18px_48px_rgba(15,23,42,0.10)]">
          <div className="text-[14px] font-semibold text-[#1677ff]">考核调研</div>
          <h1 className="mt-3 text-[28px] font-semibold leading-tight tracking-[-0.01em] text-[#101828]">正在打开问卷</h1>
          <p className="mt-3 text-[14px] font-medium leading-6 text-[#667085]">正在准备问卷内容，请稍候。</p>

          <div className="mt-6 rounded-[22px] bg-[#f6f8fb] p-4">
            <div className="flex items-center justify-between gap-4">
              <span className="text-[15px] font-semibold text-[#101828]">准备问卷内容</span>
              <span className="text-[14px] font-semibold text-[#1677ff]">马上进入</span>
            </div>
            <div className="mt-4 h-1.5 overflow-hidden rounded-full bg-[#e8f1ff]">
              <div className="h-full w-2/3 animate-pulse rounded-full bg-[#1677ff]" />
            </div>
          </div>

          <div className="mt-7 rounded-xl border border-[#eef2f7] bg-white p-5">
            <div className="text-[15px] font-semibold text-[#7b8494]">绩效考核问卷</div>
            <div className="mt-6 h-3 rounded-full bg-[#eef3f9]" />
            <div className="mt-3 h-3 w-3/4 rounded-full bg-[#eef3f9]" />
            <div className="mt-8 space-y-5">
              <div className="flex items-center gap-3">
                <span className="h-4 w-4 rounded-full border border-[#e3eaf3]" />
                <span className="h-3 flex-1 rounded-full bg-[#f1f5f9]" />
              </div>
              <div className="flex items-center gap-3">
                <span className="h-4 w-4 rounded-full border border-[#e3eaf3]" />
                <span className="h-3 flex-1 rounded-full bg-[#f1f5f9]" />
              </div>
              <div className="flex items-center gap-3">
                <span className="h-4 w-4 rounded-full border border-[#e3eaf3]" />
                <span className="h-3 w-2/3 rounded-full bg-[#f1f5f9]" />
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  )
}

function LoadingPage() {
  return <SurveyOpeningScreen />
}

function formatDate(value: string | Date) {
  const date = new Date(value)
  if (Number.isNaN(date.getTime())) return '-'
  return new Intl.DateTimeFormat('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
    hour12: false,
  }).format(date)
}