UniVerse/frontend/src/components/ui/LectureCard.vue

<script setup lang="ts">
import type { Lecture } from '@/types'
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import AppIcon from '@/components/ui/AppIcon.vue'
import EnrollmentLimitModal from '@/components/ui/EnrollmentLimitModal.vue'

const props = defineProps<{
  lecture: Lecture
  registered?: boolean
  showRating?: boolean
}>()
const emit = defineEmits<{ register: [id: string] }>()
const router = useRouter()
const userStore = useUserStore()
const enrollmentLimitModalOpen = ref(false)
const isRegistrationLimitReached = computed(
  () => !props.registered && !userStore.hasEnrollmentSlotAvailable,
)

function formatDate(d: string) {
  const date = new Date(d)
  return date.toLocaleDateString('ru-RU', { day: 'numeric', month: 'short' })
}

function starsHtml(rating: number) {
  const full = Math.floor(rating)
  return '★'.repeat(full) + '☆'.repeat(5 - full)
}

function goDetail() {
  router.push(`/lecture/${props.lecture.id}`)
}

function register() {
  if (isRegistrationLimitReached.value) {
    enrollmentLimitModalOpen.value = true
    return
  }

  emit('register', props.lecture.id)
}
</script>

<template>
  <div class="lecture-card" @click="goDetail">
    <div class="card-header">
      <span class="badge" :class="lecture.format === 'online' ? 'badge-blue' : 'badge-green'">
        <AppIcon
          class="badge-icon"
          :icon="lecture.format === 'online' ? 'world' : 'map-pin'"
          :size="14"
        />
        {{ lecture.format === 'online' ? 'Онлайн' : 'Офлайн' }}
      </span>
      <span
        class="seats"
        :class="{
          'seats-low': lecture.freeSeats <= 3 && lecture.freeSeats > 0,
          'seats-zero': lecture.freeSeats === 0 || lecture.registrationClosed,
        }"
      >
        <template v-if="lecture.registrationClosed">Запись закрыта</template>
        <template v-else>
          {{ `${lecture.enrolledSeats}/${lecture.totalSeats} записано` }}
        </template>
      </span>
    </div>

    <h3 class="card-title">{{ lecture.title }}</h3>

    <div class="card-teacher">
      <template v-if="lecture.teacher && lecture.teacher !== 'Преподаватель уточняется'">
        <AppIcon class="teacher-icon" icon="user" :size="16" />
        <span>{{ lecture.teacher }}</span>
        <span class="text-secondary">{{ lecture.institute }}</span>
      </template>
      <template v-else>
        <AppIcon class="teacher-icon" icon="building" :size="16" />
        <span class="text-secondary">{{ lecture.institute }}</span>
      </template>
    </div>

    <div class="card-meta">
      <span class="meta-item">
        <AppIcon class="meta-icon" icon="calendar" :size="14" />
        {{ formatDate(lecture.date) }}
      </span>
      <span class="meta-item">
        <AppIcon class="meta-icon" icon="clock" :size="14" />
        {{ lecture.time }}
      </span>
      <span v-if="lecture.room" class="meta-item">
        <AppIcon class="meta-icon" icon="building" :size="14" />
        {{ lecture.building }}, ауд. {{ lecture.room }}
      </span>
      <span v-else class="meta-item">
        <AppIcon class="meta-icon" icon="building" :size="14" />
        {{ lecture.building }}
      </span>
    </div>

    <div class="card-tags">
      <span class="tag-chip" v-for="tag in lecture.tags.slice(0, 3)" :key="tag">{{ tag }}</span>
    </div>

    <div class="card-footer">
      <div v-if="showRating !== false" class="rating">
        <span class="stars">{{ starsHtml(lecture.rating) }}</span>
        <span class="rating-value">{{ lecture.rating }}</span>
        <span class="text-secondary text-sm">({{ lecture.reviewCount }})</span>
      </div>
      <button v-if="registered" class="btn-registered" disabled @click.stop>✓ Записан</button>
      <button
        v-else-if="lecture.freeSeats > 0 && !lecture.registrationClosed"
        class="btn-primary btn-sm"
        @click.stop="register"
      >
        Записаться
      </button>
      <button v-else class="btn-disabled" disabled @click.stop>
        {{ lecture.registrationClosed ? 'Запись закрыта' : 'Мест нет' }}
      </button>
    </div>
    <EnrollmentLimitModal v-model="enrollmentLimitModalOpen" />
  </div>
</template>

<style scoped>
.lecture-card {
  background: var(--color-white-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-border-glass);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  min-width: 0;
}
.lecture-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 12px 40px var(--color-black-a12),
    0 0 0 1px var(--color-primary-a20);
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.badge-icon {
  color: currentColor;
}
.seats {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary-dark);
}
.seats-low {
  color: var(--color-orange-deep);
}
.seats-zero {
  color: var(--color-error-dark);
}
.card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-teacher {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.teacher-icon {
  color: var(--color-text-secondary);
}
.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--color-text-secondary);
}
.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.meta-icon {
  color: var(--color-text-secondary);
}
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
}
.card-tags .tag-chip {
  max-width: 100%;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.25;
}
.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
.card-footer button {
  margin-left: auto;
}
.rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
}
.rating-value {
  font-weight: 700;
  color: var(--color-text);
}
.btn-sm {
  padding: 7px 14px;
  font-size: 13px;
}
.btn-registered {
  background: var(--color-primary-a12);
  border: 1px solid var(--color-primary-a30);
  border-radius: var(--radius-sm);
  color: var(--color-primary-dark);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: default;
}
.btn-disabled {
  background: var(--color-slate-500-a10);
  border: 1px solid var(--color-slate-500-a20);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: not-allowed;
}
</style>