import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import Login from './pages/Login';
import Dashboard from './pages/Dashboard';
import ModernDashboard from './pages/ModernDashboard';
import UsersList from './pages/UsersList';
import EventsList from './pages/EventsList';
import AssetList from './pages/AssetList';
import AssetDetail from './pages/AssetDetail';
import WorkOrderList from './pages/WorkOrderList';
import WorkOrderDetail from './pages/WorkOrderDetail';
import AssetMaintenanceList from './pages/AssetMaintenanceList';
import AssetMaintenanceDetail from './pages/AssetMaintenanceDetail';
import PPMList from './pages/PPMList';
import PPMDetail from './pages/PPMDetail';
import Sidebar from './components/Sidebar';

// Layout with Sidebar
const LayoutWithSidebar: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const user = localStorage.getItem('user');
  const userEmail = user ? JSON.parse(user).email : '';

  return (
    <div className="flex h-screen overflow-hidden bg-gray-50 dark:bg-gray-900">
      <Sidebar userEmail={userEmail} />
      <div className="flex-1 overflow-y-auto bg-gray-50 dark:bg-gray-900">
        {children}
      </div>
    </div>
  );
};

// Protected Route Component
const ProtectedRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const user = localStorage.getItem('user');
  return user ? <>{children}</> : <Navigate to="/login" replace />;
};

const App: React.FC = () => {
  return (
    <Router>
      <Routes>
        {/* Login - No Sidebar */}
        <Route path="/login" element={<Login />} />
        
        {/* Protected Routes - With Sidebar */}
        <Route 
          path="/dashboard" 
          element={
            <ProtectedRoute>
              <LayoutWithSidebar>
                <ModernDashboard />
              </LayoutWithSidebar>
            </ProtectedRoute>
          } 
        />
        
        <Route 
          path="/assets" 
          element={
            <ProtectedRoute>
              <LayoutWithSidebar>
                <AssetList />
              </LayoutWithSidebar>
            </ProtectedRoute>
          } 
        />
        
        <Route 
          path="/assets/:assetName" 
          element={
            <ProtectedRoute>
              <LayoutWithSidebar>
                <AssetDetail />
              </LayoutWithSidebar>
            </ProtectedRoute>
          } 
        />
        
        <Route 
          path="/work-orders" 
          element={
            <ProtectedRoute>
              <LayoutWithSidebar>
                <WorkOrderList />
              </LayoutWithSidebar>
            </ProtectedRoute>
          } 
        />
        
        <Route 
          path="/work-orders/:workOrderName" 
          element={
            <ProtectedRoute>
              <LayoutWithSidebar>
                <WorkOrderDetail />
              </LayoutWithSidebar>
            </ProtectedRoute>
          } 
        />
        
        <Route 
          path="/maintenance" 
          element={
            <ProtectedRoute>
              <LayoutWithSidebar>
                <AssetMaintenanceList />
              </LayoutWithSidebar>
            </ProtectedRoute>
          } 
        />
        
        <Route 
          path="/maintenance/:logName" 
          element={
            <ProtectedRoute>
              <LayoutWithSidebar>
                <AssetMaintenanceDetail />
              </LayoutWithSidebar>
            </ProtectedRoute>
          } 
        />
        
        <Route 
          path="/ppm" 
          element={
            <ProtectedRoute>
              <LayoutWithSidebar>
                <PPMList />
              </LayoutWithSidebar>
            </ProtectedRoute>
          } 
        />
        
        <Route 
          path="/ppm/:ppmName" 
          element={
            <ProtectedRoute>
              <LayoutWithSidebar>
                <PPMDetail />
              </LayoutWithSidebar>
            </ProtectedRoute>
          } 
        />
        
        <Route 
          path="/old-dashboard" 
          element={
            <ProtectedRoute>
              <LayoutWithSidebar>
                <Dashboard />
              </LayoutWithSidebar>
            </ProtectedRoute>
          } 
        />
        
        <Route 
          path="/users" 
          element={
            <ProtectedRoute>
              <LayoutWithSidebar>
                <UsersList />
              </LayoutWithSidebar>
            </ProtectedRoute>
          } 
        />
        
        <Route 
          path="/events" 
          element={
            <ProtectedRoute>
              <LayoutWithSidebar>
                <EventsList />
              </LayoutWithSidebar>
            </ProtectedRoute>
          } 
        />
        
        {/* Placeholder routes for other sidebar links */}
        <Route 
          path="/work-orders" 
          element={
            <ProtectedRoute>
              <LayoutWithSidebar>
                <div className="p-6">
                  <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Work Orders (Coming Soon)</h1>
                </div>
              </LayoutWithSidebar>
            </ProtectedRoute>
          } 
        />
        
        <Route 
          path="/ppm" 
          element={
            <ProtectedRoute>
              <LayoutWithSidebar>
                <div className="p-6">
                  <h1 className="text-2xl font-bold text-gray-900 dark:text-white">PPM (Coming Soon)</h1>
                </div>
              </LayoutWithSidebar>
            </ProtectedRoute>
          } 
        />
        
        <Route 
          path="/inventory" 
          element={
            <ProtectedRoute>
              <LayoutWithSidebar>
                <div className="p-6">
                  <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Inventory (Coming Soon)</h1>
                </div>
              </LayoutWithSidebar>
            </ProtectedRoute>
          } 
        />
        
        <Route 
          path="/vendors" 
          element={
            <ProtectedRoute>
              <LayoutWithSidebar>
                <div className="p-6">
                  <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Vendors (Coming Soon)</h1>
                </div>
              </LayoutWithSidebar>
            </ProtectedRoute>
          } 
        />
        
        <Route 
          path="/dashboard-view" 
          element={
            <ProtectedRoute>
              <LayoutWithSidebar>
                <div className="p-6">
                  <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Dashboard View (Coming Soon)</h1>
                </div>
              </LayoutWithSidebar>
            </ProtectedRoute>
          } 
        />
        
        <Route 
          path="/sites" 
          element={
            <ProtectedRoute>
              <LayoutWithSidebar>
                <div className="p-6">
                  <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Sites (Coming Soon)</h1>
                </div>
              </LayoutWithSidebar>
            </ProtectedRoute>
          } 
        />
        
        <Route 
          path="/active-map" 
          element={
            <ProtectedRoute>
              <LayoutWithSidebar>
                <div className="p-6">
                  <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Active Map (Coming Soon)</h1>
                </div>
              </LayoutWithSidebar>
            </ProtectedRoute>
          } 
        />
        
        <Route 
          path="/account" 
          element={
            <ProtectedRoute>
              <LayoutWithSidebar>
                <div className="p-6">
                  <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Account (Coming Soon)</h1>
                </div>
              </LayoutWithSidebar>
            </ProtectedRoute>
          } 
        />
        
        <Route path="/" element={<Navigate to="/dashboard" replace />} />
        <Route path="*" element={<Navigate to="/dashboard" replace />} />
      </Routes>
    </Router>
  );
};

export default App;