import { Outlet, useNavigate, useLocation } from "react-router";
import { useEffect, useMemo } from "react";
import { SpinnerOverlay } from "./ui/spinner";
import { useAgentDetails, useAuthorizeVendor } from "app/utils/api";
import { useGlobalContext } from "./providers/global-context";

export function AppContent() {
  const { user } = useGlobalContext()
  const { data: vendorData, isLoading: isVendorLoading } = useAuthorizeVendor();
  useAgentDetails(user?.agent_id || "")
  const navigate = useNavigate();
  const location = useLocation();

  const needsRedirect = useMemo(() => {
    if (isVendorLoading || !vendorData) return false;

    // const path = location.pathname;
    // if (!vendorData.onboarded && path !== "/app/onboarding") return true;
    // if (vendorData.onboarded && path === "/app/onboarding") return true;

    return false;
  }, [isVendorLoading, vendorData, location.pathname]);

  useEffect(() => {
    // if (!vendorData || isVendorLoading) return;

    // if (!vendorData.onboarded && location.pathname !== "/app/onboarding") {
    //   navigate("/app/onboarding", { replace: true });
    // } else if (vendorData.onboarded && location.pathname === "/app/onboarding") {
    //   navigate("/app", { replace: true });
    // }
  }, [isVendorLoading, vendorData, location.pathname, navigate]);

  if (isVendorLoading || vendorData === null || needsRedirect) {
    return <SpinnerOverlay text="Processing..." />;
  }

  return (
    <>
      <s-app-nav>
        {vendorData?.onboarded ? (
          <s-link href="/app/onboarding">Onboarding</s-link>
        ) : (
          <>
            <s-link href="/app/inbox">Inbox</s-link>
            <s-link href="/app">Dashboard</s-link>
            <s-link href="/app/aiassistant">AI Assistant</s-link>
            <s-link href="/app/chatbot">Chatbot</s-link>
            <s-link href="/app/faq">FAQ</s-link>
            <s-link href="/app/proactive-chat">Proactive Chat</s-link>
            <s-link href="/app/contacts">Contacts</s-link>
            <s-link href="/app/pricing">Pricing</s-link>
            <s-link href="/app/subscription">Subscription</s-link>
            <s-link href="/app/settings">Settings</s-link>
          </>
        )}
      </s-app-nav>

      <Outlet />
    </>
  );
}