(function () {
  function initMobileMenu() {
    if (!document.body.dataset.newsPage) 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 parseRuDate(value) {
    const [day, month, year] = String(value || "").split(".");
    return new Date(Number(year), Number(month) - 1, Number(day)).getTime() || 0;
  }

  function getSortedNewsArticles() {
    if (!Array.isArray(window.NEWS_ARTICLES)) return [];

    return [...window.NEWS_ARTICLES].sort((a, b) => {
      const aFeatured = a.featured ? 1 : 0;
      const bFeatured = b.featured ? 1 : 0;

      if (aFeatured !== bFeatured) {
        return bFeatured - aFeatured;
      }

      if (a.featured && b.featured) {
        return (a.featuredOrder || 9999) - (b.featuredOrder || 9999);
      }

      return parseRuDate(b.publishedAt) - parseRuDate(a.publishedAt);
    });
  }

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

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

  function getNewsImageSrc(article) {
    if (!article.image) {
      return getNewsPlaceholderSrc();
    }

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

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

  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 featuredBadgeMarkup(article) {
    return article.featured ? `<span class="news-featured-badge">Избранное</span>` : "";
  }

  function homeNewsTeaserMarkup(article) {
    const href = getNewsHref(article);
    return `
      <article class="bg-white p-5 rounded-xl shadow-sm border border-gray-100">
        <div class="mb-3 flex items-center justify-between gap-3">
          <p class="text-xs text-gray-500">${article.publishedAt}</p>
          ${featuredBadgeMarkup(article)}
        </div>
        <h3 class="font-bold text-gray-900 leading-snug">
          <a href="${href}" class="hover:text-green-700">${escapeHtml(article.title)}</a>
        </h3>
        <p class="text-sm text-gray-600 mt-2">${escapeHtml(article.excerpt)}</p>
        <a href="${href}" class="inline-block mt-3 text-sm font-semibold text-green-700 hover:text-green-800 hover:underline">Открыть новость</a>
      </article>
    `;
  }

  function newsCardMarkup(article) {
    const pageType = document.body.dataset.newsPage;
    const href = getNewsHref(article);
    const imageSrc = getNewsImageSrc(article);
    const imageFallback = getNewsImageFallbackAttr();

    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 items-center gap-3 text-xs text-gray-500">
              <span>${article.publishedAt}</span>
              <span>Новость</span>
              ${featuredBadgeMarkup(article)}
            </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>
            ${featuredBadgeMarkup(article)}
          </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 renderHomeNewsTeasers(containerId, limit) {
    const container = document.getElementById(containerId);
    if (!container) return;

    const items = getSortedNewsArticles().slice(0, limit);
    container.innerHTML = items.map(homeNewsTeaserMarkup).join("");
  }

  function renderNewsGrid(containerId, limit) {
    const container = document.getElementById(containerId);
    if (!container) return;

    const items = getSortedNewsArticles().slice(0, limit || undefined);
    container.innerHTML = items.map(newsCardMarkup).join("");
  }

  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:news:views:${slug}`;
    const currentViews = parseInt(localStorage.getItem(key) || "0", 10) + 1;
    localStorage.setItem(key, String(currentViews));

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

  function getRelatedArticles(currentSlug, count = 4) {
    const all = getSortedNewsArticles();
    const filtered = all.filter((article) => article.slug !== currentSlug);
    return filtered.slice(0, count);
  }

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

    const imageFallback = getNewsImageFallbackAttr();
    const related = getRelatedArticles(currentSlug, 4);
    track.innerHTML = related
      .map((article) => {
        const href = getNewsHref(article);
        const imageSrc = getNewsImageSrc(article);
        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();
    renderHomeNewsTeasers("home-news-grid", 4);
    renderNewsGrid("news-container", 6);
    renderNewsGrid("news-index-grid");
    initArticleToc();
    initArticleViews();
    initRelatedArticles();
  });
})();