import { cn } from "@aur-ui/ui/lib/utils";
import type { ReactNode } from "react";

export type ActivityTone =
  | "neutral"
  | "brand"
  | "positive"
  | "warning"
  | "danger";

const TONES: Record<ActivityTone, string> = {
  neutral: "bg-ink-wash text-ink-500",
  brand: "bg-brand-soft text-brand",
  positive: "bg-positive-soft text-positive",
  warning: "bg-warning-soft text-warning",
  danger: "bg-danger-soft text-danger",
};

export type ActivityItem = {
  id: string;
  title: ReactNode;
  description?: ReactNode;
  /** Right-aligned quiet timestamp (pre-formatted). */
  time?: ReactNode;
  /** Marker glyph; falls back to a dot. */
  icon?: ReactNode;
  tone?: ActivityTone;
};

/**
 * Audit/activity feed — soft tone-tinted markers on a hairline rail,
 * tabular-quiet timestamps right-aligned so scanning stays columnar.
 */
export function ActivityTimeline({
  items,
  className,
}: {
  items: ActivityItem[];
  className?: string;
}) {
  return (
    <ol
      data-slot="activity-timeline"
      className={cn("flex flex-col", className)}
    >
      {items.map((item, index) => (
        <li key={item.id} className="relative flex gap-3 pb-6 last:pb-0">
          {index < items.length - 1 ? (
            <span
              aria-hidden
              className="absolute top-7 bottom-0 left-3.5 w-px bg-ink-wash"
            />
          ) : null}
          <span
            aria-hidden
            className={cn(
              "flex size-7 shrink-0 items-center justify-center rounded-full [&>svg]:size-3.5",
              TONES[item.tone ?? "neutral"],
            )}
          >
            {item.icon ?? <span className="size-1.5 rounded-full bg-current" />}
          </span>
          <div className="flex min-w-0 flex-1 flex-col gap-0.5 pt-1">
            <div className="flex items-baseline gap-3">
              <span className="min-w-0 flex-1 truncate text-sm font-medium text-ink-900">
                {item.title}
              </span>
              {item.time ? (
                <span className="shrink-0 text-xs text-ink-400 tabular-nums">
                  {item.time}
                </span>
              ) : null}
            </div>
            {item.description ? (
              <p className="text-sm leading-6 text-ink-500">
                {item.description}
              </p>
            ) : null}
          </div>
        </li>
      ))}
    </ol>
  );
}