import { AenderungsTabelle } from "@/components/ui/AenderungsTabelle";
import { actionBadgeStyle } from "@/lib/colors";
import { fmtDate, todayIso } from "@/lib/format";
import type { Database } from "@/lib/supabase/types";

type HistoryRow = Database["public"]["Tables"]["employee_history"]["Row"];

// Die Geschichte einer Person — und zwar aufklappbar bis auf die Werte.
//
// Vorher stand hier nur „Geänderte Felder: Adresse, Ort". Damit liess sich
// zwar sehen, *dass* jemand die Anschrift angefasst hat, aber nicht, was
// vorher dort stand. Die alte Adresse lag allein im Protokoll, und das ist
// eine andere Seite, nach Zeitpunkt sortiert statt nach Person — man hätte
// also erst wissen müssen, wonach man sucht.
//
// Aufgeklappt wird mit <details>, nicht mit einem Zustand im Browser: die
// Werte stehen dann schon in der Seite, sind durchsuchbar (Strg+F) und im
// Ausdruck sichtbar, und es braucht kein Skript dafür.

export function HistorieTab({ history }: { history: HistoryRow[] }) {
  const today = todayIso();

  if (history.length === 0) {
    return <p className="text-sm text-ink-muted">Keine Historieneinträge vorhanden.</p>;
  }

  return (
    <ul className="flex flex-col divide-y divide-border">
      {history.map((h) => {
        const isFuture = h.event_date > today;
        const changes = h.changes ?? [];
        return (
          <li key={h.id} className="py-3">
            <div className="flex flex-wrap items-center gap-2">
              <span className={`rounded-full px-2 py-0.5 text-xs font-semibold ${actionBadgeStyle(h.event_type)}`}>{h.event_type}</span>
              <span className="text-sm text-ink-muted">{fmtDate(h.event_date)}</span>
              {isFuture && (
                <span className="rounded-full bg-warning-bg px-2 py-0.5 text-xs font-semibold text-warning-text">
                  ⏱ zukünftig – wirksam ab {fmtDate(h.event_date)}
                </span>
              )}
            </div>
            <p className="mt-1 text-sm text-ink">{h.description}</p>

            {changes.length > 0 && (
              <details className="group mt-1.5">
                <summary
                  className="inline-flex cursor-pointer list-none items-center gap-1 rounded text-xs font-semibold text-brand-700
                             hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500"
                >
                  <span className="transition-transform group-open:rotate-90" aria-hidden="true">
                    ›
                  </span>
                  {changes.length} {changes.length === 1 ? "Feld" : "Felder"} im Detail
                </summary>
                <div className="mt-2 rounded border border-border bg-surface px-3 py-2">
                  <AenderungsTabelle changes={changes} />
                </div>
              </details>
            )}
          </li>
        );
      })}
    </ul>
  );
}