"use client";

import { useAgentActivity } from "@/lib/api/agents";
import type { PaperclipAgent } from "@/lib/api/agents";
import { Bot } from "lucide-react";

/* ── Status dot colors ───────────────────────────────────────── */

const STATUS_DOT: Record<string, string> = {
  active: "bg-emerald-500 shadow-[0_0_6px_rgba(16,185,129,0.6)]",
  running: "bg-emerald-500 shadow-[0_0_6px_rgba(16,185,129,0.6)]",
  idle: "bg-gray-300",
  error: "bg-red-500",
};

const STATUS_LABEL: Record<string, string> = {
  active: "פעיל",
  running: "פעיל",
  idle: "ממתין",
  error: "שגיאה",
};

function statusDot(status: string) {
  return STATUS_DOT[status] ?? STATUS_DOT.idle;
}

/* ── Agent row ───────────────────────────────────────────────── */

function AgentRow({ agent }: { agent: PaperclipAgent }) {
  return (
    <div className="flex items-center gap-2 py-1">
      <span
        className={`w-2 h-2 rounded-full flex-shrink-0 ${statusDot(agent.status)}`}
      />
      <span className="text-xs text-ink truncate">{agent.name}</span>
      <span className="text-[10px] text-ink-faint mr-auto">
        {STATUS_LABEL[agent.status] ?? agent.status}
      </span>
    </div>
  );
}

/* ── Widget ───────────────────────────────────────────────────── */

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

  // Don't render if no Paperclip project yet
  if (!data?.issues?.length) return null;

  const agents = data.agents ?? [];
  const activeCount = agents.filter((a) => a.status === "active" || a.status === "running").length;

  return (
    <div className="space-y-2">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-1.5 text-xs font-medium text-navy">
          <Bot className="w-3.5 h-3.5" />
          <span>סוכנים</span>
        </div>
        {agents.length > 0 && (
          <span className="text-[10px] text-ink-faint">
            {activeCount} פעילים מתוך {agents.length}
          </span>
        )}
      </div>

      <div className="space-y-0.5">
        {agents.map((agent) => (
          <AgentRow key={agent.id} agent={agent} />
        ))}
      </div>
    </div>
  );
}