import { Component, lazy, Suspense, useEffect, useState, type ErrorInfo, type ReactNode } from 'react'
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import { Toaster } from 'sonner'
import { Button } from '@/components/ui/button'
import { BrandProvider, useBrand } from '@/brand/BrandContext'
import { verifyToken } from '@/api/auth'
import { getToken } from '@/api/client'

const HomePage = lazy(() => import('@/viewer/pages/HomePage'))
const WatchPage = lazy(() => import('@/viewer/pages/WatchPage'))
const AdminLayout = lazy(() => import('@/admin/AdminLayout'))
const LoginPage = lazy(() => import('@/admin/LoginPage'))
const Dashboard = lazy(() => import('@/admin/pages/Dashboard'))
const LiveBoard = lazy(() => import('@/admin/pages/LiveBoard'))
const StreamList = lazy(() => import('@/admin/pages/StreamList'))
const StreamForm = lazy(() => import('@/admin/pages/StreamForm'))
const ReplayEditor = lazy(() => import('@/admin/pages/ReplayEditor'))
const NodeManager = lazy(() => import('@/admin/pages/NodeManager'))
const SettingsPage = lazy(() => import('@/admin/pages/Settings'))
const SwaggerPage = lazy(() => import('@/admin/pages/SwaggerPage'))

class PageErrorBoundary extends Component<{ children: ReactNode }, { failed: boolean }> {
  state = { failed: false }

  static getDerivedStateFromError() {
    return { failed: true }
  }

  componentDidCatch(error: Error, info: ErrorInfo) {
    console.error('Page render failed', error, info)
  }

  render() {
    if (this.state.failed) {
      return (
        <div className="flex min-h-screen flex-col items-center justify-center gap-4 p-8">
          <h1 className="text-2xl font-semibold">页面加载失败</h1>
          <p className="text-muted-foreground">页面遇到异常，请重新加载后再试。</p>
          <Button onClick={() => window.location.reload()}>重新加载</Button>
        </div>
      )
    }
    return this.props.children
  }
}

function AdminGuard({ children }: { children: ReactNode }) {
  const [authed, setAuthed] = useState<boolean | null>(null)

  useEffect(() => {
    const token = getToken()
    if (!token) {
      setAuthed(false)
      return
    }
    verifyToken().then(setAuthed)
  }, [])

  if (authed === null) return null
  if (!authed) return <Navigate to="/admin/login" replace />
  return <>{children}</>
}

function RouteShell() {
  const { brand } = useBrand()
  useEffect(() => {
    document.title = brand.brand_name
  }, [brand.brand_name])

  return (
    <PageErrorBoundary>
      <Suspense
        fallback={
          <div className="flex min-h-screen items-center justify-center">
            <div className="h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
          </div>
        }
      >
        <Routes>
          <Route path="/watch/:id" element={<WatchPage />} />
          <Route path="/admin/login" element={<LoginPage />} />
          <Route
            path="/admin"
            element={
              <AdminGuard>
                <AdminLayout />
              </AdminGuard>
            }
          >
            <Route index element={<Dashboard />} />
            <Route path="board" element={<LiveBoard />} />
            <Route path="streams" element={<StreamList />} />
            <Route path="streams/new" element={<StreamForm />} />
            <Route path="streams/:id/edit" element={<ReplayEditor />} />
            <Route path="nodes" element={<NodeManager />} />
            <Route path="settings" element={<SettingsPage />} />
            <Route path="swagger" element={<SwaggerPage />} />
          </Route>
          <Route path="/" element={<HomePage />} />
        </Routes>
      </Suspense>
    </PageErrorBoundary>
  )
}

export default function App() {
  return (
    <BrandProvider>
      <BrowserRouter>
        <RouteShell />
        <Toaster position="top-right" richColors closeButton />
      </BrowserRouter>
    </BrandProvider>
  )
}