---
import Base from '../../layouts/Base.astro';
import Topbar from '../../components/Topbar.astro';
import Sidebar from '../../components/Sidebar.astro';
import { getCollection, render } from 'astro:content';

export async function getStaticPaths() {
  const posts = await getCollection('posts');
  return posts.map((post) => ({ params: { id: post.id }, props: { post } }));
}

const { post } = Astro.props;
const { Content, headings } = await render(post);

const allPosts = await getCollection('posts', ({ data }) => data.published === true);
const allTags = [...new Set(allPosts.flatMap(p => p.data.tags))].sort();
---

<Base title={post.data.title}>
  <Topbar slot="topbar" />
  <Sidebar slot="sidebar" tags={allTags}/>

  <article class="prose max-w-none">
    <Content />
  </article>

  <div class="flex flex-wrap gap-1 mt-6">
  {post.data.tags.map((tag) => (
    <a href={`/?tag=${tag}`} class="text-xs px-2 py-0.5 rounded-full bg-ctp-surface text-ctp-subtext hover:text-ctp-accent transition-colors">
      {tag}
    </a>
  ))}
</div>

  <div id="toc-container" class="fixed top-16 right-4 z-50">
  <button id="toc-open" class="bg-ctp-surface text-ctp-accent p-2 rounded-lg hover:bg-ctp-overlay transition-colors" style="font-family: 'NerdFontsSymbols Nerd Font'" title="Table of contents">
    
  </button>
  <div id="toc-box" class="hidden absolute right-0 top-10 bg-ctp-mantle border border-ctp-surface rounded-lg p-4 flex-col gap-1 w-56">
    <span class="text-xs uppercase tracking-widest text-ctp-subtext mb-2">Table of Contents</span>
    {headings.map((h) => (
	<a 
    href={'#' + h.slug}
    class="text-sm transition-colors hover:text-ctp-accent"
    style={`
      padding-left: ${(h.depth - 1) * 0.75}rem;
      color: ${h.depth === 1 ? 'var(--ctp-red)' : 
               h.depth === 2 ? 'var(--ctp-peach)' : 
               h.depth === 3 ? 'var(--ctp-yellow)' : 
               h.depth === 4 ? 'var(--ctp-green)' : 
               h.depth === 5 ? 'var(--ctp-blue)' : 
               'var(--ctp-mauve)'};
    `}
     >
     {h.text}
     </a>
    ))}
    </div>
  </div>

  <script>
    const open = document.getElementById('toc-open');
    const toggle = document.getElementById('toc-toggle');
    const box = document.getElementById('toc-box');

    open?.addEventListener('click', () => {
      box?.classList.toggle('hidden');
      box?.classList.toggle('flex');
    });

    toggle?.addEventListener('click', () => {
      box?.classList.add('hidden');
      box?.classList.remove('flex');
    });

    document.addEventListener('click', (e) => {
      if (!document.getElementById('toc-container')?.contains(e.target as Node)) {
        box?.classList.add('hidden');
        box?.classList.remove('flex');
      }
    });
  </script>

  <script>
    document.querySelectorAll('article pre').forEach((pre) => {
      const wrapper = document.createElement('div');
      wrapper.style.position = 'relative';
      wrapper.style.display = 'block';
      pre.parentNode?.insertBefore(wrapper, pre);
      wrapper.appendChild(pre);

      const button = document.createElement('button');
      button.textContent = '󰆏';
      button.style.fontFamily = 'NerdFontsSymbols Nerd Font';
      button.classList.add('copy-button');
      wrapper.appendChild(button);

      button.addEventListener('click', () => {
        const code = pre.querySelector('code')?.innerText ?? '';
        navigator.clipboard.writeText(code);
        button.textContent = '󰄬';
        setTimeout(() => button.textContent = '󰆏', 2000);
      });
    });
  </script>
</Base>
