---
import Toast from "@components/base/Toast.astro";
---

<!-- Модальное окно для написания отзыва с проверкой авторизации -->
<div
    id="review-modal"
    class="fixed inset-0 bg-black/70 backdrop-blur-sm z-[9999] hidden items-center justify-center p-4 overflow-y-auto"
>
    <div class="bg-[var(--color-navy-dark)] border border-[var(--color-gray-600)]/20 rounded-2xl p-8 max-w-2xl w-full relative shadow-2xl animate-fade-in my-8">
        <!-- Кнопка закрытия -->
        <button
            id="close-review-modal"
            class="absolute top-4 right-4 w-8 h-8 rounded-full bg-[var(--color-navy)] border border-[var(--color-gray-600)]/20 hover:border-[var(--color-gold)]/30 flex items-center justify-center transition-all cursor-pointer"
            aria-label="Закрыть"
        >
            <svg class="w-5 h-5 text-[var(--color-gray-400)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
        </button>

        <!-- Блок для неавторизованного пользователя -->
        <div id="auth-required-block" class="h-full flex flex-col items-center justify-center text-center py-12">
            <!-- Иконка замка -->
            <div class="w-24 h-24 bg-gradient-to-br from-[var(--color-gold)] to-[var(--color-gold-hover)] rounded-full flex items-center justify-center mb-6 shadow-lg shadow-[var(--color-gold)]/30">
                <svg class="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                </svg>
            </div>

            <!-- Заголовок -->
            <h3 class="text-2xl font-bold text-[var(--color-white)] mb-3">
                Требуется авторизация
            </h3>

            <!-- Описание -->
            <p class="text-[var(--color-gray-400)] text-base mb-8 max-w-md">
                Для написания отзыва необходимо войти в систему или зарегистрироваться.
                Это обеспечит достоверность и защиту от спама.
            </p>

            <!-- Кнопки действий -->
            <div class="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
                <a
                    id="login-link"
                    href="/auth/login"
                    class="inline-flex items-center justify-center gap-2 px-8 py-4 bg-[var(--color-gold)] hover:bg-[var(--color-gold-hover)] text-white font-bold rounded-xl shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-300"
                >
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
                    </svg>
                    Войти
                </a>

                <a
                    id="register-link"
                    href="/auth/register"
                    class="inline-flex items-center justify-center gap-2 px-8 py-4 bg-[var(--color-navy)] border-2 border-[var(--color-gold)] text-[var(--color-gold)] font-bold rounded-xl hover:bg-[var(--color-gold)] hover:text-white transition-all duration-300"
                >
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
                    </svg>
                    Зарегистрироваться
                </a>
            </div>

            <!-- Дополнительная информация -->
            <div class="mt-8 pt-8 border-t border-[var(--color-gray-600)]/20">
                <p class="text-xs text-[var(--color-gray-500)]">
                    Уже есть аккаунт?{" "}
                    <a id="login-link-inline" href="/auth/login" class="text-[var(--color-gold)] font-medium hover:underline">
                        Войти сейчас
                    </a>
                </p>
            </div>
        </div>

        <!-- Блок для авторизованного пользователя (форма) -->
        <div id="review-form-block" class="hidden">
            <!-- Заголовок -->
            <div class="mb-6">
                <h3 class="text-2xl font-bold text-[var(--color-white)] mb-2">
                    Написать отзыв
                </h3>
                <p class="text-[var(--color-gray-400)] text-sm">
                    Поделитесь своим опытом работы с нами. Ваш отзыв поможет другим людям сделать правильный выбор.
                </p>
                <!-- Приветствие пользователя -->
                <div id="user-greeting" class="mt-4 p-4 bg-[var(--color-navy)] border border-[var(--color-gray-600)]/20 rounded-xl">
                    <p class="text-[var(--color-white)] font-medium">
                        Привет, <span id="user-name-display" class="text-[var(--color-gold)]">...</span>!
                    </p>
                    <p class="text-[var(--color-gray-400)] text-sm mt-1">
                        Вы решили написать отзыв?
                    </p>
                </div>
            </div>

            <!-- Форма -->
            <form id="review-form" class="space-y-5" novalidate>
                <!-- Должность/Профессия -->
                <div>
                    <label for="review-role" class="block text-xs font-bold text-[var(--color-gray-500)] uppercase tracking-wider mb-2">
                        Должность <span class="text-red-500">*</span>
                    </label>
                    <input
                        type="text"
                        id="review-role"
                        name="role"
                        placeholder="Например: Предприниматель, Врач, Учитель"
                        required
                        minlength="2"
                        maxlength="50"
                        pattern="^[а-яА-ЯёЁa-zA-Z\s\-]+$"
                        class="w-full px-4 py-3 bg-[var(--color-navy)] border border-[var(--color-gray-600)]/20 rounded-xl text-[var(--color-white)] font-medium placeholder-[var(--color-gray-600)] focus:outline-none focus:border-[var(--color-gold)] focus:ring-2 focus:ring-[var(--color-gold)]/20 transition-all"
                    />
                    <span id="role-error" class="text-red-500 text-xs mt-1 hidden"></span>
                </div>

                <!-- Категория дела -->
                <div>
                    <label for="review-case-type" class="block text-xs font-bold text-[var(--color-gray-500)] uppercase tracking-wider mb-2">
                        Категория дела <span class="text-red-500">*</span>
                    </label>
                    <select
                        id="review-case-type"
                        name="caseType"
                        required
                        class="w-full px-4 py-3 bg-[var(--color-navy)] border border-[var(--color-gray-600)]/20 rounded-xl text-[var(--color-white)] font-medium focus:outline-none focus:border-[var(--color-gold)] focus:ring-2 focus:ring-[var(--color-gold)]/20 transition-all cursor-pointer appearance-none"
                    >
                        <option value="" disabled selected>Выберите категорию</option>
                        <option value="Семейные дела">Семейные дела</option>
                        <option value="Административные дела">Административные дела</option>
                        <option value="Уголовные дела">Уголовные дела</option>
                        <option value="Гражданские дела">Гражданские дела</option>
                        <option value="Арбитражные дела">Арбитражные дела</option>
                        <option value="Защита должников">Защита должников</option>
                        <option value="Дела СВО">Дела СВО</option>
                    </select>
                    <span id="caseType-error" class="text-red-500 text-xs mt-1 hidden"></span>
                </div>

                <!-- Рейтинг -->
                <div>
                    <label class="block text-xs font-bold text-[var(--color-gray-500)] uppercase tracking-wider mb-2">
                        Оценка <span class="text-red-500">*</span>
                    </label>
                    <div class="flex gap-2 items-center" id="rating-stars">
                        <button type="button" data-rating="1" class="star-btn text-3xl transition-transform hover:scale-110 cursor-pointer group relative" aria-label="Поставить 1 звезду">
                            <svg class="w-8 h-8 text-[var(--color-gray-600)] group-hover:text-[var(--color-gold)] transition-colors" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                            </svg>
                        </button>
                        <button type="button" data-rating="2" class="star-btn text-3xl transition-transform hover:scale-110 cursor-pointer group relative" aria-label="Поставить 2 звезды">
                            <svg class="w-8 h-8 text-[var(--color-gray-600)] group-hover:text-[var(--color-gold)] transition-colors" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                            </svg>
                        </button>
                        <button type="button" data-rating="3" class="star-btn text-3xl transition-transform hover:scale-110 cursor-pointer group relative" aria-label="Поставить 3 звезды">
                            <svg class="w-8 h-8 text-[var(--color-gray-600)] group-hover:text-[var(--color-gold)] transition-colors" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                            </svg>
                        </button>
                        <button type="button" data-rating="4" class="star-btn text-3xl transition-transform hover:scale-110 cursor-pointer group relative" aria-label="Поставить 4 звезды">
                            <svg class="w-8 h-8 text-[var(--color-gray-600)] group-hover:text-[var(--color-gold)] transition-colors" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                            </svg>
                        </button>
                        <button type="button" data-rating="5" class="star-btn text-3xl transition-transform hover:scale-110 cursor-pointer group relative" aria-label="Поставить 5 звезд">
                            <svg class="w-8 h-8 text-[var(--color-gray-600)] group-hover:text-[var(--color-gold)] transition-colors" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                            </svg>
                        </button>
                        <!-- Подсказка если рейтинг не выбран -->
                        <span id="rating-hint" class="text-xs text-[var(--color-gold)] ml-2 opacity-0 transition-opacity duration-300">
                            ⬅️ Выберите оценку
                        </span>
                    </div>
                    <input type="hidden" id="review-rating" name="rating" value="0" />
                    <span id="rating-error" class="text-red-500 text-xs mt-1 hidden">Поставьте оценку</span>
                </div>

                <!-- Текст отзыва -->
                <div>
                    <label for="review-text" class="block text-xs font-bold text-[var(--color-gray-500)] uppercase tracking-wider mb-2">
                        Текст отзыва <span class="text-red-500">*</span>
                    </label>
                    <textarea
                        id="review-text"
                        name="text"
                        placeholder="Расскажите о вашем опыте работы с нами..."
                        required
                        minlength="10"
                        rows="5"
                        class="w-full px-4 py-3 bg-[var(--color-navy)] border border-[var(--color-gray-600)]/20 rounded-xl text-[var(--color-white)] font-medium placeholder-[var(--color-gray-600)] focus:outline-none focus:border-[var(--color-gold)] focus:ring-2 focus:ring-[var(--color-gold)]/20 transition-all resize-none"
                    ></textarea>
                    <div class="flex justify-between items-center mt-1">
                        <span id="text-error" class="text-red-500 text-xs hidden"></span>
                        <span id="char-count" class="text-xs text-[var(--color-gray-600)]">0 / 1000</span>
                    </div>
                </div>

                <!-- Кнопки -->
                <div class="pt-4">
                    <button
                        type="submit"
                        id="submit-review-btn"
                        disabled
                        class="w-full py-3 bg-[var(--color-gray-600)] text-[var(--color-gray-400)] font-bold rounded-xl transition-all cursor-not-allowed opacity-50"
                        data-enabled-class="bg-[var(--color-gold)] hover:bg-[var(--color-gold-hover)] text-[var(--color-white)] hover:shadow-lg hover:shadow-[var(--color-gold)]/30 hover:cursor-pointer"
                    >
                        Отправить отзыв
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Toast компонент -->
<Toast />

<style>
    @keyframes fade-in {
        from {
            opacity: 0;
            transform: scale(0.95);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    .animate-fade-in {
        animation: fade-in 0.2s ease-out;
    }

    #rating-stars .star-btn.active svg {
        color: var(--color-gold);
    }

    /* Убираем стандартную стрелку у select */
    #review-case-type {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
</style>

<script>
    import { loadAuthFromCookie } from '@lib/auth.ts';

    // Элементы
    const reviewModal = document.getElementById("review-modal");
    const closeReviewModalBtn = document.getElementById("close-review-modal");
    const authRequiredBlock = document.getElementById("auth-required-block");
    const reviewFormBlock = document.getElementById("review-form-block");
    const reviewForm = document.getElementById("review-form");
    const starBtns = document.querySelectorAll(".star-btn");
    const ratingInput = document.getElementById("review-rating");
    const ratingError = document.getElementById("rating-error");
    const reviewText = document.getElementById("review-text");
    const charCount = document.getElementById("char-count");
    const submitBtn = document.getElementById("submit-review-btn");

    // Поля для валидации
    const roleInput = document.getElementById("review-role");
    const caseTypeSelect = document.getElementById("review-case-type");
    const roleError = document.getElementById("role-error");
    const caseTypeError = document.getElementById("caseType-error");
    const textError = document.getElementById("text-error");

    const MAX_CHARS = 1000;
    const MIN_ROLE_LENGTH = 2;
    const MAX_ROLE_LENGTH = 50;
    const MIN_TEXT_LENGTH = 10;

    // Проверка авторизации
    async function checkAuth() {
        try {
            const response = await fetch('/api/auth/me', {
                method: 'GET',
                credentials: 'include',
            });

            const data = await response.json();

            if (data.authenticated) {
                // Пользователь авторизован - показываем форму
                authRequiredBlock?.classList.add('hidden');
                reviewFormBlock?.classList.remove('hidden');
                loadUserName();
            } else {
                // Пользователь не авторизован - показываем блок авторизации
                authRequiredBlock?.classList.remove('hidden');
                reviewFormBlock?.classList.add('hidden');
            }
        } catch (error) {
            console.error('[AuthorizedReviewModal] Ошибка проверки авторизации:', error);
            authRequiredBlock?.classList.remove('hidden');
            reviewFormBlock?.classList.add('hidden');
        }
    }

    // Загрузка имени пользователя
    const loadUserName = async () => {
        const userNameDisplay = document.getElementById("user-name-display");
        if (!userNameDisplay) return;

        try {
            const response = await fetch('/api/auth/me', {
                method: 'GET',
                credentials: 'include',
            });

            const data = await response.json();

            if (data.authenticated && data.user) {
                const name = data.user.name || data.user.email?.split('@')[0] || "Пользователь";
                userNameDisplay.textContent = name;
            } else {
                userNameDisplay.textContent = "Пользователь";
            }
        } catch (error) {
            console.error("[AuthorizedReviewModal] Ошибка загрузки имени:", error);
            userNameDisplay.textContent = "Пользователь";
        }
    };

    // Открытие модального окна
    document.addEventListener("open-review-modal", () => {
        if (reviewModal) {
            reviewModal.classList.remove("hidden");
            reviewModal.classList.add("flex");
            document.body.style.overflow = "hidden";
            checkAuth();
        }
    });

    // Закрытие модального окна
    const closeModal = () => {
        if (reviewModal) {
            reviewModal.classList.add("hidden");
            reviewModal.classList.remove("flex");
            document.body.style.overflow = "";
        }
        resetForm();
    };

    closeReviewModalBtn?.addEventListener("click", closeModal);

    // Закрытие по клику вне окна
    reviewModal?.addEventListener("click", (e) => {
        if (e.target === reviewModal) {
            closeModal();
        }
    });

    // Закрытие по Escape
    document.addEventListener("keydown", (e) => {
        if (e.key === "Escape" && reviewModal && !reviewModal.classList.contains("hidden")) {
            closeModal();
        }
    });

    const ratingHint = document.getElementById("rating-hint");

    // Выбор рейтинга
    starBtns.forEach((btn, index) => {
        btn.addEventListener("click", () => {
            const rating = index + 1;
            ratingInput.value = rating.toString();
            ratingError?.classList.add("hidden");

            // Скрываем подсказку после выбора
            if (ratingHint) {
                ratingHint.classList.add("opacity-0");
            }

            starBtns.forEach((b, i) => {
                const svg = b.querySelector("svg");
                if (i < rating) {
                    b.classList.add("active");
                    svg?.classList.remove("text-[var(--color-gray-600)]");
                    svg?.classList.add("text-[var(--color-gold)]");
                } else {
                    b.classList.remove("active");
                    svg?.classList.add("text-[var(--color-gray-600)]");
                    svg?.classList.remove("text-[var(--color-gold)]");
                }
            });

            validateForm();
        });
    });

    // Показываем подсказку при наведении на звёзды, если рейтинг не выбран
    const ratingContainer = document.getElementById("rating-stars");
    ratingContainer?.addEventListener("mouseenter", () => {
        if (ratingInput.value === "0" && ratingHint) {
            setTimeout(() => ratingHint.classList.remove("opacity-0"), 500);
        }
    });

    ratingContainer?.addEventListener("mouseleave", () => {
        if (ratingHint) {
            ratingHint.classList.add("opacity-0");
        }
    });

    // Показываем подсказку при фокусе на любом поле, если рейтинг не выбран
    [roleInput, caseTypeSelect, reviewText].forEach(input => {
        input?.addEventListener("focus", () => {
            if (ratingInput.value === "0" && ratingHint) {
                setTimeout(() => ratingHint.classList.remove("opacity-0"), 500);
            }
        });
        input?.addEventListener("blur", () => {
            if (ratingHint) {
                ratingHint.classList.add("opacity-0");
            }
        });
    });

    // Подсчёт символов и валидация текста
    reviewText?.addEventListener("input", () => {
        const length = reviewText.value.length;
        if (charCount) {
            charCount.textContent = `${length} / ${MAX_CHARS}`;
            if (length > MAX_CHARS) {
                charCount.classList.add("text-red-500");
                charCount.classList.remove("text-[var(--color-gray-600)]");
            } else {
                charCount.classList.add("text-[var(--color-gray-600)]");
                charCount.classList.remove("text-red-500");
            }
        }
        validateTextField();
        validateForm();
    });

    reviewText?.addEventListener("blur", () => {
        validateTextField();
    });

    // Валидация должности при потере фокуса
    roleInput?.addEventListener("blur", () => {
        validateRoleField();
    });

    // Валидация должности при вводе (убираем ошибку)
    roleInput?.addEventListener("input", () => {
        if (roleInput.value.trim().length >= MIN_ROLE_LENGTH) {
            clearError(roleInput, roleError);
        }
        validateForm();
    });

    // Валидация категории при изменении
    caseTypeSelect?.addEventListener("change", () => {
        validateCaseTypeField();
        validateForm();
    });

    // Валидация должности
    const validateRoleField = () => {
        if (!roleInput) return false;

        const value = roleInput.value.trim();

        if (!value) {
            showError(roleInput, roleError, "Укажите вашу должность или профессию");
            return false;
        }

        if (value.length < MIN_ROLE_LENGTH) {
            showError(roleInput, roleError, `Должность должна содержать минимум ${MIN_ROLE_LENGTH} символа`);
            return false;
        }

        if (value.length > MAX_ROLE_LENGTH) {
            showError(roleInput, roleError, `Должность не должна превышать ${MAX_ROLE_LENGTH} символов`);
            return false;
        }

        clearError(roleInput, roleError);
        return true;
    };

    // Валидация категории дела
    const validateCaseTypeField = () => {
        if (!caseTypeSelect) return false;

        const value = caseTypeSelect.value;

        if (!value) {
            showError(caseTypeSelect, caseTypeError, "Выберите категорию дела");
            return false;
        }

        clearError(caseTypeSelect, caseTypeError);
        return true;
    };

    // Валидация текста отзыва
    const validateTextField = () => {
        if (!reviewText) return false;

        const value = reviewText.value.trim();

        if (!value) {
            showError(reviewText, textError, "Введите текст отзыва");
            return false;
        }

        if (value.length < MIN_TEXT_LENGTH) {
            showError(reviewText, textError, `Текст должен содержать минимум ${MIN_TEXT_LENGTH} символов`);
            return false;
        }

        if (value.length > MAX_CHARS) {
            showError(reviewText, textError, `Текст не должен превышать ${MAX_CHARS} символов`);
            return false;
        }

        clearError(reviewText, textError);
        return true;
    };

    // Показать ошибку
    const showError = (input, errorElement, message) => {
        input.classList.add("border-red-500");
        input.classList.remove("border-[var(--color-gray-600)]/20");
        if (errorElement) {
            errorElement.textContent = message;
            errorElement.classList.remove("hidden");
        }
    };

    // Убрать ошибку
    const clearError = (input, errorElement) => {
        input.classList.remove("border-red-500");
        input.classList.add("border-[var(--color-gray-600)]/20");
        if (errorElement) {
            errorElement.classList.add("hidden");
        }
    };

    // Общая валидация формы и активация кнопки
    const validateForm = () => {
        if (!submitBtn) return;

        const isRoleValid = roleInput && roleInput.value.trim().length >= MIN_ROLE_LENGTH && roleInput.value.trim().length <= MAX_ROLE_LENGTH;
        const isCaseTypeValid = caseTypeSelect && caseTypeSelect.value !== "";
        const isRatingValid = ratingInput.value && ratingInput.value !== "0";
        const isTextValid = reviewText && reviewText.value.trim().length >= MIN_TEXT_LENGTH && reviewText.value.length <= MAX_CHARS;

        const isValid = isRoleValid && isCaseTypeValid && isRatingValid && isTextValid;

        if (isValid) {
            submitBtn.disabled = false;
            submitBtn.classList.remove("bg-[var(--color-gray-600)", "text-[var(--color-gray-400)]", "cursor-not-allowed", "opacity-50");
            submitBtn.classList.add("bg-[var(--color-gold)]", "hover:bg-[var(--color-gold-hover)]", "text-[var(--color-white)]", "hover:shadow-lg", "hover:shadow-[var(--color-gold)]/30", "hover:cursor-pointer");
        } else {
            submitBtn.disabled = true;
            submitBtn.classList.add("bg-[var(--color-gray-600)]", "text-[var(--color-gray-400)]", "cursor-not-allowed", "opacity-50");
            submitBtn.classList.remove("bg-[var(--color-gold)]", "hover:bg-[var(--color-gold-hover)]", "text-[var(--color-white)]", "hover:shadow-lg", "hover:shadow-[var(--color-gold)]/30", "hover:cursor-pointer");
        }
    };

    // Отправка формы
    reviewForm?.addEventListener("submit", async (e) => {
        e.preventDefault();

        // Финальная проверка всех полей
        const isRoleValid = validateRoleField();
        const isCaseTypeValid = validateCaseTypeField();
        const isTextValid = validateTextField();

        // Проверка рейтинга
        if (!ratingInput.value || ratingInput.value === "0") {
            ratingError?.classList.remove("hidden");
            if (typeof window.showToast === "function") {
                window.showToast("Выберите оценку (звёзды)", "error", 3000);
            }
            return;
        }

        if (!isRoleValid || !isCaseTypeValid || !isTextValid) {
            if (typeof window.showToast === "function") {
                window.showToast("Проверьте правильность заполнения полей", "error", 3000);
            }
            return;
        }

        const originalText = submitBtn?.textContent;

        if (submitBtn) {
            submitBtn.disabled = true;
            submitBtn.textContent = "Отправка...";
        }

        try {
            const formData = new FormData(reviewForm);
            const data = Object.fromEntries(formData.entries());

            console.log("[Review Modal] Отправка отзыва:", data);

            // Отправка на сервер
            const response = await fetch('/api/reviews', {
                method: 'POST',
                credentials: 'include',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data),
            });

            const result = await response.json();
            console.log("[Review Modal] Ответ сервера:", result);

            if (!response.ok) {
                // Ошибка сервера
                if (response.status === 401) {
                    if (typeof window.showToast === "function") {
                        window.showToast("Требуется авторизация", "error", 4000);
                    }
                } else {
                    if (typeof window.showToast === "function") {
                        window.showToast(result.error || "Ошибка при создании отзыва", "error", 4000);
                    }
                }

                if (submitBtn) {
                    submitBtn.disabled = false;
                    submitBtn.textContent = originalText;
                }
                return;
            }

            // Успешная отправка
            console.log("[Review Modal] Отзыв успешно отправлен");

            // Показываем сообщение об успехе
            if (typeof window.showToast === "function") {
                window.showToast("Спасибо за ваш отзыв!", "success", 4000);
            }

            // Закрываем модальное окно и обновляем страницу
            setTimeout(() => {
                closeModal();
                // Обновляем страницу, чтобы кнопка заблокировалась
                window.location.reload();
            }, 2000);

        } catch (error) {
            console.error("[Review Modal] Ошибка отправки:", error);
            if (typeof window.showToast === "function") {
                window.showToast("Ошибка при отправке отзыва. Попробуйте позже.", "error", 4000);
            }
            // При ошибке восстанавливаем кнопку
            if (submitBtn) {
                submitBtn.disabled = false;
                submitBtn.textContent = originalText;
            }
        }
    });

    // Сброс формы
    const resetForm = () => {
        reviewForm?.reset();
        ratingInput.value = "0";
        starBtns.forEach((btn) => {
            btn.classList.remove("active");
            const svg = btn.querySelector("svg");
            svg?.classList.add("text-[var(--color-gray-600)]");
            svg?.classList.remove("text-[var(--color-gold)]");
        });

        // Сброс ошибок
        [roleInput, caseTypeSelect, reviewText].forEach(input => {
            if (input) {
                input.classList.remove("border-red-500");
                input.classList.add("border-[var(--color-gray-600)]/20");
            }
        });

        [roleError, caseTypeError, textError, ratingError].forEach(error => {
            if (error) {
                error.classList.add("hidden");
            }
        });

        if (charCount) {
            charCount.textContent = "0 / 1000";
            charCount.classList.add("text-[var(--color-gray-600)]");
            charCount.classList.remove("text-red-500");
        }

        // Блокировка кнопки отправки
        if (submitBtn) {
            submitBtn.disabled = true;
            submitBtn.classList.add("bg-[var(--color-gray-600)]", "text-[var(--color-gray-400)]", "cursor-not-allowed", "opacity-50");
            submitBtn.classList.remove("bg-[var(--color-gold)]", "hover:bg-[var(--color-gold-hover)]", "text-[var(--color-white)]", "hover:shadow-lg", "hover:shadow-[var(--color-gold)]/30", "hover:cursor-pointer");
        }
    };

    // Добавляем redirectUrl к ссылкам авторизации
    const addRedirectToAuthLinks = () => {
        const currentPath = window.location.pathname;
        const loginLink = document.getElementById("login-link");
        const registerLink = document.getElementById("register-link");
        const loginLinkInline = document.getElementById("login-link-inline");

        if (loginLink) {
            loginLink.href = `/auth/login?redirect=${encodeURIComponent(currentPath)}`;
        }
        if (registerLink) {
            registerLink.href = `/auth/register?redirect=${encodeURIComponent(currentPath)}`;
        }
        if (loginLinkInline) {
            loginLinkInline.href = `/auth/login?redirect=${encodeURIComponent(currentPath)}`;
        }
    };

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