import { createFileRoute } from "@tanstack/react-router";
import { ProxyViewerContainer } from "../../components/ProxyViewerContainer";
import { decodeSessionIdFromPath, encodeSessionIdForPath } from "../../lib/sessionUrl";

/**
 * Per-session deep link: opens a page that is pre-scoped to a single
 * session id. The path segment is base64url-encoded so JSON session blobs
 * and Unicode project paths survive dev-server URL normalization.
 */
export const Route = createFileRoute("/session/$sessionId")({
  component: SessionViewerRoute,
  parseParams: (params) => ({
    sessionId: decodeSessionIdFromPath(params.sessionId),
  }),
  stringifyParams: (params) => ({
    sessionId: encodeSessionIdForPath(params.sessionId),
  }),
});

function SessionViewerRoute(): React.JSX.Element {
  const { sessionId } = Route.useParams();
  return <ProxyViewerContainer key={sessionId} initialSessionId={sessionId} />;
}
