import { describe, it, expect, vi } from "vitest";
import userEvent from "@testing-library/user-event";
import { renderWithMantine, screen } from "../../../test/renderWithMantine";
import { TaskControls } from "./TaskControls";

const baseProps = {
  searchText: "",
  onSearchChange: vi.fn(),
  onStatusFilterChange: vi.fn(),
  onRefresh: vi.fn(),
};

describe("TaskControls", () => {
  it("renders the title and refresh button", () => {
    renderWithMantine(<TaskControls {...baseProps} />);
    expect(screen.getByText("Tasks")).toBeInTheDocument();
    expect(screen.getByRole("button", { name: "Refresh" })).toBeInTheDocument();
  });

  it("invokes onRefresh when Refresh is clicked", async () => {
    const user = userEvent.setup();
    const onRefresh = vi.fn();
    renderWithMantine(<TaskControls {...baseProps} onRefresh={onRefresh} />);
    await user.click(screen.getByRole("button", { name: "Refresh" }));
    expect(onRefresh).toHaveBeenCalledTimes(1);
  });

  it("invokes onSearchChange when typing", async () => {
    const user = userEvent.setup();
    const onSearchChange = vi.fn();
    renderWithMantine(
      <TaskControls {...baseProps} onSearchChange={onSearchChange} />,
    );
    await user.type(screen.getByPlaceholderText("Search..."), "x");
    expect(onSearchChange).toHaveBeenCalledWith("x");
  });

  it("clears the search input when the Clear button is clicked", async () => {
    const user = userEvent.setup();
    const onSearchChange = vi.fn();
    renderWithMantine(
      <TaskControls
        {...baseProps}
        searchText="abc"
        onSearchChange={onSearchChange}
      />,
    );
    await user.click(screen.getByRole("button", { name: "Clear" }));
    expect(onSearchChange).toHaveBeenCalledWith("");
  });

  it("displays the active status filter", () => {
    renderWithMantine(<TaskControls {...baseProps} statusFilter="working" />);
    const inputs = screen.getAllByDisplayValue("working");
    expect(inputs.length).toBeGreaterThan(0);
  });

  it("invokes onStatusFilterChange with the picked status", async () => {
    const user = userEvent.setup();
    const onStatusFilterChange = vi.fn();
    renderWithMantine(
      <TaskControls
        {...baseProps}
        onStatusFilterChange={onStatusFilterChange}
      />,
    );
    // Open the Select and choose a real status — the truthy branch of
    // `value && STATUS_OPTIONS.includes(value)` passes it straight through.
    await user.click(screen.getByPlaceholderText("All statuses"));
    await user.click(await screen.findByText("completed"));
    expect(onStatusFilterChange).toHaveBeenCalledWith("completed");
  });

  it("invokes onStatusFilterChange with undefined when cleared", async () => {
    const user = userEvent.setup();
    const onStatusFilterChange = vi.fn();
    const { container } = renderWithMantine(
      <TaskControls
        {...baseProps}
        statusFilter="working"
        onStatusFilterChange={onStatusFilterChange}
      />,
    );
    const clearButton = container.querySelector(
      "button.mantine-InputClearButton-root",
    ) as HTMLButtonElement | null;
    expect(clearButton).not.toBeNull();
    await user.click(clearButton!);
    expect(onStatusFilterChange).toHaveBeenCalledWith(undefined);
  });
});