import type { SourceHistoryItem } from "@dci/core";
import { ExternalLink } from "lucide-react";
import type { ReactNode } from "react";
import { fmtDate, fmtValue } from "@/lib/format";
import { SOURCE_KIND_LABEL } from "@/lib/labels";
import { cn } from "./cn";

export interface TimelineEntry {
  date: string;
  title: ReactNode;
  description?: ReactNode;
  meta?: ReactNode;
  href?: string | null;
  tone?: "neutral" | "accent" | "ok" | "warn" | "danger";
}

const toneDot: Record<NonNullable<TimelineEntry["tone"]>, string> = {
  neutral: "bg-ink-4",
  accent: "bg-accent",
  ok: "bg-ok",
  warn: "bg-warn",
  danger: "bg-danger",
};

/** Vertical timeline with hairline rail; dates in mono. */
export function TimelineList({ items, className, dense }: { items: TimelineEntry[]; className?: string; dense?: boolean }) {
  return (
    <ol className={cn("relative ml-1.5 border-l border-hair", className)}>
      {items.map((it, i) => (
        <li key={i} className={cn("relative pl-4", dense ? "pb-2.5" : "pb-4", "last:pb-0")}>
          <span aria-hidden className={cn("absolute -left-[4.5px] top-[6px] size-2 rounded-full ring-2 ring-surface", toneDot[it.tone ?? "neutral"])} />
          <div className="flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
            <time className="figure text-[11.5px] text-ink-3" dateTime={it.date}>
              {fmtDate(it.date)}
            </time>
            <span className="min-w-0 break-words text-[13px] font-medium text-ink">{it.title}</span>
          </div>
          {it.description && <div className="mt-0.5 text-[12.5px] text-ink-2">{it.description}</div>}
          {(it.meta || it.href) && (
            <div className="mt-0.5 flex flex-wrap items-center gap-x-2 text-[11.5px] text-ink-3">
              {it.meta}
              {it.href && (
                <a href={it.href} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1 hover:text-accent">
                  source <ExternalLink className="size-3" />
                </a>
              )}
            </div>
          )}
        </li>
      ))}
    </ol>
  );
}

/** Adapter for SourceHistoryItem[] (entity pages). */
export function SourceHistory({ items, className }: { items: SourceHistoryItem[]; className?: string }) {
  const entries: TimelineEntry[] = items.map((s) => ({
    date: s.date,
    title: prettyDescription(s.description),
    meta: (
      <span>
        {s.sourceName} · {SOURCE_KIND_LABEL[s.sourceKind]} · {s.kind}
      </span>
    ),
    href: s.url,
    tone: s.kind === "changed" ? "accent" : s.kind === "verified" ? "ok" : "neutral",
  }));
  return <TimelineList items={entries} className={className} dense />;
}

/** "field observed: {json}" → "field observed: human value" (structured payloads are otherwise one unbreakable token). */
function prettyDescription(d: string): string {
  const m = /^(.*?:\s*)([[{].*[\]}])\s*$/s.exec(d);
  if (!m) return d;
  try {
    return `${m[1]}${fmtValue(JSON.parse(m[2]!))}`;
  } catch {
    return d;
  }
}