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

    <SkeletonLoaderBlock v-if="isLoading" :rows="3" :cols-per-row="1" />
    <template v-else-if="course">
      <div class="course-details__hero">
        <div class="course-details__image">
          <img v-if="course.image" :src="course.image" :alt="course.title" />
          <SvgIcon v-else name="book" :size="48" color="#bcbcbc" />
        </div>
        <div class="course-details__hero-info">
          <div v-if="course.averageScore != null" class="course-details__average">
            <span class="course-details__average-label">معدل دوره:</span>
            <span class="course-details__average-value">{{ course.averageScore }}</span>
          </div>
          <div class="course-details__title">
            <span>دوره</span>
            <strong>{{ course.title }}</strong>
          </div>
          <div class="course-details__teacher">
            <SvgIcon name="user" :size="11" color="#bcbcbc" />
            <span class="course-details__teacher-label">استاد:</span>
            <span class="course-details__teacher-name">{{ teacherName }}</span>
          </div>
        </div>
        <div class="course-details__dates">
          <div class="course-details__pill">
            <span class="course-details__pill-label">تاریخ شروع:</span>
            <span class="course-details__pill-value">{{ startDate }}</span>
          </div>
          <div class="course-details__pill">
            <span class="course-details__pill-label">تاریخ پایان:</span>
            <span class="course-details__pill-value">{{ endDate }}</span>
          </div>
        </div>
      </div>

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

      <div v-if="sessions.length > 0" class="course-details__sessions">
        <div v-for="session in sessions" :key="session.id" class="course-details__session">
          <div class="course-details__session-main">
            <p class="course-details__session-title">{{ session.title }}</p>
            <p class="course-details__session-meta">
              <span v-if="session.sessionTypeFa">{{ session.sessionTypeFa }}</span>
              <span v-if="session.durationMinutes" class="course-details__session-sep">
                · {{ session.durationMinutes }} دقیقه
              </span>
            </p>
          </div>
          <span
            class="course-details__session-status"
            :class="`course-details__session-status--${session.status || 'pending'}`"
          >
            {{ session.statusLabel || sessionStatusLabel(session.status) }}
          </span>
        </div>
      </div>
      <NoItems
        v-else
        title="هنوز درسی منتشر نشده"
        desc="درس‌های این دوره به‌زودی نمایش داده می‌شود."
      />
    </template>
    <NoItems v-else title="یافت نشد" desc="اطلاعاتی برای این دوره در دسترس نیست." />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import SvgIcon from '@/components/icons/SvgIcon.vue'
import NoItems from '@/components/blocks/NoItems.vue'
import { formatJalaaliDate } from '@/utils/date-utils'
import { useStudentCourseQuery } from '@/services/query/student-courses'
import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
import SimpleTitleIconBlock from '@/components/blocks/SimpleTitleIconBlock.vue'

const route = useRoute()

const courseId = computed(() => (route.params.id ? Number(route.params.id) : null))

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

const teacherName = computed(() => {
  const t = course.value?.teacher
  if (!t) return '—'
  return `${t.firstName || ''} ${t.lastName || ''}`.trim() || t.fullName || '—'
})

const startDate = computed(
  () => course.value?.faStartDate || formatJalaaliDate(course.value?.startDate) || '—'
)

const endDate = computed(
  () => course.value?.faEndDate || formatJalaaliDate(course.value?.endDate) || '—'
)

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

const sessionStatusLabel = (status) => {
  if (status === 'completed') return 'تکمیل شده'
  if (status === 'in_progress') return 'در حال بررسی'
  if (status === 'locked') return 'قفل'
  return 'در دسترس'
}
</script>

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

  &__heading {
    margin-bottom: 0.75rem;
  }

  &__hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.875rem;
    background: #fff;
    border-radius: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    align-items: center;

    @media (min-width: 1024px) {
      grid-template-columns: 3fr 6fr 3fr;
    }
  }

  &__image {
    background: #f5f5f5;
    border-radius: 0.5rem;
    min-height: 7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

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

  &__hero-info {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }

  &__average {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0, 154, 18, 6%);
    color: var(--color-secondary, #009a12);
    border-radius: 9999px;
    padding: 0.125rem 0.75rem;
    align-self: flex-start;
    font-family: var(--font-family-fa);
    font-size: 0.75rem;
  }

  &__average-value {
    font-family: var(--font-family-en);
    font-weight: 500;
  }

  &__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-family-fa);
    font-size: 1.25rem;
    color: #4b4b4b;

    strong {
      font-weight: 500;
    }
  }

  &__teacher {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: #838383;
    font-family: var(--font-family-fa);
    font-size: 0.75rem;
  }

  &__teacher-name {
    color: #4b4b4b;
    font-weight: 500;
  }

  &__dates {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    align-items: flex-end;
  }

  &__pill {
    background: rgba(107, 107, 107, 5%);
    padding: 0.25rem 1rem;
    border-radius: 0.875rem;
    line-height: 1.5;
    white-space: nowrap;
  }

  &__pill-label {
    font-family: var(--font-family-fa);
    font-weight: 300;
    font-size: 0.75rem;
    color: #848484;
    margin-inline-end: 0.25rem;
  }

  &__pill-value {
    font-family: var(--font-family-en);
    font-size: 0.75rem;
  }

  &__list-title {
    margin-bottom: 0.5rem;
  }

  &__sessions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  &__session {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 50%);
    border-radius: 0.875rem;
    box-shadow: 0 4px 10px -6px rgba(241, 241, 241, 70%);
  }

  &__session-main {
    flex: 1;
    min-width: 0;
  }

  &__session-title {
    font-family: var(--font-family-fa);
    font-size: 0.95rem;
    color: #4b4b4b;
    margin: 0 0 0.25rem;
  }

  &__session-meta {
    font-family: var(--font-family-fa);
    font-size: 0.75rem;
    color: #848484;
    margin: 0;
  }

  &__session-sep {
    margin-inline-start: 0.25rem;
  }

  &__session-status {
    padding: 0.25rem 0.875rem;
    border-radius: 0.875rem;
    font-family: var(--font-family-fa);
    font-size: 0.7rem;

    &--completed {
      background: rgba(0, 154, 18, 8%);
      color: #009a12;
    }

    &--in_progress {
      background: rgba(0, 112, 116, 8%);
      color: #007074;
    }

    &--locked {
      background: rgba(180, 180, 180, 8%);
      color: #8e8e8e;
    }

    &--pending {
      background: rgba(204, 154, 40, 8%);
      color: #cc6f00;
    }
  }
}
</style>
