// @vitest-environment jsdom
//
// QafDataTable (Loop-10-Rest Schritt 1): der gemeinsame Tabellen-Renderer
// muss das bisherige Hand-<table>-Skelett BYTE-GLEICH reproduzieren —
// die Klassen-Strings sind hier bewusst exakt gepinnt, weil die Migration
// der Sektionen visuell verlustfrei sein soll und es (bis B-8) keine
// visuelle Regression gibt, die das sonst fängt.
//
// FIXTURE-DATEN-REGEL: alle Werte sind freie Erfindung.

import { describe, expect, it, afterEach } from "vitest"
import { cleanup, render, screen } from "@testing-library/react"
import {
  QafDataTable,
  type DataTableColumn,
} from "@/components/qaf-differences/detail-sections/qaf-data-table"

afterEach(() => {
  cleanup()
})

interface Row {
  id: string
  name: string
  wert: number
  same: boolean
}

const ROWS: Row[] = [
  { id: "r1", name: "Alpha", wert: 12.5, same: false },
  { id: "r2", name: "Beta", wert: 7, same: true },
]

const COLUMNS: DataTableColumn<Row>[] = [
  {
    key: "name",
    headerDe: "Position",
    cell: (r) => r.name,
    cellClassName: () => "text-foreground",
    // Zeilen-abhängiges title (Review-#508-M2): dieselbe Spalte liefert für
    // r1 einen Beleg und für r2 undefined — exakt das reale Verhalten von
    // sourceRefTitle in der OneTimeSection.
    cellTitle: (r) => (r.id === "r1" ? `Beleg ${r.id}` : undefined),
  },
  {
    key: "wert",
    headerDe: "Wert",
    align: "right",
    numeric: true,
    cellClassName: (r) => (r.same ? "text-muted-foreground" : ""),
    cell: (r) => String(r.wert),
  },
]

describe("QafDataTable", () => {
  it("rendert Header und Zellen in Spalten-Reihenfolge mit dem exakten Klassen-Skelett", () => {
    const { container } = render(
      <QafDataTable rows={ROWS} rowKey={(r) => r.id} columns={COLUMNS} />
    )
    const ths = container.querySelectorAll("th")
    expect(Array.from(ths).map((t) => t.textContent)).toEqual([
      "Position",
      "Wert",
    ])
    // Exakte Klassen-Reihenfolge des bisherigen Handmusters: erste Spalte
    // mit pr-3, letzte ohne; rechtsbündige Spalte mit text-right VOR
    // font-medium (th) bzw. tabular-nums (td).
    expect(ths[0].className).toBe("py-2 pr-3 font-medium")
    expect(ths[1].className).toBe("py-2 text-right font-medium")
    const bodyCells = container.querySelectorAll("tbody td")
    expect(bodyCells[0].className).toBe("py-2 pr-3 text-foreground")
    expect(bodyCells[1].className).toBe("py-2 text-right tabular-nums")
    // Wrapper + Tabellen-Skelett unverändert zum Handmuster.
    expect(container.firstElementChild?.className).toBe("overflow-x-auto")
    expect(container.querySelector("table")?.className).toBe("w-full text-sm")
    expect(container.querySelector("thead tr")?.className).toBe(
      "border-b border-border text-left text-muted-foreground"
    )
    expect(container.querySelector("tbody tr")?.className).toBe(
      "border-b border-border/60"
    )
  })

  it("hängt Zusatzklassen und title je Zeile an — und lässt beides weg, wo nichts geliefert wird", () => {
    render(<QafDataTable rows={ROWS} rowKey={(r) => r.id} columns={COLUMNS} />)
    expect(screen.getByTitle("Beleg r1").textContent).toBe("Alpha")
    // Zeilen-Ebene (Review-#508-M2): dieselbe Spalte, andere Zeile liefert
    // undefined → title-Attribut fehlt komplett.
    expect(screen.getByText("Beta").getAttribute("title")).toBeNull()
    // same-Zeile bekommt die Zusatzklasse; die andere liefert "" —
    // der Leerstring fällt sauber weg, KEIN trailing space
    // (Review-#508-M1: bewusste Verbesserung ggü. dem alten
    // Template-Literal-Handmuster, hier exakt gepinnt).
    const beta = screen.getByText("7")
    expect(beta.className).toBe("py-2 text-right tabular-nums text-muted-foreground")
    const alpha = screen.getByText("12.5")
    expect(alpha.className).toBe("py-2 text-right tabular-nums")
    expect(alpha.getAttribute("title")).toBeNull()
  })

  it("hängt rowClassName an die Basis-tr-Klasse — Leerstring fällt sauber weg (kein trailing space)", () => {
    const { container } = render(
      <QafDataTable
        rows={ROWS}
        rowKey={(r) => r.id}
        columns={COLUMNS}
        rowClassName={(r) => (r.same ? "bg-muted/40 font-semibold" : "")}
      />
    )
    const trs = container.querySelectorAll("tbody tr")
    // r1 (same=false) liefert "" → exakt die Basis-Klasse, KEIN trailing
    // space (bewusste Verbesserung ggü. dem alten Template-Literal, das
    // "border-b border-border/60 " erzeugt hätte — Muster Review-#508-M1).
    expect(trs[0].className).toBe("border-b border-border/60")
    expect(trs[1].className).toBe("border-b border-border/60 bg-muted/40 font-semibold")
  })

  it("rendert leere Zeilenliste als leeres tbody (Empty-State bleibt Sache der Sektion)", () => {
    const { container } = render(
      <QafDataTable rows={[]} rowKey={(r: Row) => r.id} columns={COLUMNS} />
    )
    expect(container.querySelectorAll("tbody tr")).toHaveLength(0)
    expect(container.querySelectorAll("th")).toHaveLength(2)
  })
})