<template>
  <div class="course-session-item">
    <div class="course-session-item__main">
      <p class="course-session-item__title">
        <span>{{ orderLabel }}</span>
        <span v-if="session.title" class="course-session-item__title-dash">–</span>
        <strong v-if="session.title">{{ session.title }}</strong>
      </p>
      <div class="course-session-item__duration">
        <SvgIcon name="calendar" :size="12" color="#bcbcbc" />
        <span class="course-session-item__duration-label">زمان جلسه:</span>
        <span class="course-session-item__duration-value">{{ durationLabel }}</span>
      </div>
    </div>

    <div class="course-session-item__badges">
      <span
        v-for="badge in badges"
        :key="badge.key"
        class="course-session-item__badge"
        :class="badge.variant ? `course-session-item__badge--${badge.variant}` : null"
      >
        <SvgIcon
          v-if="badge.icon"
          :name="badge.icon"
          :size="11"
          :color="badge.iconColor || '#848484'"
        />
        <span>{{ badge.label }}</span>
      </span>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

import SvgIcon from '@/components/icons/SvgIcon.vue'

const props = defineProps({
  session: { type: Object, required: true },
})

const orderLabel = computed(() => {
  const order = props.session.order
  if (order == null) return 'جلسه'
  return `جلسه ${order}`
})

const durationLabel = computed(() => {
  const m = props.session.durationMinutes
  if (m == null) return '—'
  const hours = Math.floor(m / 60)
  if (hours <= 0) return `${m} دقیقه`
  return `${hours} ساعت`
})

const sessionType = computed(() => props.session.sessionType || props.session.type)

const sessionTypeLabel = computed(() => {
  switch (sessionType.value) {
    case 'online': {
      return 'جلسه آنلاین'
    }
    case 'in_person': {
      return 'جلسه حضوری'
    }
    case 'video': {
      return 'جلسه ویدئویی'
    }
    case 'audio': {
      return 'جلسه صوتی'
    }
    case 'text': {
      return 'جلسه متنی'
    }
    case 'slide': {
      return 'جلسه اسلایدی'
    }
    case 'pdf': {
      return 'جلسه PDF'
    }
    default: {
      return ''
    }
  }
})

const badges = computed(() => {
  const list = []
  if (props.session.hasAssignment ?? props.session.assignment) {
    list.push({ key: 'assignment', icon: 'file', label: 'ارسال تکلیف' })
  }
  if (props.session.hasExam ?? props.session.exam) {
    list.push({ key: 'exam', icon: 'check-square', label: 'دارای آزمون' })
  }
  if (sessionTypeLabel.value) {
    list.push({ key: 'type', icon: 'calendar', label: sessionTypeLabel.value })
  }
  if (props.session.watched ?? props.session.isWatched) {
    list.push({
      key: 'watched',
      icon: 'check',
      iconColor: '#35c245',
      variant: 'success',
      label: 'دیده شده',
    })
  }
  return list
})
</script>

<style lang="scss" scoped>
.course-session-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 85%);
  border-radius: 0.875rem;
  box-shadow: 0 4px 10px -6px rgba(241, 241, 241, 70%);
  margin-bottom: 0.5rem;

  &__main {
    flex: 1;
    min-width: 0;
  }

  &__title {
    font-family: var(--font-family-fa);
    font-size: 0.95rem;
    color: #4b4b4b;
    margin: 0 0 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;

    strong {
      font-weight: 700;
    }
  }

  &__title-dash {
    color: #c4c4c4;
  }

  &__duration {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--font-family-fa);
    font-size: 0.7rem;
    color: #848484;
  }

  &__duration-label {
    color: #b7b7b7;
  }

  &__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    justify-content: flex-end;
  }

  &__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    background: rgba(107, 107, 107, 5%);
    font-family: var(--font-family-fa);
    font-size: 0.7rem;
    color: #4b4b4b;
    white-space: nowrap;

    &--success {
      background: rgba(53, 194, 69, 8%);
      color: #35c245;
    }
  }
}
</style>
