import { describe, it, expect, vi } from "vitest";
import { render, screen } from "@testing-library/react";
import { SearchResults } from "../SearchResults";
import type { SearchResult } from "../types";

const mockResults: SearchResult[] = [
  {
    id: "1",
    workspaceId: "ws-1",
    slug: "test-entry",
    title: "Test Entry",
    content: "This is test content",
    contentHtml: "<p>This is test content</p>",
    summary: "Test summary",
    status: "ACTIVE",
    visibility: "WORKSPACE",
    createdAt: new Date("2026-01-01"),
    updatedAt: new Date("2026-01-02"),
    createdBy: "user-1",
    updatedBy: "user-1",
    rank: 0.85,
    headline: "This is <mark>test</mark> content",
    tags: [
      { id: "tag-1", name: "Testing", slug: "testing", color: "#3b82f6" },
      { id: "tag-2", name: "Documentation", slug: "docs", color: "#10b981" },
    ],
  },
  {
    id: "2",
    workspaceId: "ws-1",
    slug: "another-entry",
    title: "Another Entry",
    content: "Different content here",
    contentHtml: "<p>Different content here</p>",
    summary: null,
    status: "ACTIVE",
    visibility: "WORKSPACE",
    createdAt: new Date("2026-01-03"),
    updatedAt: new Date("2026-01-04"),
    createdBy: "user-1",
    updatedBy: "user-1",
    rank: 0.72,
    headline: "Different <mark>content</mark> here",
    tags: [],
  },
];

describe("SearchResults", () => {
  it("should render search results", () => {
    render(
      <SearchResults
        results={mockResults}
        query="test"
        totalResults={2}
        isLoading={false}
        onFilterChange={vi.fn()}
      />
    );

    expect(screen.getByText("Test Entry")).toBeInTheDocument();
    expect(screen.getByText("Another Entry")).toBeInTheDocument();
  });

  it("should display result count", () => {
    render(
      <SearchResults
        results={mockResults}
        query="test"
        totalResults={2}
        isLoading={false}
        onFilterChange={vi.fn()}
      />
    );

    expect(screen.getByText(/2 results/i)).toBeInTheDocument();
  });

  it("should display query text", () => {
    render(
      <SearchResults
        results={mockResults}
        query="test query"
        totalResults={2}
        isLoading={false}
        onFilterChange={vi.fn()}
      />
    );

    expect(screen.getByText(/test query/i)).toBeInTheDocument();
  });

  it("should render highlighted snippets", () => {
    render(
      <SearchResults
        results={mockResults}
        query="test"
        totalResults={2}
        isLoading={false}
        onFilterChange={vi.fn()}
      />
    );

    // Should render mark tags for highlighting
    const marks = screen.getAllByText("test");
    expect(marks.length).toBeGreaterThan(0);
  });

  it("should render tags for results with tags", () => {
    render(
      <SearchResults
        results={mockResults}
        query="test"
        totalResults={2}
        isLoading={false}
        onFilterChange={vi.fn()}
      />
    );

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

  it("should show loading state", () => {
    render(
      <SearchResults
        results={[]}
        query="test"
        totalResults={0}
        isLoading={true}
        onFilterChange={vi.fn()}
      />
    );

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

  it("should show no results state when results are empty", () => {
    render(
      <SearchResults
        results={[]}
        query="nonexistent"
        totalResults={0}
        isLoading={false}
        onFilterChange={vi.fn()}
      />
    );

    expect(screen.getByText(/no results found/i)).toBeInTheDocument();
  });

  it("should display helpful suggestions in no results state", () => {
    render(
      <SearchResults
        results={[]}
        query="test"
        totalResults={0}
        isLoading={false}
        onFilterChange={vi.fn()}
      />
    );

    // Should show PDA-friendly suggestions (not demanding)
    expect(screen.getByText(/try different keywords/i)).toBeInTheDocument();
  });

  it("should render filter sidebar", () => {
    render(
      <SearchResults
        results={mockResults}
        query="test"
        totalResults={2}
        isLoading={false}
        onFilterChange={vi.fn()}
      />
    );

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

  it("should show result status indicators", () => {
    render(
      <SearchResults
        results={mockResults}
        query="test"
        totalResults={2}
        isLoading={false}
        onFilterChange={vi.fn()}
      />
    );

    // Should show visual indicators (🟢 for ACTIVE)
    const indicators = screen.getAllByText("🟢");
    expect(indicators.length).toBeGreaterThan(0);
  });
});
