import React, { useEffect } from 'react';
import { HashRouter as Router, Routes, Route, Navigate, useLocation } from 'react-router-dom';
import Layout from './components/Layout';
import Dashboard from './pages/Dashboard';
import DashboardProject from './pages/DashboardProject';
import DashboardOM from './pages/DashboardOM';
import Login from './pages/Login';
import AssetManagement from './pages/AssetManagement';
import Operations from './pages/Operations';
import Finance from './pages/Finance';
import Compliance from './pages/Compliance';
import Reports from './pages/Reports';
import Settings from './pages/Settings';
import Projects from './pages/Projects';
import Contracts from './pages/Contracts'; 
import Inventory from './pages/Inventory'; 
import WorkOrders from './pages/WorkOrders';
import MaintenanceSchedule from './pages/MaintenanceSchedule';
import Toast from './components/common/Toast';
import ErrorBoundary from './components/common/ErrorBoundary';
import { useAuthStore } from './store/useAuthStore';
import { useUIStore } from './store/useUIStore';
import { hasPermission, hasAnyPermission, PERMISSION } from './utils/permissions';

export const useTheme = () => {
  const { isDarkMode, toggleTheme } = useUIStore();
  return { isDarkMode, toggleTheme };
};

type ProtectedRouteProps = {
  children: React.ReactNode;
  permission?: string;
  anyPermission?: string[];
};

const ProtectedRoute = ({ children, permission, anyPermission }: ProtectedRouteProps) => {
  const { user } = useAuthStore();
  const location = useLocation();

  if (!user) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  if (permission && !hasPermission(user, permission)) {
    return <Navigate to="/" replace />;
  }
  if (anyPermission?.length && !hasAnyPermission(user, anyPermission)) {
    return <Navigate to="/" replace />;
  }

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

function App() {
  const { initAuth, isLoading, user } = useAuthStore();
  const { isDarkMode } = useUIStore();

  useEffect(() => {
    initAuth();
  }, []);

  useEffect(() => {
    if (isDarkMode) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }, [isDarkMode]);

  if (isLoading) {
    return <div className="h-screen w-full flex items-center justify-center bg-slate-50 dark:bg-slate-900 text-slate-500 dark:text-slate-400">Đang khởi tạo hệ thống...</div>;
  }

  return (
    <Router>
      <ErrorBoundary>
        <Toast />
        <Routes>
          {/* Public Route */}
          <Route path="/login" element={!user ? <Login /> : <Navigate to="/" replace />} />

          {/* Protected Routes */}
          <Route path="/" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
          <Route path="/om-dashboard" element={<ProtectedRoute><DashboardOM /></ProtectedRoute>} />
          <Route path="/dashboard-project" element={<ProtectedRoute><DashboardProject /></ProtectedRoute>} />
          <Route path="/projects/*" element={<ProtectedRoute><Projects /></ProtectedRoute>} />
          
          {/* AM Module */}
          <Route path="/assets" element={<ProtectedRoute><AssetManagement /></ProtectedRoute>} />
          <Route path="/contracts" element={<ProtectedRoute><Contracts /></ProtectedRoute>} /> 
          
          {/* O&M Module */}
          <Route path="/operations" element={<ProtectedRoute><Operations /></ProtectedRoute>} />
          <Route path="/work-orders" element={<ProtectedRoute><WorkOrders /></ProtectedRoute>} />
          <Route path="/schedule" element={<ProtectedRoute><MaintenanceSchedule /></ProtectedRoute>} />
          <Route path="/inventory" element={<ProtectedRoute><Inventory /></ProtectedRoute>} />
          <Route path="/compliance" element={<ProtectedRoute><Compliance /></ProtectedRoute>} />
          
          {/* Other Modules */}
          {/* /governance removed — user management moved to CSM */}
          <Route path="/finance" element={<ProtectedRoute><Finance /></ProtectedRoute>} />
          <Route path="/reports" element={<ProtectedRoute><Reports /></ProtectedRoute>} />
          <Route
            path="/settings/*"
            element={
              <ProtectedRoute anyPermission={[PERMISSION.config_system, PERMISSION.manage_users]}>
                <Settings />
              </ProtectedRoute>
            }
          />
          
          {/* Catch all */}
          <Route path="*" element={<Navigate to="/" replace />} />
        </Routes>
      </ErrorBoundary>
    </Router>
  );
}

export default App;