import { createBrowserRouter } from 'react-router-dom'
import { lazy, Suspense, ReactNode } from 'react'
import ProtectedRoute from '../components/ProtectedRoute'
import NavBar from '../components/NavBar'

const LoginPage = lazy(() => import('../pages/LoginPage'))
const DashboardPage = lazy(() => import('../pages/DashboardPage'))
const EntitiesPage = lazy(() => import('../pages/EntitiesPage'))
const EntityDetailPage = lazy(() => import('../pages/EntityDetailPage'))
const CreateTaskPage = lazy(() => import('../pages/CreateTaskPage'))
const EditTaskPage = lazy(() => import('../pages/EditTaskPage'))
const LogsPage = lazy(() => import('../pages/LogsPage'))

function Protected({ children }: { children: ReactNode }) {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <ProtectedRoute>
        <div className="min-h-screen bg-slate-950 text-slate-100">
          <NavBar />
          {children}
        </div>
      </ProtectedRoute>
    </Suspense>
  )
}

export const router = createBrowserRouter([
  {
    path: '/login',
    element: (
      <Suspense fallback={<div>Loading...</div>}>
        <LoginPage />
      </Suspense>
    ),
  },
  {
    path: '/',
    element: (
      <Protected>
        <DashboardPage />
      </Protected>
    ),
  },
  {
    path: '/entities',
    element: (
      <Protected>
        <EntitiesPage />
      </Protected>
    ),
  },
  {
    path: '/entities/:entityId',
    element: (
      <Protected>
        <EntityDetailPage />
      </Protected>
    ),
  },
  {
    path: '/entities/:entityId/tasks/new',
    element: (
      <Protected>
        <CreateTaskPage />
      </Protected>
    ),
  },
  {
    path: '/entities/:entityId/tasks/:taskId',
    element: (
      <Protected>
        <EditTaskPage />
      </Protected>
    ),
  },
  {
    path: '/logs',
    element: (
      <Protected>
        <LogsPage />
      </Protected>
    ),
  },
])