<template>
  <div class="student-courses">
    <BoxedIconTitleBlock
      class="student-courses__heading"
      title="دوره‌های آموزشی"
      desc="دوره‌ها و آموزش‌های گذرانده‌شده خود را مشاهده کنید"
    >
      <template #icon>
        <SvgIcon name="book" :size="24" color="var(--color-primary)" />
      </template>
    </BoxedIconTitleBlock>

    <TabsBlock :tabs="tabs" v-model="activeTab">
      <template #current>
        <SkeletonLoaderBlock v-if="currentPending" :rows="6" :cols-per-row="1" />
        <div v-else-if="currentCourses.length > 0">
          <StudentCourseItem
            v-for="course in currentCourses"
            :key="course.id"
            :course="course"
            @show-details="onShowDetails"
          />
        </div>
        <NoItems v-else title="دوره‌ای نیست" desc="در حال حاضر دوره‌ای در حال گذراندن ندارید." />
        <PaginationBlock :pagination="currentMeta" @update:page="setCurrentPage" />
      </template>

      <template #ended>
        <SkeletonLoaderBlock v-if="endedPending" :rows="6" :cols-per-row="1" />
        <div v-else-if="endedCourses.length > 0">
          <StudentCourseItem
            v-for="course in endedCourses"
            :key="course.id"
            :course="course"
            @show-details="onShowDetails"
          />
        </div>
        <NoItems v-else title="موردی نیست" desc="هنوز دوره‌ای را تمام نکرده‌اید." />
        <PaginationBlock :pagination="endedMeta" @update:page="setEndedPage" />
      </template>
    </TabsBlock>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import SvgIcon from '@/components/icons/SvgIcon.vue'
import NoItems from '@/components/blocks/NoItems.vue'
import TabsBlock from '@/components/blocks/TabsBlock.vue'
import { usePagination } from '@/composables/usePagination'
import PaginationBlock from '@/components/blocks/PaginationBlock.vue'
import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
import { useStudentCoursesListQuery } from '@/services/query/student-courses'
import StudentCourseItem from '@/features/student/courses/components/StudentCourseItem.vue'

const router = useRouter()

const tabs = [
  { name: 'current', label: 'در حال گذراندن', icon: 'play' },
  { name: 'ended', label: 'تکمیل شده', icon: 'check-circle' },
]
const activeTab = ref('current')

const currentFilters = ref({ status: 'current' })
const endedFilters = ref({ status: 'ended' })

const { pagination: currentPagination, setPage: setCurrentPage } = usePagination({
  page: 1,
  perPage: 10,
})

const { pagination: endedPagination, setPage: setEndedPage } = usePagination({
  page: 1,
  perPage: 10,
})

const { data: currentData, isLoading: currentPending } = useStudentCoursesListQuery(
  currentFilters,
  currentPagination,
  {
    enabled: () => activeTab.value === 'current',
    keepPreviousData: true,
  }
)

const { data: endedData, isLoading: endedPending } = useStudentCoursesListQuery(
  endedFilters,
  endedPagination,
  {
    enabled: () => activeTab.value === 'ended',
    keepPreviousData: true,
  }
)

const currentCourses = computed(() => currentData.value?.data ?? [])
const endedCourses = computed(() => endedData.value?.data ?? [])

const currentMeta = computed(() => ({
  page: currentPagination.value.page,
  perPage: currentPagination.value.perPage,
  ...currentData.value?.meta,
}))

const endedMeta = computed(() => ({
  page: endedPagination.value.page,
  perPage: endedPagination.value.perPage,
  ...endedData.value?.meta,
}))

const onShowDetails = (course) => {
  router.push({ name: 'student-course-details', params: { id: course.id } }).catch(() => {})
}
</script>

<style lang="scss" scoped>
.student-courses {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  &__heading {
    margin-bottom: 0.75rem;
  }
}
</style>
