'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: (vars: { sendEmail: boolean }) =>
      apiFetch<IssueResponse>(`/api/v1/interests/${interestId}/supplemental-info-request`, {
        method: 'POST',
        body: vars,
      }),
    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. Click "Send by email" to mail it, or copy it to share manually.',
        );
      }
    },
    onError: (err) =>
      toast.error(err instanceof Error ? err.message : 'Failed to generate the form link.'),
  });

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

  return (
    <Card>
      {/* shadcn's default CardContent ships with `pt-0 sm:pt-0` because it
          assumes a CardHeader sits above. This card is intentionally
          header-less, so we restore symmetric padding (`pt-` matches `p-`)
          at both base and `sm:` breakpoints. */}
      <CardContent className="space-y-3 p-4 pt-4 sm:p-6 sm:pt-6">
        <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"
            variant={link ? 'outline' : 'default'}
            onClick={() => mutation.mutate({ sendEmail: false })}
            disabled={mutation.isPending}
          >
            {mutation.isPending ? 'Generating…' : link ? 'Regenerate link' : 'Generate link'}
          </Button>
          <Button
            type="button"
            size="sm"
            onClick={() => mutation.mutate({ sendEmail: true })}
            disabled={mutation.isPending}
          >
            <Mail className="mr-1.5 size-3.5" aria-hidden />
            {link ? 'Send by email' : 'Generate + email'}
          </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>
  );
}