import { describe, it, expect, vi, beforeEach } from "vitest";
import { render, screen, fireEvent } from "@testing-library/react";
import { AgentList } from "./AgentList";
import { useConfigStore } from "@/store/configStore";

// Mock the store
vi.mock("@/store/configStore", () => ({
  useConfigStore: vi.fn(),
}));

describe("AgentList", () => {
  const mockAgents = [
    {
      id: "agent1",
      display_name: "Test Agent 1",
      role: "Test role 1",
      tools: ["calculator", "file"],
      instructions: ["instruction1"],
      rooms: ["lobby", "dev"],
    },
    {
      id: "agent2",
      display_name: "Test Agent 2",
      role: "Test role 2",
      tools: [],
      instructions: [],
      rooms: ["lobby"],
    },
  ];

  const mockSelectAgent = vi.fn();
  const mockCreateAgent = vi.fn();

  beforeEach(() => {
    vi.clearAllMocks();
    (useConfigStore as any).mockReturnValue({
      agents: mockAgents,
      selectedAgentId: null,
      selectAgent: mockSelectAgent,
      createAgent: mockCreateAgent,
    });
  });

  it("should render all agents", () => {
    render(<AgentList />);

    expect(screen.getByText("Test Agent 1")).toBeInTheDocument();
    expect(screen.getByText("Test Agent 2")).toBeInTheDocument();
    expect(screen.getByText("2 tools")).toBeInTheDocument();
    expect(screen.getByText("2 rooms")).toBeInTheDocument();
    expect(screen.getByText("0 tools")).toBeInTheDocument();
    expect(screen.getByText("1 room")).toBeInTheDocument();
  });

  it("should highlight selected agent", () => {
    (useConfigStore as any).mockReturnValue({
      agents: mockAgents,
      selectedAgentId: "agent1",
      selectAgent: mockSelectAgent,
      createAgent: mockCreateAgent,
    });

    render(<AgentList />);

    const selectedAgent = screen
      .getByText("Test Agent 1")
      .closest('div[role="button"]');
    expect(selectedAgent).toHaveClass("ring-2", "ring-orange-500");
  });

  it("should call selectAgent when clicking an agent", () => {
    render(<AgentList />);

    const agent2Button = screen
      .getByText("Test Agent 2")
      .closest('div[role="button"]');
    fireEvent.click(agent2Button!);

    expect(mockSelectAgent).toHaveBeenCalledWith("agent2");
  });

  it("should show creation form when clicking add button", () => {
    render(<AgentList />);

    const addButton = screen.getByText("Add");
    fireEvent.click(addButton);

    // Should show the inline form with input field
    const input = screen.getByPlaceholderText("Agent name...");
    expect(input).toBeInTheDocument();

    // Type a name and submit
    fireEvent.change(input, { target: { value: "Test Agent" } });

    // Find and click the create button in the form
    const createButton = screen.getByTestId("form-create-button");
    fireEvent.click(createButton);

    expect(mockCreateAgent).toHaveBeenCalled();
  });

  it("should render add button when no agents", () => {
    (useConfigStore as any).mockReturnValue({
      agents: [],
      selectedAgentId: null,
      selectAgent: mockSelectAgent,
      createAgent: mockCreateAgent,
    });

    render(<AgentList />);

    // Should still show the Add button even with no agents
    expect(screen.getByText("Add")).toBeInTheDocument();
  });
});
