"use client";

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

const PRESET_AMOUNTS = [50, 100, 150, 250];

export function VoucherRequestForm({
  locale,
  labels,
}: {
  locale: "de" | "en";
  labels: {
    amountLabel: string;
    customAmountPlaceholder: string;
    nameLabel: string;
    emailLabel: string;
    recipientLabel: string;
    messageLabel: string;
    submit: string;
    manualSuccess: string;
  };
}) {
  const [state, formAction, pending] = useActionState(requestVoucherAction, {});
  const [amount, setAmount] = useState<number>(100);
  const [customAmount, setCustomAmount] = useState("");

  if (state.success && state.manual) {
    return (
      <div className="rounded-2xl border border-[var(--rk-accent)]/30 bg-[var(--rk-accent)]/[0.06] p-6 text-center">
        <p className="text-sm">{labels.manualSuccess}</p>
      </div>
    );
  }

  return (
    <form action={formAction} className="flex flex-col gap-4">
      <input type="hidden" name="locale" value={locale} />
      <div>
        <span className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)] mb-2 block">{labels.amountLabel}</span>
        <div className="flex flex-wrap gap-2">
          {PRESET_AMOUNTS.map((preset) => (
            <button
              key={preset}
              type="button"
              onClick={() => {
                setAmount(preset);
                setCustomAmount("");
              }}
              className={`text-sm px-4 py-2 rounded-lg border transition-colors ${
                amount === preset && !customAmount
                  ? "border-white text-[var(--rk-ink)]"
                  : "border-white/15 text-[var(--rk-ink-muted)] hover:border-white/40"
              }`}
            >
              {preset} €
            </button>
          ))}
          <input
            type="number"
            min="20"
            max="1000"
            step="1"
            placeholder={labels.customAmountPlaceholder}
            value={customAmount}
            onChange={(e) => {
              setCustomAmount(e.target.value);
              if (e.target.value) setAmount(Number(e.target.value));
            }}
            className="w-36 bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
          />
        </div>
      </div>
      <input type="hidden" name="amount" value={amount} />

      <label className="flex flex-col gap-1.5 text-sm">
        <span className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">{labels.nameLabel}</span>
        <input
          name="purchaserName"
          required
          className="bg-transparent border border-white/15 rounded-lg px-3.5 py-2.5 focus:outline-none focus:border-white/50"
        />
      </label>
      <label className="flex flex-col gap-1.5 text-sm">
        <span className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">{labels.emailLabel}</span>
        <input
          name="purchaserEmail"
          type="email"
          required
          className="bg-transparent border border-white/15 rounded-lg px-3.5 py-2.5 focus:outline-none focus:border-white/50"
        />
      </label>
      <label className="flex flex-col gap-1.5 text-sm">
        <span className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">{labels.recipientLabel}</span>
        <input
          name="recipientName"
          className="bg-transparent border border-white/15 rounded-lg px-3.5 py-2.5 focus:outline-none focus:border-white/50"
        />
      </label>
      <label className="flex flex-col gap-1.5 text-sm">
        <span className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">{labels.messageLabel}</span>
        <textarea
          name="message"
          rows={3}
          className="bg-transparent border border-white/15 rounded-lg px-3.5 py-2.5 focus:outline-none focus:border-white/50 resize-y"
        />
      </label>

      {state.error && <p className="text-sm text-red-400">{state.error}</p>}
      <button
        type="submit"
        disabled={pending}
        className="mt-2 rounded-lg bg-[var(--rk-accent)] px-6 py-3 text-xs font-semibold uppercase tracking-[0.2em] text-[#141413] transition-opacity hover:opacity-90 disabled:opacity-50"
      >
        {pending ? "…" : labels.submit}
      </button>
    </form>
  );
}