import { clsx } from "clsx";
import { posterUrl, type ImageSize } from "@/lib/image-url";
import { FlimmerMark } from "@/components/brand/FlimmerLogo";

/**
 * Posterbild mit Rückfallebene.
 *
 * Nicht jeder Titel hat bei TMDB ein Poster, manuell angelegte schon gar
 * nicht, und einzelne Pfade verschwinden mit der Zeit.
 *
 * Die Rückfallkachel liegt deshalb **dauerhaft darunter**, das Bild darüber:
 * lädt es, verdeckt es die Kachel; lädt es nicht, bleibt die Kachel stehen.
 * Bewusst ohne onError-Handler — ein Bild kann schon fehlschlagen, bevor React
 * den Handler überhaupt angehängt hat. Das leere alt-Attribut sorgt dafür,
 * dass ein kaputtes Bild in sich zusammenfällt statt ein Symbol zu zeigen;
 * den Titel trägt der Container als aria-label.
 */
export function Poster({
  path,
  alt,
  size = "w342",
  className,
  sizes = "(min-width: 1024px) 12rem, 40vw",
  priority = false,
}: {
  path: string | null | undefined;
  alt: string;
  size?: ImageSize;
  className?: string;
  sizes?: string;
  priority?: boolean;
}) {
  const url = posterUrl(path, size);

  return (
    <div
      role="img"
      aria-label={alt}
      className={clsx(
        "relative aspect-[2/3] w-full overflow-hidden rounded-[var(--radius-poster,0.875rem)] bg-[var(--fl-surface-2)]",
        className,
      )}
    >
      <div
        aria-hidden
        className="absolute inset-0 flex flex-col items-center justify-center gap-2 p-3 text-center"
        style={{ backgroundImage: "var(--fl-gradient-soft)" }}
      >
        <FlimmerMark className="h-8 w-8 opacity-70" flat />
        <span className="line-clamp-3 text-xs text-[var(--fl-muted)]">{alt}</span>
      </div>

      {url && (
        // Bewusst <img> statt next/image: die Bilder laufen bereits über den
        // eigenen Cache-Endpunkt, eine zweite Optimierungsschicht brächte dem
        // selbst gehosteten Server nur zusätzliche Last.
        // eslint-disable-next-line @next/next/no-img-element
        <img
          src={url}
          alt=""
          sizes={sizes}
          loading={priority ? "eager" : "lazy"}
          decoding="async"
          className="absolute inset-0 h-full w-full object-cover"
        />
      )}
    </div>
  );
}

/** Breitbild-Variante für Kopfbereiche (Backdrop). */
export function Backdrop({
  path,
  alt,
  className,
}: {
  path: string | null | undefined;
  alt: string;
  className?: string;
}) {
  const url = posterUrl(path, "w1280");
  if (!url) return null;

  return (
    <div className={clsx("absolute inset-0 overflow-hidden", className)} aria-hidden>
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img src={url} alt="" className="h-full w-full object-cover opacity-25" />
      <div
        className="absolute inset-0"
        style={{
          background:
            "linear-gradient(to top, var(--fl-bg) 8%, color-mix(in oklab, var(--fl-bg) 70%, transparent) 55%, color-mix(in oklab, var(--fl-bg) 30%, transparent) 100%)",
        }}
      />
    </div>
  );
}