"use client";

import { useActionState } from "react";
import { adminIssueVoucherAction } from "@/lib/actions/vouchers";

export function NewVoucherForm() {
  const [state, formAction, pending] = useActionState(adminIssueVoucherAction, {});

  return (
    <form action={formAction} className="bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-5 flex flex-col gap-3 mb-8">
      <p className="text-sm font-medium">Gutschein manuell ausstellen</p>
      <p className="text-xs text-[var(--rk-ink-muted)]">
        Für bar/persönlich bezahlte Gutscheine oder Geschenke — wird sofort als bezahlt angelegt und bekommt direkt einen Code.
      </p>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <input
          name="purchaserName"
          placeholder="Name der Käuferin/des Käufers"
          required
          className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
        />
        <input
          name="purchaserEmail"
          type="email"
          placeholder="E-Mail"
          required
          className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
        />
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <input
          name="amount"
          type="number"
          min="1"
          step="0.01"
          placeholder="Betrag in €"
          required
          className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
        />
        <input
          name="recipientName"
          placeholder="Für wen (optional)"
          className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
        />
      </div>
      <input
        name="message"
        placeholder="Nachricht (optional, nur intern sichtbar)"
        className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
      />
      <label className="flex items-center gap-2 text-sm">
        <input type="checkbox" name="sendEmail" defaultChecked className="h-3.5 w-3.5" />
        Code direkt per E-Mail verschicken
      </label>
      <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"
      >
        Gutschein ausstellen
      </button>
      {state.error && <p className="text-sm text-red-400">{state.error}</p>}
      {state.success && <p className="text-sm text-emerald-400">Gutschein ausgestellt.</p>}
    </form>
  );
}