"use client";

import { useTransition } from "react";
import { useRouter } from "next/navigation";
import { setVoucherPurchasesEnabledAction } from "@/lib/actions/vouchers";

export function VoucherPurchaseSettingsPanel({ enabled }: { enabled: boolean }) {
  const [pending, startTransition] = useTransition();
  const router = useRouter();

  return (
    <div className="bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-6 flex flex-col gap-3 max-w-2xl mb-8">
      <p className="text-sm font-medium">Gutschein-Käufe auf der Website</p>
      <p className="text-xs text-[var(--rk-ink-muted)]">
        Steuert, ob Besucher:innen auf <code>/gutscheine</code> einen neuen Geschenkgutschein anfragen können.
        Bereits ausgestellte Gutscheine sind davon nicht betroffen — die bleiben immer einlösbar.
      </p>

      <label className="flex items-center gap-2 text-sm">
        <input
          type="checkbox"
          checked={enabled}
          disabled={pending}
          onChange={(e) =>
            startTransition(async () => {
              await setVoucherPurchasesEnabledAction(e.target.checked);
              router.refresh();
            })
          }
          className="h-4 w-4"
        />
        Neue Gutschein-Käufe zulassen
      </label>
    </div>
  );
}