"use client";

import { useState, useTransition } from "react";
import { Button } from "@/components/ui/button";
import { acceptInvitationAction } from "@/features/auth/actions/accept-invitation";

export function AcceptInvitationForm({ token, businessName }: { token: string; businessName: string }) {
  const [error, setError] = useState<string | null>(null);
  const [isPending, startTransition] = useTransition();

  const onAccept = () => {
    setError(null);
    startTransition(async () => {
      const result = await acceptInvitationAction(token);
      if (!result.success) {
        setError(result.error ?? "Something went wrong. Please try again.");
      }
      // On success, acceptInvitationAction signs the user in and redirects
      // server-side — nothing else to do here.
    });
  };

  return (
    <div 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>. This link
        confirms it&apos;s really you — no password needed.
      </p>
      {error && (
        <p role="alert" className="text-danger text-sm font-medium">
          {error}
        </p>
      )}
      <Button type="button" className="mt-4 w-full" isLoading={isPending} onClick={onAccept}>
        Accept &amp; Sign In
      </Button>
    </div>
  );
}