import { clsx } from "clsx";
import type { ActivityEvent as ActivityEventType } from "@/lib/types";
import { ContentTypeIcon } from "./content-type-icon";

const verbLabels: Record<string, string> = {
  learned: "Learned",
  observed: "Observed",
  saved: "Saved",
  updated: "Updated",
  shared: "Shared",
  used: "Used",
  // Legacy verbs mapped to new vocabulary
  stored: "Saved",
  referenced: "Used",
  contributed: "Shared",
  archived: "Archived",
  resolved: "Resolved",
  deleted: "Deleted",
};

function formatTimestamp(ts: string): string {
  const date = new Date(ts);
  return date.toLocaleTimeString("en-US", {
    hour: "numeric",
    minute: "2-digit",
    hour12: true,
  });
}

function ActorAvatar({ name }: { name: string }) {
  const initials = name
    .split(" ")
    .map((w) => w[0])
    .join("")
    .slice(0, 2)
    .toUpperCase();

  return (
    <div className="w-7 h-7 rounded-lg bg-surface-elevated border border-border flex items-center justify-center text-[10px] font-semibold text-text-secondary shrink-0">
      {initials}
    </div>
  );
}

export function ActivityEventRow({
  event,
  className,
}: {
  event: ActivityEventType;
  className?: string;
}) {
  const verb = verbLabels[event.verb] || event.verb;

  return (
    <div className={clsx("flex items-start gap-3 py-3", className)}>
      <span className="text-[11px] text-text-muted w-16 shrink-0 pt-1 text-right">
        {formatTimestamp(event.timestamp)}
      </span>
      <ActorAvatar name={event.actor.name} />
      <div className="min-w-0 flex-1">
        <p className="text-sm text-text-primary leading-snug">
          <span className="font-medium">{event.actor.name}</span>{" "}
          <span className="text-text-secondary">{verb.toLowerCase()}</span>
        </p>
        {event.target && (
          <div className="flex items-center gap-2 mt-1">
            <ContentTypeIcon type={event.target.type} size={12} />
            <span className="text-sm text-text-primary truncate">
              &ldquo;{event.target.title}&rdquo;
            </span>
          </div>
        )}
        <p className="text-xs text-text-muted mt-0.5">
          {event.location.type === "vault" ? "in" : "from"} {event.location.name}
        </p>
      </div>
    </div>
  );
}