"use client";

import { useActionState } from "react";
import { updateLoyaltySettingsAction } from "@/lib/actions/admin";
import type { SettingsDoc } from "@/models/Settings";

export function LoyaltySettingsPanel({ loyaltySettings }: { loyaltySettings: SettingsDoc["loyaltySettings"] }) {
  const [state, formAction, pending] = useActionState(updateLoyaltySettingsAction, {});

  return (
    <form
      action={formAction}
      className="bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-6 flex flex-col gap-4 max-w-2xl mb-8"
    >
      <p className="text-sm font-medium">Stammkunden-Prämie</p>
      <p className="text-xs text-[var(--rk-ink-muted)]">
        Sobald ein Kunde einen Auftrag bezahlt hat, wird gezählt, der wievielte bezahlte Auftrag das insgesamt war —
        bei jedem vielfachen der unten eingestellten Zahl (z.&nbsp;B. jedem 3., 6., 9., …) gibt es automatisch einen
        neuen, einmaligen Rabattcode als Dankeschön, per E-Mail und Glocken-Benachrichtigung.
      </p>

      <label className="flex items-center gap-2 text-sm">
        <input type="checkbox" name="enabled" defaultChecked={loyaltySettings?.enabled ?? true} className="h-4 w-4" />
        Stammkunden-Prämie aktivieren
      </label>

      <div className="flex flex-wrap gap-3">
        <label className="flex flex-col gap-1.5 text-xs">
          <span className="text-[var(--rk-ink-muted)]">Alle wie viele bezahlten Aufträge</span>
          <input
            name="ordersThreshold"
            type="number"
            min="1"
            step="1"
            defaultValue={loyaltySettings?.ordersThreshold ?? 3}
            className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50 w-28"
          />
        </label>
        <label className="flex flex-col gap-1.5 text-xs">
          <span className="text-[var(--rk-ink-muted)]">Art</span>
          <select
            name="rewardType"
            defaultValue={loyaltySettings?.rewardType ?? "percent"}
            className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
          >
            <option value="fixed" className="bg-[var(--rk-bg)]">Fester Betrag (€)</option>
            <option value="percent" className="bg-[var(--rk-bg)]">Prozent (%)</option>
          </select>
        </label>
        <label className="flex flex-col gap-1.5 text-xs">
          <span className="text-[var(--rk-ink-muted)]">Wert</span>
          <input
            name="rewardValue"
            type="number"
            min="0"
            step="0.5"
            defaultValue={loyaltySettings?.rewardValue ?? 10}
            className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50 w-28"
          />
        </label>
      </div>

      <button
        type="submit"
        disabled={pending}
        className="self-start border border-white/30 rounded-lg px-4 py-2 text-xs uppercase tracking-[0.15em] hover:border-white disabled:opacity-50"
      >
        Speichern
      </button>
      {state.error && <p className="text-sm text-red-400">{state.error}</p>}
      {state.success && <p className="text-sm text-emerald-400">Gespeichert.</p>}
    </form>
  );
}