"use client";

import { useActionState } from "react";
import type { BadgeTrack } from "@prisma/client";
import { createBadgeThreshold } from "@/lib/actions/admin";

export function NewBadgeForm({ track }: { track: BadgeTrack }) {
  const [state, formAction, isPending] = useActionState(
    createBadgeThreshold,
    undefined,
  );

  return (
    <form action={formAction} className="flex flex-wrap items-center gap-2">
      <input type="hidden" name="track" value={track} />
      <input
        type="number"
        name="threshold"
        min={1}
        placeholder="Threshold"
        required
        className="w-24 rounded border border-charcoal/20 bg-warm-white px-2 py-1.5 text-sm text-charcoal"
      />
      <input
        type="text"
        name="name"
        placeholder="Badge name"
        required
        className="flex-1 rounded border border-charcoal/20 bg-warm-white px-3 py-1.5 text-sm text-charcoal"
      />
      <button
        type="submit"
        disabled={isPending}
        className="rounded-full border border-terracotta px-4 py-1.5 text-sm font-medium text-terracotta hover:bg-terracotta/10 disabled:opacity-60"
      >
        {isPending ? "Adding..." : "Add tier"}
      </button>
      {state?.error && <p className="w-full text-xs text-terracotta">{state.error}</p>}
    </form>
  );
}