"use client";
import * as React from "react";
import { useRouter } from "next/navigation";
import { updateProfileName } from "@/actions/account";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Field, Hint, Label } from "@/components/ui/label";
import { Alert } from "@/components/ui/alert";

export function ProfileNameForm({ name }: { name: string }) {
  const router = useRouter();
  const [value, setValue] = React.useState(name);
  const [error, setError] = React.useState<string | null>(null);
  const [saved, setSaved] = React.useState(false);
  const [pending, startTransition] = React.useTransition();
  const dirty = value.trim() !== name;

  return (
    <form
      className="grid gap-3"
      onSubmit={(e) => {
        e.preventDefault();
        setError(null);
        setSaved(false);
        startTransition(async () => {
          const res = await updateProfileName(value);
          if (!res.ok) {
            setError(res.error);
            return;
          }
          setSaved(true);
          router.refresh();
        });
      }}
    >
      {error ? <Alert variant="danger">{error}</Alert> : null}
      {saved ? <Alert variant="success">Name updated.</Alert> : null}
      <Field>
        <Label htmlFor="profile-name">Full name</Label>
        <div className="flex gap-2">
          <Input id="profile-name" value={value} onChange={(e) => setValue(e.target.value)} maxLength={80} autoComplete="name" className="sm:max-w-sm" />
          <Button type="submit" variant="primary" loading={pending} disabled={!dirty || value.trim().length === 0}>
            Save
          </Button>
        </div>
        <Hint>Shown in the dashboard and in emails we send you.</Hint>
      </Field>
    </form>
  );
}