import { useAuth } from "@tailor-platform/app-shell";
import { useOnline } from "@/hooks/use-online";
import { ConnectivityErrorScreen } from "./connectivity-error-screen";
import { Spinner } from "./ui/spinner";

/**
 * Pre-auth guard provided to `<AuthProvider guardComponent={...} />`.
 *
 * Decision matrix:
 *   - auth bootstrap in flight (`!isReady`) -> loading spinner
 *   - browser offline                       -> connectivity error
 *     (without this branch, an offline browser fails the auth bootstrap and
 *     app-shell reports `isAuthenticated === false`, so we'd otherwise show
 *     "Sign in required" — misleading, since there's nothing to sign into.)
 *   - authenticated user not yet present    -> "Sign in required"
 *   - otherwise                             -> falls through (children render)
 */
export const AuthGuard = () => {
  const { isReady, isAuthenticated, login } = useAuth();
  const online = useOnline();

  if (!isReady) {
    return (
      <div className="flex min-h-screen items-center justify-center">
        <div className="flex flex-col items-center space-y-4">
          <Spinner className="size-12" />
          <p className="text-muted-foreground text-sm">Loading…</p>
        </div>
      </div>
    );
  }

  // Browser-level offline check. `useOnline` re-renders this component when
  // the browser fires `online`/`offline`, so the moment connectivity returns
  // we transparently retry the auth flow without a manual refresh.
  if (!online) {
    return <ConnectivityErrorScreen />;
  }

  if (!isAuthenticated) {
    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">Sign in required</h1>
          <p className="text-sm text-muted-foreground">
            Continue with your Tailor account to access this app.
          </p>
          <button
            type="button"
            onClick={() => {
              void login();
            }}
            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 in
          </button>
        </div>
      </main>
    );
  }
};