document.addEventListener('DOMContentLoaded', function() {
    // Toggle dark mode
    const darkModeToggle = document.createElement('button');
    darkModeToggle.innerHTML = '<i data-feather="moon"></i>';
    darkModeToggle.className = 'p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200';
    darkModeToggle.addEventListener('click', () => {
        document.documentElement.classList.toggle('dark');
        localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
        feather.replace();
    });

    // Check for saved theme preference
    if (localStorage.getItem('darkMode') === 'true') {
        document.documentElement.classList.add('dark');
    }

    // Initialize tooltips
    const initTooltips = () => {
        const tooltipElements = document.querySelectorAll('[data-tooltip]');
        tooltipElements.forEach(el => {
            const tooltip = document.createElement('div');
            tooltip.textContent = el.getAttribute('data-tooltip');
            tooltip.className = 'absolute z-10 invisible bg-gray-900 text-white text-xs rounded py-1 px-2 bottom-full mb-2 whitespace-nowrap';
            el.appendChild(tooltip);
            
            el.addEventListener('mouseenter', () => {
                tooltip.classList.remove('invisible');
            });
            el.addEventListener('mouseleave', () => {
                tooltip.classList.add('invisible');
            });
        });
    };

    // Initialize color picker functionality
    const colorBoxes = document.querySelectorAll('.grid > div:not(:first-child)');
    colorBoxes.forEach(box => {
        box.addEventListener('click', function() {
            // In a real app, this would open a color picker
            const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
            this.style.backgroundColor = randomColor;
        });
    });

    // Find the navbar and append dark mode toggle
    const navbar = document.querySelector('custom-navbar');
    if (navbar) {
        navbar.shadowRoot.querySelector('.navbar-actions').appendChild(darkModeToggle);
    }

    // Refresh feather icons after dark mode toggle
    document.addEventListener('click', () => {
        setTimeout(feather.replace, 100);
    });

    // Initialize everything
    initTooltips();
    feather.replace();
});