<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import { Calendar, Check, Plus, Refresh, User } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import http, { apiErrorMessage } from '../api/http'
import { useAuthStore } from '../stores/auth'
import {
  academicTermLabel,
  academicTermOptionClass,
  defaultAcademicTermId,
} from '../utils/academicTerms'

const auth = useAuthStore()
const isStudent = computed(() => auth.user?.roles.includes('Student') ?? false)
const loading = ref(false)
const terms = ref<any[]>([])
const termId = ref('')
const projects = ref<any[]>([])
const total = ref(0)
const page = ref(1)
const pageSize = ref(20)
const selectedProjectIds = ref<string[]>([])
const options = reactive({
  tasks: [] as any[],
  colleges: [] as any[],
  scheduleEntries: [] as any[],
  classrooms: [] as any[],
  teachers: [] as any[],
  periods: [] as any[],
})
const modeFilter = ref('')
const statusFilter = ref('')
const offeringCollegeId = ref('')
const courseKeyword = ref('')
const classKeyword = ref('')
const teacherKeyword = ref('')
const taskKeyword = ref('')

const projectDialog = ref(false)
const editingProjectId = ref('')
const correctingPublishedProject = ref(false)
const projectForm = reactive({
  teachingTaskIds: [] as string[],
  scheduleEntryId: '',
  code: '',
  name: '',
  projectNames: '',
  nameMode: 'Sequence',
  arrangementMode: 'Centralized',
  description: '',
  requirements: '',
  dates: [] as string[],
  selectionTimes: [] as string[],
})

const batchRenameDialog = ref(false)
const batchRenameProjectIds = ref<string[]>([])
const batchRenameNames = ref('')

const sessionDialog = ref(false)
const selectedProject = ref<any>(null)
const sessionForm = reactive({
  classroomId: '',
  sessionDate: '',
  startPeriod: undefined as number | undefined,
  periodCount: 2,
  capacity: 30,
  notes: '',
  instructorTeacherIds: [] as string[],
})

const batchSessionDialog = ref(false)
const batchSessionProjectIds = ref<string[]>([])
const batchSessionRows = ref<any[]>([])

const participantsDialog = ref(false)
const participantSession = ref<any>(null)
const participants = ref<any[]>([])
const participantsLoading = ref(false)

const selectedTask = computed(() =>
  options.tasks.find((task) => task.id === projectForm.teachingTaskIds[0]),
)
const selectedScheduleEntry = computed(() =>
  options.scheduleEntries.find((entry) => entry.id === projectForm.scheduleEntryId),
)
const batchProjectOptions = computed(() =>
  projects.value.filter((project) =>
    project.status !== 'Closed' && project.arrangementMode === 'SelfScheduled'),
)
const taskGroups = computed(() => {
  const groups = new Map<string, any>()
  options.tasks.forEach((task) => {
    const key = `${task.academicTermId}-${task.courseId}`
    const group = groups.get(key) ?? {
      key,
      termName: task.termName,
      courseCode: task.courseCode,
      courseName: task.courseName,
      tasks: [],
    }
    group.tasks.push(task)
    groups.set(key, group)
  })
  return [...groups.values()]
})
const projectGroups = computed(() => {
  const groups = new Map<string, any>()
  projects.value.forEach((project) => {
    const classKey = [...(project.classNames ?? [])].sort().join('|')
    const key = `${project.academicTermId}-${project.courseCode}-${classKey}`
    const group = groups.get(key) ?? {
      key,
      termName: project.termName,
      courseCode: project.courseCode,
      courseName: project.courseName,
      classNames: project.classNames,
      teacherNames: project.teacherNames,
      taskNumbers: [],
      projects: [],
    }
    if (!group.taskNumbers.includes(project.taskNumber)) group.taskNumbers.push(project.taskNumber)
    group.projects.push(project)
    groups.set(key, group)
  })
  return [...groups.values()]
})
const draftSelectedProjectIds = computed(() =>
  selectedProjectIds.value.filter((id) =>
    projects.value.some((project) => project.id === id && project.status === 'Draft')),
)
const batchRenameProjects = computed(() =>
  projects.value.filter((project) => batchRenameProjectIds.value.includes(project.id)),
)
const allPageDraftSelected = computed(() => {
  const ids = projects.value.filter((project) => project.status === 'Draft').map((project) => project.id)
  return ids.length > 0 && ids.every((id) => selectedProjectIds.value.includes(id))
})
const activePeriods = computed(() =>
  options.periods.filter((period) =>
    !selectedProject.value
      || period.academicTermId === selectedProject.value.academicTermId,
  ),
)

const modeMeta: Record<string, { label: string; note: string }> = {
  Centralized: {
    label: '集中安排',
    note: '像课程一样统一到场，无需学生预约',
  },
  SelfScheduled: {
    label: '自行安排',
    note: '规定实验项目，学生从开放场次中预约',
  },
}

const statusLabels: Record<string, string> = {
  Draft: '草稿',
  Published: '进行中',
  Closed: '已关闭',
}

function resetProjectForm() {
  editingProjectId.value = ''
  correctingPublishedProject.value = false
  Object.assign(projectForm, {
    teachingTaskIds: [],
    scheduleEntryId: '',
    code: '',
    name: '',
    projectNames: '',
    nameMode: 'Sequence',
    arrangementMode: 'Centralized',
    description: '',
    requirements: '',
    dates: [],
    selectionTimes: [],
  })
}

function onTaskChange() {
  const task = selectedTask.value
  if (!task) return
  projectForm.dates = [task.termStartDate, task.termEndDate]
}

function onScheduleEntryChange() {
  const entry = selectedScheduleEntry.value
  if (!entry) return
  projectForm.teachingTaskIds = [entry.teachingTaskId]
  onTaskChange()
}

function formatScheduleEntry(entry: any) {
  const classes = entry.classNames?.join('、') || '选课学生'
  return `${entry.courseCode} · ${entry.courseName} · ${entry.taskNumber} · ${classes} · 星期 ${entry.dayOfWeek} 第 ${entry.startPeriod}–${entry.startPeriod + entry.periodCount - 1} 节 · ${entry.campusName} ${entry.buildingName} ${entry.classroomName}`
}

function openCreateProject() {
  resetProjectForm()
  projectDialog.value = true
}

function openEditProject(project: any) {
  editingProjectId.value = project.id
  correctingPublishedProject.value = false
  Object.assign(projectForm, {
    teachingTaskIds: [project.teachingTaskId],
    scheduleEntryId: project.scheduleEntryId ?? '',
    code: project.code,
    name: project.name,
    projectNames: '',
    nameMode: 'Sequence',
    arrangementMode: project.arrangementMode,
    description: project.description ?? '',
    requirements: project.requirements ?? '',
    dates: [project.startDate, project.endDate],
    selectionTimes: project.selectionStartsAt && project.selectionEndsAt
      ? [project.selectionStartsAt, project.selectionEndsAt] : [],
  })
  projectDialog.value = true
}

function openCorrectPublishedProject(project: any) {
  openEditProject(project)
  correctingPublishedProject.value = true
}

function projectNameLines(value: string) {
  return value.split(/\r?\n/).map((name) => name.trim()).filter(Boolean)
}

async function saveProject() {
  const names = projectNameLines(projectForm.projectNames)
  const hasValidName = correctingPublishedProject.value || editingProjectId.value
    ? !!projectForm.name.trim()
    : projectForm.nameMode === 'InputNames'
      ? names.length > 0
      : !!projectForm.name.trim()
  if ((!correctingPublishedProject.value && !projectForm.teachingTaskIds.length) ||
    (editingProjectId.value && projectForm.arrangementMode === 'Centralized' && !projectForm.scheduleEntryId) ||
    !projectForm.code.trim()
    || !hasValidName || projectForm.dates.length !== 2
    || (projectForm.arrangementMode === 'SelfScheduled' && projectForm.selectionTimes.length !== 2)) {
    ElMessage.warning(projectForm.arrangementMode === 'Centralized' && editingProjectId.value
      ? '请选择课表实验课，并填写项目编码、名称和开放日期'
      : '请填写教学任务、项目编码、名称、开放日期和选课时间')
    return
  }
  const payload = {
    teachingTaskId: projectForm.teachingTaskIds[0],
    scheduleEntryId: projectForm.scheduleEntryId || null,
    code: projectForm.code,
    name: projectForm.nameMode === 'InputNames' && !editingProjectId.value ? names[0] : projectForm.name,
    arrangementMode: projectForm.arrangementMode,
    description: projectForm.description || null,
    requirements: projectForm.requirements || null,
    startDate: projectForm.dates[0],
    endDate: projectForm.dates[1],
    selectionStartsAt: projectForm.arrangementMode === 'SelfScheduled'
      ? projectForm.selectionTimes[0] || null : null,
    selectionEndsAt: projectForm.arrangementMode === 'SelfScheduled'
      ? projectForm.selectionTimes[1] || null : null,
  }
  try {
    if (correctingPublishedProject.value) {
      await http.put(`/experiments/${editingProjectId.value}/published-details`, {
        name: projectForm.name,
        description: projectForm.description || null,
        requirements: projectForm.requirements || null,
      })
      ElMessage.success('已修正已发布项目的教学内容，并通知学生查看')
    } else if (editingProjectId.value) {
      await http.put(`/experiments/${editingProjectId.value}`, payload)
      ElMessage.success('实验项目已更新')
    } else {
      await http.post('/experiments/batch', {
        ...payload,
        teachingTaskId: undefined,
        teachingTaskIds: projectForm.teachingTaskIds,
        names: projectForm.nameMode === 'InputNames' ? names : undefined,
        generateSequentialNames: projectForm.nameMode === 'Sequence',
      })
      ElMessage.success(projectForm.arrangementMode === 'Centralized'
        ? `已按 ${projectForm.teachingTaskIds.length} 个教学班的全部实验课生成项目`
        : `已为 ${projectForm.teachingTaskIds.length} 个教学任务创建实验项目`)
    }
    projectDialog.value = false
    await load()
  } catch (error) {
    ElMessage.error(apiErrorMessage(error))
  }
}

function openBatchSession() {
  batchSessionProjectIds.value = []
  batchSessionRows.value = []
  batchSessionDialog.value = true
}

function syncBatchSessionRows() {
  const existing = new Map<string, any[]>()
  batchSessionRows.value.forEach((row) => {
    const rows = existing.get(row.projectId) ?? []
    rows.push(row)
    existing.set(row.projectId, rows)
  })
  batchSessionRows.value = batchSessionProjectIds.value.flatMap((projectId) => {
    const current = existing.get(projectId)
    if (current?.length) return current
    return [newBatchSessionRow(projectId)]
  })
}

function newBatchSessionRow(projectId: string, source?: any) {
  const project = projects.value.find((item) => item.id === projectId)
  const firstPeriod = options.periods.find((item) =>
    item.academicTermId === project?.academicTermId,
  )
  return {
    rowKey: crypto.randomUUID(),
    projectId,
    classroomId: source?.classroomId ?? '',
    sessionDate: source?.sessionDate ?? project?.startDate ?? '',
    startPeriod: source?.startPeriod ?? firstPeriod?.periodNumber,
    periodCount: source?.periodCount ?? 2,
    capacity: source?.capacity ?? 30,
    notes: '',
    instructorTeacherIds: source?.instructorTeacherIds ? [...source.instructorTeacherIds] : [],
  }
}

function addBatchSessionRow(projectId: string, source: any) {
  batchSessionRows.value.push(newBatchSessionRow(projectId, source))
}

function removeBatchSessionRow(row: any) {
  const sameProjectRows = batchSessionRows.value.filter((item) => item.projectId === row.projectId)
  if (sameProjectRows.length === 1) {
    batchSessionProjectIds.value = batchSessionProjectIds.value.filter((id) => id !== row.projectId)
  }
  batchSessionRows.value = batchSessionRows.value.filter((item) => item.rowKey !== row.rowKey)
}

function applyFirstBatchTime() {
  const first = batchSessionRows.value[0]
  if (!first) return
  batchSessionRows.value.slice(1).forEach((row) => {
    row.sessionDate = first.sessionDate
    row.startPeriod = first.startPeriod
    row.periodCount = first.periodCount
  })
  ElMessage.success('已套用首行的日期和节次，请分别选择不冲突的实验室')
}

function batchProject(projectId: string) {
  return projects.value.find((project) => project.id === projectId)
}

function periodsForProject(projectId: string) {
  const project = batchProject(projectId)
  return options.periods.filter((period) =>
    period.academicTermId === project?.academicTermId,
  )
}

async function saveBatchSessions() {
  if (!batchSessionRows.value.length) {
    ElMessage.warning('请至少选择一个实验项目')
    return
  }
  if (batchSessionRows.value.some((row) =>
    !row.classroomId || !row.sessionDate || !row.startPeriod || !row.periodCount || !row.instructorTeacherIds?.length,
  )) {
    ElMessage.warning('请完整填写每个项目的日期、节次、实验室、指导老师和容量')
    return
  }
  try {
    await http.post('/experiments/sessions/batch', {
      items: batchSessionRows.value,
    })
    batchSessionDialog.value = false
    ElMessage.success(`已批量安排 ${batchSessionRows.value.length} 个实验场次`)
    await load()
  } catch (error) {
    ElMessage.error(apiErrorMessage(error))
  }
}

function openSession(project: any) {
  selectedProject.value = project
  const firstPeriod = options.periods.find((item) =>
    item.academicTermId === project.academicTermId,
  )
  Object.assign(sessionForm, {
    classroomId: '',
    sessionDate: project.startDate,
    startPeriod: firstPeriod?.periodNumber,
    periodCount: 2,
    capacity: 30,
    notes: '',
    instructorTeacherIds: [],
  })
  sessionDialog.value = true
}

async function saveSession() {
  if (!selectedProject.value || !sessionForm.classroomId
    || !sessionForm.sessionDate || !sessionForm.startPeriod || !sessionForm.instructorTeacherIds.length) {
    ElMessage.warning('请选择实验日期、节次、实验室和指导老师')
    return
  }
  try {
    await http.post(`/experiments/${selectedProject.value.id}/sessions`, sessionForm)
    sessionDialog.value = false
    ElMessage.success('实验场次已安排')
    await load()
  } catch (error) {
    ElMessage.error(apiErrorMessage(error))
  }
}

async function publishProject(project: any) {
  try {
    await ElMessageBox.confirm(
      project.arrangementMode === 'Centralized'
        ? '发布后，教学任务名单中的学生将直接看到全部集中实验场次。'
        : '发布后，教学任务名单中的学生可以立即预约开放场次。',
      `发布“${project.name}”`,
      { confirmButtonText: '确认发布', cancelButtonText: '暂不发布', type: 'warning' },
    )
    await http.post(`/experiments/${project.id}/publish`)
    ElMessage.success('实验项目已发布')
    await load()
  } catch (error: any) {
    if (error === 'cancel' || error === 'close') return
    ElMessage.error(apiErrorMessage(error))
  }
}

async function closeProject(project: any) {
  try {
    await ElMessageBox.confirm(
      '关闭后保留已有安排和预约记录，但学生不能再预约新场次。',
      `关闭“${project.name}”`,
      { confirmButtonText: '确认关闭', cancelButtonText: '取消', type: 'warning' },
    )
    await http.post(`/experiments/${project.id}/close`)
    ElMessage.success('实验项目已关闭')
    await load()
  } catch (error: any) {
    if (error === 'cancel' || error === 'close') return
    ElMessage.error(apiErrorMessage(error))
  }
}

async function deleteProject(project: any) {
  try {
    await ElMessageBox.confirm(
      '草稿项目及其未发布场次将一并删除。',
      `删除“${project.name}”`,
      { confirmButtonText: '删除', cancelButtonText: '取消', type: 'error' },
    )
    await http.delete(`/experiments/${project.id}`)
    ElMessage.success('实验项目已删除')
    await load()
  } catch (error: any) {
    if (error === 'cancel' || error === 'close') return
    ElMessage.error(apiErrorMessage(error))
  }
}

function instructorsForProject(projectId: string) {
  return options.teachers.filter((teacher) => teacher.teachingTaskId === projectId
    || teacher.teachingTaskId === batchProject(projectId)?.teachingTaskId)
}

function instructorsForSelectedProject() {
  return selectedProject.value ? instructorsForProject(selectedProject.value.id) : []
}

function openBatchRename() {
  batchRenameProjectIds.value = projects.value
    .filter((project) => draftSelectedProjectIds.value.includes(project.id))
    .map((project) => project.id)
  batchRenameNames.value = batchRenameProjects.value.map((project) => project.name).join('\n')
  batchRenameDialog.value = true
}

async function saveBatchRename() {
  const names = projectNameLines(batchRenameNames.value)
  if (names.length !== batchRenameProjectIds.value.length) {
    ElMessage.warning(`已选 ${batchRenameProjectIds.value.length} 个项目，请粘贴 ${batchRenameProjectIds.value.length} 行项目名称`)
    return
  }
  try {
    await http.put('/experiments/batch/names', { projectIds: batchRenameProjectIds.value, names })
    ElMessage.success('实验项目名称已批量更新')
    batchRenameDialog.value = false
    await load()
  } catch (error) {
    ElMessage.error(apiErrorMessage(error))
  }
}

function togglePageDraftSelection(value: unknown) {
  const ids = projects.value.filter((project) => project.status === 'Draft').map((project) => project.id)
  selectedProjectIds.value = Boolean(value)
    ? [...new Set([...selectedProjectIds.value, ...ids])]
    : selectedProjectIds.value.filter((id) => !ids.includes(id))
}

function toggleProjectSelection(projectId: string, value: unknown) {
  selectedProjectIds.value = Boolean(value)
    ? [...new Set([...selectedProjectIds.value, projectId])]
    : selectedProjectIds.value.filter((id) => id !== projectId)
}

async function publishSelectedProjects() {
  const ids = draftSelectedProjectIds.value
  if (!ids.length) return
  try {
    await ElMessageBox.confirm(
      `将发布选中的 ${ids.length} 个草稿实验项目，并通知对应学生。`,
      '批量发布实验项目',
      { confirmButtonText: '确认发布', cancelButtonText: '取消', type: 'warning' },
    )
    const { data } = await http.post('/experiments/batch/publish', { projectIds: ids })
    ElMessage.success(`已提交 ${ids.length} 个实验项目的后台发布任务`)
    selectedProjectIds.value = []
    void pollPublishJob(data.jobId)
  } catch (error: any) {
    if (error === 'cancel' || error === 'close') return
    ElMessage.error(apiErrorMessage(error))
  }
}

async function pollPublishJob(jobId: string) {
  try {
    const { data } = await http.get(`/experiments/batch/publish-jobs/${jobId}`)
    if (data.status === 'Succeeded') {
      ElMessage.success('实验项目已完成发布')
      await load()
      return
    }
    if (data.status === 'Failed') {
      ElMessage.error(data.errorMessage || '实验项目发布失败')
      await load()
      return
    }
    window.setTimeout(() => { void pollPublishJob(jobId) }, 1200)
  } catch (error) {
    ElMessage.error(apiErrorMessage(error))
  }
}

async function deleteSelectedProjects() {
  const ids = draftSelectedProjectIds.value
  if (!ids.length) return
  try {
    await ElMessageBox.confirm(
      `将删除选中的 ${ids.length} 个草稿实验项目及其未发布场次。`,
      '批量删除实验项目',
      { confirmButtonText: '删除', cancelButtonText: '取消', type: 'error' },
    )
    await http.delete('/experiments/batch', { data: { projectIds: ids } })
    ElMessage.success(`已删除 ${ids.length} 个实验项目`)
    selectedProjectIds.value = []
    await load()
  } catch (error: any) {
    if (error === 'cancel' || error === 'close') return
    ElMessage.error(apiErrorMessage(error))
  }
}

async function cancelSession(project: any, session: any) {
  try {
    await ElMessageBox.confirm(
      project.status === 'Draft'
        ? '该未发布场次将直接删除。'
        : '该场次将被取消；已有学生预约也会取消并收到通知。',
      `${project.status === 'Draft' ? '删除' : '取消'} ${formatSessionTime(session)}`,
      { confirmButtonText: '确认', cancelButtonText: '返回', type: 'warning' },
    )
    await http.delete(`/experiments/sessions/${session.id}`)
    ElMessage.success(project.status === 'Draft' ? '场次已删除' : '场次已取消')
    await load()
  } catch (error: any) {
    if (error === 'cancel' || error === 'close') return
    ElMessage.error(apiErrorMessage(error))
  }
}

async function showParticipants(project: any, session: any) {
  participantSession.value = { ...session, project }
  participantsDialog.value = true
  participantsLoading.value = true
  try {
    participants.value = (
      await http.get(`/experiments/sessions/${session.id}/participants`)
    ).data
  } catch (error) {
    participants.value = []
    ElMessage.error(apiErrorMessage(error))
  } finally {
    participantsLoading.value = false
  }
}

async function book(project: any, session: any) {
  try {
    await ElMessageBox.confirm(
      `${formatSessionTime(session)} · ${session.campusName} ${session.buildingName} ${session.classroomName}`,
      `预约“${project.name}”`,
      { confirmButtonText: '确认预约', cancelButtonText: '再看看', type: 'info' },
    )
    await http.post(`/experiments/sessions/${session.id}/book`)
    ElMessage.success('实验场次已预约')
    await load()
  } catch (error: any) {
    if (error === 'cancel' || error === 'close') return
    ElMessage.error(apiErrorMessage(error))
  }
}

async function cancelBooking(project: any) {
  if (!project.myBooking) return
  try {
    await ElMessageBox.confirm(
      '取消后名额会立即释放，您可以重新选择该项目的其他场次。',
      `取消“${project.name}”预约`,
      { confirmButtonText: '取消预约', cancelButtonText: '保留预约', type: 'warning' },
    )
    await http.delete(`/experiments/bookings/${project.myBooking.id}`)
    ElMessage.success('预约已取消')
    await load()
  } catch (error: any) {
    if (error === 'cancel' || error === 'close') return
    ElMessage.error(apiErrorMessage(error))
  }
}

function formatSessionTime(session: any) {
  return `${session.sessionDate} · 第 ${session.startPeriod}–${session.startPeriod + session.periodCount - 1} 节`
}

function selectedSession(project: any) {
  return project.sessions.find((session: any) =>
    session.id === project.myBooking?.experimentSessionId,
  )
}

function sessionTagType(session: any) {
  const remaining = session.capacity - session.reservedCount
  if (remaining <= 0) return 'danger'
  if (remaining <= Math.max(2, Math.floor(session.capacity * 0.2))) return 'warning'
  return 'success'
}

async function loadOptions() {
  if (isStudent.value) return
  try {
    const { data } = await http.get('/experiments/options', {
      params: {
        academicTermId: termId.value || undefined,
        offeringCollegeId: offeringCollegeId.value || undefined,
        courseKeyword: courseKeyword.value.trim() || undefined,
      },
    })
    options.tasks = data.tasks
    options.colleges = data.colleges
    options.scheduleEntries = data.scheduleEntries
    options.classrooms = data.classrooms
    options.teachers = data.teachers
    options.periods = data.periods
  } catch (error) {
    options.tasks = []
    options.colleges = []
    options.classrooms = []
    options.teachers = []
    options.periods = []
    ElMessage.error(apiErrorMessage(error))
  }
}

async function load() {
  loading.value = true
  try {
    if (isStudent.value) {
      projects.value = (await http.get('/experiments/student', {
        params: { academicTermId: termId.value || undefined },
      })).data
      total.value = projects.value.length
    } else {
      const { data } = await http.get('/experiments/management', {
        params: {
          academicTermId: termId.value || undefined,
          arrangementMode: modeFilter.value || undefined,
          status: statusFilter.value || undefined,
          offeringCollegeId: offeringCollegeId.value || undefined,
          courseKeyword: courseKeyword.value.trim() || undefined,
          classKeyword: classKeyword.value.trim() || undefined,
          teacherKeyword: teacherKeyword.value.trim() || undefined,
          taskKeyword: taskKeyword.value.trim() || undefined,
          page: page.value,
          pageSize: pageSize.value,
        },
      })
      projects.value = data.items
      total.value = data.total
    }
  } catch (error) {
    projects.value = []
    total.value = 0
    ElMessage.error(apiErrorMessage(error))
  } finally {
    loading.value = false
  }
}

async function changeTerm() {
  page.value = 1
  selectedProjectIds.value = []
  await loadOptions()
  await load()
}

async function searchTaskOptions() {
  page.value = 1
  selectedProjectIds.value = []
  await loadOptions()
  await load()
}

async function changePage(nextPage: number) {
  page.value = nextPage
  selectedProjectIds.value = []
  await load()
}

async function changePageSize(size: number) {
  pageSize.value = size
  await changePage(1)
}

onMounted(async () => {
  try {
    terms.value = (await http.get('/base-data/terms')).data
    termId.value = defaultAcademicTermId(terms.value) ?? ''
  } catch (error) {
    ElMessage.error(apiErrorMessage(error))
  }
  await loadOptions()
  await load()
})
</script>

<template>
  <div class="page-stack experiment-page">
    <section class="page-intro experiment-intro">
      <div>
        <span class="section-kicker">LABORATORY OPERATIONS</span>
        <h2>{{ isStudent ? '我的实验' : '实验管理' }}</h2>
        <p v-if="isStudent">查看统一安排的实验课次，或为规定实验项目选择适合自己的开放时段。</p>
        <p v-else>集中实验直接绑定已发布课表；仅自主预约实验需要在此开放场次。</p>
      </div>
      <div class="intro-actions">
        <el-button v-if="!isStudent" :icon="Calendar" @click="openBatchSession">
          批量开放场次
        </el-button>
        <el-button v-if="!isStudent" type="primary" :icon="Plus" @click="openCreateProject">
          批量设置实验任务
        </el-button>
        <el-button :icon="Refresh" @click="load">刷新</el-button>
      </div>
    </section>

    <section v-if="!isStudent" class="lab-rail" aria-label="实验安排方式说明">
      <article class="rail-lane centralized">
        <span class="rail-code">FIXED / 集中</span>
        <b>统一课次</b>
        <p>面向整个教学任务名单，时间和实验室固定，像上课一样按安排到场。</p>
      </article>
      <div class="rail-switch" aria-hidden="true"><i /><i /></div>
      <article class="rail-lane flexible">
        <span class="rail-code">OPEN / 自主</span>
        <b>开放预约</b>
        <p>实验内容保持一致，学生在容量允许的场次中选择时间，每个项目限约一次。</p>
      </article>
    </section>

    <section class="experiment-toolbar">
      <el-select v-model="termId" clearable placeholder="全部学期" @change="changeTerm">
        <el-option
          v-for="term in terms"
          :key="term.id"
          :label="academicTermLabel(term)"
          :value="term.id"
          :class="academicTermOptionClass(term)"
        />
      </el-select>
      <template v-if="!isStudent">
        <el-select v-model="offeringCollegeId" clearable filterable placeholder="开课学院" @change="searchTaskOptions">
          <el-option v-for="college in options.colleges" :key="college.collegeId" :label="college.collegeName" :value="college.collegeId" />
        </el-select>
        <el-input v-model="courseKeyword" clearable placeholder="课程名称或编码" @keyup.enter="searchTaskOptions" @clear="searchTaskOptions" />
        <el-input v-model="classKeyword" clearable placeholder="教学班" @keyup.enter="searchTaskOptions" @clear="searchTaskOptions" />
        <el-input v-model="teacherKeyword" clearable placeholder="任课教师" @keyup.enter="searchTaskOptions" @clear="searchTaskOptions" />
        <el-input v-model="taskKeyword" clearable placeholder="教学任务号" @keyup.enter="searchTaskOptions" @clear="searchTaskOptions" />
        <el-select v-model="modeFilter" clearable placeholder="全部安排方式" @change="load">
          <el-option label="集中安排" value="Centralized" />
          <el-option label="自行安排" value="SelfScheduled" />
        </el-select>
        <el-select v-model="statusFilter" clearable placeholder="全部状态" @change="load">
          <el-option label="草稿" value="Draft" />
          <el-option label="进行中" value="Published" />
          <el-option label="已关闭" value="Closed" />
        </el-select>
      </template>
      <span class="result-note">{{ isStudent ? `共 ${projectGroups.length} 门课程、${total} 个实验项目` : `共 ${total} 个教学班课程` }}</span>
    </section>

    <section v-if="!isStudent" class="experiment-batch-bar">
      <el-checkbox :model-value="allPageDraftSelected" :indeterminate="!!draftSelectedProjectIds.length && !allPageDraftSelected" @change="togglePageDraftSelection">
        选中当前页全部草稿
      </el-checkbox>
      <span>已选 {{ draftSelectedProjectIds.length }} 个草稿项目</span>
      <el-button size="small" :disabled="!draftSelectedProjectIds.length" @click="openBatchRename">批量改名</el-button>
      <el-button size="small" type="primary" :disabled="!draftSelectedProjectIds.length" @click="publishSelectedProjects">批量发布</el-button>
      <el-button size="small" type="danger" plain :disabled="!draftSelectedProjectIds.length" @click="deleteSelectedProjects">批量删除</el-button>
    </section>

    <section v-loading="loading" class="project-list">
      <section v-for="group in projectGroups" :key="group.key" class="project-group">
        <header class="project-group-head">
          <div>
            <span>{{ group.termName }}</span>
            <h3>{{ group.courseCode }} · {{ group.courseName }}</h3>
          </div>
          <div class="project-group-task">
            <b>{{ group.taskNumbers.join('、') }}</b>
            <span>{{ group.classNames?.join('、') || '选课学生' }}</span>
          </div>
        </header>
        <div class="project-group-projects">
          <el-table v-if="!isStudent" :data="group.projects" class="project-table" size="small">
            <el-table-column width="46" align="center">
              <template #default="{ row }">
                <el-checkbox
                  v-if="row.status === 'Draft'"
                  :model-value="selectedProjectIds.includes(row.id)"
                  @change="toggleProjectSelection(row.id, $event)"
                  aria-label="选择实验项目"
                />
              </template>
            </el-table-column>
            <el-table-column label="实验项目" min-width="220">
              <template #default="{ row }">
                <div class="table-project-name">
                  <b>{{ row.code }} · {{ row.name }}</b>
                  <small v-if="row.description">{{ row.description }}</small>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="实验课次 / 场次" min-width="280">
              <template #default="{ row }">
                <div v-if="row.arrangementMode === 'Centralized' && row.scheduleEntry" class="table-schedule">
                  <b>第 {{ row.scheduleEntry.projectWeek ?? `${row.scheduleEntry.startWeek}–${row.scheduleEntry.endWeek}` }} 周 · 星期 {{ row.scheduleEntry.dayOfWeek }} · 第 {{ row.scheduleEntry.startPeriod }}–{{ row.scheduleEntry.startPeriod + row.scheduleEntry.periodCount - 1 }} 节</b>
                  <small>{{ row.scheduleEntry.campusName }} · {{ row.scheduleEntry.buildingName }} {{ row.scheduleEntry.classroomName }}</small>
                </div>
                <div v-else-if="row.sessions.length" class="table-schedule">
                  <b>{{ row.sessions.length }} 个开放场次</b>
                  <small>{{ row.sessions.map((session: any) => formatSessionTime(session)).join('；') }}</small>
                  <el-popover placement="bottom" :width="520" trigger="click">
                    <template #reference><el-button size="small" text :icon="User">查看场次与名单</el-button></template>
                    <div class="student-session-menu">
                      <div v-for="session in row.sessions" :key="session.id" class="student-session-option">
                        <div><b>{{ formatSessionTime(session) }}</b><span>{{ session.campusName }} · {{ session.buildingName }} {{ session.classroomName }} · 指导：{{ session.instructorNames?.join('、') || '待指定' }}</span></div>
                        <el-button v-if="session.canManage" size="small" text @click="showParticipants(row, session)">预约名单</el-button>
                        <el-button v-if="session.canManage && session.status !== 'Cancelled'" size="small" text type="danger" @click="cancelSession(row, session)">{{ row.status === 'Draft' ? '删除' : '取消' }}</el-button>
                      </div>
                    </div>
                  </el-popover>
                </div>
                <span v-else class="table-muted">尚未安排</span>
              </template>
            </el-table-column>
            <el-table-column label="方式" width="100" align="center">
              <template #default="{ row }"><el-tag :type="row.arrangementMode === 'Centralized' ? 'primary' : 'success'" effect="plain">{{ modeMeta[row.arrangementMode].label }}</el-tag></template>
            </el-table-column>
            <el-table-column label="状态" width="88" align="center">
              <template #default="{ row }"><el-tag :type="row.status === 'Published' ? 'success' : row.status === 'Closed' ? 'info' : 'warning'">{{ statusLabels[row.status] }}</el-tag></template>
            </el-table-column>
            <el-table-column label="操作" width="244" fixed="right" align="right">
              <template #default="{ row }">
                <template v-if="row.status === 'Draft'">
                  <el-button size="small" text @click="openEditProject(row)">编辑</el-button>
                  <el-button size="small" text type="danger" @click="deleteProject(row)">删除</el-button>
                  <el-button
                    size="small"
                    type="primary"
                    :disabled="row.arrangementMode === 'Centralized' ? !row.scheduleEntry : !row.sessions.some((item: any) => item.status !== 'Cancelled')"
                    @click="publishProject(row)"
                  >发布</el-button>
                </template>
                <template v-else-if="row.status === 'Published'">
                  <el-button size="small" text @click="openCorrectPublishedProject(row)">修正内容</el-button>
                  <el-button size="small" text @click="closeProject(row)">关闭项目</el-button>
                </template>
                <el-button
                  v-if="row.status !== 'Closed' && row.arrangementMode === 'SelfScheduled'"
                  size="small"
                  text
                  type="primary"
                  @click="openSession(row)"
                >安排场次</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-table v-else :data="group.projects" class="project-table student-project-table" size="small">
            <el-table-column type="expand" width="44">
              <template #default="{ row }">
                <div class="student-project-detail">
                  <p v-if="row.description"><b>项目说明</b>{{ row.description }}</p>
                  <p v-if="row.requirements"><b>实验要求</b>{{ row.requirements }}</p>
                  <p><b>开放日期</b>{{ row.startDate }} — {{ row.endDate }}</p>
                  <p><b>任课教师</b>{{ row.teacherNames.join('、') || '待定' }}</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="实验项目" min-width="210">
              <template #default="{ row }">
                <div class="table-project-name">
                  <b>{{ row.code }} · {{ row.name }}</b>
                  <small>{{ row.description || modeMeta[row.arrangementMode].note }}</small>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="实验安排" min-width="300">
              <template #default="{ row }">
                <div v-if="row.arrangementMode === 'Centralized' && row.scheduleEntry" class="table-schedule">
                  <b>第 {{ row.scheduleEntry.projectWeek ?? `${row.scheduleEntry.startWeek}–${row.scheduleEntry.endWeek}` }} 周 · 星期 {{ row.scheduleEntry.dayOfWeek }} · 第 {{ row.scheduleEntry.startPeriod }}–{{ row.scheduleEntry.startPeriod + row.scheduleEntry.periodCount - 1 }} 节</b>
                  <small>{{ row.scheduleEntry.campusName }} · {{ row.scheduleEntry.buildingName }} {{ row.scheduleEntry.classroomName }}</small>
                </div>
                <div v-else-if="row.myBooking && selectedSession(row)" class="table-schedule is-booked">
                  <b>{{ formatSessionTime(selectedSession(row)) }}</b>
                  <small>{{ selectedSession(row).campusName }} · {{ selectedSession(row).buildingName }} {{ selectedSession(row).classroomName }}</small>
                </div>
                <div v-else-if="row.sessions.length" class="table-schedule">
                  <b>{{ row.sessions.length }} 个可选场次</b>
                  <small>尚未预约，请在右侧选择实验时间</small>
                </div>
                <span v-else class="table-muted">暂无有效实验安排</span>
              </template>
            </el-table-column>
            <el-table-column label="方式" width="100" align="center">
              <template #default="{ row }"><el-tag :type="row.arrangementMode === 'Centralized' ? 'primary' : 'success'" effect="plain" size="small">{{ modeMeta[row.arrangementMode].label }}</el-tag></template>
            </el-table-column>
            <el-table-column label="状态" width="88" align="center">
              <template #default="{ row }"><el-tag :type="row.status === 'Published' ? 'success' : 'info'" size="small">{{ statusLabels[row.status] }}</el-tag></template>
            </el-table-column>
            <el-table-column label="预约操作" width="190" fixed="right" align="right">
              <template #default="{ row }">
                <template v-if="row.arrangementMode === 'SelfScheduled'">
                  <el-popover placement="bottom-end" :width="540" trigger="click">
                    <template #reference>
                      <el-button size="small" :type="row.myBooking ? 'success' : 'primary'" plain>
                        {{ row.myBooking ? '查看场次' : '选择场次' }}
                      </el-button>
                    </template>
                    <div class="student-session-menu">
                      <header><b>{{ row.code }} · {{ row.name }}</b><span>每个实验项目限约一个场次</span></header>
                      <div v-for="session in row.sessions" :key="session.id" class="student-session-option" :class="{ 'is-selected': row.myBooking?.experimentSessionId === session.id }">
                        <div>
                          <b>{{ formatSessionTime(session) }}</b>
                          <span>{{ session.campusName }} · {{ session.buildingName }} {{ session.classroomName }} · 指导：{{ session.instructorNames?.join('、') || '待指定' }}</span>
                        </div>
                        <el-tag :type="sessionTagType(session)" size="small" effect="plain">余 {{ session.remainingCount }} / {{ session.capacity }}</el-tag>
                        <el-button v-if="row.myBooking?.experimentSessionId === session.id" size="small" type="success" :icon="Check" disabled>已预约</el-button>
                        <el-button v-else size="small" type="primary" plain :disabled="row.status !== 'Published' || !!row.myBooking || session.remainingCount <= 0" @click="book(row, session)">预约</el-button>
                      </div>
                      <el-empty v-if="!row.sessions.length" :image-size="42" description="暂无有效实验场次" />
                    </div>
                  </el-popover>
                  <el-button v-if="row.myBooking && row.status === 'Published'" size="small" text type="danger" @click="cancelBooking(row)">取消</el-button>
                </template>
                <span v-else class="table-muted">无需预约</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </section>

      <el-empty
        v-if="!loading && !projects.length"
        :description="isStudent ? '当前学期没有已发布的实验项目' : '当前筛选条件下暂无实验项目'"
      >
        <el-button v-if="!isStudent" type="primary" @click="openCreateProject">
          新建第一个实验项目
        </el-button>
      </el-empty>
    </section>

    <el-pagination
      v-if="!isStudent && total > pageSize"
      class="experiment-pagination"
      background
      layout="total, sizes, prev, pager, next"
      :current-page="page"
      :page-size="pageSize"
      :page-sizes="[10, 20, 50, 100]"
      :total="total"
      @current-change="changePage"
      @size-change="changePageSize"
    />

    <el-dialog
      v-model="projectDialog"
      :title="correctingPublishedProject ? '修正已发布实验项目内容' : editingProjectId ? '编辑实验项目' : '批量设置实验任务'"
      width="720px"
      top="5vh"
    >
      <el-form label-position="top" class="experiment-form">
        <el-alert
          v-if="correctingPublishedProject"
          title="已发布项目仅可修正名称、实验内容和到场要求；编码、安排方式、课表绑定及开放日期保持不变。保存后将通知相关学生。"
          type="info"
          :closable="false"
        />
        <div class="form-section">
          <header><span>PROJECT</span><b>规定实验项目</b></header>
          <el-form-item v-if="editingProjectId && projectForm.arrangementMode === 'Centralized'" label="已发布课表中的实验课" required>
            <el-select v-model="projectForm.scheduleEntryId" filterable :disabled="!!editingProjectId" placeholder="选择已安排实验室的实验课" @change="onScheduleEntryChange">
              <el-option
                v-for="entry in options.scheduleEntries"
                :key="entry.id"
                :label="formatScheduleEntry(entry)"
                :value="entry.id"
              />
            </el-select>
            <small class="form-help">显示当前管理范围内全部已发布、已安排实验室的实验课；集中实验复用其时间和实验室，不会再生成独立实验场次。</small>
          </el-form-item>
          <el-form-item v-else :label="editingProjectId ? '所属教学任务' : '适用教学班（可多选）'" required>
            <el-select
              v-if="editingProjectId"
              v-model="projectForm.teachingTaskIds"
              filterable
              disabled
              placeholder="所属教学任务"
              @change="onTaskChange"
            >
              <el-option
                v-for="task in options.tasks"
                :key="task.id"
                :label="`${task.courseCode} · ${task.courseName} · ${task.taskNumber}`"
                :value="task.id"
              />
            </el-select>
            <el-checkbox-group
              v-else
              v-model="projectForm.teachingTaskIds"
              class="grouped-task-picker"
              @change="onTaskChange"
            >
              <div class="task-option-filters">
                <el-select v-model="offeringCollegeId" clearable filterable placeholder="开课学院" @change="searchTaskOptions">
                  <el-option v-for="college in options.colleges" :key="college.collegeId" :label="college.collegeName" :value="college.collegeId" />
                </el-select>
                <el-input v-model="courseKeyword" clearable placeholder="课程名称或代码" @keyup.enter="searchTaskOptions" />
                <el-button @click="searchTaskOptions">查询</el-button>
              </div>
              <section v-for="group in taskGroups" :key="group.key" class="task-picker-course">
                <header>
                  <span>{{ group.termName }}</span>
                  <b>{{ group.courseCode }} · {{ group.courseName }}</b>
                </header>
                <div>
                  <el-checkbox
                    v-for="task in group.tasks"
                    :key="task.id"
                    :value="task.id"
                    :disabled="projectForm.arrangementMode === 'SelfScheduled'
                      && (task.schedulingMode !== 'Flexible'
                        || (!!selectedTask && (task.academicTermId !== selectedTask.academicTermId
                          || task.courseId !== selectedTask.courseId)))"
                  >
                    <b>{{ task.taskNumber }}</b>
                    <span>{{ task.classNames.join('、') || task.name }}</span>
                  </el-checkbox>
                </div>
              </section>
              <el-empty v-if="!taskGroups.length" :image-size="46" description="没有匹配的已发布教学班，请调整筛选条件" />
            </el-checkbox-group>
            <small v-if="!editingProjectId" class="form-help">
              <template v-if="projectForm.arrangementMode === 'Centralized'">已选 {{ projectForm.teachingTaskIds.length }} 个教学班；系统会为每个教学班的全部已发布实验课生成项目。</template>
              <template v-else>自行安排仅可选择“非排时课程”的教学任务；只能勾选同一学期、同一课程，实验编码、名称、内容和开放日期将一次应用到这些教学任务。</template>
            </small>
          </el-form-item>
          <div class="form-grid two">
            <el-form-item label="项目编码" required>
              <el-input v-model="projectForm.code" :disabled="correctingPublishedProject" maxlength="40" placeholder="如 LAB-01" />
            </el-form-item>
            <el-form-item v-if="editingProjectId" label="项目名称" required>
              <el-input v-model="projectForm.name" maxlength="120" placeholder="如 数据库事务与并发实验" />
            </el-form-item>
          </div>
          <template v-if="!editingProjectId">
            <el-form-item label="项目命名方式" required>
              <el-radio-group v-model="projectForm.nameMode">
                <el-radio-button value="Sequence">自动生成顺序号</el-radio-button>
                <el-radio-button value="InputNames">逐行粘贴名称</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="projectForm.nameMode === 'Sequence'" label="项目名称前缀" required>
              <el-input v-model="projectForm.name" maxlength="116" placeholder="如 数据库实验；将生成“数据库实验 01、数据库实验 02”" />
            </el-form-item>
            <el-form-item v-else label="实验项目名称" required>
              <el-input
                v-model="projectForm.projectNames"
                type="textarea"
                :rows="6"
                maxlength="120000"
                placeholder="每行一个名称，可直接从 Excel 粘贴；系统按实际生成顺序逐行对应"
              />
              <small class="form-help">已输入 {{ projectNameLines(projectForm.projectNames).length }} 行有效名称。</small>
            </el-form-item>
          </template>
        </div>

        <div class="form-section">
          <header><span>ROUTE</span><b>选择运行轨道</b></header>
           <el-radio-group v-model="projectForm.arrangementMode" class="mode-choice" :disabled="!!editingProjectId || correctingPublishedProject">
            <el-radio-button value="Centralized">
              <b>集中安排</b><small>复用已发布课表的实验课</small>
            </el-radio-button>
            <el-radio-button value="SelfScheduled">
              <b>自行安排</b><small>开放多个场次，学生自主预约</small>
            </el-radio-button>
          </el-radio-group>
          <el-form-item label="项目开放日期" required>
            <el-date-picker
              v-model="projectForm.dates"
              :disabled="correctingPublishedProject"
              type="daterange"
              value-format="YYYY-MM-DD"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item v-if="projectForm.arrangementMode === 'SelfScheduled'" label="学生选课时间" required>
            <el-date-picker
              v-model="projectForm.selectionTimes"
              type="datetimerange"
              value-format="YYYY-MM-DDTHH:mm:ss"
              range-separator="至"
              start-placeholder="开始选课"
              end-placeholder="截至选课"
            />
            <small class="form-help">仅在此时间段内，学生可以从该项目的有效实验场次中选择一次；退选或场次取消后可重新选择。</small>
          </el-form-item>
        </div>

        <div class="form-section">
          <header><span>BRIEF</span><b>说明学生要完成什么</b></header>
          <el-form-item label="实验内容">
            <el-input
              v-model="projectForm.description"
              type="textarea"
              :rows="3"
              maxlength="1000"
              show-word-limit
              placeholder="说明实验目标、任务和成果"
            />
          </el-form-item>
          <el-form-item label="到场与准备要求">
            <el-input
              v-model="projectForm.requirements"
              type="textarea"
              :rows="2"
              maxlength="1000"
              show-word-limit
              placeholder="如携带材料、安装软件、分组要求"
            />
          </el-form-item>
        </div>
      </el-form>
      <template #footer>
        <el-button @click="projectDialog = false">取消</el-button>
        <el-button type="primary" @click="saveProject">
          {{ correctingPublishedProject
            ? '保存修正'
            : editingProjectId
            ? '保存项目'
            : projectForm.teachingTaskIds.length
              ? `创建 ${projectForm.teachingTaskIds.length} 个项目`
              : '创建项目' }}
        </el-button>
      </template>
    </el-dialog>

    <el-dialog v-model="batchRenameDialog" title="批量修改实验项目名称" width="680px">
      <el-alert
        :title="`已选择 ${batchRenameProjects.length} 个草稿项目。请按下方显示顺序，每行填写一个名称。`"
        type="info"
        :closable="false"
        show-icon
      />
      <ol class="batch-rename-preview">
        <li v-for="project in batchRenameProjects" :key="project.id">{{ project.code }} · {{ project.name }}</li>
      </ol>
      <el-input v-model="batchRenameNames" type="textarea" :rows="Math.min(12, Math.max(5, batchRenameProjects.length))" maxlength="12000" placeholder="每行一个实验项目名称" />
      <template #footer>
        <el-button @click="batchRenameDialog = false">取消</el-button>
        <el-button type="primary" @click="saveBatchRename">保存名称</el-button>
      </template>
    </el-dialog>

    <el-dialog
      v-model="sessionDialog"
      :title="`安排场次 · ${selectedProject?.name ?? ''}`"
      width="650px"
    >
      <el-form label-position="top" class="experiment-form">
        <el-alert
          :title="selectedProject?.arrangementMode === 'Centralized'
            ? '系统会检查实验室、任课教师和行政班的课表冲突。'
            : '系统会检查实验室占用；学生预约时再检查个人课表和其他实验。'"
          type="info"
          :closable="false"
          show-icon
        />
        <div class="form-grid two">
          <el-form-item label="实验日期" required>
            <el-date-picker
              v-model="sessionForm.sessionDate"
              type="date"
              value-format="YYYY-MM-DD"
              placeholder="选择日期"
            />
          </el-form-item>
          <el-form-item label="起始节次" required>
            <el-select v-model="sessionForm.startPeriod" placeholder="选择节次">
              <el-option
                v-for="period in activePeriods"
                :key="period.periodNumber"
                :label="period.startsAt
                  ? `${period.name} · ${period.startsAt}–${period.endsAt}`
                  : period.name"
                :value="period.periodNumber"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="连续节数" required>
            <el-input-number v-model="sessionForm.periodCount" :min="1" :max="12" />
          </el-form-item>
          <el-form-item label="场次容量" required>
            <el-input-number v-model="sessionForm.capacity" :min="1" :max="10000" />
          </el-form-item>
        </div>
        <el-form-item label="实验室" required>
          <el-select v-model="sessionForm.classroomId" filterable placeholder="选择实验室或教学场所">
            <el-option
              v-for="room in options.classrooms.filter((item: any) => (Number(item.teachingVenueNature) & (2 | 4 | 8 | 16)) !== 0)"
              :key="room.id"
              :label="`${room.campusName} · ${room.buildingName} ${room.name} · ${room.capacity} 人`"
              :value="room.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="指导老师（可多选）" required>
          <el-select v-model="sessionForm.instructorTeacherIds" multiple filterable placeholder="选择该教学任务的指导老师">
            <el-option
              v-for="teacher in instructorsForSelectedProject()"
              :key="teacher.teacherId"
              :label="`${teacher.teacherNumber} · ${teacher.teacherName}`"
              :value="teacher.teacherId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="场次备注">
          <el-input
            v-model="sessionForm.notes"
            maxlength="500"
            placeholder="如分组、设备或材料说明"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="sessionDialog = false">取消</el-button>
        <el-button type="primary" @click="saveSession">保存场次</el-button>
      </template>
    </el-dialog>

    <el-dialog
      v-model="batchSessionDialog"
      title="批量安排实验场次"
      width="min(1180px, 94vw)"
      top="4vh"
    >
      <el-alert
        title="一次提交整批排课；系统会逐条检查管理范围、开放日期、实验室、课表、教师和班级冲突，任何一条失败都不会写入本批次。"
        type="info"
        :closable="false"
        show-icon
      />
      <el-form label-position="top" class="batch-session-form">
        <el-form-item label="选择实验项目" required>
          <el-select
            v-model="batchSessionProjectIds"
            multiple
            filterable
            collapse-tags
            collapse-tags-tooltip
            placeholder="选择需要一起排课的实验项目"
            @change="syncBatchSessionRows"
          >
            <el-option
              v-for="project in batchProjectOptions"
              :key="project.id"
              :label="`${project.courseCode} · ${project.name} · ${project.taskNumber}`"
              :value="project.id"
            />
          </el-select>
        </el-form-item>
        <div v-if="batchSessionRows.length" class="batch-session-tools">
          <span>共 {{ batchSessionRows.length }} 条候选时段；可为同一项目追加多个时段。</span>
          <el-button size="small" @click="applyFirstBatchTime">套用首行日期与节次</el-button>
        </div>
        <div class="batch-session-table">
          <article v-for="(row, index) in batchSessionRows" :key="row.rowKey" class="batch-session-row">
            <div class="batch-project-cell">
              <span>{{ index + 1 }}</span>
              <div>
                <b>{{ batchProject(row.projectId)?.name }}</b>
                <small>{{ batchProject(row.projectId)?.taskNumber }} · {{ batchProject(row.projectId)?.classNames.join('、') || '选课学生' }}</small>
              </div>
            </div>
            <el-date-picker
              v-model="row.sessionDate"
              type="date"
              value-format="YYYY-MM-DD"
              placeholder="实验日期"
            />
            <el-select v-model="row.startPeriod" placeholder="起始节次">
              <el-option
                v-for="period in periodsForProject(row.projectId)"
                :key="period.periodNumber"
                :label="period.name"
                :value="period.periodNumber"
              />
            </el-select>
            <el-input-number v-model="row.periodCount" :min="1" :max="12" controls-position="right" />
            <el-select v-model="row.classroomId" filterable placeholder="实验室">
              <el-option
                v-for="room in options.classrooms.filter((item: any) => (Number(item.teachingVenueNature) & (2 | 4 | 8 | 16)) !== 0)"
                :key="room.id"
                :label="`${room.campusName} · ${room.buildingName} ${room.name} · ${room.capacity} 人`"
                :value="room.id"
              />
            </el-select>
            <el-select v-model="row.instructorTeacherIds" multiple filterable collapse-tags placeholder="指导老师">
              <el-option
                v-for="teacher in instructorsForProject(row.projectId)"
                :key="teacher.teacherId"
                :label="teacher.teacherName"
                :value="teacher.teacherId"
              />
            </el-select>
            <el-input-number v-model="row.capacity" :min="1" :max="10000" controls-position="right" />
            <span class="batch-session-actions">
              <el-button size="small" text type="primary" @click="addBatchSessionRow(row.projectId, row)">追加时段</el-button>
              <el-button size="small" text type="danger" @click="removeBatchSessionRow(row)">移除</el-button>
            </span>
          </article>
        </div>
        <el-empty v-if="!batchSessionRows.length" :image-size="60" description="选择实验项目后，在同一张表中完成排课" />
      </el-form>
      <template #footer>
        <el-button @click="batchSessionDialog = false">取消</el-button>
        <el-button type="primary" :disabled="!batchSessionRows.length" @click="saveBatchSessions">
          提交整批排课
        </el-button>
      </template>
    </el-dialog>

    <el-dialog
      v-model="participantsDialog"
      :title="`${participantSession?.project?.arrangementMode === 'Centralized' ? '应到名单' : '预约名单'} · ${participantSession ? formatSessionTime(participantSession) : ''}`"
      width="680px"
    >
      <el-table v-loading="participantsLoading" :data="participants" max-height="480">
        <el-table-column prop="studentNumber" label="学号" min-width="130" />
        <el-table-column prop="name" label="姓名" min-width="100" />
        <el-table-column prop="className" label="行政班" min-width="160" />
        <el-table-column label="参与方式" width="110">
          <template #default="{ row }">
            <el-tag
              :type="row.participationType === 'Centralized' ? 'primary' : 'success'"
              size="small"
              effect="plain"
            >
              {{ row.participationType === 'Centralized' ? '统一安排' : '学生预约' }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-empty v-if="!participantsLoading && !participants.length" description="当前没有学生名单" />
    </el-dialog>
  </div>
</template>

<style scoped>
.experiment-page { --lab-blue: #245d82; --lab-teal: #168276; --lab-ink: #173041; }
.experiment-intro { align-items: flex-start; }
.intro-actions { display: flex; gap: 8px; align-items: center; }
.lab-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px minmax(0, 1fr);
  gap: 0;
  margin-bottom: 16px;
  border: 1px solid #ccdce5;
  background: #f7fafc;
}
.rail-lane { position: relative; padding: 17px 20px 18px 24px; overflow: hidden; }
.rail-lane::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--lab-blue);
}
.rail-lane.flexible::before { background: var(--lab-teal); }
.rail-lane b { display: block; margin: 4px 0; color: var(--lab-ink); font-size: 15px; }
.rail-lane p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.rail-code { color: #607987; font: 700 10px/1.2 Consolas, monospace; letter-spacing: .08em; }
.rail-switch {
  position: relative;
  display: grid;
  place-content: center;
  gap: 8px;
  background: linear-gradient(90deg, transparent 49%, #b9cbd5 49%, #b9cbd5 51%, transparent 51%);
}
.rail-switch i { width: 30px; height: 7px; border: 2px solid #7794a5; border-radius: 999px; background: #fff; }
.experiment-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.experiment-toolbar .el-select { width: 210px; }
.experiment-toolbar .el-input { width: 172px; }
.result-note { margin-left: auto; color: var(--muted); font-size: 12px; }
.experiment-batch-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 46px; margin: -6px 0 16px; padding: 8px 12px; border: 1px solid #cddce3; background: #f7fafb; }
.experiment-batch-bar > span { margin-right: auto; color: #5c7481; font-size: 12px; }
.batch-rename-preview { max-height: 180px; margin: 14px 0; overflow: auto; padding: 10px 12px 10px 32px; border: 1px solid #dce5e9; background: #f8fbfc; color: #526b78; font-size: 12px; line-height: 1.8; }
.experiment-pagination { justify-content: flex-end; margin-top: 4px; }
.project-list { display: grid; gap: 14px; min-height: 160px; }
.project-group { overflow: hidden; border: 1px solid #cddce3; background: #f6fafb; }
.project-group-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 17px; border-left: 5px solid var(--lab-blue); background: #edf4f6; }
.project-group-head > div:first-child { display: grid; gap: 3px; }
.project-group-head h3 { margin: 0; color: var(--lab-ink); font-size: 15px; }
.project-group-head > div:first-child span { color: #68808d; font: 700 10px/1 Consolas, monospace; letter-spacing: .06em; }
.project-group-task { display: grid; justify-items: end; gap: 3px; color: #5c7481; font-size: 11px; text-align: right; }
.project-group-task b { color: #365364; font-size: 12px; }
.project-group-projects { display: grid; gap: 0; padding: 0; }
.project-table { --el-table-border-color: #dce5ea; --el-table-header-bg-color: #f7fafb; --el-table-row-hover-bg-color: #f6fafb; width: 100%; }
.project-table :deep(th.el-table__cell) { padding: 8px 0; color: #617986; font-size: 11px; font-weight: 650; }
.project-table :deep(td.el-table__cell) { padding: 9px 0; vertical-align: top; }
.student-project-table :deep(td.el-table__cell) { vertical-align: middle; }
.table-project-name, .table-schedule { display: grid; gap: 4px; min-width: 0; }
.table-project-name b { color: var(--lab-ink); font-size: 13px; }
.table-project-name small, .table-schedule small { overflow: hidden; color: #667f8d; font-size: 11px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.table-schedule b { color: #365364; font-size: 12px; font-weight: 600; }
.table-schedule.is-booked b { color: var(--lab-teal); }
.table-muted { color: #8b9aa4; font-size: 12px; }
.student-project-detail { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 7px 20px; padding: 11px 18px 13px; background: #f7fafb; }
.student-project-detail p { margin: 0; display: grid; grid-template-columns: 70px 1fr; gap: 8px; color: #5f7682; font-size: 11px; line-height: 1.55; }
.student-project-detail b { color: #304d5d; }
.student-session-menu { display: grid; gap: 7px; }
.student-session-menu > header { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid #dfe7ea; }
.student-session-menu > header b { color: var(--lab-ink); font-size: 12px; }
.student-session-menu > header span { color: #71858e; font-size: 10px; }
.student-session-option { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 9px; padding: 8px 9px; border: 1px solid #e0e7ea; background: #fff; }
.student-session-option.is-selected { border-color: #79afa5; box-shadow: inset 3px 0 0 var(--lab-teal); background: #f3faf8; }
.student-session-option > div { display: grid; gap: 2px; min-width: 0; }
.student-session-option > div b { color: #304d5d; font-size: 11px; }
.student-session-option > div span { overflow: hidden; color: #6a808b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.project-card {
  overflow: hidden;
  border: 0;
  border-top: 1px solid #dce5ea;
  border-left: 4px solid var(--lab-blue);
  background: #fff;
  box-shadow: none;
}
.project-card.is-flexible { border-top-color: var(--lab-teal); }
.project-card.is-closed { opacity: .82; }
.project-head { display: flex; justify-content: space-between; gap: 16px; padding: 18px 20px 10px; }
.project-code { color: #667f8d; font: 700 10px/1.2 Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; }
.project-identity h3 { margin: 5px 0 4px; color: var(--lab-ink); font-size: 18px; }
.project-identity p { margin: 0; color: var(--muted); font-size: 12px; }
.project-tags { display: flex; gap: 6px; align-items: flex-start; flex-shrink: 0; }
.project-context { display: flex; flex-wrap: wrap; gap: 7px 22px; padding: 0 20px 12px; color: #5c7481; font-size: 12px; }
.project-context span { display: inline-flex; gap: 7px; }
.project-context b { color: #304b5a; font-weight: 600; }
.project-description { margin: 0; padding: 10px 20px; border-top: 1px solid #edf1f3; color: #415b69; font-size: 13px; line-height: 1.7; }
.requirement-strip {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 10px;
  margin: 0 20px 14px;
  padding: 10px 12px;
  border-left: 3px solid #e3a13c;
  background: #fff9ef;
  color: #6d5b3e;
  font-size: 12px;
  line-height: 1.6;
}
.session-board { margin: 0 20px 16px; border: 1px solid #dfe8ec; background: #f8fafb; }
.session-board-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border-bottom: 1px solid #dfe8ec; }
.session-board-head div { display: grid; gap: 2px; }
.session-board-head span { color: #617986; font: 700 10px/1.2 Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; }
.session-board-head b { color: #304d5d; font-size: 11px; font-weight: 500; }
.session-grid { display: grid; gap: 8px; padding: 10px; }
.session-ticket {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 74px;
  border: 1px solid #dce5e9;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.session-ticket:hover { border-color: #9fb7c4; box-shadow: 0 5px 14px rgb(40 76 96 / 7%); }
.session-ticket.is-selected { border-color: var(--lab-teal); box-shadow: inset 4px 0 0 var(--lab-teal); }
.session-ticket.is-cancelled { opacity: .58; }
.ticket-date { display: grid; place-content: center; align-self: stretch; border-right: 1px dashed #cddbe2; background: #f0f5f7; text-align: center; }
.ticket-date strong { color: var(--lab-ink); font: 700 22px/1 Consolas, monospace; }
.ticket-date span { margin-top: 4px; color: #657d89; font-size: 10px; }
.ticket-body { display: grid; gap: 3px; min-width: 0; }
.ticket-body b { color: #243f4f; font-size: 13px; }
.ticket-body span { color: #5c7481; font-size: 12px; }
.ticket-body small { overflow: hidden; color: #81929b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.ticket-action { display: flex; align-items: center; justify-content: flex-end; gap: 5px; padding-right: 10px; }
.project-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid #e5ecef; background: #fbfcfd; }
.student-booking-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid #cce3de;
  background: #f0faf7;
}
.student-booking-summary > div { display: flex; align-items: center; gap: 10px; color: var(--lab-teal); }
.student-booking-summary svg { width: 22px; }
.student-booking-summary span { display: grid; gap: 2px; color: #365f5b; font-size: 12px; }
.student-booking-summary b { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.experiment-form { display: grid; gap: 13px; }
.grouped-task-picker { display: grid; gap: 10px; max-height: 310px; overflow: auto; padding: 10px; border: 1px solid #d8e3e8; background: #fff; }
.task-option-filters { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(180px, 1.2fr) auto; gap: 8px; }
.task-picker-course { overflow: hidden; border: 1px solid #e0e8eb; }
.task-picker-course header { display: flex; align-items: baseline; gap: 8px; padding: 8px 10px; background: #f3f7f8; }
.task-picker-course header span { color: #738994; font: 700 10px/1 Consolas, monospace; }
.task-picker-course header b { color: #314f60; font-size: 12px; }
.task-picker-course > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2px 12px; padding: 8px 10px; }
.task-picker-course :deep(.el-checkbox) { height: auto; margin-right: 0; white-space: normal; }
.task-picker-course :deep(.el-checkbox__label) { display: inline-flex; gap: 6px; min-width: 0; color: #536b78; font-size: 12px; }
.task-picker-course :deep(.el-checkbox__label b) { flex: 0 0 auto; color: #284757; }
.form-help { display: block; margin-top: 7px; color: var(--muted); line-height: 1.5; }
.form-section { padding: 14px 15px 1px; border: 1px solid var(--line); background: #fbfcfd; }
.form-section > header { display: flex; align-items: baseline; gap: 9px; margin-bottom: 13px; }
.form-section > header span { color: var(--lab-teal); font: 700 10px/1 Consolas, monospace; letter-spacing: .08em; }
.form-section > header b { color: var(--lab-ink); font-size: 14px; }
.mode-choice { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 16px; }
.mode-choice :deep(.el-radio-button__inner) { display: grid; gap: 5px; width: 100%; padding: 13px; }
.mode-choice b { font-size: 13px; }
.mode-choice small { font-size: 10px; font-weight: 400; }
.batch-session-form { display: grid; gap: 12px; margin-top: 16px; }
.batch-session-tools { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; }
.batch-session-table { display: grid; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.batch-session-row {
  display: grid;
  grid-template-columns: minmax(210px, 1.2fr) 145px 110px 100px minmax(200px, 1.1fr) minmax(150px, .8fr) 100px auto;
  gap: 8px;
  align-items: center;
  min-width: 1000px;
  padding: 10px;
  border: 1px solid #dce5e9;
  background: #f9fbfc;
}
.batch-session-actions { display: flex; align-items: center; gap: 2px; white-space: nowrap; }
.batch-project-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.batch-project-cell > span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: #e5f0f5; color: var(--lab-blue); font: 700 11px/1 Consolas, monospace; }
.batch-project-cell > div { display: grid; gap: 3px; min-width: 0; }
.batch-project-cell b, .batch-project-cell small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batch-project-cell b { color: var(--lab-ink); font-size: 12px; }
.batch-project-cell small { color: var(--muted); font-size: 10px; }
@media (prefers-reduced-motion: reduce) {
  .session-ticket { transition: none; }
}
@media (max-width: 760px) {
  .lab-rail { grid-template-columns: 1fr; }
  .rail-switch { display: none; }
  .rail-lane { border-bottom: 1px solid #d5e1e7; }
  .experiment-toolbar .el-select { width: 100%; }
  .result-note { width: 100%; margin-left: 0; }
  .project-head { align-items: flex-start; padding: 15px 14px 9px; }
  .project-context, .project-description { padding-inline: 14px; }
  .requirement-strip, .session-board { margin-inline: 14px; }
  .session-ticket { grid-template-columns: 54px minmax(0, 1fr); }
  .ticket-action { grid-column: 1 / -1; justify-content: flex-start; padding: 0 10px 10px; }
  .project-actions, .student-booking-summary { padding-inline: 14px; }
  .student-project-detail { grid-template-columns: 1fr; }
  .mode-choice { grid-template-columns: 1fr; }
  .intro-actions { flex-wrap: wrap; justify-content: flex-end; }
}
</style>
