import { useEffect, useState } from "react"
import { Routes, Route, Navigate } from "react-router-dom"
import { Toaster } from "react-hot-toast"
import useStore from "./store.js"
import Navbar from "./components/Navbar.jsx"
import Sidebar from "./components/Sidebar.jsx"
import { AdminRoute, ClientRoute } from "./components/ProtectedRoute.jsx"
import Login from "./pages/Login.jsx"
import Register from "./pages/Register.jsx"
import AdminDashboard from "./pages/admin/AdminDashboard.jsx"
import Clients from "./pages/admin/Clients.jsx"
import Cars from "./pages/admin/Cars.jsx"
import Rentals from "./pages/admin/Rentals.jsx"
import Reports from "./pages/admin/Reports.jsx"
import ClientDashboard from "./pages/client/ClientDashboard.jsx"
import BrowseCars from "./pages/client/BrowseCars.jsx"
import MyRentals from "./pages/client/MyRentals.jsx"

// Layout wrapper with sidebar
function SidebarLayout({ children }) {
  return (
    <div className="flex min-h-screen bg-gray-50">
      <Sidebar />
      <div className="flex-1 ml-64">
        {children}
      </div>
    </div>
  )
}

function App() {
  const { checkAuth, isAuthenticated, authRole } = useStore()
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const init = async () => {
      await checkAuth()
      setLoading(false)
    }
    init()
  }, [])

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="w-12 h-12 border-4 border-primary-200 border-t-primary-600 rounded-full animate-spin mx-auto mb-4" />
          <p className="text-sm text-gray-500">Loading...</p>
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <Toaster
        position="top-right"
        toastOptions={{
          duration: 3000,
          style: {
            background: '#fff',
            color: '#374151',
            borderRadius: '0.75rem',
            boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.1)',
            padding: '12px 16px',
            fontSize: '14px',
          },
        }}
      />
      <Navbar />
      <Routes>
        {/* Public Routes */}
        <Route path="/login" element={!isAuthenticated ? <Login /> : <Navigate to={authRole === 'admin' ? '/admin/dashboard' : '/client/dashboard'} />} />
        <Route path="/register" element={!isAuthenticated ? <Register /> : <Navigate to={authRole === 'admin' ? '/admin/dashboard' : '/client/dashboard'} />} />

        {/* Admin Routes */}
        <Route path="/admin/dashboard" element={<AdminRoute><SidebarLayout><AdminDashboard /></SidebarLayout></AdminRoute>} />
        <Route path="/admin/clients" element={<AdminRoute><SidebarLayout><Clients /></SidebarLayout></AdminRoute>} />
        <Route path="/admin/cars" element={<AdminRoute><SidebarLayout><Cars /></SidebarLayout></AdminRoute>} />
        <Route path="/admin/rentals" element={<AdminRoute><SidebarLayout><Rentals /></SidebarLayout></AdminRoute>} />
        <Route path="/admin/reports" element={<AdminRoute><SidebarLayout><Reports /></SidebarLayout></AdminRoute>} />

        {/* Client Routes */}
        <Route path="/client/dashboard" element={<ClientRoute><SidebarLayout><ClientDashboard /></SidebarLayout></ClientRoute>} />
        <Route path="/client/browse" element={<ClientRoute><SidebarLayout><BrowseCars /></SidebarLayout></ClientRoute>} />
        <Route path="/client/rentals" element={<ClientRoute><SidebarLayout><MyRentals /></SidebarLayout></ClientRoute>} />

        {/* Catch all */}
        <Route path="*" element={<Navigate to={isAuthenticated ? (authRole === 'admin' ? '/admin/dashboard' : '/client/dashboard') : '/login'} />} />
      </Routes>
    </div>
  )
}

export default App