---
import { themeConfig } from '@/config'
---

<script define:vars={{ copyCode: themeConfig.post.copyCode }}>
  function initCopyCode() {
    const copyIcon = `
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="14" height="14" fill="currentColor">
        <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path>
        <path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path>
      </svg>
    `

    const copiedIcon = `
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
        <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path>
      </svg>
    `

    document.body.setAttribute('data-copy-code', copyCode ? 'enabled' : 'disabled')

    if (!copyCode) {
      return
    }

    const copyButtons = document.querySelectorAll('.copy-button')

    copyButtons.forEach((button) => {
      // Avoid initializing multiple times (important for SPA navigation)
      if (button.dataset.copyInit) return
      button.dataset.copyInit = '1'

      // Find the closest pre element with the .copy-code-block class
      let preElement = button.closest('.copy-code-block')
      if (!preElement) {
        const parent = button.parentElement
        if (parent) {
          preElement = parent.querySelector('.copy-code-block')
        }
      }
      if (!preElement) return

      const codeElement = preElement.querySelector('code')
      if (!codeElement) return

      if (!button.querySelector('svg')) {
        button.innerHTML = copyIcon
      }

      button.style.opacity = '0'
      button.style.pointerEvents = 'none'

      // Determine the container to attach hover events
      let container = preElement
      const parent = button.parentElement
      if (parent && parent.classList.contains('copy-code-wrapper')) {
        container = parent
      }

      container.addEventListener('mouseenter', () => {
        button.style.opacity = '1'
        button.style.pointerEvents = 'auto'
      })

      container.addEventListener('mouseleave', () => {
        if (!button.hasAttribute('data-copying')) {
          button.style.opacity = '0'
          button.style.pointerEvents = 'none'
        }
      })

      button.addEventListener('click', async () => {
        const codeText = codeElement.textContent || ''

        try {
          // Primary method: use modern clipboard API
          await navigator.clipboard.writeText(codeText)
          button.setAttribute('data-copying', 'true')
          button.innerHTML = copiedIcon

          setTimeout(() => {
            if (!container.matches(':hover')) {
              button.style.opacity = '0'
              button.style.pointerEvents = 'none'
            }
            button.removeAttribute('data-copying')

            setTimeout(() => {
              button.innerHTML = copyIcon
            }, 500)
          }, 1500)
        } catch (err) {
          console.error('Failed to copy code:', err)

          // Fallback method: create temporary textarea for older browsers
          try {
            const textArea = document.createElement('textarea')
            textArea.value = codeText
            textArea.style.position = 'fixed'
            textArea.style.opacity = '0'
            document.body.appendChild(textArea)
            textArea.focus()
            textArea.select()

            navigator.clipboard
              .writeText(codeText)
              .then(() => {
                document.body.removeChild(textArea)
              })
              .catch(() => {
                console.error('Both clipboard methods failed')
                document.body.removeChild(textArea)
              })
          } catch (fallbackErr) {
            console.error('All clipboard methods failed:', fallbackErr)
          }

          button.setAttribute('data-copying', 'true')
          button.innerHTML = copiedIcon

          setTimeout(() => {
            if (!container.matches(':hover')) {
              button.style.opacity = '0'
              button.style.pointerEvents = 'none'
            }
            button.removeAttribute('data-copying')

            setTimeout(() => {
              button.innerHTML = copyIcon
            }, 500)
          }, 1500)
        }
      })
    })
  }

  // Use only astro:page-load as it fires on initial load and navigation
  document.addEventListener('astro:page-load', initCopyCode)
</script>

<style is:inline>
  /* Ensure the positioned ancestor is correct */
  .copy-code-wrapper {
    position: relative !important;
  }

  /* Keep for backward compatibility */
  .copy-code-block {
    position: relative !important;
  }

  .copy-button {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 2rem;
    height: 2rem;
    z-index: 10;
    background: var(--bg);
    border-radius: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    backdrop-filter: blur(48px);
    opacity: 0;
    pointer-events: none;
  }

  body[data-copy-code='disabled'] .copy-button {
    display: none !important;
  }

  .copy-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--code-bg);
    border-radius: 0.325rem;
    opacity: 0;
    transition: opacity 0.15s ease-out;
    pointer-events: none;
  }

  .copy-button:hover::before {
    opacity: 1;
  }

  .copy-button:hover {
    color: var(--text-primary);
  }

  .copy-button svg {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
  }
</style>