"use client";

import { useActionState, useState } from "react";
import { adminBulkIssueVouchersAction } from "@/lib/actions/vouchers";

export function BulkVoucherForm() {
  const [state, formAction, pending] = useActionState(adminBulkIssueVouchersAction, {});
  const [copied, setCopied] = useState(false);

  return (
    <details className="bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-5 mb-8">
      <summary className="text-sm font-medium cursor-pointer">Mehrere Gutscheine auf einmal (z. B. Verlosung) ▾</summary>
      <div className="mt-4 flex flex-col gap-3">
        <p className="text-xs text-[var(--rk-ink-muted)]">
          Erstellt mehrere Gutscheine mit gleichem Betrag, ohne einzelne Käufer-Angaben — z. B. für eine Verlosung auf einer
          Convention. Alle direkt als bezahlt angelegt, kein Mailversand.
        </p>
        <form action={formAction} className="flex flex-col gap-3">
          <input
            name="label"
            placeholder="Bezeichnung, z. B. Convention-Verlosung 2026"
            required
            className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
          />
          <div className="grid grid-cols-2 gap-3">
            <label className="flex flex-col gap-1 text-sm">
              <span className="text-xs uppercase tracking-[0.08em] text-[var(--rk-ink-muted)]">Anzahl</span>
              <input
                name="count"
                type="number"
                min="1"
                max="200"
                defaultValue="10"
                required
                className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
              />
            </label>
            <label className="flex flex-col gap-1 text-sm">
              <span className="text-xs uppercase tracking-[0.08em] text-[var(--rk-ink-muted)]">Betrag je Gutschein in €</span>
              <input
                name="amount"
                type="number"
                min="1"
                step="0.01"
                required
                className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
              />
            </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"
          >
            Gutscheine erstellen
          </button>
          {state.error && <p className="text-sm text-red-400">{state.error}</p>}
        </form>

        {state.codes && state.codes.length > 0 && (
          <div className="border-t border-white/10 pt-3">
            <div className="flex items-center justify-between mb-2">
              <p className="text-xs uppercase tracking-[0.08em] text-emerald-400">{state.codes.length} Codes erstellt</p>
              <button
                type="button"
                onClick={async () => {
                  await navigator.clipboard.writeText(state.codes!.join("\n"));
                  setCopied(true);
                  setTimeout(() => setCopied(false), 1500);
                }}
                className="text-xs border border-white/15 rounded-full px-2.5 py-1 hover:border-white/50 transition-colors"
              >
                {copied ? "Kopiert!" : "Alle kopieren"}
              </button>
            </div>
            <div className="grid grid-cols-2 sm:grid-cols-3 gap-1.5 font-mono text-xs">
              {state.codes.map((code) => (
                <span key={code} className="border border-white/10 rounded px-2 py-1 text-[var(--rk-ink-muted)]">
                  {code}
                </span>
              ))}
            </div>
          </div>
        )}
      </div>
    </details>
  );
}