"use client";

/**
 * /settings/profile — dedicated profile editor.
 *
 * Lives outside the /u/me profile layout (same reasoning as /settings) so it
 * carries the default site chrome instead of the ProfileHeader + tabs frame.
 * The "Edit profile" button on the profile header links here. The page owns
 * the title + back button; ProfileEditForm renders the sections. Saving stays
 * on the page (toast); the back button / Cancel return to /u/me.
 */

import { useEffect } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { ChevronLeft } from "lucide-react";
import { useAuth } from "@/components/auth/auth-provider";
import { useAuthGate } from "@/components/auth/auth-gate";
import { ProfileEditForm } from "@/components/profile/profile-edit-form";

export default function EditProfilePage() {
  const { user, loading } = useAuth();
  const { requireAuth } = useAuthGate();
  const router = useRouter();

  // Same auth gate as the /u/me layout: prompt anonymous visitors and bounce
  // them home if they dismiss it.
  useEffect(() => {
    if (loading || user) return;
    let cancelled = false;
    (async () => {
      const ok = await requireAuth();
      if (!ok && !cancelled) router.replace("/");
    })();
    return () => {
      cancelled = true;
    };
  }, [loading, user, requireAuth, router]);

  return (
    <main className="flex-1 max-w-3xl w-full mx-auto px-4 sm:px-6 py-6 space-y-10">
      <header className="space-y-1">
        <Link
          href="/u/me"
          className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
        >
          <ChevronLeft className="size-4" />
          Back to profile
        </Link>
        <h1 className="font-[family-name:var(--font-title)] text-3xl font-semibold text-foreground pt-2">
          Edit profile
        </h1>
      </header>

      {loading || !user ? (
        <p className="text-sm text-muted-foreground">
          {loading ? "Loading…" : "Sign in to edit your profile."}
        </p>
      ) : (
        <ProfileEditForm user={user} onDone={() => router.push("/u/me")} />
      )}
    </main>
  );
}