"use client";

import type { CaseEvent } from "@/lib/types";
import { format } from "date-fns";
import { de } from "date-fns/locale";
import { Activity } from "lucide-react";

const EVENT_ICONS: Record<string, string> = {
  case_created: "bg-emerald-500",
  status_changed: "bg-amber-500",
  party_added: "bg-blue-500",
  case_archived: "bg-neutral-400",
  document_uploaded: "bg-violet-500",
  deadline_created: "bg-red-500",
};

interface CaseTimelineProps {
  events: CaseEvent[];
}

export function CaseTimeline({ events }: CaseTimelineProps) {
  if (events.length === 0) {
    return (
      <div className="flex flex-col items-center py-8 text-center">
        <div className="rounded-xl bg-neutral-100 p-3">
          <Activity className="h-5 w-5 text-neutral-400" />
        </div>
        <p className="mt-2 text-sm text-neutral-500">
          Keine Ereignisse vorhanden.
        </p>
      </div>
    );
  }

  return (
    <div className="relative space-y-0">
      {events.map((event, i) => (
        <div key={event.id} className="relative flex gap-3 pb-6">
          {i < events.length - 1 && (
            <div className="absolute left-[7px] top-4 h-full w-px bg-neutral-200" />
          )}
          <div
            className={`mt-1 h-[15px] w-[15px] shrink-0 rounded-full border-2 border-white ${EVENT_ICONS[event.event_type ?? ""] ?? "bg-neutral-300"}`}
          />
          <div className="min-w-0 flex-1">
            <p className="text-sm font-medium text-neutral-900">
              {event.title}
            </p>
            {event.description && (
              <p className="mt-0.5 text-sm text-neutral-500">
                {event.description}
              </p>
            )}
            <p className="mt-1 text-xs text-neutral-400">
              {format(
                new Date(event.event_date ?? event.created_at),
                "d. MMM yyyy, HH:mm",
                { locale: de },
              )}
            </p>
          </div>
        </div>
      ))}
    </div>
  );
}