<template>
  <div class="course-table-container">
    <div class="course-header">
      <h1 class="page-title">课程表</h1>
      <div class="course-actions">
        <el-button type="primary" @click="handleAddCourse" v-if="isLoggedIn">
          <el-icon><Plus /></el-icon>添加课程
        </el-button>
      </div>
    </div>

    <div class="course-filters">
      <el-card shadow="never" class="filter-card">
        <div class="filter-row">
          <div class="semester-selector">
            <span class="filter-label">学期:</span>
            <el-select v-model="currentSemester" placeholder="选择学期">
              <el-option label="2023-2024学年第一学期" value="2023-1"></el-option>
              <el-option label="2023-2024学年第二学期" value="2023-2"></el-option>
            </el-select>
          </div>
          <div class="week-selector">
            <span class="filter-label">周次:</span>
            <el-select v-model="currentWeek" placeholder="选择周次">
              <el-option v-for="week in 20" :key="week" :label="`第${week}周`" :value="week"></el-option>
            </el-select>
          </div>
          <div class="view-selector">
            <el-radio-group v-model="viewMode" size="small">
              <el-radio-button label="week">周视图</el-radio-button>
              <el-radio-button label="day">日视图</el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 周视图 -->
    <div v-if="viewMode === 'week'" class="week-view">
      <el-card shadow="hover" class="timetable-card">
        <div class="timetable">
          <!-- 时间列 -->
          <div class="time-column">
            <div class="header-cell"></div>
            <div class="time-cell" v-for="time in timeSlots" :key="time.id">
              {{ time.label }}
            </div>
          </div>
          
          <!-- 星期列 -->
          <div v-for="day in 7" :key="day" class="day-column">
            <div class="header-cell">{{ getDayLabel(day) }}</div>
            <div 
              class="course-cell" 
              v-for="time in timeSlots" 
              :key="time.id"
              @click="handleCellClick(day, time.id)"
            >
              <div 
                v-for="course in getCoursesForTimeSlot(day, time.id)" 
                :key="course.id"
                class="course-item"
                :style="{ backgroundColor: course.color || '#409EFF' }"
                @click.stop="handleCourseClick(course)"
              >
                <div class="course-name">{{ course.name }}</div>
                <div class="course-info">{{ course.location }}</div>
                <div class="course-info">{{ course.teacher }}</div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 日视图 -->
    <div v-else class="day-view">
      <el-card shadow="hover" class="day-card">
        <div class="day-header">
          <el-button-group>
            <el-button @click="previousDay">
              <el-icon><ArrowLeft /></el-icon>
            </el-button>
            <el-button>{{ getDayLabel(currentDay) }}</el-button>
            <el-button @click="nextDay">
              <el-icon><ArrowRight /></el-icon>
            </el-button>
          </el-button-group>
        </div>
        
        <div class="day-timetable">
          <div class="time-column">
            <div class="time-cell" v-for="time in timeSlots" :key="time.id">
              {{ time.label }}
            </div>
          </div>
          
          <div class="day-courses-column">
            <div 
              class="course-cell" 
              v-for="time in timeSlots" 
              :key="time.id"
              @click="handleCellClick(currentDay, time.id)"
            >
              <div 
                v-for="course in getCoursesForTimeSlot(currentDay, time.id)" 
                :key="course.id"
                class="course-item day-course-item"
                :style="{ backgroundColor: course.color || '#409EFF' }"
                @click.stop="handleCourseClick(course)"
              >
                <div class="course-name">{{ course.name }}</div>
                <div class="course-info">{{ course.location }}</div>
                <div class="course-info">{{ course.teacher }}</div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 添加/编辑课程对话框 -->
    <el-dialog
      v-model="courseDialogVisible"
      :title="isEditing ? '编辑课程' : '添加课程'"
      width="500px"
    >
      <el-form :model="courseForm" label-width="80px" :rules="courseRules" ref="courseFormRef">
        <el-form-item label="课程名称" prop="name">
          <el-input v-model="courseForm.name" placeholder="请输入课程名称"></el-input>
        </el-form-item>
        <el-form-item label="教师" prop="teacher">
          <el-input v-model="courseForm.teacher" placeholder="请输入教师姓名"></el-input>
        </el-form-item>
        <el-form-item label="地点" prop="location">
          <el-input v-model="courseForm.location" placeholder="请输入上课地点"></el-input>
        </el-form-item>
        <el-form-item label="星期" prop="dayOfWeek">
          <el-select v-model="courseForm.dayOfWeek" placeholder="请选择星期">
            <el-option v-for="day in 7" :key="day" :label="getDayLabel(day)" :value="day"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-time-select
            v-model="courseForm.startTime"
            placeholder="请选择开始时间"
            start="08:00"
            step="00:30"
            end="22:00"
          ></el-time-select>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-time-select
            v-model="courseForm.endTime"
            placeholder="请选择结束时间"
            start="08:00"
            step="00:30"
            end="22:00"
            :min-time="courseForm.startTime"
          ></el-time-select>
        </el-form-item>
        <el-form-item label="开始周次" prop="startWeek">
          <el-input-number v-model="courseForm.startWeek" :min="1" :max="20"></el-input-number>
        </el-form-item>
        <el-form-item label="结束周次" prop="endWeek">
          <el-input-number v-model="courseForm.endWeek" :min="courseForm.startWeek" :max="20"></el-input-number>
        </el-form-item>
        <el-form-item label="颜色" prop="color">
          <el-color-picker v-model="courseForm.color"></el-color-picker>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="courseDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitCourse" :loading="submitting">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 课程详情对话框 -->
    <el-dialog
      v-model="courseDetailVisible"
      title="课程详情"
      width="400px"
    >
      <div v-if="selectedCourse" class="course-detail">
        <h3 class="detail-title">{{ selectedCourse.name }}</h3>
        <div class="detail-item">
          <span class="detail-label">教师:</span>
          <span>{{ selectedCourse.teacher || '未设置' }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">地点:</span>
          <span>{{ selectedCourse.location || '未设置' }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">时间:</span>
          <span>{{ getDayLabel(selectedCourse.dayOfWeek) }} {{ selectedCourse.startTime }} - {{ selectedCourse.endTime }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">周次:</span>
          <span>第{{ selectedCourse.startWeek }}周 - 第{{ selectedCourse.endWeek }}周</span>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="courseDetailVisible = false">关闭</el-button>
          <el-button type="primary" @click="handleEditCourse" v-if="isOwner">编辑</el-button>
          <el-button type="danger" @click="handleDeleteCourse" v-if="isOwner">删除</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
import { scheduleApi } from '@/api';
import { useUserStore } from '@/stores';
import { Plus, ArrowLeft, ArrowRight } from '@element-plus/icons-vue';

const userStore = useUserStore();
const isLoggedIn = computed(() => userStore.isLoggedIn);

// 课程表数据
const courses = ref<any[]>([]);
const loading = ref(false);
const currentSemester = ref('2023-1');
const currentWeek = ref(1);
const viewMode = ref('week');
const currentDay = ref(1); // 1-7 表示周一到周日

// 时间段定义
const timeSlots = [
  { id: 1, label: '第1节 8:00-8:45' },
  { id: 2, label: '第2节 8:55-9:40' },
  { id: 3, label: '第3节 10:00-10:45' },
  { id: 4, label: '第4节 10:55-11:40' },
  { id: 5, label: '第5节 13:30-14:15' },
  { id: 6, label: '第6节 14:25-15:10' },
  { id: 7, label: '第7节 15:30-16:15' },
  { id: 8, label: '第8节 16:25-17:10' },
  { id: 9, label: '第9节 18:30-19:15' },
  { id: 10, label: '第10节 19:25-20:10' },
  { id: 11, label: '第11节 20:20-21:05' },
  { id: 12, label: '第12节 21:15-22:00' }
];

// 课程表单
const courseDialogVisible = ref(false);
const courseFormRef = ref<FormInstance>();
const submitting = ref(false);
const isEditing = ref(false);
const courseForm = reactive({
  id: undefined as number | undefined,
  name: '',
  teacher: '',
  location: '',
  dayOfWeek: 1,
  startTime: '',
  endTime: '',
  startWeek: 1,
  endWeek: 16,
  color: '#409EFF'
});

const courseRules = {
  name: [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
  dayOfWeek: [{ required: true, message: '请选择星期', trigger: 'change' }],
  startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
  endTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
  startWeek: [{ required: true, message: '请输入开始周次', trigger: 'blur' }],
  endWeek: [{ required: true, message: '请输入结束周次', trigger: 'blur' }]
};

// 课程详情
const courseDetailVisible = ref(false);
const selectedCourse = ref<any>(null);
const isOwner = computed(() => {
  if (!selectedCourse.value || !userStore.user) return false;
  return selectedCourse.value.userId === userStore.user.id;
});

// 初始化
onMounted(async () => {
  await fetchCourses();
});

// 获取课程列表
const fetchCourses = async () => {
  loading.value = true;
  try {
    const res = await scheduleApi.getAllCourses();
    if (res.code === 200) {
      courses.value = res.data.list;
    }
  } catch (error) {
    console.error('获取课程列表失败:', error);
    ElMessage.error('获取课程列表失败');
  } finally {
    loading.value = false;
  }
};

// 获取星期标签
const getDayLabel = (day: number) => {
  const days = ['', '周一', '周二', '周三', '周四', '周五', '周六', '周日'];
  return days[day] || '';
};

// 获取指定时间段的课程
const getCoursesForTimeSlot = (day: number, timeSlotId: number) => {
  return courses.value.filter(course => {
    // 检查星期是否匹配
    if (course.dayOfWeek !== day) return false;
    
    // 检查周次是否匹配
    if (currentWeek.value < course.startWeek || currentWeek.value > course.endWeek) return false;
    
    // 检查时间段是否匹配
    const courseStartHour = parseInt(course.startTime.split(':')[0]);
    const courseStartMinute = parseInt(course.startTime.split(':')[1]);
    const courseEndHour = parseInt(course.endTime.split(':')[0]);
    const courseEndMinute = parseInt(course.endTime.split(':')[1]);
    
    const slotStartHour = parseInt(timeSlots[timeSlotId - 1].label.split(' ')[1].split('-')[0].split(':')[0]);
    const slotStartMinute = parseInt(timeSlots[timeSlotId - 1].label.split(' ')[1].split('-')[0].split(':')[1]);
    const slotEndHour = parseInt(timeSlots[timeSlotId - 1].label.split(' ')[1].split('-')[1].split(':')[0]);
    const slotEndMinute = parseInt(timeSlots[timeSlotId - 1].label.split(' ')[1].split('-')[1].split(':')[1]);
    
    const courseStartTime = courseStartHour * 60 + courseStartMinute;
    const courseEndTime = courseEndHour * 60 + courseEndMinute;
    const slotStartTime = slotStartHour * 60 + slotStartMinute;
    const slotEndTime = slotEndHour * 60 + slotEndMinute;
    
    // 如果课程时间与时间段有重叠,则返回true
    return (courseStartTime <= slotEndTime && courseEndTime >= slotStartTime);
  });
};

// 处理单元格点击
const handleCellClick = (day: number, timeSlotId: number) => {
  if (!isLoggedIn.value) {
    ElMessage.warning('请先登录');
    return;
  }
  
  // 设置表单初始值
  isEditing.value = false;
  courseForm.id = undefined;
  courseForm.name = '';
  courseForm.teacher = '';
  courseForm.location = '';
  courseForm.dayOfWeek = day;
  
  // 设置时间
  const timeSlot = timeSlots[timeSlotId - 1];
  const timeRange = timeSlot.label.split(' ')[1].split('-');
  courseForm.startTime = timeRange[0];
  courseForm.endTime = timeRange[1];
  
  courseForm.startWeek = currentWeek.value;
  courseForm.endWeek = currentWeek.value + 15 > 20 ? 20 : currentWeek.value + 15;
  courseForm.color = getRandomColor();
  
  courseDialogVisible.value = true;
};

// 处理课程点击
const handleCourseClick = (course: any) => {
  selectedCourse.value = course;
  courseDetailVisible.value = true;
};

// 处理添加课程
const handleAddCourse = () => {
  if (!isLoggedIn.value) {
    ElMessage.warning('请先登录');
    return;
  }
  
  isEditing.value = false;
  courseForm.id = undefined;
  courseForm.name = '';
  courseForm.teacher = '';
  courseForm.location = '';
  courseForm.dayOfWeek = 1;
  courseForm.startTime = '08:00';
  courseForm.endTime = '09:40';
  courseForm.startWeek = 1;
  courseForm.endWeek = 16;
  courseForm.color = getRandomColor();
  
  courseDialogVisible.value = true;
};

// 处理编辑课程
const handleEditCourse = () => {
  if (!selectedCourse.value) return;
  
  isEditing.value = true;
  courseForm.id = selectedCourse.value.id;
  courseForm.name = selectedCourse.value.name;
  courseForm.teacher = selectedCourse.value.teacher || '';
  courseForm.location = selectedCourse.value.location || '';
  courseForm.dayOfWeek = selectedCourse.value.dayOfWeek;
  courseForm.startTime = selectedCourse.value.startTime;
  courseForm.endTime = selectedCourse.value.endTime;
  courseForm.startWeek = selectedCourse.value.startWeek;
  courseForm.endWeek = selectedCourse.value.endWeek;
  courseForm.color = selectedCourse.value.color || '#409EFF';
  
  courseDetailVisible.value = false;
  courseDialogVisible.value = true;
};

// 处理删除课程
const handleDeleteCourse = () => {
  if (!selectedCourse.value) return;
  
  ElMessageBox.confirm(
    '确定要删除该课程吗?此操作不可恢复',
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    try {
      const res = await scheduleApi.deleteCourse(selectedCourse.value.id);
      
      if (res.code === 200) {
        ElMessage.success('课程删除成功');
        courseDetailVisible.value = false;
        fetchCourses();
      }
    } catch (error) {
      console.error('删除课程失败:', error);
      ElMessage.error('删除课程失败');
    }
  }).catch(() => {
    // 用户取消删除
  });
};

// 提交课程表单
const submitCourse = async () => {
  if (!courseFormRef.value) return;
  
  await courseFormRef.value.validate(async (valid) => {
    if (valid) {
      submitting.value = true;
      
      try {
        // 检查时间冲突
        const conflictParams = {
          dayOfWeek: courseForm.dayOfWeek,
          startTime: courseForm.startTime,
          endTime: courseForm.endTime,
          excludeCourseId: courseForm.id
        };
        
        const conflictRes = await scheduleApi.checkCourseConflict(conflictParams);
        
        if (conflictRes.code === 200 && conflictRes.data.hasConflict) {
          ElMessageBox.confirm(
            `检测到时间冲突,有${conflictRes.data.conflictCount}门课程与当前时间段冲突,是否继续?`,
            '时间冲突',
            {
              confirmButtonText: '继续',
              cancelButtonText: '取消',
              type: 'warning'
            }
          ).then(() => {
            saveCourse();
          }).catch(() => {
            submitting.value = false;
          });
        } else {
          saveCourse();
        }
      } catch (error) {
        console.error('检查时间冲突失败:', error);
        ElMessage.error('检查时间冲突失败');
        submitting.value = false;
      }
    }
  });
};

// 保存课程
const saveCourse = async () => {
  try {
    let res;
    if (isEditing.value && courseForm.id) {
      // 更新课程
      res = await scheduleApi.updateCourse(courseForm.id, {
        name: courseForm.name,
        teacher: courseForm.teacher,
        location: courseForm.location,
        dayOfWeek: courseForm.dayOfWeek,
        startTime: courseForm.startTime,
        endTime: courseForm.endTime,
        startWeek: courseForm.startWeek,
        endWeek: courseForm.endWeek,
        color: courseForm.color
      });
    } else {
      // 创建课程
      res = await scheduleApi.createCourse({
        name: courseForm.name,
        teacher: courseForm.teacher,
        location: courseForm.location,
        dayOfWeek: courseForm.dayOfWeek,
        startTime: courseForm.startTime,
        endTime: courseForm.endTime,
        startWeek: courseForm.startWeek,
        endWeek: courseForm.endWeek,
        color: courseForm.color
      });
    }
    
    if (res.code === 200) {
      ElMessage.success(isEditing.value ? '课程更新成功' : '课程添加成功');
      courseDialogVisible.value = false;
      fetchCourses();
    }
  } catch (error) {
    console.error(isEditing.value ? '更新课程失败:' : '添加课程失败:', error);
    ElMessage.error(isEditing.value ? '更新课程失败' : '添加课程失败');
  } finally {
    submitting.value = false;
  }
};

// 切换到前一天
const previousDay = () => {
  currentDay.value = currentDay.value === 1 ? 7 : currentDay.value - 1;
};

// 切换到后一天
const nextDay = () => {
  currentDay.value = currentDay.value === 7 ? 1 : currentDay.value + 1;
};

// 获取随机颜色
const getRandomColor = () => {
  const colors = [
    '#409EFF', // 蓝色
    '#67C23A', // 绿色
    '#E6A23C', // 黄色
    '#F56C6C', // 红色
    '#909399', // 灰色
    '#9966CC', // 紫色
    '#FF9900', // 橙色
    '#19CAAD', // 青色
    '#8CC7B5', // 浅绿
    '#A0EEE1', // 浅青
    '#BEE7E9', // 浅蓝
    '#BEEDC7', // 浅绿
    '#D6D5B7', // 浅黄
    '#D1BA74', // 浅棕
    '#E6CEAC', // 浅橙
    '#ECAD9E'  // 浅红
  ];
  return colors[Math.floor(Math.random() * colors.length)];
};
</script>

<style scoped>
.course-table-container {
  padding: 20px;
}

.course-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-title {
  font-size: 24px;
  margin: 0;
}

.course-filters {
  margin-bottom: 20px;
}

.filter-card {
  border-radius: 8px;
}

.filter-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.filter-label {
  margin-right: 10px;
  font-weight: 500;
}

/* 周视图样式 */
.week-view {
  margin-top: 20px;
}

.timetable-card {
  border-radius: 8px;
}

.timetable {
  display: flex;
  min-height: 800px;
}

.time-column, .day-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #eee;
}

.time-column {
  flex: 0 0 120px;
}

.header-cell {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  background-color: #f5f7fa;
  border-bottom: 1px solid #eee;
}

.time-cell {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #eee;
  font-size: 12px;
}

.course-cell {
  height: 60px;
  border-bottom: 1px solid #eee;
  position: relative;
  cursor: pointer;
}

.course-item {
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border-radius: 4px;
  padding: 4px;
  color: white;
  font-size: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
}

.course-item:hover {
  transform: scale(1.02);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.course-name {
  font-weight: bold;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.course-info {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
}

/* 日视图样式 */
.day-view {
  margin-top: 20px;
}

.day-card {
  border-radius: 8px;
}

.day-header {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.day-timetable {
  display: flex;
  min-height: 800px;
}

.day-courses-column {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.day-course-item {
  padding: 8px;
}

/* 课程详情样式 */
.course-detail {
  padding: 10px;
}

.detail-title {
  font-size: 18px;
  margin-bottom: 15px;
  color: #303133;
}

.detail-item {
  margin-bottom: 10px;
  display: flex;
}

.detail-label {
  font-weight: 500;
  width: 60px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>