import { MantineProvider } from "@mantine/core";
import { fireEvent, render, screen, within } from "@testing-library/react";
import { beforeEach, describe, expect, it, vi } from "vitest";
import type { VoiceOption } from "@/modules/textToSpeech";
import VoiceSettingsForm from "./VoiceSettingsForm";

const localVoice: VoiceOption = {
  value: "piper:en_US-lessac-high",
  label: "lessac • English (high)",
  engine: "local",
  languageCode: "en_US",
};

const systemVoice: VoiceOption = {
  value: "system:os-voice",
  label: "OS Voice • en-US",
  engine: "system",
  languageCode: "en-US",
};

const { settings, setSettings, listVoices } = vi.hoisted(() => ({
  settings: {
    current: {
      enableDictation: false,
      enableLocalDictationModel: true,
      selectedVoiceId: "",
      textToSpeechEngine: "local" as "local" | "system",
    },
  },
  setSettings: vi.fn(),
  listVoices: vi.fn(),
}));

vi.mock("create-pubsub/react", () => ({
  usePubSub: () => [settings.current, setSettings],
}));

vi.mock("@/modules/textToSpeech", () => ({
  listVoices: (_languageCode: string | undefined, engine: "local" | "system") =>
    listVoices(engine),
}));

/**
 * jsdom runs no CSS transitions, so Mantine leaves the dropdown `display: none`
 * even once it is open; every query in this file passes `hidden: true` to read
 * the options that were rendered into it.
 */
function openSelect(input: HTMLElement) {
  fireEvent.mouseDown(input);
  fireEvent.click(input);
  const listbox = document.getElementById(
    input.getAttribute("aria-controls") ?? "",
  );
  if (!listbox) throw new Error("The select did not render a listbox");
  return within(listbox);
}

function renderForm() {
  return render(
    <MantineProvider>
      <VoiceSettingsForm />
    </MantineProvider>,
  );
}

function voiceInput() {
  return screen.getByPlaceholderText("Auto-detected") as HTMLElement;
}

beforeEach(() => {
  // jsdom has no layout, so Mantine cannot scroll the active option into view.
  Element.prototype.scrollIntoView = vi.fn();
  vi.clearAllMocks();
  settings.current = {
    enableDictation: false,
    enableLocalDictationModel: true,
    selectedVoiceId: "",
    textToSpeechEngine: "local",
  };
  setSettings.mockImplementation((next: Record<string, unknown>) => {
    settings.current = { ...settings.current, ...next };
  });
  listVoices.mockImplementation((engine: "local" | "system") =>
    Promise.resolve(engine === "local" ? [localVoice] : [systemVoice]),
  );
});

describe("VoiceSettingsForm", () => {
  it("lists only the local voices while the local engine is selected", async () => {
    renderForm();
    await screen.findByText("Voice Selection");

    const options = openSelect(voiceInput()).getAllByRole("option", {
      hidden: true,
    });

    expect(options.map((option) => option.textContent)).toEqual([
      "🇺🇸 lessac • English (high)",
    ]);
  });

  it("lists only the system voices while the system engine is selected", async () => {
    settings.current.textToSpeechEngine = "system";
    renderForm();
    await screen.findByText("Voice Selection");

    const options = openSelect(voiceInput()).getAllByRole("option", {
      hidden: true,
    });

    expect(options.map((option) => option.textContent)).toEqual([
      "🇺🇸 OS Voice • en-US",
    ]);
  });

  it("disables the on-device model switch while dictation itself is off", () => {
    renderForm();
    expect(
      screen.getByRole("switch", {
        name: /On-device dictation model/i,
      }),
    ).toBeDisabled();
  });

  it("persists toggling the on-device dictation model while dictation is on", () => {
    settings.current.enableDictation = true;
    renderForm();

    const switchInput = screen.getByRole("switch", {
      name: /On-device dictation model/i,
    }) as HTMLInputElement;
    expect(switchInput).not.toBeDisabled();

    fireEvent.click(switchInput);

    expect(setSettings).toHaveBeenCalledWith(
      expect.objectContaining({ enableLocalDictationModel: false }),
      expect.anything(),
    );
  });

  it("goes back to auto-detection when the engine changes", async () => {
    settings.current.selectedVoiceId = localVoice.value;
    renderForm();

    const engine = screen.getAllByRole("combobox")[0] as HTMLElement;
    fireEvent.click(
      openSelect(engine).getByRole("option", {
        name: "System voices (Multi-lingual)",
        hidden: true,
      }),
    );

    expect(setSettings).toHaveBeenLastCalledWith(
      expect.objectContaining({
        textToSpeechEngine: "system",
        selectedVoiceId: "",
      }),
      expect.anything(),
    );
    expect((voiceInput() as HTMLInputElement).value).toBe("");
  });
});