"use client";

import { useTransition } from "react";
import { useRouter } from "next/navigation";
import { setPaymentEnabledAction } from "@/lib/actions/payments";

export function PaymentSettingsPanel({ enabled, configured }: { enabled: boolean; configured: 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">Direktes Bezahlen über die Seite (Stripe)</p>
      <p className="text-xs text-[var(--rk-ink-muted)]">
        Kunden können dann direkt über die Auftragsseite mit Karte, PayPal oder Klarna bezahlen, statt manuell zu
        überweisen. Welche Methoden konkret angezeigt werden, stellst du in deinem Stripe-Dashboard ein.
      </p>

      {!configured && (
        <p className="text-xs text-amber-400">
          Noch nicht eingerichtet — dafür müssen erst STRIPE_SECRET_KEY und STRIPE_WEBHOOK_SECRET auf dem Server
          hinterlegt sein. Solange das fehlt, bleibt diese Funktion aus, egal was hier eingestellt ist.
        </p>
      )}

      <label className="flex items-center gap-2 text-sm">
        <input
          type="checkbox"
          checked={enabled}
          disabled={pending || !configured}
          onChange={(e) =>
            startTransition(async () => {
              await setPaymentEnabledAction(e.target.checked);
              router.refresh();
            })
          }
          className="h-4 w-4"
        />
        Direktes Bezahlen aktivieren
      </label>
    </div>
  );
}