import React from 'react';
import { Routes, Route, useNavigate } from 'react-router-dom';
import PluginList from './pages/PluginList';
import Dashboard from './pages/Dashboard';
import Log from './pages/Log';
import Scan from './pages/Scan';
import Wizards from './pages/Wizards';
import Setting from './pages/Setting';
import Documentation from './pages/Documentation';
import WooAnalytics from './pages/WooAnalytics';
import { ran_setup_wizard } from '../src/Helpers';

const App = () => {
    const navigate = useNavigate();
    const ran_setup = ran_setup_wizard();

    // Handle navigation to settings with specific tab
    const handleVisitTab = (tabKey) => {
        // Store the tab to activate in localStorage
        localStorage.setItem("wpnts_activeTab", tabKey);
        // Navigate to settings page
        navigate('/settings');
        
        // Add a small delay to ensure the settings page loads, then scroll and shake
        setTimeout(() => {
            // Scroll to the WooCommerce tab and add shake effect
            const wooTab = document.querySelector('.tab.active');
            if (wooTab) {
                wooTab.scrollIntoView({ behavior: 'smooth', block: 'center' });
                wooTab.classList.add('shake-animation');
                
                // Remove shake animation after it completes
                setTimeout(() => {
                    wooTab.classList.remove('shake-animation');
                }, 1000);
            }
            
            // Also scroll to and shake the WooCommerce Analytics toggle if it exists
            setTimeout(() => {
                const analyticsToggle = document.querySelector('#wooanalytics');
                const analyticsContainer = document.querySelector('.woo-supportSwitch-4');
                const targetElement = analyticsToggle || analyticsContainer;
                
                if (targetElement) {
                    targetElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    
                    // Add shake to the parent container for better visibility
                    const containerToShake = targetElement.closest('.toggle-switch-container') || targetElement.parentElement || targetElement;
                    containerToShake.classList.add('shake-animation');
                    
                    setTimeout(() => {
                        containerToShake.classList.remove('shake-animation');
                    }, 1000);
                }
            }, 500);
        }, 100);
    };

    return (
		<>
			<Routes>
                <Route 
                    path="/" 
                    element={ran_setup ? <Dashboard /> : <Wizards />}
                />

                <Route 
                    path="/log" 
                    element={<Log />} 
                />

                <Route 
                    path="/scanner" 
                    element={<Scan />} 
                />

                
                <Route 
                    path="/author" 
                    element={<PluginList />} 
                />

                <Route 
                    path="/settings" 
                    element={<Setting />} />
                
                <Route 
                path="/doc" 
                element={<Documentation />} 
                />

                <Route 
                path="/woo-analytics" 
                element={<WooAnalytics onVisitTab={handleVisitTab} />} 
                />

            </Routes>
		</>
	);
 
}


export default App; 