<template>
  <AdminLayout 
    title="学习管理" 
    subtitle="管理课程、学习任务、学习记录等信息"
  >
    <div class="course-management">
      <CourseList
        v-if="currentView === 'list'"
        @add="handleAdd"
        @edit="handleEdit"
      />
      <CourseAdd
        v-else-if="currentView === 'add' || currentView === 'edit'"
        :courseID="currentCourseId"
        @success="handleSuccess"
        @cancel="handleCancel"
      />
    </div>
  </AdminLayout>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { CourseList, CourseAdd } from '@/views/public/course/components';
import type { Course } from '@/types/study';
import { AdminLayout } from '@/views/admin';

defineOptions({
  name: 'CourseManagementView'
});

type ViewType = 'list' | 'add' | 'edit';

const currentView = ref<ViewType>('list');
const currentCourseId = ref<string>();

function handleAdd() {
  currentView.value = 'add';
  currentCourseId.value = undefined;
}

function handleEdit(course: Course) {
  currentView.value = 'edit';
  currentCourseId.value = course.courseID;
}

function handleSuccess() {
  currentView.value = 'list';
  currentCourseId.value = undefined;
}

function handleCancel() {
  currentView.value = 'list';
  currentCourseId.value = undefined;
}
</script>

<style lang="scss" scoped>
.course-management {
  background: #FFFFFF;
  border-radius: 14px;
  min-height: 500px;
}
</style>
