// Der Poster-Hintergrund der Erst-Einrichtung (5.5.0, Commander: „diverse
// Movie Cover die … im Hintergrund in nem Grid langsam von oben nach unten
// laufen"). Vor dem TMDb-Schlüssel ein ruhiges Raster leerer Film-Karten,
// danach echte Poster beliebter Filme (kern: erkennung.posterLaden). Die
// Spalten laufen langsam, jede in eigenem Tempo, die Liste ist verdoppelt,
// damit der Lauf nahtlos ist (Keyframes in stil.css: poster-lauf).
import { IconDisc, posterUrlGross } from '../bausteine'

const SPALTEN = 7
const JE_SPALTE = 6

export function PosterHintergrund({ pfade }: { pfade: string[] }) {
  const spalten: string[][] = Array.from({ length: SPALTEN }, () => [])
  pfade.forEach((p, i) => spalten[i % SPALTEN].push(p))
  return (
    <div className="pointer-events-none fixed inset-0 overflow-hidden" aria-hidden="true">
      <div className="absolute inset-0 flex gap-4 px-4 opacity-[0.5]">
        {spalten.map((spalte, i) => {
          // Auffüllen mit leeren Karten, damit jede Spalte voll ist.
          const karten: Array<string | null> = [...spalte]
          while (karten.length < JE_SPALTE) karten.push(null)
          const doppelt = [...karten, ...karten]
          return (
            <div
              key={i}
              className="poster-spalte flex flex-1 flex-col gap-4"
              style={{
                animationDuration: `${70 + (i % 3) * 25}s`,
                animationDelay: `${-i * 9}s`,
                marginTop: `${(i % 2) * -120}px`,
              }}
            >
              {doppelt.map((p, j) =>
                p !== null ? (
                  <img key={j} src={posterUrlGross(p)} alt="" className="aspect-[2/3] w-full rounded-xl object-cover ring-1 ring-gold/25" loading="lazy" />
                ) : (
                  <div key={j} className="flex aspect-[2/3] w-full items-center justify-center rounded-xl bg-gradient-to-br from-[oklch(0.27_0.03_75)] to-[oklch(0.19_0.02_75)] ring-1 ring-gold/30">
                    <IconDisc groesse={28} farbe="oklch(0.6 0.08 75)" />
                  </div>
                ),
              )}
            </div>
          )
        })}
      </div>
      {/* Der Verlauf ins Bühnen-Schwarz — die Poster bleiben Kulisse, der
          Assistent bleibt lesbar. */}
      <div className="absolute inset-0 bg-gradient-to-b from-buehne/35 via-buehne/55 to-buehne/90" />
    </div>
  )
}