function initMobileMenu() {
  if (!document.body.dataset.blogPage) return;

  const button = document.getElementById("mobile-menu-btn");
  const menu = document.getElementById("mobile-menu");
  if (!button || !menu) return;

  button.addEventListener("click", () => {
    menu.classList.toggle("hidden");
  });

  menu.querySelectorAll("a, button").forEach((item) => {
    item.addEventListener("click", () => menu.classList.add("hidden"));
  });
}

function escapeHtml(value) {
  return String(value)
    .replaceAll("&", "&")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;");
}

function getArticleHref(article) {
  const pageType = document.body.dataset.blogPage;
  return pageType === "archive" || pageType === "article"
    ? `./${article.slug}.html`
    : `./blog/${article.slug}.html`;
}

function getBlogPlaceholderSrc() {
  const pageType = document.body.dataset.blogPage;
  return pageType === "archive" || pageType === "article"
    ? "../images/shared/article-placeholder.svg"
    : "./images/shared/article-placeholder.svg";
}

function getArticleImageSrc(article) {
  if (!article.image) {
    return getBlogPlaceholderSrc();
  }

  const pageType = document.body.dataset.blogPage;
  return pageType === "archive" || pageType === "article"
    ? `../${article.image}`
    : `./${article.image}`;
}

function getArticleImageFallbackAttr() {
  return `this.onerror=null;this.src='${getBlogPlaceholderSrc()}'`;
}

function buildFooterSocialLinksMarkup() {
  return `
    <div data-footer-socials style="display:flex;align-items:center;gap:12px;margin-top:12px;">
      <a href="https://t.me/ozimayarf" target="_blank" rel="noopener noreferrer" aria-label="Telegram" title="Telegram" style="display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9999px;background:linear-gradient(135deg,#2aabee,#1d8fd8);color:#ffffff;text-decoration:none;">
        <svg viewBox="0 0 24 24" aria-hidden="true" style="width:14px;height:14px;"><path d="M21.944 4.507a1.5 1.5 0 0 0-1.806-1.87L2.86 8.03A1.5 1.5 0 0 0 2.8 10.9l4.212 1.39 1.58 5.066a1.5 1.5 0 0 0 2.553.612l2.35-2.43 4.486 3.286a1.5 1.5 0 0 0 2.36-.91l1.603-13.407Z" fill="currentColor"/></svg>
      </a>
      <a href="https://vk.ru/club237700326" target="_blank" rel="noopener noreferrer" aria-label="VK" title="VK" style="display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9999px;background:linear-gradient(135deg,#2787f5,#1565d8);color:#ffffff;text-decoration:none;">
        <svg viewBox="0 0 24 24" aria-hidden="true" style="width:16px;height:16px;"><path d="M4.29 7.33c.12 5.73 3.03 9.17 8.14 9.17h.3V13.2c1.84.2 3.24 1.55 3.8 3.3h2.6c-.72-2.63-2.63-4.08-3.82-4.63 1.19-.69 2.86-2.36 3.26-4.54h-2.36c-.53 1.77-2.06 3.44-3.48 3.59V7.33h-2.36v6.3c-1.43-.36-3.24-2.16-3.32-6.3H4.29Z" fill="currentColor"/></svg>
      </a>
      <a href="https://max.ru/join/GzH05TibcROmkwcfGdk-onV0sfNtVJRXXklt8zl_uLM" target="_blank" rel="noopener noreferrer" aria-label="Max" title="Max" style="display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9999px;background:linear-gradient(45deg,#2b61ec,#763ded);color:#ffffff;text-decoration:none;">
        <svg viewBox="0 0 720 720" aria-hidden="true" style="width:14px;height:14px;"><path d="M350.4 9.6C141.8 20.5 4.1 184.1 12.8 390.4c3.8 90.3 40.1 168 48.7 253.7 2.2 22.2-4.2 49.6 21.4 59.3 31.5 11.9 79.8-8.1 106.2-26.4 9-6.1 17.6-13.2 24.2-22 27.3 18.1 53.2 35.6 85.7 43.4 143.1 34.3 299.9-44.2 369.6-170.3C799.6 291.2 622.5-4.6 350.4 9.6m-81 494.4c-11.3 8.8-22.2 20.8-34.7 27.7-18.1 9.7-23.7-.4-30.5-16.4-21.4-50.9-24-137.6-11.5-190.9 16.8-72.5 72.9-136.3 150-143.1 78-6.9 150.4 32.7 183.1 104.2 72.4 159.1-112.9 316.2-256.4 218.6Z" fill="currentColor"/></svg>
      </a>
    </div>
  `;
}

function normalizeFooterContacts() {
  const footer = document.querySelector("footer");
  footer?.querySelectorAll(".grid > div:last-child li").forEach((item) => {
    item.textContent = item.textContent.replace(/^[^+\p{L}\p{N}]+/u, "").trim();
  });
}

function initFooterSocialLinks() {
  const footer = document.querySelector("footer");
  const footerColumns = footer?.querySelectorAll(".grid > div");
  const contactColumn = footerColumns?.[footerColumns.length - 1];
  if (!contactColumn || contactColumn.querySelector("[data-footer-socials]")) return;

  contactColumn.insertAdjacentHTML("beforeend", buildFooterSocialLinksMarkup());
}

function articleCardMarkup(article) {
  const pageType = document.body.dataset.blogPage;
  const href = getArticleHref(article);
  const imageSrc = getArticleImageSrc(article);
  const imageFallback = getArticleImageFallbackAttr();

  if (!pageType) {
    return `
      <article class="overflow-hidden rounded-2xl border border-gray-100 bg-white shadow-sm transition-transform duration-200 hover:-translate-y-1 hover:shadow-md">
        <a href="${href}" class="block">
          <img src="${imageSrc}" alt="${escapeHtml(article.title)}" class="h-52 w-full object-cover" loading="lazy" onerror="${imageFallback}">
        </a>
        <div class="p-5">
          <div class="mb-2 flex flex-wrap gap-3 text-xs text-gray-500">
            <span>${article.publishedAt}</span>
            <span>Блог</span>
          </div>
          <h3 class="text-xl font-bold text-gray-900 leading-snug">
            <a href="${href}" class="hover:text-green-700">${escapeHtml(article.title)}</a>
          </h3>
          <p class="mt-3 text-sm leading-6 text-gray-600">${escapeHtml(article.excerpt)}</p>
          <a href="${href}" class="mt-4 inline-flex items-center text-sm font-semibold text-green-700 hover:text-green-800 hover:underline">Открыть статью</a>
        </div>
      </article>
    `;
  }

  return `
    <article class="blog-card">
      <a href="${href}" class="blog-card__image-link">
        <img src="${imageSrc}" alt="${escapeHtml(article.title)}" class="blog-card__image" loading="lazy" onerror="${imageFallback}">
      </a>
      <div class="blog-card__body">
        <div class="blog-card__meta">
          <span>${article.publishedAt}</span>
          <span>Статья</span>
        </div>
        <h3 class="blog-card__title">
          <a href="${href}">${escapeHtml(article.title)}</a>
        </h3>
        <p class="blog-card__excerpt">${escapeHtml(article.excerpt)}</p>
        <a href="${href}" class="blog-card__link">Читать статью →</a>
      </div>
    </article>
  `;
}

function renderBlogGrid(containerId, limit) {
  const container = document.getElementById(containerId);
  if (!container || !Array.isArray(window.BLOG_ARTICLES)) return;

  const items = limit ? window.BLOG_ARTICLES.slice(0, limit) : window.BLOG_ARTICLES;
  container.innerHTML = items.map(articleCardMarkup).join("");
}

function initHomeBlogSection() {
  renderBlogGrid("blog-home-grid", 6);
}

function initBlogArchive() {
  renderBlogGrid("blog-index-grid");
}

function buildHeadingId(index) {
  return `section-${index + 1}`;
}

function insertTocAfterIntro(tocCard, content) {
  const introParagraphs = Array.from(content.children).filter((node) => node.tagName === "P");
  const insertionTarget = introParagraphs[1] || introParagraphs[0];

  if (insertionTarget?.parentNode === content) {
    insertionTarget.insertAdjacentElement("afterend", tocCard);
  } else {
    content.prepend(tocCard);
  }
}

function initArticleToc() {
  const toc = document.getElementById("article-toc");
  const tocCard = toc?.closest(".article-toc-card");
  const content = document.querySelector("[data-article-content]");
  if (!toc || !tocCard || !content) return;

  const headings = Array.from(content.querySelectorAll("h2, h3"));
  if (!headings.length) {
    toc.innerHTML = "<p class=\"text-sm text-gray-500\">Содержание появится после добавления подзаголовков.</p>";
    return;
  }

  const itemsMarkup = headings
    .map((heading, index) => {
      if (!heading.id) {
        heading.id = buildHeadingId(index);
      }

      const itemClass = heading.tagName === "H3" ? "article-toc__item article-toc__item--nested" : "article-toc__item";
      return `<li class="${itemClass}"><a href="#${heading.id}" class="article-toc__link">${escapeHtml(heading.textContent.trim())}</a></li>`;
    })
    .join("");

  toc.innerHTML = `<ul class="article-toc__list">${itemsMarkup}</ul>`;

  tocCard.classList.add("article-toc-card--inline");
  insertTocAfterIntro(tocCard, content);

  const tocItems = Array.from(toc.querySelectorAll(".article-toc__item"));
  const collapsibleItems = tocItems.slice(6);

  if (!collapsibleItems.length) return;

  collapsibleItems.forEach((item) => {
    item.hidden = true;
  });

  const toggleButton = document.createElement("button");
  toggleButton.type = "button";
  toggleButton.className = "article-toc-toggle";
  toggleButton.textContent = "Показать полностью";
  toggleButton.setAttribute("aria-expanded", "false");

  toggleButton.addEventListener("click", () => {
    const expanded = toggleButton.getAttribute("aria-expanded") === "true";
    collapsibleItems.forEach((item) => {
      item.hidden = expanded;
    });
    toggleButton.setAttribute("aria-expanded", expanded ? "false" : "true");
    toggleButton.textContent = expanded ? "Показать полностью" : "Свернуть содержание";
  });

  tocCard.append(toggleButton);
}

function initArticleViews() {
  const slug = document.body.dataset.articleSlug;
  if (!slug) return;

  const key = `ozimaya:blog:views:${slug}`;
  const currentViews = parseInt(localStorage.getItem(key) || "0", 10) + 1;
  localStorage.setItem(key, String(currentViews));

  document.querySelectorAll("[data-blog-views]").forEach((node) => {
    node.textContent = new Intl.NumberFormat("ru-RU").format(currentViews);
  });
}

function getRelatedArticles(currentSlug, count = 4) {
  if (!Array.isArray(window.BLOG_ARTICLES)) return [];

  const filtered = window.BLOG_ARTICLES.filter((article) => article.slug !== currentSlug);
  if (filtered.length <= count) return filtered;

  const startIndex = window.BLOG_ARTICLES.findIndex((article) => article.slug === currentSlug);
  const rotated = [];

  for (let i = 1; i < window.BLOG_ARTICLES.length; i += 1) {
    const article = window.BLOG_ARTICLES[(startIndex + i) % window.BLOG_ARTICLES.length];
    if (article.slug !== currentSlug) {
      rotated.push(article);
    }
  }

  return rotated.slice(0, count);
}

function initRelatedArticles() {
  const track = document.getElementById("related-articles-track");
  const currentSlug = document.body.dataset.articleSlug;
  if (!track || !currentSlug) return;

  const related = getRelatedArticles(currentSlug, 4);
  track.innerHTML = related
    .map((article) => {
      const href = getArticleHref(article);
      const imageSrc = getArticleImageSrc(article);
      const imageFallback = getArticleImageFallbackAttr();
      return `
        <article class="related-card">
          <a href="${href}" class="related-card__image-link">
            <img src="${imageSrc}" alt="${escapeHtml(article.title)}" class="related-card__image" loading="lazy" onerror="${imageFallback}">
          </a>
          <div class="related-card__body">
            <p class="related-card__date">${article.publishedAt}</p>
            <h3 class="related-card__title"><a href="${href}">${escapeHtml(article.title)}</a></h3>
          </div>
        </article>
      `;
    })
    .join("");
}

document.addEventListener("DOMContentLoaded", () => {
  initMobileMenu();
  normalizeFooterContacts();
  initFooterSocialLinks();
  initHomeBlogSection();
  initBlogArchive();
  initArticleToc();
  initArticleViews();
  initRelatedArticles();
});