<template>
  <div class="reviews">
    <section class="page-hero">
      <div class="container">
        <h1>Отзывы</h1>
      </div>
    </section>

    <section class="section">
      <div class="container">
        <div v-if="loading" class="reviews__list">
          <div v-for="n in 3" :key="n" class="card" style="padding: 20px">
            <div class="skeleton" style="height: 20px; width: 60%; margin-bottom: 12px" />
            <div class="skeleton" style="height: 16px; width: 100%; margin-bottom: 8px" />
            <div class="skeleton" style="height: 16px; width: 80%" />
          </div>
        </div>

        <div v-else-if="reviews.length" class="reviews__list">
          <div v-for="review in reviews" :key="review.id" class="card review-card">
            <div class="review-card__header">
              <div class="review-card__user">
                <img
                  v-if="review.user_avatar"
                  :src="review.user_avatar"
                  alt=""
                  class="avatar avatar--sm"
                />
                <span v-else class="avatar avatar--sm review-card__avatar-placeholder">
                  {{ review.user_name?.charAt(0) || '?' }}
                </span>
                <div>
                  <p class="body-text--semibold">{{ review.user_name }}</p>
                  <p class="caption">{{ formatDate(review.created_at) }}</p>
                </div>
              </div>
              <div v-if="review.rating" class="review-card__rating">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="#FF8833">
                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                </svg>
                {{ review.rating }}
              </div>
            </div>
            <p class="body-text review-card__text">{{ review.text }}</p>
            <p v-if="review.comments_count" class="small-text">
              Комментариев: {{ review.comments_count }}
            </p>
          </div>
        </div>

        <div v-else class="reviews__empty">
          <p class="body-text--gray">Пока нет отзывов</p>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import type { Review } from '~/types'

definePageMeta({
  title: 'Отзывы',
})

const reviews = ref<Review[]>([])
const loading = ref(true)

onMounted(async () => {
  try {
    const api = useApi()
    reviews.value = await api.get<Review[]>('/feedbacks')
  } catch {
    // ignore
  } finally {
    loading.value = false
  }
})

function formatDate(dateStr: string) {
  return new Date(dateStr).toLocaleDateString('ru-RU', {
    day: 'numeric',
    month: 'long',
    year: 'numeric',
  })
}
</script>

<style scoped>
.page-hero {
  background: var(--color-primary);
  padding: 60px 0;
  text-align: center;
  color: var(--color-text-white);
}

.page-hero h1 {
  color: var(--color-text-white);
}

.reviews__list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.review-card {
  padding: 20px;
}

.review-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.review-card__user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.review-card__avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  background: var(--color-light-green);
}

.review-card__rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
}

.review-card__text {
  margin-bottom: 8px;
}

.reviews__empty {
  text-align: center;
  padding: 60px 0;
}
</style>
