import { formatDateDE } from "@/lib/orderConstants";

// Rein lesende Anzeige - Einträge entstehen ausschließlich automatisch über
// setSalaryFieldsAction (Personalsystem, 25.09.2026), kein eigenes Formular.
type SalaryHistoryEntry = {
  id: string;
  oldHourlyWage: number | null;
  newHourlyWage: number | null;
  reason: string;
  byName: string;
  at: string;
};

const fmtWage = (v: number | null) => (v != null ? `${v.toLocaleString("de-DE")} €/Std.` : "Standard");

export function SalaryHistoryPanel({ entries }: { entries: SalaryHistoryEntry[] }) {
  if (entries.length === 0) return null;

  const sorted = [...entries].sort((a, b) => new Date(b.at).getTime() - new Date(a.at).getTime());

  return (
    <div className="border border-white/10 rounded-xl p-5">
      <h2 className="text-sm font-medium text-[var(--rk-ink)] mb-3">Gehaltserhöhungs-Historie</h2>
      <div className="flex flex-col gap-2">
        {sorted.map((e) => (
          <div key={e.id} className="bg-[var(--rk-surface)] border border-white/10 rounded-xl px-4 py-3">
            <p className="text-sm">
              {fmtWage(e.oldHourlyWage)} → <span className="font-medium">{fmtWage(e.newHourlyWage)}</span>
            </p>
            <p className="text-xs text-[var(--rk-ink-muted)] mt-0.5">
              {formatDateDE(new Date(e.at))} · von {e.byName}
              {e.reason && <> · {e.reason}</>}
            </p>
          </div>
        ))}
      </div>
    </div>
  );
}