import { useState, useEffect } from 'react'
import { Routes, Route, Navigate, useLocation } from 'react-router-dom'
import { authAPI } from './services/api'
import Sidebar from './components/Navbar'
import Login from './pages/Login'
import Register from './pages/Register'
import Dashboard from './pages/Dashboard'
import EmployeeList from './pages/EmployeeList'
import EmployeeForm from './pages/EmployeeForm'
import DepartmentList from './pages/DepartmentList'
import DepartmentForm from './pages/DepartmentForm'
import PositionList from './pages/PositionList'
import PositionForm from './pages/PositionForm'
import UserList from './pages/UserList'
import UserForm from './pages/UserForm'
import StatusReport from './pages/StatusReport'

function App() {
  const [user, setUser] = useState(null)
  const [loading, setLoading] = useState(true)
  const location = useLocation()

  useEffect(() => {
    authAPI.checkSession()
      .then(res => {
        if (res.data.authenticated) setUser({ UserName: res.data.userName, role: res.data.role })
      })
      .catch(() => {})
      .finally(() => setLoading(false))
  }, [])

  const handleLogin = (userData) => setUser(userData)
  const handleLogout = () => setUser(null)

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-slate-100">
        <p className="text-slate-500">Loading...</p>
      </div>
    )
  }

  if (!user) {
    return (
      <Routes>
        <Route path="/register" element={<Register onLogin={handleLogin} />} />
        <Route path="*" element={<Login onLogin={handleLogin} />} />
      </Routes>
    )
  }

  return (
    <div className="min-h-screen bg-slate-100">
      <Sidebar user={user} onLogout={handleLogout} />
      <div className="ml-56 p-6">
        <Routes location={location} key={location.pathname}>
          <Route path="/" element={<Dashboard user={user} />} />
          <Route path="/employees" element={<EmployeeList user={user} />} />
          {user.role === 'admin' && (
            <>
              <Route path="/employees/add" element={<EmployeeForm />} />
              <Route path="/employees/edit/:id" element={<EmployeeForm />} />
            </>
          )}
          <Route path="/departments" element={<DepartmentList user={user} />} />
          {user.role === 'admin' && (
            <>
              <Route path="/departments/add" element={<DepartmentForm />} />
              <Route path="/departments/edit/:id" element={<DepartmentForm />} />
            </>
          )}
          <Route path="/positions" element={<PositionList user={user} />} />
          {user.role === 'admin' && (
            <>
              <Route path="/positions/add" element={<PositionForm />} />
              <Route path="/positions/edit/:id" element={<PositionForm />} />
            </>
          )}
          {user.role === 'admin' && (
            <>
              <Route path="/users" element={<UserList />} />
              <Route path="/users/add" element={<UserForm />} />
              <Route path="/users/edit/:id" element={<UserForm />} />
              <Route path="/status-report" element={<StatusReport />} />
            </>
          )}
          <Route path="*" element={<Navigate to="/" />} />
        </Routes>
      </div>
    </div>
  )
}

export default App
