---
import { getCollection, getEntry, render } from 'astro:content';
import { siteConfig } from '@/config';
import { generatePostsListSEO } from '@/utils/seo';
import { shouldShowContent } from '@/utils/markdown';
import { hasDocCategories, getDocCategories, groupDocsByCategory } from '@/utils/categories';
import BaseLayout from '@/layouts/BaseLayout.astro';
import PageLayout from '@/layouts/PageLayout.astro';
import DocumentationCard from '@/components/DocumentationCard.astro';
import TableOfContents from '@/components/TableOfContents.astro';
import Icon from '@/components/Icon.astro';

// Check if docs are enabled and handle fallback
let fallbackPage = null;

if (!siteConfig.optionalContentTypes.docs) {
  // Check for fallback page in pages collection
  try {
    fallbackPage = await getEntry('pages', 'docs');
    if (fallbackPage) {
      // PageLayout will handle the rendering
    } else {
      return Astro.redirect('/404');
    }
  } catch (error) {
    // No fallback page found, redirect to 404
    return Astro.redirect('/404');
  }
}

// Get all docs
const allDocs = await getCollection('docs');
const isDev = import.meta.env.DEV;

// Filter documentation
const visibleDocs = allDocs.filter(doc => shouldShowContent(doc, isDev));

// Get docs page content from special collection
let docsPageContent = null;
let docsPageHideTOC = false;
let DocsPageContent = null;

try {
  docsPageContent = await getEntry('special', 'docs');
  if (docsPageContent) {
    const { Content } = await render(docsPageContent);
    DocsPageContent = Content;
    docsPageHideTOC = docsPageContent.data.hideTOC === true;
  }
} catch (error) {
  // Fallback to default if docs.md doesn't exist
}

// Check if any docs have categories
const docsHaveCategories = hasDocCategories(visibleDocs);

// Group docs by category or list them without categories
let docsByCategory: Record<string, typeof visibleDocs>;
let sortedCategories: string[];
let tocHeadings: any[];
let shouldShowTOC: boolean;

// Always group docs by category (creates "Unsorted" for docs without categories)
docsByCategory = groupDocsByCategory(visibleDocs);
sortedCategories = Object.keys(docsByCategory).sort();

if (docsHaveCategories) {
  // Generate TOC headings from categories
  tocHeadings = sortedCategories.map(category => ({
    depth: 2,
    slug: `category-${category.toLowerCase().replace(/\s+/g, '-')}`,
    text: category
  }));
} else {
  // No real categories - just list docs by order without TOC headings
  tocHeadings = [];
}

// Show TOC if not hidden and there are headings to show
shouldShowTOC = !docsPageHideTOC && tocHeadings.length > 0;


// Generate SEO data
const seoData = generatePostsListSEO(import.meta.env.SITE || '', undefined);
seoData.title = docsPageContent?.data.title ? `${docsPageContent.data.title} | ${siteConfig.title}` : `Documentation | ${siteConfig.title}`;
seoData.description = docsPageContent?.data.description || `Browse all documentation on ${siteConfig.title}`;
seoData.noIndex = (docsPageContent?.data as any)?.noIndex || false;
---

{fallbackPage ? (
  <PageLayout page={fallbackPage as any} />
) : (
<BaseLayout seoData={seoData}>
  <div class="py-8 relative">
    <div class="mx-auto px-4 sm:px-6 lg:px-8" style={`max-width: ${siteConfig.layout.contentWidth}`}>
      <!-- Page header -->
      <header class="mb-8">
        <h1 class="text-lg font-bold text-primary-900 dark:text-primary-50 mb-3">
          {docsPageContent?.data.title || 'Documentation'}
        </h1>
        {DocsPageContent ? (
          <div class="prose prose-sm dark:prose-dark max-w-none">
            <DocsPageContent />
          </div>
        ) : (
          <p class="text-primary-600 dark:text-primary-300">
            Guides, tutorials, and reference materials
          </p>
        )}
      </header>

      <div class="relative">
        <!-- Documentation by category -->
        {sortedCategories.length > 0 ? (
          <div class="space-y-12">
            {sortedCategories.map(category => {
              const categoryId = `category-${category.toLowerCase().replace(/\s+/g, '-')}`;
              const contentId = `${categoryId}-content`;
              const toggleId = `${categoryId}-toggle`;
              const chevronId = `${categoryId}-chevron`;
              
              return (
              <section id={categoryId} class="category-section">
                {docsHaveCategories && (
                  <div class="mb-6 flex items-center justify-between group">
                    <h2 class="text-lg font-semibold text-primary-900 dark:text-primary-50 group-hover:text-highlight-600 dark:group-hover:text-highlight-400 transition-colors duration-200">
                      <a href={`#${categoryId}`} class="anchor-link text-primary-900 dark:text-primary-50 group-hover:text-highlight-600 dark:group-hover:text-highlight-400 no-underline transition-colors duration-200" aria-label="Link to this section">
                        {category}
                      </a>
                    </h2>
                    <button
                      id={toggleId}
                      class="ml-2 flex items-center cursor-pointer p-1"
                      aria-expanded="true"
                      aria-controls={contentId}
                      aria-label="Toggle category"
                    >
                      <span id={chevronId} class="transition-transform duration-300 ease-in-out rotate-0">
                        <Icon
                          name="chevron-down"
                          class="w-5 h-5 text-primary-500 dark:text-primary-400"
                        />
                      </span>
                    </button>
                  </div>
                )}

                <div id={contentId} class="category-content overflow-hidden transition-all duration-300 ease-in-out">
                  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {docsByCategory[category].map((doc, index) => (
                      <DocumentationCard
                        documentation={doc}
                        eager={index < 6}
                        context="docs"
                      />
                    ))}
                  </div>
                </div>
              </section>
            )})}
          </div>
        ) : (
          <div class="text-center py-12">
            <Icon name="book-open" class="w-12 h-12 text-primary-300 dark:text-primary-600 mx-auto mb-4" />
            <h3 class="text-lg font-medium text-primary-900 dark:text-primary-50 mb-2">
              No documentation yet
            </h3>
            <p class="text-primary-600 dark:text-primary-300">
              Check back soon for guides and tutorials!
            </p>
          </div>
        )}

        <!-- Desktop TOC - floats to the right of the content container, aligned with first documentation section -->
        {shouldShowTOC && (
          <div class="hidden xl:block absolute top-0 left-full ml-8 w-64 h-full">
            <div class="sticky top-24 pb-6" id="toc">
              <TableOfContents headings={tocHeadings} />
            </div>
          </div>
        )}
      </div>
    </div>
  </div>

  <Fragment slot="scripts">
    <script>
      // Initialize collapsible category sections
      function initializeCollapsibleCategories() {
        const categorySections = document.querySelectorAll('.category-section');
        
        categorySections.forEach(section => {
          const toggle = section.querySelector('button[id$="-toggle"]') as HTMLButtonElement;
          const content = section.querySelector('.category-content') as HTMLElement;
          const chevron = section.querySelector('span[id$="-chevron"]') as HTMLElement;
          
          if (!toggle || !content || !chevron) return;
          
          // Remove existing event listeners by cloning
          const newToggle = toggle.cloneNode(true) as HTMLButtonElement;
          toggle.parentNode?.replaceChild(newToggle, toggle);
          
          // Get fresh references
          const freshToggle = section.querySelector('button[id$="-toggle"]') as HTMLButtonElement;
          const freshContent = section.querySelector('.category-content') as HTMLElement;
          const freshChevron = section.querySelector('span[id$="-chevron"]') as HTMLElement;
          
          if (!freshToggle || !freshContent || !freshChevron) return;
          
          // Initialize with expanded state
          freshContent.style.maxHeight = freshContent.scrollHeight + 'px';
          freshContent.style.opacity = '1';
          freshChevron.classList.remove('rotate-90');
          freshChevron.classList.add('rotate-0');

          // Add click handler - toggle collapse/expand
          freshToggle.addEventListener('click', (e) => {
            e.preventDefault();
            e.stopPropagation();
            const isExpanded = freshToggle.getAttribute('aria-expanded') === 'true';

            if (isExpanded) {
              // Collapse - rotate chevron to point right
              freshContent.style.maxHeight = '0';
              freshContent.style.opacity = '0';
              freshContent.style.marginBottom = '0';
              freshChevron.classList.remove('rotate-0');
              freshChevron.classList.add('rotate-90');
              freshToggle.setAttribute('aria-expanded', 'false');
            } else {
              // Expand - rotate chevron to point down
              freshContent.style.maxHeight = freshContent.scrollHeight + 'px';
              freshContent.style.opacity = '1';
              freshContent.style.marginBottom = '';
              freshChevron.classList.remove('rotate-90');
              freshChevron.classList.add('rotate-0');
              freshToggle.setAttribute('aria-expanded', 'true');
            }
          });
        });
      }

      // Custom scroll behavior for documentation categories
      function initializeCategoryScroll() {
        const tocLinks = document.querySelectorAll('.toc-link');
        const categorySections = document.querySelectorAll('section[id^="category-"]');

        if (!tocLinks.length || !categorySections.length) return;

        // Enhanced highlight function for categories
        function highlightTOC() {
          let current = '';

          categorySections.forEach(section => {
            const rect = section.getBoundingClientRect();
            // More precise threshold for categories
            if (rect.top <= 120) {
              current = section.id;
            }
          });

          tocLinks.forEach(link => {
            const href = link.getAttribute('href')?.slice(1);
            if (href === current) {
              link.classList.add('active');
            } else {
              link.classList.remove('active');
            }
          });
        }

        // Smooth scroll with better positioning for categories
        tocLinks.forEach(link => {
          link.addEventListener('click', (e) => {
            e.preventDefault();
            const targetId = link.getAttribute('href')?.slice(1);
            if (!targetId) return;
            const targetElement = document.getElementById(targetId);

            if (targetElement) {
              // Better scroll positioning for categories
              const headerOffset = 80;
              const elementPosition = targetElement.getBoundingClientRect().top;
              const offsetPosition = elementPosition + window.pageYOffset - headerOffset;

              window.scrollTo({
                top: offsetPosition,
                behavior: 'smooth'
              });
            }
          });
        });

        // Initial highlight
        highlightTOC();

        // Update on scroll
        let ticking = false;
        window.addEventListener('scroll', () => {
          if (!ticking) {
            requestAnimationFrame(() => {
              highlightTOC();
              ticking = false;
            });
            ticking = true;
          }
        });
      }

      // Initialize on DOM ready
      document.addEventListener('DOMContentLoaded', () => {
        initializeCollapsibleCategories();
        initializeCategoryScroll();
      });

      // Make functions globally accessible for Swup re-initialization
      (window as any).initializeCollapsibleCategories = initializeCollapsibleCategories;
      (window as any).initializeCategoryScroll = initializeCategoryScroll;
    </script>

    <style>
      /* Category chevron rotation */
      .rotate-0 {
        transform: rotate(0deg);
      }

      .rotate-90 {
        transform: rotate(90deg);
      }
    </style>
  </Fragment>
</BaseLayout>
)}