"use client";

import { useRef, useTransition } from "react";
import { useRouter } from "next/navigation";
import { setSalaryFieldsAction } from "@/lib/actions/team";

// Eigener Stundenlohn/Monatsstunden-Wert des Mitarbeiters - leer lassen,
// damit der Positions-/Abteilungs-Standard greift (siehe lib/salary.ts).
// suggestedHourlyWage kommt vorberechnet von der Seite (Position hat
// Vorrang vor Abteilung), rein informativ als Platzhalter-Text.
// Alle drei Felder teilen sich eine einzige save()-Funktion (per Refs statt
// Event-Value gelesen), damit "Grund der Änderung" beim Speichern immer den
// aktuell im Stundenlohn-Feld stehenden Wert begleitet, unabhängig davon,
// welches der drei Felder den Blur ausgelöst hat.
export function SalaryFieldsForm({
  clientId,
  hourlyWage,
  monthlyHours,
  suggestedHourlyWage,
}: {
  clientId: string;
  hourlyWage: number | null;
  monthlyHours: number | null;
  suggestedHourlyWage: number | null;
}) {
  const [pending, startTransition] = useTransition();
  const router = useRouter();
  const hourlyWageRef = useRef<HTMLInputElement>(null);
  const monthlyHoursRef = useRef<HTMLInputElement>(null);
  const reasonRef = useRef<HTMLInputElement>(null);

  function save() {
    const data = new FormData();
    data.set("hourlyWage", hourlyWageRef.current?.value ?? "");
    data.set("monthlyHours", monthlyHoursRef.current?.value ?? "");
    data.set("salaryChangeReason", reasonRef.current?.value ?? "");
    startTransition(async () => {
      await setSalaryFieldsAction(clientId, data);
      if (reasonRef.current) reasonRef.current.value = "";
      router.refresh();
    });
  }

  return (
    <>
      <label className="flex flex-col gap-1 text-xs">
        <span className="text-[var(--rk-ink-muted)]">
          Stundenlohn {suggestedHourlyWage != null && hourlyWage == null && `(Standard: ${suggestedHourlyWage.toLocaleString("de-DE")} €)`}
        </span>
        <input
          ref={hourlyWageRef}
          type="number"
          step="0.01"
          min="0"
          defaultValue={hourlyWage ?? ""}
          placeholder={suggestedHourlyWage != null ? `${suggestedHourlyWage.toLocaleString("de-DE")} €/Std. (Standard)` : "€/Std."}
          disabled={pending}
          onBlur={save}
          className="bg-[var(--rk-bg)] border border-white/15 rounded-lg px-3 py-2 text-sm"
        />
      </label>
      <label className="flex flex-col gap-1 text-xs">
        <span className="text-[var(--rk-ink-muted)]">Grund der Änderung (optional, für Historie)</span>
        <input
          ref={reasonRef}
          type="text"
          maxLength={300}
          placeholder="z. B. jährliche Anpassung, Beförderung ..."
          disabled={pending}
          onBlur={save}
          className="bg-[var(--rk-bg)] border border-white/15 rounded-lg px-3 py-2 text-sm"
        />
      </label>
      <label className="flex flex-col gap-1 text-xs">
        <span className="text-[var(--rk-ink-muted)]">Monatliche Arbeitsstunden (vertraglich)</span>
        <input
          ref={monthlyHoursRef}
          type="number"
          step="0.5"
          min="0"
          defaultValue={monthlyHours ?? ""}
          placeholder="Std./Monat"
          disabled={pending}
          onBlur={save}
          className="bg-[var(--rk-bg)] border border-white/15 rounded-lg px-3 py-2 text-sm"
        />
      </label>
    </>
  );
}