import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
import { useAuthStore } from './stores/authStore'
import Layout from './components/Layout'
import Login from './views/Login'
import Dashboard from './views/Dashboard'
import CreateEmployee from './views/CreateEmployee'
import SkillManagement from './views/SkillManagement'
import UserManagement from './views/UserManagement'
import EmailSettings from './views/EmailSettings'
import SyncSettings from './views/SyncSettings'
import OrganizationEditor from './views/OrganizationEditor'
import OfficialTitles from './views/OfficialTitles'
import Positions from './views/Positions'
import { useEffect } from 'react'

function App() {
  const { isAuthenticated } = useAuthStore()

  useEffect(() => {
    // Always use light mode for admin panel
    document.documentElement.classList.remove('dark')
  }, [])

  if (!isAuthenticated) {
    return (
      <Router>
        <Routes>
          <Route path="/login" element={<Login />} />
          <Route path="*" element={<Navigate to="/login" replace />} />
        </Routes>
      </Router>
    )
  }

  return (
    <Router>
      <Layout>
        <Routes>
          <Route path="/" element={<Dashboard />} />
          <Route path="/organization" element={<OrganizationEditor />} />
          <Route path="/skills" element={<SkillManagement />} />
          <Route path="/users" element={<UserManagement />} />
          <Route path="/users/create-employee" element={<CreateEmployee />} />
          <Route path="/email-settings" element={<EmailSettings />} />
          <Route path="/positions" element={<Positions />} />
          <Route path="/official-titles" element={<OfficialTitles />} />
          <Route path="/sync" element={<SyncSettings />} />
          <Route path="*" element={<Navigate to="/" replace />} />
        </Routes>
      </Layout>
    </Router>
  )
}

export default App