/**
 * External dependencies.
 */
import { Route, Routes, Navigate, useLocation } from 'react-router-dom';
import { useEffect } from 'react';
import { Toaster } from 'react-hot-toast';

/**
 * Internal dependencies.
 */
import { Setup, Dashboard } from './pages';
import { GeneralSettings, DataOptions, SyncLogs } from './pages/settings';
import SyncBannerDemo from './pages/SyncBannerDemo';
import { updateAdminMenuHighlight } from '../utils/menuHighlight';

// Scroll to top on route change and update menu highlight
const ScrollToTop = () => {
    const { pathname } = useLocation();

    useEffect(() => {
        window.scrollTo(0, 0);
        updateAdminMenuHighlight(pathname);
    }, [pathname]);

    return null;
};

const App = () => {
    // Check if setup is complete
    const checkCredentials = window.openAssetPluginState?.checkCredentials || false;
    const defaultRoute = checkCredentials ? '/dashboard' : '/setup';
    const showSyncBannerDemo = window.openAssetPluginState?.showSyncBannerDemo || false;

    return (
        <>
            <ScrollToTop />
            <Toaster 
                position="top-right"
                containerStyle={{
                    top: '112px', // 32px WP admin bar + 64px teal header + 16px margin
                    right: '24px',
                }}
                toastOptions={{
                    duration: 3000,
                    style: {
                        background: '#fff',
                        color: '#0a0d12',
                        boxShadow: '0px 4px 6px -1px rgba(10, 13, 18, 0.1), 0px 2px 4px -1px rgba(10, 13, 18, 0.06)',
                        borderRadius: '8px',
                        border: '1px solid #e9eaeb',
                        padding: '12px 16px',
                        fontSize: '14px',
                        fontWeight: '500',
                    },
                    success: {
                        iconTheme: {
                            primary: '#2563eb',
                            secondary: '#fff',
                        },
                        style: {
                            border: '1px solid #2563eb',
                        },
                    },
                    error: {
                        iconTheme: {
                            primary: '#ef4444',
                            secondary: '#fff',
                        },
                        style: {
                            border: '1px solid #ef4444',
                        },
                    },
                    loading: {
                        iconTheme: {
                            primary: '#2563eb',
                            secondary: '#fff',
                        },
                    },
                }}
            />
            <Routes>
                <Route path="/" element={<Navigate to={defaultRoute} replace />} />
                <Route path="/setup" element={<Setup />} />
                <Route path="/dashboard" element={<Dashboard />} />
                <Route path="/settings" element={<GeneralSettings />} />
                <Route path="/data-options" element={<DataOptions />} />
                <Route path="/sync-logs" element={<SyncLogs />} />
                {showSyncBannerDemo && (
                    <Route path="/sync-banner-demo" element={<SyncBannerDemo />} />
                )}
            </Routes>
        </>
    )
}

export default App;