import React 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 { UserDetail } from './pages/UserDetail';
import { AttendanceDetail } from './pages/AttendanceDetail';
import { SuperAdmin } from './pages/SuperAdmin';
import { TeamManagement } from './pages/TeamManagement';
import { Login } from './pages/Login';
import { UserProfile } from './pages/UserProfile';

const AppLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const location = useLocation();
  const isLoginPage = location.pathname === '/login';

  if (isLoginPage) {
    return <>{children}</>;
  }

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

const App: React.FC = () => {
  return (
    <Router>
      <AppLayout>
        <Routes>
          <Route path="/login" element={<Login />} />
          <Route path="/" element={<Dashboard />} />
          <Route path="/users" element={<Navigate to="/admin/users" replace />} />
          <Route path="/admin/users" element={<TeamManagement />} />
          <Route path="/users/:id" element={<UserDetail />} />
          <Route path="/attendances/:id" element={<AttendanceDetail />} />
          <Route path="/super-admin" element={<SuperAdmin />} />
          <Route path="/profile" element={<UserProfile />} />
          <Route path="*" element={<Navigate to="/" replace />} />
        </Routes>
      </AppLayout>
    </Router>
  );
};

export default App;