<?php

/**
 * @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
 */

$wrapper_attributes = get_block_wrapper_attributes([
  'class' => 'wp-block-documentation'
]);
$sections = isset($attributes['sections']) ? $attributes['sections'] : [];
$current_section = isset($attributes['currentSection']) ? $attributes['currentSection'] : '';

// Get the InnerBlocks content
$content = do_blocks($content);
?>

<div <?php echo $wrapper_attributes; ?>>
  <div class="documentation-layout">
    <div class="documentation-nav">
      <button class="documentation-search-bar">
        <!-- fake search bar gonna open a modal -->
        <svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M10 10L7.40161 7.40161M7.40161 7.40161C8.10487 6.69836 8.49996 5.74453 8.49996 4.74998C8.49996 3.75542 8.10487 2.8016 7.40161 2.09834C6.69836 1.39509 5.74453 1 4.74998 1C3.75542 1 2.8016 1.39509 2.09834 2.09834C1.39509 2.8016 1 3.75542 1 4.74998C1 5.74453 1.39509 6.69836 2.09834 7.40161C2.8016 8.10487 3.75542 8.49996 4.74998 8.49996C5.74453 8.49996 6.69836 8.10487 7.40161 7.40161Z" stroke="#172B4D" stroke-opacity="0.72" stroke-linecap="round" stroke-linejoin="round" />
        </svg>

        <span>Search</span>

      </button>
      <div class="documentation-sections">
        <?php foreach ($sections as $section) : ?>
          <div class="nav-section">
            <div class="section-header">
              <?php echo $section['svg']; ?>
              <h3><span class="section-title"><?php echo esc_html($section['title']); ?></span></h3>
              <svg class="chevron-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z" />
              </svg>
            </div>
            <div class="section-content">
              <nav>
                <?php foreach ($section['links'] as $link) : ?>
                  <a href="<?php echo esc_url($link['url']); ?>" class="nav-item <?php echo $current_section === $link['id'] ? 'active' : ''; ?>"
                    data-section="<?php echo esc_attr($link['id']); ?>">
                    <?php echo esc_html($link['title']); ?>
                  </a>
                <?php endforeach; ?>
              </nav>
            </div>
          </div>
        <?php endforeach; ?>
      </div>
    </div>

    <div class="documentation-content">
      <?php echo $content; ?>
    </div>

    <div class="documentation-toc">
      <h3><?php esc_html_e('On this page', 'orphic-ui'); ?></h3>
      <div class="toc-content">
        <?php
        // Extract headings from content and generate TOC
        if (!empty($content)) {
          preg_match_all('/<h([1-6])[^>]*>(.*?)<\/h[1-6]>/i', $content, $matches);
          if (!empty($matches[0])) {
            foreach ($matches[2] as $index => $title) {
              $level = $matches[1][$index];
              $anchor = sanitize_title($title);
              echo sprintf(
                '<a href="#%s" style="margin-left: %dpx">%s</a>',
                esc_attr($anchor),
                ($level - 1) * 12,
                esc_html($title)
              );
            }
          }
        }
        ?>
      </div>
    </div>

    <!-- Mobile Navigation Button -->
    <button class="documentation-nav-toggle" aria-label="<?php esc_attr_e('Toggle navigation menu', 'orphic-ui'); ?>">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
        <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
      </svg>
    </button>

    <!-- Mobile Navigation Panel -->
    <div class="documentation-nav-mobile">
      <?php foreach ($sections as $section) : ?>
        <div class="nav-section">

          <h3>

            <?php echo $section['svg']; ?>
            <?php echo esc_html($section['title']); ?>
          </h3>
          <nav>
            <?php foreach ($section['links'] as $link) : ?>
              <a
                href="<?php echo esc_url($link['url']); ?>"
                class="nav-item <?php echo $current_section === $link['id'] ? 'active' : ''; ?>">

                <?php echo esc_html($link['title']); ?>
              </a>
            <?php endforeach; ?>
          </nav>
        </div>
      <?php endforeach; ?>
    </div>
  </div>
</div>