// @vitest-environment jsdom
//
// Ctrl/Cmd+K had no visible entry point (debt burn B28). The owner's pick: a key cap in the header's
// search field, and a "Jump to…" pill in its place on a page that has no search field.
import { describe, it, expect, vi, afterEach } from "vitest";
import { render, screen, fireEvent, cleanup, act } from "@testing-library/react";

vi.mock("react-i18next", async (importOriginal) => ({
  ...(await importOriginal<typeof import("react-i18next")>()),
  useTranslation: () => ({ t: (k: string) => k, i18n: { language: "en" } }),
}));

let page = "home";
vi.mock("../features/navigation/navigationContext", () => ({ useNavigation: () => ({ page }) }));
vi.mock("../modules/feed/feedFiltersContext", () => ({
  useFeedFilters: () => ({ q: "", sort: "newest" }),
  useFeedFiltersActions: () => ({ setFilters: vi.fn() }),
}));
vi.mock("../modules/playlists/playlistsContext", () => ({
  usePlaylists: () => ({ search: "" }),
  usePlaylistsActions: () => ({ setSearch: vi.fn() }),
}));
vi.mock("../modules/channels/channelsContext", () => ({
  useChannels: () => ({ search: "" }),
  useChannelsActions: () => ({ setSearch: vi.fn(), goToFullHistory: vi.fn() }),
}));
vi.mock("../modules/channels/SyncStatus", () => ({ default: () => null }));

import Header from "./Header";
import { closePalette, usePaletteOpen } from "../lib/keymap";
import type { Me } from "../lib/api";

afterEach(() => {
  cleanup();
  act(() => closePalette());
});

function mount() {
  let open = false;
  function Probe() {
    open = usePaletteOpen();
    return null;
  }
  render(
    <>
      <Header me={{ plex_enabled: false } as Me} onYtSearch={() => {}} />
      <Probe />
    </>,
  );
  return () => open;
}

describe("the command palette's visible entry", () => {
  it("is a key cap inside the search field, naming the chord the palette row binds", () => {
    page = "feed";
    const isOpen = mount();
    const cap = screen.getByRole("button", { name: /^palette\.open \((Ctrl|⌘) K\)$/ });
    // Label in Name: the name carries what the cap shows, so "click Ctrl K" finds it.
    expect(cap.getAttribute("aria-label")).toContain(cap.textContent);
    // …and a tooltip equal to that name, so a screen reader does not read it again as a description.
    expect(cap.getAttribute("title")).toBe(cap.getAttribute("aria-label"));
    expect(screen.getByRole("textbox")).toBeTruthy();
    fireEvent.click(cap);
    expect(isOpen()).toBe(true);
  });

  it("is a Jump-to pill on a page with no search field", () => {
    page = "home";
    const isOpen = mount();
    expect(screen.queryByRole("textbox")).toBeNull();
    // Named by what it shows ("Jump to…" and its key cap), not by a label that replaced it.
    const pill = screen.getByRole("button", { name: /^palette\.title ?(Ctrl|⌘) K$/ });
    expect(pill.getAttribute("title")).toBe("palette.open");
    fireEvent.click(pill);
    expect(isOpen()).toBe(true);
  });
});