import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { Toaster } from 'react-hot-toast';
import { AuthProvider } from './contexts/AuthContext';
import { SocketProvider } from './contexts/SocketContext';
import APP_CONFIG from './config/app';
import Layout from './components/Layout';
import Dashboard from './pages/Dashboard';
import MapView from './pages/MapView';
import Devices from './pages/Devices';
import Detections from './pages/Detections';
import Alerts from './pages/Alerts';
import Debug from './pages/Debug';
import Login from './pages/Login';
import ProtectedRoute from './components/ProtectedRoute';

function App() {
  return (
    <AuthProvider>
      <SocketProvider>
        <Router basename={APP_CONFIG.basePath}>
          <div className="App">
            <Toaster 
              position="top-center"
              toastOptions={{
                duration: 3000, // Shorter duration for mobile
                style: {
                  background: '#363636',
                  color: '#fff',
                  maxWidth: '90vw', // Limit width on mobile
                  fontSize: '14px', // Smaller text on mobile
                },
                success: {
                  duration: 2000, // Even shorter for success
                  iconTheme: {
                    primary: '#4ade80',
                    secondary: '#fff',
                  },
                },
                error: {
                  duration: 4000, // Moderate duration for errors
                  iconTheme: {
                    primary: '#ef4444',
                    secondary: '#fff',
                  },
                },
              }}
              // Limit number of visible toasts to prevent screen overflow
              gutter={8}
              containerStyle={{
                top: '1rem',
                left: '1rem',
                right: '1rem',
                bottom: 'auto',
              }}
              // Custom container class for responsive styling
              containerClassName="toast-container"
            />
            
            <Routes>
              <Route path="/login" element={<Login />} />
              
              <Route path="/" element={
                <ProtectedRoute>
                  <Layout />
                </ProtectedRoute>
              }>
                <Route index element={<Dashboard />} />
                <Route path="map" element={<MapView />} />
                <Route path="devices" element={<Devices />} />
                <Route path="detections" element={<Detections />} />
                <Route path="alerts" element={<Alerts />} />
                <Route path="debug" element={<Debug />} />
              </Route>
            </Routes>
          </div>
        </Router>
      </SocketProvider>
    </AuthProvider>
  );
}

export default App;