"use client";

import { useRef, useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { requestVacationAction, cancelVacationRequestAction } from "@/lib/actions/vacation";
import { formatDateDE } from "@/lib/orderConstants";
import { VACATION_REQUEST_STATUS_LABELS, type VacationRequestStatus } from "@/lib/vacationConstants";

// "Eine Art Plan/Kalender" (Nutzer-Wunsch) bewusst als sortierte,
// nach Status eingefärbte Liste umgesetzt statt eines vollen Kalender-
// Grids - deckt "genommen/geplant/beantragt" ab, ohne eine ganze
// Kalenderkomponente extra zu bauen. Sitzt seit dem neuen Mitarbeiter-Tab
// (25.09.2026, Tills wiederholte explizite Bestätigung) auf
// /account/mitarbeiter, nicht mehr auf /admin/zeiterfassung.
type OwnRequest = {
  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)]",
};

function displayLabel(r: OwnRequest, now: number): string {
  if (r.status !== "approved") return VACATION_REQUEST_STATUS_LABELS[r.status];
  return new Date(r.endDate).getTime() < now ? "Genommen" : "Geplant";
}

export function VacationSelfServicePanel({
  allowance,
  approvedDays,
  pendingDays,
  requests,
}: {
  allowance: number | null;
  approvedDays: number;
  pendingDays: number;
  requests: OwnRequest[];
}) {
  const [pending, startTransition] = useTransition();
  const [error, setError] = useState<string | null>(null);
  const [warning, setWarning] = useState<string | null>(null);
  const formRef = useRef<HTMLFormElement>(null);
  const router = useRouter();
  // Lazy useState-Initializer statt eines direkten Date.now()-Aufrufs im
  // Render-Body (gleiches Muster wie ContractReminderButton.tsx).
  const [now] = useState(() => Date.now());

  function submit(form: HTMLFormElement) {
    const data = new FormData(form);
    startTransition(async () => {
      const result = await requestVacationAction(data);
      if (result?.error) {
        setError(result.error);
        setWarning(null);
      } else {
        setError(null);
        setWarning(result?.warning ?? null);
        form.reset();
        router.refresh();
      }
    });
  }

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

  const remaining = allowance != null ? allowance - approvedDays : null;
  const sorted = [...requests].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)]">Urlaub</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
            {pendingDays > 0 && ` (${pendingDays} davon noch offen)`}
          </p>
        )}
      </div>
      {allowance == null && (
        <p className="text-xs text-[var(--rk-ink-muted)] mb-3">Noch kein Urlaubskontingent hinterlegt — bei HR nachfragen.</p>
      )}

      <form
        ref={formRef}
        onSubmit={(e) => {
          e.preventDefault();
          submit(e.currentTarget);
        }}
        className="grid grid-cols-2 gap-3 mb-3"
      >
        <label className="flex flex-col gap-1 text-xs">
          <span className="text-[var(--rk-ink-muted)]">Von</span>
          <input name="startDate" type="date" required disabled={pending} 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)]">Bis</span>
          <input name="endDate" type="date" required disabled={pending} className="bg-[var(--rk-bg)] border border-white/15 rounded-lg px-3 py-2 text-sm" />
        </label>
        <label className="col-span-2 flex flex-col gap-1 text-xs">
          <span className="text-[var(--rk-ink-muted)]">Notiz (optional)</span>
          <input
            name="note"
            type="text"
            maxLength={300}
            disabled={pending}
            className="bg-[var(--rk-bg)] border border-white/15 rounded-lg px-3 py-2 text-sm"
          />
        </label>
        <button
          type="submit"
          disabled={pending}
          className="col-span-2 text-xs border border-white/30 rounded-lg px-3 py-2 hover:border-white transition-colors"
        >
          Urlaub beantragen
        </button>
      </form>
      {error && <p className="text-xs text-red-400 mb-3">{error}</p>}
      {warning && <p className="text-xs text-amber-400 mb-3">{warning}</p>}

      {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((r) => (
            <div key={r.id} className="flex items-center justify-between gap-3 bg-[var(--rk-surface)] border border-white/10 rounded-xl px-4 py-3 text-sm">
              <div>
                <p>
                  {formatDateDE(new Date(r.startDate))} – {formatDateDE(new Date(r.endDate))}{" "}
                  <span className="text-[var(--rk-ink-muted)]">({r.workDaysCount} Tage)</span>
                </p>
                <p className={`text-xs ${STATUS_COLORS[r.status]}`}>{displayLabel(r, now)}</p>
              </div>
              {(r.status === "requested" || (r.status === "approved" && new Date(r.startDate).getTime() > now)) && (
                <button
                  type="button"
                  disabled={pending}
                  onClick={() => cancel(r.id)}
                  className="text-xs border border-white/30 rounded-lg px-3 py-1.5 hover:border-white transition-colors shrink-0"
                >
                  Zurückziehen
                </button>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}