"use client";

import { useActionState } from "react";
import { createPositionAction } from "@/lib/actions/team";

export function NewPositionForm({ departments }: { departments: { id: string; name: string }[] }) {
  const [state, formAction, pending] = useActionState(createPositionAction, {});

  if (departments.length === 0) {
    return <p className="text-xs text-[var(--rk-ink-muted)] mb-4">Erst eine Abteilung anlegen, um Positionen zu ergänzen.</p>;
  }

  return (
    <form action={formAction} className="flex gap-2 items-start flex-wrap mb-4">
      <select
        name="departmentId"
        required
        className="bg-[var(--rk-bg)] border border-white/15 rounded-lg px-2.5 py-2 text-sm focus:outline-none focus:border-white/50"
      >
        {departments.map((d) => (
          <option key={d.id} value={d.id}>
            {d.name}
          </option>
        ))}
      </select>
      <input
        name="name"
        placeholder="z. B. Fotografin"
        required
        className="flex-1 min-w-[10rem] bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
      />
      <input
        name="defaultHourlyWage"
        type="number"
        step="0.01"
        min="0"
        placeholder="Standard €/Std. (optional)"
        className="w-40 bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
      />
      <button
        type="submit"
        disabled={pending}
        className="border border-white/30 rounded-lg px-4 py-2 text-xs uppercase tracking-[0.15em] hover:border-white disabled:opacity-50"
      >
        Hinzufügen
      </button>
      {state.error && <p className="w-full text-sm text-red-400">{state.error}</p>}
    </form>
  );
}