UniVerse/frontend/src/views/student/LectureDetailView.vue

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useLecturesStore } from '@/stores/lectures'
import GlassCard from '@/components/ui/GlassCard.vue'
import LectureCard from '@/components/ui/LectureCard.vue'
import StatusBadge from '@/components/ui/StatusBadge.vue'
import EmptyState from '@/components/ui/EmptyState.vue'

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

const lectureId = computed(() => String(route.params.id))
const lecture = computed(() => lecturesStore.all.find(l => l.id === lectureId.value))
const isRegistered = computed(() => (lecture.value ? lecturesStore.isRegistered(lecture.value.id) : false))
const isAttended = computed(() => lecture.value?.status === 'completed')
const reviews = computed(() => lecturesStore.reviewsByLecture[lectureId.value] ?? [])

const similarLectures = computed(() => lecturesStore.all.filter(l => l.id !== lectureId.value).slice(0, 3))

onMounted(async () => {
  if (!lecturesStore.all.length) await lecturesStore.fetchLectures()
  await lecturesStore.fetchLecture(lectureId.value)
  await lecturesStore.fetchReviews(lectureId.value)
})
</script>

<template>
  <div v-if="lecturesStore.loading && !lecture" class="lecture-detail page-content">
    <GlassCard>
      <div class="text-secondary">Загружаем лекцию...</div>
    </GlassCard>
  </div>

  <div v-else-if="!lecture" class="lecture-detail page-content">
    <EmptyState title="Лекция не найдена" :subtitle="lecturesStore.error ?? 'Попробуйте открыть каталог и выбрать лекцию заново.'" />
  </div>

  <div v-else class="lecture-detail page-content">
    <div class="header">
      <div>
        <div class="breadcrumb">Каталог / {{ lecture.title }}</div>
        <h1 class="page-title">{{ lecture.title }}</h1>
        <p class="text-secondary">{{ lecture.description }}</p>
      </div>
      <div class="actions">
        <button
          v-if="!isRegistered"
          class="btn-primary"
          :disabled="lecture.freeSeats === 0 || lecture.registrationClosed"
          @click="lecturesStore.register(lecture.id)"
        >
          Записаться
        </button>
        <button v-else class="btn-secondary" @click="lecturesStore.unregister(lecture.id)">Отменить запись</button>
        <button class="btn-secondary">Добавить в календарь</button>
        <button v-if="isAttended" class="btn-primary" @click="router.push(`/review/${lecture.id}`)">Оставить отзыв</button>
      </div>
    </div>

    <div class="info-grid">
      <GlassCard>
        <div class="info-section">
          <h3>Преподаватель</h3>
          <div class="info-value">{{ lecture.teacher }} · {{ lecture.teacherTitle }}</div>
          <div class="info-sub">{{ lecture.department }}, {{ lecture.institute }}</div>
        </div>
        <div class="info-section">
          <h3>Детали занятия</h3>
          <div class="info-value">📅 {{ new Date(lecture.date).toLocaleDateString('ru-RU') }} · {{ lecture.time }}</div>
          <div class="info-sub">Длительность: {{ lecture.duration }} мин</div>
          <div class="info-sub">Локация: {{ lecture.building }} {{ lecture.room ? `· ауд. ${lecture.room}` : '' }}</div>
        </div>
        <div class="info-section">
          <h3>Места</h3>
          <div class="info-value">Свободно {{ lecture.freeSeats }} из {{ lecture.totalSeats }}</div>
          <StatusBadge :status="lecture.registrationClosed ? 'closed' : lecture.freeSeats === 0 ? 'full' : 'open'" />
        </div>
        <div class="info-section">
          <h3>Теги</h3>
          <div class="tags">
            <span class="tag-chip" v-for="tag in lecture.tags" :key="tag">{{ tag }}</span>
          </div>
        </div>
      </GlassCard>

      <GlassCard>
        <div class="section-title">LLM-сводка отзывов</div>
        <p class="summary">
          Студенты отмечают «понятные примеры» и «много практики». Предлагается добавить больше времени на вопросы и
          прикладные кейсы. Средняя оценка — 4.8/5.
        </p>
        <div class="reviews" v-if="reviews.length">
          <div v-for="review in reviews" :key="review.id" class="review">
            <div class="review-head">{{ review.userName }} · {{ review.sentiment }}</div>
            <div class="review-body">{{ review.text }}</div>
          </div>
        </div>
        <p v-else class="text-secondary text-sm">Отзывов пока нет.</p>
      </GlassCard>
    </div>

    <section>
      <h2 class="section-title">Похожие лекции</h2>
      <div class="cards-grid">
        <LectureCard v-for="l in similarLectures" :key="l.id" :lecture="l" />
      </div>
    </section>
  </div>
</template>

<style scoped>
.lecture-detail { display: flex; flex-direction: column; gap: 24px; }
.breadcrumb { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 6px; }
.header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.info-section { margin-bottom: 16px; }
.info-section:last-child { margin-bottom: 0; }
.info-section h3 { font-size: 14px; margin-bottom: 8px; }
.info-value { font-weight: 700; }
.info-sub { font-size: 13px; color: var(--color-text-secondary); margin-top: 4px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.summary { font-size: 14px; color: var(--color-text-secondary); line-height: 1.5; }
.reviews { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.review { padding: 10px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.6); border: 1px solid var(--color-border-glass); }
.review-head { font-weight: 600; margin-bottom: 4px; }
.review-body { font-size: 13px; color: var(--color-text-secondary); }
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
</style>