---
import Layout from "@layouts/Layout.astro";
import { REVIEWS_PAGE_SEO } from "@constants/constants.ts";
import PageTitle from "@components/base/PageTitle.astro";
import AuthorizedReviewModal from "@components/reviews/AuthorizedReviewModal.astro";
import ReviewsStats from "@components/reviews/ReviewsStats.astro";
import ReviewsFilters from "@components/reviews/ReviewsFilters.astro";
import ReviewsGrid from "@components/reviews/ReviewsGrid.astro";
import ReviewsPagination from "@components/reviews/ReviewsPagination.astro";
import ReviewsTrustBlocks from "@components/reviews/ReviewsTrustBlocks.astro";
import ReviewsCTA from "@components/reviews/ReviewsCTA.astro";

const POCKETBASE_URL =
  import.meta.env.POCKETBASE_URL || "http://localhost:8090";

const ITEMS_PER_PAGE = 6; // Показываем 6 отзывов на странице

let reviews: Array<{ review: any; category: string }> = [];
let caseTypes = ["Все отзывы"];

try {
  // УЛУЧШЕНИЕ: Используем expand=case_category,user чтобы получить категории и пользователей одним запросом!
  const response = await fetch(
    `${POCKETBASE_URL}/api/collections/reviews/records?filter=status="published"&sort=-created&expand=case_category,user`,
  );
  const data = await response.json();

  if (data.items && data.items.length > 0) {
    reviews = data.items.map((item: any) => {
      // Извлекаем имя категории из expand
      const caseTypeName = item.expand?.case_category?.name || "Другое";
      
      // Имя берем из связанного пользователя, fallback на email или "Аноним"
      const userName = item.expand?.user?.name || item.expand?.user?.email?.split('@')[0] || item.name || "Аноним";

      return {
        review: {
          id: item.id,
          name: userName,
          role: item.role || "Частный клиент",
          rating: item.rating || 5,
          date: new Date(item.created).toLocaleDateString("ru-RU", {
            year: "numeric",
            month: "long",
            day: "numeric",
          }),
          text: item.text || "",
          caseType: caseTypeName,
          verified: true, // Все отзывы проверенные
        },
        category: caseTypeName,
      };
    });
  }

  // Получаем категории для фильтра
  const categoriesResponse = await fetch(
    `${POCKETBASE_URL}/api/collections/case_categories/records?filter=is_active=true&sort=order`,
  );
  const categoriesData = await categoriesResponse.json();

  if (categoriesData.items) {
    const categoryNames = categoriesData.items.map((cat: any) => cat.name);
    caseTypes = ["Все отзывы", ...categoryNames];
  }
} catch (error) {
  // Тихая ошибка - используем значения по умолчанию
  caseTypes = [
    "Все отзывы",
    "Семейные дела",
    "Административные дела",
    "Уголовные дела",
    "Гражданские дела",
    "Арбитражные дела",
    "Защита должников",
    "Дела СВО",
  ];
}

// УЛУЧШЕНИЕ: Динамический расчет статистики на основе реальных данных PocketBase
const totalReviews = reviews.length;
const averageRating =
  totalReviews > 0
    ? (
        reviews.reduce((sum, item) => sum + item.review.rating, 0) /
        totalReviews
      ).toFixed(1)
    : "5.0";

const stats = [
  {
    value: totalReviews > 100 ? "100+" : totalReviews.toString(),
    label: "Довольных клиентов",
    emoji: "😊",
  },
  { value: "98%", label: "Положительных дел", emoji: "📈" },
  { value: averageRating, label: "Средняя оценка", emoji: "⭐" },
  { value: "10+", label: "Лет опыта", emoji: "⚖️" },
];
---

<Layout
  title={REVIEWS_PAGE_SEO.title}
  description={REVIEWS_PAGE_SEO.description}
  pagePath="/reviews"
>
  <section class="relative min-h-screen bg-navy pt-24 pb-16 overflow-hidden">
    <!-- Фоновые элементы -->
    <div
      class="absolute inset-0 opacity-[0.02]"
      style="background-image: radial-gradient(circle at 1px 1px, var(--color-gold) 1px, transparent 0); background-size: 40px 40px;"
    >
    </div>

    <div
      class="w-full px-4 md:container md:mx-auto md:px-4 md:max-w-7xl relative z-10"
    >
      <PageTitle
        title="Что говорят "
        highlightText="клиенты"
        highlightInTitle={true}
        titleColor="white"
        badgeText="Мнение клиентов"
        subtitle="Реальные истории и благодарности от людей, которым мы помогли решить сложные юридические вопросы"
        titleSize="normal"
        centered={true}
      />

      <ReviewsStats stats={stats} />
      <ReviewsFilters caseTypes={caseTypes} />

      {
        reviews.length > 0 ? (
          <>
            <ReviewsGrid reviews={reviews} />
            <ReviewsPagination />
          </>
        ) : (
          <div class="text-center py-20 text-[var(--color-gray-400)]">
            <p class="text-xl mb-4">Пока нет опубликованных отзывов.</p>
            <p>Будьте первым, кто поделится своим мнением!</p>
          </div>
        )
      }

      <ReviewsCTA />
      <ReviewsTrustBlocks />
    </div>
  </section>

  <AuthorizedReviewModal />
</Layout>

<style is:global>
  .review-card {
    position: relative;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition:
      opacity 0.4s ease,
      transform 0.4s ease;
  }
  .review-card:hover {
    transform: translateY(-10px) scale(1.02) !important;
    border-color: rgba(212, 175, 55, 0.3) !important;
    box-shadow:
      0 20px 40px -15px rgba(0, 0, 0, 0.3),
      0 0 20px rgba(212, 175, 55, 0.1) !important;
    z-index: 10;
  }
  .review-card.is-hidden {
    opacity: 0 !important;
    transform: scale(0.9) translateY(20px) !important;
    pointer-events: none;
  }
  .review-card.completely-hidden {
    display: none !important;
  }
</style>

<script define:vars={{ ITEMS_PER_PAGE }}>
  // Обработчик кнопки открытия модального окна
  const setupReviewModalButton = () => {
    const btn = document.getElementById("open-review-modal-btn");

    if (btn) {
      btn.addEventListener("click", () => {
        document.dispatchEvent(new CustomEvent("open-review-modal"));
      });
    }
  };

  // Пробуем найти кнопку сразу и после загрузки DOM
  setupReviewModalButton();

  document.addEventListener("DOMContentLoaded", () => {
    setupReviewModalButton();

    // --- ЕДИНЫЙ КОНТРОЛЛЕР ПАГИНАЦИИ И ФИЛЬТРАЦИИ ---
    let currentPage = 1;
    let currentFilter = "all";

    const allCards = Array.from(document.querySelectorAll(".review-card"));
    const filterBtns = document.querySelectorAll(".filter-btn");

    // Элементы пагинации
    const paginationContainer = document.getElementById("pagination-container");
    const paginationNumbers = document.getElementById("pagination-numbers");
    const prevBtn = document.getElementById("prev-page-btn");
    const nextBtn = document.getElementById("next-page-btn");

    function updateView() {
      // 1. Фильтруем карточки
      const filteredCards = allCards.filter((card) => {
        const category = card.getAttribute("data-category");
        return currentFilter === "all" || category === currentFilter;
      });

      // 2. Рассчитываем страницы
      const totalPages = Math.ceil(filteredCards.length / ITEMS_PER_PAGE) || 1;
      if (currentPage > totalPages) currentPage = 1;

      const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
      const endIndex = startIndex + ITEMS_PER_PAGE;

      // 3. Показываем/скрываем карточки
      allCards.forEach((card) => {
        const isMatch = filteredCards.includes(card);
        const isPaginated =
          filteredCards.indexOf(card) >= startIndex &&
          filteredCards.indexOf(card) < endIndex;

        if (isMatch && isPaginated) {
          card.classList.remove("completely-hidden");
          requestAnimationFrame(() => card.classList.remove("is-hidden"));
        } else {
          card.classList.add("is-hidden");
          // Ждем завершения CSS анимации перед display: none
          setTimeout(() => {
            if (card.classList.contains("is-hidden")) {
              card.classList.add("completely-hidden");
            }
          }, 400);
        }
      });

      // 4. Обновляем UI пагинации
      updatePaginationUI(totalPages);
    }

    function updatePaginationUI(totalPages) {
      if (!paginationContainer || !paginationNumbers) return;

      // Скрываем блок пагинации, если страница всего одна
      if (totalPages <= 1) {
        paginationContainer.classList.add("hidden");
        return;
      }
      paginationContainer.classList.remove("hidden");

      // Рендерим номера страниц
      let pagesHtml = "";
      for (let i = 1; i <= totalPages; i++) {
        const isActive = i === currentPage;
        const classes = isActive
          ? "bg-[var(--color-gold)] text-[var(--color-white)]"
          : "bg-[var(--color-navy-dark)] border border-[var(--color-gray-600)]/20 text-[var(--color-gray-400)] hover:border-[var(--color-gold)]/30 hover:text-[var(--color-white)] hover:cursor-pointer";

        pagesHtml += `<button class="w-10 h-10 rounded-xl font-medium transition-all ${classes}" data-page="${i}">${i}</button>`;
      }
      paginationNumbers.innerHTML = pagesHtml;

      // Кнопки Вперед/Назад
      if (prevBtn) prevBtn.disabled = currentPage === 1;
      if (nextBtn) nextBtn.disabled = currentPage === totalPages;

      // Вешаем события на сгенерированные кнопки номеров
      paginationNumbers.querySelectorAll("button").forEach((btn) => {
        btn.addEventListener("click", (e) => {
          currentPage = parseInt(e.target.getAttribute("data-page"));
          updateView();
          scrollToGrid();
        });
      });
    }

    function scrollToGrid() {
      const grid = document.getElementById("reviews-grid");
      if (grid) {
        const yOffset = -100; // Отступ для фиксированного хедера
        const y =
          grid.getBoundingClientRect().top + window.pageYOffset + yOffset;
        window.scrollTo({ top: y, behavior: "smooth" });
      }
    }

    // Слушатели кнопок Вперед/Назад
    prevBtn?.addEventListener("click", () => {
      if (currentPage > 1) {
        currentPage--;
        updateView();
        scrollToGrid();
      }
    });

    nextBtn?.addEventListener("click", () => {
      // Ищем totalPages заново из отфильтрованных, либо можно хранить в переменной
      currentPage++;
      updateView();
      scrollToGrid();
    });

    // Слушатели фильтров
    filterBtns.forEach((btn) => {
      btn.addEventListener("click", () => {
        currentFilter = btn.getAttribute("data-filter");
        currentPage = 1; // Сбрасываем на первую страницу при смене фильтра

        // Визуальное обновление кнопок
        filterBtns.forEach((b) => {
          const isActive = b === btn;
          b.classList.toggle("bg-[var(--color-gold)]", isActive);
          b.classList.toggle("text-[var(--color-white)]", isActive);
          b.classList.toggle("bg-[var(--color-navy-dark)]", !isActive);
          b.classList.toggle("border", !isActive);
          b.classList.toggle("text-[var(--color-gray-400)]", !isActive);
        });

        updateView();
      });
    });

    // Инициализация
    updateView();
  });
</script>
