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

const auth = useAuthStore()
const isReviewer = computed(() =>
  auth.user?.roles.some((role) =>
    ['SuperAdmin', 'AcademicAdmin', 'CollegeAdmin'].includes(role)) ?? false)
const isTeacher = computed(() =>
  (auth.user?.roles.includes('Teacher') ?? false) && !isReviewer.value)
const loading = ref(false)
const rows = ref<any[]>([])
const terms = ref<any[]>([])
const courses = ref<any[]>([])
const teachers = ref<any[]>([])
const submitDialog = ref(false)
const reviewDialog = ref(false)
const assignmentDialog = ref(false)
const page = ref(1)
const total = ref(0)
const pageSize = 20
const form = reactive<Record<string, any>>({})
const reviewForm = reactive<Record<string, any>>({})
const assignmentForm = reactive<Record<string, any>>({})
const filters = reactive({
  academicTermId: undefined as string | undefined,
  status: isTeacher.value ? undefined : 'Pending' as string | undefined,
})
const statusLabels: Record<string, string> = {
  Pending: '待审核',
  Approved: '已通过',
  Rejected: '已驳回',
  Withdrawn: '已撤回',
}
const statusTypes: Record<string, 'success' | 'warning' | 'danger' | 'info'> = {
  Pending: 'warning',
  Approved: 'success',
  Rejected: 'danger',
  Withdrawn: 'info',
}

async function load(resetPage = false) {
  if (resetPage) page.value = 1
  loading.value = true
  try {
    const endpoint = isTeacher.value
      ? '/teacher-course-applications/mine'
      : '/teacher-course-applications/reviews'
    const { data } = await http.get(endpoint, {
      params: { ...filters, page: page.value, pageSize },
    })
    rows.value = data.items
    total.value = data.total
    if (rows.value.length === 0 && page.value > 1) {
      page.value--
      await load()
    }
  } catch (error) {
    ElMessage.error(apiErrorMessage(error))
  } finally {
    loading.value = false
  }
}

function openSubmit() {
  Object.assign(form, {
    academicTermId: filters.academicTermId ??
      defaultAcademicTermId(terms.value),
    courseId: undefined,
    statement: '',
  })
  submitDialog.value = true
}

async function submit() {
  if (!form.academicTermId || !form.courseId) {
    ElMessage.warning('请选择学期和课程。')
    return
  }
  try {
    await http.post('/teacher-course-applications/mine', form)
    submitDialog.value = false
    ElMessage.success('课程申报已提交，等待学院审核')
    await load()
  } catch (error) {
    ElMessage.error(apiErrorMessage(error))
  }
}

async function withdraw(row: any) {
  try {
    await ElMessageBox.confirm(`撤回“${row.courseName}”的授课申报？`, '撤回申报', {
      type: 'warning',
    })
    await http.delete(`/teacher-course-applications/mine/${row.id}`)
    await load()
  } catch (error: any) {
    if (error !== 'cancel' && error !== 'close') ElMessage.error(apiErrorMessage(error))
  }
}

function openReview(row: any) {
  Object.assign(reviewForm, {
    id: row.id,
    title: `${row.teacherName} · ${row.courseCode} ${row.courseName}`,
    statement: row.statement,
    status: 'Approved',
    reviewComment: '',
  })
  reviewDialog.value = true
}

async function review() {
  try {
    await http.post(`/teacher-course-applications/${reviewForm.id}/review`, {
      status: reviewForm.status,
      reviewComment: reviewForm.reviewComment,
    })
    reviewDialog.value = false
    ElMessage.success(reviewForm.status === 'Approved' ? '已审核通过' : '已驳回申报')
    await load()
  } catch (error) {
    ElMessage.error(apiErrorMessage(error))
  }
}

function openAssignment() {
  Object.assign(assignmentForm, {
    academicTermId: filters.academicTermId ??
      defaultAcademicTermId(terms.value),
    teacherId: undefined,
    courseId: undefined,
    comment: '',
  })
  assignmentDialog.value = true
}

async function assignTeacher() {
  if (!assignmentForm.academicTermId ||
      !assignmentForm.teacherId ||
      !assignmentForm.courseId) {
    ElMessage.warning('请选择学期、教师和课程。')
    return
  }
  try {
    await http.post('/teacher-course-applications/assign', assignmentForm)
    assignmentDialog.value = false
    ElMessage.success('授课资格已直接分配')
    await load()
  } catch (error) {
    ElMessage.error(apiErrorMessage(error))
  }
}

onMounted(async () => {
  const requests: Promise<any>[] = [http.get('/base-data/terms')]
  if (isTeacher.value) {
    requests.push(http.get('/teacher-course-applications/course-options'))
  } else {
    requests.push(http.get('/teacher-course-applications/assignment-options'))
  }
  const [termRes, optionRes] = await Promise.all(requests)
  terms.value = termRes.data
  if (isTeacher.value) {
    courses.value = optionRes?.data ?? []
  } else {
    courses.value = optionRes?.data?.courses ?? []
    teachers.value = optionRes?.data?.teachers ?? []
  }
  filters.academicTermId = defaultAcademicTermId(terms.value)
  await load()
})
</script>

<template>
  <div class="page-stack">
    <section class="page-intro">
      <div>
        <span class="section-kicker">TEACHING ELIGIBILITY</span>
        <h2>{{ isTeacher ? '授课科目申报' : '授课资格审核' }}</h2>
        <p v-if="isTeacher">在排课前申报本学期愿意承担的课程，学院审核通过后才能分配公共课教学任务。</p>
        <p v-else>审核教师申报，或由学院直接指定教师；通过后进入相应学期和课程的可分配教师池。</p>
      </div>
      <div class="page-actions">
        <el-button v-if="isTeacher" type="primary" :icon="Plus" @click="openSubmit">
          申报课程
        </el-button>
        <el-button v-else type="primary" :icon="Plus" @click="openAssignment">
          直接分配教师
        </el-button>
      </div>
    </section>

    <section class="eligibility-flow">
      <div class="active"><span>教师</span><b>选择学期与科目</b></div>
      <i>→</i>
      <div><span>学院</span><b>审核或直接分配</b></div>
      <i>→</i>
      <div><span>教务</span><b>合班并分配教师</b></div>
      <i>→</i>
      <div><span>排课</span><b>生成课表</b></div>
    </section>

    <section class="data-card">
      <div class="filter-bar">
        <el-select v-model="filters.academicTermId" clearable placeholder="全部学期" @change="load(true)">
          <el-option v-for="item in terms" :key="item.id" :label="academicTermLabel(item)" :value="item.id" :class="academicTermOptionClass(item)" />
        </el-select>
        <el-select v-model="filters.status" clearable placeholder="全部状态" @change="load(true)">
          <el-option v-for="(label, value) in statusLabels" :key="value" :label="label" :value="value" />
        </el-select>
        <el-button :icon="Refresh" @click="() => load()">刷新</el-button>
        <span>共 {{ total }} 条</span>
      </div>

      <el-table v-loading="loading" :data="rows" class="data-table">
        <el-table-column v-if="!isTeacher" label="申报教师" min-width="170">
          <template #default="{ row }">
            <div class="course-name"><b>{{ row.teacherName }}</b><span>{{ row.teacherNumber }} · {{ row.teacherCollegeName }}</span></div>
          </template>
        </el-table-column>
        <el-table-column label="申报课程" min-width="220">
          <template #default="{ row }">
            <div class="course-name"><b>{{ row.courseName }}</b><span>{{ row.courseCode }} · {{ row.courseCollegeName || row.collegeName }}</span></div>
          </template>
        </el-table-column>
        <el-table-column prop="termName" label="学期" min-width="180" />
        <el-table-column label="申报说明" min-width="180">
          <template #default="{ row }">{{ row.statement || '—' }}</template>
        </el-table-column>
        <el-table-column label="状态" width="100">
          <template #default="{ row }"><el-tag :type="statusTypes[row.status]">{{ statusLabels[row.status] }}</el-tag></template>
        </el-table-column>
        <el-table-column label="审核意见" min-width="160">
          <template #default="{ row }">{{ row.reviewComment || '—' }}</template>
        </el-table-column>
        <el-table-column label="操作" width="110" fixed="right">
          <template #default="{ row }">
            <el-button v-if="isTeacher && row.status === 'Pending'" link type="danger" @click="withdraw(row)">撤回</el-button>
            <el-button v-if="!isTeacher && row.status === 'Pending'" link type="primary" @click="openReview(row)">审核</el-button>
            <span v-if="row.status !== 'Pending'" class="muted-action">已处理</span>
          </template>
        </el-table-column>
        <template #empty><el-empty :description="isTeacher ? '尚未申报授课科目' : '没有待处理的授课申报'" /></template>
      </el-table>
      <el-pagination
        v-if="total > pageSize"
        v-model:current-page="page"
        :page-size="pageSize"
        :total="total"
        layout="total, prev, pager, next"
        class="table-pagination"
        @current-change="() => load()"
      />
    </section>

    <el-dialog v-model="submitDialog" title="申报授课科目" width="600px">
      <el-form label-position="top">
        <div class="form-grid">
          <el-form-item label="学期" required>
            <el-select v-model="form.academicTermId">
              <el-option v-for="item in terms" :key="item.id" :label="academicTermLabel(item)" :value="item.id" :class="academicTermOptionClass(item)" />
            </el-select>
          </el-form-item>
          <el-form-item label="拟授课程" required>
            <el-select v-model="form.courseId" filterable>
              <el-option v-for="item in courses" :key="item.id" :label="`${item.code} · ${item.name}`" :value="item.id" />
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="申报说明">
          <el-input v-model="form.statement" type="textarea" :rows="4" maxlength="500" show-word-limit placeholder="可填写相关教学经历、研究方向或其他说明" />
        </el-form-item>
      </el-form>
      <template #footer><el-button @click="submitDialog = false">取消</el-button><el-button type="primary" @click="submit">提交学院审核</el-button></template>
    </el-dialog>

    <el-dialog v-model="reviewDialog" title="审核授课资格" width="580px">
      <div class="constraint-title">{{ reviewForm.title }}</div>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="教师说明">{{ reviewForm.statement || '未填写' }}</el-descriptions-item>
      </el-descriptions>
      <el-form label-position="top" style="margin-top: 16px">
        <el-form-item label="审核结论">
          <el-radio-group v-model="reviewForm.status">
            <el-radio-button value="Approved">通过</el-radio-button>
            <el-radio-button value="Rejected">驳回</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核意见">
          <el-input v-model="reviewForm.reviewComment" type="textarea" :rows="3" maxlength="500" show-word-limit />
        </el-form-item>
      </el-form>
      <template #footer><el-button @click="reviewDialog = false">取消</el-button><el-button type="primary" @click="review">确认审核</el-button></template>
    </el-dialog>

    <el-dialog v-model="assignmentDialog" title="直接分配授课教师" width="640px">
      <el-alert
        title="无需教师先申报，保存后立即取得所选学期与课程的授课资格。"
        type="info"
        :closable="false"
        show-icon
      />
      <el-form label-position="top" style="margin-top: 18px">
        <el-form-item label="学期" required>
          <el-select v-model="assignmentForm.academicTermId" style="width: 100%">
            <el-option v-for="item in terms" :key="item.id" :label="academicTermLabel(item)" :value="item.id" :class="academicTermOptionClass(item)" />
          </el-select>
        </el-form-item>
        <div class="form-grid">
          <el-form-item label="教师" required>
            <el-select
              v-model="assignmentForm.teacherId"
              filterable
              style="width: 100%"
              placeholder="按工号或姓名选择"
            >
              <el-option
                v-for="item in teachers"
                :key="item.id"
                :label="`${item.teacherNumber} · ${item.name}`"
                :value="item.id"
              >
                <span>{{ item.teacherNumber }} · {{ item.name }}</span>
                <small class="option-hint">{{ item.collegeName }}{{ item.title ? ` · ${item.title}` : '' }}</small>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="课程" required>
            <el-select
              v-model="assignmentForm.courseId"
              filterable
              style="width: 100%"
              placeholder="按编码或名称选择"
            >
              <el-option
                v-for="item in courses"
                :key="item.id"
                :label="`${item.code} · ${item.name}`"
                :value="item.id"
              >
                <span>{{ item.code }} · {{ item.name }}</span>
                <small class="option-hint">{{ item.collegeName }} · {{ item.credits }} 学分</small>
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="分配说明">
          <el-input
            v-model="assignmentForm.comment"
            type="textarea"
            :rows="3"
            maxlength="500"
            show-word-limit
            placeholder="可填写教研室安排、专业方向等依据"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="assignmentDialog = false">取消</el-button>
        <el-button type="primary" @click="assignTeacher">确认分配</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.option-hint {
  float: right;
  margin-left: 20px;
  color: #8a93a5;
  font-size: 11px;
}
</style>
