feat: первое подключение фронтенда

frontend/src/views/auth/AuthCallbackView.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+
+const route = useRoute()
+const router = useRouter()
+const auth = useAuthStore()
+const message = ref('Завершаем вход через Microsoft...')
+
+onMounted(async () => {
+  const code = typeof route.query.code === 'string' ? route.query.code : ''
+  const state = typeof route.query.state === 'string' ? route.query.state : null
+  const error = typeof route.query.error_description === 'string' ? route.query.error_description : ''
+  const hashParams = new URLSearchParams(window.location.hash.replace(/^#/, ''))
+  const accessToken = hashParams.get('access_token')
+
+  try {
+    if (error) throw new Error(error)
+    if (accessToken) await auth.completeTokenLogin(accessToken)
+    else if (code) await auth.completeMicrosoftLogin(code, state)
+    else throw new Error('Microsoft не вернул токен авторизации.')
+
+    window.history.replaceState({}, document.title, window.location.pathname)
+    const role = auth.user?.role
+    if (role === 'teacher') await router.replace('/teacher')
+    else if (role === 'admin') await router.replace('/admin')
+    else await router.replace('/')
+  } catch (err) {
+    message.value = err instanceof Error ? err.message : 'Не удалось завершить авторизацию.'
+    window.setTimeout(() => router.replace({ path: '/login', query: { error: message.value } }), 1600)
+  }
+})
+</script>
+
+<template>
+  <div class="callback-bg">
+    <div class="callback-card">
+      <div class="spinner"></div>
+      <h1>Вход в UniVerse</h1>
+      <p>{{ message }}</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.callback-bg {
+  min-height: 100vh;
+  background: var(--gradient-bg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+.callback-card {
+  width: min(420px, 100%);
+  background: rgba(255,255,255,0.86);
+  border: 1px solid var(--color-border-glass);
+  border-radius: var(--radius-lg);
+  padding: 32px;
+  text-align: center;
+  box-shadow: 0 24px 70px rgba(0,0,0,0.12);
+}
+.spinner { margin: 0 auto 16px; }
+h1 { font-size: 24px; margin: 0 0 8px; }
+p { color: var(--color-text-secondary); margin: 0; }
+</style>

frontend/src/views/auth/LoginView.vue

@@ -1,34 +1,21 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
-import type { UserRole } from '@/types'
 
 const auth = useAuthStore()
-const router = useRouter()
+const route = useRoute()
 const error = ref('')
 const loading = ref(false)
-const selectedRole = ref<UserRole>('student')
-const simulateError = ref(false)
 
-const roleOptions: Array<{ label: string; role: UserRole }> = [
-  { label: '🎓 Студент', role: 'student' },
-  { label: '👩‍🏫 Преподаватель', role: 'teacher' },
-  { label: '🛡️ Администратор', role: 'admin' },
-]
+if (typeof route.query.error === 'string') error.value = route.query.error
 
 async function login() {
   loading.value = true
   error.value = ''
-  const ok = await auth.login(selectedRole.value, simulateError.value)
+  const ok = auth.startMicrosoftLogin()
   loading.value = false
-  if (ok) {
-    if (selectedRole.value === 'teacher') router.push('/teacher')
-    else if (selectedRole.value === 'admin') router.push('/admin')
-    else router.push('/')
-  } else {
-    error.value = auth.error ?? 'Ошибка авторизации. Проверьте доступ и попробуйте снова.'
-  }
+  if (!ok) error.value = auth.error ?? 'Не удалось начать вход через Microsoft.'
 }
 </script>
 
@@ -46,21 +33,6 @@ async function login() {
         Получайте рекомендации, оставляйте отзывы и зарабатывайте монеты за полезную обратную связь.
       </div>
 
-      <div class="role-select">
-        <p class="demo-label">Роль для демонстрации:</p>
-        <div class="role-options">
-          <button
-            v-for="opt in roleOptions"
-            :key="opt.role"
-            class="role-option"
-            :class="{ active: selectedRole === opt.role }"
-            @click="selectedRole = opt.role"
-          >
-            {{ opt.label }}
-          </button>
-        </div>
-      </div>
-
       <div class="login-actions">
         <button class="btn-primary btn-full" type="button" :disabled="loading" @click="login">
           <span v-if="loading" class="spinner-inline">
@@ -68,10 +40,6 @@ async function login() {
           </span>
           {{ loading ? 'Вход...' : 'Войти через ЮФУ (Microsoft Entra ID)' }}
         </button>
-        <label class="toggle">
-          <input type="checkbox" v-model="simulateError" />
-          Показать ошибку авторизации
-        </label>
         <div class="error" v-if="error">⚠️ {{ error }}</div>
       </div>
 
@@ -125,39 +93,8 @@ async function login() {
   padding: 14px 16px;
   border: 1px solid var(--color-border-glass);
 }
-.demo-label {
-  font-size: 12px;
-  color: var(--color-text-secondary);
-  font-weight: 600;
-  text-transform: uppercase;
-  margin-bottom: 8px;
-}
-.role-options { display: flex; flex-wrap: wrap; gap: 8px; }
-.role-option {
-  background: rgba(255,255,255,0.6);
-  border: 1px solid var(--color-border-glass);
-  border-radius: var(--radius-sm);
-  padding: 8px 12px;
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s;
-  color: var(--color-text);
-}
-.role-option.active {
-  border-color: var(--color-primary);
-  background: rgba(34,197,94,0.12);
-  color: var(--color-primary-dark);
-}
 .login-actions { display: flex; flex-direction: column; gap: 10px; }
 .btn-full { width: 100%; justify-content: center; }
-.toggle {
-  font-size: 12px;
-  color: var(--color-text-secondary);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
 .error {
   font-size: 13px;
   color: var(--color-error);

frontend/src/views/student/AchievementsView.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, onMounted } from 'vue'
+import { useAuthStore } from '@/stores/auth'
 import { useUserStore } from '@/stores/user'
 import GlassCard from '@/components/ui/GlassCard.vue'
 import AchievementBadge from '@/components/ui/AchievementBadge.vue'
+import EmptyState from '@/components/ui/EmptyState.vue'
 
 const userStore = useUserStore()
+const auth = useAuthStore()
 const unlocked = computed(() => userStore.achievements.filter(a => a.unlocked))
 const locked = computed(() => userStore.achievements.filter(a => !a.unlocked))
 
@@ -14,6 +17,10 @@ const rewards = [
   { id: 'r3', title: 'Доп. консультация преподавателя', price: 220, available: false },
   { id: 'r4', title: 'Цифровой бейдж «Research Explorer»', price: 60, available: true },
 ]
+
+onMounted(() => {
+  if (auth.user) void userStore.fetchStudentData(auth.user.id)
+})
 </script>
 
 <template>
@@ -22,7 +29,12 @@ const rewards = [
 
     <section>
       <h2 class="section-title">Полученные достижения</h2>
-      <div class="list">
+      <EmptyState
+        v-if="!unlocked.length"
+        title="Полученных достижений пока нет"
+        subtitle="Они появятся после участия в лекциях и отзывах."
+      />
+      <div v-else class="list">
         <AchievementBadge
           v-for="a in unlocked"
           :key="a.id"
@@ -38,7 +50,12 @@ const rewards = [
 
     <section>
       <h2 class="section-title">Заблокированные</h2>
-      <div class="list">
+      <EmptyState
+        v-if="!locked.length"
+        title="Нет заблокированных достижений"
+        subtitle="Backend пока не вернул список будущих достижений."
+      />
+      <div v-else class="list">
         <AchievementBadge
           v-for="a in locked"
           :key="a.id"

frontend/src/views/student/CatalogView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, inject, ref } from 'vue'
+import { computed, inject, onMounted, ref } from 'vue'
 import { useLecturesStore } from '@/stores/lectures'
 import SearchInput from '@/components/ui/SearchInput.vue'
 import LectureCard from '@/components/ui/LectureCard.vue'
@@ -21,6 +21,10 @@ const onlyFree = ref(false)
 const filtersOpen = ref(false)
 const addToast = inject('addToast') as ((message: string, type?: 'success' | 'error' | 'info') => void) | undefined
 
+onMounted(() => {
+  if (!lecturesStore.all.length) void lecturesStore.fetchLectures()
+})
+
 const tagFilters = ref([
   { label: '#ML', value: '#ML', active: false },
   { label: '#ИИ', value: '#ИИ', active: false },
@@ -97,9 +101,13 @@ const calendarGroups = computed(() => {
   return Object.entries(groups)
 })
 
-function registerLecture(id: string) {
-  lecturesStore.register(id)
-  addToast?.('Вы записаны на лекцию. Напоминание придет за сутки.', 'success')
+async function registerLecture(id: string) {
+  try {
+    await lecturesStore.register(id)
+    addToast?.('Вы записаны на лекцию. Напоминание придет за сутки.', 'success')
+  } catch (err) {
+    addToast?.(err instanceof Error ? err.message : 'Не удалось записаться на лекцию.', 'error')
+  }
 }
 </script>
 
@@ -179,7 +187,15 @@ function registerLecture(id: string) {
       </div>
     </div>
 
-    <div v-if="filtered.length === 0">
+    <GlassCard v-if="lecturesStore.loading">
+      <div class="text-secondary">Загружаем лекции...</div>
+    </GlassCard>
+
+    <div v-else-if="lecturesStore.error">
+      <EmptyState title="Не удалось загрузить каталог" :subtitle="lecturesStore.error" />
+    </div>
+
+    <div v-else-if="filtered.length === 0">
       <EmptyState title="Нет результатов" subtitle="Попробуйте изменить фильтры или сбросить поиск." />
     </div>
 
@@ -212,7 +228,13 @@ function registerLecture(id: string) {
             </span>
           </template>
           <template #action="{ row }">
-            <button class="btn-primary btn-sm" :disabled="row.freeSeats === 0 || row.registrationClosed">Записаться</button>
+            <button
+              class="btn-primary btn-sm"
+              :disabled="row.freeSeats === 0 || row.registrationClosed || lecturesStore.registeredIds.includes(row.id)"
+              @click="registerLecture(row.id)"
+            >
+              {{ lecturesStore.registeredIds.includes(row.id) ? 'Записан' : 'Записаться' }}
+            </button>
           </template>
         </DataTable>
       </GlassCard>

frontend/src/views/student/DashboardView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 import { useLecturesStore } from '@/stores/lectures'
@@ -9,6 +9,7 @@ import StatsWidget from '@/components/ui/StatsWidget.vue'
 import LectureCard from '@/components/ui/LectureCard.vue'
 import ProgressBar from '@/components/ui/ProgressBar.vue'
 import AchievementBadge from '@/components/ui/AchievementBadge.vue'
+import EmptyState from '@/components/ui/EmptyState.vue'
 
 const auth = useAuthStore()
 const lectures = useLecturesStore()
@@ -16,7 +17,7 @@ const userStore = useUserStore()
 const router = useRouter()
 
 const user = computed(() => auth.user!)
-const nextLecture = computed(() => lectures.registeredLectures[0] ?? lectures.all[0]!)
+const nextLecture = computed(() => lectures.registeredLectures[0] ?? lectures.all[0])
 const recommended = computed(() =>
   lectures.all.filter(l => !lectures.registeredIds.includes(l.id)).slice(0, 3)
 )
@@ -24,6 +25,14 @@ const achievements = computed(() => userStore.achievements.filter(a => a.unlocke
 const reminders = computed(() => userStore.notifications.slice(0, 3))
 const xpToNext = 200
 const xpProgress = computed(() => user.value.xp ?? 120)
+
+onMounted(async () => {
+  await Promise.all([
+    lectures.all.length ? Promise.resolve() : lectures.fetchLectures(),
+    userStore.fetchStudentData(user.value.id),
+  ])
+  await lectures.fetchRegisteredForUser(user.value.id)
+})
 </script>
 
 <template>
@@ -36,11 +45,11 @@ const xpProgress = computed(() => user.value.xp ?? 120)
       <div class="quick-actions">
         <button class="btn-primary" @click="router.push('/catalog')">Найти лекцию</button>
         <button class="btn-secondary" @click="router.push('/my-lectures')">Мои записи</button>
-        <button class="btn-secondary" @click="router.push(`/review/${nextLecture?.id ?? '1'}`)">Оставить отзыв</button>
+        <button class="btn-secondary" :disabled="!nextLecture" @click="nextLecture && router.push(`/review/${nextLecture.id}`)">Оставить отзыв</button>
       </div>
     </div>
 
-    <GlassCard>
+    <GlassCard v-if="nextLecture">
       <div class="next-lecture">
         <div>
           <div class="section-title">Ближайшая лекция</div>
@@ -57,6 +66,7 @@ const xpProgress = computed(() => user.value.xp ?? 120)
         </div>
       </div>
     </GlassCard>
+    <EmptyState v-else-if="!lectures.loading" title="Пока нет лекций" subtitle="Каталог пуст или данные ещё не синхронизированы." />
 
     <div class="stats-row">
       <StatsWidget label="Посещено лекций" :value="user.lecturesAttended ?? 12" icon="📚" color="green" />
@@ -80,7 +90,8 @@ const xpProgress = computed(() => user.value.xp ?? 120)
         <h2 class="section-title">✨ Рекомендуемые лекции</h2>
         <button class="link-btn" @click="router.push('/catalog')">Все лекции →</button>
       </div>
-      <div class="cards-grid">
+      <EmptyState v-if="lectures.loading" title="Загружаем рекомендации" subtitle="Получаем данные с backend." />
+      <div v-else class="cards-grid">
         <LectureCard
           v-for="l in recommended"
           :key="l.id"

frontend/src/views/student/LectureDetailView.vue

@@ -1,25 +1,43 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+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 lecture = computed(() => lecturesStore.all.find(l => l.id === route.params.id) ?? lecturesStore.all[0]!)
-const isRegistered = computed(() => lecturesStore.isRegistered(lecture.value.id))
-const attendedLectures = ['1']
-const isAttended = computed(() => attendedLectures.includes(lecture.value.id))
+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 !== lecture.value.id).slice(0, 3))
+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 class="lecture-detail page-content">
+  <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>
@@ -73,16 +91,13 @@ const similarLectures = computed(() => lecturesStore.all.filter(l => l.id !== le
           Студенты отмечают «понятные примеры» и «много практики». Предлагается добавить больше времени на вопросы и
           прикладные кейсы. Средняя оценка — 4.8/5.
         </p>
-        <div class="reviews">
-          <div class="review">
-            <div class="review-head">Анонимный отзыв · 5 ⭐</div>
-            <div class="review-body">Очень структурно, понравились живые примеры и объяснение базовых концепций.</div>
-          </div>
-          <div class="review">
-            <div class="review-head">Анонимный отзыв · 4 ⭐</div>
-            <div class="review-body">Полезно, но хотелось больше времени на практику и разбор домашних заданий.</div>
+        <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>
 

frontend/src/views/student/MyLecturesView.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useLecturesStore } from '@/stores/lectures'
+import { useAuthStore } from '@/stores/auth'
 import GlassCard from '@/components/ui/GlassCard.vue'
 import StatusBadge from '@/components/ui/StatusBadge.vue'
 import ModalDialog from '@/components/ui/ModalDialog.vue'
+import EmptyState from '@/components/ui/EmptyState.vue'
 
 const lecturesStore = useLecturesStore()
+const auth = useAuthStore()
 const router = useRouter()
 const activeTab = ref<'upcoming' | 'history'>('upcoming')
 const cancelModal = ref(false)
@@ -16,19 +19,20 @@ const upcoming = computed(() =>
   lecturesStore.registeredLectures.map(l => ({ ...l, status: 'registered' }))
 )
 
-const history = ref([
-  { id: '1', title: 'Введение в нейронные сети и глубокое обучение', date: '2025-04-20', time: '14:00', building: 'ИКТИБ', room: '305', status: 'attended' },
-  { id: '4', title: 'Философия цифровой эпохи', date: '2025-04-12', time: '18:00', building: 'Онлайн', room: '', status: 'needsReview' },
-  { id: '5', title: 'Право в информационном обществе', date: '2025-04-05', time: '15:30', building: 'ЮФ', room: '412', status: 'cancelled' },
-])
+const history = computed(() => lecturesStore.all.filter(l => l.status === 'completed'))
+
+onMounted(async () => {
+  if (!lecturesStore.all.length) await lecturesStore.fetchLectures()
+  if (auth.user) await lecturesStore.fetchRegisteredForUser(auth.user.id)
+})
 
 function openCancel(id: string) {
   selectedId.value = id
   cancelModal.value = true
 }
 
-function confirmCancel() {
-  if (selectedId.value) lecturesStore.unregister(selectedId.value)
+async function confirmCancel() {
+  if (selectedId.value) await lecturesStore.unregister(selectedId.value)
   cancelModal.value = false
 }
 </script>
@@ -49,6 +53,7 @@ function confirmCancel() {
     </div>
 
     <div v-if="activeTab === 'upcoming'" class="list">
+      <EmptyState v-if="!upcoming.length" title="Нет предстоящих записей" subtitle="Выберите лекцию в каталоге и запишитесь на неё." />
       <GlassCard v-for="item in upcoming" :key="item.id" class="lecture-row">
         <div>
           <div class="lecture-title">{{ item.title }}</div>
@@ -64,6 +69,7 @@ function confirmCancel() {
     </div>
 
     <div v-else class="list">
+      <EmptyState v-if="!history.length" title="История пока пуста" subtitle="Завершённые лекции появятся здесь после посещения." />
       <GlassCard v-for="item in history" :key="item.id" class="lecture-row">
         <div>
           <div class="lecture-title">{{ item.title }}</div>
@@ -71,8 +77,8 @@ function confirmCancel() {
           <div class="lecture-meta">🏛 {{ item.building }} {{ item.room ? `· ауд. ${item.room}` : '' }}</div>
         </div>
         <div class="lecture-actions">
-          <StatusBadge :status="item.status" />
-          <button v-if="item.status === 'needsReview'" class="btn-primary btn-sm" @click="router.push(`/review/${item.id}`)">
+          <StatusBadge :status="item.status ?? 'completed'" />
+          <button class="btn-primary btn-sm" @click="router.push(`/review/${item.id}`)">
             Оставить отзыв
           </button>
         </div>

frontend/src/views/student/ProfileView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useAuthStore } from '@/stores/auth'
 import { useUserStore } from '@/stores/user'
 import GlassCard from '@/components/ui/GlassCard.vue'
@@ -7,6 +7,7 @@ import CoinChip from '@/components/ui/CoinChip.vue'
 import ProgressBar from '@/components/ui/ProgressBar.vue'
 import AchievementBadge from '@/components/ui/AchievementBadge.vue'
 import DataTable from '@/components/ui/DataTable.vue'
+import EmptyState from '@/components/ui/EmptyState.vue'
 
 const auth = useAuthStore()
 const userStore = useUserStore()
@@ -27,6 +28,10 @@ const historyColumns = [
   { key: 'description', label: 'Описание' },
   { key: 'amount', label: 'Монеты', align: 'right' },
 ]
+
+onMounted(() => {
+  void userStore.fetchStudentData(user.value.id)
+})
 </script>
 
 <template>
@@ -87,7 +92,12 @@ const historyColumns = [
           </label>
         </div>
         <div class="section-title">Достижения</div>
-        <div class="achievements">
+        <EmptyState
+          v-if="!userStore.achievements.length"
+          title="Достижений пока нет"
+          subtitle="Они появятся после посещений, отзывов и начислений."
+        />
+        <div v-else class="achievements">
           <AchievementBadge
             v-for="a in userStore.achievements.slice(0, 3)"
             :key="a.id"
@@ -104,6 +114,11 @@ const historyColumns = [
 
     <GlassCard>
       <div class="section-title">История начисления монет</div>
+      <EmptyState
+        v-if="!userStore.coinHistory.length"
+        title="История монет пуста"
+        subtitle="Начисления появятся после активностей на платформе."
+      />
       <DataTable :columns="historyColumns" :rows="userStore.coinHistory">
         <template #amount="{ value }">
           <span :class="value > 0 ? 'positive' : 'negative'">{{ value > 0 ? `+${value}` : value }}</span>

frontend/src/views/student/ReviewFormView.vue

@@ -2,16 +2,34 @@
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
 import GlassCard from '@/components/ui/GlassCard.vue'
+import { reviewsApi } from '@/api'
 
 const route = useRoute()
 const rating = ref<'positive' | 'neutral' | 'negative'>('positive')
 const text = ref('Лекция была хорошо структурирована, особенно понравились практические примеры и разбор кейсов.')
 const submitted = ref(false)
 const editing = ref(false)
+const loading = ref(false)
+const error = ref('')
 
-function submit() {
-  submitted.value = true
-  editing.value = false
+const ratingMap = {
+  positive: 'Like',
+  neutral: 'Neutral',
+  negative: 'Dislike',
+} as const
+
+async function submit() {
+  loading.value = true
+  error.value = ''
+  try {
+    await reviewsApi.create(String(route.params.id), ratingMap[rating.value], text.value)
+    submitted.value = true
+    editing.value = false
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'Не удалось отправить отзыв.'
+  } finally {
+    loading.value = false
+  }
 }
 </script>
 
@@ -48,9 +66,10 @@ function submit() {
         <div class="hint">
           💡 Постарайтесь быть конкретными: что понравилось, где было сложно, какие темы хотите раскрыть глубже.
         </div>
+        <div class="error" v-if="error">{{ error }}</div>
 
         <div class="form-actions">
-          <button class="btn-primary" type="submit">Отправить отзыв</button>
+          <button class="btn-primary" type="submit" :disabled="loading">{{ loading ? 'Отправляем...' : 'Отправить отзыв' }}</button>
           <button class="btn-secondary" type="button" :disabled="submitted">Сохранить черновик</button>
         </div>
       </form>
@@ -91,4 +110,5 @@ textarea {
 .success-icon { font-size: 28px; }
 .success-title { font-size: 16px; font-weight: 700; }
 .success-sub { font-size: 13px; color: var(--color-text-secondary); }
+.error { color: var(--color-error); font-size: 13px; }
 </style>