---
import { siteConfig } from '../config';
import ThemeToggle from './ThemeToggle.astro';
import Icon from './Icon.astro';

const showProfilePicture = siteConfig.profilePicture.enabled && siteConfig.profilePicture.placement === 'header';
const profilePicture = siteConfig.profilePicture;

// Style classes for profile picture in header
const getHeaderProfilePictureClasses = (style: string) => {
  switch (style) {
    case 'circle': return 'w-8 h-8 rounded-full object-cover border-2 border-primary-200 dark:border-primary-700';
    case 'square': return 'w-8 h-8 rounded-lg object-cover border-2 border-primary-200 dark:border-primary-700';
    default: return 'h-8 object-contain'; // none - height constrained, width flexible
  }
};

// Check if shortcut is defined and not empty
const hasShortcut = siteConfig.commandPalette.shortcut && siteConfig.commandPalette.shortcut.trim();

// Extract the key from the shortcut (e.g., 'ctrl+k' -> 'K')
const shortcutKey = hasShortcut ? siteConfig.commandPalette.shortcut.split('+').pop()?.toUpperCase() || 'K' : '';

// Check if all command palette sections are disabled
const allSectionsDisabled = !siteConfig.commandPalette.sections.quickActions && 
                            !siteConfig.commandPalette.sections.pages && 
                            !siteConfig.commandPalette.sections.social;

// Choose icon based on whether all sections are disabled (for no shortcut case)
const paletteIcon = allSectionsDisabled ? 'search' : 'command';
---

<header id="main-header" class="sticky top-0 z-40 w-full bg-white dark:bg-primary-950 transition-shadow duration-200">
  <div class="mx-auto px-4 sm:px-6 lg:px-8" style={`max-width: ${siteConfig.layout.contentWidth}`}>
    <div class="flex items-center justify-between h-16">
      <!-- Logo / Site Title / Profile Picture -->
      <div class="flex items-center">
        <a href="/" class="hover:opacity-75 transition-opacity">
          {showProfilePicture ? (
            <img
              src={profilePicture.image}
              alt={profilePicture.alt}
              class={getHeaderProfilePictureClasses(profilePicture.style)}
            />
          ) : (
            <span class="font-semibold text-primary-900 dark:text-primary-50">
              {siteConfig.title}
            </span>
          )}
        </a>
      </div>

      <!-- Center area with smart navigation -->
      <div class={`flex-1 flex items-center ${ siteConfig.navigation.style === 'minimal' ? 'justify-end' : 'justify-center' }`}> 
        <!-- Smart Navigation (single system with style variants) -->
        {siteConfig.navigation.showNavigation && (  
    <nav class={`nav-desktop-audit-visible flex items-center ${  
      siteConfig.navigation.style === 'minimal' ? `space-x-5 ${siteConfig.featureButton === 'none' && !siteConfig.commandPalette.enabled ? '' : 'mr-4'}` : 'space-x-5' }`} aria-label="Main navigation">
            {siteConfig.navigation.pages.map((page, index) => {
              const hasChildren = page.children && page.children.length > 0;
              const hasUrl = page.url && page.url.trim() !== '';
              
              if (hasChildren) {
                // Parent item with children - dropdown menu
                return (
                  <div class="relative nav-dropdown-container" data-nav-index={index}>
                    {hasUrl ? (
                      // Clickable parent with dropdown
                      <a 
                        href={page.url}
                        class={
                          siteConfig.navigation.style === 'minimal' 
                            ? `flex items-center space-x-1 text-xs font-normal transition-colors hover:text-highlight-600 dark:hover:text-highlight-400 text-primary-500 dark:text-primary-400`
                            : `flex items-center space-x-1 text-sm font-medium transition-colors hover:text-highlight-600 dark:hover:text-highlight-400 text-primary-600 dark:text-primary-300`
                        }
                        target={page.url.startsWith('http') ? '_blank' : undefined}
                        aria-label={`Navigate to ${page.title}`}
                        aria-haspopup="true"
                        aria-expanded="false"
                      >
                        <span>{siteConfig.navigation.style === 'minimal' ? page.title.toLowerCase() : page.title}</span>
                        {page.url.startsWith('http') && (
                          <Icon name="external-link" class="w-3 h-3 text-primary-400 dark:text-primary-500" />
                        )}
                        <Icon name="chevron-down" class="w-3 h-3 ml-1 text-primary-400 dark:text-primary-500" title={page.title} />
                      </a>
                    ) : (
                      // Dropdown-only parent (non-clickable trigger)
                      <button
                        class={
                          siteConfig.navigation.style === 'minimal' 
                            ? `flex items-center space-x-1 text-xs font-normal transition-colors hover:text-highlight-600 dark:hover:text-highlight-400 text-primary-500 dark:text-primary-400`
                            : `flex items-center space-x-1 text-sm font-medium transition-colors hover:text-highlight-600 dark:hover:text-highlight-400 text-primary-600 dark:text-primary-300`
                        }
                        aria-label={`${page.title} menu`}
                        aria-haspopup="true"
                        aria-expanded="false"
                      >
                        <span>{siteConfig.navigation.style === 'minimal' ? page.title.toLowerCase() : page.title}</span>
                        <Icon name="chevron-down" class="w-3 h-3 ml-1 text-primary-400 dark:text-primary-500" title={page.title} />
                      </button>
                    )}
                    {/* Dropdown menu */}
                    <div class="nav-dropdown-menu absolute top-full left-0 mt-1 hidden bg-white dark:bg-primary-900 border border-primary-200 dark:border-primary-700 rounded-lg shadow-lg py-2 min-w-[200px] z-50">
                      {page.children.map(child => (
                        <a
                          href={child.url || '#'}
                          class="block px-4 py-2 text-sm text-primary-700 dark:text-primary-200 hover:text-highlight-600 dark:hover:text-highlight-400 transition-colors"
                          target={child.url?.startsWith('http') ? '_blank' : undefined}
                          aria-label={`Navigate to ${child.title}`}
                        >
                          {child.title}
                          {child.url?.startsWith('http') && (
                            <Icon name="external-link" class="w-3 h-3 ml-2 inline text-primary-400 dark:text-primary-500" />
                          )}
                        </a>
                      ))}
                    </div>
                  </div>
                );
              } else {
                // Regular navigation item without children
                return (
                  <a 
                    href={page.url || '#'}
                    class={
                      siteConfig.navigation.style === 'minimal' 
                        ? `flex items-center space-x-1 text-xs font-normal transition-colors hover:text-highlight-600 dark:hover:text-highlight-400 text-primary-500 dark:text-primary-400`
                        : `flex items-center space-x-1 text-sm font-medium transition-colors hover:text-highlight-600 dark:hover:text-highlight-400 text-primary-600 dark:text-primary-300`
                    }
                    target={page.url?.startsWith('http') ? '_blank' : undefined}
                    aria-label={`Navigate to ${page.title}`}
                  >
                    <span>{siteConfig.navigation.style === 'minimal' ? page.title.toLowerCase() : page.title}</span>
                    {page.url?.startsWith('http') && (
                      <Icon name="external-link" class="w-3 h-3 text-primary-400 dark:text-primary-500" />
                    )}
                  </a>
                );
              }
            })}
          </nav>
        )}
      </div>

      <!-- Action buttons -->
      <div class="flex items-center space-x-4">
        <!-- Feature Button -->
        {siteConfig.featureButton === "mode" && <ThemeToggle />}
        {siteConfig.featureButton === "graph" && siteConfig.postOptions.graphView.enabled && (
          <button
            id="header-graph-button"
            class="p-2 text-primary-500 dark:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-800 rounded-lg transition-colors duration-200"
            aria-label="Open graph view"
          >
            <Icon name="git-fork" class="w-5 h-5" />
          </button>
        )}
        {siteConfig.featureButton === "theme" && (
          <button
            id="header-theme-button"
            class="p-2 text-primary-500 dark:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-800 rounded-lg transition-colors duration-200"
            aria-label="Change theme"
          >
            <Icon name="palette" class="w-5 h-5" />
          </button>
        )}
        <!-- Command palette trigger -->
        {siteConfig.commandPalette.enabled && (
          hasShortcut ? (
            <button
              id="command-palette-trigger"
              class="flex items-center space-x-2 px-3 py-2 text-sm text-primary-500 dark:text-primary-400 bg-primary-50 dark:bg-primary-800 rounded-lg hover:bg-primary-100 dark:hover:bg-primary-700 transition-colors"
              aria-label="Open command palette"
            >
              <Icon name={paletteIcon} class="w-5 h-5" />
              <kbd class="text-xs font-medium text-primary-600 dark:text-primary-300">
                {shortcutKey}
              </kbd>
            </button>
          ) : (
            <button
              id="command-palette-trigger"
              class="p-2 text-primary-500 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 transition-colors"
              aria-label="Open command palette"
            >
              <Icon name={paletteIcon} class="w-5 h-5" />
            </button>
          )
        )}

        <!-- Mobile menu button (if navigation and mobile menu are enabled) -->
        {siteConfig.navigation.showNavigation && siteConfig.navigation.showMobileMenu && (
          <button
            id="mobile-menu-toggle"
            class="md:hidden p-2 text-primary-500 dark:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-800 rounded-lg transition-colors"
            aria-label="Toggle mobile navigation menu"
            aria-expanded="false"
          >
            <Icon name="menu" class="w-5 h-5 menu-icon" />
            <Icon name="x" class="w-5 h-5 close-icon hidden" />
          </button>
        )}
      </div>
    </div>

    <!-- Mobile navigation menu -->
    {siteConfig.navigation.showNavigation && siteConfig.navigation.showMobileMenu && (
      <div id="mobile-menu" class="md:hidden hidden py-4 border-t border-primary-200 dark:border-primary-700" role="dialog"
          aria-modal="true"
          aria-label="Mobile navigation menu">
        <nav class="flex flex-col space-y-1">
          {siteConfig.navigation.pages.map((page, index) => {
            const hasChildren = page.children && page.children.length > 0;
            const hasUrl = page.url && page.url.trim() !== '';
            
            if (hasChildren) {
              // Parent item with children - accordion
              return (
                <div class="mobile-nav-parent" data-mobile-nav-index={index}>
                  <div class="flex items-center justify-between">
                    {hasUrl ? (
                      // Clickable parent with expand button
                      <a 
                        href={page.url}
                        class="flex-1 flex items-center justify-between px-3 py-2 text-primary-600 dark:text-primary-300 hover:text-highlight-600 dark:hover:text-highlight-400 hover:bg-primary-50 dark:hover:bg-primary-800 transition-colors font-medium rounded-md"
                        target={page.url.startsWith('http') ? '_blank' : undefined}
                        aria-label={`Navigate to ${page.title}`}
                      >
                        <span>{page.title}</span>
                        {page.url.startsWith('http') && (
                          <Icon name="external-link" class="w-3 h-3 text-primary-400 dark:text-primary-500" />
                        )}
                      </a>
                    ) : (
                      // Non-clickable parent (just title)
                      <span class="flex-1 px-3 py-2 text-primary-600 dark:text-primary-300 font-medium">
                        {page.title}
                      </span>
                    )}
                    <button
                      class="mobile-nav-toggle px-3 py-2 text-primary-500 dark:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-800 rounded-md transition-colors"
                      aria-label={`Toggle ${page.title} submenu`}
                      aria-expanded="false"
                      data-toggle-index={index}
                    >
                      <Icon name="chevron-down" class="w-4 h-4 transition-transform" title={page.title} />
                    </button>
                  </div>
                  {/* Children menu (collapsed by default) */}
                  <div class="mobile-nav-children hidden pl-4 pt-1">
                    {page.children.map(child => (
                      <a
                        href={child.url || '#'}
                        class="block px-3 py-2 text-sm text-primary-600 dark:text-primary-300 hover:text-highlight-600 dark:hover:text-highlight-400 hover:bg-primary-50 dark:hover:bg-primary-800 transition-colors font-medium rounded-md"
                        target={child.url?.startsWith('http') ? '_blank' : undefined}
                        aria-label={`Navigate to ${child.title}`}
                      >
                        {child.title}
                        {child.url?.startsWith('http') && (
                          <Icon name="external-link" class="w-3 h-3 ml-2 inline text-primary-400 dark:text-primary-500" />
                        )}
                      </a>
                    ))}
                  </div>
                </div>
              );
            } else {
              // Regular navigation item without children
              return (
                <a 
                  href={page.url || '#'}
                  class="flex items-center justify-between px-3 py-2 text-primary-600 dark:text-primary-300 hover:text-highlight-600 dark:hover:text-highlight-400 hover:bg-primary-50 dark:hover:bg-primary-800 transition-colors font-medium rounded-md"
                  target={page.url?.startsWith('http') ? '_blank' : undefined}
                  aria-label={`Navigate to ${page.title}`}
                >
                  <span>{page.title}</span>
                  {page.url?.startsWith('http') && (
                    <Icon name="external-link" class="w-3 h-3 text-primary-400 dark:text-primary-500" />
                  )}
                </a>
              );
            }
          })}
        </nav>
      </div>
    )}
  </div>
</header>

<script>
  // Mobile menu toggle
  document.addEventListener('DOMContentLoaded', () => {
    const menuToggle = document.getElementById('mobile-menu-toggle');
    const mobileMenu = document.getElementById('mobile-menu');

    if (menuToggle && mobileMenu) {
      menuToggle.addEventListener('click', () => {
        mobileMenu.classList.toggle('hidden');

        // Update menu icon and ARIA attribute
        const menuIcon = menuToggle.querySelector('.menu-icon');
        const closeIcon = menuToggle.querySelector('.close-icon');
        if (menuIcon && closeIcon) {
          if (mobileMenu.classList.contains('hidden')) {
            menuIcon.classList.remove('hidden');
            closeIcon.classList.add('hidden');
            menuToggle.setAttribute('aria-expanded', 'false');
          } else {
            menuIcon.classList.add('hidden');
            closeIcon.classList.remove('hidden');
            menuToggle.setAttribute('aria-expanded', 'true');
          }
        }
      });
    }

    // Desktop dropdown menu hover behavior
    const dropdownContainers = document.querySelectorAll('.nav-dropdown-container');
    let hoverTimeout: ReturnType<typeof setTimeout> | null = null;

    dropdownContainers.forEach(container => {
      const trigger = container.querySelector('a, button');
      const dropdown = container.querySelector('.nav-dropdown-menu') as HTMLElement;
      
      if (!trigger || !dropdown) return;

      const showDropdown = () => {
        if (hoverTimeout) {
          clearTimeout(hoverTimeout);
          hoverTimeout = null;
        }
        dropdown.classList.remove('hidden');
        trigger.setAttribute('aria-expanded', 'true');
      };

      const hideDropdown = () => {
        hoverTimeout = window.setTimeout(() => {
          dropdown.classList.add('hidden');
          trigger.setAttribute('aria-expanded', 'false');
        }, 150); // Small delay to prevent accidental closes
      };

      // Show on hover
      container.addEventListener('mouseenter', showDropdown);
      container.addEventListener('mouseleave', hideDropdown);

      // Keyboard navigation
      trigger.addEventListener('keydown', (e: KeyboardEvent) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          if (dropdown.classList.contains('hidden')) {
            showDropdown();
          } else {
            hideDropdown();
          }
        } else if (e.key === 'Escape') {
          hideDropdown();
          trigger.focus();
        }
      });
    });

    // Mobile accordion functionality
    const mobileNavToggles = document.querySelectorAll('.mobile-nav-toggle');
    mobileNavToggles.forEach(toggle => {
      toggle.addEventListener('click', () => {
        const index = toggle.getAttribute('data-toggle-index');
        const parent = toggle.closest('.mobile-nav-parent');
        const children = parent?.querySelector('.mobile-nav-children') as HTMLElement;
        const icon = toggle.querySelector('svg');
        
        if (!children || !icon) return;

        const isExpanded = !children.classList.contains('hidden');
        
        if (isExpanded) {
          children.classList.add('hidden');
          icon.classList.remove('rotate-180');
          toggle.setAttribute('aria-expanded', 'false');
        } else {
          children.classList.remove('hidden');
          icon.classList.add('rotate-180');
          toggle.setAttribute('aria-expanded', 'true');
        }
      });
    });

    // Function to close mobile menu
    function closeMobileMenu() {
      if (mobileMenu && !mobileMenu.classList.contains('hidden')) {
        mobileMenu.classList.add('hidden');
        
        // Update menu icon and ARIA attribute
        if (menuToggle) {
          const menuIcon = menuToggle.querySelector('.menu-icon');
          const closeIcon = menuToggle.querySelector('.close-icon');
          if (menuIcon && closeIcon) {
            menuIcon.classList.remove('hidden');
            closeIcon.classList.add('hidden');
            menuToggle.setAttribute('aria-expanded', 'false');
          }
        }
      }
    }

    // Close mobile menu when navigation links are clicked
    const mobileMenuLinks = mobileMenu?.querySelectorAll('nav a');
    mobileMenuLinks?.forEach(link => {
      link.addEventListener('click', () => {
        closeMobileMenu();
      });
    });

    // Make closeMobileMenu globally accessible for other components
    (window as any).closeMobileMenu = closeMobileMenu;

    // Close mobile menu when clicking outside of it
    document.addEventListener('click', (e) => {
      const target = e.target as HTMLElement;
      const isMenuToggle = target.closest('#mobile-menu-toggle');
      const isMobileMenu = target.closest('#mobile-menu');
      
      // If clicking outside the menu and toggle button, close the menu
      if (!isMenuToggle && !isMobileMenu && mobileMenu && !mobileMenu.classList.contains('hidden')) {
        closeMobileMenu();
      }
    });

    // Command palette triggers
    const triggers = [
      document.getElementById('command-palette-trigger'),
      document.getElementById('command-palette-trigger-mobile')
    ].filter(Boolean);

    triggers.forEach(trigger => {
      trigger?.addEventListener('click', () => {
        const event = new CustomEvent('openCommandPalette');
        window.dispatchEvent(event);
      });
    });

    // Theme toggle and command palette shortcuts are handled in BaseLayout

    // Header feature button handlers
    const headerGraphButton = document.getElementById('header-graph-button');
    if (headerGraphButton) {
      headerGraphButton.addEventListener('click', () => {
        if ((window as any).openGraphModal) {
          (window as any).openGraphModal();
        } else {
          // Try to initialize GraphModal if it's not available
          if ((window as any).initializeGraphModal) {
            (window as any).initializeGraphModal();
            // Try again after initialization
            setTimeout(() => {
              if ((window as any).openGraphModal) {
                (window as any).openGraphModal();
              }
            }, 100);
          }
        }
      });
    }

    const headerThemeButton = document.getElementById('header-theme-button');
    if (headerThemeButton) {
      headerThemeButton.addEventListener('click', () => {
        // Check if command palette is enabled
        const commandPaletteEnabled = (window as any).siteConfig?.commandPalette?.enabled;
        
        if (commandPaletteEnabled) {
          // Use command palette for theme selection
          const event = new CustomEvent('openCommandPalette');
          window.dispatchEvent(event);
          
          // After a brief delay, trigger theme selection
          setTimeout(() => {
            const commandPalette = (window as any).commandPaletteInstance;
            if (commandPalette && commandPalette.executeAction) {
              commandPalette.executeAction('change-theme');
            }
          }, 100);
        } else {
          // Use standalone theme selector
          const themeSelector = (window as any).themeSelectorInstance;
          if (themeSelector && themeSelector.open) {
            themeSelector.open();
          }
        }
      });
    }

    // Nav links: remove from tab order when viewport < md so hidden nav is not focusable
    function updateNavLinksTabIndex() {
      const nav = document.querySelector('.nav-desktop-audit-visible');
      if (!nav) return;
      const links = nav.querySelectorAll('a');
      const narrow = window.innerWidth < 768;
      links.forEach((link: HTMLAnchorElement) => {
        if (narrow) link.setAttribute('tabindex', '-1');
        else link.removeAttribute('tabindex');
      });
    }
    updateNavLinksTabIndex();
    window.addEventListener('resize', updateNavLinksTabIndex);

    // Header shadow on scroll
    const header = document.getElementById('main-header');
    if (header) {
      let isScrolled = false;
      
      
      const updateHeaderShadow = () => {
        const scrollY = window.scrollY;
        const shouldHaveShadow = scrollY > 0;
        
        if (shouldHaveShadow !== isScrolled) {
          isScrolled = shouldHaveShadow;
          if (shouldHaveShadow) {
            header.classList.add('shadow-sm');
          } else {
            header.classList.remove('shadow-sm');
          }
        }
      };

      // Initial check
      updateHeaderShadow();
      
      // Listen for scroll events
      window.addEventListener('scroll', updateHeaderShadow, { passive: true });
    }
  });
</script>

<style>
  /* Keep nav in DOM for audit innerText; visually hidden on small viewports; tab order fixed via JS */
  .nav-desktop-audit-visible {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
  }
  @media (min-width: 768px) {
    .nav-desktop-audit-visible {
      position: static;
      width: auto;
      height: auto;
      overflow: visible;
      clip: auto;
      clip-path: none;
    }
  }

  /* Dropdown menu styles */
  .nav-dropdown-container {
    position: relative;
  }

  .nav-dropdown-menu {
    min-width: 200px;
    max-width: 300px;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  }

  .dark .nav-dropdown-menu {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.2);
  }

  /* Mobile accordion styles */
  .mobile-nav-parent {
    margin-bottom: 0.25rem;
  }

  .mobile-nav-children {
    padding-left: 1rem;
    margin-top: 0.25rem;
    border-left: 2px solid rgb(var(--color-primary-200));
  }

  .dark .mobile-nav-children {
    border-left-color: rgb(var(--color-primary-700));
  }

  .mobile-nav-toggle svg {
    transition: transform 0.2s ease;
  }

  .mobile-nav-toggle svg.rotate-180 {
    transform: rotate(180deg);
  }

  /* Command palette grouped navigation styles */
  .command-palette-nav-group {
    margin-bottom: 0.5rem;
  }
</style>