import { Routes, Route, Navigate } from 'react-router-dom'
import { useAuth } from '@/contexts/AuthContext'
import Login from '@/pages/Login'
import Dashboard from '@/pages/Dashboard'
import Collections from '@/pages/Collections'
import Documents from '@/pages/Documents'
import Views from '@/pages/Views'
import Pages from '@/pages/Pages'
import PageDisplay from '@/pages/PageDisplay'
import PageBuilder from '@/components/PageBuilder'
import DocumentForm from '@/pages/DocumentForm'
import Users from '@/pages/Users'
import Groups from '@/pages/Groups'
import ApiKeys from '@/pages/ApiKeys'
import Workspaces from '@/pages/Workspaces'
import WorkspaceEdit from '@/pages/WorkspaceEdit'
import LlmProviders from '@/pages/LlmProviders'
import ChatPage from '@/pages/ChatPage'
import Archives from '@/pages/Archives'
import ProtectedRoute from '@/components/ProtectedRoute'
import { DashboardLayout } from '@/components/layout'

function App() {
  const { isAuthenticated, isLoading } = useAuth()

  // Show loading spinner while checking auth state
  if (isLoading) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-gray-50">
        <div className="flex flex-col items-center gap-4">
          <svg
            className="h-8 w-8 animate-spin text-primary-600"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
          >
            <circle
              className="opacity-25"
              cx="12"
              cy="12"
              r="10"
              stroke="currentColor"
              strokeWidth="4"
            />
            <path
              className="opacity-75"
              fill="currentColor"
              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
            />
          </svg>
          <p className="text-gray-600">Loading...</p>
        </div>
      </div>
    )
  }

  return (
    <Routes>
      {/* Public routes */}
      <Route
        path="/"
        element={
          isAuthenticated ? (
            <Navigate to="/dashboard" replace />
          ) : (
            <div className="flex min-h-screen items-center justify-center bg-gray-50">
              <div className="text-center">
                <div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-xl bg-primary-600">
                  <span className="text-3xl font-bold text-white">S</span>
                </div>
                <h1 className="text-4xl font-bold text-gray-900">SmartBotic CRM</h1>
                <p className="mt-4 text-lg text-gray-600">Manage your business smarter</p>
                <div className="mt-8 flex justify-center gap-4">
                  <a
                    href="/login"
                    className="rounded-lg bg-primary-600 px-6 py-3 text-white transition hover:bg-primary-700"
                  >
                    Sign in
                  </a>
                </div>
              </div>
            </div>
          )
        }
      />
      <Route path="/login" element={<Login />} />

      {/* Protected routes with dashboard layout */}
      <Route
        element={
          <ProtectedRoute>
            <DashboardLayout />
          </ProtectedRoute>
        }
      >
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/collections" element={<Collections />} />
        <Route path="/collections/:collectionName" element={<Documents />} />
        <Route path="/views" element={<Views />} />
        <Route path="/views/:collectionName" element={<Views />} />
        <Route path="/views/:viewId/create" element={<DocumentForm />} />
        <Route path="/views/:viewId/edit/:docId" element={<DocumentForm />} />
        <Route path="/pages" element={<Pages />} />
        <Route path="/pages/:pageId/edit" element={<PageBuilder />} />
        <Route path="/p/:slug" element={<PageDisplay />} />
        <Route path="/users" element={<Users />} />
        <Route path="/groups" element={<Groups />} />
        <Route path="/api-keys" element={<ApiKeys />} />
        <Route path="/workspaces" element={<Workspaces />} />
        <Route path="/workspaces/:workspaceId/edit" element={<WorkspaceEdit />} />
        <Route path="/llm-providers" element={<LlmProviders />} />
        <Route path="/chat" element={<ChatPage />} />
        <Route path="/archives" element={<Archives />} />
      </Route>

      {/* Catch-all redirect */}
      <Route path="*" element={<Navigate to="/" replace />} />
    </Routes>
  )
}

export default App