// @vitest-environment jsdom

import { act, createElement } from "react";
import { createRoot, type Root } from "react-dom/client";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import { TabStrip } from "../src/client/components/tab-strip";
import { useWorkspaceStore } from "../src/client/workspace/store";

let container: HTMLDivElement | null = null;
let root: Root | null = null;
const reactActEnvironment = globalThis as typeof globalThis & {
  IS_REACT_ACT_ENVIRONMENT?: boolean;
};

function resetStore(): void {
  sessionStorage.clear();
  useWorkspaceStore.setState(useWorkspaceStore.getInitialState());
}

function renderTabStrip(): void {
  if (!root) {
    throw new Error("Root was not created");
  }

  act(() => {
    root!.render(createElement(TabStrip));
  });
}

beforeEach(() => {
  reactActEnvironment.IS_REACT_ACT_ENVIRONMENT = true;
  resetStore();
  container = document.createElement("div");
  document.body.appendChild(container);
  root = createRoot(container);
});

afterEach(() => {
  if (root) {
    act(() => {
      root!.unmount();
    });
  }
  root = null;
  container?.remove();
  container = null;
  document.body.innerHTML = "";
  resetStore();
  delete reactActEnvironment.IS_REACT_ACT_ENVIRONMENT;
  vi.restoreAllMocks();
});

describe("TabStrip", () => {
  it("renders the close control outside the tab button without nesting warnings", () => {
    useWorkspaceStore.getState().newTab();
    const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});

    renderTabStrip();

    const closeButton = container?.querySelector('button[aria-label="Close Terminal 1"]');
    expect(closeButton).toBeInstanceOf(HTMLButtonElement);
    expect(closeButton?.closest('button[role="tab"]')).toBeNull();

    const nestedButtonWarning = errorSpy.mock.calls.some((args) =>
      args.some((arg) => String(arg).includes("<button> cannot be a descendant of <button>")),
    );
    expect(nestedButtonWarning).toBe(false);
  });

  it("closes an inactive tab without switching the active tab first", () => {
    const store = useWorkspaceStore.getState();
    store.newTab();
    store.newTab();
    const activeTabIdBeforeClose = useWorkspaceStore.getState().activeTabId;

    renderTabStrip();

    const closeButton = container?.querySelector('button[aria-label="Close Terminal 1"]');
    expect(closeButton).toBeInstanceOf(HTMLButtonElement);

    act(() => {
      closeButton!.dispatchEvent(new MouseEvent("click", { bubbles: true }));
    });

    const { activeTabId, tabs } = useWorkspaceStore.getState();
    expect(tabs).toHaveLength(2);
    expect(tabs.some((tab) => tab.title === "Terminal 1")).toBe(false);
    expect(activeTabId).toBe(activeTabIdBeforeClose);
  });
});