import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import ThemeProvider from './store/ThemeContext';
import AuthProvider from './store/AuthContext';
import MainLayout from './layouts/MainLayout';
import DashboardPage from './pages/DashboardPage';
import RequestLogsPage from './pages/monitoring/RequestLogsPage';
import RequestLogDetailPage from './pages/monitoring/RequestLogDetailPage';
import ServiceStatusPage from './pages/monitoring/ServiceStatusPage';
import ServiceStatusDetailPage from './pages/monitoring/ServiceStatusDetailPage';
import MyKeysPage from './pages/apikeys/MyKeysPage';
import KeyRequestPage from './pages/apikeys/KeyRequestPage';
import KeyAdminPage from './pages/apikeys/KeyAdminPage';
import ServicesPage from './pages/admin/ServicesPage';
import UsersPage from './pages/admin/UsersPage';
import TenantsPage from './pages/admin/TenantsPage';
import ServiceStatsPage from './pages/statistics/ServiceStatsPage';
import UserStatsPage from './pages/statistics/UserStatsPage';
import ApiStatsPage from './pages/statistics/ApiStatsPage';
import TenantStatsPage from './pages/statistics/TenantStatsPage';
import UsageTrendPage from './pages/statistics/UsageTrendPage';
import ApiHubLayout from './layouts/ApiHubLayout';
import ApiHubDashboardPage from './pages/apihub/ApiHubDashboardPage';
import ApiHubServicePage from './pages/apihub/ApiHubServicePage';
import ApiHubApiDetailPage from './pages/apihub/ApiHubApiDetailPage';
import NotFoundPage from './pages/NotFoundPage';
import RoleGuard from './components/RoleGuard';

const BASE_PATH = '/snp-connection';

const App = () => {
  return (
    <BrowserRouter basename={BASE_PATH}>
      <ThemeProvider>
      <AuthProvider>
        <Routes>
          <Route element={<MainLayout />}>
            <Route path="/" element={<Navigate to="/dashboard" replace />} />
            <Route path="/dashboard" element={<DashboardPage />} />
            <Route path="/monitoring/request-logs" element={<RequestLogsPage />} />
            <Route path="/monitoring/request-logs/:id" element={<RequestLogDetailPage />} />
            <Route path="/monitoring/service-status" element={<ServiceStatusPage />} />
            <Route path="/monitoring/service-status/:serviceId" element={<ServiceStatusDetailPage />} />
            <Route path="/statistics/services" element={<ServiceStatsPage />} />
            <Route path="/statistics/users" element={<UserStatsPage />} />
            <Route path="/statistics/apis" element={<ApiStatsPage />} />
            <Route path="/statistics/tenants" element={<TenantStatsPage />} />
            <Route path="/statistics/usage-trend" element={<UsageTrendPage />} />
            <Route path="/apikeys/my-keys" element={<MyKeysPage />} />
            <Route path="/apikeys/request" element={<KeyRequestPage />} />
            <Route path="/apikeys/admin" element={<RoleGuard allowedRoles={['ADMIN', 'MANAGER']}><KeyAdminPage /></RoleGuard>} />
            <Route path="/admin/services" element={<RoleGuard allowedRoles={['ADMIN']}><ServicesPage /></RoleGuard>} />
            <Route path="/admin/users" element={<RoleGuard allowedRoles={['ADMIN']}><UsersPage /></RoleGuard>} />
            <Route path="/admin/tenants" element={<RoleGuard allowedRoles={['ADMIN']}><TenantsPage /></RoleGuard>} />
            <Route path="*" element={<NotFoundPage />} />
          </Route>
          <Route element={<ApiHubLayout />}>
            <Route path="/api-hub" element={<ApiHubDashboardPage />} />
            <Route path="/api-hub/services/:serviceId" element={<ApiHubServicePage />} />
            <Route path="/api-hub/services/:serviceId/apis/:apiId" element={<ApiHubApiDetailPage />} />
          </Route>
        </Routes>
      </AuthProvider>
      </ThemeProvider>
    </BrowserRouter>
  );
};

export default App;