"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";

// Inline-Editor für Standard-Stundenlöhne (Department/Position, 24.09.2026) —
// eigene, schlanke Komponente statt RenameField.tsx wiederzuverwenden: die
// ist fest an ein Textfeld namens "name" gebunden, hier braucht es ein
// Zahlenfeld mit anderem Feldnamen. Leeres Feld speichert explizit "kein
// Standard" (null), nicht "nichts ändern".
export function HourlyWageField({
  id,
  value,
  fieldName,
  action,
}: {
  id: string;
  value: number | null;
  fieldName: string;
  action: (id: string, formData: FormData) => Promise<void>;
}) {
  const [editing, setEditing] = useState(false);
  const [pending, startTransition] = useTransition();
  const router = useRouter();

  if (!editing) {
    return (
      <button
        type="button"
        onClick={() => setEditing(true)}
        title="Standard-Stundenlohn ändern"
        className="text-xs text-[var(--rk-ink-muted)] hover:underline decoration-dotted underline-offset-4"
      >
        {value != null ? `${value.toLocaleString("de-DE")} €/Std.` : "Kein Standard-Stundenlohn"}
      </button>
    );
  }

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        const data = new FormData(e.currentTarget);
        startTransition(async () => {
          await action(id, data);
          setEditing(false);
          router.refresh();
        });
      }}
      className="flex items-center gap-2"
      onClick={(e) => e.stopPropagation()}
    >
      <input
        name={fieldName}
        type="number"
        step="0.01"
        min="0"
        defaultValue={value ?? ""}
        placeholder="€/Std."
        autoFocus
        disabled={pending}
        className="w-24 bg-[var(--rk-bg)] border border-white/15 rounded-lg px-2 py-1 text-sm focus:outline-none focus:border-white/50 disabled:opacity-50"
      />
      <button
        type="submit"
        disabled={pending}
        className="text-xs border border-white/30 rounded-full px-2.5 py-1 hover:border-white disabled:opacity-50 shrink-0"
      >
        Speichern
      </button>
      <button
        type="button"
        onClick={() => setEditing(false)}
        disabled={pending}
        className="text-xs text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)] shrink-0"
      >
        Abbrechen
      </button>
    </form>
  );
}