import { BrowserRouter as Router, Routes, Route, Navigate, useLocation } from 'react-router-dom';
import { AuthProvider } from './context/AuthContext';
import { useAuth } from './context/useAuth';
import { SystemSettingsProvider } from './context/SystemSettingsContext';
import { NotificationProvider } from './contexts/NotificationContext';
import { Layout } from './components/Layout';
import { ProtectedRoute } from './components/ProtectedRoute';
import { ToastProvider } from './components/Toast';
import { ProjectList } from './pages/ProjectList';
import { ProjectDetails } from './pages/ProjectDetails';
import { SchemesList } from './pages/SchemesList';
import { InspectionsList } from './pages/InspectionsList';
import { DataSheetLibrary } from './pages/DataSheetLibrary';
import { YieldStudyDashboard } from './pages/YieldStudyDashboard';
import { AdminDashboard } from './pages/AdminDashboard';
import { DeveloperDashboard } from './pages/DeveloperDashboard';
import { CalculatorDashboard } from './pages/CalculatorDashboard';
import { StockDashboard } from './pages/StockDashboard';
import { GuestDashboard } from './pages/GuestDashboard';
import { Login } from './pages/Login';
import InstrumentList from './pages/InstrumentList';

const DeveloperRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const { isDeveloper, isLoading } = useAuth();

  if (isLoading) return null;
  if (!isDeveloper()) return <Navigate to="/" replace />;

  return <>{children}</>;
};

const AppContent: React.FC = () => {
  const { isSignedIn, isLoading } = useAuth();
  const location = useLocation();

  if (isLoading) {
    return (
      <div className="min-h-screen bg-surface-soft flex items-center justify-center">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
      </div>
    );
  }

  // If not signed in and not on the callback page, show login
  if (!isSignedIn && location.pathname !== '/callback') {
    return <Login />;
  }

  return (
    <ToastProvider>
      <SystemSettingsProvider>
        <NotificationProvider>
          <Layout>
            <Routes>
              <Route path="/" element={<ProjectList />} />
              <Route path="/login" element={<Login />} />
              <Route path="/guest-dashboard" element={<GuestDashboard />} />
              <Route path="/projects" element={<ProjectList />} />
              <Route path="/project/:id" element={<ProjectDetails />} />
              <Route path="/schemes" element={<SchemesList />} />
              <Route path="/inspections" element={<InspectionsList />} />
              <Route path="/library" element={
                <ProtectedRoute allowedRoles={['user', 'admin']}>
                  <DataSheetLibrary />
                </ProtectedRoute>
              } />
              <Route path="/instruments" element={
                <ProtectedRoute allowedRoles={['user', 'admin', 'guest']}>
                  <InstrumentList />
                </ProtectedRoute>
              } />
              <Route path="/yield-study" element={
                <ProtectedRoute allowedRoles={['user', 'admin']}>
                  <YieldStudyDashboard />
                </ProtectedRoute>
              } />
              <Route path="/calculators" element={<CalculatorDashboard />} />
              <Route
                path="/admin"
                element={
                  <ProtectedRoute allowedRoles={['admin']}>
                    <AdminDashboard />
                  </ProtectedRoute>
                }
              />
              <Route
                path="/stock"
                element={
                  <ProtectedRoute allowedRoles={['user', 'admin', 'guest']}>
                    <StockDashboard />
                  </ProtectedRoute>
                }
              />
              <Route
                path="/developer"
                element={
                  <DeveloperRoute>
                    <DeveloperDashboard />
                  </DeveloperRoute>
                }
              />
              <Route path="*" element={<Navigate to="/" replace />} />
            </Routes>
          </Layout>
        </NotificationProvider>
      </SystemSettingsProvider>
    </ToastProvider>
  );
};

function App() {
  return (
    <Router>
      <AuthProvider>
        <AppContent />
      </AuthProvider>
    </Router>
  );
}

export default App;
