"use client";

import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { useAuth } from "@/components/auth/auth-provider";
import { ProfileForm } from "./profile-form";

/**
 * /profile is a client-rendered page guarded by useAuth.
 *
 * We deliberately do NOT use Next.js middleware for the auth gate: the
 * session cookie is httpOnly on the BFF domain, and middleware-level
 * cookie forwarding to the BFF is more code than this approach is worth.
 *
 * Instead the page renders a loading state until AuthProvider hydrates,
 * then either shows the form or redirects to /login.
 */
export default function ProfilePage() {
  const router = useRouter();
  const { user, loading } = useAuth();

  useEffect(() => {
    if (!loading && !user) {
      router.replace("/login?next=/profile");
    }
  }, [loading, user, router]);

  if (loading || !user) {
    return (
      <main className="flex-1 flex items-center justify-center px-4 py-12">
        <p className="text-sm text-muted-foreground">Loading…</p>
      </main>
    );
  }

  return (
    <main className="flex-1 max-w-2xl w-full mx-auto px-4 py-12 space-y-8">
      <header>
        <h1 className="font-heading text-3xl font-medium">Your profile</h1>
        <p className="text-sm text-muted-foreground mt-1">
          Update how you appear across Prabhupāda Says.
        </p>
      </header>
      <ProfileForm user={user} />
    </main>
  );
}