"use client";

import { useTransition } from "react";
import { useRouter } from "next/navigation";
import { createInvoiceAction } from "@/lib/actions/admin";
import { formatEUR, formatDateDE } from "@/lib/orderConstants";

type InvoiceInfo = {
  id: string;
  number: string;
  issueDate: string;
  totalAmount: number;
} | null;

export function AdminInvoicePanel({
  orderId,
  priceAgreed,
  invoice,
}: {
  orderId: string;
  priceAgreed: boolean;
  invoice: InvoiceInfo;
}) {
  const [pending, startTransition] = useTransition();
  const router = useRouter();

  return (
    <div className="border border-white/10 rounded-xl p-5">
      <p className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)] mb-3">Rechnung</p>

      {invoice ? (
        <div className="flex flex-wrap items-center justify-between gap-3">
          <div className="text-sm">
            <span className="text-[var(--rk-ink)] font-mono">{invoice.number}</span>{" "}
            <span className="text-[var(--rk-ink-muted)]">
              · {formatDateDE(new Date(invoice.issueDate))} · {formatEUR(invoice.totalAmount)}
            </span>
          </div>
          <a
            href={`/api/invoices/${invoice.id}/pdf`}
            target="_blank"
            rel="noopener noreferrer"
            className="text-xs border border-white/30 rounded-lg px-3 py-1.5 hover:border-white transition-colors"
          >
            PDF öffnen
          </a>
        </div>
      ) : priceAgreed ? (
        <button
          disabled={pending}
          onClick={() =>
            startTransition(async () => {
              await createInvoiceAction(orderId);
              router.refresh();
            })
          }
          className="text-xs border border-white/30 rounded-lg px-4 py-2 hover:border-white transition-colors disabled:opacity-50"
        >
          Rechnung erstellen
        </button>
      ) : (
        <p className="text-xs text-[var(--rk-ink-muted)]">
          Erst möglich, sobald ein Preis final vereinbart wurde.
        </p>
      )}
    </div>
  );
}