pn-new-crm/src/components/interests/supplemental-info-request-button.tsx

'use client';

import { useState } from 'react';
import { useMutation } from '@tanstack/react-query';
import { ClipboardCopy, Mail } from 'lucide-react';
import { toast } from 'sonner';

import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { apiFetch } from '@/lib/api/client';

interface Props {
  interestId: string;
  /** Hide the button when EOI has already been sent / signed — at that
   *  point the supplemental step is past its window. Caller passes the
   *  current eoiStatus so we can render contextually. */
  eoiStatus?: string | null;
}

interface IssueResponse {
  data: {
    link: string;
    expiresAt: string;
    emailSent: boolean;
  };
}

/**
 * One-click "Request more info" action. Fires the supplemental-info-
 * request endpoint, which emails the client a public form pre-filled
 * with what's on file. On success we display the generated link + a
 * copy-to-clipboard button in case the rep needs to share it through
 * another channel.
 *
 * Hidden once the EOI is `signed` — the supplemental step only makes
 * sense before the signed EOI freezes the data into the contract path.
 */
export function SupplementalInfoRequestButton({ interestId, eoiStatus }: Props) {
  const [link, setLink] = useState<string | null>(null);

  const mutation = useMutation({
    mutationFn: () =>
      apiFetch<IssueResponse>(`/api/v1/interests/${interestId}/supplemental-info-request`, {
        method: 'POST',
      }),
    onSuccess: (res) => {
      setLink(res.data.link);
      if (res.data.emailSent) {
        toast.success('Email sent — link also shown below for sharing manually.');
      } else {
        toast.message('Link generated — no client email on file, share manually.');
      }
    },
    onError: (err) =>
      toast.error(err instanceof Error ? err.message : 'Failed to generate the form link.'),
  });

  if (eoiStatus === 'signed') return null;

  return (
    <Card>
      <CardContent className="space-y-3 p-4">
        <div className="space-y-1">
          <h3 className="text-sm font-semibold">Need more info before drafting the EOI?</h3>
          <p className="text-xs text-muted-foreground">
            Email the client a one-time link to a public form pre-filled with what we have on file.
            Submissions auto-update this client + interest record.
          </p>
        </div>
        <div className="flex flex-wrap items-center gap-2">
          <Button
            type="button"
            size="sm"
            onClick={() => mutation.mutate()}
            disabled={mutation.isPending}
          >
            <Mail className="mr-1.5 size-3.5" aria-hidden />
            {mutation.isPending ? 'Generating…' : link ? 'Resend' : 'Request more info'}
          </Button>
          {link ? (
            <>
              <Input value={link} readOnly className="h-8 text-xs font-mono flex-1 min-w-[260px]" />
              <Button
                type="button"
                size="sm"
                variant="outline"
                onClick={() => {
                  void navigator.clipboard.writeText(link);
                  toast.success('Link copied');
                }}
              >
                <ClipboardCopy className="mr-1.5 size-3.5" aria-hidden />
                Copy
              </Button>
            </>
          ) : null}
        </div>
      </CardContent>
    </Card>
  );
}