"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { approveVacationRequestAction, rejectVacationRequestAction } from "@/lib/actions/vacation";
import { formatDateDE } from "@/lib/orderConstants";

type PendingRequest = {
  id: string;
  employeeName: string;
  startDate: string;
  endDate: string;
  workDaysCount: number;
  note: string;
  allowance: number | null;
  approvedDays: number;
  pendingDays: number;
  wouldExceed: boolean;
};

export function VacationApprovalInbox({ requests }: { requests: PendingRequest[] }) {
  const [pending, startTransition] = useTransition();
  const [rejectingId, setRejectingId] = useState<string | null>(null);
  const [rejectionReason, setRejectionReason] = useState("");
  const router = useRouter();

  function approve(id: string) {
    startTransition(async () => {
      await approveVacationRequestAction(id);
      router.refresh();
    });
  }

  function reject(id: string) {
    const data = new FormData();
    data.set("rejectionReason", rejectionReason);
    startTransition(async () => {
      await rejectVacationRequestAction(id, data);
      setRejectingId(null);
      setRejectionReason("");
      router.refresh();
    });
  }

  if (requests.length === 0) {
    return <p className="text-sm text-[var(--rk-ink-muted)]">Keine offenen Urlaubsanträge.</p>;
  }

  return (
    <div className="flex flex-col gap-3">
      {requests.map((r) => (
        <div key={r.id} className="bg-[var(--rk-surface)] border border-white/10 rounded-xl px-4 py-3">
          <div className="flex items-start justify-between gap-3">
            <div>
              <p className="text-sm font-medium text-[var(--rk-ink)]">{r.employeeName}</p>
              <p className="text-sm text-[var(--rk-ink-muted)]">
                {formatDateDE(new Date(r.startDate))} – {formatDateDE(new Date(r.endDate))} ({r.workDaysCount} Tage)
              </p>
              {r.note && <p className="text-xs text-[var(--rk-ink-muted)] mt-1">{r.note}</p>}
              {r.allowance != null && (
                <p className={`text-xs mt-1 ${r.wouldExceed ? "text-amber-400" : "text-[var(--rk-ink-muted)]"}`}>
                  {r.wouldExceed && "⚠ "}
                  {r.approvedDays + r.pendingDays} von {r.allowance} Tagen für {new Date(r.startDate).getFullYear()} beantragt/genommen
                  {r.wouldExceed && " — übersteigt das Kontingent"}
                </p>
              )}
            </div>
            <div className="flex gap-2 shrink-0">
              <button
                type="button"
                disabled={pending}
                onClick={() => approve(r.id)}
                className="text-xs border border-emerald-400/40 text-emerald-400 rounded-lg px-3 py-1.5 hover:border-emerald-400 transition-colors"
              >
                Genehmigen
              </button>
              <button
                type="button"
                disabled={pending}
                onClick={() => setRejectingId(rejectingId === r.id ? null : r.id)}
                className="text-xs border border-red-400/40 text-red-400 rounded-lg px-3 py-1.5 hover:border-red-400 transition-colors"
              >
                Ablehnen
              </button>
            </div>
          </div>
          {rejectingId === r.id && (
            <div className="mt-3 flex gap-2">
              <input
                type="text"
                value={rejectionReason}
                onChange={(e) => setRejectionReason(e.target.value)}
                placeholder="Grund der Ablehnung (optional)"
                className="flex-1 bg-[var(--rk-bg)] border border-white/15 rounded-lg px-3 py-2 text-sm"
              />
              <button
                type="button"
                disabled={pending}
                onClick={() => reject(r.id)}
                className="text-xs border border-red-400/40 text-red-400 rounded-lg px-3 py-1.5 hover:border-red-400 transition-colors shrink-0"
              >
                Bestätigen
              </button>
            </div>
          )}
        </div>
      ))}
    </div>
  );
}