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

    <SkeletonLoaderBlock v-if="isLoading && !lesson" :rows="2" :cols-per-row="1" />
    <div v-else-if="lesson" class="student-lesson-details__summary">
      <span class="student-lesson-details__decor" aria-hidden="true">
        <img
          v-if="lesson.coverUrl"
          :src="lesson.coverUrl"
          :alt="lesson.title || ''"
          class="student-lesson-details__cover"
        />
        <SvgIcon v-else name="users-three" :size="40" color="rgba(0, 112, 116, 0.31)" />
      </span>
      <div class="student-lesson-details__summary-content">
        <p class="student-lesson-details__summary-title">{{ lesson.title || '—' }}</p>
        <div class="student-lesson-details__summary-stats">
          <Badge
            variant="neutral"
            label="استاد :"
            :value="teacherText"
            class="student-lesson-details__summary-stat"
          >
            <template #prepend>
              <SvgIcon name="user" :size="12" color="#5d5d5d" />
            </template>
          </Badge>
          <Badge
            variant="neutral"
            label="تعداد جلسات :"
            :value="sessionsText"
            class="student-lesson-details__summary-stat"
          >
            <template #prepend>
              <SvgIcon name="list-bullets" :size="12" color="#5d5d5d" />
            </template>
          </Badge>
          <Badge
            variant="neutral"
            label="ظرفیت :"
            :value="capacityText"
            class="student-lesson-details__summary-stat"
          >
            <template #prepend>
              <SvgIcon name="users-three" :size="12" color="#5d5d5d" />
            </template>
          </Badge>
        </div>
      </div>
    </div>

    <TabsBlock :tabs="tabs" v-model="activeTab">
      <template #sessions>
        <SkeletonLoaderBlock
          v-if="sessionsLoading && sessions.length === 0"
          :rows="3"
          :cols-per-row="1"
        />
        <div v-else-if="sessions.length > 0">
          <StudentSessionItem
            v-for="session in sessions"
            :key="session.id"
            :session="session"
            @start="onStartSession"
          />
        </div>
        <NoItems v-else title="جلسه‌ای نیست" desc="هنوز جلسه‌ای برای این درس ثبت نشده است." />
      </template>

      <template #exams>
        <SkeletonLoaderBlock
          v-if="examsLoading && exams.length === 0"
          :rows="3"
          :cols-per-row="1"
        />
        <div v-else-if="exams.length > 0">
          <StudentExamItem v-for="exam in exams" :key="exam.id" :exam="exam" @start="onStartExam" />
        </div>
        <NoItems v-else title="آزمونی نیست" desc="هنوز آزمونی برای این درس ثبت نشده است." />
      </template>
    </TabsBlock>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import Badge from '@/components/Badge.vue'
import { useRoute, 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 { StudentExamItem } from '@/features/student/exams'
import { StudentSessionItem } from '@/features/student/sessions'
import { useStudentCourseQuery } from '@/services/query/student-courses'
import { useStudentExamsListQuery } from '@/services/query/student-exams'
import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
import { useStudentSessionsListQuery } from '@/services/query/student-sessions'

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

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

const { data: lesson, isLoading } = useStudentCourseQuery(lessonId, {
  enabled: () => !!lessonId.value,
})

const sessionsFilters = computed(() => ({ courseId: lessonId.value }))
const sessionsPagination = ref({ page: 1, perPage: 50 })
const { data: sessionsData, isLoading: sessionsLoading } = useStudentSessionsListQuery(
  sessionsFilters,
  sessionsPagination,
  { enabled: () => !!lessonId.value, keepPreviousData: true }
)

const sessions = computed(() => sessionsData.value?.data ?? [])

const examsFilters = computed(() => ({ courseId: lessonId.value }))
const examsPagination = ref({ page: 1, perPage: 50 })
const { data: examsData, isLoading: examsLoading } = useStudentExamsListQuery(
  examsFilters,
  examsPagination,
  { enabled: () => !!lessonId.value, keepPreviousData: true }
)
const exams = computed(() => examsData.value?.data ?? [])

const sessionsText = computed(() =>
  lesson.value?.sessionsCount == null ? '—' : `${lesson.value.sessionsCount} جلسه`
)
const teacherText = computed(() => lesson.value?.teacher?.name || '—')
const capacityText = computed(() =>
  lesson.value?.capacity == null ? '—' : `${lesson.value.capacity} نفر`
)

const tabs = [
  { name: 'sessions', label: 'همه جلسه ها', icon: 'list-bullets' },
  { name: 'exams', label: 'آزمون هــــــــا', icon: 'file' },
]
const activeTab = ref('sessions')

const onStartSession = (session) => {
  router.push({ name: 'student-session-details', params: { id: session.id } }).catch(() => {})
}
const onStartExam = (exam) => {
  router.push({ name: 'student-exam', params: { id: exam.id } }).catch(() => {})
}
</script>

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

  &__heading {
    margin-bottom: 0.75rem;
  }

  &__summary {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 1.25rem 1rem;
    background: rgba(255, 255, 255, 40%);
    box-shadow: 0 6.75px 19.425px rgba(0, 0, 0, 4%);
    border-radius: 0.75rem;
    margin-bottom: 0.75rem;

    &-content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 0.5rem;
      width: 100%;
    }
  }

  &__decor {
    display: none;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 0.75rem;
    background: rgba(0, 112, 116, 4%);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;

    @media (min-width: 1024px) {
      display: inline-flex;
    }
  }

  &__cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  &__summary-title {
    font-family: var(--font-family-fa);
    font-weight: 400;
    font-size: 1.5rem;
    color: #4b4b4b;
    margin: 0;
    text-align: center;
    flex: 0 0 100%;

    @media (min-width: 1024px) {
      flex: 0 0 auto;
      text-align: end;
    }
  }

  &__summary-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  &__summary-stat.badge {
    padding: 0.375rem 0.875rem;
    background: rgba(107, 107, 107, 4%);
    color: #5d5d5d;

    :deep(.badge__label) {
      font-size: 0.7rem;
      opacity: 1;
    }
  }
}
</style>
