"use client";

import { useActionState } from "react";
import { createDiscountCodeAction } from "@/lib/actions/discounts";

export function NewDiscountCodeForm({ conventions }: { conventions: { id: string; name: string }[] }) {
  const [state, formAction, pending] = useActionState(createDiscountCodeAction, {});

  return (
    <form action={formAction} className="bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-5 flex flex-col gap-3 mb-8">
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
        <input
          name="code"
          placeholder="Code, z. B. SOMMER10"
          required
          className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm uppercase focus:outline-none focus:border-white/50"
        />
        <select
          name="type"
          defaultValue="percent"
          className="bg-[var(--rk-bg)] border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
        >
          <option value="percent">Prozent %</option>
          <option value="fixed">Fester Betrag €</option>
        </select>
        <input
          name="value"
          type="number"
          min="0"
          step="0.01"
          placeholder="Wert"
          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">
        <div>
          <label className="text-xs text-[var(--rk-ink-muted)] mb-1 block">Max. Benutzungen (leer = unbegrenzt)</label>
          <input
            name="maxUses"
            type="number"
            min="1"
            step="1"
            placeholder="unbegrenzt"
            className="w-full bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
          />
        </div>
        <div>
          <label className="text-xs text-[var(--rk-ink-muted)] mb-1 block">Gültig bis (leer = unbegrenzt)</label>
          <input
            name="validUntil"
            type="date"
            className="w-full bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
          />
        </div>
      </div>
      <input
        name="note"
        placeholder="Notiz (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"
      />
      {conventions.length > 0 && (
        <label className="flex flex-col gap-1 text-xs text-[var(--rk-ink-muted)]">
          Nur für eine bestimmte Convention (optional)
          <select
            name="conventionId"
            defaultValue=""
            className="bg-[var(--rk-bg)] border border-white/15 rounded-lg px-3 py-2 text-sm text-[var(--rk-ink)] focus:outline-none focus:border-white/50"
          >
            <option value="">— keine Einschränkung —</option>
            {conventions.map((c) => (
              <option key={c.id} value={c.id}>
                {c.name}
              </option>
            ))}
          </select>
        </label>
      )}
      <label className="flex items-center gap-2 text-sm">
        <input type="checkbox" name="stammkundenOnly" className="h-3.5 w-3.5" />
        Nur für Stammkunden einlösbar
      </label>
      <label className="flex items-center gap-2 text-sm">
        <input type="checkbox" name="neukundenOnly" className="h-3.5 w-3.5" />
        Nur für Neukunden einlösbar (kein vorheriger Auftrag)
      </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"
      >
        Code anlegen
      </button>
      {state.error && <p className="text-sm text-red-400">{state.error}</p>}
    </form>
  );
}