---
interface Heading {
    depth: number;
    slug: string;
    text: string;
}

interface Props {
    headings: Heading[];
}

const {headings} = Astro.props;

// Filter out h1 (page title) and only show h2-h4
const tocHeadings = headings.filter(h => h.depth >= 2 && h.depth <= 4);

// Calculate minimum depth to determine relative indentation
const minDepth = tocHeadings.length > 0 ? Math.min(...tocHeadings.map(h => h.depth)) : 2;
---

{tocHeadings.length > 0 && (
<nav
        id="page-outline"
        aria-label="Table of Contents"
        _=`def setupTOC()
            wait 50ms
            set allHeadings to <main :is(h2,h3,h4)[id]/> as Array
            js(me, allHeadings)
                if (me._tocObserver) me._tocObserver.disconnect();
                const observer = new IntersectionObserver(
                    (entries) => entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            const id = entry.target.getAttribute('id');
                            const tocLink = document.querySelector('.toc-link[href="#' + id + '"]');
                            if (tocLink) {
                                _hyperscript.evaluate(
                                    "take [@data-active] from .toc-link for first <.toc-link[href='#" + id + "']/>"
                                );
                                tocLink.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
                            }
                        }
                    }),
                    { rootMargin: '-100px 0px -66% 0px', threshold: 0 }
                );
                allHeadings.forEach(h => observer.observe(h));
                me._tocObserver = observer;
            end
            init call setupTOC() end
            on htmx:after:swap from document call setupTOC() end`>
    <div class="border-l border-neutral-200 dark:border-neutral-800">
        {tocHeadings.map((heading) => {
            // Determine indentation class based on depth
                // Depth 0 = pl-4, Depth 1 = pl-8, etc.

            const depth = heading.depth - minDepth;
            const indentClass = depth === 0 ? 'pl-4' : depth === 1 ? 'pl-8' : 'pl-12';

            return (
                    <a href={`#${heading.slug}`}
                       data-depth={depth}
                       class={`toc-link block py-2 pr-2 text-sm transition truncate -ml-px border-l-2
                          ${indentClass}
                          /* Default State (Inactive) */
                          border-transparent text-neutral-600 interact:text-neutral-900 interact:border-neutral-300
                          dark:text-neutral-400 dark:interact:text-neutral-200 dark:interact:border-neutral-700
                          /* Active State (via Hyperscript) */
                          data-active:border-neutral-900 data-active:text-neutral-900 data-active:font-semibold
                          data-active:dark:border-neutral-100 data-active:dark:text-neutral-100
                       `}>
                        {heading.text}
                    </a>
            );
        })}
    </div>
</nav>
    )}
