import { Link } from "@tanstack/react-router";
import {
  CheckCircle2,
  CloudUpload,
  Ban,
  AlertTriangle,
  Clock3,
  MessageSquareText,
  MessageSquareReply,
  PencilLine,
  Sparkles,
  Upload,
  XCircle,
  Link2,
  type LucideIcon,
} from "lucide-react";
import type { ActivityEvent } from "@/lib/ledger-types";
import { relativeTime } from "@/lib/ledger-store";

const ICONS: Record<string, { icon: LucideIcon; className: string }> = {
  upload: { icon: Upload, className: "bg-muted text-muted-foreground" },
  duplicate: { icon: AlertTriangle, className: "bg-attention-soft text-attention" },
  "duplicate-cleared": { icon: CheckCircle2, className: "bg-success-soft text-success" },
  reminder: { icon: Clock3, className: "bg-primary-soft text-primary" },
  report: { icon: Sparkles, className: "bg-brand-soft text-brand" },
  processing: { icon: Sparkles, className: "bg-primary-soft text-primary" },
  ai: { icon: Sparkles, className: "bg-brand-soft text-brand" },
  approve: { icon: CheckCircle2, className: "bg-success-soft text-success" },
  reject: { icon: XCircle, className: "bg-destructive-soft text-destructive" },
  sync: { icon: CloudUpload, className: "bg-primary-soft text-primary" },
  "sync-failed": { icon: Ban, className: "bg-destructive-soft text-destructive" },
  query: { icon: MessageSquareText, className: "bg-attention-soft text-attention" },
  "query-reply": { icon: MessageSquareText, className: "bg-primary-soft text-primary" },
  "query-resolve": { icon: CheckCircle2, className: "bg-success-soft text-success" },
  "query-cancel": { icon: Ban, className: "bg-muted text-muted-foreground" },
  answer: { icon: MessageSquareReply, className: "bg-muted text-foreground" },
  edit: { icon: PencilLine, className: "bg-muted text-muted-foreground" },
  match: { icon: Link2, className: "bg-muted text-foreground" },
};

export function ActivityTimeline({
  events,
  showLinks = false,
  variant = "firm",
}: {
  events: ActivityEvent[];
  showLinks?: boolean;
  variant?: "firm" | "client";
}) {
  return (
    <ol className="relative space-y-1 px-5 py-4">
      <span className="absolute top-6 bottom-6 left-[31px] w-px bg-border" aria-hidden="true" />
      {events.map((e) => {
        const conf = ICONS[e.type] ?? ICONS.upload;
        const Icon = conf.icon;
        const docLink =
          variant === "client"
            ? ({ to: "/documents/$id" as const, params: { id: e.invoiceId! } })
            : ({ to: "/invoices/$id" as const, params: { id: e.invoiceId! } });
        return (
          <li key={e.id} className="relative flex gap-3 py-2.5">
            <span
              className={`relative z-10 flex size-7 shrink-0 items-center justify-center rounded-full ring-4 ring-surface ${conf.className}`}
            >
              <Icon size={14} aria-hidden="true" />
            </span>
            <div className="min-w-0 flex-1">
              <p className="text-[13.5px] leading-5 text-foreground">{e.text}</p>
              <p className="mt-0.5 flex flex-wrap items-center gap-x-2 text-[12px] text-muted-foreground">
                <span>{e.actor}</span>
                <span aria-hidden="true">·</span>
                <span>{relativeTime(e.at)}</span>
                {showLinks && e.invoiceId ? (
                  <>
                    <span aria-hidden="true">·</span>
                    <Link to={docLink.to} params={docLink.params} className="text-primary hover:underline">
                      View document
                    </Link>
                  </>
                ) : null}
                {showLinks && e.queryId ? (
                  <>
                    <span aria-hidden="true">·</span>
                    <Link
                      to="/queries/$id"
                      params={{ id: e.queryId }}
                      className="text-primary hover:underline"
                    >
                      View question
                    </Link>
                  </>
                ) : null}
              </p>
            </div>
          </li>
        );
      })}
    </ol>
  );
}