import { describe, it, expect, vi } from "vitest";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { SearchFilters } from "../SearchFilters";

describe("SearchFilters", () => {
  const mockTags = [
    { id: "tag-1", name: "Testing", slug: "testing", color: "#3b82f6" },
    { id: "tag-2", name: "Documentation", slug: "docs", color: "#10b981" },
    { id: "tag-3", name: "Development", slug: "dev", color: "#f59e0b" },
  ];

  it("should render status filter section", () => {
    render(<SearchFilters availableTags={[]} selectedTags={[]} onFilterChange={vi.fn()} />);

    expect(screen.getByText(/status/i)).toBeInTheDocument();
  });

  it("should render tags filter section", () => {
    render(<SearchFilters availableTags={mockTags} selectedTags={[]} onFilterChange={vi.fn()} />);

    expect(screen.getByText(/tags/i)).toBeInTheDocument();
  });

  it("should display all available tags", () => {
    render(<SearchFilters availableTags={mockTags} selectedTags={[]} onFilterChange={vi.fn()} />);

    expect(screen.getByText("Testing")).toBeInTheDocument();
    expect(screen.getByText("Documentation")).toBeInTheDocument();
    expect(screen.getByText("Development")).toBeInTheDocument();
  });

  it("should call onFilterChange when status is selected", async () => {
    const onFilterChange = vi.fn();
    render(<SearchFilters availableTags={[]} selectedTags={[]} onFilterChange={onFilterChange} />);

    const activeFilter = screen.getByText("Active");
    await userEvent.click(activeFilter);

    expect(onFilterChange).toHaveBeenCalledWith({ status: "ACTIVE", tags: [] });
  });

  it("should call onFilterChange when tag is selected", async () => {
    const onFilterChange = vi.fn();
    render(
      <SearchFilters availableTags={mockTags} selectedTags={[]} onFilterChange={onFilterChange} />
    );

    const testingTag = screen.getByText("Testing");
    await userEvent.click(testingTag);

    expect(onFilterChange).toHaveBeenCalledWith({ tags: ["testing"] });
  });

  it("should show selected tags as checked", () => {
    render(
      <SearchFilters
        availableTags={mockTags}
        selectedTags={["testing", "docs"]}
        onFilterChange={vi.fn()}
      />
    );

    // Check for visual indication of selected state
    const testingTag = screen.getByText("Testing").closest("button");
    const docsTag = screen.getByText("Documentation").closest("button");

    expect(testingTag).toHaveClass(/selected|active|checked/i);
    expect(docsTag).toHaveClass(/selected|active|checked/i);
  });

  it("should allow multiple tag selection", async () => {
    const onFilterChange = vi.fn();
    render(
      <SearchFilters
        availableTags={mockTags}
        selectedTags={["testing"]}
        onFilterChange={onFilterChange}
      />
    );

    const docsTag = screen.getByText("Documentation");
    await userEvent.click(docsTag);

    expect(onFilterChange).toHaveBeenCalledWith({ tags: ["testing", "docs"] });
  });

  it("should allow deselecting tags", async () => {
    const onFilterChange = vi.fn();
    render(
      <SearchFilters
        availableTags={mockTags}
        selectedTags={["testing", "docs"]}
        onFilterChange={onFilterChange}
      />
    );

    const testingTag = screen.getByText("Testing");
    await userEvent.click(testingTag);

    expect(onFilterChange).toHaveBeenCalledWith({ tags: ["docs"] });
  });

  it("should display status options with PDA-friendly language", () => {
    render(<SearchFilters availableTags={[]} selectedTags={[]} onFilterChange={vi.fn()} />);

    // Should use visual indicators and friendly language
    expect(screen.getByText("🟢")).toBeInTheDocument();
    expect(screen.getByText("Active")).toBeInTheDocument();
    expect(screen.getByText("🔵")).toBeInTheDocument();
    expect(screen.getByText("Scheduled")).toBeInTheDocument();
    expect(screen.getByText("⏸️")).toBeInTheDocument();
    expect(screen.getByText("Paused")).toBeInTheDocument();

    // Should NOT use demanding language
    expect(screen.queryByText(/urgent/i)).not.toBeInTheDocument();
    expect(screen.queryByText(/overdue/i)).not.toBeInTheDocument();
  });

  it("should have clear filters button", () => {
    render(
      <SearchFilters
        availableTags={mockTags}
        selectedTags={["testing"]}
        selectedStatus="ACTIVE"
        onFilterChange={vi.fn()}
      />
    );

    expect(screen.getByText(/clear filters/i)).toBeInTheDocument();
  });

  it("should call onFilterChange with empty values when clear is clicked", async () => {
    const onFilterChange = vi.fn();
    render(
      <SearchFilters
        availableTags={mockTags}
        selectedTags={["testing"]}
        selectedStatus="ACTIVE"
        onFilterChange={onFilterChange}
      />
    );

    const clearButton = screen.getByText(/clear filters/i);
    await userEvent.click(clearButton);

    expect(onFilterChange).toHaveBeenCalledWith({ status: undefined, tags: [] });
  });

  it("should show count of selected filters", () => {
    render(
      <SearchFilters
        availableTags={mockTags}
        selectedTags={["testing", "docs"]}
        selectedStatus="ACTIVE"
        onFilterChange={vi.fn()}
      />
    );

    // Should show count of active filters (3 total: 1 status + 2 tags)
    expect(screen.getByText(/3/)).toBeInTheDocument();
  });
});
