"use client";

import { 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.
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();

  function save(field: "hourlyWage" | "monthlyHours", value: string) {
    const data = new FormData();
    data.set("hourlyWage", field === "hourlyWage" ? value : hourlyWage != null ? String(hourlyWage) : "");
    data.set("monthlyHours", field === "monthlyHours" ? value : monthlyHours != null ? String(monthlyHours) : "");
    startTransition(async () => {
      await setSalaryFieldsAction(clientId, data);
      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
          type="number"
          step="0.01"
          min="0"
          defaultValue={hourlyWage ?? ""}
          placeholder={suggestedHourlyWage != null ? `${suggestedHourlyWage.toLocaleString("de-DE")} €/Std. (Standard)` : "€/Std."}
          disabled={pending}
          onBlur={(e) => save("hourlyWage", e.target.value)}
          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
          type="number"
          step="0.5"
          min="0"
          defaultValue={monthlyHours ?? ""}
          placeholder="Std./Monat"
          disabled={pending}
          onBlur={(e) => save("monthlyHours", e.target.value)}
          className="bg-[var(--rk-bg)] border border-white/15 rounded-lg px-3 py-2 text-sm"
        />
      </label>
    </>
  );
}