"use client";

import { CheckCircle2, Circle, Loader2, XCircle } from "lucide-react";
import type { AgentStatus } from "@/hooks/use-pipeline-progress";

const AGENT_LABELS: Record<string, string> = {
  "trend-scout": "Trend Scout",
  "marketing-research-agent": "Research Agent",
  "script-writer": "Script Writer",
  "ad-creative-designer": "Ad Creative Designer",
  "video-ad-producer": "Video Ad Producer",
  "copywriter-agent": "Copywriter",
  "distribution-agent": "Distribution Agent",
};

function formatDuration(ms?: number) {
  if (!ms) return "";
  if (ms < 1000) return `${ms}ms`;
  if (ms < 60000) return `${Math.round(ms / 1000)}s`;
  return `${Math.round(ms / 60000)}m ${Math.round((ms % 60000) / 1000)}s`;
}

function StatusIcon({ status }: { status: AgentStatus["status"] }) {
  switch (status) {
    case "completed":
      return <CheckCircle2 className="h-5 w-5 text-green-500" />;
    case "running":
      return <Loader2 className="h-5 w-5 animate-spin text-blue-500" />;
    case "failed":
      return <XCircle className="h-5 w-5 text-red-500" />;
    default:
      return <Circle className="h-5 w-5 text-muted-foreground" />;
  }
}

export function PipelineProgress({ agents }: { agents: AgentStatus[] }) {
  return (
    <div className="space-y-3">
      {agents.map((agent) => (
        <div
          key={agent.agentName}
          className="flex items-center gap-3 rounded-lg border p-3"
        >
          <StatusIcon status={agent.status} />
          <div className="flex-1">
            <div className="font-medium">
              {AGENT_LABELS[agent.agentName] || agent.agentName}
            </div>
            {agent.outputSummary && (
              <p className="text-sm text-muted-foreground line-clamp-1">
                {agent.outputSummary}
              </p>
            )}
            {agent.error && (
              <p className="text-sm text-red-500 line-clamp-1">{agent.error}</p>
            )}
          </div>
          {agent.durationMs && (
            <span className="text-sm text-muted-foreground">
              {formatDuration(agent.durationMs)}
            </span>
          )}
        </div>
      ))}
    </div>
  );
}