import { fireEvent, render, screen } from "@testing-library/react"
import { afterEach, describe, expect, it, vi } from "vitest"

import { SiteIcon } from "./site-icon"

afterEach(() => {
  vi.restoreAllMocks()
})

describe("SiteIcon", () => {
  it("渲染已知 Simple Icon", () => {
    const { container } = render(
      <SiteIcon
        link={{ title: "GitHub", url: "https://github.com", icon: "si:github" }}
        size={28}
      />,
    )
    const icon = container.querySelector("svg")
    expect(icon).toBeInTheDocument()
    expect(icon).toHaveAttribute("width", "28")
    expect(icon).toHaveAttribute("height", "28")
  })

  it("远程图片加载完成前显示首字符占位", () => {
    const { container } = render(
      <SiteIcon
        link={{
          title: "Example",
          url: "https://example.com",
          icon: "url:https://cdn.example.com/icon.png",
        }}
      />,
    )

    const wrapper = container.querySelector(".site-icon")
    const image = container.querySelector("img")
    expect(wrapper).toHaveAttribute("data-initial", "E")
    expect(image).toHaveClass("site-icon__image--loading")

    fireEvent.load(image!)
    expect(wrapper).not.toHaveAttribute("data-initial")
    expect(image).not.toHaveClass("site-icon__image--loading")
  })

  it("链接变化后从新候选链的首项重新开始", () => {
    const { container, rerender } = render(
      <SiteIcon
        link={{
          title: "Example",
          url: "https://example.com",
          icon: "url:https://cdn.example.com/icon.png",
        }}
      />,
    )

    fireEvent.error(container.querySelector("img")!)
    rerender(
      <SiteIcon
        link={{
          title: "Other",
          url: "https://other.example.com",
          icon: "url:https://cdn.example.com/other.png",
        }}
      />,
    )

    expect(container.querySelector("img")).toHaveAttribute(
      "src",
      "https://cdn.example.com/other.png",
    )
  })

  it("远程图片连续失败后显示首字符", () => {
    const { container } = render(
      <SiteIcon
        link={{
          title: "Example",
          url: "https://example.com",
          icon: "url:https://cdn.example.com/icon.png",
        }}
      />,
    )

    fireEvent.error(container.querySelector("img")!)
    fireEvent.error(container.querySelector("img")!)
    expect(screen.getByText("E")).toBeInTheDocument()
  })

  it("缓存或水合前已加载完成的图片挂载后直接显示，不再停留首字母", () => {
    // 模拟图片在 React 附加 onLoad 之前（如缓存命中 + 水合竞态）已完成：不再有 load 事件。
    vi.spyOn(HTMLImageElement.prototype, "complete", "get").mockReturnValue(true)
    vi.spyOn(HTMLImageElement.prototype, "naturalWidth", "get").mockReturnValue(
      48,
    )

    const { container } = render(
      <SiteIcon
        link={{
          title: "go-zero",
          url: "https://go-zero.dev",
          icon: "local:go-zero",
        }}
      />,
    )

    const wrapper = container.querySelector(".site-icon")!
    const image = container.querySelector("img")!
    expect(image).toHaveAttribute("src", "/icons/go-zero.svg")
    expect(wrapper).not.toHaveAttribute("data-initial")
    expect(wrapper).not.toHaveClass("site-icon--initial")
    expect(image).not.toHaveClass("site-icon__image--loading")
  })

  it("缓存或水合前已失败的图片挂载后推进候选链，不卡死占位", () => {
    // complete 为真但 naturalWidth 为 0 表示解码失败的坏图，同样不会补发 error 事件。
    // 仅首项候选处于该状态；推进后的候选按全新加载处理（complete 为假，等待事件）。
    vi.spyOn(HTMLImageElement.prototype, "complete", "get").mockImplementation(
      function (this: HTMLImageElement) {
        return this.getAttribute("src") === "https://cdn.example.com/icon.png"
      },
    )
    vi.spyOn(HTMLImageElement.prototype, "naturalWidth", "get").mockReturnValue(
      0,
    )

    const { container } = render(
      <SiteIcon
        link={{
          title: "Example",
          url: "https://example.com",
          icon: "url:https://cdn.example.com/icon.png",
        }}
      />,
    )

    // 候选链：自定义图片 → favicon → 首字母；首项挂载前已坏，应停在 favicon。
    expect(container.querySelector("img")).toHaveAttribute(
      "src",
      "https://example.com/favicon.ico",
    )
    expect(container.querySelector(".site-icon")).toHaveAttribute(
      "data-initial",
      "E",
    )
  })
})