import React, { useEffect } from 'react';
import { HashRouter, BrowserRouter, Routes, Route } from 'react-router-dom';
import Dashboard from './components/Dashboard';
import Subscriptions from './components/Subscriptions';
import Settings from './components/Settings';
import Setup from './components/Setup';
import Support from './components/Support';
import Layout from './components/Layout';
import Onboarding from './components/Onboarding';

export default function App() {
    // Determine router 
    const isWP = !!window.InvizoConfig;
    const Router = isWP ? HashRouter : BrowserRouter;

    // Check onboarding status
    const needsOnboarding = isWP && window.InvizoConfig.onboarding_completed === '0';

    useEffect(() => {
        // Sync WP Sidebar clicks (initial page load) to HashRouter automatically
        if (isWP && window.InvizoConfig.initialRoute && !window.location.hash) {
            window.location.hash = window.InvizoConfig.initialRoute;
        }
    }, [isWP]);

    if (needsOnboarding) {
        return <Onboarding />;
    }

    return (
        <Router>
            <Layout>
                <Routes>
                    <Route path="/" element={<Dashboard />} />
                    <Route path="/subscriptions" element={<Subscriptions />} />
                    <Route path="/settings" element={<Settings />} />
                    <Route path="/setup" element={<Setup />} />
                    <Route path="/support" element={<Support />} />
                </Routes>
            </Layout>
        </Router>
    );
}
