NextChair/src/features/auth/components/accept-invitation-form.tsx

"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { acceptInvitationAction } from "@/features/auth/actions/accept-invitation";
import { acceptInvitationSchema } from "@/features/auth/schemas";
import type { AcceptInvitationInput } from "@/features/auth/schemas";

export function AcceptInvitationForm({ token, businessName }: { token: string; businessName: string }) {
  const [formError, setFormError] = useState<string | null>(null);

  const {
    register,
    handleSubmit,
    setError,
    formState: { errors, isSubmitting },
  } = useForm<AcceptInvitationInput>({ resolver: zodResolver(acceptInvitationSchema) });

  const onSubmit = async (data: AcceptInvitationInput) => {
    setFormError(null);
    const formData = new FormData();
    formData.set("password", data.password);
    formData.set("confirmPassword", data.confirmPassword);

    const result = await acceptInvitationAction(token, formData);
    if (!result.success) {
      setFormError(result.error ?? "Something went wrong. Please try again.");
      if (result.fieldErrors) {
        for (const [field, messages] of Object.entries(result.fieldErrors)) {
          if (messages?.[0]) setError(field as keyof AcceptInvitationInput, { message: messages[0] });
        }
      }
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} noValidate className="space-y-4">
      <p className="text-muted text-sm">
        You&apos;ve been invited to join <span className="text-ink font-bold">{businessName}</span>. Set a password
        to finish setting up your account.
      </p>
      <Input
        label="Password"
        type="password"
        placeholder="••••••••"
        error={errors.password?.message}
        {...register("password")}
      />
      <Input
        label="Confirm Password"
        type="password"
        placeholder="••••••••"
        error={errors.confirmPassword?.message}
        {...register("confirmPassword")}
      />
      {formError && (
        <p role="alert" className="text-danger text-sm font-medium">
          {formError}
        </p>
      )}
      <Button type="submit" className="mt-4 w-full" isLoading={isSubmitting}>
        Set Password &amp; Sign In
      </Button>
    </form>
  );
}