content.js

class NotionPresentationMode {
  constructor() {
    this.isActive = false;
    this.currentSlideIndex = 0;
    this.slides = [];
    this.settings = {
      presentationMode: false,
      showSlideNumbers: true,
      showProgressBar: false,
      showNavigationButtons: true,
      hideNotesContent: false,
      showNotesControls: true
    };

    this.slideNumberElement = null;
    this.progressBarElement = null;
    this.presentationIndicator = null;
    this.notesBlockIds = new Set(); // Track Notes block IDs

    // Flag to avoid reacting to our own programmatic scrolls
    this.programmaticScroll = false;

    // Coalesce rapid next/prev key presses into a single scroll
    this.navTimer = null;
    this.navBaseIndex = null;
    this.navDelta = 0;


    // Track suppression and pending timers for scroll operations
    this.programmaticScrollTimeoutId = null;
    this._pendingScrollTimers = [];


    // Navigation coalescing and scroll suppression helpers (arrow funcs to avoid parsing issues)
    this.queueNavigation = (delta) => {
      if (!this.isActive || this.slides.length === 0) return;
      if (this.navTimer == null) {
        this.navBaseIndex = this.currentSlideIndex;
        this.navDelta = 0;
      }
      this.navDelta += delta;
      if (this.navTimer) clearTimeout(this.navTimer);
      this.navTimer = setTimeout(() => {
        let target = this.navBaseIndex + this.navDelta;
        target = Math.max(0, Math.min(this.slides.length - 1, target));
        this.navTimer = null;
        this.navBaseIndex = null;
        this.navDelta = 0;
        if (target !== this.currentSlideIndex) {
          this.currentSlideIndex = target;
          this.clearPendingScrollTimers();
          this.scrollToSlide(target);
          this.updateSlideIndicators();
        } else {
          this.highlightCurrentSlide();
        }
      }, 80);
    };

    this.beginProgrammaticScroll = (duration = 700) => {
      this.programmaticScroll = true;
      if (this.programmaticScrollTimeoutId) clearTimeout(this.programmaticScrollTimeoutId);
      this.programmaticScrollTimeoutId = setTimeout(() => {
        this.programmaticScroll = false;
        this.programmaticScrollTimeoutId = null;
      }, duration);
    };

    this.clearPendingScrollTimers = () => {
      if (Array.isArray(this._pendingScrollTimers)) {
        this._pendingScrollTimers.forEach((id) => clearTimeout(id));
        this._pendingScrollTimers = [];
      }
    };

    this.trackTimer = (id) => {
      if (!this._pendingScrollTimers) this._pendingScrollTimers = [];
      if (id != null) this._pendingScrollTimers.push(id);
      return id;
    };

    this.init();
  }

  async init() {
    console.log('Notion Presentation Mode: Initializing...');

    // Load settings
    await this.loadSettings();

    // Set up message listener
    chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
      console.log('Notion Presentation Mode: Received message', request);
      this.handleMessage(request, sender, sendResponse);
    });

    // Wait for page to load
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', () => this.setupPage());
    } else {
      this.setupPage();
    }

    // Set up keyboard listeners
    this.setupKeyboardListeners();

    // Set up scroll listener
    this.setupScrollListener();

    // Watch for dynamic content changes
    this.setupMutationObserver();

    // Add a simple way to test the extension
    console.log('Notion Presentation Mode: To test, run: window.notionPresentation.enablePresentationMode()');
    console.log('Notion Presentation Mode: To debug Notes, run: window.notionPresentation.debugNotes()');
    window.notionPresentation = this;

    console.log('Notion Presentation Mode: Initialization complete');
  }

  async loadSettings() {
    try {
      this.settings = await new Promise((resolve, reject) => {
        chrome.runtime.sendMessage({ action: 'getSettings' }, (response) => {
          if (chrome.runtime.lastError) {
            reject(chrome.runtime.lastError);
          } else {
            resolve(response);
          }
        });
      });

      if (this.settings && this.settings.presentationMode) {
        this.enablePresentationMode();
      }
    } catch (error) {
      console.log('Could not load settings, using defaults:', error);
      // Use default settings if communication fails
      this.settings = {
        presentationMode: false,
        showSlideNumbers: true,
        showProgressBar: false,
        showNavigationButtons: true,
        hideNotesContent: false,
        showNotesControls: true
      };
    }
  }

  setupPage() {
    console.log('Notion Presentation Mode: Setting up page...');

    // Find all horizontal dividers and content blocks
    this.findSlides();

    // Create UI elements
    this.createSlideNumber();
    this.createProgressBar();
    this.createNavigationControls();
    this.createNotesControls();

    // Update visibility based on settings
    this.updateUIVisibility();
    this.applyNotesSettings();

    // Initial tracking of Notes blocks
    this.updateNotesTracking();

    console.log('Notion Presentation Mode: Page setup complete');
  }

  findSlides() {
    console.log('Notion Presentation Mode: Finding slides...');
    this.slides = [];

    // Look for various types of horizontal dividers in Notion
    const dividerSelectors = [
      '.notion-divider-block',
      '.notion-divider_divider',
      '[data-block-id] > div[style*="border-top"]',
      'hr',
      '.notion-hr_hr',
      // More modern Notion selectors
      '[data-content-editable-leaf="true"][data-block-id] hr',
      'div[style*="border-top: 1px solid"]',
      'div[style*="border-top:1px solid"]',
      'div[role="separator"]'
    ];

    const dividers = document.querySelectorAll(dividerSelectors.join(', '));
    console.log('Notion Presentation Mode: Found dividers:', dividers.length, dividers);

    // If no dividers found, treat each top-level block as a slide
    if (dividers.length === 0) {
      console.log('Notion Presentation Mode: No dividers found, using content blocks as slides');
      const blocks = document.querySelectorAll('[data-block-id]');
      console.log('Notion Presentation Mode: Found blocks:', blocks.length);

      blocks.forEach((block, index) => {
        if (this.isTopLevelBlock(block)) {
          this.slides.push({
            element: block,
            index: index,
            type: 'block'
          });
        }
      });
    } else {
      console.log('Notion Presentation Mode: Creating slides based on dividers');
      // Create slides based on dividers
      let currentSlideContent = [];
      const allElements = Array.from(document.querySelectorAll('[data-block-id]'));

      allElements.forEach((element) => {
        if (this.isDivider(element)) {
          if (currentSlideContent.length > 0) {
            this.slides.push({
              elements: [...currentSlideContent],
              divider: element,
              index: this.slides.length,
              type: 'section'
            });
            currentSlideContent = [];
          }
        } else {
          // Only include top-level blocks
          if (this.isTopLevelBlock(element)) {
            currentSlideContent.push(element);
          }
        }
      });

      // Add remaining content as last slide
      if (currentSlideContent.length > 0) {
        this.slides.push({
          elements: [...currentSlideContent],
          index: this.slides.length,
          type: 'section'
        });
      }
    }

    console.log(`Notion Presentation Mode: Found ${this.slides.length} slides`, this.slides);
  }

  isTopLevelBlock(element) {
    // Check if this is a top-level content block (not nested)
    const parent = element.closest('[data-block-id]');
    return parent === element;
  }

  isDivider(element) {
    return element.classList.contains('notion-divider-block') ||
           element.classList.contains('notion-divider_divider') ||
           element.tagName === 'HR' ||
           element.classList.contains('notion-hr_hr') ||
           element.getAttribute('role') === 'separator' ||
           (element.style && element.style.borderTop) ||
           element.querySelector('[role="separator"]');
  }

  setupKeyboardListeners() {
    console.log('Notion Presentation Mode: Setting up keyboard listeners...');
    document.addEventListener('keydown', (event) => {
      console.log('Notion Presentation Mode: Key pressed:', event.code, 'Active:', this.isActive);

      // Check for presentation mode toggle (Ctrl/Cmd + Shift + P)
      if (event.code === 'KeyP' && event.shiftKey && (event.ctrlKey || event.metaKey)) {
        console.log('Notion Presentation Mode: Toggle shortcut pressed');
        event.preventDefault();
        event.stopPropagation();

        if (this.isActive) {
          this.disablePresentationMode();
        } else {
          this.enablePresentationMode();
        }
        return;
      }

      if (!this.isActive) return;

      // Prevent default behavior for presentation keys (avoid native page scroll / history nav)
      const presentationKeys = ['ArrowRight', 'ArrowLeft', 'Backspace', 'Space', 'Enter', 'Home'];
      if (presentationKeys.includes(event.code)) {
        console.log('Notion Presentation Mode: Preventing default for presentation key:', event.code);
        event.preventDefault();
        event.stopPropagation();
      }

      switch (event.code) {
        case 'ArrowRight':
        case 'Space':
        case 'Enter':
          console.log('Notion Presentation Mode: Next slide triggered');
          this.nextSlide();
          break;
        case 'ArrowLeft':
        case 'Backspace':
          console.log('Notion Presentation Mode: Previous slide triggered by key:', event.code);
          this.previousSlide();
          break;
        case 'Home':
          console.log('Notion Presentation Mode: Home key pressed, going to first slide');
          this.goToFirstSlide();
          break;
        case 'Escape':
          console.log('Notion Presentation Mode: Escape pressed, disabling presentation mode');
          this.disablePresentationMode();
          break;
      }
    }, true);
  }

  setupScrollListener() {
    console.log('Notion Presentation Mode: Setting up scroll listener...');
    let scrollTimeout;

    window.addEventListener('scroll', () => {
      if (!this.isActive || this.slides.length === 0) return;

      // Ignore scroll events caused by our own programmatic scrolls
      if (this.programmaticScroll) return;

      // Debounce scroll events
      clearTimeout(scrollTimeout);
      scrollTimeout = setTimeout(() => {
        this.updateCurrentSlideFromScroll();
      }, 100);
    });
  }

  updateCurrentSlideFromScroll() {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    // If we're near the absolute top, force slide index 0
    if (scrollTop <= 100) {
      if (this.currentSlideIndex !== 0) {
        console.log('Notion Presentation Mode: Near top, forcing current slide to 0');
        this.currentSlideIndex = 0;
        this.updateSlideIndicators();
        this.highlightCurrentSlide();
      }
      return;
    }

    const windowHeight = window.innerHeight;
    const viewportCenter = scrollTop + windowHeight / 2;

    let closestSlideIndex = 0;
    let closestDistance = Infinity;

    this.slides.forEach((slide, index) => {
      let slideElement;

      if (slide.type === 'block') {
        slideElement = slide.element;
      } else if (slide.type === 'section' && slide.elements.length > 0) {
        slideElement = slide.elements[0];
      }

      if (slideElement) {
        const rect = slideElement.getBoundingClientRect();
        const elementTop = rect.top + scrollTop;
        const distance = Math.abs(elementTop - viewportCenter);

        if (distance < closestDistance) {
          closestDistance = distance;
          closestSlideIndex = index;
        }

/*
	  // Coalesce rapid next/prev commands and harden programmatic scroll suppression
	  queueNavigation(delta) {
	    if (!this.isActive || this.slides.length === 0) return;
	    if (this.navTimer == null) {
	      this.navBaseIndex = this.currentSlideIndex;
	      this.navDelta = 0;
	    }
	    this.navDelta += delta;
	    if (this.navTimer) clearTimeout(this.navTimer);
	    this.navTimer = setTimeout(() => {
	      let target = this.navBaseIndex + this.navDelta;
	      target = Math.max(0, Math.min(this.slides.length - 1, target));
	      this.navTimer = null;
	      this.navBaseIndex = null;
	      this.navDelta = 0;
	      if (target !== this.currentSlideIndex) {
	        this.currentSlideIndex = target;
	        this.clearPendingScrollTimers();
	        this.scrollToSlide(target);
	        this.updateSlideIndicators();
	      } else {
	        this.highlightCurrentSlide();
	      }
	    }, 80);
	  }

	  beginProgrammaticScroll(duration = 700) {
	    this.programmaticScroll = true;
	    if (this.programmaticScrollTimeoutId) clearTimeout(this.programmaticScrollTimeoutId);
	    this.programmaticScrollTimeoutId = setTimeout(() => {
	      this.programmaticScroll = false;
	      this.programmaticScrollTimeoutId = null;
	    }, duration);
	  }

	  clearPendingScrollTimers() {
	    if (Array.isArray(this._pendingScrollTimers)) {
	      this._pendingScrollTimers.forEach((id) => clearTimeout(id));
	      this._pendingScrollTimers = [];
	    }
	  }

	  trackTimer(id) {
	    if (!this._pendingScrollTimers) this._pendingScrollTimers = [];
	    if (id != null) this._pendingScrollTimers.push(id);
	    return id;
	  }

*/
      }
    });

    if (closestSlideIndex !== this.currentSlideIndex) {
      console.log('Notion Presentation Mode: Scroll detected, updating slide from', this.currentSlideIndex, 'to', closestSlideIndex);
      this.currentSlideIndex = closestSlideIndex;
      this.updateSlideIndicators();
      this.highlightCurrentSlide();
    }

  }

/*
	  // Navigation coalescing and scroll suppression helpers
	  queueNavigation(delta) {
	    if (!this.isActive || this.slides.length === 0) return;
	    if (this.navTimer == null) {
	      this.navBaseIndex = this.currentSlideIndex;
	      this.navDelta = 0;
	    }
	    this.navDelta += delta;
	    if (this.navTimer) clearTimeout(this.navTimer);
	    this.navTimer = setTimeout(() => {
	      let target = this.navBaseIndex + this.navDelta;
	      target = Math.max(0, Math.min(this.slides.length - 1, target));
	      this.navTimer = null;
	      this.navBaseIndex = null;
	      this.navDelta = 0;
	      if (target !== this.currentSlideIndex) {
	        this.currentSlideIndex = target;
	        this.clearPendingScrollTimers();
	        this.scrollToSlide(target);
	        this.updateSlideIndicators();
	      } else {
	        this.highlightCurrentSlide();
	      }
	    }, 80);
	  }

	  beginProgrammaticScroll(duration = 700) {
	    this.programmaticScroll = true;
	    if (this.programmaticScrollTimeoutId) clearTimeout(this.programmaticScrollTimeoutId);
	    this.programmaticScrollTimeoutId = setTimeout(() => {
	      this.programmaticScroll = false;
	      this.programmaticScrollTimeoutId = null;
	    }, duration);
	  }

	  clearPendingScrollTimers() {
	    if (Array.isArray(this._pendingScrollTimers)) {
	      this._pendingScrollTimers.forEach((id) => clearTimeout(id));
	      this._pendingScrollTimers = [];
	    }
	  }

	  trackTimer(id) {
	    if (!this._pendingScrollTimers) this._pendingScrollTimers = [];
	    if (id != null) this._pendingScrollTimers.push(id);
	    return id;
	  }

*/


  setupMutationObserver() {
    const observer = new MutationObserver((mutations) => {
      let shouldRefresh = false;

      mutations.forEach((mutation) => {
        if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
          // Check if new content blocks were added
          for (let node of mutation.addedNodes) {
            if (node.nodeType === Node.ELEMENT_NODE &&
                (node.hasAttribute('data-block-id') || node.querySelector('[data-block-id]'))) {
              shouldRefresh = true;
              break;
            }
          }
        }
      });

      if (shouldRefresh) {
        setTimeout(() => this.findSlides(), 500);
      }
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true
    });
  }

  createSlideNumber() {
    console.log('Notion Presentation Mode: Creating slide number element...');
    this.slideNumberElement = document.createElement('div');
    this.slideNumberElement.className = 'notion-slide-number';
    this.slideNumberElement.textContent = '1 / 1';
    document.body.appendChild(this.slideNumberElement);
    console.log('Notion Presentation Mode: Slide number element created and added to body');
  }

  createNavigationControls() {
    console.log('Notion Presentation Mode: Creating navigation controls...');

    // Create container
    this.navigationElement = document.createElement('div');
    this.navigationElement.className = 'notion-navigation-controls';

    // Previous button
    const prevButton = document.createElement('button');
    prevButton.className = 'notion-nav-button notion-nav-prev';
    prevButton.innerHTML = '&lt;';
    prevButton.title = 'Previous slide (← or Backspace)';
    prevButton.addEventListener('click', () => {
      console.log('Notion Presentation Mode: Previous button clicked');
      this.previousSlide();
    });

    // Next button
    const nextButton = document.createElement('button');
    nextButton.className = 'notion-nav-button notion-nav-next';
    nextButton.innerHTML = '&gt;';
    nextButton.title = 'Next slide (→)';
    nextButton.addEventListener('click', () => {
      console.log('Notion Presentation Mode: Next button clicked');
      this.nextSlide();
    });

    // Add buttons to container
    this.navigationElement.appendChild(prevButton);
    this.navigationElement.appendChild(nextButton);

    // Add to page
    document.body.appendChild(this.navigationElement);
    console.log('Notion Presentation Mode: Navigation controls created and added to body');
  }

  createNotesControls() {
    console.log('Notion Presentation Mode: Creating notes controls...');

    // Create container for notes controls
    this.notesControlsElement = document.createElement('div');
    this.notesControlsElement.className = 'notion-notes-controls';

    // Hide/Show Notes button
    const hideNotesButton = document.createElement('button');
    hideNotesButton.className = 'notion-notes-button notion-hide-notes-btn';
    hideNotesButton.innerHTML = '👁️';
    hideNotesButton.title = 'Toggle Notes visibility';
    hideNotesButton.addEventListener('click', () => {
      console.log('Notion Presentation Mode: Hide/Show Notes button clicked');
      this.toggleNotesVisibility();
    });

    // Open Notes in new window button
    const openNotesButton = document.createElement('button');
    openNotesButton.className = 'notion-notes-button notion-open-notes-btn';
    openNotesButton.innerHTML = '🗗';
    openNotesButton.title = 'Open Notes in new window';
    openNotesButton.addEventListener('click', () => {
      console.log('Notion Presentation Mode: Open Notes button clicked');
      this.openNotesInNewWindow();
    });

    // Add buttons to container
    this.notesControlsElement.appendChild(hideNotesButton);
    this.notesControlsElement.appendChild(openNotesButton);

    // Add to page
    document.body.appendChild(this.notesControlsElement);
    console.log('Notion Presentation Mode: Notes controls created and added to body');
  }

  createProgressBar() {
    console.log('Notion Presentation Mode: Creating progress bar element...');
    this.progressBarElement = document.createElement('div');
    this.progressBarElement.className = 'notion-progress-bar';

    const fill = document.createElement('div');
    fill.className = 'notion-progress-bar-fill';
    this.progressBarElement.appendChild(fill);

    document.body.appendChild(this.progressBarElement);
    console.log('Notion Presentation Mode: Progress bar element created and added to body');
  }

  updateUIVisibility() {
    if (this.slideNumberElement) {
      this.slideNumberElement.classList.toggle('hidden', !this.settings.showSlideNumbers || !this.isActive);
    }

    if (this.progressBarElement) {
      this.progressBarElement.classList.toggle('hidden', !this.settings.showProgressBar || !this.isActive);
    }

    if (this.navigationElement) {
      this.navigationElement.classList.toggle('hidden', !this.settings.showNavigationButtons || !this.isActive);
    }

    if (this.notesControlsElement) {
      this.notesControlsElement.classList.toggle('hidden', !this.settings.showNotesControls || !this.isActive);
    }
  }
  applyPresentationToggles() {
    // Toggle editability in presentation mode
    // We implement by toggling a CSS class that disables pointer-events and caret
    const root = document.body;
    root.classList.toggle('notion-presentation-editable', !!this.settings.allowEditInPresentation);

    // Toggle horizontal line visibility via class
    root.classList.toggle('notion-presentation-show-hlines', !!this.settings.showHlinesInPresentation);
  }

  applyNotesSettings() {
    // Apply notes visibility settings
    const root = document.body;
    root.classList.toggle('notion-hide-notes-content', !!this.settings.hideNotesContent);

    // Update Notes blocks tracking and apply dynamic CSS
    this.updateNotesTracking();
    this.applyDynamicNotesCSS();
  }

  updateNotesTracking() {
    // Clear previous tracking
    this.notesBlockIds.clear();

    // Find and track current Notes blocks (without modifying DOM)
    const notesBlocks = this.findNotesBlocks();
    console.log('Notion Presentation Mode: Tracking', notesBlocks.length, 'Notes blocks');

    notesBlocks.forEach((block, index) => {
      const blockId = block.getAttribute('data-block-id');
      if (blockId) {
        this.notesBlockIds.add(blockId);
        console.log('Notion Presentation Mode: Tracking Notes block', index + 1, 'with ID:', blockId);
      }
    });

    console.log('Notion Presentation Mode: Total tracked Notes blocks:', this.notesBlockIds.size);
  }

  applyDynamicNotesCSS() {
    // Remove existing dynamic CSS
    const existingStyle = document.getElementById('notion-notes-dynamic-css');
    if (existingStyle) {
      existingStyle.remove();
    }

    // Only apply CSS if we have Notes blocks to hide
    if (this.notesBlockIds.size === 0 || !this.settings.hideNotesContent) {
      return;
    }

    // Create dynamic CSS targeting specific block IDs
    const cssRules = [];
    this.notesBlockIds.forEach(blockId => {
      // Target the content container within each Notes block
      cssRules.push(`
        .notion-hide-notes-content [data-block-id="${blockId}"] [id^=":r"][style*="display: flex"] {
          display: none !important;
        }
        .notion-hide-notes-content [data-block-id="${blockId}"] > div > div:last-child {
          display: none !important;
        }
        .notion-hide-notes-content [data-block-id="${blockId}"] > div > div > div:last-child {
          display: none !important;
        }
      `);
    });

    // Inject the dynamic CSS
    const styleElement = document.createElement('style');
    styleElement.id = 'notion-notes-dynamic-css';
    styleElement.textContent = cssRules.join('\n');
    document.head.appendChild(styleElement);

    console.log('Notion Presentation Mode: Applied dynamic CSS for', this.notesBlockIds.size, 'Notes blocks');
  }

  findNotesBlocks() {
    // Find all Notes toggle blocks - only those with "Notes:" in the header
    const notesBlocks = [];

    // Look for toggle blocks that specifically contain "Notes:" text
    const toggleBlocks = document.querySelectorAll('.notion-toggle-block');

    toggleBlocks.forEach(block => {
      // Look for the title element - should be the first editable element in the toggle
      const titleElement = block.querySelector('[data-content-editable-leaf="true"]');

      if (titleElement) {
        const text = titleElement.textContent.trim().toLowerCase();

        // Match blocks that contain "notes:" or are exactly "notes"
        // This excludes things like "Example:", "Details:", etc.
        if (text.includes('notes:') || text === 'notes') {
          notesBlocks.push(block);
          console.log('Notion Presentation Mode: Found Notes block with title:', titleElement.textContent.trim());
        }
      }
    });

    console.log('Notion Presentation Mode: Found Notes blocks:', notesBlocks.length);
    return notesBlocks;
  }

  toggleNotesVisibility() {
    this.settings.hideNotesContent = !this.settings.hideNotesContent;
    this.applyNotesSettings();

    // Update button appearance
    const hideButton = document.querySelector('.notion-hide-notes-btn');
    if (hideButton) {
      hideButton.innerHTML = this.settings.hideNotesContent ? '🙈' : '👁️';
      hideButton.title = this.settings.hideNotesContent ? 'Show Notes content' : 'Hide Notes content';
    }

    // If we're showing notes, ensure they're expanded so they're visible
    if (!this.settings.hideNotesContent) {
      this.ensureNotesExpanded();
    }

    console.log('Notion Presentation Mode: Notes visibility toggled:', !this.settings.hideNotesContent);
  }

  ensureNotesExpanded() {
    const notesBlocks = this.findNotesBlocks();

    notesBlocks.forEach((block, index) => {
      const expandButton = block.querySelector('[role="button"][aria-expanded]');
      const isExpanded = expandButton ? expandButton.getAttribute('aria-expanded') === 'true' : true;

      // If collapsed, expand it so the content becomes visible
      if (!isExpanded && expandButton) {
        console.log('Notion Presentation Mode: Auto-expanding Notes block for visibility', index + 1);
        expandButton.click();
      }
    });
  }

  openNotesInNewWindow() {
    const notesBlocks = this.findNotesBlocks();

    if (notesBlocks.length === 0) {
      console.log('Notion Presentation Mode: No Notes blocks found');
      return;
    }

    // Store original states and expand collapsed blocks
    const originalStates = [];
    notesBlocks.forEach((block, index) => {
      const expandButton = block.querySelector('[role="button"][aria-expanded]');
      const isExpanded = expandButton ? expandButton.getAttribute('aria-expanded') === 'true' : true;

      originalStates[index] = isExpanded;

      // If collapsed, expand it
      if (!isExpanded && expandButton) {
        console.log('Notion Presentation Mode: Expanding collapsed Notes block', index + 1);
        expandButton.click();
      }
    });

    // Wait a moment for the expansion animation to complete
    setTimeout(() => {
      // Collect all notes content
      let notesContent = '';
      notesBlocks.forEach((block) => {
        const titleElement = block.querySelector('[data-content-editable-leaf="true"]');
        const contentContainer = block.querySelector('[id^=":r"][style*="display: flex"]') ||
                                 block.querySelector('[style*="display: flex"] > div:last-child');

        if (titleElement) {
          const titleText = titleElement.textContent.trim();
          notesContent += `<h3>${titleText}</h3>\n`;
        }

        if (contentContainer) {
          notesContent += this.extractNotesContent(contentContainer);
        }

        notesContent += '<hr>\n';
      });

      // Restore original states
      this.restoreNotesStates(notesBlocks, originalStates);

      // Open the new window with content
      this.createNotesWindow(notesContent);
    }, 300); // Wait for expansion animation
  }

  restoreNotesStates(notesBlocks, originalStates) {
    notesBlocks.forEach((block, index) => {
      const expandButton = block.querySelector('[role="button"][aria-expanded]');
      const currentlyExpanded = expandButton ? expandButton.getAttribute('aria-expanded') === 'true' : true;
      const shouldBeExpanded = originalStates[index];

      // If the state needs to be restored (was collapsed but we expanded it)
      if (!shouldBeExpanded && currentlyExpanded && expandButton) {
        console.log('Notion Presentation Mode: Restoring collapsed state for Notes block', index + 1);
        setTimeout(() => {
          expandButton.click();
        }, 100); // Small delay to ensure the content extraction is complete
      }
    });
  }

  extractNotesContent(contentContainer) {
    let content = '';

    // Find all content blocks within the container
    const contentBlocks = contentContainer.querySelectorAll('[data-block-id]');

    contentBlocks.forEach(contentBlock => {
      const blockClasses = contentBlock.className;
      const textElement = contentBlock.querySelector('[data-content-editable-leaf="true"]');

      if (!textElement) return;

      const text = textElement.textContent.trim();
      if (!text) return;

      // Handle different types of blocks
      if (blockClasses.includes('notion-text-block')) {
        // Regular text paragraph
        content += `<p>${this.escapeHtml(text)}</p>\n`;

      } else if (blockClasses.includes('notion-bulleted_list-block')) {
        // Bulleted list item
        content += `<li>${this.escapeHtml(text)}</li>\n`;

      } else if (blockClasses.includes('notion-numbered_list-block')) {
        // Numbered list item
        content += `<li>${this.escapeHtml(text)}</li>\n`;

      } else if (blockClasses.includes('notion-to_do-block')) {
        // To-do item
        const isChecked = contentBlock.querySelector('[data-content-editable-void="true"] [role="button"]')?.getAttribute('aria-checked') === 'true';
        const checkbox = isChecked ? '☑️' : '☐';
        content += `<p>${checkbox} ${this.escapeHtml(text)}</p>\n`;

      } else if (blockClasses.includes('notion-header-block')) {
        // Header block
        content += `<h4>${this.escapeHtml(text)}</h4>\n`;

      } else if (blockClasses.includes('notion-quote-block')) {
        // Quote block
        content += `<blockquote>${this.escapeHtml(text)}</blockquote>\n`;

      } else {
        // Fallback for any other block type
        content += `<p>${this.escapeHtml(text)}</p>\n`;
      }
    });

    // Wrap consecutive list items in proper list tags
    content = this.wrapListItems(content);

    return content;
  }

  escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
  }

  wrapListItems(content) {
    // Wrap consecutive <li> items in <ul> tags
    let wrappedContent = content;

    // Replace sequences of <li> items with proper <ul> wrapping
    wrappedContent = wrappedContent.replace(/(<li>.*?<\/li>\n)+/g, (match) => {
      return `<ul>\n${match}</ul>\n`;
    });

    return wrappedContent;
  }

  createNotesWindow(notesContent) {
    // Create new window with notes content
    const newWindow = window.open('', '_blank', 'width=600,height=800,scrollbars=yes,resizable=yes');

    if (newWindow) {
      const htmlContent = `
        <!DOCTYPE html>
        <html>
        <head>
          <title>Notion Notes</title>
          <style>
            body {
              font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
              line-height: 1.6;
              max-width: 800px;
              margin: 0 auto;
              padding: 20px;
              background: #fff;
            }
            h1 {
              color: #2d3748;
              border-bottom: 3px solid #4299e1;
              padding-bottom: 15px;
              margin-bottom: 30px;
            }
            h3 {
              color: #2d3748;
              border-bottom: 2px solid #e2e8f0;
              padding-bottom: 10px;
              margin-top: 30px;
              margin-bottom: 15px;
            }
            p {
              margin: 10px 0;
              color: #4a5568;
              line-height: 1.7;
            }
            ul, ol {
              margin: 15px 0;
              padding-left: 25px;
              color: #4a5568;
            }
            li {
              margin: 8px 0;
              line-height: 1.6;
            }
            h4 {
              color: #2d3748;
              margin: 20px 0 10px 0;
              font-size: 1.1em;
            }
            blockquote {
              border-left: 4px solid #e2e8f0;
              margin: 15px 0;
              padding: 10px 0 10px 15px;
              color: #718096;
              font-style: italic;
              background: #f7fafc;
            }
            hr {
              border: none;
              border-top: 1px solid #e2e8f0;
              margin: 20px 0;
            }
            .timestamp {
              color: #718096;
              font-size: 12px;
              text-align: right;
              margin-top: 20px;
              border-top: 1px solid #f7fafc;
              padding-top: 10px;
            }
          </style>
        </head>
        <body>
          <h1>📝 Notion Notes</h1>
          ${notesContent}
          <div class="timestamp">
            Extracted on ${new Date().toLocaleString()}
          </div>
        </body>
        </html>
      `;

      newWindow.document.open();
      newWindow.document.write(htmlContent);
      newWindow.document.close();
      console.log('Notion Presentation Mode: Notes opened in new window');
    } else {
      console.log('Notion Presentation Mode: Failed to open new window (popup blocked?)');
    }
  }


  enablePresentationMode() {
    console.log('Notion Presentation Mode: Enabling presentation mode...');
    this.isActive = true;
    document.body.classList.add('notion-presentation-mode');

    // Show presentation indicator
    this.showPresentationIndicator();

    // Start at the first slide instead of detecting current position
    this.currentSlideIndex = 0;
    this.scrollToSlide(0);

    // Update UI
    this.updateUIVisibility();
    this.applyPresentationToggles();
    this.updateSlideIndicators();

    console.log('Notion Presentation Mode: Presentation mode enabled, slides found:', this.slides.length, 'starting at slide 1');
  }

  disablePresentationMode() {
    this.isActive = false;
    document.body.classList.remove('notion-presentation-mode');

    // Hide presentation indicator
    this.hidePresentationIndicator();

    // Update UI
    this.updateUIVisibility();

    // Remove slide indicator
    const existingIndicator = document.querySelector('.notion-slide-indicator');
    if (existingIndicator) {
      existingIndicator.remove();
    }
  }

  showPresentationIndicator() {
    if (this.presentationIndicator) {
      this.presentationIndicator.remove();
    }

    this.presentationIndicator = document.createElement('div');
    this.presentationIndicator.className = 'notion-presentation-indicator';
    this.presentationIndicator.textContent = 'Presentation Mode';
    document.body.appendChild(this.presentationIndicator);

    // Auto-hide after 3 seconds
    setTimeout(() => {
      if (this.presentationIndicator) {
        this.presentationIndicator.style.opacity = '0';
        setTimeout(() => {
          if (this.presentationIndicator) {
            this.presentationIndicator.remove();
            this.presentationIndicator = null;
          }
        }, 300);
      }
    }, 3000);
  }

  hidePresentationIndicator() {
    if (this.presentationIndicator) {
      this.presentationIndicator.remove();
      this.presentationIndicator = null;
    }
  }

  nextSlide() {
    // Coalesce rapid navigation to improve scroll reliability
    this.queueNavigation(1);
  }

  previousSlide() {
    // Coalesce rapid navigation to improve scroll reliability
    this.queueNavigation(-1);
  }

  goToFirstSlide() {
    console.log('Notion Presentation Mode: Explicitly going to first slide');
    this.currentSlideIndex = 0;
    this.scrollToSlide(0);
    this.updateSlideIndicators();
  }

  scrollToSlide(index) {
    if (index >= 0 && index < this.slides.length) {
      this.highlightCurrentSlide();

      // First slide: use scrollIntoView on the first element for maximum compatibility with Notion's scroll container
      if (index === 0) {
        console.log('Notion Presentation Mode: Scrolling to first slide via scrollIntoView');
        this.scrollToSlideUsingScrollIntoView(index);
        return;
      }

      // Special case for last slide - scroll to show the last slide content
      if (index === this.slides.length - 1) {
        console.log('Notion Presentation Mode: Scrolling to last slide');
        const container = this.getScrollContainer();
        const docHeight = container.scrollHeight;
        const bottomPosition = Math.max(0, docHeight - container.clientHeight);
        console.log('Notion Presentation Mode: Container scrollHeight:', docHeight, 'clientHeight:', container.clientHeight, 'bottom position:', bottomPosition);

        // If there's no room to scroll (page fits in viewport), just use normal slide positioning
        if (bottomPosition <= 0) {
          console.log('Notion Presentation Mode: Page fits in viewport, using normal slide positioning for last slide');
          this.scrollToSlideSimple(index);
          return;
        }

        this.forceScrollTo(bottomPosition, null, container);
        return;
      }

      // For middle slides, use simpler positioning
      this.scrollToSlideSimple(index);
    }
  }

  scrollToSlideSimple(index) {
    console.log('Notion Presentation Mode: Simple scroll to slide', index + 1);

    const slide = this.slides[index];
    let targetElement;

    // Get the main element for this slide
    if (slide.type === 'block') {
      targetElement = slide.element;
    } else if (slide.type === 'section' && slide.elements.length > 0) {
      targetElement = slide.elements[0];
    }

    if (!targetElement) {
      console.log('Notion Presentation Mode: No target element found for slide', index + 1);
      return;
    }

    // Use offsetTop for more reliable absolute positioning
    let elementTop = 0;
    let element = targetElement;

    // Calculate absolute position by walking up the DOM tree
    while (element) {
      elementTop += element.offsetTop || 0;
      element = element.offsetParent;
    }

    // Position element in upper third of viewport for better reading
    let scrollPosition = elementTop - (window.innerHeight / 4);

    // Only prevent negative scroll
    scrollPosition = Math.max(0, scrollPosition);

    console.log('Notion Presentation Mode: Element absolute position:', elementTop, 'target scroll:', scrollPosition);

    // Initiate a programmatic scroll with suppression window
    this.beginProgrammaticScroll(800);
    this.forceScrollTo(scrollPosition, targetElement);
  }

  scrollToSlideUsingScrollIntoView(index) {
    const slide = this.slides[index];
    const globalContainer = this.getScrollContainer();
    const targetElement = this.getSlideTargetElement(slide, globalContainer);

    if (!targetElement) {
      console.log('Notion Presentation Mode: No target element found for slide', index + 1);
      return;
    }

    // Prefer the nearest scrollable ancestor of the target element
    const localContainer = this.getNearestScrollable(targetElement) || globalContainer;
    const containerName = localContainer && localContainer.nodeName ? localContainer.nodeName : 'document';
    console.log('Notion Presentation Mode: First slide scroll using container', containerName);

    this.beginProgrammaticScroll(800);
    try {
      const ok = this.scrollElementIntoContainer(targetElement, localContainer, 'start');
      if (!ok) {
        // Final fallback: let the browser decide
        targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    } catch (_) {
      try { targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' }); } catch (_) {}
    }
  }

  scrollToTop() {
    console.log('Notion Presentation Mode: Scrolling to top of page');

    // Mark programmatic to avoid scroll listener override
    this.programmaticScroll = true;

    try {
      const container = this.getScrollContainer();
      if (container === document.body || container === document.documentElement) {
        window.scrollTo({ top: 0, behavior: 'smooth' });
      } else if (container && typeof container.scrollTo === 'function') {
        container.scrollTo({ top: 0, behavior: 'smooth' });
      }

      // Verify scroll worked after a short delay
      setTimeout(() => {
        const currentScroll = (container === document.body || container === document.documentElement)
          ? (window.pageYOffset || document.documentElement.scrollTop)
          : container.scrollTop;
        if (currentScroll > 10) {
          console.log('Notion Presentation Mode: Smooth scroll failed, using immediate scroll');
          if (container === document.body || container === document.documentElement) {
            window.scrollTo(0, 0);
          } else {
            container.scrollTop = 0;
          }
        }
      }, 100);

    } catch (error) {
      console.log('Notion Presentation Mode: Error scrolling to top:', error);
      // Fallback to immediate scroll
      window.scrollTo(0, 0);
    } finally {
      // Clear the flag shortly to re-enable natural updates
      setTimeout(() => { this.programmaticScroll = false; }, 300);
    }
  }
  getSlideTargetElement(slide, container) {
    if (!slide) return null;
    const isInContainer = (el) => !!el && (!!container ? container.contains(el) : true);

    // Prefer the main element for block slides
    if (slide.type === 'block') {
      if (isInContainer(slide.element)) return slide.element;
    }

    // For sections, pick the first element inside the scroll container
    if (slide.type === 'section' && Array.isArray(slide.elements)) {
      for (const el of slide.elements) {
        if (isInContainer(el)) return el;
      }
    }

    // Fall back to the first available element
    return slide.type === 'block' ? slide.element : (slide.elements && slide.elements[0]) || null;
  }


  // Support custom scroll container (e.g., Notion app shell)
  getScrollContainer() {
    // Try common Notion scroll container selectors; fall back to window/document
    const candidates = [
      document.querySelector('.notion-frame'),
      document.scrollingElement,
      document.documentElement,
      document.body
    ];
    return candidates.find(Boolean);
  }

  getNearestScrollable(element) {
    let el = element && element.parentElement;
    while (el && el !== document.body && el !== document.documentElement) {
      try {
        const style = window.getComputedStyle(el);
        const overflowY = style && style.overflowY;
        const isScrollable = (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay')
          && (el.scrollHeight - 1 > el.clientHeight);
        if (isScrollable) return el;
      } catch (_) {}
      el = el.parentElement;
    }
    return document.scrollingElement || document.documentElement;
  }

  scrollElementIntoContainer(targetElement, container, align = 'start') {
    if (!targetElement || !container) return false;
    try {
      const targetRect = targetElement.getBoundingClientRect();
      const containerRect = container.getBoundingClientRect();
      const deltaTop = targetRect.top - containerRect.top;
      const targetTop = container.scrollTop + deltaTop - (align === 'center' ? (container.clientHeight / 2) : 0);

      if (typeof container.scrollTo === 'function') {
        container.scrollTo({ top: Math.max(0, targetTop), behavior: 'smooth' });
      } else {
        container.scrollTop = Math.max(0, targetTop);
      }

      // Verify after a tick
      setTimeout(() => {
        const newTargetRect = targetElement.getBoundingClientRect();
        const newDelta = newTargetRect.top - container.getBoundingClientRect().top;
        if (Math.abs(newDelta) > 50) {
          // fallback
          targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
      }, 120);
      return true;
    } catch (e) {
      try {
        targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
        return true;
      } catch (_) {}
    }
    return false;
  }

  forceScrollTo(scrollPosition, fallbackElement = null, container = null) {
    const target = container || this.getScrollContainer();
    console.log('Notion Presentation Mode: Force scrolling to', scrollPosition, 'in container', target === window ? 'window' : target.nodeName || 'document');

    try {
      // Method 1: smooth scroll on container
      if (target === document.body || target === document.documentElement) {
        window.scrollTo({ top: scrollPosition, behavior: 'smooth' });
      } else if (target && typeof target.scrollTo === 'function') {
        target.scrollTo({ top: scrollPosition, behavior: 'smooth' });
      }

      // Verify and fallback to immediate scroll
      setTimeout(() => {
        const currentScroll = target === document.body || target === document.documentElement
          ? (window.pageYOffset || document.documentElement.scrollTop)
          : target.scrollTop;
        if (Math.abs(currentScroll - scrollPosition) > 50) {
          console.log('Notion Presentation Mode: Smooth scroll failed, trying immediate scroll');
          if (target === document.body || target === document.documentElement) {
            window.scrollTo(0, scrollPosition);
          } else {
            target.scrollTop = scrollPosition;
          }
        }
      }, 100);

      // Final fallback with scrollIntoView if element provided
      if (fallbackElement) {
        setTimeout(() => {
          const currentScroll = target === document.body || target === document.documentElement
            ? (window.pageYOffset || document.documentElement.scrollTop)
            : target.scrollTop;
          if (Math.abs(currentScroll - scrollPosition) > 50) {
            console.log('Notion Presentation Mode: All scroll methods failed, using scrollIntoView');
            fallbackElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
          }
        }, 300);
      }

    } catch (error) {
      console.log('Notion Presentation Mode: Scroll error, using fallback', error);
      if (fallbackElement) {
        fallbackElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    }
  }



  highlightCurrentSlide() {
    // Remove previous slide indicator
    const existingIndicator = document.querySelector('.notion-slide-indicator');
    if (existingIndicator) {
      existingIndicator.remove();
    }

    // Add current slide indicator (avoid modifying Notion elements directly)
    if (this.currentSlideIndex >= 0 && this.currentSlideIndex < this.slides.length) {
      const slide = this.slides[this.currentSlideIndex];
      let targetElement;

      if (slide.type === 'block') {
        targetElement = slide.element;
      } else if (slide.type === 'section' && slide.elements.length > 0) {
        targetElement = slide.elements[0];
      }

      if (targetElement) {
        // Create a visual indicator next to the current slide
        const indicator = document.createElement('div');
        indicator.className = 'notion-slide-indicator';
        indicator.style.cssText = `
          position: absolute;
          left: -15px;
          top: 0;
          width: 4px;
          height: 100%;
          background: #4299e1;
          border-radius: 2px;
          z-index: 1000;
          pointer-events: none;
        `;

        // Position relative to target element
        const rect = targetElement.getBoundingClientRect();
        indicator.style.position = 'fixed';
        indicator.style.left = (rect.left - 15) + 'px';
        indicator.style.top = rect.top + 'px';
        indicator.style.height = Math.min(rect.height, 100) + 'px';

        document.body.appendChild(indicator);
      }
    }
  }

  updateSlideIndicators() {
    // Update slide number
    if (this.slideNumberElement) {
      this.slideNumberElement.textContent = `${this.currentSlideIndex + 1} / ${this.slides.length}`;
    }

    // Update progress bar
    if (this.progressBarElement) {
      const progress = this.slides.length > 0 ? ((this.currentSlideIndex + 1) / this.slides.length) * 100 : 0;
      const fill = this.progressBarElement.querySelector('.notion-progress-bar-fill');
      if (fill) {
        fill.style.width = `${progress}%`;
      }
    }
  }

  handleMessage(request, _sender, _sendResponse) {
    switch (request.action) {
      case 'togglePresentation':
        this.settings.presentationMode = request.enabled;
        if (request.enabled) {
          this.enablePresentationMode();
        } else {
          this.disablePresentationMode();
        }
        break;

      case 'toggleSlideNumbers':
        this.settings.showSlideNumbers = request.enabled;
        this.updateUIVisibility();
        break;

      case 'toggleProgressBar':
        this.settings.showProgressBar = request.enabled;
        this.updateUIVisibility();
        break;

      case 'toggleNavigationButtons':
        this.settings.showNavigationButtons = request.enabled;
        this.updateUIVisibility();
        break;

      case 'toggleEditInPresentation':
        this.settings.allowEditInPresentation = request.enabled;
        this.applyPresentationToggles();
        break;

      case 'toggleHlinesInPresentation':
        this.settings.showHlinesInPresentation = request.enabled;
        this.applyPresentationToggles();
        break;

      case 'toggleNotesVisibility':
        this.settings.hideNotesContent = request.enabled;
        this.applyNotesSettings();
        break;

      case 'toggleNotesControls':
        this.settings.showNotesControls = request.enabled;
        this.updateUIVisibility();
        break;
    }
  }

  // Debug function to help troubleshoot Notes detection
  debugNotes() {
    console.log('=== NOTES DEBUG INFO ===');
    console.log('Hide Notes Content setting:', this.settings.hideNotesContent);
    console.log('Body classes:', document.body.className);

    const toggleBlocks = document.querySelectorAll('.notion-toggle-block');
    console.log('Total toggle blocks found:', toggleBlocks.length);

    toggleBlocks.forEach((block, index) => {
      const titleElement = block.querySelector('[data-content-editable-leaf="true"]');
      const title = titleElement ? titleElement.textContent.trim() : 'No title';
      const blockId = block.getAttribute('data-block-id');
      const isTracked = this.notesBlockIds.has(blockId);
      console.log(`Toggle ${index + 1}: "${title}" - Tracked as Notes: ${isTracked} - ID: ${blockId}`);
    });

    const notesBlocks = this.findNotesBlocks();
    console.log('Notes blocks detected:', notesBlocks.length);

    console.log('Tracked Notes block IDs:', Array.from(this.notesBlockIds));

    const dynamicCSS = document.getElementById('notion-notes-dynamic-css');
    console.log('Dynamic CSS applied:', !!dynamicCSS);
    if (dynamicCSS) {
      console.log('Dynamic CSS content length:', dynamicCSS.textContent.length);
    }

    console.log('=== END DEBUG INFO ===');
  }
}

// Initialize when script loads
if (window.location.hostname.includes('notion.so')) {
  new NotionPresentationMode();
}