"use client";

import { useEffect, useState, type FormEvent } from "react";
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 }: {
  name: string; email: string; image: string | null;
}) {
  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("บันทึกโปรไฟล์ไม่สำเร็จ กรุณาลองอีกครั้ง");
      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><Button type="submit" form="profile-form" disabled={busy || name.trim().length < 2 || name.trim().length > 80}>
      {busy ? "กำลังบันทึก..." : "บันทึกโปรไฟล์"}
    </Button></CardFooter>
  </Card>;
}