import { formatDateDE } from "@/lib/orderConstants";
import { VACATION_REQUEST_STATUS_LABELS, type VacationRequestStatus } from "@/lib/vacationConstants";

// Rein lesende Übersicht für die Personalakte - alle Urlaubsanträge dieser
// Person (jeder Status), damit HR beim Blick auf eine Personalakte den
// Verlauf sieht. Genehmigen/Ablehnen passiert im team-weiten Eingang unter
// /admin/urlaubsantraege, nicht hier.
type VacationEntry = {
  id: string;
  startDate: string;
  endDate: string;
  workDaysCount: number;
  status: VacationRequestStatus;
  note: string;
};

const STATUS_COLORS: Record<VacationRequestStatus, string> = {
  requested: "text-amber-400",
  approved: "text-emerald-400",
  rejected: "text-red-400",
  cancelled: "text-[var(--rk-ink-muted)]",
};

export function VacationHistoryPanel({
  entries,
  allowance,
  remaining,
}: {
  entries: VacationEntry[];
  allowance: number | null;
  remaining: number | null;
}) {
  const sorted = [...entries].sort((a, b) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime());

  return (
    <div className="border border-white/10 rounded-xl p-5">
      <div className="flex items-center justify-between mb-3">
        <h2 className="text-sm font-medium text-[var(--rk-ink)]">Urlaubsanträge</h2>
        {allowance != null && (
          <p className="text-xs text-[var(--rk-ink-muted)]">
            Rest {new Date().getFullYear()}: <span className="text-[var(--rk-ink)]">{remaining}</span> von {allowance} Tagen
          </p>
        )}
      </div>
      {sorted.length === 0 ? (
        <p className="text-sm text-[var(--rk-ink-muted)]">Noch keine Urlaubsanträge.</p>
      ) : (
        <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 flex items-center justify-between gap-3">
                <span>
                  {formatDateDE(new Date(e.startDate))} – {formatDateDE(new Date(e.endDate))}{" "}
                  <span className="text-[var(--rk-ink-muted)]">({e.workDaysCount} Tage)</span>
                </span>
                <span className={`text-xs shrink-0 ${STATUS_COLORS[e.status]}`}>{VACATION_REQUEST_STATUS_LABELS[e.status]}</span>
              </p>
              {e.note && <p className="text-xs text-[var(--rk-ink-muted)] mt-1">{e.note}</p>}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}