import { StrictMode, useEffect, useState } from "react";
import { createRoot } from "react-dom/client";
import { 
  createBrowserRouter,
  RouterProvider,
  redirect,
  Navigate
} from "react-router-dom";
import App from "./pages/App";
import "./index.css";
import Conversation from "./pages/conversation/App";
import { isAuthenticated } from "./lib/login";
import LoginPage, { EmailVerificationForm } from "./pages/auth/login";
import Home from "./pages/home/home"
import React from "react";
import RegisterPage from "./pages/auth/signup";
import SubscriptionSuccess from "./pages/sucess/success";
import { Rocket } from "lucide-react";
import EmailVerificationPage from "./pages/auth/emailverification";
import PricingPage from "./pages/pricing/pricing";
import SubscriptionDetail from "./pages/subscriptionDetail/App";

// Componente para proteger rotas
const ProtectedRoute = ({ children }: { children: JSX.Element }) => {
  const [loading, setLoading] = useState(true);
  const [auth, setAuth] = useState(false);
 

  useEffect(() => {
    const checkAuth = async () => {
      const result = await isAuthenticated();
      setAuth(result);
      setLoading(false);
    };
    checkAuth();
  }, []);

  {/**if (loading) {
    return <div className="items-center justify-content-center bg-galaxy-black"><Rocket className="w-8 h-8 text-neon-purple animate-pulse" />
    <span className="text-2xl font-bold bg-gradient-to-r from-neon-blue to-neon-purple bg-clip-text text-transparent">
      SalesPulse
    </span></div>; // ou um spinner
  }
**/}
  return auth ? children : <Navigate to="/login" replace />;
};

const router = createBrowserRouter([
  
  {
    path: "/",
    element: <Home />,
  },
  {
    path:"/emailverification",
    element: <EmailVerificationPage />,
  },
  {
    path:"/pricing",
    element: <PricingPage/>
  },

  {
    path: "/login",
    element: <LoginPage />,
    loader: async () => {
      if (await isAuthenticated()) {
        return redirect("/dashboard");
      }
      return null;
    }
  },
  {
    path: "/register",
    element: <RegisterPage />,
    loader: async () => {
      if (await isAuthenticated()) {
        return redirect("/dashboard");
      }
      return null;
    }
  },
  {
    path: "/dashboard",
    element: (
      <ProtectedRoute>
        <Conversation />
      </ProtectedRoute>
    ),
    loader: () => {
      if (!isAuthenticated()) {
        return redirect("/login");
      }
      return null;
    }
  },
  {
    path: "/subscription/success",
    element: <SubscriptionSuccess />,
    loader: () => {
      if (!isAuthenticated()) {
        return redirect("/login");
      }
      return null;
    }
  },
  {
    path: "/subscription/detail",
    element: <SubscriptionDetail />,
    loader: () => {
      if (!isAuthenticated()) {
        return redirect("/login");
      }
      return null;
    }
  },
  // Rota para erros 404
  {
    path: "*",
    element: <div>Página não encontrada</div>
  }
]);

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <RouterProvider router={router} />
  </StrictMode>
);