---
interface Props {
  initialLikes?: number;
  initialDislikes?: number;
  postId: string;
}

const { initialLikes = 0, initialDislikes = 0, postId } = Astro.props;
---

<div class="post-reactions" data-post-id={postId}>
  <button class="reaction-btn like-btn" data-action="like" aria-label="Нравится">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="reaction-icon">
      <path d="M7 10v12"></path>
      <path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"></path>
    </svg>
    <span class="reaction-count" data-count="likes">{initialLikes}</span>
  </button>

  <button class="reaction-btn dislike-btn" data-action="dislike" aria-label="Не нравится">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="reaction-icon">
      <path d="M17 14V2"></path>
      <path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z"></path>
    </svg>
    <span class="reaction-count" data-count="dislikes">{initialDislikes}</span>
  </button>
</div>

<style>
  .post-reactions {
    display: flex;
    gap: 0.5rem;
  }

  .reaction-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffffff;
    backdrop-filter: blur(10px);
  }

  .reaction-icon {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s ease;
  }

  .reaction-count {
    min-width: 1rem;
    text-align: center;
  }

  .like-btn:hover,
  .like-btn.active {
    background: #22c55e;
    border-color: #22c55e;
    transform: scale(1.05);
  }

  .dislike-btn:hover,
  .dislike-btn.active {
    background: #ef4444;
    border-color: #ef4444;
    transform: scale(1.05);
  }

  .reaction-btn:active {
    transform: scale(0.95);
  }

  .reaction-btn:hover .reaction-icon {
    transform: scale(1.2);
  }

  @media (max-width: 768px) {
    .reaction-btn {
      padding: 0.4rem 0.75rem;
      font-size: 0.8rem;
    }
  }
</style>

<script>
  document.querySelectorAll('.post-reactions').forEach((container) => {
    const likeBtn = container.querySelector('.like-btn');
    const dislikeBtn = container.querySelector('.dislike-btn');
    const likesCount = container.querySelector('[data-count="likes"]');
    const dislikesCount = container.querySelector('[data-count="dislikes"]');

    let likes = parseInt(likesCount?.textContent || '0');
    let dislikes = parseInt(dislikesCount?.textContent || '0');
    let userAction: 'like' | 'dislike' | null = null;

    likeBtn?.addEventListener('click', () => {
      if (userAction === 'like') {
        likes--;
        userAction = null;
        likeBtn.classList.remove('active');
      } else {
        if (userAction === 'dislike') {
          dislikes--;
          dislikeBtn?.classList.remove('active');
        }
        likes++;
        userAction = 'like';
        likeBtn.classList.add('active');
      }
      if (likesCount) likesCount.textContent = likes.toString();
      if (dislikesCount) dislikesCount.textContent = dislikes.toString();
    });

    dislikeBtn?.addEventListener('click', () => {
      if (userAction === 'dislike') {
        dislikes--;
        userAction = null;
        dislikeBtn.classList.remove('active');
      } else {
        if (userAction === 'like') {
          likes--;
          likeBtn?.classList.remove('active');
        }
        dislikes++;
        userAction = 'dislike';
        dislikeBtn.classList.add('active');
      }
      if (likesCount) likesCount.textContent = likes.toString();
      if (dislikesCount) dislikesCount.textContent = dislikes.toString();
    });
  });
</script>
