"use client";

import { useQuery } from "@tanstack/react-query";
import { useParams, useSearchParams } from "next/navigation";
import { api } from "@/lib/api";
import type { AuditLogResponse } from "@/lib/types";
import { format } from "date-fns";
import { de } from "date-fns/locale";
import { Loader2, ChevronLeft, ChevronRight } from "lucide-react";

const ACTION_LABELS: Record<string, string> = {
  create: "Erstellt",
  update: "Aktualisiert",
  delete: "Geloescht",
};

const ACTION_COLORS: Record<string, string> = {
  create: "bg-emerald-50 text-emerald-700",
  update: "bg-blue-50 text-blue-700",
  delete: "bg-red-50 text-red-700",
};

const ENTITY_LABELS: Record<string, string> = {
  case: "Akte",
  deadline: "Frist",
  appointment: "Termin",
  document: "Dokument",
  party: "Partei",
  note: "Notiz",
  settings: "Einstellungen",
  membership: "Mitgliedschaft",
};

function DiffPreview({
  oldValues,
  newValues,
}: {
  oldValues?: Record<string, unknown>;
  newValues?: Record<string, unknown>;
}) {
  if (!oldValues && !newValues) return null;

  const allKeys = new Set([
    ...Object.keys(oldValues ?? {}),
    ...Object.keys(newValues ?? {}),
  ]);

  const changes: { key: string; from?: unknown; to?: unknown }[] = [];
  for (const key of allKeys) {
    const oldVal = oldValues?.[key];
    const newVal = newValues?.[key];
    if (JSON.stringify(oldVal) !== JSON.stringify(newVal)) {
      changes.push({ key, from: oldVal, to: newVal });
    }
  }

  if (changes.length === 0) return null;

  return (
    <div className="mt-2 space-y-1">
      {changes.slice(0, 5).map((c) => (
        <div key={c.key} className="flex items-baseline gap-2 text-xs">
          <span className="font-medium text-neutral-500">{c.key}:</span>
          {c.from !== undefined && (
            <span className="rounded bg-red-50 px-1 text-red-600 line-through">
              {String(c.from)}
            </span>
          )}
          {c.to !== undefined && (
            <span className="rounded bg-emerald-50 px-1 text-emerald-600">
              {String(c.to)}
            </span>
          )}
        </div>
      ))}
      {changes.length > 5 && (
        <span className="text-xs text-neutral-400">
          +{changes.length - 5} weitere Aenderungen
        </span>
      )}
    </div>
  );
}

export default function ProtokollPage() {
  const { id } = useParams<{ id: string }>();
  const searchParams = useSearchParams();
  const page = Number(searchParams.get("page")) || 1;

  const { data, isLoading } = useQuery({
    queryKey: ["audit-log", id, page],
    queryFn: () =>
      api.get<AuditLogResponse>(
        `/audit-log?entity_id=${id}&page=${page}&limit=50`,
      ),
  });

  if (isLoading) {
    return (
      <div className="flex items-center justify-center py-8">
        <Loader2 className="h-5 w-5 animate-spin text-neutral-400" />
      </div>
    );
  }

  const entries = data?.entries ?? [];
  const total = data?.total ?? 0;
  const totalPages = Math.ceil(total / 50);

  if (entries.length === 0) {
    return (
      <div className="py-8 text-center text-sm text-neutral-400">
        Keine Protokolleintraege vorhanden.
      </div>
    );
  }

  return (
    <div>
      <div className="space-y-3">
        {entries.map((entry) => (
          <div
            key={entry.id}
            className="rounded-md border border-neutral-100 bg-white px-4 py-3"
          >
            <div className="flex items-start justify-between gap-3">
              <div className="flex items-center gap-2">
                <span
                  className={`inline-block rounded-full px-2 py-0.5 text-xs font-medium ${ACTION_COLORS[entry.action] ?? "bg-neutral-100 text-neutral-600"}`}
                >
                  {ACTION_LABELS[entry.action] ?? entry.action}
                </span>
                <span className="text-sm font-medium text-neutral-700">
                  {ENTITY_LABELS[entry.entity_type] ?? entry.entity_type}
                </span>
              </div>
              <span className="shrink-0 text-xs text-neutral-400">
                {format(new Date(entry.created_at), "d. MMM yyyy, HH:mm", {
                  locale: de,
                })}
              </span>
            </div>
            <DiffPreview
              oldValues={entry.old_values}
              newValues={entry.new_values}
            />
          </div>
        ))}
      </div>

      {totalPages > 1 && (
        <div className="mt-4 flex items-center justify-between">
          <span className="text-xs text-neutral-400">
            {total} Eintraege, Seite {page} von {totalPages}
          </span>
          <div className="flex gap-1">
            {page > 1 && (
              <a
                href={`?page=${page - 1}`}
                className="inline-flex items-center gap-1 rounded-md border border-neutral-200 px-2 py-1 text-xs text-neutral-600 hover:bg-neutral-50"
              >
                <ChevronLeft className="h-3 w-3" /> Zurueck
              </a>
            )}
            {page < totalPages && (
              <a
                href={`?page=${page + 1}`}
                className="inline-flex items-center gap-1 rounded-md border border-neutral-200 px-2 py-1 text-xs text-neutral-600 hover:bg-neutral-50"
              >
                Weiter <ChevronRight className="h-3 w-3" />
              </a>
            )}
          </div>
        </div>
      )}
    </div>
  );
}
