"use client";

import Link from "next/link";
import { useState } from "react";
import { AenderungsTabelle } from "@/components/ui/AenderungsTabelle";
import { SlideOver } from "@/components/ui/SlideOver";
import { actionBadgeStyle } from "@/lib/colors";
import type { AuditChange } from "@/lib/types";

// Eine Protokollzeile zum Aufklappen.
//
// Die Liste zeigt, *dass* etwas geändert wurde; hier steht, *was*. Beides in
// der Tabelle unterzubringen ginge nicht — bei sieben geänderten Feldern
// wäre die Zeile höher als der Bildschirm.

export type AuditEintrag = {
  id: string;
  occurred_at: string;
  actor_name: string;
  action: string;
  target_label: string;
  target_employee_id: string | null;
  details: string | null;
  changes: AuditChange[] | null;
};

const zeitFormat = new Intl.DateTimeFormat("de-AT", {
  day: "2-digit",
  month: "2-digit",
  year: "numeric",
  hour: "2-digit",
  minute: "2-digit",
  second: "2-digit",
  timeZone: "Europe/Vienna",
});

export function AuditDetail({ eintrag }: { eintrag: AuditEintrag }) {
  const [offen, setOffen] = useState(false);
  const anzahl = eintrag.changes?.length ?? 0;

  return (
    <>
      <button
        type="button"
        onClick={() => setOffen(true)}
        aria-haspopup="dialog"
        className="w-full rounded px-2 py-1 text-left text-ink-muted hover:bg-brand-50 hover:text-ink
                   focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500"
      >
        <span>{eintrag.details ?? "–"}</span>
        {anzahl > 0 && (
          <span className="ml-2 whitespace-nowrap rounded-full bg-accent-100 px-2 py-0.5 text-[11px] font-semibold text-brand-700">
            {anzahl} {anzahl === 1 ? "Feld" : "Felder"}
          </span>
        )}
      </button>

      <SlideOver
        open={offen}
        onClose={() => setOffen(false)}
        title={eintrag.target_label}
        subtitle={`${eintrag.action} · ${zeitFormat.format(new Date(eintrag.occurred_at))}`}
      >
        <dl className="grid grid-cols-[auto_1fr] gap-x-6 gap-y-2 text-sm">
          <dt className="font-semibold text-ink-muted">Aktion</dt>
          <dd>
            <span className={`rounded-full px-2 py-0.5 text-[11px] font-semibold ${actionBadgeStyle(eintrag.action)}`}>
              {eintrag.action}
            </span>
          </dd>
          <dt className="font-semibold text-ink-muted">Benutzer:in</dt>
          <dd className="text-ink">{eintrag.actor_name}</dd>
          <dt className="font-semibold text-ink-muted">Zeitpunkt</dt>
          <dd className="tabular-nums text-ink">{zeitFormat.format(new Date(eintrag.occurred_at))}</dd>
          {eintrag.target_employee_id && (
            <>
              <dt className="font-semibold text-ink-muted">Objekt</dt>
              <dd>
                <Link
                  href={`/employees/${eintrag.target_employee_id}`}
                  className="rounded font-semibold text-brand-700 hover:underline
                             focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500"
                >
                  {eintrag.target_label}
                </Link>
              </dd>
            </>
          )}
        </dl>

        {eintrag.details && (
          <p className="mt-5 rounded-md bg-surface px-3 py-2 text-sm text-ink-body">{eintrag.details}</p>
        )}

        <h3 className="mt-6 text-sm font-bold text-ink">Geänderte Felder</h3>
        {anzahl > 0 ? (
          <div className="mt-2">
            <AenderungsTabelle changes={eintrag.changes!} />
          </div>
        ) : (
          // Kein Aufzählungszeichen für „nichts da“: der Grund ist wichtig,
          // damit niemand einen Fehler vermutet.
          <p className="mt-2 max-w-prose text-sm text-ink-muted">
            Für diesen Eintrag liegen keine Feldwerte vor. Vorgänge wie Eintritt, Austritt oder Import erfassen keine
            Einzelfelder — und Einträge von vor der Erweiterung des Protokolls haben nur die Feldnamen behalten, nicht
            die Werte. Nachliefern lässt sich das nicht.
          </p>
        )}
      </SlideOver>
    </>
  );
}