import React, { createContext, useContext, useEffect } from "react";import { useAtomValue } from "@effect/atom-react";import * as AsyncResult from "effect/unstable/reactivity/AsyncResult"; import { meAtom } from "../api/account-atoms"; // ---------------------------------------------------------------------------// Shared auth seam for the multiplayer apps (cloud + self-host).//// `useAuth()` reflects the `/account/me` query: loading → unauthenticated →// authenticated. Provider-neutral — the only difference between cloud (WorkOS)// and self-host (Better Auth) is which server answers `me` and how the session// cookie was minted. Analytics stay OUT of here; a host that wants to identify// the user (cloud → PostHog) passes an `onIdentify` callback.// --------------------------------------------------------------------------- export type AuthUser = {  id: string;  email: string;  name: string | null;  avatarUrl: string | null;}; export type AuthOrganization = {  id: string;  name: string;}; export type AuthState =  | { status: "loading" }  | { status: "unauthenticated" }  | { status: "authenticated"; user: AuthUser; organization: AuthOrganization | null }; export type IdentifyFn = (  state: Extract<AuthState, { status: "authenticated" }> | { status: "unauthenticated" },) => void; const AuthContext = createContext<AuthState>({ status: "loading" }); export const useAuth = () => useContext(AuthContext); const AuthProviderClient = ({  children,  onIdentify,}: {  children: React.ReactNode;  onIdentify?: IdentifyFn;}) => {  const result = useAtomValue(meAtom);   const state: AuthState = AsyncResult.match(result, {    onInitial: () => ({ status: "loading" as const }),    onSuccess: ({ value }) => ({      status: "authenticated" as const,      user: value.user,      organization: value.organization,    }),    onFailure: () => ({ status: "unauthenticated" as const }),  });   // Primitive identity fields so the identify effect fires only on real  // transitions (the `state` object is rebuilt every render).  const status = state.status;  const userId = state.status === "authenticated" ? state.user.id : null;  const email = state.status === "authenticated" ? state.user.email : null;  const name = state.status === "authenticated" ? state.user.name : null;  const avatarUrl = state.status === "authenticated" ? state.user.avatarUrl : null;  const organizationId = state.status === "authenticated" ? (state.organization?.id ?? null) : null;  const organizationName =    state.status === "authenticated" ? (state.organization?.name ?? null) : null;   useEffect(() => {    if (!onIdentify) return;    if (status === "authenticated" && userId && email !== null) {      onIdentify({        status: "authenticated",        user: { id: userId, email, name, avatarUrl },        organization: organizationId ? { id: organizationId, name: organizationName ?? "" } : null,      });    } else if (status === "unauthenticated") {      onIdentify({ status: "unauthenticated" });    }  }, [onIdentify, status, userId, email, name, avatarUrl, organizationId, organizationName]);   return <AuthContext.Provider value={state}>{children}</AuthContext.Provider>;}; export const AuthProvider = ({  children,  onIdentify,}: {  children: React.ReactNode;  onIdentify?: IdentifyFn;}) => {  if (typeof window === "undefined") {    return <AuthContext.Provider value={{ status: "loading" }}>{children}</AuthContext.Provider>;  }  return <AuthProviderClient onIdentify={onIdentify}>{children}</AuthProviderClient>;};