"use client";

import { useTransition } from "react";
import { useRouter } from "next/navigation";
import { setManualDiscountAction, removeManualDiscountAction } from "@/lib/actions/discounts";
import { getPayableAmount } from "@/lib/discounts";

const fmt = (n: number) => new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(n);

export function AdminManualDiscountPanel({
  orderId,
  manualDiscountAmount,
  manualDiscountNote,
  discountAmount = 0,
  latestAmount,
  showPayable,
}: {
  orderId: string;
  manualDiscountAmount: number;
  manualDiscountNote: string;
  discountAmount?: number;
  latestAmount: number;
  showPayable: boolean;
}) {
  const [pending, startTransition] = useTransition();
  const router = useRouter();

  if (manualDiscountAmount > 0) {
    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-2">Manueller Rabatt</p>
        <div className="flex items-center justify-between gap-3 flex-wrap">
          <p className="text-sm text-emerald-400">
            −{fmt(manualDiscountAmount)}
            {manualDiscountNote && <span className="text-[var(--rk-ink-muted)]"> · {manualDiscountNote}</span>}
            {showPayable && (
              <span className="text-[var(--rk-ink)]">
                {" "}
                · zu zahlen: {fmt(getPayableAmount(latestAmount, discountAmount + manualDiscountAmount))}
              </span>
            )}
          </p>
          <button
            disabled={pending}
            onClick={() => {
              if (confirm("Diesen manuellen Rabatt entfernen?")) {
                startTransition(async () => {
                  const result = await removeManualDiscountAction(orderId);
                  if (result?.error) alert(result.error);
                  router.refresh();
                });
              }
            }}
            className="text-xs text-red-400/80 hover:text-red-400 transition-colors disabled:opacity-50"
          >
            Entfernen
          </button>
        </div>
      </div>
    );
  }

  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">Manueller Rabatt (Kulanz)</p>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          const data = new FormData(e.currentTarget);
          startTransition(async () => {
            const result = await setManualDiscountAction(orderId, data);
            if (result?.error) alert(result.error);
            router.refresh();
          });
        }}
        className="flex flex-wrap gap-2 items-center"
      >
        <input
          name="amount"
          type="number"
          min="0.01"
          step="0.01"
          placeholder="Betrag in €"
          required
          disabled={pending}
          className="w-32 bg-transparent border border-white/15 rounded-lg px-2.5 py-1.5 text-sm focus:outline-none focus:border-white/50 disabled:opacity-50"
        />
        <input
          name="note"
          type="text"
          placeholder="Grund (optional)"
          disabled={pending}
          className="flex-1 min-w-[10rem] bg-transparent border border-white/15 rounded-lg px-2.5 py-1.5 text-sm focus:outline-none focus:border-white/50 disabled:opacity-50"
        />
        <button
          type="submit"
          disabled={pending}
          className="text-xs border border-white/30 rounded-lg px-3 py-1.5 hover:border-white disabled:opacity-50"
        >
          Gewähren
        </button>
      </form>
    </div>
  );
}