// @vitest-environment jsdom
import { act } from "react";
import { createRoot } from "react-dom/client";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";

// Stub ChatConversationList to avoid pulling its dependency tree into the
// test (react-query, ChatPanelContext, etc.). We only want to assert that
// HistorySheet mounts it when companyId is present.
vi.mock("../ChatConversationList", () => ({
  ChatConversationList: ({ companyId }: { companyId: string }) => (
    <div data-testid="chat-conversation-list-stub" data-company-id={companyId}>
      conversation-list
    </div>
  ),
}));

import { HistorySheet } from "./HistorySheet";

// eslint-disable-next-line @typescript-eslint/no-explicit-any
(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;

describe("<HistorySheet />", () => {
  let container: HTMLDivElement;
  let root: ReturnType<typeof createRoot> | null = null;

  beforeEach(() => {
    container = document.createElement("div");
    document.body.appendChild(container);
    root = null;
  });

  afterEach(() => {
    if (root) {
      act(() => {
        root!.unmount();
      });
      root = null;
    }
    if (container.parentNode) container.remove();
  });

  function render(node: React.ReactNode) {
    root = createRoot(container);
    act(() => {
      root!.render(node);
    });
  }

  it("renders nothing when closed", () => {
    render(<HistorySheet open={false} onClose={() => {}} companyId="co-1" />);
    expect(container.querySelector('[data-testid="history-sheet-panel"]')).toBeNull();
    expect(container.querySelector('[data-testid="history-sheet-backdrop"]')).toBeNull();
  });

  it("renders the panel and a backdrop when open", () => {
    render(<HistorySheet open onClose={() => {}} companyId="co-1" />);
    expect(container.querySelector('[data-testid="history-sheet-panel"]')).not.toBeNull();
    expect(container.querySelector('[data-testid="history-sheet-backdrop"]')).not.toBeNull();
  });

  it("mounts ChatConversationList inside the panel when companyId is present", () => {
    render(<HistorySheet open onClose={() => {}} companyId="co-1" />);
    const stub = container.querySelector('[data-testid="chat-conversation-list-stub"]');
    expect(stub).not.toBeNull();
    expect(stub?.getAttribute("data-company-id")).toBe("co-1");
  });

  it("shows a placeholder when companyId is null", () => {
    render(<HistorySheet open onClose={() => {}} companyId={null} />);
    expect(container.querySelector('[data-testid="chat-conversation-list-stub"]')).toBeNull();
    expect(container.textContent ?? "").toContain("Select a workspace");
  });

  it("calls onClose when the backdrop is clicked", () => {
    const onClose = vi.fn();
    render(<HistorySheet open onClose={onClose} companyId="co-1" />);
    const backdrop = container.querySelector(
      '[data-testid="history-sheet-backdrop"]',
    ) as HTMLButtonElement;
    act(() => {
      backdrop.click();
    });
    expect(onClose).toHaveBeenCalledTimes(1);
  });

  it("calls onClose when ESC is pressed", () => {
    const onClose = vi.fn();
    render(<HistorySheet open onClose={onClose} companyId="co-1" />);
    act(() => {
      document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
    });
    expect(onClose).toHaveBeenCalledTimes(1);
  });

  it("does not listen for ESC when closed", () => {
    const onClose = vi.fn();
    render(<HistorySheet open={false} onClose={onClose} companyId="co-1" />);
    act(() => {
      document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
    });
    expect(onClose).not.toHaveBeenCalled();
  });

  it("uses a left-side panel positioned against the icon rail", () => {
    render(<HistorySheet open onClose={() => {}} companyId="co-1" />);
    const panel = container.querySelector('[data-testid="history-sheet-panel"]') as HTMLElement;
    // The Tailwind class string should include left-[56px] and w-[320px].
    expect(panel.className).toContain("left-[56px]");
    expect(panel.className).toContain("w-[320px]");
  });
});
