// @vitest-environment jsdom
import { useLayoutEffect } from "react";
import { describe, it, expect, afterEach } from "vitest";
import { render, screen, fireEvent, cleanup } from "@testing-library/react";

import Avatar from "./Avatar";

afterEach(cleanup);

// The failure state is keyed by URL rather than held as a boolean an effect resets, and the reason
// is a frame the user could see: Avatar is recycled across items in the virtualized feed, so after
// ONE image 429s (Google's avatar CDNs throttle bursts — see the component's own note), the next
// item to land in that slot rendered with its new `src` and the previous item's `failed`. The
// fallback initial was therefore committed and painted over a perfectly good image, and only the
// post-paint effect put it right.
//
// `useLayoutEffect` is what makes that observable instead of a race: layout effects run against the
// committed DOM BEFORE any passive effect, so the snapshot it takes is exactly the frame the browser
// would paint — the one the old reset effect had not repaired yet.
function Probe({ src, painted }: { src: string; painted: string[] }) {
  useLayoutEffect(() => {
    painted.push(document.body.innerHTML);
  });
  return <Avatar src={src} alt="avatar" fallback="Zed" />;
}

describe("Avatar · a failed image must not follow the component to the next item", () => {
  it("shows the new src in the SAME commit that changes it, with no fallback frame between", () => {
    const painted: string[] = [];
    const { rerender } = render(<Probe src="https://cdn.test/a.jpg" painted={painted} />);

    fireEvent.error(screen.getByRole("img", { name: "avatar" }));
    expect(screen.queryByRole("img")).toBeNull();
    expect(screen.getByText("Z")).toBeTruthy();

    painted.length = 0;
    rerender(<Probe src="https://cdn.test/b.jpg" painted={painted} />);

    // The FIRST frame after the src change already carries the image. Reading the last snapshot
    // instead would let a passive-effect repair pass, which is precisely the bug.
    expect(painted.length).toBeGreaterThan(0);
    expect(painted[0]).toContain("https://cdn.test/b.jpg");
    expect(painted[0]).not.toContain(">Z<");
  });

  // CHARACTERIZATION: the old boolean-plus-effect passes this too (the rerender is wrapped in act(),
  // so its reset effect has run by the time the src is read). The frame-level guard is the test
  // above, which the old shape fails; the retry guard is the test below, which it also fails.
  it("keeps the fallback for the URL that actually failed, not for whatever is current", () => {
    const { rerender } = render(
      <Avatar src="https://cdn.test/a.jpg" alt="avatar" fallback="Zed" />,
    );
    fireEvent.error(screen.getByRole("img", { name: "avatar" }));
    expect(screen.getByText("Z")).toBeTruthy();

    rerender(<Avatar src="https://cdn.test/b.jpg" alt="avatar" fallback="Zed" />);
    expect(screen.getByRole("img", { name: "avatar" }).getAttribute("src")).toBe(
      "https://cdn.test/b.jpg",
    );
  });

  it("retries a URL it comes back to — a 429 is transient, and so is the memory of it", () => {
    // The instance is not remounted here on purpose: the player's channel avatar and the Messages
    // thread header both swap `src` on a live instance. A memory that outlived the reason for it
    // would pin a throttled channel to its initial for the rest of the session.
    const { rerender } = render(
      <Avatar src="https://cdn.test/a.jpg" alt="avatar" fallback="Zed" />,
    );
    fireEvent.error(screen.getByRole("img", { name: "avatar" }));
    expect(screen.getByText("Z")).toBeTruthy();

    rerender(<Avatar src="https://cdn.test/b.jpg" alt="avatar" fallback="Zed" />);
    rerender(<Avatar src="https://cdn.test/a.jpg" alt="avatar" fallback="Zed" />);
    expect(screen.getByRole("img", { name: "avatar" }).getAttribute("src")).toBe(
      "https://cdn.test/a.jpg",
    );
  });

  it("falls back when there is no src at all", () => {
    render(<Avatar src={null} alt="avatar" fallback="Zed" />);
    expect(screen.queryByRole("img")).toBeNull();
    expect(screen.getByText("Z")).toBeTruthy();
  });
});