---
// Custom Head component — extends Starlight's default Head with color-input loader
const { head } = Astro.locals.starlightRoute;
---

{head.map(({ tag: Tag, attrs, content }) => <Tag {...attrs} set:html={content} />)}

<script>
  // Load the color-input web component on the client side only
  // This avoids SSR issues with document/window not being defined
  const colorInputModule = import('color-input').catch(err => {
    console.error('Failed to load color-input:', err);
  });

  // HMR support: reload when color-input module changes
  if (import.meta.hot) {
    import.meta.hot.accept('color-input', (newModule) => {
      console.log('color-input updated via HMR');
      // Force reload the page to re-register the custom element
      window.location.reload();
    });
  }

  // Track which color-input elements should auto-sync with page theme
  const autoSyncElements = new WeakSet<HTMLElement>();

  // Sync Starlight theme changes with color-input components
  function syncThemeToColorInputs() {
    const theme = document.documentElement.getAttribute('data-theme') || 'auto';
    const colorInputs = document.querySelectorAll('color-input');

    colorInputs.forEach((input: any) => {
      const initialTheme = input.getAttribute('theme');

      // Mark elements that start with 'auto' or no theme for auto-syncing
      if (!autoSyncElements.has(input)) {
        if (!initialTheme || initialTheme === 'auto') {
          autoSyncElements.add(input);
        }
      }

      // Only sync elements marked for auto-syncing
      if (autoSyncElements.has(input)) {
        input.theme = theme === 'light' || theme === 'dark' ? theme : 'auto';
      }
    });
  }

  // Watch for theme changes on the root element
  const themeObserver = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
        syncThemeToColorInputs();
      }
    });
  });

  // Sync scrollbar color to the first color-input on the page
  function syncScrollbarColor() {
    const first = document.querySelector('color-input') as any;
    if (!first?.value) return;

    let pendingFrame = 0;
    function applyScrollbarColor() {
      const color = first.value;
      document.documentElement.style.setProperty('scrollbar-color', `${color} transparent`);
      document.documentElement.style.setProperty('--sl-color-accent-high', color);
      pendingFrame = 0;
    }

    applyScrollbarColor();

    first.addEventListener('change', () => {
      if (!pendingFrame) pendingFrame = requestAnimationFrame(applyScrollbarColor);
    });
  }

  // Initialize theme sync after custom element is defined
  async function initializeThemeSync() {
    // Wait for the custom element to be defined
    await colorInputModule;
    await customElements.whenDefined('color-input');

    // Now set up the observer and do initial sync
    themeObserver.observe(document.documentElement, { attributes: true });
    syncThemeToColorInputs();
    syncScrollbarColor();
  }

  // Start observing when DOM is ready
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initializeThemeSync);
  } else {
    initializeThemeSync();
  }

  // Also sync on Astro view transitions
  document.addEventListener('astro:page-load', () => {
    customElements.whenDefined('color-input').then(syncThemeToColorInputs);
  });
</script>