/**
 * SourceViewer hook — scrolls to and highlights the selected line.
 *
 * Attached to the `#source-viewer` div via `phx-hook="SourceViewer"`.
 * Reads `data-highlighted-line` to find the target line element and
 * scrolls it into view with a smooth animation.
 * Also applies highlight.js syntax highlighting to code blocks.
 */
import hljs from "highlight.js/lib/core"

export const SourceViewer = {
  mounted() {
    this.applySyntaxHighlighting()
    this.scrollToHighlighted()
  },

  updated() {
    this.applySyntaxHighlighting()
    this.scrollToHighlighted()
  },

  applySyntaxHighlighting() {
    const codeEl = this.el.querySelector("code")
    if (codeEl && !codeEl.querySelector(".hljs")) {
      hljs.highlightElement(codeEl)
    }
  },

  scrollToHighlighted() {
    const lineNum = this.el.dataset.highlightedLine
    if (lineNum !== undefined && lineNum !== "") {
      const lineEl = document.getElementById(`line-${lineNum}`)
      if (lineEl) {
        lineEl.scrollIntoView({ behavior: "smooth", block: "center" })
      }
    }
  }
}