myeasycms-v2/apps/web/app/[locale]/home/[account]/finance/invoices/invoice-action-buttons.tsx

'use client';

import { useTransition } from 'react';

import { useRouter } from 'next/navigation';

import { CheckCircle, Send } from 'lucide-react';

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@kit/ui/alert-dialog';
import { Button } from '@kit/ui/button';

interface SendInvoiceButtonProps {
  invoiceId: string;
  accountId: string;
}

export function SendInvoiceButton({
  invoiceId,
  accountId,
}: SendInvoiceButtonProps) {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();

  const handleSend = () => {
    startTransition(async () => {
      try {
        const response = await fetch(
          `/api/finance/invoices/${invoiceId}/send`,
          {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ accountId }),
          },
        );

        if (response.ok) {
          router.refresh();
        }
      } catch (error) {
        console.error('Failed to send invoice:', error);
      }
    });
  };

  return (
    <AlertDialog>
      <AlertDialogTrigger
        render={
          <Button disabled={isPending}>
            <Send className="mr-2 h-4 w-4" aria-hidden="true" />
            Senden
          </Button>
        }
      />
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Rechnung senden?</AlertDialogTitle>
          <AlertDialogDescription>
            Diese Aktion kann nicht rückgängig gemacht werden. Die Rechnung wird
            an den Empfänger gesendet und der Status auf „Versendet" gesetzt.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Abbrechen</AlertDialogCancel>
          <AlertDialogAction onClick={handleSend}>
            {isPending ? 'Wird gesendet...' : 'Senden'}
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

interface MarkPaidButtonProps {
  invoiceId: string;
  accountId: string;
}

export function MarkPaidButton({ invoiceId, accountId }: MarkPaidButtonProps) {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();

  const handleMarkPaid = () => {
    startTransition(async () => {
      try {
        const response = await fetch(
          `/api/finance/invoices/${invoiceId}/mark-paid`,
          {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ accountId }),
          },
        );

        if (response.ok) {
          router.refresh();
        }
      } catch (error) {
        console.error('Failed to mark invoice as paid:', error);
      }
    });
  };

  return (
    <AlertDialog>
      <AlertDialogTrigger
        render={
          <Button variant="outline" disabled={isPending}>
            <CheckCircle className="mr-2 h-4 w-4" aria-hidden="true" />
            Bezahlt markieren
          </Button>
        }
      />
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Als bezahlt markieren?</AlertDialogTitle>
          <AlertDialogDescription>
            Der Status der Rechnung wird auf „Bezahlt" gesetzt. Diese Aktion
            bestätigt den Zahlungseingang.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Abbrechen</AlertDialogCancel>
          <AlertDialogAction onClick={handleMarkPaid}>
            {isPending ? 'Wird gespeichert...' : 'Bestätigen'}
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}