<script lang="ts">
  import { onMount } from 'svelte';
  import type { IPost } from '$type/post';
  import { postActiveAnchor } from '../../../store';
  import { t } from '$lib/translations';
  import { initPopover } from '$utils/initPopover';
  import CopyLink from '../../../assets/icons/CopyLink.svg';

  export let className = '';
  export let data: IPost;
  export let notUseH3 = false;

  const visible = (target: HTMLElement, index: number) => {
    let targetPosition = {
        top: window.pageYOffset + target.getBoundingClientRect().top,
        left: window.pageXOffset + target.getBoundingClientRect().left,
        right: window.pageXOffset + target.getBoundingClientRect().right,
        bottom: window.pageYOffset + target.getBoundingClientRect().bottom
      },

      windowPosition = {
        top: window.pageYOffset,
        left: window.pageXOffset,
        right: window.pageXOffset + document.documentElement.clientWidth,
        bottom: window.pageYOffset + document.documentElement.clientHeight
      };

      if (
        targetPosition.bottom >= windowPosition.top && // Если позиция нижней части элемента больше позиции верхней чайти окна, то элемент виден сверху
        targetPosition.top <= windowPosition.bottom - (window.innerHeight * 0.8) // Если позиция верхней части элемента меньше позиции нижней чайти окна, то элемент виден снизу

      ) { // Если позиция левой стороны элемента меньше позиции правой чайти окна, то элемент виден справа


      postActiveAnchor.set(index);
    }
  };

  onMount(() => {
    const titles:NodeListOf<HTMLElement> = document.querySelectorAll(
        notUseH3 ? '.anchors-content h2' : '.anchors-content h2, .anchors-content h3'
    );

    const linkButton = document.createElement('button');
    linkButton.classList.add('copyButton');

    linkButton.innerHTML= `<img src="${CopyLink}" alt="copy link" />`;
    const pageUrl = new URL(window.location.href);
    titles.forEach((title, index) => {
      const linkButtonCopy = linkButton.cloneNode(true);
      const plate = document.createElement('div');
      const span = document.createElement('span');
      plate.classList.add('copyAlert');
      linkButtonCopy.appendChild(plate);

      linkButtonCopy.addEventListener('click', () => {
        let state = '';

        try {
          navigator.clipboard.writeText(pageUrl.protocol + '//' + pageUrl.host + pageUrl.pathname + '#anchor'+(index+1));
          state = 'copied';
          setTimeout(() => {
            state = 'idle';
          }, 1000);
        } catch (e) {
          state = 'error';
          setTimeout(() => {
            state = 'idle';
          }, 1000);
        }
        plate.textContent=$t(state);
        plate.classList.add('active');
        setTimeout(() => {
          plate.classList.remove('active');
        }, 3000)
      });

      const lastWord = title.textContent?.split(/[\s]/);
      span.append(lastWord?.pop() || '', linkButtonCopy);
      title.textContent = (lastWord?.join(' ') || '') + ' ';
      title.append(span);
    });

    document.addEventListener('scroll', () => {
      titles.forEach((title, index) => {
        visible(title, index);
      });
    });

    const popovers = Array.from(document.getElementsByClassName('withHint'));
    popovers.forEach((popover) => {
      initPopover(popover as HTMLElement, popover.getAttribute('data-content') || '')
    });
  });

</script>

<div class="article-body anchors-content" id="articleContent">
  {@html data.content.rendered}
</div>
<style lang="scss">
  @import 'src/scss/media';
  @import 'src/scss/mixins';
  @import 'src/scss/variables';

    :global(.article-body) {
      padding: 40px 0 0;

      :global(p) {
        font-size: 1.0625rem;
        line-height: 1.85;
        color: #323232;
        margin-bottom: 1.5em;
      }

      :global(h2) {
        font-size: 1.375rem;
        font-weight: 700;
        color: #141414;
        margin: 2.25em 0 0.6em;
        line-height: 1.3;
        scroll-margin-top: 80px;
      }

      :global( & > h2:first-of-type) {
        margin-top: 0;
      }

      :global(h3) {
        font-size: 1.125rem;
        font-weight: 600;
        color: #141414;
        margin: 1.75em 0 0.4em;
      }

      :global(ul), :global(ol) {
        margin: 0 0 1.5em;
        padding: 0;
        list-style: none;
      }

      :global(li) {
        font-size: 1.0625rem;
        line-height: 1.85;
        color: #323232;
        padding-left: 24px;
        position: relative;
        margin-bottom: 0.35em;
      }

      :global(ul li::before) {
        content: '';
        position: absolute;
        left: 6px;
        top: 13px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #E62334;
      }

      :global(ol) {
        counter-reset: ol;
      }

      :global(ol li::before) {
        counter-increment: ol;
        content: counter(ol) ".";
        position: absolute;
        left: 0;
        top: 0;
        font-weight: 700;
        color: #E62334;
        font-size: 0.875rem;
      }

      :global(blockquote) {
        border-left: 3px solid #E62334;
        background: #fef7f7;
        padding: 20px 24px;
        margin: 2em 0;
        border-radius: 0 8px 8px 0;
      }

      :global(blockquote p) {
        color: #4a1a1e;
        margin-bottom: 0;
        font-style: italic;
      }

      :global(a) {
        color: #2dc0ee;
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-color: rgba(45, 192, 238, 0.3);
      }

      :global(a:hover) {
        text-decoration-color: #2dc0ee;
      }

      :global(strong) {
        font-weight: 600;
        color: #141414;
      }

      :global(img) {
        border-radius: 8px;
        margin: 1.5em 0;
      }
    }

  :global(.article-table-wrap) {
      overflow-x: auto;
      margin: 1.5em 0;
  }

  :global(.article-table) {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.9375rem;
  }

  :global(.article-table th, .article-table td) {
        padding: 10px 12px;
        text-align: left;
        border: 1px solid #e5e7eb;
    }

  :global(.article-table th) {
        background: #f9fafb;
        font-weight: 600;
        color: #141414;
    }

  :global(.article-table tbody tr:nth-child(even)) {
        background: #fafafa;
    }


  /* ── Main content ── */
  main { min-width: 0; }

  // LIKE THAT
  :global(.article-body .likeThat ) {
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 24px;
    cursor: pointer;

    @include breakpoint-down('tabM') {
      padding: 0;
      padding-top: 32px;
      gap: 0;
    }
  }
  :global(.article-body .likeThat .title) {
    font-weight: 500;
    @include breakpoint-down('tabM') {
      padding: 0 32px;
    }
  }
  :global(.article-body .likeThatContent ) {
    background: white;
    border-radius: 24px;
    display: flex;
    justify-content: space-between;
    padding: 32px;
    gap: 24px;
    @include breakpoint-down('tabL') {
      flex-direction: column;
      gap: 10px;
    }
    @include breakpoint-down('tabM') {
      padding: 24px;
      gap: 24px;
      border-radius: 16px;
    }
  }
  :global(.article-body .likeThatContent .imageContainer  ) {
    height: 256px;
    width: 384px;
    border-radius: 24px;
    position: relative;
    flex-shrink: 0;
    @include breakpoint-down('tabM') {
      border-radius: 16px;
      width: 100%;
      height: auto;
    }
  }
  :global(.article-body .likeThatContent .imageContainer__nameplate  ) {
    position: absolute;
    left: 12px;
    bottom: 12px;
    width: fit-content;
    padding: 4px 10px;
    color: $techBlue;
    background-color: $redActive;
    border-radius: 12px;
    @include smallDefault;
  }
  :global(.article-body .likeThatContent .imageContainer img  ) {
    height: 100%;
    width: 100%;
    border-radius: 24px;
    object-fit: cover;
    @include breakpoint-down('tabM') {
      border-radius: 16px;
    }
  }
  :global(.article-body .likeThatContent .textContainer   ) {
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  :global(.article-body .likeThatContent .textContainer  .textTitle) {
    @include blogLikeThatTextTitle;
    color: $fontPrimary;
    @include breakpoint-down('tabM') {
      font-size: 22px;
      line-height: 26.4px;
    }
  }
  :global(.article-body .likeThat  .title) {
    color: $techBluePrimary;
    margin-bottom: 0;
    @include blogLikeThatTitle;
  }
  :global(.article-body .likeThat  .authorContainer) {
    display: flex;
    justify-content: space-between;
    align-items: start;
    color: $techBluePrimary;
  }
  :global(.article-body .likeThat  .authorContainer .poster__wroteImage) {
    width: 32px;
    height: 32px;
    border-radius: 100px;
  }
  :global(.article-body .likeThat  .authorContainer .poster__wroteName) {
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
    letter-spacing: 0;
    @include breakpoint-down('tabM') {
      font-size: 16px;
      line-height: 24px;
    }
    color: $fontPrimary;
  }
  :global(.article-body .likeThat  .authorContainer .poster__wroteText) {
    font-size: 12px;
    line-height: 18px;
  }
  :global(.article-body .likeThat  .authorContainer .poster__listItem) {
    @include smallDefault;
    display: flex;
    gap: 6px;
    align-items: center;
  }
  :global(.article-body .likeThat  .likeThat__author) {
    display: flex;
    gap: 12px;
  }
  :global(.article-body .likeThat p) {
    margin-bottom: 0;
  }

  // Blockquotes - cleaner with subtle background
  :global(.article-body blockquote) {
    border-left: 3px solid $redPrimary;
    padding: 24px 32px;
    margin: 32px 0;
    background: $techBlue2;
    border-radius: 0 12px 12px 0;
    background-image: url("data:image/svg+xml,%3Csvg width='81' height='51' viewBox='0 0 81 51' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_7524_21079)'%3E%3Cpath d='M4.06575 50.2241C2.85701 50.2241 1.8827 49.817 1.12815 48.9881C0.373609 48.1665 0 47.1632 0 45.9635C0 44.9166 0.227096 43.9423 0.673962 43.048L15.1348 5.82976C15.8894 4.33929 16.7904 3.03058 17.8453 1.90363C18.9002 0.783958 20.4753 0.224121 22.5924 0.224121H34.1157C35.3171 0.224121 36.3354 0.674899 37.1632 1.56918C37.991 2.46347 38.2547 3.66312 37.9543 5.1536L32.0791 43.0408C31.9253 44.8366 31.2513 46.4798 30.0426 47.9702C28.8339 49.468 27.105 50.2096 24.8487 50.2096H4.06575V50.2241ZM46.9869 50.2241C45.7781 50.2241 44.8038 49.817 44.0493 48.9881C43.2947 48.1665 42.9211 47.1632 42.9211 45.9635C42.9211 44.9166 43.1482 43.9423 43.6024 43.048L58.056 5.82976C58.8105 4.33929 59.7116 3.03058 60.7665 1.90363C61.8214 0.783958 63.3964 0.224121 65.5135 0.224121H77.0368C78.3921 0.224121 79.447 0.674899 80.2015 1.56918C80.956 2.46347 81.1758 3.66312 80.8755 5.1536L75.0003 43.0408C74.8464 44.8366 74.1725 46.4798 72.9637 47.9702C71.755 49.468 70.0261 50.2096 67.7698 50.2096H46.9869V50.2241Z' fill='%23E8EDF2'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_7524_21079'%3E%3Crect width='81' height='50' fill='white' transform='translate(0 0.224121)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    background-size: 60px 38px;
    background-repeat: no-repeat;
    background-position: calc(100% - 16px) 16px;

    @include breakpoint-down('deskS') {
      margin: 24px 0;
      padding: 16px 20px;
    }
  }

  :global(.article-body blockquote > p) {
    margin-bottom: 0;
    font-style: italic;
    font-size: 17px;
    line-height: 1.7;
    color: $techGrey;
  }

  :global(.article-body blockquote footer) {
    padding-top: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
  }

  :global(.article-body blockquote footer > img) {
    width: 48px;
    min-width: 48px;
    height: 48px;
    border-radius: 50%;
  }

  :global(.article-body blockquote footer > div > p) {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-style: normal;
  }

  :global(.article-body blockquote footer > div > p > a) {
    display: flex;
  }

  :global(.article-body blockquote footer > div > p > a > svg) {
    width: 28px;
    height: 28px;
  }

  :global(.article-body .group) {
    font-weight: 500;
    font-size: 40px;
    line-height: 46px;
    letter-spacing: 0;
    padding: 32px;
    margin: 40px 0;
    background: white;
    border-radius: 16px;
    color: $techGrey;

    @include breakpoint-down('tabL') {
      font-size: 26px;
      line-height: 32px;
      margin: 14px 0;
    }
  }

  // Tables - cleaner, more spacious, Semrush-inspired
  :global(.article-body .wp-block-table) {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid $techBlue3;
    background: white;
    margin-bottom: 32px;

    @include breakpoint-down('deskL') {
      margin-bottom: 24px;
    }

    @include breakpoint-down('deskS') {
      margin-bottom: 20px;
      border-radius: 10px;
    }
  }
  :global(.article-body .has-text-align-left) {
    text-align: left;
  }
  :global(.article-body .has-text-align-center) {
    text-align: center;
  }
  :global(.article-body .has-text-align-right) {
    text-align: right;
  }
  :global(.article-body table) {
    width: 100%;
    border-collapse: collapse;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 28px;
  }
  :global(.article-body table thead th:last-child) {
    border-right: none;
  }
  :global(.article-body table thead tr th) {
    padding: 14px 20px;
    border: none;
    border-bottom: 2px solid $techBlue2;
    border-right: 1px solid $techBlue2;
    background: #f0f2f5;
    font-weight: 600;
    font-size: 14px;
    line-height: 140%;
    color: $fontPrimary;
    text-align: left;

    @include breakpoint-down('deskL') {
      padding: 12px 16px;
      font-size: 13px;
    }
    @include breakpoint-down('tabL') {
      padding: 10px 14px;
      font-size: 11px;
    }
    @include breakpoint-down('tabM') {
      padding: 10px 12px;
      font-size: 10px;
    }
  }
  :global(.article-body table thead tr th:last-child) {
    border-right: none;
  }
  :global(.article-body table tfoot td) {
    border-top: 1px solid $techBlue3;
  }
  :global(.article-body table td) {
    padding: 14px 20px;
    border: none;
    border-bottom: 1px solid $techBlue2;
    border-right: 1px solid $techBlue2;
    font-weight: 400;
    font-size: 15px;
    line-height: 150%;
    color: $techGrey;
    vertical-align: top;

    @include breakpoint-down('deskL') {
      padding: 12px 16px;
      font-size: 13px;
    }
    @include breakpoint-down('tabL') {
      padding: 10px 14px;
      font-size: 11px;
    }
    @include breakpoint-down('tabM') {
      padding: 10px 12px;
      font-size: 10px;
    }
  }
  :global(.article-body table tbody tr:nth-child(even)) {
    background: rgba(248, 251, 253, 0.6);
  }
  :global(.article-body table tbody tr:hover) {
    background: $techBlue2;
    transition: background 0.15s ease;
  }
  :global(.wp-block-table.is-style-stripes table td) {
    padding: 12px 20px;
    border: none;
  }
  :global(.wp-block-table.is-style-stripes tr:nth-of-type(2n+1) td) {
    background: $techBlue2;
  }
  :global(.article-body tr td:last-child) {
    border-right: none;
  }
  :global(.article-body tr:last-child td) {
    border-bottom: none;
  }

  :global(.article-body .group strong) {
    @include blogTitleH3;
    margin-bottom: 10px;
  }

  :global(.article-body blockquote footer > div > span) {
    @include xSmallDefault;
    color: $techBlueSecondary;
    display: block;
    font-style: normal;
  }

  // Strong text - slightly bolder for emphasis
  :global(.article-body p strong) {
    font-weight: 600;
    color: $fontPrimary;
  }

  :global(.article-body .videoBlock) {
    background: rgba(255, 55, 55, 0.06);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    padding: 30px;
    gap: 12px;
    margin-bottom: 32px;

    @include breakpoint-down('tabL') {
      border-radius: 12px;
      padding: 16px;
    }
  }

  :global(.article-body .videoBlock__title) {
    color: $redPrimary;
    font-weight: 500;
    font-size: 40px;
    line-height: 46px;
    letter-spacing: 0;

    @include breakpoint-down('tabL') {
      font-size: 26px;
      line-height: 32px;
    }
  }

  :global(.article-body .videoBlock__description) {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    color: $techGrey;
  }

  :global(.article-body .videoBlock__embed) {
    border-radius: 16px;
    display: flex;
    overflow: hidden;
    width: 100%;
    height: auto;
    margin-top: 12px;
  }

  :global(.article-body .videoBlock__embed iframe) {
    width: 100%;
    aspect-ratio: 1.78;
  }

  @media (max-width: 768px) {
    .qc-topbar { display: none; }
    .qc-header-nav { display: none; }
    .qc-header-inner, .article-wrapper { padding-left: 20px; padding-right: 20px; max-width: 100%; }
    .article-hero .breadcrumbs, .article-hero .article-header { padding-left: 20px; padding-right: 20px; }
    .article-hero .article-header { padding-top: 16px; padding-bottom: 10px; }
    .article-hero-meta { padding-bottom: 10px; }
    .article-body { padding-top: 12px; }
    .qc-footer-grid { grid-template-columns: repeat(2, 1fr); }
    .sidebar { flex-direction: column; }
    .author-card { flex-direction: column; align-items: center; text-align: center; }
    .qc-footer-inner { padding: 0 20px; }
    /* Hide author detail at top of article on mobile */
    .article-meta-author, .article-contributors { display: none !important; }
    .sidebar { display: none !important; }
  }
</style>