---
import { MONTHS } from "@lib/constants";
import NumberedContent from "./NumberedContent.astro";
import AuthorConsultation from "./AuthorConsultation.astro";

export interface Props {
  title: string;
  excerpt: string;
  author: {
    name: string;
    avatar: string;
    role?: string;
  };
  publishDate: string | Date;
  readTime?: string;
  tags?: string[];
  featuredImage?: string;
  tableOfContents?: Array<{
    id: string;
    title: string;
  }>;
  content?: string;
  postId?: string;
  likes?: number;
  dislikes?: number;
}

function formatDate(dateInput: string | Date): string {
  const date = new Date(dateInput);
  return `${date.getDate()} ${MONTHS[date.getMonth()]} ${date.getFullYear()} года`;
}

const {
  title,
  excerpt,
  author,
  publishDate,
  readTime = "5 мин чтения",
  tags = [],
  featuredImage,
  tableOfContents = [],
  content,
  postId,
  likes = 0,
  dislikes = 0,
} = Astro.props;

//  дата поста
const formattedPublishDate = typeof publishDate === "string" 
  ? publishDate 
  : formatDate(publishDate);  
---

<article class="min-h-screen bg-gray-50">
  {
    featuredImage && (
      <div class="relative w-full h-64 md:h-96 lg:h-125 overflow-hidden">
        <img
          src={featuredImage}
          alt={title}
          class="w-full h-full object-cover"
        />
        {/* Затемнение для контраста текста */}       
        <div class="absolute inset-0 bg-linear-to-t from-black/75 via-black/70 to-black/40" />
        
        {/* Декоративные элементы */}        
        <div class="absolute top-0 left-0 w-full h-full pointer-events-none">
          {/* Золотая линия сверху */}          
          <div class="absolute top-0 left-1/2 -translate-x-1/2 w-24 h-1 bg-linear-to-r from-transparent via-[var(--color-gold)] to-transparent opacity-80"></div>
          <!-- Уголки -->
          <div class="absolute top-8 left-8 w-16 h-16 border-t-2 border-l-2 border-gold/40 rounded-tl-lg"></div>
          <div class="absolute top-8 right-8 w-16 h-16 border-t-2 border-r-2 border-gold/40 rounded-tr-lg"></div>
        </div>
        
        <div class="absolute bottom-0 left-0 right-0 p-6 md:p-12">
          <div class="max-w-4xl mx-auto relative z-10">
            <!-- Категория/тег -->
            <div class="flex items-center gap-2 mb-4">
              <span class="px-4 py-1.5 bg-gold/90 backdrop-blur-sm text-white text-xs font-bold uppercase tracking-wider rounded-full shadow-lg">
                Статья
              </span>
              <div class="h-px w-12 bg-linear-to-r from-[var(--color-gold)] to-transparent opacity-60"></div>
            </div>
            
            <!-- Заголовок -->
            <h1 class="text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-extrabold text-white mb-6 leading-tight drop-shadow-2xl">
              {title}
            </h1>
            
            <!-- Декоративная линия под заголовком -->
            <div class="flex items-center gap-3">
              <div class="h-1 w-20 bg-linear-to-r from-[var(--color-gold)] to-[var(--color-gold)]/60 rounded-full"></div>
              <div class="h-1 w-1 bg-[var(--color-gold)] rounded-full"></div>
              <div class="h-1 w-1 bg-[var(--color-gold)] rounded-full"></div>
              <div class="h-1 w-1 bg-[var(--color-gold)] rounded-full"></div>
            </div>
          </div>
        </div>
      </div>
    )
  }

  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
      <main class="lg:col-span-8">
        {
          !featuredImage && (
            <div class="mb-8">
              <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 mb-4 leading-tight">
                {title}
              </h1>
              <p class="text-xl text-gray-600 leading-relaxed">{excerpt}</p>
            </div>
          )
        }

        <div class="flex flex-col gap-4 mb-8 pb-8 border-b border-gray-200">
          <div class="flex justify-between items-center">
            <time class="flex items-center gap-1 text-sm text-gray-500">
              <svg
                class="w-4 h-4"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                ><path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                ></path></svg
              >
              {formattedPublishDate}
            </time>
            <span class="flex items-center gap-1 text-sm text-gray-500">
              <svg
                class="w-4 h-4"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                ><path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg
              >
              {readTime}
            </span>
          </div>
        </div>

        {
          tags.length > 0 && (
            <div class="flex flex-wrap gap-2 mb-8">
              {tags.map((tag) => (
                <span class="px-3 py-1 bg-blue-50 text-blue-600 text-sm font-medium rounded-full hover:bg-blue-100 transition-colors cursor-pointer">
                  #{tag}
                </span>
              ))}
            </div>
          )
        }

        {
          tableOfContents.length > 0 && (
            <details
              open
              class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-8 group"
            >
              <summary class="flex items-center justify-between cursor-pointer list-none font-semibold text-gray-900 text-lg select-none">
                <span class="flex items-center gap-2">
                  <svg
                    class="w-5 h-5 text-blue-500"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M4 6h16M4 12h16M4 18h7"
                    />
                  </svg>
                  Содержание
                </span>
                <svg
                  class="w-5 h-5 text-gray-400 transition-transform group-open:rotate-180"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M19 9l-7 7-7-7"
                  />
                </svg>
              </summary>
              <div class="mt-4 pt-4 border-t border-gray-100">
                <ol class="space-y-2">
                  {tableOfContents.map((item, index) => (
                    <li>
                      <a
                        href={`#${item.id}`}
                        class="flex items-start gap-2 text-gray-700 hover:text-blue-600 hover:bg-blue-50 p-2 rounded-lg transition-colors group/item"
                      >
                        <span class="shrink-0 w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-sm font-medium group-hover/item:bg-blue-200">
                          {index + 1}
                        </span>
                        <span class="leading-tight">{item.title}</span>
                      </a>
                    </li>
                  ))}
                </ol>
              </div>
            </details>
          )
        }

        <!-- ТЕЛО СТАТЬИ -->
        <div
          class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8 md:p-10"
        >
          <NumberedContent tableOfContents={tableOfContents}>
            <slot />
          </NumberedContent>
        </div>

        <blockquote
          class="relative p-8 my-8 bg-linear-to-r from-blue-50 to-indigo-50 rounded-2xl border-l-4 border-blue-500"
        >
          <svg
            class="absolute top-4 left-4 w-8 h-8 text-blue-200"
            fill="currentColor"
            viewBox="0 0 24 24"
            ><path
              d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"
            ></path></svg
          >
          <p
            class="relative text-lg md:text-xl text-gray-800 font-medium italic pl-8"
          >
            "Правовая грамотность — лучшая защита ваших интересов в любой
            жизненной ситуации."
          </p>
        </blockquote>

        <!-- Блок голосования -->
        <div class="mt-6 mb-8 flex justify-center">
          <div
            class="post-likes-widget"
            data-post-id={postId}
            data-initial-likes={likes}
            data-initial-dislikes={dislikes}
          >
            <div class="vote-group">
              <button
                type="button"
                class="vote-btn like-btn"
                aria-label="Нравится"
              >
                <svg
                  class="thumb-icon"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path
                    d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"
                  ></path>
                </svg>
              </button>
              <span class="vote-count like-count">{likes}</span>
            </div>

            <div class="divider"></div>

            <div class="vote-group">
              <button
                type="button"
                class="vote-btn dislike-btn"
                aria-label="Не нравится"
              >
                <svg
                  class="thumb-icon"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path
                    d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"
                  ></path>
                </svg>
              </button>
              <span class="vote-count dislike-count">{dislikes}</span>
            </div>
          </div>
        </div>

        

        <script>
          // Инициализация виджета голосования
          (function() {
            const widgets = document.querySelectorAll('.post-likes-widget');
            
            widgets.forEach(widget => {
              const postId = widget.getAttribute('data-post-id');
              const likeBtn = widget.querySelector('.like-btn');
              const dislikeBtn = widget.querySelector('.dislike-btn');
              const likeCount = widget.querySelector('.like-count');
              const dislikeCount = widget.querySelector('.dislike-count');
              
              let likes = parseInt(widget.getAttribute('data-initial-likes') || '0');
              let dislikes = parseInt(widget.getAttribute('data-initial-dislikes') || '0');
              let userVote = null;
              let isLoading = false;
              let isDisabled = false; // Блокировка кнопок
              
              console.log('[PostLikes] Инициализация:', { postId, likes, dislikes });
              
              // Блокировка/разблокировка кнопок
              function setButtonsDisabled(disabled) {
                isDisabled = disabled;
                if (likeBtn) likeBtn.disabled = disabled;
                if (dislikeBtn) dislikeBtn.disabled = disabled;
                widget.style.opacity = disabled ? '0.6' : '1';
                widget.style.pointerEvents = disabled ? 'none' : 'auto';
              }
              
              // Загрузка реальных данных
              async function loadVotes() {
                if (!postId) return;
                
                try {
                  const response = await fetch(`/api/likes?post_id=${encodeURIComponent(postId)}`);
                  console.log('[PostLikes] Ответ API:', response.status);
                  
                  if (response.ok) {
                    const data = await response.json();
                    console.log('[PostLikes] Данные:', data);
                    
                    likes = data.likes || 0;
                    dislikes = data.dislikes || 0;
                    userVote = data.userVote;
                    updateUI();
                  }
                } catch (error) {
                  console.error('[PostLikes] Ошибка загрузки:', error);
                }
              }
              
              // Голосование
              async function handleVote(action) {
                // Двойная проверка блокировки
                if (isLoading || isDisabled) {
                  console.log('[PostLikes] Заблокировано, пропускаем');
                  return;
                }
                
                console.log('[PostLikes] Голосование:', action);
                
                if (!postId) return;
                
                // Блокируем кнопки СРАЗУ
                isLoading = true;
                setButtonsDisabled(true);
                
                // Оптимистичное обновление
                if (action === 'like') {
                  if (userVote === 'like') {
                    likes = Math.max(0, likes - 1);
                    userVote = null;
                  } else if (userVote === 'dislike') {
                    dislikes = Math.max(0, dislikes - 1);
                    likes++;
                    userVote = 'like';
                  } else {
                    likes++;
                    userVote = 'like';
                  }
                } else {
                  if (userVote === 'dislike') {
                    dislikes = Math.max(0, dislikes - 1);
                    userVote = null;
                  } else if (userVote === 'like') {
                    likes = Math.max(0, likes - 1);
                    dislikes++;
                    userVote = 'dislike';
                  } else {
                    dislikes++;
                    userVote = 'dislike';
                  }
                }
                updateUI();
                
                try {
                  const response = await fetch('/api/likes', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    credentials: 'include',
                    body: JSON.stringify({ post_id: postId, vote_type: action }),
                  });
                  
                  const data = await response.json();
                  console.log('[PostLikes] Ответ сервера:', response.status, data);
                  
                  if (!response.ok) {
                    if (response.status === 401) {
                      alert('Для голосования необходимо войти в систему');
                      loadVotes(); // Откат
                      return;
                    }
                    throw new Error(data.error || 'Ошибка');
                  }
                  
                  // Обновляем реальными данными с сервера
                  likes = data.likes || 0;
                  dislikes = data.dislikes || 0;
                  userVote = data.userVote;
                  updateUI();
                  
                  console.log('[PostLikes] Успешно:', { likes, dislikes, userVote });
                } catch (error) {
                  console.error('[PostLikes] Ошибка:', error);
                  alert('Не удалось сохранить голос');
                  loadVotes(); // Откат
                } finally {
                  isLoading = false;
                  // НЕ разблокируем кнопки - голосование окончено
                  // Кнопки остаются заблокированными для повторного голосования
                  console.log('[PostLikes] Голосование завершено');
                }
              }
              
              // Обновление UI
              function updateUI() {
                if (likeCount) likeCount.textContent = likes.toString();
                if (dislikeCount) dislikeCount.textContent = dislikes.toString();
                
                if (likeBtn && dislikeBtn) {
                  if (userVote === 'like') {
                    likeBtn.classList.add('active');
                    dislikeBtn.classList.remove('active');
                  } else if (userVote === 'dislike') {
                    dislikeBtn.classList.add('active');
                    likeBtn.classList.remove('active');
                  } else {
                    likeBtn.classList.remove('active');
                    dislikeBtn.classList.remove('active');
                  }
                }
              }
              
              // Обработчики
              likeBtn?.addEventListener('click', () => handleVote('like'));
              dislikeBtn?.addEventListener('click', () => handleVote('dislike'));
              
              // Загружаем реальные данные
              loadVotes();
            });
          })();
        </script>

        
      </main>

      <!-- Боковой блок -->
      <aside class="lg:col-span-4">
        <AuthorConsultation author={author} />
      </aside>
    </div>
  </div>
</article>

<style>
  .post-likes-widget {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .vote-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .vote-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.75rem;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #6b7280;
  }

  .vote-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  /* Лайк */
  .vote-btn.like-btn:hover {
    border-color: #86efac;
    background: #f0fdf4;
    color: #16a34a;
  }

  .vote-btn.like-btn.active {
    background: #16a34a;
    border-color: #16a34a;
    color: #ffffff;
  }

  /* Дизлайк */
  .vote-btn.dislike-btn:hover {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #dc2626;
  }

  .vote-btn.dislike-btn.active {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
  }

  .thumb-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
  }

  .vote-count {
    min-width: 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  .divider {
    width: 1px;
    height: 1.5rem;
    background: #e5e7eb;
    margin: 0 0.25rem;
  }
</style>
