import "../../index.css";

import { EnvironmentId } from "@t3tools/contracts";
import { createRef } from "react";
import type { LegendListRef } from "@legendapp/list/react";
import { page } from "vite-plus/test/browser";
import { afterEach, describe, expect, it, vi } from "vite-plus/test";
import { render } from "vitest-browser-react";

const scrollToEndSpy = vi.fn();
const getStateSpy = vi.fn(() => ({ isAtEnd: true }));

vi.mock("@legendapp/list/react", async () => {
  const React = await import("react");

  function LegendList(props: {
    data: Array<{ id: string }>;
    keyExtractor: (item: { id: string }) => string;
    renderItem: (args: { item: { id: string } }) => React.ReactNode;
    ListHeaderComponent?: React.ReactNode;
    ListFooterComponent?: React.ReactNode;
    ref?: React.Ref<LegendListRef>;
  }) {
    React.useImperativeHandle(
      props.ref,
      () =>
        ({
          scrollToEnd: scrollToEndSpy,
          getState: getStateSpy,
        }) as unknown as LegendListRef,
    );

    return (
      <div data-testid="legend-list">
        {props.ListHeaderComponent}
        {props.data.map((item) => (
          <div key={props.keyExtractor(item)}>{props.renderItem({ item })}</div>
        ))}
        {props.ListFooterComponent}
      </div>
    );
  }

  return { LegendList };
});

import { MessagesTimeline } from "./MessagesTimeline";

const MESSAGE_CREATED_AT = "2026-04-13T12:00:00.000Z";

function buildProps() {
  return {
    isWorking: false,
    activeTurnInProgress: false,
    activeTurnStartedAt: null,
    listRef: createRef<LegendListRef | null>(),
    latestTurn: null,
    turnDiffSummaryByAssistantMessageId: new Map(),
    routeThreadKey: "environment-local:thread-1",
    onOpenTurnDiff: vi.fn(),
    revertTurnCountByUserMessageId: new Map(),
    onRevertUserMessage: vi.fn(),
    isRevertingCheckpoint: false,
    onImageExpand: vi.fn(),
    activeThreadEnvironmentId: EnvironmentId.make("environment-local"),
    markdownCwd: undefined,
    resolvedTheme: "dark" as const,
    timestampFormat: "24-hour" as const,
    workspaceRoot: undefined,
    onIsAtEndChange: vi.fn(),
  };
}

function buildLongUserMessageText(tail = "deep hidden detail only after expand") {
  return Array.from({ length: 9 }, (_, index) =>
    index === 8 ? tail : `Line ${index + 1}: ${"verbose prompt content ".repeat(8).trim()}`,
  ).join("\n");
}

function buildUserTimelineEntry(text: string) {
  return {
    id: "entry-1",
    kind: "message" as const,
    createdAt: MESSAGE_CREATED_AT,
    message: {
      id: "message-1" as never,
      role: "user" as const,
      text,
      createdAt: MESSAGE_CREATED_AT,
      streaming: false,
    },
  };
}

function buildAssistantTimelineEntry(text: string) {
  return {
    id: "entry-assistant-1",
    kind: "message" as const,
    createdAt: MESSAGE_CREATED_AT,
    message: {
      id: "message-assistant-1" as never,
      role: "assistant" as const,
      text,
      createdAt: MESSAGE_CREATED_AT,
      streaming: false,
    },
  };
}

describe("MessagesTimeline", () => {
  afterEach(() => {
    scrollToEndSpy.mockReset();
    getStateSpy.mockClear();
    vi.restoreAllMocks();
    document.body.innerHTML = "";
  });

  it("renders activity rows instead of the empty placeholder when a thread has non-message timeline data", async () => {
    const screen = await render(
      <MessagesTimeline
        {...buildProps()}
        timelineEntries={[
          {
            id: "work-1",
            kind: "work",
            createdAt: "2026-04-13T12:00:00.000Z",
            entry: {
              id: "work-1",
              createdAt: "2026-04-13T12:00:00.000Z",
              label: "read files",
              detail: "Inspecting repository state",
              tone: "tool",
            },
          },
        ]}
      />,
    );

    try {
      await expect
        .element(page.getByText("Send a message to start the conversation."))
        .not.toBeInTheDocument();
      await expect.element(page.getByText("Inspecting repository state")).toBeVisible();
      expect(document.querySelector('[data-testid="legend-list"] [title]')).toBeNull();
    } finally {
      await screen.unmount();
    }
  });

  it("uses accessible expansion instead of native titles or preview tooltips for work entry details", async () => {
    const screen = await render(
      <MessagesTimeline
        {...buildProps()}
        workspaceRoot="/repo"
        timelineEntries={[
          {
            id: "work-command",
            kind: "work",
            createdAt: MESSAGE_CREATED_AT,
            entry: {
              id: "work-command",
              createdAt: MESSAGE_CREATED_AT,
              label: "command",
              detail: "Inspecting generated output",
              command: "git diff -- apps/web/src/components/ChatMarkdown.tsx",
              rawCommand: "git diff -- apps/web/src/components/ChatMarkdown.tsx --stat",
              changedFiles: ["/repo/apps/web/src/components/ChatMarkdown.tsx"],
              tone: "tool",
            },
          },
        ]}
      />,
    );

    try {
      expect(document.querySelector('[data-testid="legend-list"] [title]')).toBeNull();

      const commandTrigger = page.getByLabelText(
        "Command - git diff -- apps/web/src/components/ChatMarkdown.tsx",
      );
      await commandTrigger.hover();
      expect(document.querySelector('[data-slot="tooltip-popup"]')).toBeNull();

      await commandTrigger.click();
      await expect
        .element(page.getByText("git diff -- apps/web/src/components/ChatMarkdown.tsx --stat"))
        .toBeVisible();
    } finally {
      await screen.unmount();
    }
  });

  it("snaps to the bottom when timeline rows appear after an initially empty render", async () => {
    const requestAnimationFrameSpy = vi
      .spyOn(window, "requestAnimationFrame")
      .mockImplementation((callback: FrameRequestCallback) => {
        callback(0);
        return 1;
      });
    vi.spyOn(window, "cancelAnimationFrame").mockImplementation(() => undefined);

    const props = buildProps();
    const screen = await render(<MessagesTimeline {...props} timelineEntries={[]} />);

    try {
      await expect
        .element(page.getByText("Send a message to start the conversation."))
        .toBeVisible();

      await screen.rerender(
        <MessagesTimeline
          {...props}
          timelineEntries={[
            {
              id: "work-1",
              kind: "work",
              createdAt: "2026-04-13T12:00:00.000Z",
              entry: {
                id: "work-1",
                createdAt: "2026-04-13T12:00:00.000Z",
                label: "read files",
                detail: "Inspecting repository state",
                tone: "tool",
              },
            },
          ]}
        />,
      );

      await expect.element(page.getByText("Inspecting repository state")).toBeVisible();
      expect(props.onIsAtEndChange).toHaveBeenCalledWith(true);
      expect(scrollToEndSpy).toHaveBeenCalledWith({ animated: false });
      expect(requestAnimationFrameSpy).toHaveBeenCalled();
    } finally {
      await screen.unmount();
    }
  });

  it("starts long user messages collapsed by default", async () => {
    const screen = await render(
      <MessagesTimeline
        {...buildProps()}
        timelineEntries={[buildUserTimelineEntry(buildLongUserMessageText())]}
      />,
    );

    try {
      const toggle = page.getByRole("button", { name: "Show full message" });
      await expect.element(toggle).toBeVisible();
      await expect.element(toggle).toHaveAttribute("aria-expanded", "false");

      const messageBody = document.querySelector(
        "[data-user-message-body='true']",
      ) as HTMLDivElement | null;
      expect(messageBody?.getAttribute("data-user-message-collapsed")).toBe("true");
      expect(messageBody?.className).toContain("max-h-44");
      expect(messageBody?.className).toContain("overflow-hidden");
      expect(messageBody?.getAttribute("data-user-message-fade")).toBe("true");
      expect(messageBody?.style.maskImage).toContain("linear-gradient");
    } finally {
      await screen.unmount();
    }
  });

  it("expands and re-collapses long user messages from the toggle", async () => {
    const screen = await render(
      <MessagesTimeline
        {...buildProps()}
        timelineEntries={[buildUserTimelineEntry(buildLongUserMessageText())]}
      />,
    );

    try {
      const expandButton = page.getByRole("button", { name: "Show full message" });
      await expect.element(expandButton).toBeVisible();

      expect(document.body.textContent ?? "").toContain("deep hidden detail only after expand");

      await expandButton.click();

      const collapseButton = page.getByRole("button", { name: "Show less" });
      await expect.element(collapseButton).toBeVisible();
      await expect.element(collapseButton).toHaveAttribute("aria-expanded", "true");

      let messageBody = document.querySelector("[data-user-message-body='true']");
      expect(messageBody?.getAttribute("data-user-message-collapsed")).toBe("false");
      expect(messageBody?.className).not.toContain("max-h-44");
      expect(messageBody?.getAttribute("data-user-message-fade")).toBe("false");
      expect((messageBody as HTMLDivElement | null)?.style.maskImage ?? "").toBe("");

      await collapseButton.click();

      await expect.element(page.getByRole("button", { name: "Show full message" })).toBeVisible();
      messageBody = document.querySelector("[data-user-message-body='true']");
      expect(messageBody?.getAttribute("data-user-message-collapsed")).toBe("true");
      expect(messageBody?.className).toContain("max-h-44");
      expect(messageBody?.getAttribute("data-user-message-fade")).toBe("true");
      expect((messageBody as HTMLDivElement | null)?.style.maskImage).toContain("linear-gradient");
    } finally {
      await screen.unmount();
    }
  });

  it("starts the newest long user prompt collapsed", async () => {
    const screen = await render(
      <MessagesTimeline
        {...buildProps()}
        timelineEntries={[buildUserTimelineEntry(buildLongUserMessageText("latest long prompt"))]}
      />,
    );

    try {
      await expect.element(page.getByRole("button", { name: "Show full message" })).toBeVisible();

      const messageBody = document.querySelector("[data-user-message-body='true']");
      expect(messageBody?.getAttribute("data-user-message-collapsed")).toBe("true");
    } finally {
      await screen.unmount();
    }
  });

  it("renders user messages as markdown with chat-style line breaks", async () => {
    const screen = await render(
      <MessagesTimeline
        {...buildProps()}
        timelineEntries={[
          buildUserTimelineEntry(
            "## Plan\nuse **bold** and [a link](https://example.com)\nsecond line",
          ),
        ]}
      />,
    );

    try {
      await expect.element(page.getByRole("heading", { level: 2, name: "Plan" })).toBeVisible();
      await expect
        .element(page.getByRole("link", { name: "a link" }))
        .toHaveAttribute("href", "https://example.com");

      const messageBody = document.querySelector("[data-user-message-body='true']");
      expect(messageBody?.querySelector("strong")?.textContent).toBe("bold");
      // remark-breaks: the single newline between the inline runs is a <br>.
      expect(messageBody?.querySelectorAll("p br").length).toBe(1);
    } finally {
      await screen.unmount();
    }
  });

  it("renders markdown file tags in user and assistant messages", async () => {
    const fileLink = "[package.json](path/to/package.json)";
    const screen = await render(
      <MessagesTimeline
        {...buildProps()}
        markdownCwd="/repo/project"
        timelineEntries={[
          buildUserTimelineEntry(`Review ${fileLink}`),
          buildAssistantTimelineEntry(`I reviewed ${fileLink}`),
        ]}
      />,
    );

    try {
      const userFileLink = document.querySelector(
        '[data-message-role="user"] .chat-markdown-file-link',
      );
      const assistantFileLink = document.querySelector(
        '[data-message-role="assistant"] .chat-markdown-file-link',
      );

      expect(userFileLink?.textContent).toContain("package.json");
      expect(userFileLink?.getAttribute("href")).toBe("/repo/project/path/to/package.json");
      expect(assistantFileLink?.textContent).toContain("package.json");
      expect(assistantFileLink?.getAttribute("href")).toBe("/repo/project/path/to/package.json");
    } finally {
      await screen.unmount();
    }
  });

  it("uses the file path without line suffix for markdown file tag icons", async () => {
    const fileLink = "[package.json](path/to/package.json:25)";
    const screen = await render(
      <MessagesTimeline
        {...buildProps()}
        markdownCwd="/repo/project"
        timelineEntries={[buildAssistantTimelineEntry(`Updated ${fileLink}`)]}
      />,
    );

    try {
      const assistantFileLink = document.querySelector(
        '[data-message-role="assistant"] .chat-markdown-file-link',
      );
      const icon = assistantFileLink?.querySelector("svg[data-pierre-icon]");

      expect(assistantFileLink?.textContent).toContain("package.json");
      expect(assistantFileLink?.textContent).toContain("L25");
      expect(assistantFileLink?.getAttribute("href")).toBe("/repo/project/path/to/package.json:25");
      expect(icon?.getAttribute("data-pierre-icon")).toBe("t3-file-icon-package-json");
    } finally {
      await screen.unmount();
    }
  });

  it("folds settled-turn work behind a Worked-for row and expands it on click", async () => {
    const screen = await render(
      <MessagesTimeline
        {...buildProps()}
        timelineEntries={[
          {
            id: "entry-commentary",
            kind: "message" as const,
            createdAt: "2026-04-13T12:00:00.000Z",
            message: {
              id: "message-commentary" as never,
              role: "assistant" as const,
              text: "Let me look around first.",
              turnId: "turn-1" as never,
              createdAt: "2026-04-13T12:00:00.000Z",
              completedAt: "2026-04-13T12:00:02.000Z",
              streaming: false,
            },
          },
          {
            id: "entry-work",
            kind: "work" as const,
            createdAt: "2026-04-13T12:00:05.000Z",
            entry: {
              id: "work-1",
              createdAt: "2026-04-13T12:00:05.000Z",
              turnId: "turn-1" as never,
              label: "read files",
              detail: "Inspecting repository state",
              tone: "tool" as const,
            },
          },
          {
            id: "entry-final",
            kind: "message" as const,
            createdAt: "2026-04-13T12:00:20.000Z",
            message: {
              id: "message-final" as never,
              role: "assistant" as const,
              text: "All done.",
              turnId: "turn-1" as never,
              createdAt: "2026-04-13T12:00:20.000Z",
              completedAt: "2026-04-13T12:00:30.000Z",
              streaming: false,
            },
          },
        ]}
      />,
    );

    try {
      const foldButton = page.getByRole("button", { name: "Worked for 30s" });
      await expect.element(foldButton).toBeVisible();
      await expect.element(foldButton).toHaveAttribute("aria-expanded", "false");

      expect(document.body.textContent).toContain("All done.");
      expect(document.body.textContent).not.toContain("Let me look around first.");
      expect(document.body.textContent).not.toContain("Inspecting repository state");

      await foldButton.click();

      await expect.element(foldButton).toHaveAttribute("aria-expanded", "true");
      expect(document.body.textContent).toContain("Let me look around first.");
      expect(document.body.textContent).toContain("Inspecting repository state");

      await foldButton.click();

      await expect.element(foldButton).toHaveAttribute("aria-expanded", "false");
      expect(document.body.textContent).not.toContain("Inspecting repository state");
    } finally {
      await screen.unmount();
    }
  });
});