<template>
  <div class="coach-management">
    <el-card>
      <template #header>
        <div class="card-header">
          <div class="search-section">
            <el-input
              v-model="searchKeyword"
              placeholder="搜索教练用户名或昵称"
              clearable
              style="width: 300px"
              @clear="handleSearch"
              @keyup.enter="handleSearch"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
            <el-button type="primary" @click="handleSearch">
              搜索
            </el-button>
          </div>
          <el-button type="primary" @click="handleAdd">
            新增教练
          </el-button>
        </div>
      </template>

      <el-table v-loading="loading" :data="filteredData" style="width: 100%" :row-class-name="getRowClass">
        <el-table-column prop="username" label="用户名" />
        <el-table-column prop="nickname" label="昵称" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="phone" label="手机号" />
        <el-table-column label="状态" width="100">
          <template #default="{ row }">
            <el-tag
              :type="row.status === 1 ? 'success' : 'danger'"
              effect="dark"
            >
              {{ row.status === 1 ? '正常' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="违规次数" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="getViolationTag(Number(row.id))" effect="dark" round>
              {{ violationCounts[Number(row.id)] ?? 0 }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间">
          <template #default="{ row }">
            {{ formatDateTime(row.createdAt) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="380">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleEdit(row)">
              编辑
            </el-button>
            <el-button type="info" link @click="handleViewCourses(row)">
              查看团课
            </el-button>
            <el-button type="success" link @click="handleViewDetail(row)">
              详情
            </el-button>
            <el-button
              v-if="row.status === 1"
              type="danger"
              link
              @click="handleDisable(row)"
            >
              禁用
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 新增/编辑教练弹窗 -->
    <el-dialog
      v-model="modalVisible"
      :title="modalTitle"
      width="500px"
    >
      <el-form
        ref="formRef"
        :model="formState"
        :rules="formRules"
        label-width="80px"
      >
        <el-form-item label="用户名" prop="username" required>
          <el-input v-model="formState.username" :disabled="!!formState.id" />
        </el-form-item>
        <el-form-item v-if="!formState.id" label="密码" prop="password" required>
          <el-input v-model="formState.password" type="password" show-password />
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="formState.nickname" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="formState.email" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="formState.phone" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="handleModalCancel">取消</el-button>
        <el-button type="primary" @click="handleModalOk">确定</el-button>
      </template>
    </el-dialog>

    <!-- 查看团课弹窗 -->
    <el-dialog
      v-model="coursesDialogVisible"
      :title="'教练团课 - ' + selectedCoachName"
      width="900px"
    >
      <el-table v-loading="coursesLoading" :data="coachCourses" style="width: 100%" max-height="400">
        <el-table-column prop="id" label="ID" width="60" />
        <el-table-column prop="courseName" label="课程名称" />
        <el-table-column label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getCourseStatusTag(row.status)" effect="dark">
              {{ getCourseStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="开课时间" width="180">
          <template #default="{ row }">
            {{ formatDateTime(row.startTime) }}
          </template>
        </el-table-column>
        <el-table-column label="结课时间" width="180">
          <template #default="{ row }">
            {{ formatDateTime(row.endTime) }}
          </template>
        </el-table-column>
        <el-table-column label="预约人数" width="100">
          <template #default="{ row }">
            {{ coachCourseMemberCounts[row.id!] ?? row.currentMembers }} / {{ row.maxMembers }}
          </template>
        </el-table-column>
        <el-table-column prop="location" label="上课地点" />
      </el-table>
      <template #footer>
        <el-button @click="coursesDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>

    <!-- 教练详情弹窗 -->
    <el-dialog
      v-model="detailDialogVisible"
      :title="'教练详情 - ' + (detailCoach?.nickname || detailCoach?.username || '')"
      width="960px"
      destroy-on-close
    >
      <template v-if="detailCoach">
        <!-- 基本信息 -->
        <el-descriptions :column="3" border size="small" style="margin-bottom: 20px">
          <el-descriptions-item label="用户名">{{ detailCoach.username }}</el-descriptions-item>
          <el-descriptions-item label="昵称">{{ detailCoach.nickname }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="detailCoach.status === 1 ? 'success' : 'danger'" effect="dark">
              {{ detailCoach.status === 1 ? '正常' : '禁用' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="邮箱">{{ detailCoach.email }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{ detailCoach.phone }}</el-descriptions-item>
          <el-descriptions-item label="教练ID">{{ detailCoach.id }}</el-descriptions-item>
          <el-descriptions-item label="违规次数">
            <el-tag :type="getViolationTag(Number(detailCoach.id))" effect="dark" round>
              {{ violationCounts[Number(detailCoach.id)] ?? 0 }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ formatDateTime(detailCoach.createdAt) }}</el-descriptions-item>
          <el-descriptions-item label="更新时间">{{ formatDateTime(detailCoach.updatedAt) }}</el-descriptions-item>
        </el-descriptions>

        <!-- 违规记录 -->
        <h4 style="margin-bottom: 10px; color: #E6A23C;">违规记录</h4>
        <el-table v-loading="detailViolationsLoading" :data="detailViolations" style="width: 100%" max-height="240" empty-text="暂无违规记录">
          <el-table-column prop="course_name" label="课程名称" min-width="120" />
          <el-table-column prop="course_id" label="课程ID" width="80" />
          <el-table-column label="违规类型" width="120">
            <template #default="{ row }">
              <el-tag :type="getViolationTypeTag(row.violation_reason)" effect="dark">
                {{ getViolationTypeText(row.violation_reason) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="违规时间" width="180">
            <template #default="{ row }">
              {{ formatDateTime(row.violation_time) }}
            </template>
          </el-table-column>
        </el-table>

        <!-- 团课记录 -->
        <h4 style="margin-top: 20px; margin-bottom: 10px; color: #409EFF;">团课记录</h4>
        <el-table v-loading="detailCoursesLoading" :data="detailCourses" style="width: 100%" max-height="240" empty-text="暂无团课记录">
          <el-table-column prop="courseName" label="课程名称" min-width="120" />
          <el-table-column label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="getCourseStatusTag(row.status)" effect="dark">
                {{ getCourseStatusText(row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="开课时间" width="180">
            <template #default="{ row }">
              {{ formatDateTime(row.startTime) }}
            </template>
          </el-table-column>
          <el-table-column label="结课时间" width="180">
            <template #default="{ row }">
              {{ formatDateTime(row.endTime) }}
            </template>
          </el-table-column>
          <el-table-column label="预约人数" width="100">
            <template #default="{ row }">
              {{ coachCourseMemberCounts[row.id!] ?? row.currentMembers }} / {{ row.maxMembers }}
            </template>
          </el-table-column>
          <el-table-column prop="location" label="上课地点" />
        </el-table>
      </template>
      <template #footer>
        <el-button @click="detailDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { coachApi, type Coach, type CoachCreateRequest, type CoachUpdateRequest, type GroupCourse, type ViolationCountItem, type ViolationRecord } from '@/api/coach.api'
import { groupCourseBookingApi } from '@/api/groupCourse.api'
import { handleApiError } from '@/utils/errorHandler'
import { formatDateTime } from '@/utils/dateFormat'

const loading = ref(false)
const dataSource = ref<Coach[]>([])
const searchKeyword = ref('')
const violationCounts = reactive<Record<number, number>>({})

const filteredData = computed(() => {
  if (!searchKeyword.value) return dataSource.value
  const keyword = searchKeyword.value.toLowerCase()
  return dataSource.value.filter(
    (c) =>
      c.username.toLowerCase().includes(keyword) ||
      c.nickname.toLowerCase().includes(keyword) ||
      c.email.toLowerCase().includes(keyword)
  )
})

// 新增/编辑表单
const modalVisible = ref(false)
const modalTitle = ref('')
const formRef = ref()
const formState = reactive<CoachCreateRequest & { id?: string }>({
  username: '',
  password: '',
  nickname: '',
  email: '',
  phone: '',
})

const formRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 50, message: '用户名长度在 3 到 50 个字符', trigger: 'blur' },
    { pattern: /^[a-zA-Z0-9_-]+$/, message: '用户名只能包含字母、数字、下划线和横线', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 8, max: 20, message: '密码长度在 8 到 20 个字符', trigger: 'blur' },
    { pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/, message: '密码必须包含大小写字母和数字', trigger: 'blur' },
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' },
  ],
}

// 团课查看
const coursesDialogVisible = ref(false)
const coursesLoading = ref(false)
const coachCourses = ref<GroupCourse[]>([])
const selectedCoachName = ref('')
const coachCourseMemberCounts = reactive<Record<number, number>>({})

// 团课状态映射
const courseStatusMap: Record<number, { text: string; tag: string }> = {
  0: { text: '正常', tag: 'success' },
  1: { text: '已取消', tag: 'info' },
  2: { text: '已结束', tag: 'warning' },
  3: { text: '进行中', tag: 'danger' },
  5: { text: '教练缺席', tag: 'danger' },
  6: { text: '自动结束', tag: 'info' },
  7: { text: '教练迟到', tag: 'warning' },
}

// 违规类型映射
const violationTypeMap: Record<string, { text: string; tag: string }> = {
  COACH_LATE: { text: '教练迟到', tag: 'warning' },
  COACH_ABSENT: { text: '教练缺席', tag: 'danger' },
  NOT_MANUAL_END: { text: '未手动结课', tag: 'info' },
}

function getViolationTypeText(reason: string) {
  return violationTypeMap[reason]?.text || reason
}

function getViolationTypeTag(reason: string) {
  return violationTypeMap[reason]?.tag || 'info'
}

function getCourseStatusText(status: number) {
  return courseStatusMap[status]?.text || '未知'
}

function getCourseStatusTag(status: number) {
  return courseStatusMap[status]?.tag || 'info'
}

const fetchData = async () => {
  loading.value = true
  try {
    dataSource.value = await coachApi.getAll()
    // 同步获取违规次数统计
    const counts = await coachApi.getViolationCounts()
    // 清空旧数据
    Object.keys(violationCounts).forEach(key => delete violationCounts[Number(key)])
    counts.forEach(item => {
      violationCounts[item.coach_id] = item.count
    })
  } catch (error) {
    handleApiError(error)
  } finally {
    loading.value = false
  }
}

const handleSearch = () => {
  // 前端过滤，无需重新请求
}

const handleAdd = () => {
  modalTitle.value = '新增教练'
  Object.assign(formState, {
    id: undefined,
    username: '',
    password: '',
    nickname: '',
    email: '',
    phone: '',
  })
  modalVisible.value = true
}

const handleEdit = (row: Coach) => {
  modalTitle.value = '编辑教练'
  Object.assign(formState, {
    id: row.id,
    username: row.username,
    nickname: row.nickname,
    email: row.email,
    phone: row.phone,
  })
  modalVisible.value = true
}

const handleDisable = async (row: Coach) => {
  try {
    await ElMessageBox.confirm(
      `确定要禁用教练「${row.nickname || row.username}」吗？\n\n禁用后：\n1. 该教练正在进行中的团课不会被影响\n2. 该教练非进行中的团课将被自动取消\n3. 该教练将无法再被关联到团课`,
      '禁用教练确认',
      {
        confirmButtonText: '确定禁用',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: false,
      }
    )
    await coachApi.disable(row.id)
    ElMessage.success('教练已禁用')
    fetchData()
  } catch (error: any) {
    if (error !== 'cancel') {
      handleApiError(error)
    }
  }
}

const handleModalOk = async () => {
  if (!formRef.value) return

  try {
    await formRef.value.validate()

    if (formState.id) {
      const updateData: CoachUpdateRequest = {
        nickname: formState.nickname,
        email: formState.email,
        phone: formState.phone,
      }
      await coachApi.update(formState.id, updateData)
      ElMessage.success('更新成功')
    } else {
      const createData: CoachCreateRequest = {
        username: formState.username,
        password: formState.password,
        nickname: formState.nickname,
        email: formState.email,
        phone: formState.phone,
      }
      await coachApi.create(createData)
      ElMessage.success('创建成功')
    }
    modalVisible.value = false
    fetchData()
  } catch (error) {
    if (error !== 'cancel') {
      handleApiError(error)
    }
  }
}

const handleModalCancel = () => {
  modalVisible.value = false
}

const handleViewCourses = async (row: Coach) => {
  selectedCoachName.value = row.nickname || row.username
  coursesDialogVisible.value = true
  coursesLoading.value = true
  try {
    coachCourses.value = await coachApi.getCourses(row.id)
    await fetchCoachRealMemberCounts(coachCourses.value)
  } catch (error) {
    handleApiError(error)
  } finally {
    coursesLoading.value = false
  }
}

const fetchCoachRealMemberCounts = async (courses: GroupCourse[]) => {
  const results = await Promise.allSettled(
    courses.map(course =>
      groupCourseBookingApi.getByCourseId(course.id!).then(bookings => ({
        courseId: course.id!,
        count: bookings.filter(b => b.status === '0' || b.status === '2').length,
      }))
    )
  )
  results.forEach(r => {
    if (r.status === 'fulfilled') {
      coachCourseMemberCounts[r.value.courseId] = r.value.count
    }
  })
}

// 违规次数标签颜色
function getViolationTag(coachId: number) {
  const count = violationCounts[coachId] ?? 0
  if (count === 0) return 'success'
  if (count <= 2) return 'warning'
  return 'danger'
}

// 违规行高亮
function getRowClass({ row }: { row: Coach }) {
  const count = violationCounts[Number(row.id)] ?? 0
  return count > 0 ? 'row--has-violation' : ''
}

// 详情弹窗
const detailDialogVisible = ref(false)
const detailCoach = ref<Coach | null>(null)
const detailViolations = ref<ViolationRecord[]>([])
const detailViolationsLoading = ref(false)
const detailCourses = ref<GroupCourse[]>([])
const detailCoursesLoading = ref(false)

const handleViewDetail = async (row: Coach) => {
  detailCoach.value = row
  detailDialogVisible.value = true
  // 并行加载违规记录和团课记录
  detailViolationsLoading.value = true
  detailCoursesLoading.value = true
  try {
    const [violations, courses] = await Promise.all([
      coachApi.getViolations(row.id),
      coachApi.getCourses(row.id),
    ])
    detailViolations.value = violations
    detailCourses.value = courses
    await fetchCoachRealMemberCounts(courses)
  } catch (error) {
    handleApiError(error)
  } finally {
    detailViolationsLoading.value = false
    detailCoursesLoading.value = false
  }
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped lang="css">
.coach-management {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;

    .search-section {
      display: flex;
      gap: 8px;
      align-items: center;
    }
  }
}

/* 有违规记录的教练行：左侧红色边框 + 浅色背景 */
:deep(.row--has-violation) {
  border-left: 3px solid #F56C6C;
  background-color: #fef0f0 !important;
}
</style>
