import { fireEvent, render, screen, within } from "@testing-library/react"
import type { Saeule } from "@/lib/diagramm"
import { Saeulen } from "./Saeulen"

const REIHEN = [{ name: "A", farbe: "var(--reihe-1)" }, { name: "B", farbe: "var(--reihe-2)" }, { name: "C", farbe: "var(--reihe-3)" }]

const stunden = Array.from({ length: 24 }, (_, i): Saeule => {
  const h = (15 + i) % 24
  return {
    schluessel: String(i), achse: `${String(h).padStart(2, "0")}:00`, raster: h, lang: `${h} Uhr`,
    werte: h === 3 ? { A: 139 } : { A: 5, B: i % 2 },
  }
})

/** Der Behälter meldet eine feste Breite, wie ein Handy (jsdom kennt keinen ResizeObserver). */
function breiteVortaeuschen(px: number) {
  vi.stubGlobal("ResizeObserver", class {
    constructor(private melden: (e: { contentRect: { width: number } }[]) => void) {}
    observe() { this.melden([{ contentRect: { width: px } }]) }
    disconnect() {}
  })
}

afterEach(() => vi.unstubAllGlobals())

describe("Saeulen", () => {
  it("dünnt die Stundenbeschriftung aus und nennt nur die höchste Summe", () => {
    const { container } = render(<Saeulen saeulen={stunden} reihen={REIHEN} titel="Je Stunde" summen="hoechste" />)
    const texte = [...container.querySelectorAll("svg text")].map((t) => t.textContent)
    expect(texte).toEqual(expect.arrayContaining(["15:00", "18:00", "00:00", "03:00", "139"]))
    expect(texte).not.toContain("16:00")
    expect(texte.filter((t) => t === "6")).toHaveLength(0)   // die übrigen Summen stehen nur in Anzeige und Tabelle
  })

  it("zeigt in der Legende nur Reihen mit Werten", () => {
    render(<Saeulen saeulen={stunden} reihen={REIHEN} titel="Je Stunde" />)
    expect(within(screen.getByRole("list", { name: "Legende" })).getAllByRole("listitem").map((l) => l.textContent))
      .toEqual(["A", "B"])
  })

  it("stellt die Anzeige auf dem Handy unter das Diagramm statt darüber", () => {
    breiteVortaeuschen(300)
    render(<Saeulen saeulen={stunden} reihen={REIHEN} titel="Je Stunde" />)
    const bild = screen.getByRole("img", { name: "Je Stunde" })
    expect(bild).toHaveAttribute("width", "300")
    fireEvent.focus(bild)
    const anzeige = screen.getByRole("status")
    expect(anzeige).not.toHaveClass("absolute")
    expect(anzeige).toHaveTextContent("14 Uhr")
    expect(bild.compareDocumentPosition(anzeige) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
  })

  it("sagt es, wenn es nichts zu zeigen gibt", () => {
    render(<Saeulen saeulen={[{ schluessel: "x", achse: "Sa", lang: "Samstag", werte: {} }]} reihen={REIHEN} titel="Leer" />)
    expect(screen.getByText("Keine Anfragen in diesem Zeitraum")).toBeInTheDocument()
    expect(screen.queryByRole("list", { name: "Legende" })).not.toBeInTheDocument()
  })
})