import { fireEvent } from "@testing-library/react";
import { describe, expect, it, vi } from "bun:test";
import { createElement } from "react";

import { FilterToolbar } from "../../src/web/shared/components/FilterToolbar";
import { renderWithProviders } from "./test-utils";

describe("FilterToolbar", () => {
  it("renders filter Select with placeholder", () => {
    const { getByText } = renderWithProviders(
      createElement(FilterToolbar, {
        filters: [
          {
            key: "status",
            label: "状态",
            onChange: () => {},
            options: [
              { label: "进行中", value: "active" },
              { label: "已归档", value: "archived" },
            ],
            placeholder: "选择状态",
          },
        ],
      }),
    );
    expect(getByText("选择状态")).toBeTruthy();
  });

  it("renders search input with placeholder", () => {
    const { getByPlaceholderText } = renderWithProviders(
      createElement(FilterToolbar, {
        search: {
          onReset: () => {},
          onSearch: () => {},
          placeholder: "搜索名称",
        },
      }),
    );
    expect(getByPlaceholderText("搜索名称")).toBeTruthy();
  });

  it("renders reset button", () => {
    const { container } = renderWithProviders(
      createElement(FilterToolbar, {
        search: {
          onReset: () => {},
          onSearch: () => {},
          placeholder: "搜索",
        },
      }),
    );
    const resetBtn = container.querySelector('button[title="重置"]');
    expect(resetBtn).toBeTruthy();
  });

  it("renders action buttons", () => {
    const { container } = renderWithProviders(
      createElement(FilterToolbar, {
        actions: createElement("button", null, "新建项目"),
        search: {
          onReset: () => {},
          onSearch: () => {},
          placeholder: "搜索",
        },
      }),
    );
    const buttons = container.querySelectorAll("button");
    const hasAction = Array.from(buttons).some((btn) => btn.textContent?.includes("新建项目"));
    expect(hasAction).toBe(true);
  });

  it("calls onSearch when search entered after typing", () => {
    const onSearch = vi.fn();
    const onReset = vi.fn();
    const { getByPlaceholderText } = renderWithProviders(
      createElement(FilterToolbar, {
        search: {
          keyword: "",
          onReset,
          onSearch,
          placeholder: "搜索名称",
        },
      }),
    );
    const input = getByPlaceholderText("搜索名称");
    fireEvent.change(input, { target: { value: "test" } });
    fireEvent.keyDown(input, { key: "Enter" });
    expect(onSearch).toHaveBeenCalledWith("test");
  });

  it("calls onReset when reset button clicked", () => {
    const onReset = vi.fn();
    const { container } = renderWithProviders(
      createElement(FilterToolbar, {
        search: {
          onReset,
          onSearch: () => {},
          placeholder: "搜索",
        },
      }),
    );
    const resetBtn = container.querySelector<HTMLButtonElement>('button[title="重置"]');
    resetBtn?.click();
    expect(onReset).toHaveBeenCalled();
  });
});