import React, { useEffect } from "react";
import { BrowserRouter as Router, Routes, Route, Navigate, useLocation } from "react-router-dom";
import AdminDashboard from "./pages/AdminDashboard";
import MobileFormPage from "./pages/MobileFormPage";
import DesktopSARPage from "./pages/DesktopSARPage";
import AnalysisResult from "./pages/analysis/AnalysisResult";
import "./App.css";

function ThemeProvider({ children }) {
  const location = useLocation();

  useEffect(() => {
    let theme = "desktop";
    
    if (location.pathname.startsWith("/mobile") || location.pathname.startsWith("/m")) {
      theme = "mobile";
    } else if (location.pathname.startsWith("/admin")) {
      theme = "admin";
    } else if (location.pathname.startsWith("/sar") || location.pathname.startsWith("/desktop") || location.pathname.startsWith("/analysis")) {
      theme = "desktop";
    }
    
    document.documentElement.setAttribute("data-theme", theme);
  }, [location.pathname]);

  return children;
}

function App() {
  const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent) || window.innerWidth < 768;

  return (
    <Router>
      <ThemeProvider>
        <Routes>
          <Route path="/" element={<Navigate to={isMobile ? "/mobile" : "/desktop"} replace />} />
          
          <Route path="/sar" element={<DesktopSARPage />} />
          <Route path="/desktop" element={<DesktopSARPage />} />
          
          <Route path="/analysis/:caseId" element={<AnalysisResult />} />
          
          <Route path="/admin/*" element={<AdminDashboard />} />
          
          <Route path="/mobile" element={<MobileFormPage />} />
        </Routes>
      </ThemeProvider>
    </Router>
  );
}

export default App;