"use client";

import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { useAuth, useAppShell } from "@abe-kap/appshell-sdk/react";
import { isShellConfigured } from "@/lib/appshell";

/**
 * Client gate for the dashboard. When the Shell is live, an unauthenticated
 * visitor is bounced to the portal; while the session is resolving we hold a
 * lightweight splash. When the Shell is NOT configured this is a pass-through,
 * so the existing mock demo (any login → /dashboard) keeps working unchanged.
 */
export function AuthGate({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  const { status } = useAuth();
  const { ready } = useAppShell();
  const shell = isShellConfigured();

  useEffect(() => {
    // Only bounce to login once the SDK has finished booting AND restore() has
    // resolved to unauthenticated. Redirecting while boot is still in flight would
    // drop a perfectly valid session on reload (the status is transiently not-yet
    // "authenticated" during boot).
    if (shell && ready && status === "unauthenticated") router.replace("/portal/login");
  }, [shell, ready, status, router]);

  if (shell && (!ready || status !== "authenticated")) {
    return (
      <div style={{ minHeight: "60vh", display: "grid", placeItems: "center", color: "var(--muted, #888)" }}>
        {ready && status === "unauthenticated" ? "Redirecting to sign in…" : "Loading your workspace…"}
      </div>
    );
  }
  return <>{children}</>;
}