import { HistorieBearbeiten } from "@/components/employees/HistorieBearbeiten";
import { HistorieLoeschen } from "@/components/employees/HistorieLoeschen";
import { AenderungsTabelle } from "@/components/ui/AenderungsTabelle";
import { actionBadgeStyle } from "@/lib/colors";
import { fmtDate, todayIso } from "@/lib/format";
import { darfKorrigiertWerden, loeschVorschau } from "@/lib/history";
import type { Database } from "@/lib/supabase/types";

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

// Die Geschichte einer Person — aufklappbar bis auf die Werte, und dort, wo
// ein Eintrag irrtümlich entstanden ist, auch zurücknehmbar.
//
// 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.
//
// Der Löschknopf erscheint nur an Einträgen, die sich zurücknehmen lassen.
// An allen anderen steht stattdessen der Grund — leise, aber lesbar. Ein
// Knopf, der erst nach dem Klick sagt „geht nicht", wäre eine Falle; ein
// fehlender Knopf ohne Erklärung wäre ein Rätsel.

export function HistorieTab({ history, employeeId }: { history: HistoryRow[]; employeeId: string }) {
  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 ?? [];
        const urteil = darfKorrigiertWerden(h, today);
        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>
              )}
              {urteil.erlaubt && (
                <span className="ml-auto flex items-center gap-0.5">
                  <HistorieBearbeiten
                    historyId={h.id}
                    employeeId={employeeId}
                    bezeichnung={h.event_type}
                    datum={h.event_date}
                    changes={changes}
                    istZukunft={isFuture}
                    heute={today}
                  />
                  <HistorieLoeschen
                    historyId={h.id}
                    employeeId={employeeId}
                    bezeichnung={h.event_type}
                    datum={h.event_date}
                    vorschau={loeschVorschau(h, history)}
                    istZukunft={isFuture}
                  />
                </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>
                {!urteil.erlaubt && <p className="mt-1.5 text-xs text-ink-muted">{urteil.grund}</p>}
              </details>
            )}
          </li>
        );
      })}
    </ul>
  );
}