import { cleanup, fireEvent, render, screen } from "@testing-library/react";
import { afterEach, expect, it } from "vitest";
import { FloatingWindow } from "./floating-window";
import { floatingWindowEntries, floatingWindowOrder } from "./floating-window-layer";
import { useCallback, useRef, useState } from "react";

afterEach(cleanup);

const content = () => <p>图表内容</p>;

it("opens display requests without stealing focus and respects dismissal until the next request", () => {
  const { rerender } = render(<><button autoFocus>回放控制</button><FloatingWindow title="压力分析" openRequestKey="first">{content}</FloatingWindow></>);
  expect(screen.getByRole("dialog", { name: "压力分析" })).toBeVisible();
  expect(screen.getByRole("button", { name: "回放控制" })).toHaveFocus();
  fireEvent.click(screen.getByRole("button", { name: "关闭窗口" }));
  expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
  rerender(<><button>回放控制</button><FloatingWindow title="压力分析" openRequestKey="first">{content}</FloatingWindow></>);
  expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
  rerender(<><button>回放控制</button><FloatingWindow title="压力分析" openRequestKey="second">{content}</FloatingWindow></>);
  expect(screen.getByRole("dialog", { name: "压力分析" })).toBeVisible();
  expect(screen.getByRole("button", { name: "回放控制" })).toHaveFocus();
  fireEvent.click(screen.getByRole("button", { name: "关闭窗口" }));
  rerender(<><button>回放控制</button><FloatingWindow title="压力分析" openRequestKey="first">{content}</FloatingWindow></>);
  expect(screen.getByRole("dialog", { name: "压力分析" })).toBeVisible();
});

it("retains manual opening, Escape dismissal and focus return", () => {
  render(<FloatingWindow title="压力分析">{content}</FloatingWindow>);
  expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
  const trigger = screen.getByRole("button", { name: "放大查看 压力分析" });
  fireEvent.click(trigger);
  const heading = screen.getByLabelText("窗口标题栏，可用方向键移动，Shift 加方向键调整大小");
  expect(heading).toHaveFocus();
  fireEvent.keyDown(heading, { key: "Escape" });
  expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
  expect(trigger).toHaveFocus();
  fireEvent.click(trigger);
  expect(screen.getByRole("dialog", { name: "压力分析" })).toBeVisible();
});

function DockFixture({ multiple = false }: { multiple?: boolean }) {
  const target = useRef<HTMLDivElement>(null);
  const [activeId, setActiveId] = useState<string | null>(null);
  const activate = useCallback((id: string) => setActiveId(id), []);
  const deactivate = useCallback((id?: string) => setActiveId((current) => !id || current === id ? null : current), []);
  return <>
    <div ref={target} data-testid="workspace-slot" />
    <button onClick={() => deactivate()}>切换工作区</button>
    <FloatingWindow title="停靠分析" dock={{ target, activeId, activate, deactivate, view: "map_split", setView: () => undefined }}>
      {() => <input aria-label="分析备注" />}
    </FloatingWindow>
    {multiple ? <FloatingWindow title="停靠对比" dock={{ target, activeId, activate, deactivate, view: "map_split", setView: () => undefined }}>
      {() => <p>第二个来源</p>}
    </FloatingWindow> : null}
  </>;
}

it("preserves the live document when a docked window is hidden and located again", () => {
  render(<DockFixture />);
  const trigger = screen.getByRole("button", { name: "放大查看 停靠分析" });
  fireEvent.click(trigger);
  const dialog = screen.getByRole("dialog", { name: "停靠分析" });
  expect(screen.getByTestId("workspace-slot")).toContainElement(dialog);
  expect(dialog).toHaveAttribute("data-window-presentation", "docked");
  expect(floatingWindowEntries()).toEqual([]);
  expect(floatingWindowOrder()).toEqual([]);
  const editor = screen.getByLabelText("分析备注");
  fireEvent.change(editor, { target: { value: "保留核查说明" } });
  fireEvent.click(screen.getByRole("button", { name: "切换工作区" }));
  expect(dialog).not.toBeVisible();
  fireEvent.click(trigger);
  expect(screen.getByLabelText("分析备注")).toBe(editor);
  expect(editor).toHaveValue("保留核查说明");
  expect(dialog).toBeVisible();
  expect(floatingWindowEntries()).toEqual([]);
  expect(floatingWindowOrder()).toEqual([]);
  fireEvent.keyDown(dialog, { key: "Escape" });
  expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
});

it("hides inactive docking hosts so another source can occupy the same workspace", () => {
  render(<DockFixture multiple />);
  fireEvent.click(screen.getByRole("button", { name: "放大查看 停靠分析" }));
  const first = screen.getByRole("dialog", { name: "停靠分析" });
  const editor = screen.getByLabelText("分析备注");
  fireEvent.change(editor, { target: { value: "保留第一个来源" } });
  fireEvent.click(screen.getByRole("button", { name: "放大查看 停靠对比" }));
  const second = screen.getByRole("dialog", { name: "停靠对比" });
  expect(first.parentElement).not.toBeVisible();
  expect(first.parentElement).toHaveAttribute("hidden");
  expect(second.parentElement).toBeVisible();
  fireEvent.click(screen.getByRole("button", { name: "放大查看 停靠分析" }));
  expect(first.parentElement).toBeVisible();
  expect(second.parentElement).not.toBeVisible();
  expect(screen.getByLabelText("分析备注")).toBe(editor);
  expect(editor).toHaveValue("保留第一个来源");
});