"use client";

import { CalendarClock } from "lucide-react";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { fmtDate } from "@/lib/format";

type AsOfPickerProps = {
  asOf: string;
  today: string;
  /** Placements projected from effective-dated changes not yet applied. */
  projectedCount: number;
  /** Earliest date the assignment history covers; before that it is today's placement. */
  historyStartsAt: string | null;
};

export function AsOfPicker({ asOf, today, projectedCount, historyStartsAt }: AsOfPickerProps) {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  function setAsOf(value: string | undefined) {
    const sp = new URLSearchParams(searchParams.toString());
    if (value && value !== today) sp.set("asOf", value);
    else sp.delete("asOf");
    router.push(sp.size > 0 ? `${pathname}?${sp}` : pathname, { scroll: false });
  }

  const isToday = asOf === today;
  const isFuture = asOf > today;
  // Assignments only started being recorded when the history table was
  // introduced; asking for a date before that yields today's placement for
  // everyone, which is worth saying out loud rather than quietly implying.
  const beforeHistory = historyStartsAt !== null && asOf < historyStartsAt;

  return (
    <div className="rounded border border-border bg-white p-3">
      <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
        <label htmlFor="orgchart-asof" className="flex items-center gap-1.5 text-sm font-semibold text-ink">
          <CalendarClock className="h-4 w-4 text-ink-muted" />
          Stichtag
        </label>
        <input
          id="orgchart-asof"
          type="date"
          value={asOf}
          onChange={(e) => setAsOf(e.target.value || undefined)}
          className="rounded border border-border px-3 py-2 text-sm"
        />
        {!isToday && (
          <button type="button" onClick={() => setAsOf(undefined)} className="text-xs font-semibold text-brand-700 hover:underline">
            Heute
          </button>
        )}
        <span className="text-xs text-ink-muted">
          {isToday ? "Aktuelle Organisationsstruktur." : `Struktur zum ${fmtDate(asOf)}.`}
        </span>
      </div>

      {isFuture && (
        <p className="mt-2 rounded bg-info-bg px-3 py-2 text-xs text-info-text">
          Vorschau: {projectedCount > 0
            ? `${projectedCount} geplante Versetzung(en)/Reorganisation(en) sind eingerechnet.`
            : "Für diesen Zeitraum sind keine Versetzungen vorgemerkt."}{" "}
          Ein-/Austritte und Karenzen sind berücksichtigt.
        </p>
      )}

      {beforeHistory && (
        <p className="mt-2 rounded bg-warning-bg px-3 py-2 text-xs text-warning-text">
          Vor dem {fmtDate(historyStartsAt)} wurde die Zuordnungshistorie noch nicht aufgezeichnet. Wer beschäftigt war,
          stimmt; Team und Vorgesetzte zeigen für diesen Stichtag die heutige Zuordnung.
        </p>
      )}
    </div>
  );
}