"use client";

/**
 * Shared layout for the auth pages (login, signup, forgot-password,
 * reset-password). Provides the centered card frame so each page only
 * has to render its own form.
 *
 * Also gates the routes: a signed-in user landing on any /login, /signup,
 * etc. URL is bounced to /u/me (or the `next` query param if present).
 * The check happens client-side because auth state lives in
 * AuthProvider — there's no server-side cookie inspection here yet, and
 * the redirect is purely cosmetic (logged-in users don't gain anything
 * from re-seeing these forms, and signing in over an existing session
 * would just no-op).
 */

import { useEffect } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { useAuth } from "@/components/auth/auth-provider";

export default function AuthLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const { user, loading } = useAuth();
  const router = useRouter();
  const params = useSearchParams();

  useEffect(() => {
    if (loading || !user) return;
    const next = params.get("next");
    router.replace(next && next.startsWith("/") ? next : "/u/me");
  }, [loading, user, router, params]);

  // Don't flash the form for an instant before the redirect fires.
  if (!loading && user) {
    return (
      <main className="flex items-center justify-center px-4 py-12 min-h-[90vh]">
        <p className="text-sm text-muted-foreground">Redirecting…</p>
      </main>
    );
  }

  return (
    <main className="flex items-center justify-center px-4 py-12 min-h-[90vh]">
      <div className="w-full max-w-md">{children}</div>
    </main>
  );
}