---
interface Props {
    review: {
        id: string;
        author: string;
        createdAt: string;
        rating: number;
        title?: string;
        content: string;
        authorId?: string;
        authorAvatar?: string;       // Новое поле
        authorCollectionId?: string; // Новое поле
    };
    currentUserId?: string;
    isAdmin?: boolean;
}

const { review, currentUserId, isAdmin } = Astro.props;

// Проверка прав
const isOwner = currentUserId && (currentUserId === review.authorId || isAdmin);

// Дата
const date = new Date(review.createdAt).toLocaleDateString("de-DE", {
    day: "numeric", month: "long", year: "numeric"
});

// Звезды
const stars = [1, 2, 3, 4, 5];

// --- ЛОГИКА АВАТАРА ---
// Получаем URL вашего PocketBase (убедитесь, что он совпадает с тем, что в .env)
const PB_URL = import.meta.env.PUBLIC_POCKETBASE_URL || 'http://127.0.0.1:8090';

// Формируем полный URL к картинке
// Формат PB: /api/files/COLLECTION_ID/RECORD_ID/FILENAME
const avatarUrl = review.authorAvatar
    ? `${PB_URL}/api/files/${review.authorCollectionId}/${review.authorId}/${review.authorAvatar}`
    : null;
---

<div class="review-card bg-white rounded-2xl shadow-lg p-6 relative flex flex-col h-full transition-transform hover:-translate-y-1 hover:shadow-xl border border-gray-100">

    {/* Кнопка удаления */}
    {isOwner && (
            <button
                    class="delete-review-btn absolute top-3 right-3 p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-full transition-colors cursor-pointer"
                    data-id={review.id}
                    aria-label="Bewertung löschen"
            >
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
    )}

    {/* Шапка: Аватар и Имя */}
    <div class="flex items-center mb-4">

        {/* ЛОГИКА ОТОБРАЖЕНИЯ АВАТАРА */}
        <div class="flex-shrink-0">
            {avatarUrl ? (
                    <img
                            src={avatarUrl}
                            alt={review.author}
                            width="48"
                            height="48"
                            class="w-12 h-12 rounded-full object-cover border border-gray-100 shadow-sm"
                            loading="lazy"
                    />
            ) : (
                    <div class="bg-gradient-to-br from-blue-100 to-indigo-200 text-indigo-800 font-bold rounded-full w-12 h-12 flex items-center justify-center text-lg shadow-sm">
                        {review.author.substring(0, 2).toUpperCase()}
                    </div>
            )}
        </div>

        <div class="ml-4">
            <h3 class="text-lg font-bold text-gray-900">{review.author}</h3>
            <time class="text-xs text-gray-500">{date}</time>
        </div>
    </div>

    {/* Звезды */}
    <div class="flex mb-3 space-x-1">
        {stars.map((star) => (
                <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 512 512"
                        class={`h-5 w-5 ${star <= review.rating ? 'text-[#FE9901]' : 'text-gray-300'}`}
                        fill="currentColor"
                >
                    <path d="M394 480a16 16 0 01-9.39-3L256 383.76 127.39 477a16 16 0 01-24.55-17.82l49.1-151.05-128.77-93.55a16 16 0 019.38-28.84l159.05-.29L240.79 31.81a16 16 0 0130.42 0l49.18 153.64 159.05.29a16 16 0 019.38 28.84l-128.77 93.55 49.1 151.05A16 16 0 01394 480z"/>
                </svg>
        ))}
    </div>

    {/* Заголовок */}
    {review.title && (
            <h4 class="text-lg font-bold text-gray-900 mb-2 leading-tight">
                {review.title}
            </h4>
    )}

    {/* Текст */}
    <p class="text-gray-700 text-sm leading-relaxed whitespace-pre-line">
        {review.content}
    </p>
</div>