import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
import { useThemeStore } from './stores/themeStore'
import { useAuthStore } from './stores/authStore'
import { useEffect } from 'react'
import Layout from './components/Layout'
import Login from './views/Login'
import Dashboard from './views/Dashboard'
import EmployeeList from './views/EmployeeList'
import EmployeeDetail from './views/EmployeeDetail'
import EmployeeForm from './views/EmployeeForm'
import SkillSearch from './views/SkillSearch'
import TeamZusammenstellung from './views/TeamZusammenstellung'
// import ProfileSearch from './views/ProfileSearch'
// import ProfileEdit from './views/ProfileEdit'
import Settings from './views/Settings'
import MyProfile from './views/MyProfile'

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

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

  return (
    <Router>
      <Routes>
        <Route path="/login" element={
          isAuthenticated ? <Navigate to="/" replace /> : <Login />
        } />
        <Route path="/" element={
          isAuthenticated ? (
            <Layout>
              <Dashboard />
            </Layout>
          ) : <Navigate to="/login" replace />
        } />
        <Route path="/employees" element={
          isAuthenticated ? (
            <Layout>
              <EmployeeList />
            </Layout>
          ) : <Navigate to="/login" replace />
        } />
        <Route path="/employees/new" element={
          isAuthenticated ? (
            <Layout>
              <EmployeeForm />
            </Layout>
          ) : <Navigate to="/login" replace />
        } />
        <Route path="/employees/:id" element={
          isAuthenticated ? (
            <Layout>
              <EmployeeDetail />
            </Layout>
          ) : <Navigate to="/login" replace />
        } />
        <Route path="/search" element={
          isAuthenticated ? (
            <Layout>
              <SkillSearch />
            </Layout>
          ) : <Navigate to="/login" replace />
        } />
        <Route path="/team" element={
          isAuthenticated ? (
            <Layout>
              <TeamZusammenstellung />
            </Layout>
          ) : <Navigate to="/login" replace />
        } />
        <Route path="/profile" element={
          isAuthenticated ? (
            <Layout>
              <MyProfile />
            </Layout>
          ) : <Navigate to="/login" replace />
        } />
        {/* Temporär deaktiviert
        <Route path="/profiles" element={
          isAuthenticated ? (
            <Layout>
              <ProfileSearch />
            </Layout>
          ) : <Navigate to="/login" replace />
        } />
        <Route path="/profile/new" element={
          isAuthenticated ? (
            <Layout>
              <ProfileEdit />
            </Layout>
          ) : <Navigate to="/login" replace />
        } />
        <Route path="/profile/:id/edit" element={
          isAuthenticated ? (
            <Layout>
              <ProfileEdit />
            </Layout>
          ) : <Navigate to="/login" replace />
        } />
        */}
        <Route path="/settings" element={
          isAuthenticated ? (
            <Layout>
              <Settings />
            </Layout>
          ) : <Navigate to="/login" replace />
        } />
      </Routes>
    </Router>
  )
}

export default App
