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";
import { ProfileImageInput } from "./profile-image-input";

export function ProfileForm({
  name: initialName,
  email,
  image: initialImage,
  nextPath,
  setup = false,
}: {
  name: string;
  email: string;
  image: string | null;
  nextPath?: string;
  setup?: boolean;
}) {
  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],
  );

  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>{setup ? "ปรับแต่งโปรไฟล์" : "ข้อมูลบัญชี"}</CardTitle>
        {setup && <CardDescription>ขั้นตอน 3 จาก 3 - ปรับแต่งโปรไฟล์</CardDescription>}
        <CardDescription>{email}</CardDescription>
      </CardHeader>
      <CardContent>
        <form id="profile-form" onSubmit={save}>
          <FieldGroup>
            {setup && <p className="text-sm text-muted-foreground">
              สร้างบัญชีเรียบร้อยแล้ว เพิ่มรูปโปรไฟล์ได้ตามต้องการ หรือกดข้ามเพื่อเริ่มใช้งาน คุณสามารถยืนยันอีเมลภายหลังได้ที่หน้าโปรไฟล์
            </p>}
            <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>
                <ProfileImageInput
                  id="profile-image"
                  onChange={(cropped) => {
                    setFile(cropped);
                    setPreview(URL.createObjectURL(cropped));
                    setError("");
                  }}
                  onError={setError}
                  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 ? "กำลังบันทึก..." : setup ? "บันทึกและเริ่มใช้งาน" : "บันทึกโปรไฟล์"}
        </Button>
        {nextPath && <Button variant="outline" nativeButton={false} disabled={busy}
          render={<Link href={nextPath} />}>ข้ามและเริ่มใช้งาน</Button>}
      </CardFooter>
    </Card>
  );
}