import { act } from "react";
import { createRoot, type Root } from "react-dom/client";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import {
  SearchResultsView,
  type SearchableFieldData,
} from "./SearchResultsView";

const results: SearchableFieldData[] = [
  {
    id: "layout",
    label: "Layout",
    description: "Choose how swatches are arranged.",
    tabId: "general",
    tabLabel: "General",
    requiresToggle: {
      settingKey: "enabled",
      toggleFieldId: "enabled-toggle",
      message: "Enable this feature first.",
    },
  },
  { id: "shape", label: "Shape", tabId: "general", tabLabel: "General" },
  { id: "tooltip", label: "Tooltip", tabId: "tooltips", tabLabel: "Tooltips" },
];

let root: Root | null = null;

beforeEach(() => {
  vi.useFakeTimers();
  const container = document.createElement("div");
  document.body.append(container);
  root = createRoot(container);
});

afterEach(() => {
  act(() => root?.unmount());
  root = null;
  document.body.innerHTML = "";
  vi.useRealTimers();
});

describe("SearchResultsView", () => {
  it("delays the live result summary until the region is mounted", () => {
    act(() => {
      root?.render(
        <SearchResultsView
          query="s"
          results={results}
          onSelectResult={vi.fn()}
          onClearSearch={vi.fn()}
        />,
      );
    });
    const status = document.querySelector('[role="status"]');
    expect(status?.textContent).toBe("");

    act(() => vi.advanceTimersByTime(60));
    expect(status?.textContent).toContain('3 settings match "s"');
  });

  it("exposes a named list and supports Arrow, Home, End, and Escape navigation", () => {
    const onReturnToSearch = vi.fn();
    act(() => {
      root?.render(
        <SearchResultsView
          query="s"
          results={results}
          onSelectResult={vi.fn()}
          onClearSearch={vi.fn()}
          onReturnToSearch={onReturnToSearch}
          isToggleEnabled={() => false}
        />,
      );
    });

    const list = document.querySelector('[role="list"]');
    const buttons = Array.from(
      document.querySelectorAll<HTMLButtonElement>(
        '[data-settings-search-result="true"]',
      ),
    );
    expect(list?.getAttribute("aria-label")).toBe('Search results for "s"');
    expect(buttons[0].getAttribute("aria-label")).toBe(
      "Open Layout in General",
    );
    const descriptionIds =
      buttons[0].getAttribute("aria-describedby")?.split(" ") ?? [];
    expect(descriptionIds).toHaveLength(2);
    expect(document.getElementById(descriptionIds[0])?.textContent).toBe(
      "Choose how swatches are arranged.",
    );
    expect(document.getElementById(descriptionIds[1])?.textContent).toBe(
      "Enable this feature first.",
    );

    buttons[0].focus();
    act(() =>
      buttons[0].dispatchEvent(
        new KeyboardEvent("keydown", { key: "End", bubbles: true }),
      ),
    );
    expect(document.activeElement).toBe(buttons[2]);

    act(() =>
      buttons[2].dispatchEvent(
        new KeyboardEvent("keydown", { key: "Home", bubbles: true }),
      ),
    );
    expect(document.activeElement).toBe(buttons[0]);

    act(() =>
      buttons[0].dispatchEvent(
        new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }),
      ),
    );
    expect(document.activeElement).toBe(buttons[1]);

    act(() =>
      buttons[1].dispatchEvent(
        new KeyboardEvent("keydown", { key: "Escape", bubbles: true }),
      ),
    );
    expect(onReturnToSearch).toHaveBeenCalledOnce();
  });
});