import { useAuth } from "@tailor-platform/app-shell";
import { useEffect, useRef, type ReactNode } from "react";
import { useQuery } from "urql";
import { graphql } from "@/graphql";
import { ConnectivityErrorScreen } from "./connectivity-error-screen";
import { Spinner } from "./ui/spinner";

const MeStatusQuery = graphql(`
  query MeStatus {
    me {
      status
    }
  }
`);

/**
 * Gates the app on the current user's account status. Runs after AuthGuard has
 * confirmed the user is authenticated.
 *
 * Decision matrix:
 *   - auth error (UNAUTHORIZED/FORBIDDEN) -> token is invalid/expired, re-login
 *   - query in flight                     -> spinner
 *   - status ACTIVE                       -> render the app
 *   - status confirmed but not ACTIVE     -> "Account deactivated"
 *   - indeterminate (network/server error or empty response) -> connectivity
 *     error screen with a retry
 *
 * The "Account deactivated" screen is only ever shown for a *confirmed*
 * non-ACTIVE status — never as a side effect of missing data — so transient
 * connectivity failures are no longer misreported as a deactivated account.
 */
export const ActiveUserGuard = ({ children }: { children: ReactNode }) => {
  const { logout, login } = useAuth();
  const [{ data, fetching, error }, refetch] = useQuery({
    query: MeStatusQuery,
  });

  // An auth error (UNAUTHORIZED/FORBIDDEN) means the token is invalid or
  // expired. Detect it whenever an error is present — even if we still hold
  // cached data from a previous fetch (urql is configured cache-and-network) —
  // so a revalidation auth failure still forces re-login instead of rendering
  // the app with a bad token.
  const isAuthError =
    error?.graphQLErrors?.some(
      (e) => e.extensions?.code === "UNAUTHORIZED" || e.extensions?.code === "FORBIDDEN",
    ) ?? false;

  // Trigger login as a post-render side effect, guarding against repeated calls
  // across re-renders.
  const loginStarted = useRef(false);
  useEffect(() => {
    if (isAuthError && !loginStarted.current) {
      loginStarted.current = true;
      void login();
    } else if (!isAuthError) {
      loginStarted.current = false;
    }
  }, [isAuthError, login]);

  // Auth errors take precedence over every branch below: hold a blank frame
  // while the login redirect kicks in.
  if (isAuthError) return null;

  // Initial load or an in-flight retry without cached data -> show a spinner
  // instead of a blank screen so the user gets feedback that something is
  // happening. The `!data?.me` guard matters under urql's cache-and-network
  // policy: a re-execution or remount sets `fetching=true` while the previous
  // result is still in cache, and we don't want to flash a full-screen spinner
  // over the already-rendered app.
  if (fetching && !data?.me) {
    return (
      <div className="flex min-h-screen items-center justify-center">
        <Spinner className="size-12" />
      </div>
    );
  }

  // Status confirmed ACTIVE -> render the app.
  if (data?.me?.status === "ACTIVE") {
    return <>{children}</>;
  }

  // Status confirmed but not ACTIVE -> genuine deactivation.
  if (data?.me) {
    return (
      <main className="min-h-screen grid place-items-center px-4">
        <div className="w-full max-w-sm rounded-lg border bg-card p-6 space-y-4">
          <h1 className="text-lg font-semibold">Account deactivated</h1>
          <p className="text-sm text-muted-foreground">
            Your account has been deactivated. Please contact an administrator.
          </p>
          <button
            type="button"
            onClick={() => void logout()}
            className="inline-flex h-9 w-full items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90"
          >
            Sign out
          </button>
        </div>
      </main>
    );
  }

  // Otherwise we couldn't determine the user's status: a network/server error
  // or an empty response. This is NOT a deactivated account, so surface a
  // connectivity error with a retry instead of misleading the user.
  return <ConnectivityErrorScreen onRetry={() => refetch({ requestPolicy: "network-only" })} />;
};