---
import type { Page } from '@/types';
import { siteConfig } from '@/config';
import { render } from 'astro:content';
import { generatePageSEO } from '@/utils/seo';
import { optimizeContentImagePath, getOptimizedFormat } from '@/utils/images';
import BaseLayout from '@/layouts/BaseLayout.astro';
import TableOfContents from '@/components/TableOfContents.astro';
import Lightbox from '@/components/Lightbox.astro';
import ImageWrapper from '@/components/ImageWrapper.astro';

export interface Props {
  page: Page;
}

const { page } = Astro.props;

// No need for dynamic image import - ImageWrapper handles this

// Render the page content
const { Content, headings } = await render(page);

// Generate SEO data
const seoData = generatePageSEO(page, Astro.url.href);

// Generate table of contents from headings using configurable depth
const maxDepth = siteConfig.tableOfContents.depth;
const toc = headings.filter(h => h.depth >= 2 && h.depth <= maxDepth);

// Check if TOC should be shown - global setting, then hideTOC frontmatter, then showTOC frontmatter (default true for pages)
const hideTOC = page.data.hideTOC === true;
const showTOC = page.data.showTOC !== undefined ? page.data.showTOC : true;
const shouldShowTOC = siteConfig.tableOfContents.enabled && !hideTOC && showTOC && toc.length > 0;

// Generate structured data
const structuredData = {
  '@context': 'https://schema.org',
  '@type': 'WebPage',
  name: page.data.title,
  description: page.data.description,
  url: Astro.url.href,
  isPartOf: {
    '@type': 'WebSite',
    name: siteConfig.title,
    url: siteConfig.site
  },
  author: {
    '@type': 'Person',
    name: siteConfig.author
  }
};
---

<BaseLayout seoData={seoData}>
  <Fragment slot="head">
    <!-- Structured Data -->
    <script type="application/ld+json" set:html={JSON.stringify(structuredData)} />

    <!-- Preload page image if exists -->
    {page.data.image && typeof page.data.image === 'string' && !page.data.image.startsWith('http') && (() => {
      // Use optimizeContentImagePath to handle folder-based and file-based pages
      const optimizedPath = optimizeContentImagePath(page.data.image, 'pages', page.id, page.id);
      return (
        <link
          rel="preload"
          as="image"
          href={optimizedPath}
          fetchpriority="high"
        />
      );
    })()}
  </Fragment>

  <div class="py-8 relative">
    <div class="mx-auto px-4 sm:px-6 lg:px-8 relative" style={`max-width: ${siteConfig.layout.contentWidth}`}>
      <!-- Page content -->
      <article class={`bg-primary-50 dark:bg-primary-900 rounded-lg border border-primary-200 dark:border-primary-700 shadow-sm ${page.data.image ? 'overflow-hidden' : ''}`}>
        {page.data.image && (() => {
          // Process image path similar to PostLayout
          let rawImage = page.data.image;
          if (Array.isArray(rawImage)) {
            rawImage = rawImage[0];
          }
          
          // Clean Obsidian brackets
          let cleanImagePath = typeof rawImage === 'string' ? rawImage : '';
          if (cleanImagePath.startsWith('[[') && cleanImagePath.endsWith(']]')) {
            cleanImagePath = cleanImagePath.slice(2, -2);
          }
          
          // Determine src and basePath for ImageWrapper
          let imageSrc = cleanImagePath;
          let imageBasePath = '';
          
          if (typeof cleanImagePath === 'string' && cleanImagePath.startsWith('http')) {
            // External URL - pass as-is
            imageSrc = cleanImagePath;
            imageBasePath = '';
          } else {
            // Detect folder-based vs file-based: if image path starts with 'attachments/',
            // it's a single-file page (shared attachments folder)
            const isFileBased = typeof cleanImagePath === 'string' && cleanImagePath.startsWith('attachments/');
            
            if (isFileBased) {
              // Single-file page - remove attachments/ prefix
              imageSrc = cleanImagePath.replace('attachments/', '');
              imageBasePath = '/pages/attachments/';
            } else {
              // Folder-based page - sync script copies images to page folder root
              // Remove 'images/' or 'attachments/' prefixes if present (sync script removes them)
              if (cleanImagePath.startsWith('images/') || cleanImagePath.startsWith('attachments/')) {
                imageSrc = cleanImagePath.replace(/^(images|attachments)\//, '');
              } else {
                imageSrc = cleanImagePath;
              }
              // Safety check: ensure page.id exists before using it
              if (page.id) {
                imageBasePath = `/pages/${page.id}/`;
              } else {
                // Fallback to attachments directory if page.id is undefined
                imageBasePath = '/pages/attachments/';
              }
            }
          }
          
          // Convert to WebP if applicable (sync-images.js creates WebP versions)
          imageSrc = getOptimizedFormat(imageSrc);
          
          return (
            <div class="h-40 sm:h-48 md:h-56 lg:h-64 overflow-hidden rounded-t-lg bg-primary-100 dark:bg-primary-800">
              <ImageWrapper
                src={imageSrc}
                basePath={imageBasePath}
                alt={page.data.imageAlt || `Featured image for page: ${page.data.title}`}
                class="w-full h-full object-cover"
                width={800}
                height={450}
                format="webp"
                quality={85}
                loading="eager"
                fetchpriority="high"
              />
            </div>
          );
        })()}

        <!-- Page content wrapper -->
        <div class={`p-6 ${page.data.image ? 'rounded-b-lg' : 'rounded-lg'}`}>
          <!-- Page header -->
          <header class="mb-4">
            <h1 class="text-xl font-bold text-primary-900 dark:text-primary-50 mb-6 leading-tight">
              {page.data.title}
            </h1>
          </header>

          <!-- Page content -->
          <div class="prose dark:prose-dark max-w-none" id="page-content">
            <Content />
          </div>
        </div>
      </article>

      <!-- Desktop TOC - floats to the right of the content container -->
      {shouldShowTOC && (
        <div class="hidden xl:block absolute top-0 left-full ml-1 w-[280px] h-full">
          <div class="sticky top-24 pb-6" id="toc">
            <TableOfContents headings={toc} />
          </div>
        </div>
      )}
    </div>
  </div>

  <!-- Lightbox is handled globally by BaseLayout -->

  <Fragment slot="scripts">
    <script>
      // Initialize lightbox functionality for images
      document.addEventListener('DOMContentLoaded', () => {
        function initializeLightbox() {
          const images = document.querySelectorAll('img');
          images.forEach((img, index) => {
            // Skip images that are already clickable (like in galleries)
            if (img.closest('a') || img.closest('.image-grid')) {
              return;
            }

            // Make image clickable
            img.style.cursor = 'pointer';
            img.addEventListener('click', () => {
              // Dispatch custom event to open lightbox
              window.dispatchEvent(new CustomEvent('openLightbox', {
                detail: { index }
              }));
            });
          });
        }

        // Initialize lightbox after a short delay to ensure images are loaded
        setTimeout(initializeLightbox, 200);
      });
      // Remove duplicate H1 from page content (since we render it in header)
      document.addEventListener('DOMContentLoaded', function() {
        const pageContent = document.getElementById('page-content');
        if (pageContent) {
          const firstH1 = pageContent.querySelector('h1');
          if (firstH1) {
            firstH1.remove();
          }
        }
      });

      // Process content after DOM loads
      document.addEventListener('DOMContentLoaded', function() {
        // Initialize image grid layouts (fallback for browsers without :has() support)
        function initializeImageGrids() {
          // Check if browser supports :has() selector
          const supportsHas = CSS.supports('selector(:has(img))');

          if (supportsHas) {
            // Browser supports :has(), CSS will handle it automatically
            return;
          }

          // Fallback for browsers without :has() support
          const paragraphs = document.querySelectorAll('.prose p');

          paragraphs.forEach(p => {
            const images = p.querySelectorAll('img, picture');
            const textNodes = Array.from(p.childNodes).filter((node) => {
              return node.nodeType === Node.TEXT_NODE && (node.textContent || '').trim() !== '';
            });
            const otherElements = Array.from(p.childNodes).filter((node) => {
              return node.nodeType === Node.ELEMENT_NODE && !['IMG', 'PICTURE', 'BR'].includes(((node as Element).tagName || ''));
            });

            // Only process if paragraph contains 2+ images and no other meaningful content
            if (images.length >= 2 && textNodes.length === 0 && otherElements.length === 0) {
              // Remove any existing image-grid classes first
              p.classList.remove('image-grid', 'image-grid-2', 'image-grid-3', 'image-grid-4', 'image-grid-5', 'image-grid-6');

              // Add the appropriate grid class
              const gridClass = `image-grid-${Math.min(images.length, 6)}`;
              p.classList.add('image-grid', gridClass);
            }
          });
        }

        // Initialize image grids
        initializeImageGrids();

        // Process all external links in content to open in new tabs (including reference links)
        const allLinks = document.querySelectorAll('.prose a[href]');
        allLinks.forEach(link => {
          const href = link.getAttribute('href');
          if (href && (href.startsWith('http://') || href.startsWith('https://'))) {
            // Skip if already has target attribute (e.g., manually set)
            if (!link.hasAttribute('target')) {
              link.setAttribute('target', '_blank');
            }
          }
        });

        // Wrap tables in responsive containers for better mobile experience
        const tables = document.querySelectorAll('.prose table');
        tables.forEach((table) => {
          if (table.parentElement && !table.parentElement.classList.contains('table-wrapper')) {
            const wrapper = document.createElement('div');
            wrapper.className = 'table-wrapper';
            // Let CSS handle the styling instead of inline styles

            if (table.parentNode) {
              (table.parentNode as Node & ParentNode).insertBefore(wrapper, table);
            }
            wrapper.appendChild(table);

            // Reset table margin since wrapper handles it
            (table as unknown as HTMLElement).style.margin = '0';
          }
        });


      });
    </script>
  </Fragment>
</BaseLayout>