import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import { type ReactNode } from 'react'
import { AuthContext, useAuthProvider, useAuth } from './hooks/useAuth'
import { ToastContext, useToastProvider } from './hooks/useToast'
import { ToastContainer } from './components/ui/ToastContainer'
import { Login } from './pages/Login'
import { NotFound } from './pages/NotFound'

// Lazy imports for protected pages (defined after auth is ready)
import { Dashboard } from './pages/Dashboard'
import { ProjectDetail } from './pages/ProjectDetail'
import { Episodes } from './pages/Episodes'
import { EpisodeDetail } from './pages/EpisodeDetail'
import { Entities } from './pages/Entities'
import { Users } from './pages/admin/Users'
import { ActivityLog } from './pages/admin/ActivityLog'
import { ImageReview } from './pages/ImageReview'
import { ExportStudio } from './pages/ExportStudio'

function AuthProvider({ children }: { children: ReactNode }) {
  const auth = useAuthProvider()
  return <AuthContext.Provider value={auth}>{children}</AuthContext.Provider>
}

function PrivateRoute({ children }: { children: ReactNode }) {
  const { user, loading } = useAuth()

  if (loading) {
    return (
      <div style={{
        minHeight: '100vh',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background: 'var(--bg)',
        color: 'var(--text-muted)',
        fontSize: '14px',
      }}>
        로딩 중...
      </div>
    )
  }

  if (!user) {
    return <Navigate to="/login" replace />
  }

  return <>{children}</>
}

function AdminRoute({ children }: { children: ReactNode }) {
  const { user, loading } = useAuth()

  if (loading) {
    return (
      <div style={{
        minHeight: '100vh',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background: 'var(--bg)',
        color: 'var(--text-muted)',
        fontSize: '14px',
      }}>
        로딩 중...
      </div>
    )
  }

  if (!user) {
    return <Navigate to="/login" replace />
  }

  if (user.role !== 'admin') {
    return <Navigate to="/" replace />
  }

  return <>{children}</>
}

function AppRoutes() {
  const { user, loading } = useAuth()

  // Show spinner while determining auth state
  if (loading) {
    return (
      <div style={{
        minHeight: '100vh',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background: 'var(--bg)',
        color: 'var(--text-muted)',
        fontSize: '14px',
      }}>
        로딩 중...
      </div>
    )
  }

  return (
    <Routes>
      {/* Public */}
      <Route
        path="/login"
        element={user ? <Navigate to="/" replace /> : <Login />}
      />

      {/* Protected */}
      <Route
        path="/"
        element={
          <PrivateRoute>
            <Dashboard />
          </PrivateRoute>
        }
      />
      <Route
        path="/dashboard"
        element={<Navigate to="/" replace />}
      />
      <Route
        path="/projects/:id"
        element={
          <PrivateRoute>
            <ProjectDetail />
          </PrivateRoute>
        }
      />
      <Route
        path="/projects/:id/members"
        element={
          <PrivateRoute>
            <ProjectDetail />
          </PrivateRoute>
        }
      />
      <Route
        path="/projects/:id/activity"
        element={
          <PrivateRoute>
            <ProjectDetail />
          </PrivateRoute>
        }
      />
      <Route
        path="/projects/:id/episodes"
        element={
          <PrivateRoute>
            <Episodes />
          </PrivateRoute>
        }
      />
      <Route
        path="/projects/:id/episodes/:episodeId"
        element={
          <PrivateRoute>
            <EpisodeDetail />
          </PrivateRoute>
        }
      />
      <Route
        path="/projects/:id/entities"
        element={
          <PrivateRoute>
            <Entities />
          </PrivateRoute>
        }
      />
      <Route
        path="/projects/:id/images"
        element={
          <PrivateRoute>
            <ImageReview />
          </PrivateRoute>
        }
      />
      <Route
        path="/projects/:id/export"
        element={
          <PrivateRoute>
            <ExportStudio />
          </PrivateRoute>
        }
      />

      {/* Admin */}
      <Route
        path="/admin/users"
        element={
          <AdminRoute>
            <Users />
          </AdminRoute>
        }
      />
      <Route
        path="/admin/activity"
        element={
          <AdminRoute>
            <ActivityLog />
          </AdminRoute>
        }
      />

      {/* 404 */}
      <Route path="*" element={<NotFound />} />
    </Routes>
  )
}

function ToastProvider({ children }: { children: ReactNode }) {
  const toastProvider = useToastProvider()
  return (
    <ToastContext.Provider value={toastProvider}>
      {children}
      <ToastContainer />
    </ToastContext.Provider>
  )
}

function App() {
  return (
    <BrowserRouter>
      <ToastProvider>
        <AuthProvider>
          <AppRoutes />
        </AuthProvider>
      </ToastProvider>
    </BrowserRouter>
  )
}

export default App