// Wait for #top-level-buttons-computed to exist with exponential backoff
(function waitForElement() {
	let delay = 10; // Start with 10ms
	const maxDelay = 10000; // Maximum delay of 10 seconds

	function apply_togglePlaylistHeight() {
		//const targetElement = document.querySelector('#top-level-buttons-computed');
		const targetElement = document.querySelector(
			'ytd-menu-renderer.ytd-playlist-panel-renderer'
		);
		if (!targetElement) {
			console.warn(
				'Target element ytd-menu-renderer.ytd-playlist-panel-renderer not found'
			);
			return;
		}

		// Check if button already exists to prevent duplicates
		if (targetElement.querySelector('.playlist-height-toggle')) {
			console.log('Toggle button already exists, removing existing button');
			targetElement.querySelector('.playlist-height-toggle').remove();
		}

		// Create the toggle button
		const toggleButton = document.createElement('button');
		toggleButton.className = 'playlist-height-toggle';
		toggleButton.textContent = '⮷'; // Initial state - down arrow

		// Set button styles
		toggleButton.style.cssText = `
        color: white;
        background: none;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        font-size: 28px;
        padding: 2px 8px 8px 8px;
        transition: background-color 0.2s ease;
        line-height: 40px;
        height: 40px;
        width: 40px;
    `;

		// Add hover effect
		toggleButton.addEventListener('mouseenter', () => {
			toggleButton.style.backgroundColor = 'rgb(255 255 255 / 0.25)';
		});

		toggleButton.addEventListener('mouseleave', () => {
			toggleButton.style.backgroundColor = 'transparent';
		});

		// Track current state (true = expanded/auto, false = collapsed/600px)
		let isExpanded = false;

		// Add click event listener
		toggleButton.addEventListener('click', () => {
			const watchFlexy = document.querySelector('ytd-watch-flexy');
			if (!watchFlexy) {
				console.warn('ytd-watch-flexy element not found');
				return;
			}

			if (isExpanded) {
				// Switch to collapsed state
				watchFlexy.style.setProperty(
					'--ytd-watch-flexy-panel-max-height',
					'600px'
				);
				toggleButton.textContent = '⮷'; // Down arrow
				isExpanded = false;
			} else {
				// Switch to expanded state
				watchFlexy.style.setProperty(
					'--ytd-watch-flexy-panel-max-height',
					'auto'
				);
				toggleButton.textContent = '⮴'; // Up arrow
				isExpanded = true;
			}
		});

		// Add button as last child
		targetElement.appendChild(toggleButton);
		console.log(targetElement);
	}

	function checkForElement() {
		const element = document.querySelector('#top-level-buttons-computed');
		if (element) {
			apply_togglePlaylistHeight();
			return;
		}

		// Element not found, schedule next check with increased delay
		setTimeout(checkForElement, delay);

		// Increase delay for next iteration (exponential backoff)
		delay = Math.min(delay * 1.5, maxDelay);
	}

	checkForElement();
})();