/**
 * Abnahme für Phase 7 des Umsetzungsplans: Jede Seite muss mit echten
 * Beispieldaten rendern — in beiden Layouts — und die Leerzustände müssen
 * greifen, statt dass eine leere Liste die Seite zerlegt.
 */

import { render, screen, waitFor } from "@testing-library/react"
import { beforeEach, describe, expect, it } from "vitest"

import { DatenAnbieter } from "../daten/DatenKontext"
import { Shell } from "../Shell"
import type { SeitenName } from "../navigation"
import { TITEL } from "../navigation"
import { SeiteFuer } from "./register"
import { beispielApi } from "../tests/beispieldaten"
import { bildschirmbreiteSetzen } from "../tests/aufbau"

const ALLE_SEITEN = Object.keys(TITEL) as SeitenName[]

function zeige(name: SeitenName, id?: string) {
  const api = beispielApi()
  return render(
    <div className="ads-root" data-theme="nacht">
      <DatenAnbieter api={api}>
        <Shell
          route={id === undefined ? { name } : { name, id }}
          geheZu={() => {}}
          tabBeschriftung
        >
          <SeiteFuer
            route={id === undefined ? { name } : { name, id }}
            geheZu={() => {}}
            tabBeschriftung
            setzeTabBeschriftung={() => {}}
            beiAbmeldung={() => {}}
          />
        </Shell>
      </DatenAnbieter>
    </div>,
  )
}

describe("Alle Seiten rendern mit Beispieldaten", () => {
  beforeEach(() => {
    bildschirmbreiteSetzen(390)
  })

  for (const name of ALLE_SEITEN) {
    it(`${name} (${TITEL[name]})`, async () => {
      const id = name === "trip" ? "t1" : name === "fill" ? "f1" : undefined
      const { container } = zeige(name, id)
      // Nach der Erstladung darf kein Ladehinweis mehr stehen.
      await waitFor(() => {
        expect(container.querySelector(".dm-laden")).toBeNull()
      })
      expect(container.textContent?.length ?? 0).toBeGreaterThan(20)
    })
  }

  it("rendert jede Seite auch im Flächenlayout", async () => {
    bildschirmbreiteSetzen(1280)
    for (const name of ALLE_SEITEN) {
      const id = name === "trip" ? "t1" : name === "fill" ? "f1" : undefined
      const { container, unmount } = zeige(name, id)
      await waitFor(() => {
        expect(container.querySelector(".dm-laden")).toBeNull()
      })
      expect(container.querySelector(".dm-seitenleiste")).not.toBeNull()
      unmount()
    }
  })
})

describe("Inhalte kommen wirklich aus den Daten", () => {
  beforeEach(() => {
    bildschirmbreiteSetzen(390)
  })

  it("zeigt Kilometerstand und Reichweite auf der Übersicht", async () => {
    zeige("home")
    await waitFor(() => expect(screen.getByText("48.250")).toBeTruthy())
    expect(screen.getByText("385")).toBeTruthy()
  })

  it("zeigt einen unbekannten Prüfpunkt als unbekannt, nicht als sicher", async () => {
    const { container } = zeige("sicherheit")
    await waitFor(() => expect(container.querySelector(".dm-pruefliste")).not.toBeNull())
    expect(container.querySelectorAll(".dm-punkt--unbekannt").length).toBe(1)
    expect(screen.getByText("unbekannt")).toBeTruthy()
  })

  it("gruppiert Fahrten nach Jahr", async () => {
    zeige("trips")
    await waitFor(() => expect(screen.getByText("2026")).toBeTruthy())
    expect(screen.getByText("42,5 km")).toBeTruthy()
  })

  it("zeigt bei einer Fahrt ohne Position keine erfundene Route", async () => {
    const { container } = zeige("trip", "t1")
    await waitFor(() => expect(screen.getByText("Keine Route aufgezeichnet")).toBeTruthy())
    expect(container.querySelector(".dm-karte")).toBeNull()
  })

  it("rechnet den Tankvorgang mit mengengewichtetem Preis", async () => {
    zeige("fill", "f1")
    await waitFor(() => expect(screen.getByText("48,70")).toBeTruthy())
    expect(screen.getByText("1,83 €")).toBeTruthy()
  })
})
