import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { createTheme, ThemeProvider, CssBaseline } from '@mui/material';
import { AuthProvider } from './context/AuthContext';
import PrivateRoute from './components/PrivateRoute';
import Layout from './components/Layout';
import LoginPage from './pages/LoginPage';
import RegisterPage from './pages/RegisterPage';
import UsersPage from './pages/UsersPage';
import PostsPage from './pages/PostsPage';
import CreateNewsPage from './pages/CreateNewsPage';
import OrganizationPage from './pages/OrganizationPage';
import PushPage from './pages/PushPage';
import HomePage from './pages/HomePage';
import EditOrganizationPage from "./pages/EditOrganizationPage.jsx";

const theme = createTheme({
  palette: {
    mode: 'light',
    primary: { main: '#1976d2' },
    background: { default: '#f5f5f5' },
  },
  shape: { borderRadius: 8 },
  typography: {
    fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif',
  },
  components: {
    MuiButton: {
      styleOverrides: {
        root: { textTransform: 'none', fontWeight: 500 },
      },
    },
    MuiCard: {
      styleOverrides: {
        root: { boxShadow: '0 1px 3px rgba(0,0,0,0.08)', border: '1px solid #e0e0e0' },
      },
    },
  },
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <AuthProvider>
        <BrowserRouter>
          <Routes>
            <Route path="/login" element={<LoginPage />} />
            <Route path="/register" element={<RegisterPage />} />
            <Route
              path="/"
              element={
                <PrivateRoute>
                  <Layout />
                </PrivateRoute>
              }
            >
              <Route index element={<HomePage />} />
              <Route
                path="users"
                element={
                  <PrivateRoute allowedRoles={['ADMIN']}>
                    <UsersPage />
                  </PrivateRoute>
                }
              />
              <Route
                path="posts"
                element={
                  <PrivateRoute allowedRoles={['ADMIN', 'REPORTER']}>
                    <PostsPage />
                  </PrivateRoute>
                }
              />
              <Route
                  path="organizations/:id/edit"
                  element={
                      <PrivateRoute allowedRoles={['ADMIN', 'SITE_OWNER']}>
                          <EditOrganizationPage/>
                      </PrivateRoute>
                  }
              />
              <Route
                path="organizations"
                element={
                  <PrivateRoute allowedRoles={['ADMIN', 'SITE_OWNER']}>
                    <OrganizationPage />
                  </PrivateRoute>
                }
              />
              <Route
                path="posts/create"
                element={
                  <PrivateRoute allowedRoles={['ADMIN', 'REPORTER']}>
                    <CreateNewsPage />
                  </PrivateRoute>
                }
              />
              <Route
                path="push"
                element={
                  <PrivateRoute allowedRoles={['ADMIN']}>
                    <PushPage />
                  </PrivateRoute>
                }
              />
            </Route>
          </Routes>
        </BrowserRouter>
      </AuthProvider>
    </ThemeProvider>
  );
}