/**
 * Main Admin App Component
 *
 * React SPA application for EVAS admin pages
 *
 * @package Everyone_Accessibility_Suite
 */

import { HashRouter, Routes, Route, Navigate } from 'react-router-dom';
import Layout from './components/Layout';
import DashboardPage from './pages/DashboardPage';
import ComponentsPage from './pages/ComponentsPage';
import SettingsPage from './pages/SettingsPage';
import AccessibilityPage from './pages/AccessibilityPage';
import ModuleSettingsPage from './pages/ModuleSettingsPage';
import CustomizerPage from './pages/CustomizerPage';
import UsageAnalyticsPage from './pages/UsageAnalyticsPage';
import AnalyzerPage from './pages/AnalyzerPage';
import StatementPage from './pages/StatementPage';
import useAdminRoutes from './hooks/use-admin-routes';

/**
 * Get the correct component for a module route
 */
const getModuleComponent = (path) => {
	switch (path) {
		case '/customizer':
			return <CustomizerPage />;
		case '/usage-analytics':
			return <UsageAnalyticsPage />;
		case '/analyzer':
			return <AnalyzerPage />;
		case '/statement':
			return <StatementPage />;
		default:
			return <ModuleSettingsPage />;
	}
};

function App() {
	// Same subscription as the sidebar: a module enabled on the Components
	// screen has to get its <Route> registered too, or the freshly added menu
	// entry would land on an empty screen until the page is reloaded.
	const routes = useAdminRoutes();

	return (
		<HashRouter>
			<Layout>
				<Routes>
					<Route path="/" element={<Navigate to="/dashboard" replace />} />
					{/* '/analytics' used to duplicate '/usage-analytics' and was
					    removed; keep old links working instead of dropping them
					    onto an empty screen. */}
					<Route path="/analytics" element={<Navigate to="/usage-analytics" replace />} />
					<Route path="/dashboard" element={<DashboardPage />} />
					<Route path="/components" element={<ComponentsPage />} />
					<Route path="/settings" element={<SettingsPage />} />
					<Route path="/accessibility" element={<AccessibilityPage />} />
					<Route path="/customizer" element={<CustomizerPage />} />
					<Route path="/usage-analytics" element={<UsageAnalyticsPage />} />
					{/* Dynamic module settings pages */}
					{routes.map((route) => (
						<Route
							key={route.path}
							path={route.path}
							element={getModuleComponent(route.path)}
						/>
					))}
					{/* Per-page analyzer detail. Registered separately because
					    the dynamic routes above only match exact paths, and the
					    dashboard card deep-links straight to one page's issues. */}
					{routes.some((route) => route.path === '/analyzer') && (
						<Route path="/analyzer/:pageKey" element={<AnalyzerPage />} />
					)}
				</Routes>
			</Layout>
		</HashRouter>
	);
}

export default App;