pn-new-crm/src/components/clients/portal-invite-button.tsx

'use client';

import { useState } from 'react';
import { UserPlus, Loader2, Check } from 'lucide-react';

import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { apiFetch } from '@/lib/api/client';

interface PortalInviteButtonProps {
  clientId: string;
  clientName: string;
  defaultEmail?: string;
}

/**
 * Admin button on the client detail header that creates a portal user for
 * the client and sends them an activation email. Uses the client's primary
 * email as the default but lets the admin override.
 */
export function PortalInviteButton({
  clientId,
  clientName,
  defaultEmail,
}: PortalInviteButtonProps) {
  const [open, setOpen] = useState(false);
  const [email, setEmail] = useState(defaultEmail ?? '');
  const [name, setName] = useState(clientName);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState(false);

  function reset() {
    setEmail(defaultEmail ?? '');
    setName(clientName);
    setError('');
    setSuccess(false);
    setLoading(false);
  }

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setLoading(true);
    setError('');
    try {
      await apiFetch(`/api/v1/clients/${clientId}/portal-user`, {
        method: 'POST',
        body: { email, name },
      });
      setSuccess(true);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to send invitation');
    } finally {
      setLoading(false);
    }
  }

  return (
    <>
      <Button
        variant="outline"
        size="sm"
        onClick={() => {
          reset();
          setOpen(true);
        }}
      >
        <UserPlus className="mr-1.5 h-3.5 w-3.5" />
        Invite to portal
      </Button>

      <Dialog
        open={open}
        onOpenChange={(o) => {
          if (!o) reset();
          setOpen(o);
        }}
      >
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Invite to client portal</DialogTitle>
            <DialogDescription>
              We&apos;ll email an activation link. The client picks their own password from there.
            </DialogDescription>
          </DialogHeader>

          {success ? (
            <div className="py-4 flex items-center gap-3 text-sm text-green-700">
              <Check className="h-5 w-5" />
              Activation email sent to <strong>{email}</strong>.
            </div>
          ) : (
            <form onSubmit={submit} className="space-y-4 py-2">
              <div className="space-y-1.5">
                <Label htmlFor="invite-email">Email address</Label>
                <Input
                  id="invite-email"
                  type="email"
                  required
                  autoFocus
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  disabled={loading}
                  placeholder="client@example.com"
                />
              </div>
              <div className="space-y-1.5">
                <Label htmlFor="invite-name">Display name (optional)</Label>
                <Input
                  id="invite-name"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  disabled={loading}
                />
              </div>
              {error && <p className="text-sm text-destructive">{error}</p>}
            </form>
          )}

          <DialogFooter>
            {success ? (
              <Button onClick={() => setOpen(false)}>Done</Button>
            ) : (
              <>
                <Button type="button" variant="outline" onClick={() => setOpen(false)}>
                  Cancel
                </Button>
                <Button onClick={submit} disabled={loading || !email}>
                  {loading ? (
                    <>
                      <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                      Sending…
                    </>
                  ) : (
                    'Send invitation'
                  )}
                </Button>
              </>
            )}
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
}