import { lazy, Suspense } from 'react'
import { Routes, Route, Navigate } from 'react-router-dom'
import { AppLayout } from './components/layout/AppLayout'
import { ProtectedRoute } from './components/common/ProtectedRoute'

const Login        = lazy(() => import('./pages/Login'))
const Dashboard    = lazy(() => import('./pages/Dashboard'))
const Servers      = lazy(() => import('./pages/Servers'))
const CMDB         = lazy(() => import('./pages/CMDB'))
const Deployments  = lazy(() => import('./pages/Deployments'))
const Repos        = lazy(() => import('./pages/Repos'))
const Users        = lazy(() => import('./pages/Users'))
const Institutions = lazy(() => import('./pages/Institutions'))
const ApiKeys      = lazy(() => import('./pages/ApiKeys'))
const AuditLog     = lazy(() => import('./pages/AuditLog'))
const LLMManager   = lazy(() => import('./pages/LLMManager'))
const ConfigEnv    = lazy(() => import('./pages/ConfigEnv'))
const ConfigNginx  = lazy(() => import('./pages/ConfigNginx'))
const Notifications = lazy(() => import('./pages/Notifications'))
const Licenses      = lazy(() => import('./pages/Licenses'))
const ExportImport  = lazy(() => import('./pages/ExportImport'))
const DrConsole     = lazy(() => import('./pages/DrConsole'))
const NetworkConsole = lazy(() => import('./pages/NetworkConsole'))
const CsapConsole   = lazy(() => import('./pages/CsapConsole'))

function Loading() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center',
      height: '60vh', color: '#94a3b8', gap: 10 }}>
      <span style={{ width: 16, height: 16, border: '2px solid #4f6ef7',
        borderTopColor: 'transparent', borderRadius: '50%',
        animation: 'spin .6s linear infinite', display: 'inline-block' }} />
      로딩 중...
    </div>
  )
}

export default function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/" element={<ProtectedRoute><AppLayout /></ProtectedRoute>}>
          <Route index          element={<Dashboard />} />
          <Route path="servers"      element={<Servers />} />
          <Route path="cmdb"         element={<CMDB />} />
          <Route path="deployments"  element={<Deployments />} />
          <Route path="repos"        element={<Repos />} />
          <Route path="users"        element={<Users />} />
          <Route path="institutions" element={<Institutions />} />
          <Route path="api-keys"     element={<ApiKeys />} />
          <Route path="audit"        element={<AuditLog />} />
          <Route path="llm"          element={<LLMManager />} />
          <Route path="config/env"   element={<ConfigEnv />} />
          <Route path="config/nginx" element={<ConfigNginx />} />
          <Route path="notifications" element={<Notifications />} />
          <Route path="licenses"       element={<Licenses />} />
          <Route path="export-import" element={<ExportImport />} />
          <Route path="dr"           element={<DrConsole />} />
          <Route path="network"      element={<NetworkConsole />} />
          <Route path="csap"         element={<CsapConsole />} />
        </Route>
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </Suspense>
  )
}