spsays-training/components/profile/profile-edit-form.tsx

"use client";

/**
 * ProfileEditForm — the editor block used in /u/me's edit mode.
 *
 * Three editable fields:
 *   • Display name        (PATCH /users/me { name })
 *   • Handle              (PATCH /users/me { handle }) — 409 if taken
 *   • Avatar              (R2 presign + PATCH /users/me { avatar_url })
 *
 * `onDone` is invoked after a successful save OR when the user clicks
 * "Cancel" — the parent flips back to view mode.
 *
 * No log-out button here — that's handled by the sidebar footer so it lives
 * outside the edit context.
 */

import { useRef, useState } from "react";
import Image from "next/image";
import { ImagePlus, Save, X } from "lucide-react";
import { useAuth } from "@/components/auth/auth-provider";
import { auth, AuthError, type User } from "@/lib/auth";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export function ProfileEditForm({
  user,
  onDone,
}: {
  user: User;
  onDone: () => void;
}) {
  const { setUser } = useAuth();
  const fileInput = useRef<HTMLInputElement>(null);

  const [name, setName] = useState(user.name);
  const [handle, setHandle] = useState(user.handle);
  const [avatarUrl, setAvatarUrl] = useState<string | null>(user.avatar_url);
  const [saving, setSaving] = useState(false);
  const [uploading, setUploading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const dirty =
    name.trim() !== user.name ||
    handle.trim() !== user.handle ||
    avatarUrl !== user.avatar_url;

  async function onSubmit(e: React.SyntheticEvent) {
    e.preventDefault();
    setError(null);
    setSaving(true);
    try {
      // Patch only what's changed — keeps the audit log tidy and avoids
      // bumping updated_at when the user just clicked "Save" without edits.
      const updated = await auth.updateProfile(
        name.trim() !== user.name ? name.trim() : undefined,
        avatarUrl === user.avatar_url ? undefined : (avatarUrl ?? ""),
        handle.trim() !== user.handle ? handle.trim() : undefined,
      );
      setUser(updated);
      onDone();
    } catch (err) {
      setError(err instanceof AuthError ? err.message : "Could not save.");
    } finally {
      setSaving(false);
    }
  }

  async function onAvatarChange(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (fileInput.current) fileInput.current.value = "";
    if (!file) return;
    setError(null);
    setUploading(true);
    try {
      const publicURL = await auth.uploadAvatar(file);
      setAvatarUrl(publicURL);
    } catch (err) {
      setError(err instanceof AuthError ? err.message : "Upload failed.");
    } finally {
      setUploading(false);
    }
  }

  return (
    <form onSubmit={onSubmit} className="space-y-6 rounded-2xl bg-card ring-1 ring-foreground/10 p-5 sm:p-6">
      <div className="flex items-center justify-between">
        <h2 className="font-[family-name:var(--font-title)] text-xl sm:text-2xl font-semibold text-foreground">
          Edit profile
        </h2>
        <button
          type="button"
          onClick={onDone}
          aria-label="Cancel"
          className="size-9 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted inline-flex items-center justify-center"
        >
          <X className="size-4" />
        </button>
      </div>

      {/* Avatar — same widget pattern as the old /profile form */}
      <section className="flex items-center gap-4">
        <AvatarPreview src={avatarUrl} name={user.name} />
        <div className="flex flex-col gap-2">
          <input
            ref={fileInput}
            type="file"
            accept="image/png,image/jpeg,image/webp,image/gif"
            hidden
            onChange={onAvatarChange}
          />
          <Button
            variant="outline"
            type="button"
            onClick={() => fileInput.current?.click()}
            disabled={uploading || saving}
            className="h-10 px-4 text-sm gap-1.5"
          >
            <ImagePlus className="size-4" />
            {uploading ? "Uploading…" : avatarUrl ? "Change" : "Upload"}
          </Button>
          {avatarUrl ? (
            <Button
              variant="ghost"
              type="button"
              onClick={() => setAvatarUrl(null)}
              disabled={uploading || saving}
              className="h-10 px-4 text-sm"
            >
              Remove
            </Button>
          ) : null}
        </div>
      </section>

      <div className="space-y-4">
        <div className="space-y-1.5">
          <Label htmlFor="profile-name">Display name</Label>
          <Input
            id="profile-name"
            value={name}
            onChange={(e) => setName(e.target.value)}
            maxLength={120}
            required
          />
        </div>

        <div className="space-y-1.5">
          <Label htmlFor="profile-handle">Handle</Label>
          <div className="flex items-center gap-2">
            <span className="text-sm text-muted-foreground">@</span>
            <Input
              id="profile-handle"
              value={handle}
              onChange={(e) => setHandle(e.target.value)}
              maxLength={32}
              pattern="[a-zA-Z0-9._-]+"
              required
            />
          </div>
          <p className="text-xs text-muted-foreground">
            Letters, digits, dashes. Your public profile lives at /u/{handle || user.handle}.
          </p>
        </div>

        <div className="space-y-1.5">
          <Label htmlFor="profile-email">Email</Label>
          <Input id="profile-email" value={user.email} disabled />
          <p className="text-xs text-muted-foreground">
            Email changes aren&apos;t supported yet.
          </p>
        </div>
      </div>

      {error ? <p className="text-sm text-destructive">{error}</p> : null}

      <div className="flex items-center justify-end gap-2 pt-2 border-t border-border">
        <Button
          type="button"
          variant="ghost"
          onClick={onDone}
          className="h-10 px-4 text-sm"
        >
          Cancel
        </Button>
        <Button
          type="submit"
          disabled={saving || uploading || !dirty}
          className="h-10 px-4 text-sm gap-1.5"
        >
          <Save className="size-4" />
          {saving ? "Saving…" : "Save changes"}
        </Button>
      </div>
    </form>
  );
}

function AvatarPreview({ src, name }: { src: string | null; name: string }) {
  if (src) {
    return (
      <Image
        src={src}
        alt={name}
        width={80}
        height={80}
        className="size-20 rounded-full object-cover ring-1 ring-foreground/10"
        unoptimized
      />
    );
  }
  const initials =
    name
      .split(/\s+/)
      .map((p) => p[0])
      .slice(0, 2)
      .join("")
      .toUpperCase() || "?";
  return (
    <div className="size-20 rounded-full bg-muted flex items-center justify-center text-2xl font-medium text-muted-foreground ring-1 ring-foreground/10">
      {initials}
    </div>
  );
}