import React from 'react';
import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import Layout from './components/Layout';
import Dashboard from './pages/Dashboard';
import JobPage from './pages/JobPage';
import JobDetail from './pages/JobDetail';
import TemplatePage from './pages/TemplatePage';
import LoginPage from './pages/LoginPage';
import UserPage from './pages/UserPage';
import { ApiService } from './api';

// Fix: Change children to optional to resolve JSX inference errors in some TypeScript environments
const ProtectedRoute = ({ children }: { children?: React.ReactNode }) => {
  const user = ApiService.currentUser;
  if (!user) return <Navigate to="/dang-nhap" replace />;
  return <Layout>{children}</Layout>;
};

const App: React.FC = () => {
  return (
    <Router>
      <Routes>
        <Route path="/dang-nhap" element={<LoginPage />} />
        
        <Route path="/" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
        <Route path="/ho-so" element={<ProtectedRoute><JobPage /></ProtectedRoute>} />
        <Route path="/ho-so/:id" element={<ProtectedRoute><JobDetail /></ProtectedRoute>} />
        <Route path="/mau-ho-so" element={<ProtectedRoute><TemplatePage /></ProtectedRoute>} />
        <Route path="/nguoi-dung" element={<ProtectedRoute><UserPage /></ProtectedRoute>} />
        
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </Router>
  );
};

export default App;