"use client";

import { Bot, Terminal, CheckCircle2, AlertCircle, Loader2 } from "lucide-react";
import type { AgentStatus } from "@/lib/types";

interface StatusIndicatorProps {
  status: AgentStatus;
  toolName?: string;
  agentDisplayName: string;
}

const toolDisplayNames: Record<string, string> = {
  Bash: "Running command",
  Read: "Reading file",
  Edit: "Editing file",
  Write: "Writing file",
  Glob: "Searching files",
  Grep: "Searching content",
  WebFetch: "Fetching URL",
  WebSearch: "Searching web",
  Agent: "Delegating to subagent",
  ToolSearch: "Loading tool",
  mcp__one__reply: "Sending reply",
};

function getToolLabel(toolName?: string): string {
  if (!toolName) return "Using tool";
  if (toolDisplayNames[toolName]) return toolDisplayNames[toolName];
  if (toolName.startsWith("mcp__")) {
    const parts = toolName.split("__");
    return `${parts[1]}: ${parts.slice(2).join(" ")}`;
  }
  return toolName;
}

export function StatusIndicator({ status, toolName, agentDisplayName }: StatusIndicatorProps) {
  if (status === "idle") return null;

  return (
    <div className="flex items-center gap-3 px-4 py-3">
      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-blue-50 dark:bg-blue-950/30">
        {status === "thinking" && (
          <Loader2 size={14} className="animate-spin text-blue-500" />
        )}
        {status === "tool_use" && (
          <Terminal size={14} className="text-amber-500" />
        )}
        {status === "tool_done" && (
          <CheckCircle2 size={14} className="text-green-500" />
        )}
        {status === "tool_error" && (
          <AlertCircle size={14} className="text-red-500" />
        )}
      </div>
      <div className="min-w-0 flex-1">
        {status === "thinking" && (
          <div className="flex items-center gap-2">
            <span className="text-xs text-zinc-500 dark:text-zinc-400">
              {agentDisplayName} is thinking
            </span>
            <span className="flex gap-0.5">
              <span className="h-1 w-1 animate-bounce rounded-full bg-zinc-400 dark:bg-zinc-500" style={{ animationDelay: "0ms" }} />
              <span className="h-1 w-1 animate-bounce rounded-full bg-zinc-400 dark:bg-zinc-500" style={{ animationDelay: "150ms" }} />
              <span className="h-1 w-1 animate-bounce rounded-full bg-zinc-400 dark:bg-zinc-500" style={{ animationDelay: "300ms" }} />
            </span>
          </div>
        )}
        {status === "tool_use" && (
          <div className="flex items-center gap-1.5">
            <span className="text-xs font-medium text-amber-600 dark:text-amber-400">
              {getToolLabel(toolName)}
            </span>
            <Loader2 size={10} className="animate-spin text-amber-400" />
          </div>
        )}
        {status === "tool_done" && (
          <span className="text-xs text-green-600 dark:text-green-400">
            Done: {getToolLabel(toolName)}
          </span>
        )}
        {status === "tool_error" && (
          <span className="text-xs text-red-600 dark:text-red-400">
            Error: {getToolLabel(toolName)}
          </span>
        )}
      </div>
    </div>
  );
}
