buzz-sheet/components/auth/profile-form.tsx

"use client";

import { useEffect, useState, type FormEvent } from "react";
import Link from "next/link";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";

export function ProfileForm({
  name: initialName,
  email,
  image: initialImage,
  nextPath,
}: {
  name: string;
  email: string;
  image: string | null;
  nextPath?: string;
}) {
  const [name, setName] = useState(initialName);
  const [file, setFile] = useState<File | null>(null);
  const [preview, setPreview] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");

  useEffect(
    () => () => {
      if (preview) URL.revokeObjectURL(preview);
    },
    [preview],
  );

  function chooseFile(next: File | null) {
    setError("");
    if (
      next &&
      (next.size > 6 * 1024 * 1024 ||
        !["image/png", "image/jpeg", "image/webp"].includes(next.type))
    ) {
      setError("ใช้รูป PNG, JPEG หรือ WebP ขนาดไม่เกิน 6 MB");
      return;
    }
    setFile(next);
    setPreview(next ? URL.createObjectURL(next) : null);
  }

  async function save(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (busy) return;
    setBusy(true);
    setError("");
    try {
      const form = new FormData();
      form.set("name", name.trim());
      if (file) form.set("image", file);
      const response = await fetch("/api/profile", {
        method: "POST",
        body: form,
      });
      if (!response.ok)
        throw new Error("บันทึกโปรไฟล์ไม่สำเร็จ กรุณาลองอีกครั้ง");
      if (nextPath) window.location.assign(nextPath);
      else window.location.reload();
    } catch (cause) {
      setError(
        cause instanceof Error ? cause.message : "บันทึกโปรไฟล์ไม่สำเร็จ",
      );
      setBusy(false);
    }
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>ข้อมูลบัญชี</CardTitle>
        <CardDescription>{email}</CardDescription>
      </CardHeader>
      <CardContent>
        <form id="profile-form" onSubmit={save}>
          <FieldGroup>
            <Field>
              <FieldLabel htmlFor="profile-image">รูปโปรไฟล์</FieldLabel>
              <div className="flex items-center gap-4">
                <Avatar size="lg" className="size-16">
                  {(preview || initialImage) && (
                    <AvatarImage
                      src={preview || initialImage || ""}
                      alt="รูปโปรไฟล์"
                    />
                  )}
                  <AvatarFallback>
                    {name.trim().charAt(0).toUpperCase() || "?"}
                  </AvatarFallback>
                </Avatar>
                <Input
                  id="profile-image"
                  type="file"
                  accept="image/png,image/jpeg,image/webp"
                  onChange={(event) => {
                    const selected = event.target.files?.[0] ?? null;
                    chooseFile(selected);
                    if (
                      selected &&
                      (selected.size > 6 * 1024 * 1024 ||
                        !["image/png", "image/jpeg", "image/webp"].includes(
                          selected.type,
                        ))
                    )
                      event.target.value = "";
                  }}
                  disabled={busy}
                />
              </div>
            </Field>
            <Field>
              <FieldLabel htmlFor="profile-name">ชื่อที่แสดง</FieldLabel>
              <Input
                id="profile-name"
                value={name}
                onChange={(event) => setName(event.target.value)}
                minLength={2}
                maxLength={80}
                required
                disabled={busy}
              />
            </Field>
            {error && (
              <Alert variant="destructive">
                <AlertDescription>{error}</AlertDescription>
              </Alert>
            )}
          </FieldGroup>
        </form>
      </CardContent>
      <CardFooter className="flex-wrap gap-2">
        <Button
          type="submit"
          form="profile-form"
          disabled={busy || name.trim().length < 2 || name.trim().length > 80}
        >
          {busy ? "กำลังบันทึก..." : "บันทึกโปรไฟล์"}
        </Button>
        {nextPath && (
          <Button
            variant="ghost"
            nativeButton={false}
            render={<Link href={nextPath} />}
          >
            ไว้ก่อน
          </Button>
        )}
      </CardFooter>
    </Card>
  );
}