// @vitest-environment happy-dom
(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;

import React, { act } from "react";
import { createRoot, type Root } from "react-dom/client";
import { describe, expect, it, vi } from "vitest";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { RemitDrawerError } from "./RemitDrawerError";

function renderIntoContainer(element: React.ReactElement): {
  container: HTMLDivElement;
  unmount: () => void;
} {
  const container = document.createElement("div");
  document.body.appendChild(container);
  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
  const root: Root = createRoot(container);
  act(() => {
    root.render(
      React.createElement(QueryClientProvider, { client: qc }, element)
    );
  });
  return {
    container,
    unmount: () => {
      act(() => root.unmount());
      container.remove();
    },
  };
}

describe("RemitDrawerError", () => {
  it("renders_not_found_message_and_close_button", () => {
    const onClose = vi.fn();
    const { container, unmount } = renderIntoContainer(
      <RemitDrawerError kind="not_found" onClose={onClose} />
    );

    const root = container.firstElementChild as HTMLElement;
    expect(root.getAttribute("role")).toBe("alert");
    expect(
      root.getAttribute("data-testid")?.includes("not_found")
    ).toBe(true);

    const text = (container.textContent ?? "").toLowerCase();
    expect(text).toContain("not found");

    const closeBtn = container.querySelector(
      '[data-testid="error-close"]'
    ) as HTMLButtonElement | null;
    expect(closeBtn).not.toBeNull();
    expect(closeBtn?.textContent?.toLowerCase()).toContain("close");
    expect(onClose).not.toHaveBeenCalled();
    act(() => {
      closeBtn?.click();
    });
    expect(onClose).toHaveBeenCalledTimes(1);

    unmount();
  });

  it("renders_network_message_and_retry_button", () => {
    const onRetry = vi.fn();
    const onClose = vi.fn();
    const { container, unmount } = renderIntoContainer(
      <RemitDrawerError kind="network" onRetry={onRetry} onClose={onClose} />
    );

    const text = (container.textContent ?? "").toLowerCase();
    expect(
      text.includes("network") ||
        text.includes("connection") ||
        text.includes("try again")
    ).toBe(true);

    const retryBtn = container.querySelector(
      '[data-testid="error-retry"]'
    ) as HTMLButtonElement | null;
    expect(retryBtn).not.toBeNull();
    act(() => {
      retryBtn?.click();
    });
    expect(onRetry).toHaveBeenCalledTimes(1);

    const closeBtn = container.querySelector(
      '[data-testid="error-close"]'
    ) as HTMLButtonElement | null;
    expect(closeBtn).not.toBeNull();
    act(() => {
      closeBtn?.click();
    });
    expect(onClose).toHaveBeenCalledTimes(1);

    unmount();
  });

  it("omits_retry_button_when_onRetry_not_provided", () => {
    const onClose = vi.fn();
    const { container, unmount } = renderIntoContainer(
      <RemitDrawerError kind="network" onClose={onClose} />
    );

    const retryBtn = container.querySelector('[data-testid="error-retry"]');
    expect(retryBtn).toBeNull();

    unmount();
  });
});