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

describe("DomainFilter", (): void => {
  const mockDomains: Domain[] = [
    {
      id: "domain-1",
      workspaceId: "workspace-1",
      name: "Work",
      slug: "work",
      description: "Work-related tasks",
      color: "#3B82F6",
      icon: "💼",
      sortOrder: 0,
      metadata: {},
      createdAt: new Date("2026-01-28"),
      updatedAt: new Date("2026-01-28"),
    },
    {
      id: "domain-2",
      workspaceId: "workspace-1",
      name: "Personal",
      slug: "personal",
      description: null,
      color: "#10B981",
      icon: "🏠",
      sortOrder: 1,
      metadata: {},
      createdAt: new Date("2026-01-28"),
      updatedAt: new Date("2026-01-28"),
    },
  ];

  it("should render All button", (): void => {
    const onFilterChange = vi.fn();
    render(
      <DomainFilter domains={mockDomains} selectedDomain={null} onFilterChange={onFilterChange} />
    );
    expect(screen.getByRole("button", { name: /all/i })).toBeInTheDocument();
  });

  it("should render domain filter buttons", (): void => {
    const onFilterChange = vi.fn();
    render(
      <DomainFilter domains={mockDomains} selectedDomain={null} onFilterChange={onFilterChange} />
    );
    expect(screen.getByRole("button", { name: /filter by work/i })).toBeInTheDocument();
    expect(screen.getByRole("button", { name: /filter by personal/i })).toBeInTheDocument();
  });

  it("should highlight All when no domain selected", (): void => {
    const onFilterChange = vi.fn();
    render(
      <DomainFilter domains={mockDomains} selectedDomain={null} onFilterChange={onFilterChange} />
    );
    const allButton = screen.getByRole("button", { name: /all/i });
    expect(allButton.getAttribute("aria-pressed")).toBe("true");
  });

  it("should highlight selected domain", (): void => {
    const onFilterChange = vi.fn();
    render(
      <DomainFilter
        domains={mockDomains}
        selectedDomain="domain-1"
        onFilterChange={onFilterChange}
      />
    );
    const workButton = screen.getByRole("button", { name: /filter by work/i });
    expect(workButton.getAttribute("aria-pressed")).toBe("true");
  });

  it("should call onFilterChange when All clicked", async (): Promise<void> => {
    const user = userEvent.setup();
    const onFilterChange = vi.fn();

    render(
      <DomainFilter
        domains={mockDomains}
        selectedDomain="domain-1"
        onFilterChange={onFilterChange}
      />
    );

    const allButton = screen.getByRole("button", { name: /all/i });
    await user.click(allButton);

    expect(onFilterChange).toHaveBeenCalledWith(null);
  });

  it("should call onFilterChange when domain clicked", async (): Promise<void> => {
    const user = userEvent.setup();
    const onFilterChange = vi.fn();

    render(
      <DomainFilter domains={mockDomains} selectedDomain={null} onFilterChange={onFilterChange} />
    );

    const workButton = screen.getByRole("button", { name: /filter by work/i });
    await user.click(workButton);

    expect(onFilterChange).toHaveBeenCalledWith("domain-1");
  });

  it("should display domain icons", (): void => {
    const onFilterChange = vi.fn();
    render(
      <DomainFilter domains={mockDomains} selectedDomain={null} onFilterChange={onFilterChange} />
    );
    expect(screen.getByText("💼")).toBeInTheDocument();
    expect(screen.getByText("🏠")).toBeInTheDocument();
  });
});
