import { useCallback, useMemo, type ReactNode } from "react";
import { useNavigate, useParams } from "@tanstack/react-router";
import { PageMentionProvider } from "./provider";
import { useCanonicalPageContext } from "@/client/components/workspace/use-canonical-page-context";
import { useActivePageState } from "@/client/components/active-page/use-active-page";
import { useOnline } from "@/client/hooks/use-online";
import { useActiveWorkspacePages } from "@/client/stores/workspace-replica";

export function CanonicalPageMentionSurface({ children }: { children: ReactNode }) {
  const navigate = useNavigate();
  const params = useParams({ strict: false }) as { workspaceSlug: string; pageId?: string };
  const { workspaceId, workspace, accessMode } = useCanonicalPageContext();
  const activePageState = useActivePageState();
  const online = useOnline();
  const pages = useActiveWorkspacePages(workspaceId);

  const cacheMode = activePageState.kind === "ready" && activePageState.backing === "cache" ? "cache" : "live";
  const workspaceSlug = workspace?.slug ?? params.workspaceSlug;

  const pagesById = useMemo(() => {
    const map = new Map<string, { title: string; icon: string | null }>();
    for (const page of pages) {
      map.set(page.id, { title: page.title, icon: page.icon });
    }
    return map;
  }, [pages]);

  const scopeKey = workspaceId ? `canonical:${workspaceId}:${accessMode ?? "unknown"}` : null;

  const lookupCachedPage = useCallback(
    (pageId: string) => {
      return pagesById.get(pageId) ?? null;
    },
    [pagesById],
  );

  const handleNavigate = useCallback(
    (pageId: string) => {
      navigate({
        to: "/$workspaceSlug/$pageId",
        params: { workspaceSlug, pageId },
      });
    },
    [navigate, workspaceSlug],
  );

  return (
    <PageMentionProvider
      workspaceId={workspaceId ?? undefined}
      scopeKey={scopeKey}
      cacheMode={cacheMode}
      networkEnabled={online}
      lookupCachedPage={lookupCachedPage}
      navigate={handleNavigate}
    >
      {children}
    </PageMentionProvider>
  );
}