legal-ai/web-ui/src/components/cases/agent-activity-preview.tsx

"use client";

import Link from "next/link";
import { Loader2, CheckCircle2, Clock } from "lucide-react";
import { useAgentActivity } from "@/lib/api/agents";
import type { PaperclipIssue } from "@/lib/api/agents";
import { formatRelative } from "@/lib/format-date";

const STATUS_DOT: Record<string, string> = {
  in_progress: "bg-gold",
  todo: "bg-rule",
  backlog: "bg-rule",
  done: "bg-success",
  cancelled: "bg-ink-muted/40",
};

const STATUS_LABEL: Record<string, string> = {
  in_progress: "בביצוע",
  todo: "לביצוע",
  backlog: "ממתין",
  done: "הושלם",
  cancelled: "בוטל",
};

function timeAgo(iso: string | null): string {
  return formatRelative(iso, { units: "tight", fallback: "—" });
}

function IssueRow({ issue }: { issue: PaperclipIssue }) {
  const dot = STATUS_DOT[issue.status] ?? "bg-rule";
  const lbl = STATUS_LABEL[issue.status] ?? issue.status;
  const isDone = issue.status === "done";

  return (
    <div className="flex items-start gap-3 py-3 border-b border-rule-soft last:border-0">
      <span
        className={`mt-1.5 w-2 h-2 rounded-full flex-none ${dot} ${issue.status === "in_progress" ? "animate-pulse" : ""}`}
      />
      <div className="flex-1 min-w-0">
        <p className={`text-[0.88rem] font-medium leading-snug ${isDone ? "text-ink-muted line-through" : "text-navy"}`}>
          {issue.title}
        </p>
        <p className="text-[0.75rem] text-ink-muted mt-0.5">
          {issue.assignee_name ?? lbl}
        </p>
      </div>
      <div className="flex-none flex flex-col items-end gap-1">
        {isDone ? (
          <CheckCircle2 className="w-3.5 h-3.5 text-success mt-0.5" />
        ) : issue.status === "in_progress" ? (
          <Loader2 className="w-3.5 h-3.5 text-gold animate-spin mt-0.5" />
        ) : (
          <Clock className="w-3.5 h-3.5 text-ink-muted mt-0.5" />
        )}
        <span className="text-[0.72rem] text-ink-muted tabular-nums">
          {timeAgo(issue.completed_at ?? issue.started_at ?? issue.created_at)}
        </span>
      </div>
    </div>
  );
}

export function AgentActivityPreview({
  caseNumber,
}: {
  caseNumber: string;
}) {
  const { data, isLoading } = useAgentActivity(caseNumber);

  const issues = [...(data?.issues ?? [])]
    .sort((a, b) => {
      const ta = a.started_at ?? a.created_at ?? "";
      const tb = b.started_at ?? b.created_at ?? "";
      return tb.localeCompare(ta);
    })
    .slice(0, 4);

  return (
    <div className="rounded-lg border border-rule bg-surface shadow-sm overflow-hidden">
      <div className="px-5 py-3.5 border-b border-rule-soft bg-parchment flex items-center justify-between">
        <span className="text-[0.92rem] font-semibold text-navy">פעילות סוכנים</span>
        <Link
          href={`/cases/${caseNumber}#agents`}
          className="text-[0.78rem] font-semibold text-gold-deep hover:underline"
        >
          כל הפעילות →
        </Link>
      </div>
      <div className="px-5">
        {isLoading ? (
          <div className="flex items-center justify-center py-8 text-ink-muted gap-2">
            <Loader2 className="w-4 h-4 animate-spin" />
            <span className="text-sm">טוען...</span>
          </div>
        ) : issues.length === 0 ? (
          <p className="py-8 text-center text-sm text-ink-muted">
            אין פעילות סוכנים עדיין
          </p>
        ) : (
          issues.map((issue) => <IssueRow key={issue.id} issue={issue} />)
        )}
      </div>
    </div>
  );
}