<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import GlassCard from '@/components/ui/GlassCard.vue'
import AppIcon from '@/components/ui/AppIcon.vue'
import { lecturesApi, reviewsApi } from '@/api'
import type { LectureDto } from '@/api/types'

const route = useRoute()
const rating = ref<'positive' | 'neutral' | 'negative'>('positive')
const text = ref('')
const submitted = ref(false)
const loading = ref(false)
const lectureLoading = ref(false)
const error = ref('')
const lecture = ref<LectureDto | null>(null)

const ratingMap = {
  positive: 'Like',
  neutral: 'Neutral',
  negative: 'Dislike',
} as const

const lectureTitle = computed(
  () => lecture.value?.title || lecture.value?.courseName || 'Отзыв о лекции',
)
const lectureMeta = computed(() => {
  if (!lecture.value) return ''

  const startsAt = new Date(lecture.value.startsAt)
  const date = Number.isNaN(startsAt.getTime())
    ? ''
    : startsAt.toLocaleString('ru-RU', {
        day: '2-digit',
        month: 'long',
        hour: '2-digit',
        minute: '2-digit',
      })
  const teacher = lecture.value.teacherName ? `Преподаватель: ${lecture.value.teacherName}` : ''
  const location = lecture.value.format === 'Online' ? 'Онлайн' : lecture.value.locationName

  return [date, teacher, location].filter(Boolean).join('  ')
})

async function fetchLecture() {
  lectureLoading.value = true
  try {
    lecture.value = await lecturesApi.get(String(route.params.id))
  } catch {
    lecture.value = null
  } finally {
    lectureLoading.value = false
  }
}

async function submit() {
  loading.value = true
  error.value = ''
  try {
    await reviewsApi.create(String(route.params.id), ratingMap[rating.value], text.value)
    submitted.value = true
  } catch (err) {
    error.value = err instanceof Error ? err.message : 'Не удалось отправить отзыв.'
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  void fetchLecture()
})
</script>

<template>
  <div class="review page-content">
    <div class="header">
      <div>
        <h1 class="page-title">{{ lectureLoading ? 'Загрузка лекции...' : lectureTitle }}</h1>
        <p class="text-secondary">
          {{
            lectureMeta || 'Ваш отзыв помогает улучшать качество лекций и приносит бонусные монеты.'
          }}
        </p>
      </div>
    </div>

    <GlassCard>
      <div v-if="submitted" class="success-state">
        <AppIcon class="success-icon" icon="circle-check" :size="32" />
        <div class="success-title">Отзыв отправлен и будет обработан</div>
        <div class="success-sub">
          Спасибо! Оценка полезности отзыва рассчитывается автоматически. Студентам не показывается
          техническая оценка LLM.
        </div>
      </div>

      <form v-else @submit.prevent="submit" class="form">
        <label class="field-label">Ваш отзыв о лекции</label>
        <textarea v-model="text" rows="6"></textarea>

        <label class="field-label">Оценка впечатлений</label>
        <div class="rating-options">
          <button
            type="button"
            :class="{ active: rating === 'positive' }"
            @click="rating = 'positive'"
          >
            👍 Положительный
          </button>
          <button
            type="button"
            :class="{ active: rating === 'neutral' }"
            @click="rating = 'neutral'"
          >
            😐 Нейтральный
          </button>
          <button
            type="button"
            :class="{ active: rating === 'negative' }"
            @click="rating = 'negative'"
          >
            👎 Отрицательный
          </button>
        </div>

        <div class="hint">
          💡 Постарайтесь быть конкретными: что понравилось, где было сложно, какие темы хотите
          раскрыть глубже.
        </div>
        <div class="error" v-if="error">{{ error }}</div>

        <div class="form-actions">
          <button class="btn-primary" type="submit" :disabled="loading">
            {{ loading ? 'Отправляем...' : 'Отправить отзыв' }}
          </button>
        </div>
      </form>
    </GlassCard>
  </div>
</template>

<style scoped>
.review {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.field-label {
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text-secondary);
}
textarea {
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-glass);
  background: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  resize: vertical;
}
.rating-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.rating-options button {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-glass);
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-size: 13px;
}
.rating-options button.active {
  border-color: var(--color-primary);
  background: rgba(34, 197, 94, 0.15);
  color: var(--color-primary-dark);
  font-weight: 600;
}
.hint {
  font-size: 12px;
  color: var(--color-text-secondary);
  background: rgba(255, 255, 255, 0.6);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}
.form-actions {
  display: flex;
  gap: 10px;
}
.success-state {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.success-icon {
  color: var(--color-primary);
}
.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>
