<template>
  <div class="missionary-term-details">
    <BoxedIconTitleBlock
      class="missionary-term-details__heading"
      title="جزئیات ترم"
      desc="اطلاعات کامل این ترم گذرانده‌شده را مشاهده کنید."
    >
      <template #icon>
        <SvgIcon name="book" :size="24" color="var(--color-primary)" />
      </template>
    </BoxedIconTitleBlock>

    <SkeletonLoaderBlock v-if="termLoading && !enrollment" :rows="2" :cols-per-row="1" />
    <StudentTermSummary v-else-if="enrollment" :enrollment="enrollment" />

    <SimpleTitleIconBlock title="همه درس ها" class="missionary-term-details__list-title">
      <template #header-icon>
        <SvgIcon name="list-bullets" :size="16" color="#bcbcbc" />
      </template>
    </SimpleTitleIconBlock>

    <SkeletonLoaderBlock
      v-if="coursesLoading && courses.length === 0"
      :rows="3"
      :cols-per-row="1"
    />
    <div v-else-if="courses.length > 0">
      <StudentLessonItem
        v-for="lesson in courses"
        :key="lesson.id"
        :lesson="lesson"
        @show-details="onShowLesson"
      />
    </div>
    <NoItems v-else title="درسی نیست" desc="درسی برای این ترم ثبت نشده است." />
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import SvgIcon from '@/components/icons/SvgIcon.vue'
import NoItems from '@/components/blocks/NoItems.vue'
import { StudentLessonItem } from '@/features/student/lessons'
import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
import SimpleTitleIconBlock from '@/components/blocks/SimpleTitleIconBlock.vue'
import StudentTermSummary from '@/features/student/terms/components/StudentTermSummary.vue'
import {
  useMissionaryPassedTermsQuery,
  useMissionaryPassedCoursesQuery,
} from '@/services/query/missionary-education'

const route = useRoute()
const router = useRouter()

const termId = computed(() => route.params.id)

// Term summary is served from the passed-terms list cache (same query key as
// the list page); it only refetches on a cold deep-link. No detail endpoint.
const termsPagination = ref({ page: 1, perPage: 20 })
const { data: termsData, isLoading: termLoading } = useMissionaryPassedTermsQuery(termsPagination)
const enrollment = computed(() =>
  (termsData.value?.data ?? []).find((e) => String(e?.term?.id) === String(termId.value))
)

const coursesFilters = computed(() => ({ termId: termId.value }))
const coursesPagination = ref({ page: 1, perPage: 20 })
const { data: coursesData, isLoading: coursesLoading } = useMissionaryPassedCoursesQuery(
  coursesFilters,
  coursesPagination,
  { enabled: () => !!termId.value, keepPreviousData: true }
)
const courses = computed(() => coursesData.value?.data ?? [])

const onShowLesson = (lesson) => {
  router
    .push({
      name: 'missionary-education-lesson',
      params: { id: lesson.id },
      query: { termId: termId.value },
    })
    .catch(() => {})
}
</script>

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

  &__heading {
    margin-bottom: 0.75rem;
  }

  &__list-title {
    margin-top: 0.5rem;
  }
}
</style>
