import { useEffect, lazy, Suspense } from "react";
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import { MantineProvider } from "@mantine/core";
import { Notifications } from "@mantine/notifications";
import { ModalsProvider } from "@mantine/modals";
import { useAuthStore } from "./stores/authStore";
import LoginPage from "./pages/LoginPage";
import DashboardLayout from "./components/DashboardLayout";
import DashboardPage from "./pages/DashboardPage";
import UsersPage from "./pages/UsersPage";
import HooksPage from "./pages/HooksPage";
import AccountsPage from "./pages/AccountsPage";
import EventLogsPage from "./pages/EventLogsPage";
import MessageCachePage from "./pages/MessageCachePage";
import SendMessagePage from "./pages/SendMessagePage";
import WhatsAppBusinessPage from "./pages/WhatsAppBusinessPage";
import TemplateManagementPage from "./pages/TemplateManagementPage";
import CatalogManagementPage from "./pages/CatalogManagementPage";
import FlowManagementPage from "./pages/FlowManagementPage";
const SwaggerPage = lazy(() => import("./pages/SwaggerPage"));

// Import Mantine styles
import "@mantine/core/styles.css";
import "@mantine/notifications/styles.css";
import "@mantine/dates/styles.css";

function App() {
  const { isAuthenticated, checkAuth } = useAuthStore();

  useEffect(() => {
    checkAuth();
  }, [checkAuth]);

  return (
    <MantineProvider defaultColorScheme="auto">
      <Notifications position="top-right" />
      <ModalsProvider>
        <BrowserRouter basename="/ui">
          <Routes>
            {/* Public routes */}
            <Route
              path="/login"
              element={
                isAuthenticated ? (
                  <Navigate to="/dashboard" replace />
                ) : (
                  <LoginPage />
                )
              }
            />

            {/* Protected routes */}
            <Route
              path="/"
              element={
                isAuthenticated ? (
                  <DashboardLayout />
                ) : (
                  <Navigate to="/login" replace />
                )
              }
            >
              <Route index element={<Navigate to="/dashboard" replace />} />
              <Route path="dashboard" element={<DashboardPage />} />
              <Route path="users" element={<UsersPage />} />
              <Route path="hooks" element={<HooksPage />} />
              <Route path="accounts" element={<AccountsPage />} />
              <Route
                path="whatsapp-business"
                element={<WhatsAppBusinessPage />}
              />
              <Route
                path="business-templates"
                element={<TemplateManagementPage />}
              />
              <Route path="catalogs" element={<CatalogManagementPage />} />
              <Route path="flows" element={<FlowManagementPage />} />
              <Route path="send-message" element={<SendMessagePage />} />
              <Route path="event-logs" element={<EventLogsPage />} />
              <Route path="message-cache" element={<MessageCachePage />} />
              <Route
                path="sw"
                element={
                  <Suspense fallback={null}>
                    <SwaggerPage />
                  </Suspense>
                }
              />
            </Route>

            {/* Catch all */}
            <Route path="*" element={<Navigate to="/" replace />} />
          </Routes>
        </BrowserRouter>
      </ModalsProvider>
    </MantineProvider>
  );
}

export default App;