Rejoink-TAB/js/onboarding.js

// Onboarding module
const onboarding = {
    // Core functions
    isComplete: () => {
        return Storage.get('onboardingComplete') === true;
    },

    start: () => {
        const modal = document.getElementById('onboarding-modal');
        const mainContent = document.getElementById('main-content');
        const importDataBtn = document.getElementById('import-data-btn');
        const startFreshBtn = document.getElementById('start-fresh-btn');
        const fileInput = document.getElementById('onboarding-import');
        
        if (!onboarding.isComplete()) {
            modal.classList.remove('hidden');
            modal.classList.add('active');
            mainContent.classList.add('hidden');
            
            startFreshBtn.addEventListener('click', () => {
                document.querySelector('[data-step="1"]').classList.add('hidden');
                document.querySelector('[data-step="2"]').classList.remove('hidden');
                document.getElementById('next-step-btn').addEventListener('click', () => onboarding.nextStep(2));
            });
            
            importDataBtn.addEventListener('click', () => fileInput.click());
            
            // Data import handling
            fileInput.addEventListener('change', async (e) => {
                if (e.target.files.length > 0) {
                    try {
                        const file = e.target.files[0];
                        const text = await file.text();
                        const data = JSON.parse(text);
                        
                        if (!data.settings || typeof data.settings !== 'object' ||
                            !Array.isArray(data.shortcuts)) {
                            throw new Error('Invalid data structure');
                            return;
                        }

                        Object.entries(data.settings).forEach(([key, value]) => {
                            Storage.set(key, value);
                        });

                        Storage.set('shortcuts', data.shortcuts);

                        if (data.keybinds) {
                            Storage.set('keybinds', data.keybinds);
                        }

                        // Initialize components
                        search.init();
                        shortcuts.init();
                        settings.init();
                        updateGreeting();
                        document.body.setAttribute('data-theme', data.settings.theme || 'light');

                        // Update UI visibility
                        ['greeting', 'search', 'shortcuts', 'addShortcut'].forEach(element => {
                            const isVisible = data.settings[`show_${element}`];
                            const elementNode = document.getElementById(element === 'search' ? 'search-container' : element);
                            if (elementNode) {
                                elementNode.style.display = isVisible === false ? 'none' : 'block';
                            }
                        });

                        Storage.set('onboardingComplete', true);
                        modal.classList.add('hidden');
                        mainContent.classList.remove('hidden');
                        
                        const userName = Storage.get('userName') || 'Guest';
                        notifications.show(`Welcome back, ${userName}! 👋`, 'success');
                    } catch (error) {
                        notifications.show('Failed to import data: Invalid file format!', 'error');
                        fileInput.value = '';
                    }
                }
            });

            // Search engine selection
            const engines = document.querySelectorAll('.search-engine-option');
            engines.forEach(engine => {
                engine.addEventListener('click', () => {
                    engines.forEach(e => e.classList.remove('selected'));
                    engine.classList.add('selected');
                });
            });

            document.getElementById('complete-setup-btn').addEventListener('click', onboarding.complete);
        } else {
            modal.classList.add('hidden');
            mainContent.classList.remove('hidden');
        }
    },

    // Onboarding step navigation
    nextStep: (currentStep) => {
        const currentStepEl = document.querySelector(`[data-step="${currentStep}"]`);
        const nextStepEl = document.querySelector(`[data-step="${currentStep + 1}"]`);
        
        if (currentStep === 2) {
            const name = document.getElementById('user-name').value.trim();
            if (!name) {
                notifications.show('Please enter your name!', 'error');
                return;
            }
            Storage.set('userName', name);
        }
        
        currentStepEl.classList.add('hidden');
        nextStepEl.classList.remove('hidden');
        nextStepEl.classList.add('visible');
    },

    // Finalize onboarding
    complete: () => {
        const selectedEngine = document.querySelector('.search-engine-option.selected');
        if (!selectedEngine) {
            notifications.show('Please select a search engine!', 'error');
            return;
        }
        
        const searchEngine = selectedEngine.dataset.engine;
        Storage.set('searchEngine', searchEngine);
        Storage.set('onboardingComplete', true);
        
        const modal = document.getElementById('onboarding-modal');
        const mainContent = document.getElementById('main-content');
        
        modal.classList.add('hidden');
        mainContent.classList.remove('hidden');
        notifications.show('Welcome to your new tab! 👋', 'success');
        updateGreeting();
    }
};