<script setup lang="ts">
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('')

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>

<template>
  <div class="review page-content">
    <div class="header">
      <div>
        <h1 class="page-title">Отзыв о лекции #{{ route.params.id }}</h1>
        <p class="text-secondary">Ваш отзыв помогает улучшать качество лекций и приносит бонусные монеты.</p>
      </div>
    </div>

    <GlassCard>
      <div v-if="submitted && !editing" class="success-state">
        <div class="success-icon">✅</div>
        <div class="success-title">Отзыв отправлен и будет обработан</div>
        <div class="success-sub">
          Спасибо! Оценка полезности отзыва рассчитывается автоматически. Студентам не показывается техническая оценка LLM.
        </div>
        <button class="btn-secondary" @click="editing = true">Редактировать отзыв</button>
      </div>

      <form v-else @submit.prevent="submit" class="form">
        <label class="field-label">Ваш отзыв о лекции</label>
        <textarea v-model="text" rows="6" placeholder="Опишите, что было полезно, а что можно улучшить"></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>
          <button class="btn-secondary" type="button" :disabled="submitted">Сохранить черновик</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 { 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>
