import { lazy, Suspense } from 'react'
import { Navigate, createBrowserRouter } from 'react-router-dom'
import { Spin } from 'antd'

const AgentLayout = lazy(() => import('@/components/layout/AgentLayout'))
const AdminLayout = lazy(() => import('@/components/layout/AdminLayout'))
const Dashboard = lazy(() => import('@/pages/agent/Dashboard'))
const ChatHistory = lazy(() => import('@/pages/agent/ChatHistory'))
const Customers = lazy(() => import('@/pages/agent/Customers'))
const Knowledge = lazy(() => import('@/pages/agent/Knowledge'))
const Statistics = lazy(() => import('@/pages/agent/Statistics'))
const Settings = lazy(() => import('@/pages/agent/Settings'))
const AdminDashboard = lazy(() => import('@/pages/admin/Dashboard'))
const Tenants = lazy(() => import('@/pages/admin/Tenants'))
const Plans = lazy(() => import('@/pages/admin/Plans'))
const Ops = lazy(() => import('@/pages/admin/Ops'))
const WidgetPreview = lazy(() => import('@/pages/WidgetPreview'))

const loading = (
  <div className="h-full flex items-center justify-center">
    <Spin size="large" />
  </div>
)

function Lazy({ children }: { children: React.ReactNode }) {
  return <Suspense fallback={loading}>{children}</Suspense>
}

export const router = createBrowserRouter([
  {
    path: '/widget/preview',
    element: <Lazy><WidgetPreview /></Lazy>,
  },
  {
    path: '/admin',
    element: <Lazy><AdminLayout /></Lazy>,
    children: [
      { index: true, element: <Navigate to="/admin/dashboard" replace /> },
      { path: 'dashboard', element: <Lazy><AdminDashboard /></Lazy> },
      { path: 'tenants', element: <Lazy><Tenants /></Lazy> },
      { path: 'plans', element: <Lazy><Plans /></Lazy> },
      { path: 'ops', element: <Lazy><Ops /></Lazy> },
    ],
  },
  {
    path: '/',
    element: <Lazy><AgentLayout /></Lazy>,
    children: [
      { index: true, element: <Navigate to="/agent/dashboard" replace /> },
      {
        path: 'agent',
        children: [
          { index: true, element: <Navigate to="/agent/dashboard" replace /> },
          { path: 'dashboard', element: <Lazy><Dashboard /></Lazy> },
          { path: 'chat-history', element: <Lazy><ChatHistory /></Lazy> },
          { path: 'customers', element: <Lazy><Customers /></Lazy> },
          { path: 'knowledge', element: <Lazy><Knowledge /></Lazy> },
          { path: 'statistics', element: <Lazy><Statistics /></Lazy> },
          { path: 'settings', element: <Lazy><Settings /></Lazy> },
        ],
      },
    ],
  },
])