"use client";

import { useTransition } from "react";
import Icon from "@/components/Icon";
import { useDialog } from "@/components/feedback/DialogProvider";
import { updateInvoiceStatus, deleteInvoice } from "./actions";

export default function MarkPaidButton({
  invoiceId,
  dossierId,
  status = "envoyee",
}: {
  invoiceId: string;
  dossierId: string;
  status?: string;
}) {
  const [isPaying, startPaying] = useTransition();
  const [isDeleting, startDeleting] = useTransition();
  const { confirm, toast } = useDialog();

  function onMarkPaid() {
    startPaying(async () => {
      await updateInvoiceStatus({ invoiceId, dossierId, status: "payee" });
      toast({ message: "Facture marquée payée.", variant: "success" });
    });
  }

  async function onDelete() {
    const ok = await confirm({
      title: "Supprimer cette facture ?",
      body: "Cette action est irréversible. Les obligations comptables imposent normalement de conserver les factures émises 10 ans.",
      confirmLabel: "Supprimer",
      danger: true,
    });
    if (!ok) return;
    startDeleting(async () => {
      await deleteInvoice({ invoiceId, dossierId });
    });
  }

  return (
    <div className="inline-flex items-center gap-2 flex-wrap justify-end">
      <a
        href={`/api/admin/invoices/${invoiceId}/print`}
        target="_blank"
        rel="noopener noreferrer"
        className="inline-flex items-center gap-1 text-xs uppercase tracking-widest font-serif text-on-surface-variant hover:text-primary transition-colors px-3 py-2 border border-outline-variant"
      >
        <Icon name="print" className="!text-base" />
        PDF
      </a>

      {status !== "payee" && (
        <button
          type="button"
          onClick={onMarkPaid}
          disabled={isPaying}
          className="inline-flex items-center gap-1 text-xs uppercase tracking-widest font-serif text-secondary hover:text-primary transition-colors px-3 py-2 border border-secondary disabled:opacity-30 disabled:cursor-not-allowed"
        >
          <Icon name="paid" className="!text-base" />
          {isPaying ? "…" : "Marquer payée"}
        </button>
      )}

      <button
        type="button"
        onClick={onDelete}
        disabled={isDeleting}
        aria-label="Supprimer la facture"
        className="text-on-surface-variant hover:text-error transition-colors p-2 disabled:opacity-30 disabled:cursor-not-allowed"
      >
        <Icon name="delete" className="!text-base" />
      </button>
    </div>
  );
}