"use client";

import { cn } from "@/lib/utils";

export type TimelineItem = {
  id: string;
  title: string;
  subtitle?: string;
  timestamp: string;
  tone?: "default" | "success" | "warning" | "danger";
  meta?: string;
};

const toneDot: Record<NonNullable<TimelineItem["tone"]>, string> = {
  default: "bg-[var(--muted)]",
  success: "bg-emerald-500",
  warning: "bg-amber-500",
  danger: "bg-red-500",
};

/** Vertical activity / audit timeline — RTL-aware. */
export function Timeline({ items, emptyLabel = "رویدادی ثبت نشده" }: { items: TimelineItem[]; emptyLabel?: string }) {
  if (!items.length) {
    return <p className="py-6 text-center text-sm text-[var(--muted)]">{emptyLabel}</p>;
  }

  return (
    <ol className="relative space-y-0 border-s border-[var(--border)] ps-6" aria-label="Timeline">
      {items.map((item, idx) => (
        <li key={item.id} className={cn("relative pb-6", idx === items.length - 1 && "pb-0")}>
          <span
            className={cn(
              "absolute -start-[25px] top-1.5 h-3 w-3 rounded-full ring-4 ring-[var(--surface)]",
              toneDot[item.tone ?? "default"]
            )}
            aria-hidden
          />
          <div className="rounded-xl border border-[var(--border)] bg-[var(--surface-muted)]/40 px-4 py-3">
            <div className="flex flex-wrap items-start justify-between gap-2">
              <p className="font-medium text-secondary">{item.title}</p>
              <time className="text-xs text-[var(--muted)]" dateTime={item.timestamp}>
                {new Date(item.timestamp).toLocaleString("fa-IR")}
              </time>
            </div>
            {item.subtitle ? <p className="mt-1 text-sm text-[var(--muted)]">{item.subtitle}</p> : null}
            {item.meta ? <p className="mt-1 text-xs text-[var(--muted)]">{item.meta}</p> : null}
          </div>
        </li>
      ))}
    </ol>
  );
}
