<script setup lang="ts">
import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
import { Check, CircleCheck, Plus, Refresh, Stamp } from '@element-plus/icons-vue'
import http, { apiErrorMessage } from '../api/http'
import { useAuthStore } from '../stores/auth'

const auth = useAuthStore()
const isStudent = computed(() => auth.user?.roles.includes('Student') ?? false)
const isManager = computed(() =>
  auth.user?.roles.some((role) => ['SuperAdmin', 'AcademicAdmin'].includes(role)) ?? false)
const batches = ref<any[]>([])
const selected = ref<any | null>(null)
const myClearance = ref<any | null>(null)
const loading = ref(false)
const createDialog = ref(false)
const recordDialog = ref(false)
const recordTarget = ref<any | null>(null)
const recordForm = reactive({ status: 'Completed', notes: '' })
const keyword = ref('')
const progressFilter = ref('')
const resultPage = ref(1)
const resultPageSize = 20
const resultRequestId = ref(0)
let filterTimer: ReturnType<typeof setTimeout> | undefined
const batchForm = reactive({
  name: '2030届毕业生离校手续',
  graduationYear: 2030,
  notes: '',
  items: [
    { code: 'LIBRARY', name: '图书资料归还', responsibleUnit: '图书馆', responsibleRole: 'AcademicAdmin', isRequired: true },
    { code: 'FINANCE', name: '财务费用结清', responsibleUnit: '财务处', responsibleRole: 'AcademicAdmin', isRequired: true },
    { code: 'DORM', name: '宿舍退宿确认', responsibleUnit: '学生工作办公室', responsibleRole: 'Counselor', isRequired: true },
    { code: 'COLLEGE', name: '学院材料归档', responsibleUnit: '所在学院', responsibleRole: 'CollegeAdmin', isRequired: true },
    { code: 'CERTIFICATE', name: '毕业证书领取', responsibleUnit: '教务处', responsibleRole: 'AcademicAdmin', isRequired: false },
  ],
})
const statusLabels: Record<string, string> = {
  Pending: '待办理', Completed: '已完成', Waived: '已豁免',
}
const roleLabels: Record<string, string> = {
  AcademicAdmin: '校级办理', CollegeAdmin: '学院办理', Counselor: '辅导员办理',
}
const studentItems = computed(() => selected.value?.students?.items ?? [])
const studentTotal = computed(() => selected.value?.students?.total ?? 0)
function dateText(value?: string) {
  if (!value) return '—'
  return new Intl.DateTimeFormat('zh-CN', {
    year: 'numeric', month: '2-digit', day: '2-digit',
    hour: '2-digit', minute: '2-digit', hour12: false,
  }).format(new Date(value))
}
function completedCount(records: any[]) {
  return records.filter((x) => x.status !== 'Pending').length
}
function canManage(record: any) {
  const roles = auth.user?.roles ?? []
  return roles.includes('SuperAdmin') || roles.includes(record.responsibleRole)
}
function tagType(status: string) {
  if (status === 'Completed') return 'success'
  if (status === 'Waived') return 'info'
  return 'warning'
}
async function load() {
  loading.value = true
  try {
    if (isStudent.value) {
      myClearance.value = (await http.get('/graduation-clearance/my-clearance')).data
      return
    }
    batches.value = (await http.get('/graduation-clearance/batches')).data
    const batch = batches.value.find((x) => x.id === selected.value?.id) ?? batches.value[0]
    if (batch) await selectBatch(batch.id)
    else selected.value = null
  } catch (error) {
    ElMessage.error(apiErrorMessage(error))
  } finally {
    loading.value = false
  }
}
async function selectBatch(id: string) {
  resultPage.value = 1
  await loadBatch(id)
}
async function loadBatch(id = selected.value?.id) {
  if (!id) return
  const requestId = ++resultRequestId.value
  loading.value = true
  try {
    const response = await http.get(`/graduation-clearance/batches/${id}`, {
      params: {
        page: resultPage.value,
        pageSize: resultPageSize,
        keyword: keyword.value.trim() || undefined,
        progress: progressFilter.value || undefined,
      },
    })
    if (requestId === resultRequestId.value) selected.value = response.data
  } catch (error) {
    if (requestId === resultRequestId.value) ElMessage.error(apiErrorMessage(error))
  } finally {
    if (requestId === resultRequestId.value) loading.value = false
  }
}
function addItem() {
  batchForm.items.push({
    code: '', name: '', responsibleUnit: '',
    responsibleRole: 'AcademicAdmin', isRequired: true,
  })
}
function removeItem(index: number) {
  batchForm.items.splice(index, 1)
}
async function createBatch() {
  if (!batchForm.items.length || batchForm.items.some((x) =>
    !x.code.trim() || !x.name.trim() || !x.responsibleUnit.trim())) {
    ElMessage.warning('请完整填写每一项离校事项。')
    return
  }
  try {
    const response = await http.post('/graduation-clearance/batches', batchForm)
    createDialog.value = false
    await http.post(`/graduation-clearance/batches/${response.data.id}/generate`)
    ElMessage.success('离校批次已建立，并生成毕业生办理清单。')
    await load()
  } catch (error) {
    ElMessage.error(apiErrorMessage(error))
  }
}
async function generate() {
  try {
    await http.post(`/graduation-clearance/batches/${selected.value.id}/generate`)
    ElMessage.success('已补齐最新毕业生的离校办理记录。')
    await load()
  } catch (error) {
    ElMessage.error(apiErrorMessage(error))
  }
}
function openRecord(record: any, status: string) {
  recordTarget.value = record
  recordForm.status = status
  recordForm.notes = record.notes ?? ''
  recordDialog.value = true
}
async function saveRecord() {
  try {
    await http.put(`/graduation-clearance/records/${recordTarget.value.id}`, recordForm)
    recordDialog.value = false
    ElMessage.success('离校事项办理状态已更新。')
    await loadBatch()
  } catch (error) {
    ElMessage.error(apiErrorMessage(error))
  }
}
async function closeBatch() {
  try {
    await ElMessageBox.confirm('关闭后所有办理记录将锁定，请确认必办事项均已办结。', '关闭离校批次', {
      type: 'warning', confirmButtonText: '确认关闭',
    })
    await http.post(`/graduation-clearance/batches/${selected.value.id}/close`)
    ElMessage.success('离校批次已关闭。')
    await load()
  } catch (error: any) {
    if (error !== 'cancel' && error !== 'close') ElMessage.error(apiErrorMessage(error))
  }
}

watch([keyword, progressFilter], () => {
  resultPage.value = 1
  if (filterTimer) clearTimeout(filterTimer)
  filterTimer = setTimeout(() => loadBatch(), 300)
})

onUnmounted(() => {
  if (filterTimer) clearTimeout(filterTimer)
  resultRequestId.value++
})

onMounted(load)
</script>

<template>
  <div class="page-stack clearance-page">
    <section class="page-intro">
      <div>
        <span class="section-kicker">GRADUATION CLEARANCE</span>
        <h2>{{ isStudent ? '我的毕业离校' : '毕业离校办理' }}</h2>
        <p>{{ isStudent ? '查看各责任部门的离校手续办理进度。' : '按毕业生生成跨部门事项清单，责任角色分工办理，必办事项全部完成后统一关闭。' }}</p>
      </div>
      <el-button v-if="isManager && !isStudent" type="primary" :icon="Plus" @click="createDialog = true">新建离校批次</el-button>
      <el-button v-else :icon="Refresh" @click="load">刷新</el-button>
    </section>

    <template v-if="isStudent">
      <section v-if="myClearance" class="clearance-pass" v-loading="loading">
        <header>
          <div><span>LEAVING CAMPUS CHECKLIST</span><h3>{{ myClearance.name }}</h3><p>{{ myClearance.graduationYear }}届 · {{ myClearance.status === 'Closed' ? '离校手续已完成' : '离校手续办理中' }}</p></div>
          <b>{{ completedCount(myClearance.items) }} / {{ myClearance.items.length }}</b>
        </header>
        <div class="clearance-student-list">
          <article v-for="(item, index) in myClearance.items" :key="item.id" :class="{ done: item.status !== 'Pending' }">
            <i><el-icon v-if="item.status !== 'Pending'"><Check /></el-icon><span v-else>{{ Number(index) + 1 }}</span></i>
            <div><span>{{ item.responsibleUnit }}</span><h4>{{ item.itemName }}</h4><p>{{ item.notes || (item.isRequired ? '必办事项' : '非必办事项') }}</p></div>
            <el-tag :type="tagType(item.status)" effect="plain">{{ statusLabels[item.status] }}</el-tag>
          </article>
        </div>
      </section>
      <el-empty v-else v-loading="loading" description="暂未生成你的毕业离校办理清单" />
    </template>

    <template v-else>
      <section class="clearance-batch-strip">
        <button v-for="batch in batches" :key="batch.id" :class="{ active: selected?.id === batch.id }" @click="selectBatch(batch.id)">
          <span>{{ batch.graduationYear }}届 · {{ batch.itemCount }} 项手续</span><b>{{ batch.name }}</b>
          <small>{{ batch.studentCount }} 名毕业生 · {{ batch.completedCount }}/{{ batch.recordCount }} 项已办</small><i>{{ batch.status === 'Closed' ? '已关闭' : '办理中' }}</i>
        </button>
      </section>

      <section v-if="selected" class="clearance-workbench" v-loading="loading">
        <header>
          <div><span>CLEARANCE LEDGER</span><h3>{{ selected.name }}</h3><p>{{ selected.items.length }} 项离校手续 · {{ selected.studentCount }} 名毕业生</p></div>
          <div v-if="selected.status === 'Open' && isManager"><el-button :icon="Refresh" @click="generate">补齐名单</el-button><el-button type="primary" :icon="Stamp" @click="closeBatch">关闭批次</el-button></div>
          <el-tag v-else type="success" effect="plain">批次已锁定</el-tag>
        </header>
        <div class="clearance-item-legend">
          <div v-for="item in selected.items" :key="item.id"><span>{{ item.code }}</span><b>{{ item.name }}</b><small>{{ item.responsibleUnit }} · {{ roleLabels[item.responsibleRole] }}</small></div>
        </div>
        <div class="graduation-filter">
          <el-input v-model="keyword" clearable placeholder="搜索学号、姓名、专业或班级" />
          <el-select v-model="progressFilter" clearable placeholder="全部进度">
            <el-option label="有必办待办" value="Pending" />
            <el-option label="必办已完成" value="Completed" />
          </el-select>
          <span>共 {{ studentTotal }} 名学生</span>
        </div>
        <div class="clearance-ledgers">
          <article v-for="student in studentItems" :key="student.studentId">
            <header><div><span>{{ student.studentNumber }} · {{ student.className }}</span><h4>{{ student.name }}</h4><p>{{ student.majorName }}</p></div><b>{{ completedCount(student.records) }}/{{ student.records.length }}</b></header>
            <div class="clearance-record-grid">
              <div v-for="record in student.records" :key="record.id" :class="{ done: record.status !== 'Pending' }">
                <el-icon><CircleCheck /></el-icon>
                <span>{{ record.responsibleUnit }}</span><b>{{ record.itemName }}</b>
                <small>{{ statusLabels[record.status] }}<template v-if="record.completedAt"> · {{ dateText(record.completedAt) }}</template></small>
                <div v-if="selected.status === 'Open' && canManage(record)">
                  <el-button link type="primary" @click="openRecord(record, 'Completed')">办结</el-button>
                  <el-button link @click="openRecord(record, 'Waived')">豁免</el-button>
                  <el-button v-if="record.status !== 'Pending'" link type="danger" @click="openRecord(record, 'Pending')">重置</el-button>
                </div>
              </div>
            </div>
          </article>
          <el-empty v-if="!studentItems.length" description="没有符合筛选条件的离校办理记录" />
          <el-pagination
            v-if="studentTotal > resultPageSize"
            v-model:current-page="resultPage"
            :page-size="resultPageSize"
            :total="studentTotal"
            layout="total, prev, pager, next"
            @current-change="loadBatch()"
          />
        </div>
      </section>
      <el-empty v-else v-loading="loading" description="尚未建立毕业离校批次" />
    </template>

    <el-dialog v-model="createDialog" title="新建毕业离校批次" width="900px">
      <el-form label-position="top">
        <div class="form-grid"><el-form-item label="批次名称"><el-input v-model="batchForm.name" /></el-form-item><el-form-item label="毕业年份"><el-input-number v-model="batchForm.graduationYear" :min="2000" :max="2200" /></el-form-item></div>
        <el-form-item label="说明"><el-input v-model="batchForm.notes" /></el-form-item>
        <div class="clearance-form-head"><b>离校事项配置</b><el-button :icon="Plus" @click="addItem">增加事项</el-button></div>
        <div class="clearance-form-list">
          <div v-for="(item, index) in batchForm.items" :key="index">
            <el-input v-model="item.code" placeholder="事项编码" />
            <el-input v-model="item.name" placeholder="事项名称" />
            <el-input v-model="item.responsibleUnit" placeholder="责任部门" />
            <el-select v-model="item.responsibleRole"><el-option label="校级教务" value="AcademicAdmin" /><el-option label="学院教务" value="CollegeAdmin" /><el-option label="辅导员" value="Counselor" /></el-select>
            <el-switch v-model="item.isRequired" active-text="必办" />
            <el-button link type="danger" @click="removeItem(index)">移除</el-button>
          </div>
        </div>
      </el-form>
      <template #footer><el-button @click="createDialog=false">取消</el-button><el-button type="primary" @click="createBatch">建立并生成清单</el-button></template>
    </el-dialog>

    <el-dialog v-model="recordDialog" title="更新离校事项" width="580px">
      <div v-if="recordTarget" class="review-target"><span>{{ recordTarget.studentNumber }}</span><b>{{ recordTarget.name }} · {{ recordTarget.itemName }}</b><p>{{ recordTarget.responsibleUnit }}</p></div>
      <el-form label-position="top"><el-form-item label="办理状态"><el-radio-group v-model="recordForm.status"><el-radio-button value="Completed">已完成</el-radio-button><el-radio-button value="Waived">已豁免</el-radio-button><el-radio-button value="Pending">重置待办</el-radio-button></el-radio-group></el-form-item><el-form-item label="办理备注"><el-input v-model="recordForm.notes" type="textarea" :rows="4" maxlength="500" show-word-limit /></el-form-item></el-form>
      <template #footer><el-button @click="recordDialog=false">取消</el-button><el-button type="primary" @click="saveRecord">保存办理状态</el-button></template>
    </el-dialog>
  </div>
</template>
