pn-new-crm/src/components/clients/hard-delete-dialog.tsx

'use client';

import { useEffect, useState } from 'react';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { AlertTriangle, Loader2, Mail } from 'lucide-react';
import { toast } from 'sonner';

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

interface Props {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  clientId: string;
  clientName: string;
  /** Called after successful delete, e.g. to navigate away. */
  onDeleted?: () => void;
}

type Stage = 'intent' | 'confirm';

export function HardDeleteDialog({ open, onOpenChange, clientId, clientName, onDeleted }: Props) {
  const qc = useQueryClient();
  const [stage, setStage] = useState<Stage>('intent');
  const [code, setCode] = useState('');
  const [typedName, setTypedName] = useState('');
  const [maskedEmail, setMaskedEmail] = useState<string | null>(null);

  useEffect(() => {
    if (open) {
      setStage('intent');
      setCode('');
      setTypedName('');
      setMaskedEmail(null);
    }
  }, [open]);

  const requestCode = useMutation({
    mutationFn: () =>
      apiFetch<{ data: { sentToMaskedEmail: string } }>(
        `/api/v1/clients/${clientId}/hard-delete-request`,
        { method: 'POST' },
      ),
    onSuccess: (res) => {
      setMaskedEmail(res.data.sentToMaskedEmail);
      setStage('confirm');
      toast.success(`Code sent to ${res.data.sentToMaskedEmail}`);
    },
    onError: (err: unknown) => {
      toast.error(err instanceof Error ? err.message : 'Failed to send code');
    },
  });

  const hardDelete = useMutation({
    mutationFn: () =>
      apiFetch<{ data: { deletedClientId: string } }>(`/api/v1/clients/${clientId}/hard-delete`, {
        method: 'POST',
        body: { code, typedName },
      }),
    onSuccess: () => {
      toast.success(`${clientName} permanently deleted.`);
      qc.invalidateQueries({ queryKey: ['clients'] });
      onOpenChange(false);
      onDeleted?.();
    },
    onError: (err: unknown) => {
      toast.error(err instanceof Error ? err.message : 'Delete failed');
    },
  });

  const nameMatches = typedName.trim().toLowerCase() === clientName.trim().toLowerCase();
  const codeValid = /^\d{4}$/.test(code.trim());

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2 text-destructive">
            <AlertTriangle className="h-5 w-5" />
            Permanently delete {clientName}
          </DialogTitle>
          <DialogDescription>
            This permanently removes the client record and detaches all related history (signed
            documents, emails, files). It cannot be undone.
          </DialogDescription>
        </DialogHeader>

        {stage === 'intent' ? (
          <div className="space-y-3 text-sm">
            <p className="text-muted-foreground">
              Permanent deletion is reserved for archived clients only. We&rsquo;ll email a 4-digit
              confirmation code to your account address. The code expires in 10 minutes.
            </p>
            <div className="rounded-md border border-amber-300 bg-amber-50 p-3 text-amber-900">
              <p className="font-medium flex items-center gap-2">
                <AlertTriangle className="h-4 w-4" /> What gets deleted
              </p>
              <ul className="mt-1.5 list-disc pl-5 text-xs space-y-0.5">
                <li>Client record + addresses, contacts, notes, tags</li>
                <li>Portal user account + GDPR consent records</li>
                <li>All pipeline interests + reservations for this client</li>
              </ul>
              <p className="font-medium mt-2 flex items-center gap-2">What is preserved</p>
              <ul className="mt-1.5 list-disc pl-5 text-xs space-y-0.5">
                <li>Signed documents (detached from client, kept for legal history)</li>
                <li>Email threads, files, reminders (detached)</li>
                <li>Audit log entries</li>
              </ul>
            </div>
          </div>
        ) : (
          <div className="space-y-3">
            <div className="flex items-start gap-2 rounded-md border border-blue-300 bg-blue-50 p-3 text-xs text-blue-900">
              <Mail className="h-4 w-4 shrink-0 mt-0.5" />
              <div className="flex-1">
                <div>
                  Code sent to <span className="font-mono">{maskedEmail}</span>. It expires in 10
                  minutes.
                </div>
                <button
                  type="button"
                  onClick={() => {
                    setCode('');
                    requestCode.mutate();
                  }}
                  disabled={requestCode.isPending}
                  className="mt-1 text-blue-700 underline-offset-2 hover:underline disabled:opacity-60"
                >
                  {requestCode.isPending ? 'Sending…' : 'Send a new code'}
                </button>
              </div>
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="hd-code">4-digit code from email</Label>
              <Input
                id="hd-code"
                inputMode="numeric"
                maxLength={4}
                value={code}
                onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))}
                placeholder="0000"
                className="font-mono tracking-[0.4em] text-center text-lg"
                autoComplete="off"
              />
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="hd-name">
                Type <span className="font-semibold">{clientName}</span> to confirm
              </Label>
              <Input
                id="hd-name"
                value={typedName}
                onChange={(e) => setTypedName(e.target.value)}
                placeholder={clientName}
                autoComplete="off"
              />
            </div>
          </div>
        )}

        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            Cancel
          </Button>
          {stage === 'intent' ? (
            <Button
              variant="destructive"
              onClick={() => requestCode.mutate()}
              disabled={requestCode.isPending}
            >
              {requestCode.isPending ? (
                <>
                  <Loader2 className="h-4 w-4 animate-spin mr-1.5" /> Sending…
                </>
              ) : (
                'Send confirmation code'
              )}
            </Button>
          ) : (
            <Button
              variant="destructive"
              onClick={() => hardDelete.mutate()}
              disabled={!codeValid || !nameMatches || hardDelete.isPending}
            >
              {hardDelete.isPending ? (
                <>
                  <Loader2 className="h-4 w-4 animate-spin mr-1.5" /> Deleting…
                </>
              ) : (
                'Permanently delete'
              )}
            </Button>
          )}
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}